feat(ui): add ui-components package

Author: avivkeller

apps/site/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { NextIntlClientProvider } from 'next-intl';
 import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
 import { NotificationProvider } from '@/providers/notificationProvider';
 
-import '../styles/index.css';
+import '@node-core/ui-components/styles/index.css';
 
 const preview: Preview = {
   parameters: {

apps/site/app/[locale]/error.tsx

@@ -4,7 +4,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import Button from '@/components/Common/Button';
+import Button from '@/components/withButton';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const ErrorPage: FC<{ error: Error }> = () => {

apps/site/app/[locale]/layout.tsx

@@ -10,7 +10,7 @@ import { availableLocalesMap, defaultLocale } from '@/next.locales.mjs';
 import { LocaleProvider } from '@/providers/localeProvider';
 import { ThemeProvider } from '@/providers/themeProvider';
 
-import '@/styles/index.css';
+import '@node-core/ui-components/styles/index.css';
 
 const fontClasses = classNames(IBM_PLEX_MONO.variable, OPEN_SANS.variable);
 

apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx

@@ -1,7 +1,7 @@
+import HexagonGridIcon from '@node-core/ui-components/Icons/HexagonGrid';
+import JsWhiteIcon from '@node-core/ui-components/Icons/Logos/JsWhite';
 import { ImageResponse } from 'next/og';
 
-import HexagonGrid from '@/components/Icons/HexagonGrid';
-import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
 import tailwindConfig from '@/tailwind.config';
@@ -34,10 +34,10 @@ export const GET = async (_: Request, props: StaticParams) => {
   return new ImageResponse(
     (
       <div tw="relative flex items-center justify-center bg-black w-[1200px] h-[600px]">
-        <HexagonGrid style={{ background: gridBackground }} />
+        <HexagonGridIcon style={{ background: gridBackground }} />
 
         <div tw="absolute mx-auto flex max-w-xl flex-col text-center text-3xl font-semibold text-white">
-          <JsIconWhite width={71} height={80} tw="mx-auto" />
+          <JsWhiteIcon width={71} height={80} tw="mx-auto" />
 
           <h2>{params.title.slice(0, 100)}</h2>
         </div>

apps/site/app/[locale]/not-found.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import Button from '@/components/Common/Button';
+import Button from '@/components/withButton';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {

apps/site/app/global-error.tsx

@@ -3,7 +3,7 @@
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import type { FC } from 'react';
 
-import Button from '@/components/Common/Button';
+import Button from '@/components/withButton';
 import BaseLayout from '@/layouts/Base';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 

apps/site/components/Common/AvatarGroup/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useState, useMemo, Fragment } from 'react';
@@ -8,7 +9,6 @@ import type { AvatarProps } from '@/components/Common/AvatarGroup/Avatar';
 import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
 import AvatarOverlay from '@/components/Common/AvatarGroup/Overlay';
-import Tooltip from '@/components/Common/Tooltip';
 
 import styles from './index.module.css';
 

apps/site/components/Common/BlogPostCard/index.tsx

@@ -1,8 +1,8 @@
+import Preview from '@node-core/ui-components/Common/Preview';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import FormattedTime from '@/components/Common/FormattedTime';
-import Preview from '@/components/Common/Preview';
 import Link from '@/components/Link';
 import WithAvatarGroup from '@/components/withAvatarGroup';
 import type { BlogCategory } from '@/types';