@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9

package/Common/Select/index.tsx

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

@@ -1,13 +1,16 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .root {
-  flex-shrink: 0;
-  background-color: var(--color-neutral-800, #556066);
+  @apply shrink-0
+    bg-neutral-800;
+
   &.horizontal {
-    height: 1px;
-    width: 100%;
+    @apply h-px
+      w-full;
   }
+
   &.vertical {
-    height: 100%;
-    width: 1px;
+    @apply h-full
+      w-px;
   }
 }

package/Common/Separator/index.stories.tsx

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

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

@@ -1,127 +1,30 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .skeleton {
-  pointer-events: none;
-  animation: pulse 500ms infinite alternate-reverse;
-  cursor: default;
-  border-radius: var(--radius-md, 0.375rem);
-  --tw-border-style: none;
-  border-style: none;
-  background-clip: border-box;
-  color: transparent;
-  --tw-shadow: 0 0 #0000;
-  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;
-  }
-  -webkit-user-select: none;
-  user-select: none;
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    animation: pulse-dark 500ms infinite alternate-reverse;
-  }
-}
+  @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] {
-  --tw-leading: 1;
-  line-height: 1;
+  @apply leading-none;
 }
+
 .skeleton:empty {
-  display: block;
-  height: calc(var(--spacing, 0.25rem)*3);
+  @apply block
+    h-3;
 }
+
 .skeleton > *,
 .skeleton::after,
 .skeleton::before {
-  visibility: hidden;
-}
-@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;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-@keyframes pulse {
-  from {
-    background: var(--color-pulse-100);
-  }
-  to {
-    background: var(--color-pulse-200);
-  }
-}
-@keyframes pulse-dark {
-  from {
-    background: var(--color-pulse-300);
-  }
-  to {
-    background: var(--color-pulse-400);
-  }
+  @apply invisible;
 }

package/Common/Skeleton/index.tsx

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

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

@@ -1,72 +1,54 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .tabsRoot {
-  display: grid;
-  max-width: 100%;
+  @apply grid
+    max-w-full;
+
   .tabsList {
-    display: flex;
-    gap: calc(var(--spacing, 0.25rem)*2);
-    overflow-x: auto;
-    font-family: var(--font-open-sans, var(--font-open-sans));
-    scrollbar-width: thin;
+    @apply font-open-sans
+      scrollbar-thin
+      flex
+      gap-2
+      overflow-x-auto;
+
     .tabsTrigger {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 2px;
-      border-bottom-color: transparent;
-      padding-inline: calc(var(--spacing, 0.25rem)*1);
-      padding-bottom: 11px;
-      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-semibold, 600);
-      font-weight: var(--font-weight-semibold, 600);
-      white-space: nowrap;
-      color: var(--color-neutral-800, #556066);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-200, #e9edf0);
-      }
+      @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 {
-        padding-left: calc(var(--spacing, 0.25rem)*1);
-        color: var(--color-neutral-500, #b1bcc2);
-        &:where([data-theme=dark], [data-theme=dark] *) {
-          color: var(--color-neutral-800, #556066);
-        }
+        @apply pl-1
+          text-neutral-500
+          dark:text-neutral-800;
       }
+
       &[data-state='active'] {
-        border-bottom-color: var(--color-green-600, #417e38);
-        color: var(--color-green-600, #417e38);
-        &:where([data-theme=dark], [data-theme=dark] *) {
-          border-bottom-color: var(--color-green-400, #84ba64);
-        }
-        &:where([data-theme=dark], [data-theme=dark] *) {
-          color: var(--color-green-400, #84ba64);
-        }
+        @apply border-b-green-600
+          text-green-600
+          dark:border-b-green-400
+          dark:text-green-400;
+
         .tabSecondaryLabel {
-          color: var(--color-green-800, #2c682c);
-          &:where([data-theme=dark], [data-theme=dark] *) {
-            color: var(--color-green-600, #417e38);
-          }
+          @apply text-green-800
+            dark:text-green-600;
         }
       }
     }
+
     .addons {
-      margin-left: auto;
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 2px;
-      border-bottom-color: transparent;
-      padding-inline: calc(var(--spacing, 0.25rem)*1);
-      padding-bottom: 11px;
-      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-semibold, 600);
-      font-weight: var(--font-weight-semibold, 600);
+      @apply ml-auto
+        border-b-2
+        border-b-transparent
+        px-1
+        pb-[11px]
+        text-sm
+        font-semibold;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Common/Tabs/index.stories.tsx

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