feat(ui): add ui-components package

Author: avivkeller

apps/site/.storybook/main.ts

@@ -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 WithButton from '@/components/withButton';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const ErrorPage: FC<{ error: Error }> = () => {
@@ -19,10 +19,10 @@ const ErrorPage: FC<{ error: Error }> = () => {
       <p className="-mt-4 max-w-sm text-center text-lg">
         {t('layouts.error.internalServerError.description')}
       </p>
-      <Button href="/">
+      <WithButton href="/">
         {t('layouts.error.backToHome')}
         <ArrowRightIcon />
-      </Button>
+      </WithButton>
     </GlowingBackdropLayout>
   );
 };

apps/site/.storybook/preview-head.html

@@ -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/.storybook/preview.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 WithButton from '@/components/withButton';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
@@ -30,10 +30,10 @@ const NotFoundPage: FC = () => {
       <p className="-mt-4 max-w-sm text-center text-lg">
         {t('layouts.error.notFound.description')}
       </p>
-      <Button href="/">
+      <WithButton href="/">
         {t('layouts.error.backToHome')}
         <ArrowRightIcon />
-      </Button>
+      </WithButton>
     </GlowingBackdropLayout>
   );
 };

apps/site/app/[locale]/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 WithButton from '@/components/withButton';
 import BaseLayout from '@/layouts/Base';
 import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
@@ -17,10 +17,10 @@ const GlobalErrorPage: FC<{ error: Error }> = () => (
           <p className="-mt-4 max-w-sm text-center text-lg">
             This page has thrown a non-recoverable error.
           </p>
-          <Button href="/">
+          <WithButton href="/">
             Back to Home
             <ArrowRightIcon />
-          </Button>
+          </WithButton>
         </GlowingBackdropLayout>
       </BaseLayout>
     </body>

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

@@ -0,0 +1,23 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import type { BannerProps } from '@node-core/ui-components/Common/Banner';
+import Banner from '@node-core/ui-components/Common/Banner';
+import type { FC, PropsWithChildren } from 'react';
+
+import Link from '@/components/Link';
+
+type BannerWithLinkProps = BannerProps & {
+  link: string;
+};
+
+const BannerWithLink: FC<PropsWithChildren<BannerWithLinkProps>> = ({
+  type = 'default',
+  link,
+  children,
+}) => (
+  <Banner type={type}>
+    {link ? <Link href={link}>{children}</Link> : children}
+    {link && <ArrowUpRightIcon />}
+  </Banner>
+);
+
+export default BannerWithLink;

apps/site/app/[locale]/not-found.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 { mapBlogCategoryToPreviewType } from '@/util/blogUtils';