@node-core/ui-components 0.0.1 → 1.0.1-23f195d7d72e3651ff23da791e2f997015a34433

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

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

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

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

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

@@ -0,0 +1,59 @@
+'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;

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

@@ -0,0 +1,67 @@
+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.module.css

@@ -0,0 +1,161 @@
+@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/Common/Select/index.stories.tsx

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