@12-apps/ui 1.5.0 → 1.5.1

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

@@ -1,281 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { CepField } from './CepField';
-import type { CepAddress } from './CepField.types';
-
-const ADDRESS: CepAddress = {
-  cep: '01310100',
-  street: 'Avenida Paulista',
-  neighborhood: 'Bela Vista',
-  city: 'São Paulo',
-  state: 'SP',
-};
-
-const meta: Meta<typeof CepField> = {
-  title: 'Form/CepField/Tests',
-  component: CepField,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-    docs: {
-      description: { component: 'Test stories for CepField masking, lookup and race-safety' },
-    },
-  },
-  tags: ['autodocs', 'test'],
-};
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-/** Controlled harness — the field is controlled, so tests need real state. */
-function Harness({
-  onLookup,
-  onResolved,
-  onNotFound,
-  debounceMs = 0,
-  initial = '',
-  disabled = false,
-}: {
-  onLookup?: (cep: string) => Promise<CepAddress | null>;
-  onResolved?: (address: CepAddress) => void;
-  onNotFound?: () => void;
-  debounceMs?: number;
-  initial?: string;
-  disabled?: boolean;
-}): React.ReactElement {
-  const [value, setValue] = useState(initial);
-  return (
-    <CepField
-      value={value}
-      onChange={setValue}
-      onLookup={onLookup}
-      onResolved={onResolved}
-      onNotFound={onNotFound}
-      debounceMs={debounceMs}
-      disabled={disabled}
-    />
-  );
-}
-
-// 1. Masking
-
-export const MasksWhileTyping: Story = {
-  render: () => <Harness />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await expect(input).toHaveValue('01310-100');
-  },
-};
-
-export const StripsNonDigitsAndCaps: Story = {
-  render: () => <Harness />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, 'ab01310100999');
-    await expect(input).toHaveValue('01310-100');
-  },
-};
-
-// 2. Lookup
-
-export const ResolvesACompleteCep: Story = {
-  render: function ResolvesStory() {
-    const onResolved = fn();
-    return (
-      <Harness onLookup={async () => ADDRESS} onResolved={onResolved} />
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await waitFor(() => expect(canvas.getByTestId('cep-field-postalCode-found')).toBeInTheDocument());
-  },
-};
-
-export const DoesNotLookUpAnIncompleteCep: Story = {
-  render: function IncompleteStory() {
-    const lookup = fn(async () => ADDRESS);
-    return <Harness onLookup={lookup} />;
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '0131');
-    // Presence evidence first: the field really did take the partial value…
-    await expect(input).toHaveValue('0131');
-    // …and no status line ever appears, because an incomplete CEP is never
-    // queried. waitFor gives the (absent) debounce a chance to fire first.
-    await waitFor(() => {
-      expect(canvas.queryByTestId('cep-field-postalCode-loading')).toBeNull();
-      expect(canvas.queryByTestId('cep-field-postalCode-found')).toBeNull();
-    });
-  },
-};
-
-export const ReportsAnUnknownCep: Story = {
-  render: () => <Harness onLookup={async () => null} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '00000000');
-    await waitFor(() =>
-      expect(canvas.getByTestId('cep-field-postalCode-notfound')).toBeInTheDocument(),
-    );
-  },
-};
-
-/**
- * A miss must be REPORTED, not just displayed: callers that auto-filled from a
- * previous CEP rely on `onNotFound` to undo it, so the form never shows one
- * CEP's street under another's.
- */
-export const ReportsAMissToTheCaller: Story = {
-  render: function ReportsMissStory() {
-    const [missed, setMissed] = useState(false);
-    return (
-      <div>
-        <Harness onLookup={async () => null} onNotFound={() => setMissed(true)} />
-        <span data-testid="miss-flag">{missed ? 'missed' : 'clean'}</span>
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '00000000');
-    await waitFor(() => expect(canvas.getByTestId('miss-flag')).toHaveTextContent('missed'));
-  },
-};
-
-/** …and a resolved CEP must NOT report a miss. */
-export const DoesNotReportAMissOnSuccess: Story = {
-  render: function NoMissStory() {
-    const [missed, setMissed] = useState(false);
-    return (
-      <div>
-        <Harness onLookup={async () => ADDRESS} onNotFound={() => setMissed(true)} />
-        <span data-testid="miss-flag">{missed ? 'missed' : 'clean'}</span>
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await waitFor(() => expect(canvas.getByTestId('cep-field-postalCode-found')).toBeInTheDocument());
-    await expect(canvas.getByTestId('miss-flag')).toHaveTextContent('clean');
-  },
-};
-
-/** A lookup that throws is indistinguishable from "not found" — never a crash. */
-export const SurvivesAThrowingLookup: Story = {
-  render: () => (
-    <Harness
-      onLookup={async () => {
-        throw new Error('provider down');
-      }}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await waitFor(() =>
-      expect(canvas.getByTestId('cep-field-postalCode-notfound')).toBeInTheDocument(),
-    );
-  },
-};
-
-/**
- * …including a lookup that throws BEFORE returning a promise, which is what a
- * misconfigured adapter does. Awaiting the call and catching on its result
- * would miss this one entirely and surface it as an unhandled rejection.
- */
-export const SurvivesASynchronousThrow: Story = {
-  render: () => (
-    <Harness
-      onLookup={() => {
-        throw new Error('adapter misconfigured');
-      }}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await waitFor(() =>
-      expect(canvas.getByTestId('cep-field-postalCode-notfound')).toBeInTheDocument(),
-    );
-  },
-};
-
-// 3. State
-
-export const DisabledSuppressesLookup: Story = {
-  render: () => <Harness initial="01310-100" disabled onLookup={async () => ADDRESS} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await expect(input).toBeDisabled();
-    await expect(input).toHaveValue('01310-100');
-    // A complete CEP, but disabled suppresses the lookup entirely.
-    await waitFor(() => expect(canvas.queryByTestId('cep-field-postalCode-found')).toBeNull());
-  },
-};
-
-export const ClearsStatusWhenEditedBackToIncomplete: Story = {
-  render: () => <Harness onLookup={async () => ADDRESS} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await userEvent.type(input, '01310100');
-    await waitFor(() => expect(canvas.getByTestId('cep-field-postalCode-found')).toBeInTheDocument());
-
-    await userEvent.type(input, '{backspace}');
-    await waitFor(() => expect(canvas.queryByTestId('cep-field-postalCode-found')).toBeNull());
-  },
-};
-
-// 4. Accessibility
-
-export const ExposesAccessibleStatus: Story = {
-  render: () => <Harness onLookup={async () => ADDRESS} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByTestId('cep-field-postalCode');
-
-    await expect(input).toHaveAttribute('aria-describedby', 'cep-field-postalCode-status');
-    await userEvent.type(input, '01310100');
-    await waitFor(() => expect(canvas.getByRole('status')).toBeInTheDocument());
-  },
-};
-
-export const RendersACallerError: Story = {
-  render: function ErrorStory() {
-    const [value, setValue] = useState('123');
-    return <CepField value={value} onChange={setValue} error="CEP inválido." />;
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByTestId('cep-field-postalCode-message')).toHaveTextContent(
-      'CEP inválido.',
-    );
-  },
-};

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

@@ -1,265 +0,0 @@
-import { FormGroup,Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Checkbox } from './Checkbox';
-
-const meta: Meta<typeof Checkbox> = {
-  title: 'Form/Checkbox',
-  component: Checkbox,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs', 'component:Checkbox'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'rounded', 'toggle'],
-    },
-    color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'warning', 'error'],
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-    loading: {
-      control: { type: 'boolean' },
-    },
-    ripple: {
-      control: { type: 'boolean' },
-    },
-    glow: {
-      control: { type: 'boolean' },
-    },
-    pulse: {
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: 'Default checkbox',
-  },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox variant="default" label="Default checkbox" defaultChecked />
-      <Checkbox variant="rounded" label="Rounded checkbox" defaultChecked />
-      <Checkbox variant="toggle" label="Toggle-style checkbox" defaultChecked />
-    </Stack>
-  ),
-};
-
-export const States: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox label="Unchecked" />
-      <Checkbox label="Checked" defaultChecked />
-      <Checkbox label="Indeterminate" indeterminate />
-      <Checkbox label="Disabled" disabled />
-      <Checkbox label="Disabled & Checked" disabled checked />
-    </Stack>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox label="Primary" color="primary" defaultChecked />
-      <Checkbox label="Secondary" color="secondary" defaultChecked />
-      <Checkbox label="Success" color="success" defaultChecked />
-      <Checkbox label="Warning" color="warning" defaultChecked />
-      <Checkbox label="Error" color="error" defaultChecked />
-    </Stack>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox label="Small" size="small" defaultChecked />
-      <Checkbox label="Medium" size="medium" defaultChecked />
-      <Checkbox label="Large" size="large" defaultChecked />
-    </Stack>
-  ),
-};
-
-export const WithHelperText: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox
-        label="Terms and Conditions"
-        helperText="Please read and accept our terms and conditions"
-      />
-      <Checkbox label="Newsletter" helperText="Subscribe to our weekly newsletter" defaultChecked />
-      <Checkbox label="Required Field" helperText="This field is required" error />
-    </Stack>
-  ),
-};
-
-export const CheckboxGroup: Story = {
-  render: () => (
-    <FormGroup>
-      <Checkbox label="Option 1" defaultChecked />
-      <Checkbox label="Option 2" />
-      <Checkbox label="Option 3" defaultChecked />
-      <Checkbox label="Option 4 (Disabled)" disabled />
-    </FormGroup>
-  ),
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: 'I accept the terms',
-    error: true,
-    helperText: 'You must accept the terms to continue',
-  },
-};
-
-export const LoadingState: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox label="Loading checkbox" loading />
-      <Checkbox label="Loading with text" loading defaultChecked />
-      <Checkbox loading /> {/* Without label */}
-    </Stack>
-  ),
-};
-
-export const AnimationEffects: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox label="Glow effect" glow defaultChecked />
-      <Checkbox label="Pulse effect" pulse defaultChecked />
-      <Checkbox label="No ripple effect" ripple={false} />
-      <Checkbox label="All effects" glow pulse defaultChecked />
-    </Stack>
-  ),
-};
-
-export const Accessibility: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Checkbox
-        label="Accessible checkbox"
-        data-testid="accessible-checkbox"
-        aria-describedby="checkbox-description"
-      />
-      <div id="checkbox-description">This checkbox has proper accessibility attributes</div>
-      <Checkbox
-        label="Required field"
-        required
-        error
-        helperText="This field is required"
-        data-testid="required-checkbox"
-      />
-    </Stack>
-  ),
-};
-
-export const Playground: Story = {
-  args: {
-    variant: 'default',
-    label: 'Playground Checkbox',
-    color: 'primary',
-    size: 'medium',
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-    error: false,
-    helperText: '',
-    loading: false,
-    ripple: true,
-    glow: false,
-    pulse: false,
-  },
-};
-
-// Required story exports for validation
-export const AllVariants: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Checkbox variant="default" label="Default variant" defaultChecked />
-        <Checkbox variant="rounded" label="Rounded variant" defaultChecked />
-        <Checkbox variant="toggle" label="Toggle variant" defaultChecked />
-      </Stack>
-    </Stack>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Stack direction="row" spacing={2} alignItems="center">
-      <Checkbox size="small" label="Small" defaultChecked />
-      <Checkbox size="medium" label="Medium" defaultChecked />
-      <Checkbox size="large" label="Large" defaultChecked />
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Stack direction="row" spacing={2}>
-        <Checkbox label="Default" />
-        <Checkbox label="Checked" defaultChecked />
-        <Checkbox label="Indeterminate" indeterminate />
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        <Checkbox label="Disabled" disabled />
-        <Checkbox label="Disabled Checked" disabled defaultChecked />
-        <Checkbox label="Loading" loading />
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        <Checkbox label="Error" error helperText="Error message" />
-        <Checkbox label="With Helper" helperText="Helper text" />
-      </Stack>
-    </Stack>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Stack direction="row" spacing={2}>
-        <Checkbox label="Hover me" glow />
-        <Checkbox label="Focus me" pulse />
-        <Checkbox label="Click me" defaultChecked />
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        <Checkbox label="With ripple" ripple defaultChecked />
-        <Checkbox label="No ripple" ripple={false} defaultChecked />
-      </Stack>
-    </Stack>
-  ),
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '360px', height: '640px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1440px', height: '900px' } },
-      },
-    },
-  },
-  render: () => (
-    <Stack spacing={2} sx={{ width: '100%', p: 2 }}>
-      <FormGroup>
-        <Checkbox label="Responsive checkbox 1" defaultChecked />
-        <Checkbox label="Responsive checkbox 2" />
-        <Checkbox label="Responsive checkbox 3" defaultChecked />
-        <Checkbox label="Responsive checkbox 4" disabled />
-      </FormGroup>
-    </Stack>
-  ),
-};