@tribepad/themis 1.0.0 → 1.0.2

package/src/elements/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,124 @@
+/**
+ * AlertDialog Component - Storybook Stories
+ *
+ * Interactive examples and documentation for the AlertDialog component.
+ * Demonstrates confirmation dialogs for destructive or important actions.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from '@storybook/test';
+import { AlertDialog } from './AlertDialog';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Elements/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A strict confirmation dialog for destructive or important actions. Does not dismiss on backdrop click or Escape key. Fixed footer with cancel + action buttons. Built on Modal with role="alertdialog" for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'destructive'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    actionVariant: {
+      control: { type: 'select' },
+      options: ['default', 'destructive'],
+    },
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button variant="destructive">Delete Account</Button>,
+    title: 'Delete Account?',
+    description: 'This will permanently delete your account and all associated data. This action cannot be undone.',
+    actionLabel: 'Delete Account',
+    onAction: fn(),
+  },
+};
+
+export const DestructiveVariant: Story = {
+  args: {
+    trigger: <Button variant="destructive">Remove All</Button>,
+    title: 'Remove All Items?',
+    description: 'All items in your cart will be removed.',
+    variant: 'destructive',
+    actionLabel: 'Remove All',
+    onAction: fn(),
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    trigger: <Button>Discard Changes</Button>,
+    title: 'Discard Changes?',
+    description: 'You have unsaved changes that will be lost.',
+    size: 'sm',
+    actionLabel: 'Discard',
+    onAction: fn(),
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    trigger: <Button variant="destructive">Delete Project</Button>,
+    title: 'Delete Project?',
+    description: 'This will permanently delete the project "My Project" and all associated resources including files, deployments, and team access. This action cannot be undone.',
+    size: 'lg',
+    actionLabel: 'Delete Project',
+    onAction: fn(),
+  },
+};
+
+export const NonDestructiveAction: Story = {
+  args: {
+    trigger: <Button>Publish</Button>,
+    title: 'Publish to Production?',
+    description: 'This will deploy the current build to production. All users will immediately see the changes.',
+    actionLabel: 'Publish Now',
+    actionVariant: 'default',
+    onAction: fn(),
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    trigger: <Button variant="destructive">Leave Page</Button>,
+    title: 'Leave this page?',
+    description: 'Changes you made may not be saved.',
+    cancelLabel: 'Stay',
+    actionLabel: 'Leave',
+    onAction: fn(),
+  },
+};
+
+export const WithExtraContent: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="destructive">Delete Team</Button>}
+      title="Delete Team?"
+      description="This will permanently delete the team and revoke access for all members."
+      actionLabel="Delete Team"
+      onAction={fn()}
+    >
+      <div className="my-4 rounded-md bg-[var(--muted)] p-3 text-sm">
+        <strong>Affected members:</strong> 12 users will lose access
+      </div>
+    </AlertDialog>
+  ),
+};

package/src/elements/Avatar/Avatar.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar, AvatarGroup } from './index';
 
 const meta = {

package/src/elements/Badge/Badge.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md for architecture details
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from './Badge';
 import { CheckCircle, X, AlertCircle, Star, Bell, Tag, User } from 'lucide-react';
 

package/src/elements/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Home, FolderOpen, FileText, Settings, Users, Package } from 'lucide-react';
 import { Breadcrumbs } from './Breadcrumbs';
 import type { BreadcrumbItemData } from './Breadcrumbs.types';

package/src/elements/Button/Button.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-045 (Storybook stories requirement)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './Button';
 import { Trash2, Save, Download, Settings } from 'lucide-react';
 

package/src/elements/ButtonGroup/ButtonGroup.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-045 (Storybook stories requirement)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Bold,
   Italic,

package/src/elements/Card/Card.stories.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { HelpCircle, Info, X, ArrowLeft } from 'lucide-react';
 import {
   Card,

package/src/elements/Carousel/Carousel.stories.tsx

@@ -3,7 +3,7 @@
  * Storybook stories for Carousel component demonstrating all features
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Carousel } from './Carousel';
 import { useState } from 'react';
 

package/src/elements/Chart/Chart.stories.tsx

@@ -9,7 +9,7 @@
  */
 
 import { type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Chart } from './Chart';
 import type { DataSeries } from './Chart.types';
 

package/src/elements/Checkbox/Checkbox.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Checkbox } from './Checkbox';
 
 const meta = {

package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CheckboxGroup, Checkbox, CheckmarkIcon, TimesIcon } from './CheckboxGroup';
 
 const meta = {

package/src/elements/Combobox/Combobox.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Combobox, ComboboxItem, ComboboxSection } from './Combobox';
+
+const meta = {
+  title: 'Elements/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A filterable select/autocomplete input. Type to filter options, navigate with keyboard, or enter custom values. Built on React Aria ComboBox.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+    },
+  },
+  args: {
+    onSelectionChange: fn(),
+    onInputChange: fn(),
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Combobox label="Framework" placeholder="Select a framework..." {...args}>
+      <ComboboxItem id="react">React</ComboboxItem>
+      <ComboboxItem id="vue">Vue</ComboboxItem>
+      <ComboboxItem id="angular">Angular</ComboboxItem>
+      <ComboboxItem id="svelte">Svelte</ComboboxItem>
+      <ComboboxItem id="solid">SolidJS</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithSections: Story = {
+  render: (args) => (
+    <Combobox label="Technology" placeholder="Choose..." {...args}>
+      <ComboboxSection header="Frontend">
+        <ComboboxItem id="react">React</ComboboxItem>
+        <ComboboxItem id="vue">Vue</ComboboxItem>
+        <ComboboxItem id="angular">Angular</ComboboxItem>
+      </ComboboxSection>
+      <ComboboxSection header="Backend">
+        <ComboboxItem id="express">Express</ComboboxItem>
+        <ComboboxItem id="fastify">Fastify</ComboboxItem>
+        <ComboboxItem id="nest">NestJS</ComboboxItem>
+      </ComboboxSection>
+    </Combobox>
+  ),
+};
+
+export const AllowsCustomValue: Story = {
+  render: (args) => (
+    <Combobox label="Color" placeholder="Type a color..." allowsCustomValue {...args}>
+      <ComboboxItem id="red">Red</ComboboxItem>
+      <ComboboxItem id="blue">Blue</ComboboxItem>
+      <ComboboxItem id="green">Green</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <Combobox label="Language" description="Choose your preferred language" placeholder="Select..." {...args}>
+      <ComboboxItem id="en">English</ComboboxItem>
+      <ComboboxItem id="fr">French</ComboboxItem>
+      <ComboboxItem id="de">German</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const WithError: Story = {
+  render: (args) => (
+    <Combobox label="Country" errorMessage="Selection is required" placeholder="Select..." {...args}>
+      <ComboboxItem id="us">United States</ComboboxItem>
+      <ComboboxItem id="uk">United Kingdom</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <Combobox label="Disabled" placeholder="Cannot interact" isDisabled {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Small: Story = {
+  render: (args) => (
+    <Combobox label="Small" size="sm" placeholder="Small size..." {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+      <ComboboxItem id="b">Option B</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const Large: Story = {
+  render: (args) => (
+    <Combobox label="Large" size="lg" placeholder="Large size..." {...args}>
+      <ComboboxItem id="a">Option A</ComboboxItem>
+      <ComboboxItem id="b">Option B</ComboboxItem>
+    </Combobox>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <Combobox label="Small" size="sm" placeholder="Small...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+      <Combobox label="Default" placeholder="Default...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+      <Combobox label="Large" size="lg" placeholder="Large...">
+        <ComboboxItem id="a">Option A</ComboboxItem>
+        <ComboboxItem id="b">Option B</ComboboxItem>
+      </Combobox>
+    </div>
+  ),
+};

package/src/elements/DatePicker/DatePicker.stories.tsx

@@ -5,7 +5,7 @@
  * DateField, and Calendar variants and use cases.
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { DatePicker, DateRangePicker, DateField, Calendar } from './index';
 import { parseDate, today, getLocalTimeZone, isWeekend } from '@internationalized/date';

package/src/elements/Dropdown/Dropdown.stories.tsx

@@ -5,7 +5,7 @@
  * @see tasks.md T027 (Storybook stories with 7+ examples)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Dropdown } from './Dropdown';
 import { Button } from '../Button';
 import {

package/src/elements/FileField/FileField.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, type FormEvent } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FileField } from './FileField';
 import { formatFileSize, formatAcceptedTypes } from './utils';
 

package/src/elements/FileField/FileProgress.stories.tsx

@@ -5,7 +5,7 @@
  * @see future-plan.md Section 2: Upload Progress Indication
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FileProgress } from './FileProgress';
 
 // Create mock file helper

package/src/elements/FormLayout/FormLayout.stories.tsx

@@ -6,7 +6,7 @@
  * @see FormLayout-design-decisions.md (Visual specifications)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FormLayout } from './FormLayout';
 import { Button } from '../Button/Button';
 import { TextField } from '../TextField/TextField';

package/src/elements/Modal/Modal.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Modal } from './Modal';
 import { Button } from '../Button';
 

package/src/elements/NumberField/NumberField.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState, type FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { NumberField } from './index';
 
 const meta = {

package/src/elements/OTPInput/OTPInput.stories.tsx

@@ -6,7 +6,7 @@
  * @see ACCESSIBILITY.md (WCAG 2.2 AAA Compliance Documentation)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { OTPInput } from './OTPInput';
 import { useState } from 'react';
 

package/src/elements/Pagination/Pagination.stories.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Pagination } from './Pagination';
+
+const meta = {
+  title: 'Elements/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Navigation component for paginated content. Supports page numbers, prev/next, first/last buttons, and multiple visual variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'outline', 'ghost'],
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    page: 1,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <Pagination page={page} totalPages={20} onPageChange={setPage} />
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Page {page} of 20
+        </p>
+      </div>
+    );
+  },
+};
+
+export const MiddlePage: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const LastPage: Story = {
+  args: {
+    page: 10,
+    totalPages: 10,
+    onPageChange: () => {},
+  },
+};
+
+export const FewPages: Story = {
+  args: {
+    page: 2,
+    totalPages: 3,
+    onPageChange: () => {},
+  },
+};
+
+export const SinglePage: Story = {
+  args: {
+    page: 1,
+    totalPages: 1,
+    onPageChange: () => {},
+  },
+};
+
+export const ManyPages: Story = {
+  args: {
+    page: 50,
+    totalPages: 100,
+    onPageChange: () => {},
+  },
+};
+
+export const OutlineVariant: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    variant: 'outline',
+    onPageChange: () => {},
+  },
+};
+
+export const GhostVariant: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    variant: 'ghost',
+    onPageChange: () => {},
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    size: 'sm',
+    onPageChange: () => {},
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    page: 3,
+    totalPages: 10,
+    size: 'lg',
+    onPageChange: () => {},
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    isDisabled: true,
+    onPageChange: () => {},
+  },
+};
+
+export const NoFirstLast: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showFirstLast: false,
+    onPageChange: () => {},
+  },
+};
+
+export const NoPrevNext: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showPrevNext: false,
+    onPageChange: () => {},
+  },
+};
+
+export const PageNumbersOnly: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showFirstLast: false,
+    showPrevNext: false,
+    onPageChange: () => {},
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Default</p>
+        <Pagination page={5} totalPages={10} variant="default" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Outline</p>
+        <Pagination page={5} totalPages={10} variant="outline" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Ghost</p>
+        <Pagination page={5} totalPages={10} variant="ghost" onPageChange={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Small</p>
+        <Pagination page={5} totalPages={10} size="sm" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Default</p>
+        <Pagination page={5} totalPages={10} size="default" onPageChange={() => {}} />
+      </div>
+      <div>
+        <p className="text-sm text-[var(--muted-foreground)] mb-2">Large</p>
+        <Pagination page={5} totalPages={10} size="lg" onPageChange={() => {}} />
+      </div>
+    </div>
+  ),
+};

package/src/elements/Panel/Panel.stories.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Panel } from './Panel';
 import { Button } from '../Button';