@node-core/ui-components 1.0.1-c0bc4dd7eb49f97f35ce0983849d17702404c76a → 1.0.1-da75492230302b0f459aab323d2f6fdac6269a06

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;

package/Common/Skeleton/index.tsx

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
-import { isValidElement } from 'react';
-
-import styles from './index.module.css';
-
-type SkeletonProps = { hide?: boolean; loading?: boolean; className?: string };
-
-const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
-  children,
-  className,
-  hide = false,
-  loading = true,
-}) => {
-  // This can be used to completely hide the children after the Skeleton has loaded
-  // If certain criterias do not match. This is useful for conditional rendering without
-  // changing the actual tree that the Skeleton is wrapping
-  if (!loading && hide) {
-    return null;
-  }
-
-  // If we finished loading, we can hide the Skeleton and render the children tree
-  if (!loading) {
-    return children;
-  }
-
-  return (
-    <span
-      tabIndex={-1}
-      aria-hidden="true"
-      className={classNames(styles.skeleton, className)}
-      data-inline-skeleton={isValidElement(children) ? undefined : true}
-    >
-      {children}
-    </span>
-  );
-};
-
-export default Skeleton;

package/Common/Tabs/__tests__/index.test.jsx

@@ -1,52 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Tabs from '../index';
-
-const Sut = ({ addons }) => {
-  const tabs = [
-    { key: 'package', label: 'Package Manager' },
-    { key: 'prebuilt', label: 'Prebuilt Installer' },
-    { key: 'source', label: 'Source Code' },
-  ];
-
-  return (
-    <Tabs tabs={tabs} defaultValue="package" addons={addons}>
-      <TabsPrimitive.Content value="package">
-        Package Manager
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="prebuilt">
-        Prebuilt Installer
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="source">Source Code</TabsPrimitive.Content>
-    </Tabs>
-  );
-};
-
-describe('Tabs', () => {
-  it('should render the correct number of tabs', async () => {
-    render(<Sut />);
-
-    assert.strictEqual(screen.getAllByRole('tab').length, 3);
-  });
-
-  it('should render the correct tab content when clicked', async () => {
-    render(<Sut />);
-
-    assert.equal(screen.getByRole('tabpanel').textContent, 'Package Manager');
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Source Code' }));
-
-    assert.equal(screen.getByRole('tabpanel').textContent, 'Source Code');
-  });
-
-  it('should render the given addons', async () => {
-    render(<Sut addons={<a href="/">addon</a>} />);
-
-    assert.ok(screen.getByRole('link', { name: 'addon' }).ownerDocument);
-  });
-});

package/Common/Tabs/index.stories.tsx

@@ -1,50 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import Tabs from '#ui/Common/Tabs';
-
-type Story = StoryObj<typeof Tabs>;
-type Meta = MetaObj<typeof Tabs>;
-
-const defaultArgs: ComponentProps<typeof Tabs> = {
-  defaultValue: 'prebuilt',
-  tabs: [
-    {
-      key: 'package',
-      label: 'Package Manager',
-    },
-    {
-      key: 'prebuilt',
-      label: 'Prebuilt Installer',
-    },
-    {
-      key: 'source',
-      label: 'Source Code',
-    },
-  ],
-  children: (
-    <>
-      <TabsPrimitive.Content value="package">
-        Package Manager
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="prebuilt">
-        Prebuilt Installer
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="source">Source Code</TabsPrimitive.Content>
-    </>
-  ),
-};
-
-export const Default: Story = {
-  args: defaultArgs,
-};
-
-export const WithAddon: Story = {
-  args: {
-    ...defaultArgs,
-    addons: 'addon',
-  },
-};
-
-export default { component: Tabs } as Meta;

package/Common/Tabs/index.tsx

@@ -1,54 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-
-import styles from './index.module.css';
-
-type Tab = {
-  key: string;
-  label: string;
-  secondaryLabel?: string;
-  value?: string;
-};
-
-type TabsProps = TabsPrimitive.TabsProps & {
-  tabs: Array<Tab>;
-  addons?: ReactNode;
-  triggerClassName?: string;
-};
-
-const Tabs: FC<PropsWithChildren<TabsProps>> = ({
-  tabs,
-  addons,
-  triggerClassName,
-  children,
-  ...props
-}) => (
-  <TabsPrimitive.Root
-    {...props}
-    className={classNames(styles.tabsRoot, props.className)}
-  >
-    <TabsPrimitive.List className={styles.tabsList}>
-      {tabs.map(tab => (
-        <TabsPrimitive.Trigger
-          key={tab.key}
-          value={tab.value ?? tab.key}
-          className={classNames(styles.tabsTrigger, triggerClassName)}
-        >
-          {tab.label}
-          {tab.secondaryLabel ? (
-            <span className={styles.tabSecondaryLabel}>
-              {tab.secondaryLabel}
-            </span>
-          ) : null}
-        </TabsPrimitive.Trigger>
-      ))}
-
-      {addons && <div className={styles.addons}>{addons}</div>}
-    </TabsPrimitive.List>
-
-    {children}
-  </TabsPrimitive.Root>
-);
-
-export default Tabs;