@node-core/ui-components 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543 → 1.0.1-b2d4fae0fc29bf3aeebacb37572f47a0a81dd8ed

package/src/Common/Select/index.module.css

@@ -1,161 +0,0 @@
-@reference "../../styles/index.css";
-
-.select {
-  @apply inline-flex
-    flex-col
-    gap-1.5;
-
-  .label {
-    @apply block
-      w-full
-      text-sm
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  .trigger {
-    @apply shadow-xs
-      outline-hidden
-      inline-flex
-      h-11
-      w-full
-      min-w-[17rem]
-      items-center
-      justify-between
-      gap-2
-      rounded-sm
-      border
-      border-neutral-300
-      bg-white
-      px-3.5
-      py-2.5
-      text-left
-      text-base
-      font-medium
-      text-neutral-900
-      focus:border-neutral-500
-      focus:ring-1
-      focus:ring-neutral-500
-      data-[placeholder]:text-neutral-800
-      dark:border-neutral-800
-      dark:bg-neutral-950
-      dark:text-white
-      dark:focus:border-neutral-600
-      dark:focus:ring-neutral-600
-      dark:data-[placeholder]:text-neutral-200;
-  }
-
-  .trigger span {
-    @apply flex
-      h-5
-      items-center
-      gap-2;
-  }
-
-  .icon {
-    @apply size-5
-      text-neutral-600
-      dark:text-neutral-400;
-  }
-}
-
-.dropdown {
-  @apply max-h-48
-    max-w-xs
-    overflow-hidden
-    overflow-y-auto
-    rounded-md
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-950;
-
-  .item {
-    @apply select-none
-      truncate
-      px-2.5
-      py-1.5
-      text-sm
-      font-medium;
-  }
-
-  .text {
-    @apply data-[highlighted]:outline-hidden
-      text-neutral-800
-      data-[highlighted]:bg-green-500
-      data-[highlighted]:text-white
-      dark:text-neutral-200
-      dark:data-[highlighted]:bg-green-600
-      dark:data-[highlighted]:text-white;
-  }
-
-  .text > span {
-    @apply flex
-      items-center
-      gap-2;
-  }
-
-  .text > span > span {
-    @apply max-w-64
-      truncate
-      text-wrap;
-  }
-
-  .label {
-    @apply text-neutral-600
-      dark:text-neutral-400;
-  }
-}
-
-.dropdown:has(.label) .text > span {
-  &:has(svg) > svg {
-    @apply ml-3;
-  }
-
-  &:not(&:has(svg)) > span {
-    @apply ml-3;
-  }
-}
-
-.inline {
-  .trigger {
-    @apply h-auto
-      min-w-fit
-      px-2.5
-      py-2
-      text-sm
-      font-medium;
-  }
-
-  .icon {
-    @apply size-4;
-  }
-
-  .text {
-    @apply text-neutral-900
-      data-[highlighted]:bg-neutral-100
-      data-[disabled]:text-neutral-600
-      data-[highlighted]:text-neutral-900
-      dark:text-white
-      dark:data-[highlighted]:bg-neutral-900
-      dark:data-[disabled]:text-neutral-700
-      dark:data-[highlighted]:text-white;
-  }
-
-  &.dropdown {
-    @apply mt-1
-      w-[calc(100%+1.5rem)]
-      rounded;
-  }
-}
-
-.scrollIcon {
-  @apply mx-auto
-    my-1
-    size-4
-    text-neutral-700
-    dark:text-neutral-200;
-}

package/src/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/src/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/src/Common/Separator/index.module.css

@@ -1,16 +0,0 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply shrink-0
-    bg-neutral-800;
-
-  &.horizontal {
-    @apply h-px
-      w-full;
-  }
-
-  &.vertical {
-    @apply h-full
-      w-px;
-  }
-}

package/src/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/src/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/src/Common/Skeleton/index.module.css

@@ -1,30 +0,0 @@
-@reference "../../styles/index.css";
-
-.skeleton {
-  @apply outline-hidden
-    dark:animate-pulse-dark
-    pointer-events-none
-    animate-pulse
-    cursor-default
-    select-none
-    rounded-md
-    border-none
-    bg-clip-border
-    text-transparent
-    shadow-none;
-}
-
-.skeleton[data-inline-skeleton] {
-  @apply leading-none;
-}
-
-.skeleton:empty {
-  @apply block
-    h-3;
-}
-
-.skeleton > *,
-.skeleton::after,
-.skeleton::before {
-  @apply invisible;
-}

package/src/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/src/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/src/Common/Tabs/index.module.css

@@ -1,54 +0,0 @@
-@reference "../../styles/index.css";
-
-.tabsRoot {
-  @apply grid
-    max-w-full;
-
-  .tabsList {
-    @apply font-open-sans
-      scrollbar-thin
-      flex
-      gap-2
-      overflow-x-auto;
-
-    .tabsTrigger {
-      @apply whitespace-nowrap
-        border-b-2
-        border-b-transparent
-        px-1
-        pb-[11px]
-        text-sm
-        font-semibold
-        text-neutral-800
-        dark:text-neutral-200;
-
-      .tabSecondaryLabel {
-        @apply pl-1
-          text-neutral-500
-          dark:text-neutral-800;
-      }
-
-      &[data-state='active'] {
-        @apply border-b-green-600
-          text-green-600
-          dark:border-b-green-400
-          dark:text-green-400;
-
-        .tabSecondaryLabel {
-          @apply text-green-800
-            dark:text-green-600;
-        }
-      }
-    }
-
-    .addons {
-      @apply ml-auto
-        border-b-2
-        border-b-transparent
-        px-1
-        pb-[11px]
-        text-sm
-        font-semibold;
-    }
-  }
-}