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

package/Common/Modal/index.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import { Modal, Title, Description, Content } from '#ui/Common/Modal';
-
-type Story = StoryObj<typeof Modal>;
-type Meta = MetaObj<typeof Modal>;
-
-export const Default: Story = {
-  args: {
-    open: true,
-    children: (
-      <Content>
-        <Title>Node.js Versions Information</Title>
-        <Description>
-          Get all information about Node.js versions and their changes.
-        </Description>
-        <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>
-      </Content>
-    ),
-  },
-};
-
-export default { component: Modal } as Meta;

package/Common/Modal/index.tsx

@@ -1,50 +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<{
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}>;
-
-const Modal: FC<ModalProps> = ({
-  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>
-
-          {children}
-
-          <Dialog.Close />
-        </Dialog.Content>
-      </Dialog.Overlay>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
-
-const Title = ({ children }: PropsWithChildren) => (
-  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
-);
-
-const Description = ({ children }: PropsWithChildren) => (
-  <Dialog.Description className={styles.description}>
-    {children}
-  </Dialog.Description>
-);
-
-const Content = ({ children }: PropsWithChildren) => (
-  <main className={styles.wrapper}>{children}</main>
-);
-
-export { Modal, Title, Description, Content };

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/Select/__tests__/index.test.jsx

@@ -1,67 +0,0 @@
-import { render } from '@testing-library/react';
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import Select from '..';
-
-const noop = () => {};
-
-describe('Select', () => {
-  const values = ['Option 1', 'Option 2', 'Option 3'];
-  const defaultValue = 'Option 1';
-  const placeholder = 'Select an option';
-  const dropdownLabel = 'Dropdown label';
-  const label = 'Option label';
-
-  global.ResizeObserver = class {
-    observe = noop;
-    unobserve = noop;
-    disconnect = noop;
-  };
-
-  it('renders the label when provided', () => {
-    const { getByLabelText } = render(
-      <Select
-        values={values}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByLabelText(label);
-    assert.ok(element.ownerDocument);
-  });
-
-  it('renders the default value when provided', () => {
-    const { getByText } = render(
-      <Select
-        values={values}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByText(defaultValue);
-    assert.ok(element.ownerDocument);
-  });
-
-  it('renders the placeholder when default value is not provided', () => {
-    const { getByText } = render(
-      <Select
-        values={values}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByText(placeholder);
-    assert.ok(element.ownerDocument);
-  });
-});

package/Common/Select/index.stories.tsx

@@ -1,111 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Select from '#ui/Common/Select';
-import * as OSIcons from '#ui/Icons/OperatingSystem';
-
-type Story = StoryObj<typeof Select>;
-type Meta = MetaObj<typeof Select>;
-
-export const Default: Story = {
-  args: {
-    values: ['v20.8.0', 'v19.9.0', 'v18.18.0', 'v17.9.1', 'v16.20.2'],
-    defaultValue: 'v16.20.2',
-    label: 'Node.js version',
-  },
-};
-
-export const WithoutLabel: Story = {
-  args: {
-    values: ['v20.8.0', 'v19.9.0', 'v18.18.0', 'v17.9.1', 'v16.20.2'],
-    defaultValue: 'v16.20.2',
-  },
-};
-
-export const WithScrollButtons: Story = {
-  args: {
-    values: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
-    defaultValue: 'Item 50',
-  },
-};
-
-export const DropdownLabel: Story = {
-  args: {
-    values: [
-      {
-        label: 'Getting Started',
-        items: [
-          {
-            value: 'section-1',
-            label: 'Getting Started',
-          },
-          {
-            value: 'section-2',
-            label: 'How to install Node.js',
-          },
-          {
-            value: 'section-3',
-            label: 'How much JavaScript do you need to know to use Node.js?',
-          },
-          {
-            value: 'section-4',
-            label: 'Differences between Node.js and the Browser',
-          },
-          {
-            value: 'section-5',
-            label: 'The V8 JavaScript Engine',
-          },
-          {
-            value: 'section-6',
-            label: 'An introduction to the npm package manager',
-          },
-          {
-            value: 'section-7',
-            label: 'ECMAScript 2015 (ES6) and beyond',
-          },
-          {
-            value: 'section-8',
-            label: 'Node.js, the difference between development and production',
-          },
-        ],
-      },
-    ],
-    placeholder: 'Select a guide',
-    label: 'Getting Started',
-  },
-};
-
-export const InlineSelect: Story = {
-  args: {
-    values: [
-      {
-        label: 'Platform',
-        items: [
-          {
-            value: 'linux',
-            label: 'Linux',
-            iconImage: <OSIcons.Linux width={16} height={16} />,
-          },
-          {
-            value: 'macos',
-            label: 'macOS',
-            iconImage: <OSIcons.Apple width={16} height={16} />,
-          },
-          {
-            value: 'windows',
-            label: 'Windows',
-            iconImage: <OSIcons.Microsoft width={16} height={16} />,
-          },
-          {
-            value: 'aix',
-            label: 'AIX',
-            iconImage: <OSIcons.AIX width={16} height={16} />,
-          },
-        ],
-      },
-    ],
-    defaultValue: 'macos',
-    inline: true,
-  },
-};
-
-export default { component: Select } as Meta;

package/Common/Select/index.tsx

@@ -1,187 +0,0 @@
-'use client';
-
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import classNames from 'classnames';
-import { useEffect, useId, useMemo, useState } from 'react';
-import type { ReactElement, ReactNode } from 'react';
-
-import Skeleton from '#ui/Common/Skeleton';
-import type { FormattedMessage } from '#ui/types';
-
-import styles from './index.module.css';
-
-export type SelectValue<T extends string> = {
-  label: FormattedMessage | string;
-  value: T;
-  iconImage?: ReactElement<SVGSVGElement>;
-  disabled?: boolean;
-};
-
-export type SelectGroup<T extends string> = {
-  label?: FormattedMessage | string;
-  items: Array<SelectValue<T>>;
-};
-
-const isStringArray = (values: Array<unknown>): values is Array<string> =>
-  Boolean(values[0] && typeof values[0] === 'string');
-
-const isValuesArray = <T extends string>(
-  values: Array<unknown>
-): values is Array<SelectValue<T>> =>
-  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
-
-type SelectProps<T extends string> = {
-  values: Array<SelectGroup<T>> | Array<T> | Array<SelectValue<T>>;
-  defaultValue?: T;
-  placeholder?: string;
-  label?: string;
-  inline?: boolean;
-  onChange?: (value: T) => void;
-  className?: string;
-  ariaLabel?: string;
-  loading?: boolean;
-  disabled?: boolean;
-};
-
-const Select = <T extends string>({
-  values = [],
-  defaultValue,
-  placeholder,
-  label,
-  inline,
-  onChange,
-  className,
-  ariaLabel,
-  loading = false,
-  disabled = false,
-}: SelectProps<T>): ReactNode => {
-  const id = useId();
-  const [value, setValue] = useState(defaultValue);
-
-  useEffect(() => setValue(defaultValue), [defaultValue]);
-
-  const mappedValues = useMemo(() => {
-    let mappedValues = values;
-
-    if (isStringArray(mappedValues)) {
-      mappedValues = mappedValues.map(value => ({ label: value, value }));
-    }
-
-    if (isValuesArray(mappedValues)) {
-      return [{ items: mappedValues }];
-    }
-
-    return mappedValues as Array<SelectGroup<T>>;
-  }, [values]);
-
-  // We render the actual item slotted to fix/prevent the issue
-  // of the tirgger flashing on the initial render
-  const currentItem = useMemo(
-    () =>
-      mappedValues
-        .flatMap(({ items }) => items)
-        .find(item => item.value === value),
-    [mappedValues, value]
-  );
-
-  const memoizedMappedValues = useMemo(() => {
-    return mappedValues.map(({ label, items }, key) => (
-      <SelectPrimitive.Group key={label?.toString() ?? key}>
-        {label && (
-          <SelectPrimitive.Label
-            className={classNames(styles.item, styles.label)}
-          >
-            {label}
-          </SelectPrimitive.Label>
-        )}
-
-        {items.map(({ value, label, iconImage, disabled }) => (
-          <SelectPrimitive.Item
-            key={value}
-            value={value}
-            disabled={disabled}
-            className={classNames(styles.item, styles.text)}
-          >
-            <SelectPrimitive.ItemText>
-              {iconImage}
-              <span>{label}</span>
-            </SelectPrimitive.ItemText>
-          </SelectPrimitive.Item>
-        ))}
-      </SelectPrimitive.Group>
-    ));
-    // We explicitly want to recalculate these values only when the values themselves changed
-    // This is to prevent re-rendering and re-calcukating the values on every render
-  }, [JSON.stringify(values)]);
-
-  // Both change the internal state and emit the change event
-  const handleChange = (value: T) => {
-    setValue(value);
-
-    if (typeof onChange === 'function') {
-      onChange(value);
-    }
-  };
-
-  return (
-    <Skeleton loading={loading}>
-      <span
-        className={classNames(
-          styles.select,
-          { [styles.inline]: inline },
-          className
-        )}
-      >
-        {label && (
-          <label className={styles.label} htmlFor={id}>
-            {label}
-          </label>
-        )}
-
-        <SelectPrimitive.Root
-          value={currentItem !== undefined ? value : undefined}
-          onValueChange={handleChange}
-          disabled={disabled}
-        >
-          <SelectPrimitive.Trigger
-            className={styles.trigger}
-            aria-label={ariaLabel}
-            id={id}
-          >
-            <SelectPrimitive.Value placeholder={placeholder}>
-              {currentItem !== undefined && (
-                <>
-                  {currentItem.iconImage}
-                  <span>{currentItem.label}</span>
-                </>
-              )}
-            </SelectPrimitive.Value>
-            <ChevronDownIcon className={styles.icon} />
-          </SelectPrimitive.Trigger>
-
-          <SelectPrimitive.Portal>
-            <SelectPrimitive.Content
-              position={inline ? 'popper' : 'item-aligned'}
-              className={classNames(styles.dropdown, {
-                [styles.inline]: inline,
-              })}
-            >
-              <SelectPrimitive.ScrollUpButton>
-                <ChevronUpIcon className={styles.scrollIcon} />
-              </SelectPrimitive.ScrollUpButton>
-              <SelectPrimitive.Viewport>
-                {memoizedMappedValues}
-              </SelectPrimitive.Viewport>
-              <SelectPrimitive.ScrollDownButton>
-                <ChevronDownIcon className={styles.scrollIcon} />
-              </SelectPrimitive.ScrollDownButton>
-            </SelectPrimitive.Content>
-          </SelectPrimitive.Portal>
-        </SelectPrimitive.Root>
-      </span>
-    </Skeleton>
-  );
-};
-
-export default Select;

package/Common/Separator/index.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Separator from '#ui/Common/Separator';
-
-type Story = StoryObj<typeof Separator>;
-type Meta = MetaObj<typeof Separator>;
-
-export const Horizontal: Story = {
-  args: {
-    orientation: 'horizontal',
-  },
-};
-
-export const Vertical: Story = {
-  args: {
-    orientation: 'vertical',
-  },
-};
-
-export default {
-  component: Separator,
-  parameters: {
-    layout: 'centered',
-  },
-  decorators: [
-    Story => (
-      <div className="size-32">
-        <Story />
-      </div>
-    ),
-  ],
-} as Meta;

package/Common/Separator/index.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import classNames from 'classnames';
-import type { FC, ComponentProps } from 'react';
-
-import styles from './index.module.css';
-
-const Separator: FC<ComponentProps<typeof SeparatorPrimitive.Root>> = ({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}) => (
-  <SeparatorPrimitive.Root
-    decorative={decorative}
-    orientation={orientation}
-    className={classNames(
-      styles.root,
-      orientation === 'horizontal' ? styles.horizontal : styles.vertical,
-      className
-    )}
-    {...props}
-  />
-);
-
-export default Separator;