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

package/Common/LanguageDropDown/index.tsx

@@ -1,56 +0,0 @@
-import { LanguageIcon } from '@heroicons/react/24/outline';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import type { SimpleLocaleConfig } from '#ui/types';
-
-import styles from './index.module.css';
-
-type LanguageDropDownProps = {
-  onChange?: (newLocale: SimpleLocaleConfig) => void;
-  currentLanguage: string;
-  availableLanguages: Array<SimpleLocaleConfig>;
-  ariaLabel: string;
-};
-
-const LanguageDropdown: FC<LanguageDropDownProps> = ({
-  onChange = () => {},
-  currentLanguage,
-  availableLanguages,
-  ariaLabel,
-}) => {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button className={styles.languageDropdown} aria-label={ariaLabel}>
-          <LanguageIcon height="20" />
-        </button>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="start"
-          className={styles.dropDownContent}
-          sideOffset={5}
-        >
-          <div>
-            {availableLanguages.map(({ name, code, localName }) => (
-              <DropdownMenu.Item
-                key={code}
-                onClick={() => onChange({ name, code, localName })}
-                className={classNames(styles.dropDownItem, {
-                  [styles.currentDropDown]: code === currentLanguage,
-                })}
-              >
-                {localName}
-              </DropdownMenu.Item>
-            ))}
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-};
-
-export default LanguageDropdown;

package/Common/Modal/index.stories.tsx

@@ -1,32 +0,0 @@
-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

@@ -1,48 +0,0 @@
-'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.stories.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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.stories.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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.stories.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,47 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,39 +0,0 @@
-@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

@@ -1,32 +0,0 @@
-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

@@ -1,30 +0,0 @@
-@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;
-  }
-}

package/Common/ProgressionSidebar/index.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ProgressionSidebar from '#ui/Common/ProgressionSidebar';
-
-type Story = StoryObj<typeof ProgressionSidebar>;
-type Meta = MetaObj<typeof ProgressionSidebar>;
-
-export const Default: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'Getting Started',
-        items: [
-          {
-            label: 'Introduction to Node.js',
-            link: '/',
-          },
-          {
-            label: 'How to install Node.js',
-            link: '/how-to-install-nodejs',
-          },
-          {
-            label: 'How much JavaScript do you need to know to use Node.js?',
-            link: '/how-much-javascript-do-you-need-to-know-to-use-nodejs',
-          },
-          {
-            label: 'Differences between Node.js and the Browser',
-            link: '/differences-between-nodejs-and-the-browser',
-          },
-          {
-            label: 'The V8 JavaScript Engine',
-            link: '/the-v8-javascript-engine',
-          },
-          {
-            label: 'An introduction to the npm package manager',
-            link: '/an-introduction-to-the-npm-package-manager',
-          },
-        ],
-      },
-      {
-        groupName: 'Asynchronous Work',
-        items: [
-          {
-            label: 'Asynchronous flow control',
-            link: '/asynchronous-flow-control',
-          },
-          {
-            label: 'Overview of Blocking vs Non-Blocking',
-            link: '/overview-of-blocking-vs-non-blocking',
-          },
-        ],
-      },
-      {
-        groupName: 'Manipulating Files',
-        items: [
-          {
-            label: 'Node.js file stats',
-            link: '/nodejs-file-stats',
-          },
-          {
-            label: 'Node.js File Paths',
-            link: '/nodejs-file-paths',
-          },
-        ],
-      },
-      {
-        groupName: 'Single item',
-        items: [
-          {
-            label: 'Item',
-            link: '/item',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default { component: ProgressionSidebar } as Meta;

package/Common/ProgressionSidebar/index.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useRef, type ComponentProps, type FC } from 'react';
-
-import ProgressionSidebarGroup from '#ui/Common/ProgressionSidebar/ProgressionSidebarGroup';
-import Select from '#ui/Common/Select';
-import type { LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarProps = {
-  groups: Array<ComponentProps<typeof ProgressionSidebarGroup>>;
-  pathname?: string;
-  title: string;
-  onSelect: (value: string) => void;
-  as?: LinkLike;
-};
-
-const ProgressionSidebar: FC<ProgressionSidebarProps> = ({
-  groups,
-  pathname,
-  title,
-  onSelect,
-  as,
-}) => {
-  const ref = useRef<HTMLElement>(null);
-  const selectItems = groups.map(({ items, groupName }) => ({
-    label: groupName,
-    items: items.map(({ label, link }) => ({ value: link, label })),
-  }));
-
-  const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
-    .find(item => pathname === item.value);
-
-  return (
-    <nav className={styles.wrapper} ref={ref}>
-      <Select
-        label={title}
-        onChange={onSelect}
-        values={selectItems}
-        defaultValue={currentItem?.value}
-      />
-
-      {groups.map(({ groupName, items }) => (
-        <ProgressionSidebarGroup
-          key={groupName.toString()}
-          groupName={groupName}
-          items={items}
-          as={as}
-          pathname={pathname}
-        />
-      ))}
-    </nav>
-  );
-};
-
-export default ProgressionSidebar;