@node-core/ui-components 0.0.1 → 1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d

package/Common/Modal/index.module.css

@@ -0,0 +1,79 @@
+@reference "../../styles/index.css";
+
+.overlay {
+  @apply fixed
+    inset-0
+    flex
+    justify-center
+    bg-white/40
+    backdrop-blur-[2px]
+    dark:bg-neutral-950/40;
+
+  .content {
+    @apply xs:p-6
+      relative
+      m-4
+      inline-flex
+      w-full
+      max-w-3xl
+      flex-col
+      overflow-y-auto
+      rounded
+      border
+      border-neutral-200
+      bg-white
+      p-8
+      focus:outline-none
+      sm:my-20
+      xl:p-12
+      dark:bg-neutral-950;
+  }
+
+  .close {
+    @apply absolute
+      right-3
+      top-3
+      block
+      size-7
+      cursor-pointer
+      rounded-sm
+      p-1
+      hover:bg-neutral-100
+      focus:outline-none
+      focus:ring-2
+      focus:ring-neutral-200
+      dark:hover:bg-neutral-900
+      dark:focus:ring-neutral-900;
+  }
+
+  .title {
+    @apply mb-2
+      text-3xl
+      font-semibold
+      text-neutral-900
+      dark:text-white;
+  }
+
+  .description {
+    @apply font-regular
+      mb-4
+      text-lg
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+
+  .wrapper {
+    @apply flex
+      flex-col
+      gap-4;
+
+    pre {
+      @apply overflow-auto;
+    }
+
+    code,
+    a {
+      @apply break-words;
+    }
+  }
+}

package/Common/Modal/index.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Modal from '#ui/Common/Modal';
+
+type Story = StoryObj<typeof Modal>;
+type Meta = MetaObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    heading: 'Node.js Versions Information',
+    subheading: 'Get all information about Node.js versions and their changes.',
+    children: (
+      <>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
+          atque sint doloremque, sapiente recusandae debitis libero nostrum
+          repudiandae explicabo suscipit ipsam eos dolorem, necessitatibus odit
+          quos delectus natus sunt sit!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum
+          asperiores corporis tempore neque, officiis fuga est facere deserunt
+          amet minus sit architecto blanditiis hic sed odit cumque numquam
+          dignissimos delectus.
+        </p>
+      </>
+    ),
+  },
+};
+
+export default { component: Modal } as Meta;

package/Common/Modal/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import * as Dialog from '@radix-ui/react-dialog';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type ModalProps = PropsWithChildren<{
+  heading: string;
+  subheading?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}>;
+
+const Modal: FC<ModalProps> = ({
+  heading,
+  subheading,
+  children,
+  open = false,
+  onOpenChange = () => {},
+}) => (
+  <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+      <Dialog.Overlay className={styles.overlay}>
+        <Dialog.Content className={styles.content}>
+          <Dialog.Trigger className={styles.close}>
+            <XMarkIcon />
+          </Dialog.Trigger>
+
+          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
+
+          {subheading && (
+            <Dialog.Description className={styles.description}>
+              {subheading}
+            </Dialog.Description>
+          )}
+
+          <main className={styles.wrapper}>{children}</main>
+
+          <Dialog.Close />
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default Modal;

package/Common/NodejsLogo/index.module.css

@@ -0,0 +1,6 @@
+@reference "../../styles/index.css";
+
+.nodejsLogo {
+  @apply h-6
+    w-20;
+}

package/Common/NodejsLogo/index.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NodejsLogo from '#ui/Common/NodejsLogo';
+
+type Story = StoryObj<typeof NodejsLogo>;
+type Meta = MetaObj<typeof NodejsLogo>;
+
+export const Default: Story = {};
+
+export const WithPride: Story = {
+  args: { variant: 'pride' },
+};
+
+export default { component: NodejsLogo } as Meta;

package/Common/NodejsLogo/index.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+
+import NodejsIcon from '#ui/Icons/Logos/Nodejs';
+import type { LogoVariant } from '#ui/types';
+
+import style from './index.module.css';
+
+type NodejsLogoProps = {
+  variant?: LogoVariant;
+  ariaLabel?: string;
+};
+
+const NodejsLogo: FC<NodejsLogoProps> = ({
+  variant = 'default',
+  ariaLabel,
+}) => {
+  return (
+    <NodejsIcon
+      variant={variant}
+      className={style.nodejsLogo}
+      ariaLabel={ariaLabel}
+    />
+  );
+};
+
+export default NodejsLogo;

package/Common/Notification/index.module.css

@@ -0,0 +1,20 @@
+@reference "../../styles/index.css";
+
+.root {
+  @apply m-6
+    rounded-sm
+    border
+    border-neutral-200
+    bg-white
+    px-4
+    py-3
+    shadow-lg
+    dark:border-neutral-800
+    dark:bg-neutral-900;
+}
+
+.message {
+  @apply font-medium
+    text-green-600
+    dark:text-white;
+}

package/Common/Notification/index.stories.tsx

@@ -0,0 +1,36 @@
+import { CodeBracketIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Notification from '#ui/Common/Notification';
+
+type Story = StoryObj<typeof Notification>;
+type Meta = MetaObj<typeof Notification>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    duration: 5000,
+    children: 'Copied to clipboard!',
+  },
+};
+
+export const TimedNotification: Story = {
+  args: {
+    duration: 5000,
+    children: 'Copied to clipboard!',
+  },
+};
+
+export const WithJSX: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="flex items-center gap-3">
+        <CodeBracketIcon className="h-4 w-4" />
+        Copied to clipboard!
+      </div>
+    ),
+  },
+};
+
+export default { component: Notification } as Meta;

package/Common/Notification/index.tsx

@@ -0,0 +1,34 @@
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type NotificationProps = {
+  open?: boolean;
+  duration?: number;
+  onChange?: (value: boolean) => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const Notification: FC<NotificationProps> = ({
+  open,
+  duration = 5000,
+  onChange,
+  children,
+  className,
+}: NotificationProps) => (
+  <ToastPrimitive.Root
+    open={open}
+    duration={duration}
+    onOpenChange={onChange}
+    className={classNames(styles.root, className)}
+  >
+    <ToastPrimitive.Title className={styles.message}>
+      {children}
+    </ToastPrimitive.Title>
+  </ToastPrimitive.Root>
+);
+
+export default Notification;

package/Common/Preview/index.module.css

@@ -0,0 +1,79 @@
+@reference "../../styles/index.css";
+
+.root {
+  @apply after:bg-gradient-radial
+    @container/preview
+    relative
+    flex
+    aspect-[1.90/1]
+    items-center
+    rounded-sm
+    border
+    border-neutral-900
+    bg-neutral-950
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-1/3
+    after:rounded-full
+    after:blur-2xl
+    after:content-[''];
+
+  &.announcements {
+    @apply after:from-green-700/90;
+  }
+
+  &.release {
+    @apply after:from-info-600/90;
+  }
+
+  &.vulnerability {
+    @apply after:from-warning-600/90;
+  }
+
+  .container {
+    @apply @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl
+      z-10
+      mx-auto
+      flex
+      w-2/3
+      max-w-xl
+      flex-col
+      gap-4
+      text-center
+      text-xs
+      font-semibold
+      text-white;
+
+    .hexagon {
+      @apply @md/preview:h-3/5
+        @md/preview:w-3/5
+        @lg/preview:h-2/3
+        @lg/preview:w-2/3
+        @xl/preview:h-3/5
+        @xl/preview:w-3/5
+        @2xl/preview:h-2/3
+        @2xl/preview:w-2/3
+        absolute
+        inset-0
+        m-auto
+        size-full;
+    }
+
+    .logo {
+      @apply @md/preview:size-14
+        @lg/preview:size-16
+        @xl/preview:size-20
+        mx-auto
+        size-6;
+    }
+  }
+}

package/Common/Preview/index.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Preview from '#ui/Common/Preview';
+
+type Story = StoryObj<typeof Preview>;
+type Meta = MetaObj<typeof Preview>;
+
+export const Announcement: Story = {
+  args: {
+    type: 'announcements',
+    title:
+      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
+  },
+};
+
+export const Release: Story = {
+  args: {
+    type: 'release',
+    title: 'Node v20.5.0 (Current)',
+  },
+};
+
+export const Vulnerability: Story = {
+  args: {
+    type: 'vulnerability',
+    title: 'OpenSSL update assessment, and Node.js project plans',
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    title:
+      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
+  },
+  decorators: [
+    Story => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default { component: Preview } as Meta;

package/Common/Preview/index.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
+import type { BlogPreviewType } from '#ui/types';
+
+import styles from './index.module.css';
+
+type PreviewProps = {
+  title: string;
+  type?: BlogPreviewType;
+};
+
+const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
+  <div className={classNames(styles.root, styles[type])}>
+    <div className={styles.container} aria-hidden={true}>
+      <HexagonGrid className={styles.hexagon} />
+      <JsWhiteIcon className={styles.logo} />
+      {title}
+    </div>
+  </div>
+);
+
+export default Preview;

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -0,0 +1,47 @@
+@reference "../../../styles/index.css";
+
+.group {
+  @apply flex
+    flex-col
+    gap-4
+    text-sm
+    font-medium
+    text-neutral-800
+    dark:text-neutral-200;
+
+  .items {
+    @apply relative
+      -left-1
+      flex
+      flex-col
+      gap-2
+      after:absolute
+      after:left-[0.45rem]
+      after:top-0
+      after:z-10
+      after:h-full
+      after:w-px
+      after:bg-neutral-200
+      after:content-['']
+      dark:after:bg-neutral-800;
+
+    a {
+      @apply first:before:absolute
+        first:before:bottom-[calc(50%+0.25rem)]
+        first:before:left-0
+        first:before:h-20
+        first:before:w-4
+        first:before:bg-white
+        first:before:content-['']
+        last:after:absolute
+        last:after:left-0
+        last:after:top-[calc(50%+0.25rem)]
+        last:after:h-20
+        last:after:w-4
+        last:after:bg-white
+        last:after:content-['']
+        first:dark:before:bg-neutral-950
+        last:dark:after:bg-neutral-950;
+    }
+  }
+}

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps, FC } from 'react';
+
+import ProgressionSidebarItem from '#ui/Common/ProgressionSidebar/ProgressionSidebarItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type ProgressionSidebarGroupProps = {
+  groupName: FormattedMessage;
+  items: Array<ComponentProps<typeof ProgressionSidebarItem>>;
+  pathname?: string;
+  as?: LinkLike;
+};
+
+const ProgressionSidebarGroup: FC<ProgressionSidebarGroupProps> = ({
+  groupName,
+  items,
+  ...props
+}) => (
+  <section className={styles.group}>
+    {groupName}
+    <div className={styles.items}>
+      {items.map(({ label, link }) => (
+        <ProgressionSidebarItem
+          key={link}
+          label={label}
+          link={link}
+          {...props}
+        />
+      ))}
+    </div>
+  </section>
+);
+
+export default ProgressionSidebarGroup;

package/Common/ProgressionSidebar/ProgressionSidebarIcon/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGAttributes } from 'react';
+
+const ProgressionSidebarIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    {...props}
+  >
+    <path d="M9 3.26795L8 2.6906L7 3.26795L3.5359 5.26795L2.5359 5.8453V7V11V12.1547L3.5359 12.7321L7 14.7321L8 15.3094L9 14.7321L12.4641 12.7321L13.4641 12.1547V11V7V5.8453L12.4641 5.26795L9 3.26795Z" />
+  </svg>
+);
+
+export default ProgressionSidebarIcon;

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -0,0 +1,39 @@
+@reference "../../../styles/index.css";
+
+a.item {
+  @apply font-regular
+    relative
+    z-20
+    flex
+    w-full
+    items-center
+    gap-1
+    overflow-hidden
+    text-sm
+    text-neutral-800
+    dark:text-neutral-200;
+
+  &:hover {
+    @apply text-neutral-900
+      motion-safe:transition-colors
+      dark:text-white;
+  }
+
+  svg {
+    @apply shrink-0
+      fill-neutral-200
+      stroke-white
+      stroke-[4]
+      dark:fill-neutral-800
+      dark:stroke-neutral-950;
+  }
+
+  &.active {
+    @apply text-neutral-900
+      dark:text-white;
+
+    svg {
+      @apply fill-green-500;
+    }
+  }
+}

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
+import ProgressionSidebarIcon from '#ui/Common/ProgressionSidebar/ProgressionSidebarIcon';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type ProgressionSidebarItemProps = {
+  label: FormattedMessage;
+  link: string;
+  as?: LinkLike;
+  pathname?: string;
+};
+
+const ProgressionSidebarItem: FC<ProgressionSidebarItemProps> = ({
+  label,
+  link,
+  ...props
+}) => (
+  <BaseActiveLink
+    className={styles.item}
+    activeClassName={styles.active}
+    href={link}
+    {...props}
+  >
+    <ProgressionSidebarIcon />
+    {label}
+  </BaseActiveLink>
+);
+
+export default ProgressionSidebarItem;

package/Common/ProgressionSidebar/index.module.css

@@ -0,0 +1,30 @@
+@reference "../../styles/index.css";
+
+.wrapper {
+  @apply flex
+    w-full
+    flex-col
+    gap-8
+    overflow-auto
+    border-r-0
+    border-neutral-200
+    bg-white
+    px-4
+    py-6
+    sm:border-r
+    md:max-w-xs
+    lg:px-6
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
+  > section {
+    @apply hidden
+      sm:flex;
+  }
+
+  > span {
+    @apply flex
+      w-full
+      sm:hidden;
+  }
+}