@12-apps/ui 1.4.1 → 1.5.1

package/src/components/form/Command/Command.test.stories.tsx

@@ -1,215 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn } from 'storybook/test';
-
-import { Command } from './Command';
-
-const meta: Meta<typeof Command> = {
-  title: 'Form/Command/Tests',
-  component: Command,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Command'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    open: true,
-    items: [
-      { id: '1', label: 'Home', action: fn() },
-      { id: '2', label: 'Settings', action: fn() },
-    ],
-    onSelect: fn(),
-    onOpenChange: fn(),
-  },
-  play: async ({ step }) => {
-    await step('Verify command palette is visible', async () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      await expect(dialog).toBeInTheDocument();
-    });
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    open: true,
-    items: [
-      { id: '1', label: 'Home', action: fn() },
-      { id: '2', label: 'Settings', action: fn() },
-    ],
-    onSelect: fn(),
-    onOpenChange: fn(),
-  },
-  play: async ({ step }) => {
-    await step('Check dialog exists', async () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      await expect(dialog).toBeInTheDocument();
-    });
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  args: {
-    open: true,
-    items: [{ id: '1', label: 'Home', action: fn() }],
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  play: async ({ step }) => {
-    await step('Check responsive layout', async () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      await expect(dialog).toBeInTheDocument();
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  args: {
-    open: true,
-    variant: 'glass',
-    glow: true,
-    items: [
-      { id: '1', label: 'Home', action: fn() },
-      { id: '2', label: 'Settings', disabled: true, action: fn() },
-    ],
-  },
-  play: async ({ step }) => {
-    await step('Check visual elements', async () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      await expect(dialog).toBeInTheDocument();
-    });
-  },
-};
-
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  args: {
-    open: true,
-    items: [],
-    emptyMessage: 'No results found',
-  },
-  play: async ({ step }) => {
-    await step('Check dialog with empty state', async () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      await expect(dialog).toBeInTheDocument();
-    });
-  },
-};
-
-
-export const TestIdComprehensive: Story = {
-  name: '🎯 TestId Comprehensive Verification',
-  args: {
-    open: true,
-    dataTestId: 'command-test',
-    items: [
-      { id: '1', label: 'Home', category: 'Navigation', action: fn() },
-      { id: '2', label: 'Settings', category: 'Navigation', action: fn() },
-      { id: '3', label: 'New File', category: 'Actions', action: fn() },
-    ],
-    showCategories: true,
-    onSelect: fn(),
-    onOpenChange: fn(),
-    onValueChange: fn(),
-    emptyMessage: 'No results found',
-  },
-  play: async ({ step, args }) => {
-    await step('Verify basic command structure testIds', async () => {
-      // Container
-      const container = document.querySelector('[data-testid="command-test"]');
-      await expect(container).toBeInTheDocument();
-
-      // Input
-      const input = document.querySelector('[data-testid="command-test-input"]');
-      await expect(input).toBeInTheDocument();
-
-      // List
-      const list = document.querySelector('[data-testid="command-test-list"]');
-      await expect(list).toBeInTheDocument();
-    });
-
-    await step('Verify command items testIds', async () => {
-      const item1 = document.querySelector('[data-testid="command-item-1"]');
-      const item2 = document.querySelector('[data-testid="command-item-2"]');
-      const item3 = document.querySelector('[data-testid="command-item-3"]');
-
-      await expect(item1).toBeInTheDocument();
-      await expect(item2).toBeInTheDocument();
-      await expect(item3).toBeInTheDocument();
-    });
-
-    await step('Verify category group testIds', async () => {
-      const navGroup = document.querySelector('[data-testid="command-group-Navigation"]');
-      const actionsGroup = document.querySelector('[data-testid="command-group-Actions"]');
-
-      await expect(navGroup).toBeInTheDocument();
-      await expect(actionsGroup).toBeInTheDocument();
-    });
-
-    await step('Test callback functions', async () => {
-      // Test onValueChange
-      args.onValueChange?.('test');
-      await expect(args.onValueChange).toHaveBeenCalledWith('test');
-
-      // Test onSelect
-      const homeItem = args.items?.find(item => item.id === '1');
-      if (homeItem) {
-        args.onSelect?.(homeItem);
-        await expect(args.onSelect).toHaveBeenCalledWith(homeItem);
-      }
-
-      // Test onOpenChange
-      args.onOpenChange?.(false);
-      await expect(args.onOpenChange).toHaveBeenCalledWith(false);
-    });
-  },
-};
-
-export const TestIdEmptyState: Story = {
-  name: '🎯 TestId Empty State',
-  args: {
-    open: true,
-    dataTestId: 'empty-command',
-    items: [],
-    emptyMessage: 'No results found',
-  },
-  play: async ({ step }) => {
-    await step('Verify empty state testIds', async () => {
-      const container = document.querySelector('[data-testid="empty-command"]');
-      await expect(container).toBeInTheDocument();
-
-      const emptyState = document.querySelector('[data-testid="empty-command-empty"]');
-      await expect(emptyState).toBeInTheDocument();
-    });
-  },
-};
-
-export const TestIdLoadingState: Story = {
-  name: '🎯 TestId Loading State',
-  args: {
-    open: true,
-    dataTestId: 'loading-command',
-    loading: true,
-    items: [{ id: '1', label: 'Home' }],
-  },
-  play: async ({ step }) => {
-    await step('Verify loading state testIds', async () => {
-      const container = document.querySelector('[data-testid="loading-command"]');
-      await expect(container).toBeInTheDocument();
-
-      const loading = document.querySelector('[data-testid="loading-command-loading"]');
-      await expect(loading).toBeInTheDocument();
-    });
-  },
-};

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

@@ -1,112 +0,0 @@
-import { Box } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { CreatableSelect } from './CreatableSelect';
-import type { CreatableSelectOption } from './CreatableSelect.types';
-
-const meta: Meta<typeof CreatableSelect> = {
-  title: 'Form/CreatableSelect',
-  component: CreatableSelect,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A single-select, searchable combobox that can create a new option inline (create-on-Enter).',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:CreatableSelect'],
-  argTypes: {
-    label: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
-    loading: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const BASE_OPTIONS: CreatableSelectOption[] = [
-  { value: 'drinks', label: 'Bebidas' },
-  { value: 'food', label: 'Comidas' },
-  { value: 'desserts', label: 'Sobremesas' },
-];
-
-/** Plain searchable select — no `onCreate`, so typing an unknown value offers no create row. */
-export const SearchableSelect: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string | null>(null);
-    return (
-      <Box sx={{ width: 360 }}>
-        <CreatableSelect {...args} options={BASE_OPTIONS} value={value} onChange={setValue} />
-      </Box>
-    );
-  },
-  args: { label: 'Categoria', placeholder: 'Selecione…' },
-};
-
-/** Pick-or-create: an unknown query shows a "Criar …" row; choosing it appends + selects it. */
-export const Creatable: Story = {
-  render: (args) => {
-    const [options, setOptions] = useState<CreatableSelectOption[]>(BASE_OPTIONS);
-    const [value, setValue] = useState<string | null>(null);
-    return (
-      <Box sx={{ width: 360 }}>
-        <CreatableSelect
-          {...args}
-          options={options}
-          value={value}
-          onChange={setValue}
-          onCreate={(label) => {
-            const created = { value: label.toLowerCase(), label };
-            setOptions((prev) => [...prev, created]);
-            setValue(created.value);
-          }}
-        />
-      </Box>
-    );
-  },
-  args: { label: 'Categoria', placeholder: 'Buscar ou criar…' },
-};
-
-/** Preselected value. */
-export const WithValue: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string | null>('food');
-    return (
-      <Box sx={{ width: 360 }}>
-        <CreatableSelect {...args} options={BASE_OPTIONS} value={value} onChange={setValue} />
-      </Box>
-    );
-  },
-  args: { label: 'Categoria' },
-};
-
-/** Loading state (e.g. while a create request is in flight). */
-export const Loading: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string | null>(null);
-    return (
-      <Box sx={{ width: 360 }}>
-        <CreatableSelect {...args} options={BASE_OPTIONS} value={value} onChange={setValue} />
-      </Box>
-    );
-  },
-  args: { label: 'Categoria', loading: true },
-};
-
-/** Disabled state. */
-export const Disabled: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string | null>('drinks');
-    return (
-      <Box sx={{ width: 360 }}>
-        <CreatableSelect {...args} options={BASE_OPTIONS} value={value} onChange={setValue} />
-      </Box>
-    );
-  },
-  args: { label: 'Categoria', disabled: true },
-};

package/src/components/form/CreatableSelect/CreatableSelect.test.stories.tsx

@@ -1,134 +0,0 @@
-import { Box } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { CreatableSelect } from './CreatableSelect';
-import type { CreatableSelectOption } from './CreatableSelect.types';
-
-const meta: Meta<typeof CreatableSelect> = {
-  title: 'Form/CreatableSelect/Tests',
-  component: CreatableSelect,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:CreatableSelect'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const OPTIONS: CreatableSelectOption[] = [
-  { value: 'drinks', label: 'Bebidas' },
-  { value: 'food', label: 'Comidas' },
-  { value: 'desserts', label: 'Sobremesas' },
-];
-
-// ==================== INTERACTION TESTS ====================
-
-export const SelectsAnExistingOption: Story = {
-  name: '🧪 Selects an existing option',
-  args: {
-    options: OPTIONS,
-    value: null,
-    onChange: fn(),
-    label: 'Categoria',
-    dataTestId: 'cat',
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Type a query that matches an option and pick it', async () => {
-      const input = canvas.getByTestId('cat-input');
-      await userEvent.click(input);
-      await userEvent.type(input, 'Beb');
-      await waitFor(() => expect(canvas.getByText('Bebidas')).toBeInTheDocument());
-      await userEvent.click(canvas.getByText('Bebidas'));
-      await waitFor(() => expect(args.onChange).toHaveBeenCalledWith('drinks'));
-    });
-  },
-};
-
-export const CreatesANewOptionOnEnter: Story = {
-  name: '🧪 Creates a new option on Enter',
-  args: {
-    options: OPTIONS,
-    value: null,
-    onChange: fn(),
-    onCreate: fn(),
-    label: 'Categoria',
-    dataTestId: 'cat',
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Type an unknown value and press Enter on the create row', async () => {
-      const input = canvas.getByTestId('cat-input');
-      await userEvent.click(input);
-      await userEvent.type(input, 'Lanches');
-      await waitFor(() => expect(canvas.getByText('Criar "Lanches"')).toBeInTheDocument());
-      await userEvent.keyboard('{ArrowDown}{Enter}');
-      await waitFor(() => expect(args.onCreate).toHaveBeenCalledWith('Lanches'));
-    });
-  },
-};
-
-export const NoCreateRowWhenOnCreateOmitted: Story = {
-  name: '🧪 No create row without onCreate',
-  args: {
-    options: OPTIONS,
-    value: null,
-    onChange: fn(),
-    label: 'Categoria',
-    noOptionsText: 'Nada encontrado',
-    dataTestId: 'cat',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('An unknown query shows no-options, not a create row', async () => {
-      const input = canvas.getByTestId('cat-input');
-      await userEvent.click(input);
-      await userEvent.type(input, 'Zzz');
-      await waitFor(() => expect(canvas.getByText('Nada encontrado')).toBeInTheDocument());
-      await waitFor(() => expect(canvas.queryByText(/^Criar /)).not.toBeInTheDocument());
-    });
-  },
-};
-
-export const ControlledValueRoundTrips: Story = {
-  name: '🧪 Controlled value round-trips',
-  render: (args) => {
-    const [options, setOptions] = useState<CreatableSelectOption[]>(OPTIONS);
-    const [value, setValue] = useState<string | null>(null);
-    return (
-      <Box sx={{ width: 320 }}>
-        <CreatableSelect
-          {...args}
-          options={options}
-          value={value}
-          onChange={setValue}
-          onCreate={(label) => {
-            const created = { value: label.toLowerCase(), label };
-            setOptions((prev) => [...prev, created]);
-            setValue(created.value);
-          }}
-          dataTestId="cat"
-        />
-      </Box>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Create a value and confirm it becomes the selected input', async () => {
-      const input = canvas.getByTestId('cat-input') as HTMLInputElement;
-      await userEvent.click(input);
-      await userEvent.type(input, 'Combos');
-      await waitFor(() => expect(canvas.getByText('Criar "Combos"')).toBeInTheDocument());
-      await userEvent.keyboard('{ArrowDown}{Enter}');
-      await waitFor(() => expect(input.value).toBe('Combos'));
-    });
-  },
-};