@k3-universe/react-kit 0.0.41 → 0.0.43

package/.babelrc

@@ -1,12 +1,12 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.storybook/main.ts

@@ -1,22 +1,22 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import path from 'node:path';
-
-const config: StorybookConfig = {
-  stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: path.resolve(__dirname, '../vite.config.ts'),
-      },
-    },
-  },
-};
-
-export default config;
+import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'node:path';
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: path.resolve(__dirname, '../vite.config.ts'),
+      },
+    },
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -1,198 +1,198 @@
-/// <reference types="vite/client" />
-import React from 'react';
-import type { Preview, Decorator } from '@storybook/react';
-import '../src/kit/themes/base.css';
-
-declare global {
-  interface Window {
-    __sbThemeListener?: (e: MediaQueryListEvent) => void;
-    __sbThemeMql?: MediaQueryList;
-  }
-}
-
-function applyThemeMode(useDark: boolean) {
-  const html = document.documentElement;
-  const body = document.body;
-  html.classList.toggle('dark', useDark);
-  body.classList.toggle('dark', useDark);
-  const mode = useDark ? 'dark' : 'light';
-  html.setAttribute('data-theme', mode);
-  body.setAttribute('data-theme', mode);
-}
-
-// Dynamically import source theme CSS so Vite + @tailwindcss/vite process it
-const themeModules = (
-  import.meta as unknown as {
-    glob: (p: string) => Record<string, () => Promise<unknown>>;
-  }
-).glob('../src/kit/themes/*.css');
-
-function findThemeNode(
-  name: string,
-): HTMLStyleElement | HTMLLinkElement | null {
-  const suffix = `/src/kit/themes/${name}.css`;
-  // Vite dev: <style data-vite-dev-id=".../src/kit/themes/<name>.css">
-  const styles = document.querySelectorAll<HTMLStyleElement>(
-    'style[data-vite-dev-id]',
-  );
-  for (const s of Array.from(styles)) {
-    const id = s.getAttribute('data-vite-dev-id') || '';
-    if (id.endsWith(suffix)) return s;
-  }
-  // Vite prod (or CSS extracted): <link rel="stylesheet" href="...<name>.css">
-  const links = document.querySelectorAll<HTMLLinkElement>(
-    'link[rel="stylesheet"][href]',
-  );
-  for (const l of Array.from(links)) {
-    const href = l.getAttribute('href') || '';
-    if (href.includes(`${name}.css`)) return l;
-  }
-  return null;
-}
-
-function bumpToTop(node: Element | null) {
-  if (!node) return;
-  // Move to the end of head so its declarations win the cascade
-  document.head.appendChild(node);
-}
-
-function applyThemeStyle(themeStyle: string) {
-  const name = themeStyle;
-  const key = `../src/kit/themes/${name}.css` as const;
-  const loader = (themeModules as Record<string, () => Promise<unknown>>)[key];
-  if (loader) {
-    // Fire-and-forget to keep decorator synchronous; then reorder once present
-    void loader();
-    // Reorder after the style/link has been injected by Vite
-    setTimeout(() => {
-      bumpToTop(findThemeNode(name));
-    }, 0);
-  } else {
-    // If not in the glob (e.g., typo), try to reorder any existing node anyway
-    setTimeout(() => {
-      bumpToTop(findThemeNode(name));
-    }, 0);
-  }
-}
-
-// Bootstrap: apply stored theme stylesheet as early as possible
-let __initialThemeStyle = 'default';
-try {
-  __initialThemeStyle = localStorage.getItem('sb-theme-style') || 'default';
-  applyThemeStyle(__initialThemeStyle);
-} catch (_e) {
-  // ignore localStorage access errors (e.g., sandboxed iframes)
-}
-
-const preview: Preview = {
-  initialGlobals: {
-    // Keep the toolbar in sync with the stored selection on load
-    themeStyle: __initialThemeStyle,
-  },
-  globalTypes: {
-    theme: {
-      name: 'Theme Mode',
-      description: 'Global theme mode for components',
-      defaultValue: 'light',
-      toolbar: {
-        icon: 'sun',
-        items: [
-          { value: 'light', title: 'Light' },
-          { value: 'dark', title: 'Dark' },
-          { value: 'system', title: 'System' },
-        ],
-        dynamicTitle: true,
-      },
-    },
-    themeStyle: {
-      name: 'Theme Style',
-      description: 'Global theme style for components',
-      defaultValue: 'default',
-      toolbar: {
-        icon: 'starhollow',
-        items: [
-          { value: 'default', title: 'Default' },
-          { value: 'minimal-modern', title: 'Minimal Modern' },
-          { value: 'spotify', title: 'Spotify' },
-          { value: 'clean-slate', title: 'Clean Slate' },
-        ],
-        dynamicTitle: true,
-      },
-    },
-  },
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    layout: 'fullscreen',
-    docs: {
-      autodocs: true,
-      codePanel: true,
-      source: {
-        codePanel: true,
-      },
-    },
-    // Let our CSS variables control the canvas background
-    backgrounds: { disable: true },
-  },
-  decorators: [
-    ((Story, context) => {
-      const theme =
-        (context.globals.theme as 'light' | 'dark' | 'system') ?? 'system';
-      const themeStyle = (context.globals.themeStyle as string) ?? 'default';
-      const mql = window.matchMedia('(prefers-color-scheme: dark)');
-      // Remove any previous listener if it exists when switching away from system
-      const g = window;
-      if (g.__sbThemeListener && g.__sbThemeMql && theme !== 'system') {
-        g.__sbThemeMql.removeEventListener('change', g.__sbThemeListener);
-        g.__sbThemeListener = undefined;
-        g.__sbThemeMql = undefined;
-      }
-
-      const prefersDark = mql.matches;
-      const shouldUseDark =
-        theme === 'dark' || (theme === 'system' && prefersDark);
-      applyThemeMode(shouldUseDark);
-      // If user changed toolbar, persist and ensure CSS is queued to load
-      try {
-        const stored = localStorage.getItem('sb-theme-style') || 'default';
-        if (stored !== themeStyle) {
-          localStorage.setItem('sb-theme-style', themeStyle);
-          applyThemeStyle(themeStyle);
-        }
-      } catch (_e) {
-        // ignore localStorage access errors (e.g., sandboxed iframes)
-      }
-
-      // When on system, react to OS theme changes once per session
-      if (theme === 'system' && !g.__sbThemeListener) {
-        const onChange = (e: MediaQueryListEvent) => {
-          applyThemeMode(e.matches);
-        };
-        mql.addEventListener('change', onChange);
-        g.__sbThemeListener = onChange;
-        g.__sbThemeMql = mql;
-      }
-      // Ensure preview area always uses our theme background/text
-      // Center by default in story mode, but allow stories to opt-out with parameters.centered === false
-      const isDocs = context.viewMode === 'docs';
-      const shouldCenter = !isDocs && context.parameters?.centered !== false;
-      const wrapperClass = isDocs
-        ? 'bg-background text-foreground w-full'
-        : shouldCenter
-          ? 'bg-background text-foreground min-h-screen flex items-center justify-center overflow-y-auto'
-          : 'bg-background text-foreground min-h-screen overflow-y-auto';
-      const StoryComponent = Story as unknown as React.ComponentType;
-      return React.createElement(
-        'div',
-        { className: wrapperClass },
-        React.createElement(StoryComponent),
-      );
-    }) as Decorator,
-  ],
-};
-
-export default preview;
+/// <reference types="vite/client" />
+import React from 'react';
+import type { Preview, Decorator } from '@storybook/react';
+import '../src/kit/themes/base.css';
+
+declare global {
+  interface Window {
+    __sbThemeListener?: (e: MediaQueryListEvent) => void;
+    __sbThemeMql?: MediaQueryList;
+  }
+}
+
+function applyThemeMode(useDark: boolean) {
+  const html = document.documentElement;
+  const body = document.body;
+  html.classList.toggle('dark', useDark);
+  body.classList.toggle('dark', useDark);
+  const mode = useDark ? 'dark' : 'light';
+  html.setAttribute('data-theme', mode);
+  body.setAttribute('data-theme', mode);
+}
+
+// Dynamically import source theme CSS so Vite + @tailwindcss/vite process it
+const themeModules = (
+  import.meta as unknown as {
+    glob: (p: string) => Record<string, () => Promise<unknown>>;
+  }
+).glob('../src/kit/themes/*.css');
+
+function findThemeNode(
+  name: string,
+): HTMLStyleElement | HTMLLinkElement | null {
+  const suffix = `/src/kit/themes/${name}.css`;
+  // Vite dev: <style data-vite-dev-id=".../src/kit/themes/<name>.css">
+  const styles = document.querySelectorAll<HTMLStyleElement>(
+    'style[data-vite-dev-id]',
+  );
+  for (const s of Array.from(styles)) {
+    const id = s.getAttribute('data-vite-dev-id') || '';
+    if (id.endsWith(suffix)) return s;
+  }
+  // Vite prod (or CSS extracted): <link rel="stylesheet" href="...<name>.css">
+  const links = document.querySelectorAll<HTMLLinkElement>(
+    'link[rel="stylesheet"][href]',
+  );
+  for (const l of Array.from(links)) {
+    const href = l.getAttribute('href') || '';
+    if (href.includes(`${name}.css`)) return l;
+  }
+  return null;
+}
+
+function bumpToTop(node: Element | null) {
+  if (!node) return;
+  // Move to the end of head so its declarations win the cascade
+  document.head.appendChild(node);
+}
+
+function applyThemeStyle(themeStyle: string) {
+  const name = themeStyle;
+  const key = `../src/kit/themes/${name}.css` as const;
+  const loader = (themeModules as Record<string, () => Promise<unknown>>)[key];
+  if (loader) {
+    // Fire-and-forget to keep decorator synchronous; then reorder once present
+    void loader();
+    // Reorder after the style/link has been injected by Vite
+    setTimeout(() => {
+      bumpToTop(findThemeNode(name));
+    }, 0);
+  } else {
+    // If not in the glob (e.g., typo), try to reorder any existing node anyway
+    setTimeout(() => {
+      bumpToTop(findThemeNode(name));
+    }, 0);
+  }
+}
+
+// Bootstrap: apply stored theme stylesheet as early as possible
+let __initialThemeStyle = 'default';
+try {
+  __initialThemeStyle = localStorage.getItem('sb-theme-style') || 'default';
+  applyThemeStyle(__initialThemeStyle);
+} catch (_e) {
+  // ignore localStorage access errors (e.g., sandboxed iframes)
+}
+
+const preview: Preview = {
+  initialGlobals: {
+    // Keep the toolbar in sync with the stored selection on load
+    themeStyle: __initialThemeStyle,
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme Mode',
+      description: 'Global theme mode for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'sun',
+        items: [
+          { value: 'light', title: 'Light' },
+          { value: 'dark', title: 'Dark' },
+          { value: 'system', title: 'System' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    themeStyle: {
+      name: 'Theme Style',
+      description: 'Global theme style for components',
+      defaultValue: 'default',
+      toolbar: {
+        icon: 'starhollow',
+        items: [
+          { value: 'default', title: 'Default' },
+          { value: 'minimal-modern', title: 'Minimal Modern' },
+          { value: 'spotify', title: 'Spotify' },
+          { value: 'clean-slate', title: 'Clean Slate' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    layout: 'fullscreen',
+    docs: {
+      autodocs: true,
+      codePanel: true,
+      source: {
+        codePanel: true,
+      },
+    },
+    // Let our CSS variables control the canvas background
+    backgrounds: { disable: true },
+  },
+  decorators: [
+    ((Story, context) => {
+      const theme =
+        (context.globals.theme as 'light' | 'dark' | 'system') ?? 'system';
+      const themeStyle = (context.globals.themeStyle as string) ?? 'default';
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      // Remove any previous listener if it exists when switching away from system
+      const g = window;
+      if (g.__sbThemeListener && g.__sbThemeMql && theme !== 'system') {
+        g.__sbThemeMql.removeEventListener('change', g.__sbThemeListener);
+        g.__sbThemeListener = undefined;
+        g.__sbThemeMql = undefined;
+      }
+
+      const prefersDark = mql.matches;
+      const shouldUseDark =
+        theme === 'dark' || (theme === 'system' && prefersDark);
+      applyThemeMode(shouldUseDark);
+      // If user changed toolbar, persist and ensure CSS is queued to load
+      try {
+        const stored = localStorage.getItem('sb-theme-style') || 'default';
+        if (stored !== themeStyle) {
+          localStorage.setItem('sb-theme-style', themeStyle);
+          applyThemeStyle(themeStyle);
+        }
+      } catch (_e) {
+        // ignore localStorage access errors (e.g., sandboxed iframes)
+      }
+
+      // When on system, react to OS theme changes once per session
+      if (theme === 'system' && !g.__sbThemeListener) {
+        const onChange = (e: MediaQueryListEvent) => {
+          applyThemeMode(e.matches);
+        };
+        mql.addEventListener('change', onChange);
+        g.__sbThemeListener = onChange;
+        g.__sbThemeMql = mql;
+      }
+      // Ensure preview area always uses our theme background/text
+      // Center by default in story mode, but allow stories to opt-out with parameters.centered === false
+      const isDocs = context.viewMode === 'docs';
+      const shouldCenter = !isDocs && context.parameters?.centered !== false;
+      const wrapperClass = isDocs
+        ? 'bg-background text-foreground w-full'
+        : shouldCenter
+          ? 'bg-background text-foreground min-h-screen flex items-center justify-center overflow-y-auto'
+          : 'bg-background text-foreground min-h-screen overflow-y-auto';
+      const StoryComponent = Story as unknown as React.ComponentType;
+      return React.createElement(
+        'div',
+        { className: wrapperClass },
+        React.createElement(StoryComponent),
+      );
+    }) as Decorator,
+  ],
+};
+
+export default preview;

package/Dockerfile.storybook

@@ -1,43 +1,43 @@
-# Minimal image serving Storybook static site
-FROM nginx:1.27-alpine
-
-# Copy Storybook static build output
-# Expecting it at libs/react-kit/storybook-static from CI artifact
-COPY storybook-static/ /usr/share/nginx/html/
-
-# Replace default nginx config with a lean one optimized for static hosting
-RUN rm -f /etc/nginx/conf.d/default.conf
-
-# Basic gzip/static caching configuration
-# Note: no SPA history fallback is required for Storybook static
-ADD <<'NGINX_CONF' /etc/nginx/conf.d/storybook.conf
-server {
-  listen       80;
-  server_name  _;
-
-  gzip on;
-  gzip_comp_level 5;
-  gzip_types text/plain text/css application/javascript application/json image/svg+xml;
-
-  root /usr/share/nginx/html;
-  index index.html;
-
-  location / {
-    try_files $uri $uri/ =404;
-  }
-
-  location ~* \.(?:js|css)$ {
-    expires 7d;
-    add_header Cache-Control "public";
-  }
-
-  location ~* \.(?:png|jpg|jpeg|gif|svg|ico|woff2?)$ {
-    expires 30d;
-    add_header Cache-Control "public";
-  }
-}
-NGINX_CONF
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]
+# Minimal image serving Storybook static site
+FROM nginx:1.27-alpine
+
+# Copy Storybook static build output
+# Expecting it at libs/react-kit/storybook-static from CI artifact
+COPY storybook-static/ /usr/share/nginx/html/
+
+# Replace default nginx config with a lean one optimized for static hosting
+RUN rm -f /etc/nginx/conf.d/default.conf
+
+# Basic gzip/static caching configuration
+# Note: no SPA history fallback is required for Storybook static
+ADD <<'NGINX_CONF' /etc/nginx/conf.d/storybook.conf
+server {
+  listen       80;
+  server_name  _;
+
+  gzip on;
+  gzip_comp_level 5;
+  gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ =404;
+  }
+
+  location ~* \.(?:js|css)$ {
+    expires 7d;
+    add_header Cache-Control "public";
+  }
+
+  location ~* \.(?:png|jpg|jpeg|gif|svg|ico|woff2?)$ {
+    expires 30d;
+    add_header Cache-Control "public";
+  }
+}
+NGINX_CONF
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package/README.md

@@ -1,9 +1,9 @@
-# @k3-universe/react-kit
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test @k3-universe/react-kit` to execute the unit tests via [Vitest](https://vitest.dev/).
-
-------
+# @k3-universe/react-kit
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @k3-universe/react-kit` to execute the unit tests via [Vitest](https://vitest.dev/).
+
+------

package/biome.json

@@ -1,10 +1,10 @@
-{
-  "root": false,
-  "extends": "//",
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  }
-}
+{
+  "root": false,
+  "extends": "//",
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

package/components.json

@@ -1,20 +1,20 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "rsc": true,
-  "tsx": true,
-  "aliases": {
-    "utils": "@/shadcn/lib/utils",
-    "components": "@/shadcn/components",
-    "ui": "@/shadcn/ui",
-    "lib": "@/shadcn/lib",
-    "hooks": "@/shadcn/hooks"
-  }
-}
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "rsc": true,
+  "tsx": true,
+  "aliases": {
+    "utils": "@/shadcn/lib/utils",
+    "components": "@/shadcn/components",
+    "ui": "@/shadcn/ui",
+    "lib": "@/shadcn/lib",
+    "hooks": "@/shadcn/hooks"
+  }
+}