@k3-universe/react-kit 0.0.41 → 0.0.42

package/src/stories/kit/components/TimePicker.stories.tsx

@@ -1,71 +1,71 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import * as React from 'react';
-import { TimePicker } from '../../../kit/components/timepicker/TimePicker';
-
-const meta: Meta<typeof TimePicker> = {
-  title: 'Kit/Components/TimePicker',
-  component: TimePicker,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimePicker>;
-
-export const Basic: Story = {
-  name: 'Basic (HH:mm, 24h)',
-  args: {
-    precision: 'minute',
-    hourCycle: 24,
-  },
-  render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date());
-
-    return (
-      <div className="p-6 space-y-4">
-        <div>
-          <div className="text-sm text-muted-foreground">Selected</div>
-          <div className="font-medium">
-            {value?.toLocaleTimeString?.() ?? '—'}
-          </div>
-        </div>
-        <TimePicker {...args} value={value} onChange={setValue} />
-      </div>
-    );
-  },
-};
-
-export const HourOnly12h: Story = {
-  name: 'Hour only (12h)',
-  args: {
-    precision: 'hour',
-    hourCycle: 12,
-  },
-  render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date());
-    return (
-      <div className="p-6 space-y-4">
-        <TimePicker {...args} value={value} onChange={setValue} />
-      </div>
-    );
-  },
-};
-
-export const WithSeconds: Story = {
-  name: 'With seconds (HH:mm:ss, 24h)',
-  args: {
-    precision: 'second',
-    hourCycle: 24,
-  },
-  render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date());
-    return (
-      <div className="p-6 space-y-4">
-        <TimePicker {...args} value={value} onChange={setValue} />
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { TimePicker } from '../../../kit/components/timepicker/TimePicker';
+
+const meta: Meta<typeof TimePicker> = {
+  title: 'Kit/Components/TimePicker',
+  component: TimePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const Basic: Story = {
+  name: 'Basic (HH:mm, 24h)',
+  args: {
+    precision: 'minute',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<Date | null>(new Date());
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground">Selected</div>
+          <div className="font-medium">
+            {value?.toLocaleTimeString?.() ?? '—'}
+          </div>
+        </div>
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+};
+
+export const HourOnly12h: Story = {
+  name: 'Hour only (12h)',
+  args: {
+    precision: 'hour',
+    hourCycle: 12,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<Date | null>(new Date());
+    return (
+      <div className="p-6 space-y-4">
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+};
+
+export const WithSeconds: Story = {
+  name: 'With seconds (HH:mm:ss, 24h)',
+  args: {
+    precision: 'second',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<Date | null>(new Date());
+    return (
+      <div className="p-6 space-y-4">
+        <TimePicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+};

package/src/stories/kit/components/TimeRangePicker.stories.tsx

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import * as React from 'react';
-import { TimeRangePicker } from '../../../kit/components/timepicker/TimeRangePicker';
-
-const meta: Meta<typeof TimeRangePicker> = {
-  title: 'Kit/Components/TimeRangePicker',
-  component: TimeRangePicker,
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimeRangePicker>;
-
-export const Basic: Story = {
-  name: 'Basic (HH:mm – HH:mm, 24h)',
-  args: {
-    precision: 'minute',
-    hourCycle: 24,
-  },
-  render: (args) => {
-    const [value, setValue] = React.useState<{
-      from?: Date | null;
-      to?: Date | null;
-    } | null>({
-      from: new Date(),
-      to: new Date(Date.now() + 60 * 60 * 1000),
-    });
-
-    return (
-      <div className="p-6 space-y-4">
-        <TimeRangePicker {...args} value={value} onChange={setValue} />
-        <div className="text-xs text-muted-foreground">
-          Value: {value?.from?.toLocaleTimeString?.()} –{' '}
-          {value?.to?.toLocaleTimeString?.()}
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { TimeRangePicker } from '../../../kit/components/timepicker/TimeRangePicker';
+
+const meta: Meta<typeof TimeRangePicker> = {
+  title: 'Kit/Components/TimeRangePicker',
+  component: TimeRangePicker,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimeRangePicker>;
+
+export const Basic: Story = {
+  name: 'Basic (HH:mm – HH:mm, 24h)',
+  args: {
+    precision: 'minute',
+    hourCycle: 24,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<{
+      from?: Date | null;
+      to?: Date | null;
+    } | null>({
+      from: new Date(),
+      to: new Date(Date.now() + 60 * 60 * 1000),
+    });
+
+    return (
+      <div className="p-6 space-y-4">
+        <TimeRangePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-muted-foreground">
+          Value: {value?.from?.toLocaleTimeString?.()} –{' '}
+          {value?.to?.toLocaleTimeString?.()}
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/kit/layouts/admin/AdminLayout.Basic.stories.tsx

@@ -1,118 +1,118 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useEffect } from 'react';
-import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
-import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
-import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
-import {
-  Outlet,
-  RouterProvider,
-  createRootRoute,
-  createRoute,
-  createRouter,
-} from '@tanstack/react-router';
-import { Home, ShoppingCart, Settings } from 'lucide-react';
-
-const meta: Meta<typeof AdminLayout> = {
-  title: 'Kit/Layouts/Admin',
-  component: AdminLayout,
-};
-export default meta;
-
-type Story = StoryObj<typeof AdminLayout>;
-
-function RegisterMenus() {
-  const { registerGroup, registerItem, clear } =
-    useAdminSidebarMenuRegistration();
-  useEffect(() => {
-    clear();
-    registerGroup({ id: 'main', label: 'Main' });
-    registerItem('main', {
-      id: 'dashboard',
-      title: 'Dashboard',
-      url: '/',
-      icon: Home,
-    });
-
-    registerGroup({ id: 'commerce', label: 'Commerce' });
-    registerItem('commerce', {
-      id: 'orders',
-      title: 'Orders',
-      url: '/orders',
-      icon: ShoppingCart,
-      badge: 12,
-    });
-
-    registerGroup({ id: 'settings', label: 'Settings' });
-    registerItem('settings', {
-      id: 'general',
-      title: 'General',
-      url: '/settings',
-      icon: Settings,
-    });
-  }, [registerGroup, registerItem, clear]);
-  return null;
-}
-
-type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
-
-function App(props: AdminLayoutStoryProps) {
-  const rootRoute = createRootRoute({
-    component: () => (
-      <ThemeProvider>
-        <AdminLayout {...props}>
-          <RegisterMenus />
-          <Outlet />
-        </AdminLayout>
-      </ThemeProvider>
-    ),
-  });
-
-  const indexRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/',
-    component: () => (
-      <div className="p-6">
-        <h2 className="text-xl font-semibold mb-2">Dashboard</h2>
-        <p className="text-muted-foreground">Welcome to the admin dashboard.</p>
-      </div>
-    ),
-  });
-
-  const ordersRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/orders',
-    component: () => (
-      <div className="p-6">
-        <h2 className="text-xl font-semibold mb-2">Orders</h2>
-        <p className="text-muted-foreground">Manage your store orders here.</p>
-      </div>
-    ),
-  });
-
-  const settingsRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/settings',
-    component: () => (
-      <div className="p-6">
-        <h2 className="text-xl font-semibold mb-2">Settings</h2>
-        <p className="text-muted-foreground">
-          Update your application settings.
-        </p>
-      </div>
-    ),
-  });
-
-  const routeTree = rootRoute.addChildren([
-    indexRoute,
-    ordersRoute,
-    settingsRoute,
-  ]);
-  const router = createRouter({ routeTree, basepath: '/iframe.html' });
-
-  return <RouterProvider router={router} />;
-}
-
-export const Basic: Story = {
-  name: 'Basic (non-collapsible by default)',
-  render: () => <App />,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home, ShoppingCart, Settings } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'main', label: 'Main' });
+    registerItem('main', {
+      id: 'dashboard',
+      title: 'Dashboard',
+      url: '/',
+      icon: Home,
+    });
+
+    registerGroup({ id: 'commerce', label: 'Commerce' });
+    registerItem('commerce', {
+      id: 'orders',
+      title: 'Orders',
+      url: '/orders',
+      icon: ShoppingCart,
+      badge: 12,
+    });
+
+    registerGroup({ id: 'settings', label: 'Settings' });
+    registerItem('settings', {
+      id: 'general',
+      title: 'General',
+      url: '/settings',
+      icon: Settings,
+    });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+          <Outlet />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Dashboard</h2>
+        <p className="text-muted-foreground">Welcome to the admin dashboard.</p>
+      </div>
+    ),
+  });
+
+  const ordersRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/orders',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Orders</h2>
+        <p className="text-muted-foreground">Manage your store orders here.</p>
+      </div>
+    ),
+  });
+
+  const settingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/settings',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Settings</h2>
+        <p className="text-muted-foreground">
+          Update your application settings.
+        </p>
+      </div>
+    ),
+  });
+
+  const routeTree = rootRoute.addChildren([
+    indexRoute,
+    ordersRoute,
+    settingsRoute,
+  ]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+
+  return <RouterProvider router={router} />;
+}
+
+export const Basic: Story = {
+  name: 'Basic (non-collapsible by default)',
+  render: () => <App />,
+};

package/src/stories/kit/layouts/admin/AdminLayout.Collapsible.stories.tsx

@@ -1,81 +1,81 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useEffect } from 'react';
-import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
-import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
-import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
-import {
-  Outlet,
-  RouterProvider,
-  createRootRoute,
-  createRoute,
-  createRouter,
-} from '@tanstack/react-router';
-import { Home, ShoppingCart, Settings } from 'lucide-react';
-
-const meta: Meta<typeof AdminLayout> = {
-  title: 'Kit/Layouts/Admin',
-  component: AdminLayout,
-};
-export default meta;
-
-type Story = StoryObj<typeof AdminLayout>;
-
-type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
-
-function RegisterMenus() {
-  const { registerGroup, registerItem, clear } =
-    useAdminSidebarMenuRegistration();
-  useEffect(() => {
-    clear();
-    registerGroup({ id: 'main', label: 'Main' });
-    registerItem('main', {
-      id: 'dashboard',
-      title: 'Dashboard',
-      url: '/',
-      icon: Home,
-    });
-    registerGroup({ id: 'commerce', label: 'Commerce' });
-    registerItem('commerce', {
-      id: 'orders',
-      title: 'Orders',
-      url: '/orders',
-      icon: ShoppingCart,
-      badge: 12,
-    });
-    registerGroup({ id: 'settings', label: 'Settings' });
-    registerItem('settings', {
-      id: 'general',
-      title: 'General',
-      url: '/settings',
-      icon: Settings,
-    });
-  }, [registerGroup, registerItem, clear]);
-  return null;
-}
-
-function App(props: AdminLayoutStoryProps) {
-  const rootRoute = createRootRoute({
-    component: () => (
-      <ThemeProvider>
-        <AdminLayout {...props}>
-          <RegisterMenus />
-          <Outlet />
-        </AdminLayout>
-      </ThemeProvider>
-    ),
-  });
-
-  const indexRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/',
-    component: () => <div className="p-6">Home</div>,
-  });
-  const routeTree = rootRoute.addChildren([indexRoute]);
-  const router = createRouter({ routeTree, basepath: '/iframe.html' });
-  return <RouterProvider router={router} />;
-}
-
-export const Collapsible: Story = {
-  name: 'Collapsible sidebar',
-  render: () => <App sidebarCollapsible />,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home, ShoppingCart, Settings } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'main', label: 'Main' });
+    registerItem('main', {
+      id: 'dashboard',
+      title: 'Dashboard',
+      url: '/',
+      icon: Home,
+    });
+    registerGroup({ id: 'commerce', label: 'Commerce' });
+    registerItem('commerce', {
+      id: 'orders',
+      title: 'Orders',
+      url: '/orders',
+      icon: ShoppingCart,
+      badge: 12,
+    });
+    registerGroup({ id: 'settings', label: 'Settings' });
+    registerItem('settings', {
+      id: 'general',
+      title: 'General',
+      url: '/settings',
+      icon: Settings,
+    });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+          <Outlet />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div className="p-6">Home</div>,
+  });
+  const routeTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const Collapsible: Story = {
+  name: 'Collapsible sidebar',
+  render: () => <App sidebarCollapsible />,
+};