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

package/Common/Tabs/index.tsx

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

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

@@ -1,22 +1,15 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .themeToggle {
-  width: calc(var(--spacing, 0.25rem)*9);
-  height: calc(var(--spacing, 0.25rem)*9);
-  border-radius: var(--radius-md, 0.375rem);
-  padding: calc(var(--spacing, 0.25rem)*2);
-  color: var(--color-neutral-700, #6e7b83);
-  @media (prefers-reduced-motion: no-preference) {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-300, #d9e1e4);
-  }
+  @apply size-9
+    rounded-md
+    p-2
+    text-neutral-700
+    motion-safe:transition-colors
+    dark:text-neutral-300;
+
   &:hover {
-    background-color: var(--color-neutral-100, #f6f7f9);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
   }
 }

package/Common/ThemeToggle/index.stories.tsx

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

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

@@ -1,133 +1,43 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .content {
-  border-radius: var(--radius-md, 0.375rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  background-color: var(--color-white, #fff);
-  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-900, #2c3437);
-  --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] *) {
-    background-color: var(--color-neutral-950, #0d121c);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-white, #fff);
-  }
+  @apply rounded-md
+    border
+    bg-white
+    text-sm
+    font-medium
+    text-neutral-900
+    shadow-lg
+    dark:bg-neutral-950
+    dark:text-white;
+
   &.default {
-    border-color: var(--color-neutral-200, #e9edf0);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply border-neutral-200
+      dark:border-neutral-900;
+
     .arrow {
-      fill: var(--color-neutral-200, #e9edf0);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        fill: var(--color-neutral-900, #2c3437);
-      }
+      @apply fill-neutral-200
+        dark:fill-neutral-900;
     }
   }
+
   &.error {
-    border-color: var(--color-danger-400, #fa8e8e);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-danger-900, #661514);
-    }
+    @apply border-danger-400
+      dark:border-danger-900;
+
     .arrow {
-      fill: var(--color-danger-400, #fa8e8e);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        fill: var(--color-danger-900, #661514);
-      }
+      @apply fill-danger-400
+        dark:fill-danger-900;
     }
   }
+
   &.warning {
-    border-color: var(--color-warning-400, #e99c40);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-warning-900, #4d2f0b);
-    }
+    @apply border-warning-400
+      dark:border-warning-900;
+
     .arrow {
-      fill: var(--color-warning-400, #e99c40);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        fill: var(--color-warning-900, #4d2f0b);
-      }
+      @apply fill-warning-400
+        dark:fill-warning-900;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@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;
-}

package/Common/Tooltip/index.stories.tsx

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

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

@@ -1,139 +1,70 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .articleLayout {
-  margin-inline: auto;
-  display: block;
-  width: 100%;
-  max-width: 95rem;
-  @media (width >= 40rem) {
-    display: grid;
-  }
-  @media (width >= 40rem) {
-    grid-template-columns: 13rem 1fr;
-  }
-  @media (width >= 40rem) {
-    grid-template-rows: 1fr;
-  }
-  @media (width >= 40rem) {
-    overflow: visible;
-  }
-  @media (width >= 40rem) {
-    grid-template-areas: 'sidebar main''sidebar footer';
-  }
-  @media (width >= 48rem) {
-    grid-template-columns: 16rem 1fr;
-  }
-  @media (width >= 64rem) {
-    grid-template-columns: 13rem 1fr 13rem;
-  }
-  @media (width >= 64rem) {
-    grid-template-areas: 'sidebar main metabar''sidebar footer metabar';
-  }
-  @media (width >= 80rem) {
-    grid-template-columns: 20rem 1fr 20rem;
-  }
+  @apply max-w-8xl
+    mx-auto
+    block
+    w-full
+    sm:grid
+    sm:grid-cols-[theme(spacing.52)_1fr]
+    sm:grid-rows-[1fr]
+    sm:overflow-visible
+    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
+    md:grid-cols-[theme(spacing.64)_1fr]
+    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
+
   > *:nth-child(1) {
-    grid-area: sidebar;
-    @media (width >= 64rem) {
-      position: sticky;
-    }
-    @media (width >= 64rem) {
-      top: calc(var(--spacing, 0.25rem)*0);
-    }
-    @media (width >= 64rem) {
-      height: 100vh;
-    }
-    @media (width >= 64rem) {
-      overflow-y: auto;
-    }
+    @apply [grid-area:sidebar]
+      lg:sticky
+      lg:top-0
+      lg:h-[100vh]
+      lg:overflow-y-auto;
   }
+
   > *:nth-child(2) {
-    display: contents;
-    @media (width >= 40rem) {
-      @media (width < 64rem) {
-        display: block;
-      }
-    }
+    @apply contents
+      sm:max-lg:block;
+
     > *:first-child {
-      padding: calc(var(--spacing, 0.25rem)*4);
-      grid-area: main;
-      @media (prefers-reduced-motion: no-preference) {
-        scroll-behavior: smooth;
-      }
-      @media (width >= 40rem) {
-        background-image: linear-gradient( 180deg, color-mix(in srgb, #f6f7f9 50%, transparent) 0%, color-mix(in srgb, #f6f7f9 0%, transparent) 48.32% );
-        @supports (color: color-mix(in lab, red, red)) {
-          background-image: linear-gradient( 180deg, color-mix(in oklab, var(--color-neutral-100) 50%, transparent) 0%, color-mix(in oklab, var(--color-neutral-100) 0%, transparent) 48.32% );
-        }
-      }
-      @media (width >= 40rem) {
-        background-attachment: fixed;
-      }
-      @media (width >= 40rem) {
-        padding: calc(var(--spacing, 0.25rem)*12);
-      }
-      @media (width >= 80rem) {
-        padding-inline: calc(var(--spacing, 0.25rem)*18);
-      }
-      @media (width >= 40rem) {
-        &:where([data-theme=dark], [data-theme=dark] *) {
-          background-image: linear-gradient( 180deg, color-mix(in srgb, #2c3437 50%, transparent) 0%, color-mix(in srgb, #2c3437 0%, transparent) 48.32% );
-          @supports (color: color-mix(in lab, red, red)) {
-            background-image: linear-gradient( 180deg, color-mix(in oklab, var(--color-neutral-900) 50%, transparent) 0%, color-mix(in oklab, var(--color-neutral-900) 0%, transparent) 48.32% );
-          }
-        }
-      }
+      @apply sm:bg-gradient-subtle
+        sm:dark:bg-gradient-subtle-dark
+        xl:px-18
+        p-4
+        [grid-area:main]
+        motion-safe:scroll-smooth
+        sm:bg-fixed
+        sm:p-12;
     }
+
     > *:last-child {
-      margin-top: calc(var(--spacing, 0.25rem)*8);
-      border-top-style: var(--tw-border-style);
-      border-top-width: 1px;
-      grid-area: metabar;
-      @media (width >= 40rem) {
-        margin-top: calc(var(--spacing, 0.25rem)*0);
-      }
-      @media (width >= 64rem) {
-        position: sticky;
-      }
-      @media (width >= 64rem) {
-        top: calc(var(--spacing, 0.25rem)*0);
-      }
-      @media (width >= 64rem) {
-        max-width: var(--container-xs, 20rem);
-      }
-      @media (width >= 64rem) {
-        border-top-style: var(--tw-border-style);
-        border-top-width: 0px;
-      }
-      @media (width >= 64rem) {
-        border-left-style: var(--tw-border-style);
-        border-left-width: 1px;
-      }
+      @apply mt-8
+        border-t
+        [grid-area:metabar]
+        sm:mt-0
+        lg:sticky
+        lg:top-0
+        lg:max-w-xs
+        lg:border-l
+        lg:border-t-0;
     }
   }
+
   > *:nth-child(3) {
-    position: sticky;
-    bottom: calc(var(--spacing, 0.25rem)*0);
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    align-self: stretch;
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-top-color: var(--color-neutral-200, #e9edf0);
-    background-color: var(--color-white, #fff);
-    padding-block: calc(var(--spacing, 0.25rem)*4);
-    grid-area: footer;
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-top-color: var(--color-neutral-900, #2c3437);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-950, #0d121c);
-    }
+    @apply sticky
+      bottom-0
+      flex
+      w-full
+      flex-col
+      items-center
+      self-stretch
+      border-t
+      border-t-neutral-200
+      bg-white
+      py-4
+      [grid-area:footer]
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/Containers/Article/index.stories.tsx

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

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