@12-apps/ui 1.5.0 → 1.5.2

package/src/components/data-display/Chart/Chart.test.stories.tsx

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn, within } from 'storybook/test';
-
-import { Chart } from './Chart';
-
-const meta: Meta<typeof Chart> = {
-  title: 'DataDisplay/Chart/Tests',
-  component: Chart,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Chart'],
-};
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-// Test data
-const testData = [
-  { name: 'Jan', sales: 4000 },
-  { name: 'Feb', sales: 3000 },
-  { name: 'Mar', sales: 2000 },
-];
-
-// Basic interaction test
-export const BasicInteraction: Story = {
-  args: {
-    type: 'line',
-    data: testData,
-    series: [{ dataKey: 'sales', name: 'Sales' }],
-    title: 'Test Chart',
-    onClick: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Test Chart');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const FormInteraction: Story = {
-  args: {
-    type: 'bar',
-    data: testData,
-    series: [{ dataKey: 'sales', name: 'Sales' }],
-    title: 'Bar Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Bar Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  args: {
-    type: 'line',
-    data: testData,
-    title: 'Keyboard Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Keyboard Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const ScreenReader: Story = {
-  args: {
-    type: 'pie',
-    data: [{ name: 'A', value: 50 }],
-    title: 'Accessibility Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Accessibility Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const FocusManagement: Story = {
-  args: {
-    type: 'bar',
-    data: testData,
-    title: 'Focus Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Focus Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  args: {
-    type: 'line',
-    data: testData,
-    title: 'Responsive Test',
-    responsive: true,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Responsive Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const ThemeVariations: Story = {
-  args: {
-    type: 'area',
-    data: testData,
-    title: 'Theme Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Theme Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const VisualStates: Story = {
-  args: {
-    type: 'bar',
-    data: testData,
-    title: 'Visual Test',
-    variant: 'elevated',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Visual Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const Performance: Story = {
-  args: {
-    type: 'line',
-    data: testData,
-    title: 'Performance Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Performance Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const EdgeCases: Story = {
-  args: {
-    type: 'line',
-    data: [{ name: 'Single', value: 42 }],
-    title: 'Edge Test',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Edge Test');
-    expect(title).toBeInTheDocument();
-  },
-};
-
-export const Integration: Story = {
-  args: {
-    type: 'composed',
-    data: testData,
-    title: 'Integration Test',
-    showLegend: true,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const title = canvas.getByText('Integration Test');
-    expect(title).toBeInTheDocument();
-  },
-};

package/src/components/data-display/Chart/SpecChart.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { SpecChart } from './SpecChart';
-import type { ChartSpec } from './ChartSpec.types';
-
-const meta: Meta<typeof SpecChart> = {
-  title: 'DataDisplay/SpecChart',
-  component: SpecChart,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Renders a chart from a JSON-serializable ChartSpec plus plain data rows. ' +
-          'The spec API is layered over the prop-driven Chart — same implementation, ' +
-          'declarative surface for report builders and LLM authoring.',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:Chart'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const salesByDay = [
-  { day: 'Seg', total: 125000, perdas: 4500 },
-  { day: 'Ter', total: 98000, perdas: 1200 },
-  { day: 'Qua', total: 143500, perdas: 0 },
-  { day: 'Qui', total: 110200, perdas: 7300 },
-  { day: 'Sex', total: 189900, perdas: 2100 },
-];
-
-const paymentMethods = [
-  { method: 'PIX', total: 420000 },
-  { method: 'Cartão', total: 310000 },
-  { method: 'Garçom', total: 86000 },
-];
-
-const lineSpec: ChartSpec = {
-  type: 'line',
-  title: 'Vendas por dia',
-  subtitle: 'Receita líquida (BRL)',
-  xAxis: { key: 'day' },
-  series: [{ key: 'total', label: 'Total', color: 'primary' }],
-  numberFormat: 'brl',
-};
-
-export const Line: Story = {
-  args: { spec: lineSpec, data: salesByDay },
-};
-
-export const StackedBars: Story = {
-  args: {
-    spec: {
-      type: 'bar',
-      title: 'Vendas vs perdas',
-      xAxis: { key: 'day' },
-      series: [
-        { key: 'total', label: 'Vendas', color: 'primary' },
-        { key: 'perdas', label: 'Perdas', color: 'error' },
-      ],
-      stacked: true,
-      numberFormat: 'brl',
-    },
-    data: salesByDay,
-  },
-};
-
-export const Area: Story = {
-  args: {
-    spec: { ...lineSpec, type: 'area', title: 'Tendência de vendas' },
-    data: salesByDay,
-  },
-};
-
-export const Pie: Story = {
-  args: {
-    spec: {
-      type: 'pie',
-      title: 'Formas de pagamento',
-      xAxis: { key: 'method' },
-      series: [{ key: 'total' }],
-      numberFormat: 'brl',
-    },
-    data: paymentMethods,
-  },
-};
-
-export const Donut: Story = {
-  args: {
-    spec: {
-      type: 'donut',
-      title: 'Formas de pagamento',
-      xAxis: { key: 'method' },
-      series: [{ key: 'total' }],
-      numberFormat: 'brl',
-      centerLabel: { label: 'Total', value: 'R$ 8.160' },
-    },
-    data: paymentMethods,
-  },
-};
-
-export const PercentFormat: Story = {
-  args: {
-    spec: {
-      type: 'bar',
-      title: 'Margem por dia',
-      xAxis: { key: 'day' },
-      series: [{ key: 'margin', label: 'Margem', color: 'success' }],
-      numberFormat: 'percent',
-      legend: false,
-    },
-    data: salesByDay.map((row) => ({ day: row.day, margin: row.total > 0 ? 0.2 + row.perdas / row.total : 0 })),
-  },
-};
-
-export const CustomColorScheme: Story = {
-  args: {
-    spec: {
-      ...lineSpec,
-      type: 'bar',
-      title: 'Esquema de cores custom',
-      series: [
-        { key: 'total', label: 'Total' },
-        { key: 'perdas', label: 'Perdas' },
-      ],
-      colorScheme: ['info', 'warning'],
-    },
-    data: salesByDay,
-  },
-};
-
-export const FromJsonString: Story = {
-  render: () => {
-    const json =
-      '{"type":"area","title":"Spec vinda de JSON","xAxis":{"key":"day"},' +
-      '"series":[{"key":"total","label":"Total","color":"secondary"}],"numberFormat":"compact"}';
-    return <SpecChart spec={JSON.parse(json) as ChartSpec} data={salesByDay} />;
-  },
-};
-
-export const Loading: Story = {
-  args: { spec: lineSpec, data: [], loading: true },
-};
-
-export const Empty: Story = {
-  args: { spec: { ...lineSpec, title: 'Sem dados' }, data: [] },
-};

package/src/components/data-display/Chart/SpecChart.test.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
-
-import { SpecChart } from './SpecChart';
-
-const meta: Meta<typeof SpecChart> = {
-  title: 'DataDisplay/SpecChart/Tests',
-  component: SpecChart,
-  parameters: { layout: 'padded' },
-  tags: ['autodocs', 'test', 'component:Chart'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const data = [
-  { day: 'Seg', total: 125000 },
-  { day: 'Ter', total: 98000 },
-];
-
-export const RendersFromSpec: Story = {
-  args: {
-    spec: {
-      type: 'bar',
-      title: 'Spec Render',
-      xAxis: { key: 'day' },
-      series: [{ key: 'total', label: 'Total', color: 'primary' }],
-      numberFormat: 'brl',
-    },
-    data,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByTestId('spec-chart')).toBeInTheDocument();
-    await expect(canvas.getByText('Spec Render')).toBeInTheDocument();
-  },
-};
-
-export const DonutCenterLabel: Story = {
-  args: {
-    spec: {
-      type: 'donut',
-      xAxis: { key: 'method' },
-      series: [{ key: 'total' }],
-      centerLabel: { label: 'Total', value: 'R$ 100' },
-    },
-    data: [
-      { method: 'PIX', total: 60 },
-      { method: 'Cartão', total: 40 },
-    ],
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByTestId('spec-chart')).toBeInTheDocument();
-  },
-};

package/src/components/data-display/Chart/__tests__/SpecChart.test.tsx

@@ -1,60 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { describe, expect, it } from 'vitest';
-
-import { parseChartSpec } from '../chart-spec';
-import { SpecChart } from '../SpecChart';
-
-const json = JSON.stringify({
-  type: 'bar',
-  title: 'Vendas por dia',
-  subtitle: 'Últimos 7 dias',
-  xAxis: { key: 'day' },
-  series: [
-    { key: 'total', label: 'Total', color: 'primary' },
-    { key: 'perdas', label: 'Perdas', color: 'error' },
-  ],
-  numberFormat: 'brl',
-});
-
-const data = [
-  { day: 'seg', total: 1200, perdas: 100 },
-  { day: 'ter', total: 3400, perdas: 0 },
-];
-
-describe('SpecChart', () => {
-  it('renders a chart from a pure JSON spec plus data rows', () => {
-    render(<SpecChart spec={parseChartSpec(JSON.parse(json))} data={data} />);
-    expect(screen.getByTestId('spec-chart')).toBeInTheDocument();
-    expect(screen.getByText('Vendas por dia')).toBeInTheDocument();
-    expect(screen.getByText('Últimos 7 dias')).toBeInTheDocument();
-  });
-
-  it('renders pie specs', () => {
-    render(
-      <SpecChart
-        spec={parseChartSpec({
-          type: 'pie',
-          xAxis: { key: 'method' },
-          series: [{ key: 'total' }],
-        })}
-        data={[
-          { method: 'PIX', total: 700 },
-          { method: 'Cartão', total: 300 },
-        ]}
-      />,
-    );
-    expect(screen.getByTestId('spec-chart')).toBeInTheDocument();
-  });
-
-  it('shows the loading state', () => {
-    render(
-      <SpecChart
-        spec={parseChartSpec({ type: 'line', xAxis: { key: 'x' }, series: [{ key: 'y' }] })}
-        data={[]}
-        loading
-      />,
-    );
-    expect(screen.getByTestId('spec-chart-loading')).toBeInTheDocument();
-  });
-});

package/src/components/data-display/Chart/__tests__/chart-format.test.ts

@@ -1,43 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { chartValueFormatter, formatChartValue } from '../chart-format';
-
-describe('formatChartValue', () => {
-  it('formats brl from integer centavos', () => {
-    const formatted = formatChartValue(123456, 'brl');
-    expect(formatted).toContain('R$');
-    expect(formatted).toContain('1.234,56');
-  });
-
-  it('formats negative centavos', () => {
-    expect(formatChartValue(-500, 'brl')).toContain('5,00');
-  });
-
-  it('formats percent from a fraction', () => {
-    expect(formatChartValue(0.153, 'percent')).toBe('15,3%');
-  });
-
-  it('formats compact values', () => {
-    expect(formatChartValue(1500, 'compact')).toContain('1,5');
-  });
-
-  it('formats integers without decimals', () => {
-    expect(formatChartValue(1234.56, 'integer')).toBe('1.235');
-  });
-
-  it('defaults to decimal formatting', () => {
-    expect(formatChartValue(1234.567)).toBe('1.234,57');
-  });
-
-  it('renders non-finite values as an empty string', () => {
-    expect(formatChartValue(Number.NaN, 'brl')).toBe('');
-    expect(formatChartValue(Number.POSITIVE_INFINITY)).toBe('');
-  });
-});
-
-describe('chartValueFormatter', () => {
-  it('curries the format', () => {
-    const format = chartValueFormatter('brl');
-    expect(format(100)).toContain('1,00');
-  });
-});

package/src/components/data-display/Chart/__tests__/chart-spec.test.ts

@@ -1,119 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import type { ChartSpec } from '../ChartSpec.types';
-import { ChartSpecError, parseChartSpec, specToChartProps } from '../chart-spec';
-import {
-  getRegisteredChartSpecTypes,
-  registerChartSpecRenderer,
-  type ChartSpecRenderContext,
-} from '../chart-spec-registry';
-
-const ctx: ChartSpecRenderContext = {
-  resolveColor: (token, index) => `${token ?? 'auto'}-${index}`,
-};
-
-const lineSpec: ChartSpec = {
-  type: 'line',
-  title: 'Vendas',
-  xAxis: { key: 'day' },
-  series: [{ key: 'total', label: 'Total', color: 'primary' }, { key: 'count' }],
-  numberFormat: 'brl',
-};
-
-describe('parseChartSpec', () => {
-  it('accepts a valid spec round-tripped through JSON', () => {
-    const parsed = parseChartSpec(JSON.parse(JSON.stringify(lineSpec)));
-    expect(parsed.type).toBe('line');
-    expect(parsed.series).toHaveLength(2);
-    expect(parsed.xAxis.key).toBe('day');
-  });
-
-  it('rejects non-objects', () => {
-    expect(() => parseChartSpec('nope')).toThrow(ChartSpecError);
-  });
-
-  it('rejects unknown chart types and lists registered ones', () => {
-    expect(() => parseChartSpec({ ...lineSpec, type: 'sankey' })).toThrow(/registered chart types/);
-    expect(() => parseChartSpec({ ...lineSpec, type: 'sankey' })).toThrow(/line/);
-  });
-
-  it('rejects a missing xAxis key', () => {
-    expect(() => parseChartSpec({ ...lineSpec, xAxis: {} })).toThrow(/"xAxis"/);
-  });
-
-  it('rejects empty series', () => {
-    expect(() => parseChartSpec({ ...lineSpec, series: [] })).toThrow(/"series"/);
-  });
-
-  it('rejects raw color values with an actionable message', () => {
-    expect(() => parseChartSpec({ ...lineSpec, series: [{ key: 'total', color: '#ff0000' }] })).toThrow(
-      /semantic color token/,
-    );
-  });
-
-  it('rejects invalid number formats', () => {
-    expect(() => parseChartSpec({ ...lineSpec, numberFormat: 'usd' })).toThrow(/"numberFormat"/);
-  });
-
-  it('rejects invalid colorScheme entries', () => {
-    expect(() => parseChartSpec({ ...lineSpec, colorScheme: ['primary', 'magenta'] })).toThrow(
-      /"colorScheme\[1\]"/,
-    );
-  });
-});
-
-describe('specToChartProps', () => {
-  it('maps cartesian specs onto Chart props', () => {
-    const props = specToChartProps(lineSpec, [{ day: 'seg', total: 100, count: 2 }], ctx);
-    expect(props.type).toBe('line');
-    expect(props.xAxisKey).toBe('day');
-    expect(props.series).toEqual([
-      { dataKey: 'total', name: 'Total', color: 'primary-0' },
-      { dataKey: 'count', name: 'count', color: 'auto-1' },
-    ]);
-    expect(props.valueFormatter?.(100)).toContain('1,00');
-  });
-
-  it('honors stacked bars and legend/tooltip toggles', () => {
-    const props = specToChartProps(
-      { ...lineSpec, type: 'bar', stacked: true, legend: false, tooltip: false },
-      [],
-      ctx,
-    );
-    expect(props.type).toBe('bar');
-    expect(props.stacked).toBe(true);
-    expect(props.showLegend).toBe(false);
-    expect(props.showTooltip).toBe(false);
-  });
-
-  it('renders donut as pie with an inner radius and center label', () => {
-    const props = specToChartProps(
-      {
-        type: 'donut',
-        xAxis: { key: 'method' },
-        series: [{ key: 'total' }],
-        centerLabel: { label: 'Total', value: 'R$ 10' },
-      },
-      [],
-      ctx,
-    );
-    expect(props.type).toBe('pie');
-    expect(props.innerRadius).toBeGreaterThan(0);
-    expect(props.centerLabel).toEqual({ label: 'Total', value: 'R$ 10' });
-  });
-
-  it('supports registering new chart types without touching consumers', () => {
-    registerChartSpecRenderer('sparkline', (spec) => ({
-      type: 'line',
-      series: spec.series.map((s) => ({ dataKey: s.key })),
-    }));
-    expect(getRegisteredChartSpecTypes()).toContain('sparkline');
-    const spec = parseChartSpec({
-      type: 'sparkline',
-      xAxis: { key: 'x' },
-      series: [{ key: 'y' }],
-    });
-    const props = specToChartProps(spec, [], ctx);
-    expect(props.type).toBe('line');
-  });
-});