@12-apps/ui 1.5.0 → 1.5.2

package/src/components/feedback/ConfirmAction/ConfirmAction.stories.tsx

@@ -1,146 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Stack } from '@mui/material';
-
-import { Button } from '../../form/Button';
-
-import { ConfirmAction } from './ConfirmAction';
-import { ConfirmButton } from './ConfirmButton';
-import { withConfirmation } from './with-confirmation';
-
-const meta: Meta<typeof ConfirmAction> = {
-  title: 'Feedback/ConfirmAction',
-  component: ConfirmAction,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Wraps a destructive action in a confirmation popup. The guarded handler runs only after the operator confirms; cancelling sends nothing, an in-flight write cannot be fired twice, and a failure keeps the popup open carrying the error.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    tone: { control: 'inline-radio', options: ['destructive', 'default'] },
-    initialFocus: { control: 'inline-radio', options: ['confirm', 'cancel'] },
-    typeToConfirm: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Resolves after a beat, so the popup's pending state is visible in the story. */
-const slowWrite = () => new Promise<void>((resolve) => setTimeout(resolve, 1200));
-
-export const Default: Story = {
-  args: {
-    title: 'Excluir a categoria?',
-    entityName: 'Bebidas',
-    description: 'Ela vai para a lixeira e pode ser restaurada de lá.',
-    confirmText: 'Excluir',
-    onConfirm: slowWrite,
-    children: (request) => (
-      <Button color="danger" onClick={request}>
-        Excluir
-      </Button>
-    ),
-  },
-};
-
-/** No body of its own: the popup falls back to naming the row it affects. */
-export const DescriptionFromEntityName: Story = {
-  args: {
-    ...Default.args,
-    description: undefined,
-  },
-};
-
-/** The non-destructive tone — same machinery, and focus opens on the confirm. */
-export const NeutralTone: Story = {
-  args: {
-    ...Default.args,
-    title: 'Publicar o cardápio?',
-    description: 'As alterações ficam visíveis na vitrine imediatamente.',
-    confirmText: 'Publicar',
-    tone: 'default',
-  },
-};
-
-/** For actions with no recovery path: the confirm stays dead until the name is typed. */
-export const TypeToConfirm: Story = {
-  args: {
-    ...Default.args,
-    title: 'Excluir definitivamente',
-    description: 'Este item e tudo o que depende dele somem para sempre.',
-    confirmText: 'Excluir definitivamente',
-    typeToConfirm: 'Bebidas',
-  },
-};
-
-/** The write rejects: the popup stays open and says so, instead of closing silently. */
-export const FailedWrite: Story = {
-  args: {
-    ...Default.args,
-    onConfirm: () => Promise.reject(new Error('409')),
-    errorText: 'Esta categoria ainda tem produtos vinculados.',
-  },
-};
-
-/** The long label case — a title and body that wrap. */
-export const LongContent: Story = {
-  args: {
-    ...Default.args,
-    title: 'Remover este integrante da equipe e revogar todos os seus acessos?',
-    entityName: 'maria.fernanda.dossantos@exemplo.com.br',
-    description:
-      'A pessoa perde o acesso ao painel imediatamente e precisa de um novo convite para voltar. Os pedidos que ela registrou continuam no histórico da loja, atribuídos ao nome dela.',
-  },
-};
-
-/** The HOC path: an ordinary button, guarded by adding one prop. */
-export const WithConfirmationHoc: StoryObj = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <ConfirmButton
-        color="danger"
-        onClick={slowWrite}
-        confirm={{
-          title: 'Excluir o desconto?',
-          entityName: 'Combo almoço',
-          description: 'O cupom para de valer na vitrine assim que for excluído.',
-          confirmText: 'Excluir',
-        }}
-      >
-        Excluir
-      </ConfirmButton>
-      <ConfirmButton color="neutral" onClick={slowWrite} confirm={false}>
-        Sem confirmação
-      </ConfirmButton>
-    </Stack>
-  ),
-};
-
-/** Wording baked into the wrapper once; each instance only says what differs. */
-const DeleteButton = withConfirmation(Button, {
-  title: 'Excluir o item?',
-  confirmText: 'Excluir',
-  description: 'Ele vai para a lixeira e pode ser restaurado de lá.',
-});
-
-export const HocWithBakedInDefaults: StoryObj = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <DeleteButton color="danger" onClick={slowWrite} confirm={{ entityName: 'Bebidas' }}>
-        Excluir categoria
-      </DeleteButton>
-      <DeleteButton
-        color="danger"
-        onClick={slowWrite}
-        confirm={{ entityName: 'Mesa 12', title: 'Excluir a mesa?' }}
-      >
-        Excluir mesa
-      </DeleteButton>
-    </Stack>
-  ),
-};

package/src/components/feedback/ConfirmAction/ConfirmAction.test.stories.tsx

@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, within } from 'storybook/test';
-
-import { Button } from '../../form/Button';
-
-import { ConfirmAction } from './ConfirmAction';
-import { ConfirmButton } from './ConfirmButton';
-
-const meta: Meta<typeof ConfirmAction> = {
-  title: 'Feedback/ConfirmAction/Tests',
-  component: ConfirmAction,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:ConfirmAction'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const BASE = {
-  title: 'Excluir a categoria?',
-  description: 'Ela vai para a lixeira e pode ser restaurada de lá.',
-  confirmText: 'Excluir',
-};
-
-/** The popup lives on `document.body`, so queries run against the whole screen. */
-const body = (): ReturnType<typeof within> => within(document.body);
-
-export const OpensWithoutRunningTheAction: Story = {
-  name: '🧪 Trigger opens the popup and runs nothing',
-  args: {
-    ...BASE,
-    onConfirm: fn(),
-    children: (request) => (
-      <Button color="danger" onClick={request}>
-        Excluir
-      </Button>
-    ),
-  },
-  play: async ({ args, canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-
-    await expect(body().getByText('Excluir a categoria?')).toBeInTheDocument();
-    await expect(args.onConfirm).not.toHaveBeenCalled();
-  },
-};
-
-export const CancelSendsNothing: Story = {
-  name: '🧪 Cancel sends nothing',
-  args: { ...OpensWithoutRunningTheAction.args, onConfirm: fn() },
-  play: async ({ args, canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-    await userEvent.click(body().getByTestId('confirm-action-cancel-button'));
-
-    await expect(args.onConfirm).not.toHaveBeenCalled();
-  },
-};
-
-export const ConfirmRunsTheAction: Story = {
-  name: '🧪 Confirm runs the action once',
-  args: { ...OpensWithoutRunningTheAction.args, onConfirm: fn() },
-  play: async ({ args, canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-    await userEvent.click(body().getByTestId('confirm-action-confirm-button'));
-
-    await expect(args.onConfirm).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const TypeToConfirmGate: Story = {
-  name: '🧪 Type-to-confirm gates the confirm button',
-  args: {
-    ...OpensWithoutRunningTheAction.args,
-    onConfirm: fn(),
-    typeToConfirm: 'Bebidas',
-  },
-  play: async ({ canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-
-    await expect(body().getByTestId('confirm-action-confirm-button')).toBeDisabled();
-    await userEvent.type(body().getByTestId('confirm-action-type-to-confirm'), 'Bebidas');
-    await expect(body().getByTestId('confirm-action-confirm-button')).toBeEnabled();
-  },
-};
-
-export const KeyboardCancelsWithEscape: Story = {
-  name: '🧪 Escape closes without running the action',
-  args: { ...OpensWithoutRunningTheAction.args, onConfirm: fn() },
-  play: async ({ args, canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-    await userEvent.keyboard('{Escape}');
-
-    await expect(args.onConfirm).not.toHaveBeenCalled();
-  },
-};
-
-export const HocGuardsTheWrappedButton: StoryObj = {
-  name: '🧪 withConfirmation guards the wrapped button',
-  render: (_args, { args }) => (
-    <ConfirmButton color="danger" onClick={args.onClick} confirm={BASE}>
-      Excluir
-    </ConfirmButton>
-  ),
-  args: { onClick: fn() },
-  play: async ({ args, canvasElement }) => {
-    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Excluir' }));
-    await expect(args.onClick).not.toHaveBeenCalled();
-
-    await userEvent.click(body().getByTestId('confirm-action-confirm-button'));
-    await expect(args.onClick).toHaveBeenCalledTimes(1);
-  },
-};

package/src/components/feedback/ConfirmAction/__tests__/confirm-action.test.tsx

@@ -1,288 +0,0 @@
-/**
- * The safety contract, asserted at the surface an operator actually touches.
- *
- * Every case here is a way the guard could fail OPEN — the write leaving before
- * anyone confirmed it, or leaving twice. A confirmation that merely renders is
- * worth nothing; what matters is that nothing happens until the confirm button
- * is pressed, and that it then happens exactly once.
- */
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { Button } from '../../../form/Button';
-import { ConfirmAction, withConfirmation } from '../index';
-
-afterEach(cleanup);
-
-const OPTIONS = {
-  title: 'Excluir a categoria?',
-  description: 'Ela vai para a lixeira e pode ser restaurada de lá.',
-  confirmText: 'Excluir',
-};
-
-/** The dialog's buttons, by the test ids `AlertDialog` derives from ours. */
-const confirmButton = (): HTMLElement => screen.getByTestId('confirm-action-confirm-button');
-const cancelButton = (): HTMLElement => screen.getByTestId('confirm-action-cancel-button');
-const trigger = (): HTMLElement => screen.getByRole('button', { name: 'Excluir' });
-
-function renderConfirmAction(
-  onConfirm: () => void | Promise<unknown>,
-  options: Record<string, unknown> = {},
-): void {
-  render(
-    <ConfirmAction {...OPTIONS} {...options} onConfirm={onConfirm}>
-      {(request) => (
-        <button type="button" onClick={request}>
-          Excluir
-        </button>
-      )}
-    </ConfirmAction>,
-  );
-}
-
-describe('ConfirmAction', () => {
-  it('opens the popup without running the action', () => {
-    const onConfirm = vi.fn();
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-
-    expect(screen.getByText('Excluir a categoria?')).toBeInTheDocument();
-    expect(onConfirm).not.toHaveBeenCalled();
-  });
-
-  it('runs nothing when the operator cancels', async () => {
-    const onConfirm = vi.fn();
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(cancelButton());
-
-    expect(onConfirm).not.toHaveBeenCalled();
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-  });
-
-  it('runs the action once the operator confirms', async () => {
-    const onConfirm = vi.fn();
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-
-    expect(onConfirm).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-  });
-
-  it('sends one write when the confirm button is double-clicked', () => {
-    // The write is held open so both clicks land inside the in-flight window —
-    // the exact race a bare onClick would turn into two DELETEs. The resolver
-    // lives on a container because the flakiness gate forbids reassigning a
-    // closed-over binding from inside a stub.
-    const inFlight: { resolve: () => void } = { resolve: () => undefined };
-    const onConfirm = vi.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          inFlight.resolve = resolve;
-        }),
-    );
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-    fireEvent.click(confirmButton());
-
-    expect(onConfirm).toHaveBeenCalledTimes(1);
-    inFlight.resolve();
-  });
-
-  it('disables the confirm while the write is in flight', async () => {
-    const inFlight: { resolve: () => void } = { resolve: () => undefined };
-    const onConfirm = vi.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          inFlight.resolve = resolve;
-        }),
-    );
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-
-    await waitFor(() => {
-      expect(confirmButton()).toBeDisabled();
-    });
-    inFlight.resolve();
-  });
-
-  it('keeps the popup open, carrying the error, when the action fails', async () => {
-    // The server's sentence is the one the operator can act on, so a rejection
-    // carrying a message beats the generic fallback.
-    const onConfirm = vi.fn(() =>
-      Promise.reject(new Error('Esta categoria ainda tem produtos vinculados.')),
-    );
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-
-    await waitFor(() => {
-      expect(screen.getByTestId('confirm-action-error')).toHaveTextContent(
-        'Esta categoria ainda tem produtos vinculados.',
-      );
-    });
-    expect(screen.getByText('Excluir a categoria?')).toBeInTheDocument();
-  });
-
-  it('falls back to the configured wording when the rejection says nothing', async () => {
-    const onConfirm = vi.fn(() => Promise.reject(new Error('')));
-    renderConfirmAction(onConfirm, { errorText: 'Não foi possível excluir a categoria.' });
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-
-    await waitFor(() => {
-      expect(screen.getByTestId('confirm-action-error')).toHaveTextContent(
-        'Não foi possível excluir a categoria.',
-      );
-    });
-  });
-
-  it('recovers from a failure: a second confirm can still run', async () => {
-    // `busy` must be released on the failure path too, or the popup is left
-    // holding an error it can never be retried out of.
-    const attempts = { count: 0 };
-    const onConfirm = vi.fn(() => {
-      attempts.count += 1;
-      return attempts.count === 1 ? Promise.reject(new Error('rede')) : Promise.resolve();
-    });
-    renderConfirmAction(onConfirm);
-
-    fireEvent.click(trigger());
-    fireEvent.click(confirmButton());
-    await waitFor(() => {
-      expect(screen.getByTestId('confirm-action-error')).toBeInTheDocument();
-    });
-
-    fireEvent.click(confirmButton());
-    expect(onConfirm).toHaveBeenCalledTimes(2);
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-  });
-
-  it('announces as an alertdialog named by its title and described by its body', () => {
-    // `alertdialog`, not `dialog`: this interrupts what the operator was doing
-    // and will not go away until answered, which is what makes a screen reader
-    // read the message out on open instead of just the dialog's name. MUI
-    // hardcodes role="dialog", so the override has to keep working.
-    renderConfirmAction(vi.fn());
-    fireEvent.click(trigger());
-
-    const dialog = screen.getByRole('alertdialog');
-    expect(dialog).toHaveAccessibleName('Excluir a categoria?');
-    expect(dialog).toHaveAccessibleDescription(
-      /Ela vai para a lixeira e pode ser restaurada de lá./,
-    );
-  });
-
-  it('opens with focus on Cancel, so a stray Enter cannot delete', async () => {
-    renderConfirmAction(vi.fn());
-
-    fireEvent.click(trigger());
-
-    await waitFor(() => {
-      expect(cancelButton()).toHaveFocus();
-    });
-  });
-
-  it('holds the confirm disabled until the exact text is typed', async () => {
-    const onConfirm = vi.fn();
-    renderConfirmAction(onConfirm, { typeToConfirm: 'Bebidas' });
-
-    fireEvent.click(trigger());
-    const field = screen.getByTestId('confirm-action-type-to-confirm');
-    expect(confirmButton()).toBeDisabled();
-
-    fireEvent.change(field, { target: { value: 'Bebida' } });
-    expect(confirmButton()).toBeDisabled();
-
-    fireEvent.change(field, { target: { value: 'Bebidas' } });
-    expect(confirmButton()).toBeEnabled();
-
-    fireEvent.click(confirmButton());
-    expect(onConfirm).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-  });
-
-  it('starts each open from an empty type-to-confirm field', async () => {
-    renderConfirmAction(vi.fn(), { typeToConfirm: 'Bebidas' });
-
-    fireEvent.click(trigger());
-    fireEvent.change(screen.getByTestId('confirm-action-type-to-confirm'), {
-      target: { value: 'Bebidas' },
-    });
-    fireEvent.click(cancelButton());
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-
-    fireEvent.click(trigger());
-    expect(screen.getByTestId('confirm-action-type-to-confirm')).toHaveValue('');
-    expect(confirmButton()).toBeDisabled();
-  });
-});
-
-describe('withConfirmation', () => {
-  const ConfirmButton = withConfirmation(Button);
-
-  it("guards the wrapped component's own onClick", async () => {
-    const onClick = vi.fn();
-    render(
-      <ConfirmButton onClick={onClick} confirm={OPTIONS}>
-        Excluir
-      </ConfirmButton>,
-    );
-
-    fireEvent.click(trigger());
-    expect(onClick).not.toHaveBeenCalled();
-
-    fireEvent.click(confirmButton());
-    expect(onClick).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
-    });
-  });
-
-  it('falls through to the plain component when confirm is false', () => {
-    const onClick = vi.fn();
-    render(
-      <ConfirmButton onClick={onClick} confirm={false}>
-        Excluir
-      </ConfirmButton>,
-    );
-
-    fireEvent.click(trigger());
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    // A COUNT rather than an absence assertion: the popup was never rendered
-    // here, so there is no prior presence to wait for — which is exactly the
-    // distinction the flakiness rule exists to enforce.
-    expect(screen.queryAllByTestId('confirm-action')).toHaveLength(0);
-  });
-
-  it('does not leak its own confirm prop onto the DOM node', () => {
-    render(
-      <ConfirmButton onClick={vi.fn()} confirm={OPTIONS}>
-        Excluir
-      </ConfirmButton>,
-    );
-
-    expect(trigger()).not.toHaveAttribute('confirm');
-  });
-});