feat(ui): add ui-components package

Author: avivkeller

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

@@ -1,7 +1,7 @@
+import HexagonGrid from '@node-core/ui-components/Icons/HexagonGrid';
+import JsIconWhite from '@node-core/ui-components/Icons/Logos/JsIconWhite';
 import { ImageResponse } from 'next/og';
 
-import HexagonGrid from '@/components/Icons/HexagonGrid';
-import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import {
   ENABLE_STATIC_EXPORT,
   VERCEL_ENV,

apps/site/components/Common/Badge.tsx

@@ -0,0 +1,11 @@
+import AbstractBadge from '@node-core/ui-components/Common/Badge';
+import type { BadgeProps } from '@node-core/ui-components/Common/Badge';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+
+const Badge: FC<BadgeProps> = props => {
+  return <AbstractBadge linkComponent={Link} {...props} />;
+};
+
+export default Badge;

apps/site/components/Common/Banner/index.tsx renamed to apps/site/components/Common/BannerWithLink.tsx

@@ -1,24 +1,23 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Banner from '@node-core/ui-components/Common/Banner';
 import type { FC, PropsWithChildren } from 'react';
 
 import Link from '@/components/Link';
 
-import styles from './index.module.css';
-
 type BannerProps = {
   link?: string;
   type?: 'default' | 'warning' | 'error';
 };
 
-const Banner: FC<PropsWithChildren<BannerProps>> = ({
-  type = 'default',
+const BannerWithLink: FC<PropsWithChildren<BannerProps>> = ({
+  type,
   link,
   children,
 }) => (
-  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+  <Banner type={type}>
     {link ? <Link href={link}>{children}</Link> : children}
     {link && <ArrowUpRightIcon />}
-  </div>
+  </Banner>
 );
 
-export default Banner;
+export default BannerWithLink;

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

@@ -1,7 +1,7 @@
+import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import AvatarGroup from '@/components/Common/AvatarGroup';
 import FormattedTime from '@/components/Common/FormattedTime';
 import Preview from '@/components/Common/Preview';
 import Link from '@/components/Link';

apps/site/components/Common/Breadcrumbs.tsx

@@ -0,0 +1,18 @@
+import AbstractBreadCrumbs from '@node-core/ui-components/Common/Breadcrumbs';
+import type { BreadcrumbsProps } from '@node-core/ui-components/Common/Breadcrumbs';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+
+const Breadcrumbs: FC<BreadcrumbsProps> = props => {
+  return (
+    <AbstractBreadCrumbs
+      useTranslations={useTranslations}
+      linkComponent={Link}
+      {...props}
+    />
+  );
+};
+
+export default Breadcrumbs;

apps/site/components/Common/Button.tsx

@@ -0,0 +1,16 @@
+import AbstractButton from '@node-core/ui-components/Common/Button';
+import type { FC, AnchorHTMLAttributes } from 'react';
+
+import Link from '@/components/Link';
+
+type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  kind?: 'neutral' | 'primary' | 'secondary' | 'special';
+  // We have an extra `disabled` prop as we simulate a button
+  disabled?: boolean;
+};
+
+const Button: FC<ButtonProps> = props => (
+  <AbstractButton linkComponent={Link} {...props} />
+);
+
+export default Button;

apps/site/components/Common/CodeBox.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import AbstractCodeBox from '@node-core/ui-components/Common/CodeBox';
+import type { CodeBoxProps } from '@node-core/ui-components/Common/CodeBox';
+import { useTranslations } from 'next-intl';
+import type { FC, PropsWithChildren } from 'react';
+
+import Link from '@/components/Link';
+import { useCopyToClipboard, useNotification } from '@/hooks';
+
+const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <AbstractCodeBox
+      useTranslations={useTranslations}
+      useCopyToClipboard={useCopyToClipboard}
+      useNotification={useNotification}
+      linkComponent={Link}
+      {...props}
+    >
+      {children}
+    </AbstractCodeBox>
+  );
+};
+
+export default CodeBox;

apps/site/components/Common/CrossLink.tsx

@@ -0,0 +1,18 @@
+import AbstractCrossLink from '@node-core/ui-components/Common/CrossLink';
+import type { CrossLinkProps } from '@node-core/ui-components/Common/CrossLink';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+
+const CrossLink: FC<CrossLinkProps> = props => {
+  return (
+    <AbstractCrossLink
+      linkComponent={Link}
+      useTranslations={useTranslations}
+      {...props}
+    />
+  );
+};
+
+export default CrossLink;

apps/site/components/Common/LanguageDropdown.tsx

@@ -0,0 +1,10 @@
+import AbstractLanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
+import type { LanguageDropDownProps } from '@node-core/ui-components/Common/LanguageDropDown';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+const LanguageDropDown: FC<LanguageDropDownProps> = props => (
+  <AbstractLanguageDropdown useTranslations={useTranslations} {...props} />
+);
+
+export default LanguageDropDown;

apps/site/components/Common/Pagination.tsx

@@ -0,0 +1,18 @@
+import AbstractPagination from '@node-core/ui-components/Common/Pagination';
+import type { PaginationProps } from '@node-core/ui-components/Common/Pagination';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+
+const Pagination: FC<PaginationProps> = props => {
+  return (
+    <AbstractPagination
+      linkComponent={Link}
+      useTranslations={useTranslations}
+      {...props}
+    />
+  );
+};
+
+export default Pagination;