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

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

@@ -1,328 +1,161 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .select {
-  display: inline-flex;
-  flex-direction: column;
-  gap: calc(var(--spacing, 0.25rem)*1.5);
+  @apply inline-flex
+    flex-col
+    gap-1.5;
+
   .label {
-    display: block;
-    width: 100%;
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
-  }
+    @apply block
+      w-full
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+
   .trigger {
-    display: inline-flex;
-    height: calc(var(--spacing, 0.25rem)*11);
-    width: 100%;
-    min-width: 17rem;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(var(--spacing, 0.25rem)*2);
-    border-radius: var(--radius-sm, 0.25rem);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-neutral-300, #d9e1e4);
-    background-color: var(--color-white, #fff);
-    padding-inline: calc(var(--spacing, 0.25rem)*3.5);
-    padding-block: calc(var(--spacing, 0.25rem)*2.5);
-    text-align: left;
-    font-size: var(--text-base, 1rem);
-    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-    color: var(--color-neutral-900, #2c3437);
-    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-outline-style: none;
-    outline-style: none;
-    @media (forced-colors: active) {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-    &:focus {
-      border-color: var(--color-neutral-500, #b1bcc2);
-    }
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    &:focus {
-      --tw-ring-color: var(--color-neutral-500, #b1bcc2);
-    }
-    &[data-placeholder] {
-      color: var(--color-neutral-800, #556066);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-neutral-800, #556066);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-950, #0d121c);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &:focus {
-        border-color: var(--color-neutral-600, #929fa5);
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &:focus {
-        --tw-ring-color: var(--color-neutral-600, #929fa5);
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-placeholder] {
-        color: var(--color-neutral-200, #e9edf0);
-      }
-    }
-  }
+    @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 {
-    display: flex;
-    height: calc(var(--spacing, 0.25rem)*5);
-    align-items: center;
-    gap: calc(var(--spacing, 0.25rem)*2);
+    @apply flex
+      h-5
+      items-center
+      gap-2;
   }
+
   .icon {
-    width: calc(var(--spacing, 0.25rem)*5);
-    height: calc(var(--spacing, 0.25rem)*5);
-    color: var(--color-neutral-600, #929fa5);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-400, #cbd4d9);
-    }
+    @apply size-5
+      text-neutral-600
+      dark:text-neutral-400;
   }
 }
+
 .dropdown {
-  max-height: calc(var(--spacing, 0.25rem)*48);
-  max-width: var(--container-xs, 20rem);
-  overflow: hidden;
-  overflow-y: auto;
-  border-radius: var(--radius-md, 0.375rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
-  }
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-800, #556066);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: var(--color-neutral-950, #0d121c);
-  }
+  @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 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-    padding-block: calc(var(--spacing, 0.25rem)*1.5);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-    -webkit-user-select: none;
-    user-select: none;
-  }
+    @apply select-none
+      truncate
+      px-2.5
+      py-1.5
+      text-sm
+      font-medium;
+  }
+
   .text {
-    color: var(--color-neutral-800, #556066);
-    &[data-highlighted] {
-      background-color: var(--color-green-500, #5fa04e);
-    }
-    &[data-highlighted] {
-      color: var(--color-white, #fff);
-    }
-    &[data-highlighted] {
-      --tw-outline-style: none;
-      outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-highlighted] {
-        background-color: var(--color-green-600, #417e38);
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-highlighted] {
-        color: var(--color-white, #fff);
-      }
-    }
-  }
+    @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 {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing, 0.25rem)*2);
+    @apply flex
+      items-center
+      gap-2;
   }
+
   .text > span > span {
-    max-width: calc(var(--spacing, 0.25rem)*64);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-wrap: wrap;
+    @apply max-w-64
+      truncate
+      text-wrap;
   }
+
   .label {
-    color: var(--color-neutral-600, #929fa5);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-400, #cbd4d9);
-    }
+    @apply text-neutral-600
+      dark:text-neutral-400;
   }
 }
+
 .dropdown:has(.label) .text > span {
   &:has(svg) > svg {
-    margin-left: calc(var(--spacing, 0.25rem)*3);
+    @apply ml-3;
   }
+
   &:not(&:has(svg)) > span {
-    margin-left: calc(var(--spacing, 0.25rem)*3);
+    @apply ml-3;
   }
 }
+
 .inline {
   .trigger {
-    height: auto;
-    min-width: fit-content;
-    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-    padding-block: calc(var(--spacing, 0.25rem)*2);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-  }
+    @apply h-auto
+      min-w-fit
+      px-2.5
+      py-2
+      text-sm
+      font-medium;
+  }
+
   .icon {
-    width: calc(var(--spacing, 0.25rem)*4);
-    height: calc(var(--spacing, 0.25rem)*4);
+    @apply size-4;
   }
+
   .text {
-    color: var(--color-neutral-900, #2c3437);
-    &[data-disabled] {
-      color: var(--color-neutral-600, #929fa5);
-    }
-    &[data-highlighted] {
-      background-color: var(--color-neutral-100, #f6f7f9);
-    }
-    &[data-highlighted] {
-      color: var(--color-neutral-900, #2c3437);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-disabled] {
-        color: var(--color-neutral-700, #6e7b83);
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-highlighted] {
-        background-color: var(--color-neutral-900, #2c3437);
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &[data-highlighted] {
-        color: var(--color-white, #fff);
-      }
-    }
-  }
+    @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 {
-    margin-top: calc(var(--spacing, 0.25rem)*1);
-    width: calc(100% + 1.5rem);
-    border-radius: 0.25rem;
+    @apply mt-1
+      w-[calc(100%+1.5rem)]
+      rounded;
   }
 }
+
 .scrollIcon {
-  margin-inline: auto;
-  margin-block: calc(var(--spacing, 0.25rem)*1);
-  width: calc(var(--spacing, 0.25rem)*4);
-  height: calc(var(--spacing, 0.25rem)*4);
-  color: var(--color-neutral-700, #6e7b83);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-200, #e9edf0);
-  }
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
+  @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;