@12-apps/ui 1.0.0

package/src/components/form/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,715 @@
+import { CssBaseline } from '@mui/material';
+import { createTheme,ThemeProvider } from '@mui/material/styles';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { Autocomplete } from './Autocomplete';
+import type { AutocompleteProps } from './Autocomplete.types';
+
+interface Person {
+  id: string;
+  name: string;
+  email: string;
+  department?: string;
+}
+
+const samplePeople: Person[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', department: 'Engineering' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', department: 'Design' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', department: 'Marketing' },
+  { id: '4', name: 'Alice Brown', email: 'alice@example.com', department: 'Engineering' },
+  { id: '5', name: 'Charlie Wilson', email: 'charlie@example.com', department: 'Sales' },
+  { id: '6', name: 'Diana Davis', email: 'diana@example.com', department: 'HR' },
+  { id: '7', name: 'Edward Miller', email: 'edward@example.com', department: 'Finance' },
+  { id: '8', name: 'Fiona Garcia', email: 'fiona@example.com', department: 'Legal' },
+];
+
+const fruits = [
+  'Apple',
+  'Banana',
+  'Cherry',
+  'Date',
+  'Elderberry',
+  'Fig',
+  'Grape',
+  'Honeydew',
+  'Kiwi',
+  'Lemon',
+];
+const countries = [
+  'United States',
+  'United Kingdom',
+  'Canada',
+  'Australia',
+  'Germany',
+  'France',
+  'Japan',
+  'Brazil',
+  'India',
+  'Mexico',
+];
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Form/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs', 'component:Autocomplete'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A comprehensive autocomplete component with ARIA support, keyboard navigation, and multiple selection modes.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={createTheme()}>
+        <CssBaseline />
+        <div style={{ padding: '20px', minHeight: '400px', backgroundColor: '#f5f5f5' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+// Required story exports for validation
+export const Default: Story = {
+  render: () => <ControlledAutocomplete suggestions={fruits} placeholder="Select a fruit..." />,
+};
+
+// Controlled Component Wrapper
+const ControlledAutocomplete = <T = string | Person,>(props: Partial<AutocompleteProps<T>>) => {
+  const [value, setValue] = useState(props.value || '');
+  const [selectedItems, setSelectedItems] = useState<T[]>((props.selectedItems || []) as T[]);
+
+  return (
+    <Autocomplete
+      {...props}
+      value={value}
+      onChange={setValue}
+      selectedItems={selectedItems}
+      onSelectedItemsChange={setSelectedItems}
+    />
+  );
+};
+
+// Basic Stories
+export const BasicUsage: Story = {
+  render: () => <ControlledAutocomplete suggestions={fruits} placeholder="Select a fruit..." />,
+};
+
+export const WithInitialValue: Story = {
+  render: () => (
+    <ControlledAutocomplete value="Apple" suggestions={fruits} placeholder="Select a fruit..." />
+  ),
+};
+
+export const ObjectData: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={samplePeople}
+      getKey={(person: Person) => person.id}
+      getLabel={(person: Person) => person.name}
+      getDescription={(person: Person) => `${person.email} - ${person.department}`}
+      placeholder="Search for a person..."
+    />
+  ),
+};
+
+// Visual States
+export const Disabled: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={fruits}
+      disabled={true}
+      value="Cannot edit"
+      placeholder="Disabled autocomplete..."
+    />
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={[]}
+      async={true}
+      isLoading={true}
+      placeholder="Loading suggestions..."
+    />
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <ControlledAutocomplete suggestions={[]} value="xyz" placeholder="No matching results..." />
+  ),
+};
+
+// Feature Demonstrations
+export const WithGhostText: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={countries}
+      showGhostText={true}
+      placeholder="Type 'Uni' to see ghost text..."
+    />
+  ),
+};
+
+export const MultipleSelectionMode: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={fruits}
+      multiple={true}
+      selectedItems={['Apple', 'Banana']}
+      placeholder="Select multiple fruits..."
+    />
+  ),
+};
+
+const AsyncModeComponent = () => {
+  const [loading, setLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [value, setValue] = useState('');
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+    if (newValue) {
+      setLoading(true);
+      // Simulate API call
+      window.setTimeout(() => {
+        setSuggestions(fruits.filter((f) => f.toLowerCase().includes(newValue.toLowerCase())));
+        setLoading(false);
+      }, 500);
+    }
+  };
+
+  return (
+    <Autocomplete
+      value={value}
+      onChange={handleChange}
+      suggestions={suggestions}
+      async={true}
+      isLoading={loading}
+      placeholder="Type to search (async)..."
+    />
+  );
+};
+
+export const AsyncMode: Story = {
+  render: () => <AsyncModeComponent />,
+};
+
+export const CustomRenderer: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={samplePeople}
+      getKey={(person: Person) => person.id}
+      getLabel={(person: Person) => person.name}
+      renderSuggestion={(person: Person, state) => (
+        <div
+          style={{
+            padding: '8px',
+            backgroundColor: state.active ? '#e3f2fd' : 'transparent',
+            borderRadius: '4px',
+          }}
+        >
+          <div style={{ fontWeight: 'bold', color: '#1976d2' }}>{person.name}</div>
+          <div style={{ fontSize: '0.875rem', color: '#666' }}>{person.email}</div>
+          <div style={{ fontSize: '0.75rem', color: '#999' }}>{person.department}</div>
+        </div>
+      )}
+      placeholder="Custom rendered items..."
+    />
+  ),
+};
+
+// Typed suggestions: search fills the input, link opens a URL (Google-style)
+interface QuickSearchItem {
+  id: string;
+  text: string;
+  type: 'search' | 'link';
+  url?: string;
+}
+
+const quickSearchItems: QuickSearchItem[] = [
+  { id: '1', text: 'Produtos', type: 'search' },
+  { id: '2', text: 'Pedidos', type: 'search' },
+  { id: '3', text: 'Estoque', type: 'search' },
+  { id: '4', text: 'Abrir Storybook', type: 'link', url: 'https://storybook.js.org' },
+  { id: '5', text: 'Documentação do Next.js', type: 'link', url: 'https://nextjs.org/docs' },
+];
+
+const SearchAndLinkComponent = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Autocomplete<QuickSearchItem>
+      value={value}
+      onChange={setValue}
+      suggestions={quickSearchItems}
+      getKey={(item) => item.id}
+      getLabel={(item) => item.text}
+      getSuggestionType={(item) => item.type}
+      getUrl={(item) => item.url}
+      placeholder="Search pages, or open a link..."
+    />
+  );
+};
+
+export const SearchAndLinkSuggestions: Story = {
+  render: () => <SearchAndLinkComponent />,
+};
+
+// Match Modes
+export const StartsWithMatching: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={countries}
+      matchMode="startsWith"
+      placeholder="Type 'U' to match countries starting with U..."
+    />
+  ),
+};
+
+export const ContainsMatching: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={countries}
+      matchMode="contains"
+      placeholder="Type 'land' to match countries containing 'land'..."
+    />
+  ),
+};
+
+export const FuzzyMatching: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={['JavaScript', 'TypeScript', 'CoffeeScript', 'ActionScript', 'PureScript']}
+      matchMode="fuzzy"
+      placeholder="Type 'jst' for fuzzy match..."
+    />
+  ),
+};
+
+// Configuration Examples
+export const NoFreeText: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={fruits}
+      allowFreeText={false}
+      placeholder="Must select from list..."
+    />
+  ),
+};
+
+export const CustomDebounce: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={fruits}
+      debounceMs={500}
+      placeholder="500ms debounce delay..."
+    />
+  ),
+};
+
+export const LimitedVisibleItems: Story = {
+  render: () => (
+    <ControlledAutocomplete
+      suggestions={Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)}
+      maxVisibleItems={5}
+      placeholder="Only shows 5 items at a time..."
+    />
+  ),
+};
+
+// Theme Variations
+export const DarkTheme: Story = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={createTheme({ palette: { mode: 'dark' } })}>
+        <CssBaseline />
+        <div style={{ padding: '20px', minHeight: '400px', backgroundColor: '#121212' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  render: () => (
+    <ControlledAutocomplete suggestions={fruits} placeholder="Dark theme autocomplete..." />
+  ),
+};
+
+// Responsive Behavior
+export const ResponsiveWidth: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <div style={{ width: '100%' }}>
+        <h4>Full Width</h4>
+        <ControlledAutocomplete suggestions={fruits} placeholder="100% width..." />
+      </div>
+      <div style={{ width: '300px' }}>
+        <h4>Fixed 300px</h4>
+        <ControlledAutocomplete suggestions={fruits} placeholder="300px width..." />
+      </div>
+      <div style={{ width: '150px' }}>
+        <h4>Narrow 150px</h4>
+        <ControlledAutocomplete suggestions={fruits} placeholder="150px..." />
+      </div>
+    </div>
+  ),
+};
+
+// Complex Use Cases
+const FormIntegrationComponent = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    country: '',
+    fruits: [] as string[],
+  });
+
+  return (
+    <form style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px' }}>
+      <div>
+        <label htmlFor="name-input">Name:</label>
+        <input
+          id="name-input"
+          type="text"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          style={{ width: '100%', padding: '8px', marginTop: '4px' }}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="country-autocomplete">Country:</label>
+        <div style={{ marginTop: '4px' }}>
+          <ControlledAutocomplete
+            id="country-autocomplete"
+            suggestions={countries}
+            value={formData.country}
+            onChange={(value) => setFormData({ ...formData, country: value })}
+            placeholder="Select your country..."
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="fruits-autocomplete">Favorite Fruits:</label>
+        <div style={{ marginTop: '4px' }}>
+          <ControlledAutocomplete
+            id="fruits-autocomplete"
+            suggestions={fruits}
+            multiple={true}
+            selectedItems={formData.fruits}
+            onSelectedItemsChange={(items) => setFormData({ ...formData, fruits: items })}
+            placeholder="Select multiple fruits..."
+          />
+        </div>
+      </div>
+
+      <button type="submit" style={{ padding: '8px 16px' }}>
+        Submit
+      </button>
+
+      <pre style={{ backgroundColor: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+        {JSON.stringify(formData, null, 2)}
+      </pre>
+    </form>
+  );
+};
+
+export const FormIntegration: Story = {
+  render: () => <FormIntegrationComponent />,
+};
+
+// Performance Demo
+interface LargeDataItem {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export const LargeDatasetPerformance: Story = {
+  render: () => {
+    const largeDataset: LargeDataItem[] = Array.from({ length: 10000 }, (_, i) => ({
+      id: `item-${i}`,
+      label: `Item ${i + 1}`,
+      description: `Description for item ${i + 1}`,
+    }));
+
+    return (
+      <ControlledAutocomplete<LargeDataItem>
+        suggestions={largeDataset}
+        getKey={(item) => item.id}
+        getLabel={(item) => item.label}
+        getDescription={(item) => item.description}
+        maxVisibleItems={20}
+        debounceMs={300}
+        placeholder="Search 10,000 items..."
+      />
+    );
+  },
+};
+
+// Required story exports for validation
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <div>
+        <h4>Default</h4>
+        <ControlledAutocomplete suggestions={fruits} placeholder="Default autocomplete..." />
+      </div>
+      <div>
+        <h4>With Ghost Text</h4>
+        <ControlledAutocomplete
+          suggestions={countries}
+          showGhostText={true}
+          placeholder="Type to see ghost text..."
+        />
+      </div>
+      <div>
+        <h4>Multiple Selection</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          multiple={true}
+          placeholder="Select multiple items..."
+        />
+      </div>
+      <div>
+        <h4>Custom Renderer</h4>
+        <ControlledAutocomplete
+          suggestions={samplePeople}
+          getKey={(person: Person) => person.id}
+          getLabel={(person: Person) => person.name}
+          renderSuggestion={(person: Person, state) => (
+            <div
+              style={{
+                padding: '8px',
+                backgroundColor: state.active ? '#e3f2fd' : 'transparent',
+              }}
+            >
+              <div style={{ fontWeight: 'bold' }}>{person.name}</div>
+              <div style={{ fontSize: '0.875rem' }}>{person.email}</div>
+            </div>
+          )}
+          placeholder="Custom rendered items..."
+        />
+      </div>
+      <div>
+        <h4>Async Mode</h4>
+        <AsyncModeComponent />
+      </div>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <div>
+        <h4>Small (Default MUI Input Size)</h4>
+        <ControlledAutocomplete 
+          suggestions={fruits} 
+          placeholder="Small size..."
+        />
+      </div>
+      <div>
+        <h4>Medium (Default)</h4>
+        <ControlledAutocomplete 
+          suggestions={fruits} 
+          placeholder="Medium size..."
+        />
+      </div>
+      <div>
+        <h4>Large (Custom styling)</h4>
+        <div style={{ fontSize: '1.25rem' }}>
+          <ControlledAutocomplete 
+            suggestions={fruits} 
+            placeholder="Large size..."
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <div>
+        <h4>Default</h4>
+        <ControlledAutocomplete suggestions={fruits} placeholder="Default state..." />
+      </div>
+      <div>
+        <h4>With Value</h4>
+        <ControlledAutocomplete 
+          value="Apple" 
+          suggestions={fruits} 
+          placeholder="Has value..."
+        />
+      </div>
+      <div>
+        <h4>Disabled</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          disabled={true}
+          value="Disabled"
+          placeholder="Disabled state..."
+        />
+      </div>
+      <div>
+        <h4>Loading</h4>
+        <ControlledAutocomplete
+          suggestions={[]}
+          async={true}
+          isLoading={true}
+          placeholder="Loading state..."
+        />
+      </div>
+      <div>
+        <h4>Empty Results</h4>
+        <ControlledAutocomplete 
+          suggestions={[]} 
+          value="xyz" 
+          placeholder="No results..."
+        />
+      </div>
+      <div>
+        <h4>Multiple Selected</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          multiple={true}
+          selectedItems={['Apple', 'Banana', 'Cherry']}
+          placeholder="Multiple selected..."
+        />
+      </div>
+    </div>
+  ),
+};
+
+const InteractiveStatesComponent = () => {
+  const [hoverValue, setHoverValue] = useState('');
+  const [focusValue, setFocusValue] = useState('');
+  const [activeValue, setActiveValue] = useState('');
+  
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <div>
+        <h4>Hover State</h4>
+        <div
+          onMouseEnter={() => setHoverValue('Hovered')}
+          onMouseLeave={() => setHoverValue('')}
+          style={{ 
+            border: hoverValue ? '2px solid #1976d2' : 'none',
+            padding: '2px',
+            borderRadius: '4px'
+          }}
+        >
+          <ControlledAutocomplete 
+            suggestions={fruits} 
+            placeholder="Hover over me..."
+            value={hoverValue}
+          />
+        </div>
+      </div>
+      <div>
+        <h4>Focus State</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          placeholder="Click to focus..."
+          value={focusValue}
+          onChange={(value) => setFocusValue(value)}
+          onFocus={() => setFocusValue('Focused')}
+          onBlur={() => setFocusValue('')}
+        />
+      </div>
+      <div>
+        <h4>Active/Typing State</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          placeholder="Start typing..."
+          value={activeValue}
+          onChange={(value) => setActiveValue(value)}
+        />
+      </div>
+      <div>
+        <h4>Dropdown Open State</h4>
+        <ControlledAutocomplete
+          suggestions={fruits}
+          placeholder="Click to open dropdown..."
+          defaultOpen={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const InteractiveStates: Story = {
+  render: () => <InteractiveStatesComponent />,
+};
+
+export const Responsive: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
+        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+        desktop: { name: 'Desktop', styles: { width: '1440px', height: '900px' } },
+      },
+    },
+  },
+  render: () => (
+    <div style={{ padding: '20px' }}>
+      <h3>Responsive Autocomplete</h3>
+      <p>Resize the viewport to see responsive behavior</p>
+      <div style={{ marginTop: '20px' }}>
+        <ControlledAutocomplete
+          suggestions={countries}
+          placeholder="Responsive autocomplete..."
+        />
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <h4>In a flex container</h4>
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <div style={{ flex: '1 1 300px' }}>
+            <ControlledAutocomplete
+              suggestions={fruits}
+              placeholder="Flex item 1..."
+            />
+          </div>
+          <div style={{ flex: '1 1 300px' }}>
+            <ControlledAutocomplete
+              suggestions={countries}
+              placeholder="Flex item 2..."
+            />
+          </div>
+        </div>
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <h4>In a grid container</h4>
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+          gap: '15px' 
+        }}>
+          <ControlledAutocomplete
+            suggestions={fruits}
+            placeholder="Grid item 1..."
+          />
+          <ControlledAutocomplete
+            suggestions={countries}
+            placeholder="Grid item 2..."
+          />
+          <ControlledAutocomplete
+            suggestions={fruits}
+            placeholder="Grid item 3..."
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};