@node-core/ui-components 1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4 → 1.0.1-e1f87bde264af01e260a8efa4fab1749a2c6bc29

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;

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

@@ -1,35 +0,0 @@
-import { describe, it, beforeEach } from 'node:test';
-import assert from 'node:assert/strict';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ThemeToggle from '../';
-
-let mockCurrentTheme = 'light';
-
-const toggleTheme = () => {
-  mockCurrentTheme = mockCurrentTheme === 'light' ? 'dark' : 'light';
-};
-
-describe('ThemeToggle', () => {
-  let toggle;
-
-  beforeEach(() => {
-    mockCurrentTheme = 'light';
-
-    render(<ThemeToggle onClick={toggleTheme} />);
-    toggle = screen.getByRole('button');
-  });
-
-  it('switches dark theme to light theme', async () => {
-    mockCurrentTheme = 'dark';
-    await userEvent.click(toggle);
-    assert.equal(mockCurrentTheme, 'light');
-  });
-
-  it('switches light theme to dark theme', async () => {
-    await userEvent.click(toggle);
-    assert.equal(mockCurrentTheme, 'dark');
-  });
-});

package/Common/ThemeToggle/index.stories.tsx

@@ -1,10 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ThemeToggle from '#ui/Common/ThemeToggle';
-
-type Story = StoryObj<typeof ThemeToggle>;
-type Meta = MetaObj<typeof ThemeToggle>;
-
-export const Default: Story = {};
-
-export default { component: ThemeToggle } as Meta;

package/Common/ThemeToggle/index.tsx

@@ -1,15 +0,0 @@
-import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
-import type { FC, ButtonHTMLAttributes } from 'react';
-
-import styles from './index.module.css';
-
-const ThemeToggle: FC<ButtonHTMLAttributes<HTMLButtonElement>> = props => {
-  return (
-    <button type="button" className={styles.themeToggle} {...props}>
-      <MoonIcon className="block dark:hidden" height="20" />
-      <SunIcon className="hidden dark:block" height="20" />
-    </button>
-  );
-};
-
-export default ThemeToggle;

package/Common/Tooltip/index.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Tooltip from '#ui/Common/Tooltip';
-
-type Story = StoryObj<typeof Tooltip>;
-type Meta = MetaObj<typeof Tooltip>;
-
-const defaultProps = {
-  children: <a>Rocket Turtle</a>,
-  content: <div className="p-3">🚀 🐢</div>,
-};
-
-export const Default: Story = {
-  args: defaultProps,
-};
-
-export const Warning: Story = {
-  args: {
-    ...defaultProps,
-    kind: 'warning',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...defaultProps,
-    kind: 'error',
-  },
-};
-
-export const LeftSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'left',
-  },
-  decorators: [
-    Story => (
-      <div className="flex w-72 justify-end">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const RightSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'left',
-  },
-  decorators: [
-    Story => (
-      <div className="flex w-72 justify-start">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const TopSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'top',
-  },
-  decorators: [
-    Story => (
-      <div className="flex h-72 items-end">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default { component: Tooltip } as Meta;

package/Common/Tooltip/index.tsx

@@ -1,48 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-
-import styles from './index.module.css';
-
-type TooltipProps = {
-  asChild?: boolean;
-  content: ReactNode;
-  kind?: 'default' | 'warning' | 'error';
-  side?: TooltipPrimitive.TooltipContentProps['side'];
-  container?: HTMLElement | null;
-};
-
-const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
-  kind = 'default',
-  children,
-  content,
-  asChild = false,
-  side = 'bottom',
-  container,
-}) => (
-  <TooltipPrimitive.Provider delayDuration={200}>
-    <TooltipPrimitive.Root>
-      <TooltipPrimitive.Trigger asChild={asChild}>
-        {children}
-      </TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal container={container}>
-        <TooltipPrimitive.Content
-          side={side}
-          sideOffset={4}
-          className={classNames(styles[kind], styles.content, {
-            'mx-1.5': side === 'top' || side === 'bottom',
-          })}
-        >
-          {content}
-          <TooltipPrimitive.Arrow
-            className={styles.arrow}
-            width={14}
-            height={6}
-          />
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  </TooltipPrimitive.Provider>
-);
-
-export default Tooltip;

package/Containers/Article/index.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Article from '.';
-
-type Story = StoryObj<typeof Article>;
-type Meta = MetaObj<typeof Article>;
-
-const Sidebar = () => (
-  <div className="text-center">
-    <h3>Sidebar</h3>
-    <ul>
-      <li>Navigation Item 1</li>
-      <li>Navigation Item 2</li>
-      <li>Navigation Item 3</li>
-      <li>Navigation Item 4</li>
-    </ul>
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Sidebar />
-        <div>
-          <main>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-          </main>
-          <Sidebar />
-        </div>
-      </>
-    ),
-  },
-};
-
-export default { component: Article } as Meta;

package/Containers/Article/index.tsx

@@ -1,9 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-
-import styles from './index.module.css';
-
-const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
-  <div className={styles.articleLayout}>{children}</div>
-);
-
-export default ArticleLayout;