@node-core/ui-components 1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4 → 1.0.1-e1f87bde264af01e260a8efa4fab1749a2c6bc29

package/Common/Breadcrumbs/BreadcrumbRoot/index.tsx

@@ -1,20 +0,0 @@
-import type { FC, PropsWithChildren, ComponentProps } from 'react';
-
-import styles from './index.module.css';
-
-const BreadcrumbRoot: FC<PropsWithChildren<ComponentProps<'nav'>>> = ({
-  children,
-  ...props
-}) => (
-  <nav aria-label="breadcrumb" {...props}>
-    <ol
-      itemScope
-      itemType="https://schema.org/BreadcrumbList"
-      className={styles.list}
-    >
-      {children}
-    </ol>
-  </nav>
-);
-
-export default BreadcrumbRoot;

package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.tsx

@@ -1,9 +0,0 @@
-import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
-
-const BreadcrumbTruncatedItem = () => (
-  <BreadcrumbItem disableMicrodata>
-    <button disabled>…</button>
-  </BreadcrumbItem>
-);
-
-export default BreadcrumbTruncatedItem;

package/Common/Breadcrumbs/index.stories.tsx

@@ -1,94 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Breadcrumbs from '#ui/Common/Breadcrumbs';
-
-type Story = StoryObj<typeof Breadcrumbs>;
-type Meta = MetaObj<typeof Breadcrumbs>;
-
-export const Default: Story = {
-  args: {
-    links: [
-      {
-        label: 'Learn',
-        href: '/learn',
-      },
-      {
-        label: 'Getting Started',
-        href: '/learn/getting-started',
-      },
-      {
-        label: 'Introduction to Node.js',
-        href: '/learn/getting-started/intro',
-      },
-    ],
-  },
-};
-
-export const Linkless: Story = {
-  args: {
-    links: [
-      {
-        label: 'Learn',
-        href: '',
-      },
-      {
-        label: 'Getting Started',
-        href: '',
-      },
-      {
-        label: 'Introduction to Node.js',
-        href: '',
-      },
-    ],
-  },
-};
-
-export const Truncate: Story = {
-  args: {
-    links: [
-      {
-        label: 'Learn',
-        href: '/learn',
-      },
-      {
-        label: 'Getting Started',
-        href: '/learn/getting-started',
-      },
-      {
-        label: 'Introduction to Node.js',
-        href: '/learn/getting-started/intro',
-      },
-      {
-        label: 'Installation',
-        href: '/learn/getting-started/intro/installation',
-      },
-      {
-        label: 'Documentation',
-        href: '/learn/getting-started/intro/installation/documentation',
-      },
-    ],
-    maxLength: 1,
-  },
-};
-
-export const HiddenHome: Story = {
-  args: {
-    hideHome: true,
-    links: [
-      {
-        label: 'Learn',
-        href: '/learn',
-      },
-      {
-        label: 'Getting Started',
-        href: '/learn/getting-started',
-      },
-      {
-        label: 'Introduction to Node.js',
-        href: '/learn/getting-started/intro',
-      },
-    ],
-  },
-};
-
-export default { component: Breadcrumbs } as Meta;

package/Common/Breadcrumbs/index.tsx

@@ -1,81 +0,0 @@
-import type { FC } from 'react';
-import { useMemo } from 'react';
-
-import BreadcrumbHomeLink from '#ui/Common/Breadcrumbs/BreadcrumbHomeLink';
-import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
-import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
-import BreadcrumbRoot from '#ui/Common/Breadcrumbs/BreadcrumbRoot';
-import BreadcrumbTruncatedItem from '#ui/Common/Breadcrumbs/BreadcrumbTruncatedItem';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-export type BreadcrumbLink = {
-  label: FormattedMessage;
-  href: string | undefined;
-};
-
-type BreadcrumbsProps = {
-  links: Array<BreadcrumbLink>;
-  maxLength?: number;
-  hideHome?: boolean;
-  as: LinkLike;
-  homeLinkAriaLabel?: string;
-};
-
-const Breadcrumbs: FC<BreadcrumbsProps> = ({
-  links = [],
-  maxLength = 5,
-  hideHome = false,
-  as = 'a',
-  homeLinkAriaLabel,
-}) => {
-  const totalLength = links.length + +!hideHome;
-  const lengthOffset = maxLength - totalLength;
-  const isOverflow = lengthOffset < 0;
-
-  const items = useMemo(
-    () =>
-      links.map((link, index, items) => {
-        const position = index + 1;
-        const isLastItem = index === items.length - 1;
-        const hidden =
-          // We add 1 here to take into account of the truncated breadcrumb.
-          position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
-
-        return (
-          <BreadcrumbItem
-            key={link.label.toString()}
-            hidden={hidden}
-            hideSeparator={isLastItem}
-            position={position + +!hideHome}
-          >
-            {link.href || isLastItem ? (
-              <BreadcrumbLink
-                as={as}
-                href={link.href || undefined}
-                active={isLastItem}
-              >
-                {link.label}
-              </BreadcrumbLink>
-            ) : (
-              <span className="opacity-70">{link.label}</span>
-            )}
-          </BreadcrumbItem>
-        );
-      }),
-    [hideHome, isOverflow, lengthOffset, links]
-  );
-
-  return (
-    <BreadcrumbRoot>
-      {!hideHome && (
-        <BreadcrumbItem position={1}>
-          <BreadcrumbHomeLink as={as} aria-label={homeLinkAriaLabel} />
-        </BreadcrumbItem>
-      )}
-      {isOverflow && <BreadcrumbTruncatedItem />}
-      {items}
-    </BreadcrumbRoot>
-  );
-};
-
-export default Breadcrumbs;

package/Common/CodeTabs/index.stories.tsx

@@ -1,74 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import type { FC } from 'react';
-
-import BaseCodeBox from '#ui/Common/BaseCodeBox';
-import CodeTabs from '#ui/Common/CodeTabs';
-
-type Story = StoryObj<typeof CodeTabs>;
-type Meta = MetaObj<typeof CodeTabs>;
-
-const mjsContent = `import * as http from 'http';
-
-const hostname = '127.0.0.1';
-const port = 3000;
-
-const server = http.createServer((req, res) => {
-  res.statusCode = 200;
-  res.setHeader('Content-Type', 'text/plain');
-  res.end('Hello World');
-});
-
-server.listen(port, hostname, () => {
-  console.log(\`Server running at http://\${hostname}:\${port}/\`);
-});`;
-
-const cjsContent = `const http = require('http');
-
-const hostname = '127.0.0.1';
-const port = 3000;
-
-const server = http.createServer((req, res) => {
-  res.statusCode = 200;
-  res.setHeader('Content-Type', 'text/plain');
-  res.end('Hello World');
-});
-
-server.listen(port, hostname, () => {
-  console.log(\`Server running at http://\${hostname}:\${port}/\`);
-});`;
-
-const boxProps = {
-  onCopy: console.log,
-  copyText: '[Copy Text]',
-  copiedText: '[Copied Text]',
-};
-
-const TabsContent: FC = () => (
-  <>
-    <TabsPrimitive.Content key="mjs" value="mjs">
-      <BaseCodeBox language="JavaScript (MJS)" {...boxProps}>
-        <code>{mjsContent}</code>
-      </BaseCodeBox>
-    </TabsPrimitive.Content>
-    <TabsPrimitive.Content key="cjs" value="cjs">
-      <BaseCodeBox language="JavaScript (CJS)" {...boxProps}>
-        <code>{cjsContent}</code>
-      </BaseCodeBox>
-    </TabsPrimitive.Content>
-  </>
-);
-
-export const Default: Story = {};
-
-export default {
-  component: CodeTabs,
-  args: {
-    children: <TabsContent />,
-    defaultValue: 'mjs',
-    tabs: [
-      { key: 'mjs', label: 'MJS' },
-      { key: 'cjs', label: 'CJS' },
-    ],
-  },
-} as Meta;

package/Common/CodeTabs/index.tsx

@@ -1,16 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import Tabs from '#ui/Common/Tabs';
-
-import styles from './index.module.css';
-
-type CodeTabsProps = Pick<
-  ComponentProps<typeof Tabs>,
-  'tabs' | 'defaultValue' | 'children' | 'addons'
->;
-
-const CodeTabs: FC<CodeTabsProps> = ({ ...props }) => (
-  <Tabs {...props} className={styles.root} triggerClassName={styles.trigger} />
-);
-
-export default CodeTabs;

package/Common/GlowingBackdrop/index.stories.tsx

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

package/Common/GlowingBackdrop/index.tsx

@@ -1,13 +0,0 @@
-import type { FC } from 'react';
-
-import HexagonGrid from '#ui/Icons/HexagonGrid';
-
-import styles from './index.module.css';
-
-const GlowingBackdrop: FC = () => (
-  <div className={styles.glowingBackdrop}>
-    <HexagonGrid />
-  </div>
-);
-
-export default GlowingBackdrop;

package/Common/LanguageDropDown/index.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import LanguageDropDown from '#ui/Common/LanguageDropDown';
-
-type Story = StoryObj<typeof LanguageDropDown>;
-type Meta = MetaObj<typeof LanguageDropDown>;
-
-export const Default: Story = {
-  args: {
-    availableLanguages: [
-      { name: 'English', code: 'en', localName: 'English' },
-      { name: 'French', code: 'fr', localName: 'Français' },
-      { name: 'Spanish', code: 'es', localName: 'Español' },
-    ],
-    currentLanguage: 'en',
-  },
-};
-
-export default { component: LanguageDropDown } as Meta;

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;