@tribepad/themis 1.0.1 → 1.0.2

package/src/elements/SearchField/SearchField.stories.tsx

@@ -0,0 +1,146 @@
+/**
+ * SearchField Component Stories
+ * Storybook stories for SearchField component demonstrating all variants, sizes, and states
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchField } from './SearchField';
+
+const meta = {
+  title: 'Elements/SearchField',
+  component: SearchField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A specialized search input with clear button and search icon. Built on React Aria SearchField for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default', 'lg'],
+      description: 'The size variant of the search field',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the search field is disabled',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the search field is read-only',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the search field is required',
+    },
+    isIconHidden: {
+      control: 'boolean',
+      description: 'Whether to hide the search icon',
+    },
+  },
+} satisfies Meta<typeof SearchField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    defaultValue: 'React components',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search...',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    size: 'lg',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    description: 'Press Enter to search, Escape to clear',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    errorMessage: 'Search query is too short',
+    defaultValue: 'a',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search items...',
+    isReadOnly: true,
+    defaultValue: 'Read-only value',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Required search...',
+    isRequired: true,
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search without icon...',
+    isIconHidden: true,
+  },
+};
+
+export const AriaLabelOnly: Story = {
+  args: {
+    'aria-label': 'Search items',
+    placeholder: 'Search items...',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <SearchField label="Small" size="sm" placeholder="Small search..." />
+      <SearchField label="Default" size="default" placeholder="Default search..." />
+      <SearchField label="Large" size="lg" placeholder="Large search..." />
+    </div>
+  ),
+};

package/src/elements/Select/Select.stories.tsx

@@ -5,7 +5,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Select, MultiSelect } from './Select';
 

package/src/elements/Skeleton/Skeleton.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Skeleton } from './Skeleton';
 
 const meta = {

package/src/elements/Switch/Switch.stories.tsx

@@ -6,7 +6,7 @@
  * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Switch } from './Switch';
 
 const meta = {

package/src/elements/Table/Table.stories.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Table,
   TableHeader,

package/src/elements/Tabs/Tabs.stories.tsx

@@ -5,7 +5,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, type Key } from 'react';
 import { Tabs, TabList, Tab, TabPanel } from './Tabs';
 import { Settings, User, Bell, Mail, CreditCard, Lock } from 'lucide-react';

package/src/elements/TextField/TextField.stories.tsx

@@ -5,7 +5,7 @@
  * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { TextField } from './TextField';
 
 const meta = {

package/src/elements/TimeField/TimeField.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 { TimeField, Time } from './index';
 
 const meta = {

package/src/elements/Toast/Toast.stories.tsx

@@ -7,7 +7,7 @@
  * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AAA)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState, type ReactElement } from 'react';
 import { Bell, CheckCircle2, AlertTriangle, Info, Download, Trash2 } from 'lucide-react';
 import { ToastProvider } from './ToastProvider';

package/src/elements/Tooltip/Tooltip.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md Phase 4 (Documentation)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from './Tooltip';
 import { Button } from '../Button';
 import { Info, HelpCircle, Settings, AlertCircle } from 'lucide-react';