@12-apps/ui 1.4.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -15,10 +15,10 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./button": "./src/button.tsx",
+    "./button": "./src/button/index.ts",
     "./charts": "./src/charts/index.ts",
-    "./social-login-button": "./src/social-login-button.tsx",
-    "./user-avatar": "./src/user-avatar.tsx",
+    "./social-login-button": "./src/social-login-button/index.ts",
+    "./user-avatar": "./src/user-avatar/index.ts",
     "./utils": "./src/utils/index.ts",
     "./mui/Box": "./src/mui/Box.ts",
     "./mui/Link": "./src/mui/Link.ts",
@@ -194,7 +194,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@12-apps/forms-core": "^1.3.1",
+    "@12-apps/forms-core": "^1.4.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@monaco-editor/react": "^4.7.0",
@@ -209,8 +209,8 @@
     "recharts": "^3.5.1"
   },
   "devDependencies": {
-    "@12-apps/eslint-config": "^1.4.1",
-    "@12-apps/typescript-config": "^1.4.1",
+    "@12-apps/eslint-config": "^1.5.1",
+    "@12-apps/typescript-config": "^1.5.1",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
@@ -226,6 +226,7 @@
     "concurrently": "^9.2.1",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-storybook": "9.1.10",
+    "eslint-plugin-test-flakiness": "^1.4.0",
     "glob": "^13.0.0",
     "globals": "^16.5.0",
     "http-server": "^14.1.1",
@@ -257,6 +258,14 @@
     "prisma",
     "*.js",
     "*.mjs",
-    "*.md"
+    "*.md",
+    "!eslint.config.js",
+    "!**/__tests__/**",
+    "!**/tests/**",
+    "!**/*.test.*",
+    "!**/*.spec.*",
+    "!**/*.stories.*",
+    "!**/*.test-story.*",
+    "!**/test-helpers.*"
   ]
 }

package/src/button/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/src/social-login-button/index.ts

@@ -0,0 +1 @@
+export * from './social-login-button';

package/src/{social-login-button.tsx → social-login-button/social-login-button.tsx}

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { Box, Stack } from '@mui/material';
-import { Button } from './components/form/Button';
-import { Card, CardContent } from './components/layout/Card';
-import { Heading } from './components/typography/Heading';
-import { Text } from './components/typography/Text';
-import { Separator } from './components/layout/Separator';
+import { Button } from '../components/form/Button';
+import { Card, CardContent } from '../components/layout/Card';
+import { Heading } from '../components/typography/Heading';
+import { Text } from '../components/typography/Text';
+import { Separator } from '../components/layout/Separator';
 
 export type SocialProvider = 'google' | 'facebook' | 'apple';
 

package/src/user-avatar/index.ts

@@ -0,0 +1 @@
+export * from './user-avatar';

package/src/{user-avatar.tsx → user-avatar/user-avatar.tsx}

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { Box, Stack } from '@mui/material';
-import { Avatar } from './components/data-display/Avatar';
-import { Button } from './components/form/Button';
-import { Text } from './components/typography/Text';
-import { Card } from './components/layout/Card';
+import { Avatar } from '../components/data-display/Avatar';
+import { Button } from '../components/form/Button';
+import { Text } from '../components/typography/Text';
+import { Card } from '../components/layout/Card';
 
 /**
  * Generate initials from a name

package/eslint.config.js

@@ -1,77 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import tsParser from '@typescript-eslint/parser';
-import storybook from "eslint-plugin-storybook";
-import globals from 'globals';
-
-import { config } from "@12-apps/eslint-config/base";
-
-export default [
-  {
-    ignores: [
-      'packages/ui/scripts/check-component.js',
-      'packages/ui/tsup.config.ts',
-      'node_modules/**',
-      'dist/**',
-      'build/**',
-      'storybook-static/**',
-      'packages/ui/scripts/**',
-      'packages/ui/scripts/**/*',
-      'scripts/**',
-      'scripts/**/*',
-      'tsup.config.ts',
-    ],
-  },
-  ...config,
-  ...storybook.configs["flat/recommended"],
-  // Override parser for all TypeScript files after storybook config
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    languageOptions: {
-      parser: tsParser,
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        ...globals.browser,
-        ...globals.es2021,
-        React: 'readonly',
-        google: 'readonly',
-        // Node-specific globals needed for build tools
-        process: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        module: 'readonly',
-      },
-    },
-    rules: {
-      // Use TypeScript's unused vars instead of base rule
-      'no-unused-vars': 'off',
-    },
-  },
-  // UI-specific rules
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    rules: {
-      'no-console': 'error',
-      'react/prop-types': 'off',
-      'react/no-unescaped-entities': 'off',
-      // Turbo env vars not relevant for UI lib
-      'turbo/no-undeclared-env-vars': 'off',
-      // Allow underscore-prefixed unused vars (intentionally unused params)
-      '@typescript-eslint/no-unused-vars': ['warn', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-      }],
-    },
-    settings: {
-      'import/resolver': { typescript: { project: './tsconfig.json' } },
-    },
-  },
-];

package/src/__tests__/data-grid.test.tsx

@@ -1,125 +0,0 @@
-/**
- * `DataGrid` — the identity of the grid element, in every state it can paint.
- *
- * The regression this file exists for: `data-testid` is destructured out of the
- * props, and used to be re-applied ONLY on the populated render. A grid whose
- * first paint was loading, error or empty therefore had no test id at all — it
- * had mounted perfectly and could not be found, so every spec landing on a
- * screen with no rows yet waited out its whole budget on an element that would
- * appear only once somebody created a row.
- *
- * Each case asserts the id AND the state flag, because the id alone would pass
- * with all four states collapsed into one.
- */
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import { DataGrid } from '../components/data-display/DataGrid';
-import type { GridColumn } from '../components/data-display/DataGrid/DataGrid.types';
-
-interface Row extends Record<string, unknown> {
-  id: string;
-  name: string;
-  qty: number;
-}
-
-const columns: GridColumn<Row>[] = [
-  { id: 'name', header: 'Nome' },
-  { id: 'qty', header: 'Qtd' },
-];
-
-const rows: Row[] = [
-  { id: 'a', name: 'Alface', qty: 3 },
-  { id: 'b', name: 'Beterraba', qty: 1 },
-];
-
-describe('DataGrid — the grid is findable in every state', () => {
-  it('names the grid while it is LOADING', () => {
-    render(<DataGrid data-testid="things-grid" rows={[]} columns={columns} loading />);
-    const grid = screen.getByTestId('things-grid');
-    expect(grid).toHaveAttribute('data-loading', 'true');
-    // Still announced as a grid, so assistive tech is not told the region
-    // vanished and came back.
-    expect(grid).toHaveAttribute('role', 'grid');
-  });
-
-  it('names the grid while it is showing an ERROR', () => {
-    render(
-      <DataGrid data-testid="things-grid" rows={rows} columns={columns} error="Deu ruim" />,
-    );
-    const grid = screen.getByTestId('things-grid');
-    expect(grid).toHaveAttribute('data-error', 'true');
-    expect(grid).toHaveTextContent('Deu ruim');
-  });
-
-  it('names the grid while it is EMPTY — the case every spec tripped over', () => {
-    render(<DataGrid data-testid="things-grid" rows={[]} columns={columns} />);
-    const grid = screen.getByTestId('things-grid');
-    expect(grid).toHaveAttribute('data-empty', 'true');
-    expect(grid).toHaveTextContent('No data available');
-  });
-
-  it('renders the caller’s own empty state inside that same named grid', () => {
-    render(
-      <DataGrid
-        data-testid="things-grid"
-        rows={[]}
-        columns={columns}
-        emptyState={<span>Nada por aqui</span>}
-      />,
-    );
-    expect(screen.getByTestId('things-grid')).toHaveTextContent('Nada por aqui');
-  });
-
-  it('names the grid once it HAS rows, and renders them', () => {
-    render(<DataGrid data-testid="things-grid" rows={rows} columns={columns} />);
-    const grid = screen.getByTestId('things-grid');
-    // The populated render is the one that always worked; it is asserted so the
-    // four cases above cannot all pass by the id being applied unconditionally
-    // to a single collapsed placeholder.
-    expect(grid).toHaveAttribute('data-ui', 'datagrid');
-    expect(grid).not.toHaveAttribute('data-empty');
-    expect(screen.getByText('Alface')).toBeInTheDocument();
-    expect(screen.getByText('Beterraba')).toBeInTheDocument();
-  });
-
-  it('keeps grid-only props off the DOM element', () => {
-    render(<DataGrid data-testid="things-grid" rows={rows} columns={columns} />);
-    const grid = screen.getByTestId('things-grid');
-    // `DataGridProps` extends HTMLAttributes, so the rest-spread would otherwise
-    // serialize the whole dataset into an attribute.
-    expect(grid).not.toHaveAttribute('rows');
-    expect(grid).not.toHaveAttribute('columns');
-  });
-});
-
-describe('DataGrid — client-mode rows', () => {
-  it('sorts on a header press when sorting is client-mode', () => {
-    render(
-      <DataGrid
-        data-testid="things-grid"
-        rows={rows}
-        columns={columns}
-        sorting={{ mode: 'client', defaultSortBy: [{ id: 'name', dir: 'desc' }] }}
-      />,
-    );
-    const cells = screen.getAllByRole('gridcell').map((cell) => cell.textContent);
-    // Descending by name: Beterraba before Alface. A comparator that stringified
-    // its way to a stable-but-wrong order would fail here.
-    expect(cells[0]).toBe('Beterraba');
-  });
-
-  it('filters client-side and falls through to the empty state when nothing matches', () => {
-    render(
-      <DataGrid
-        data-testid="things-grid"
-        rows={rows}
-        columns={columns}
-        filtering={{ mode: 'client', defaultFilters: [{ id: 'name', value: 'zzz' }] }}
-      />,
-    );
-    // The filter emptied the grid — and the grid is STILL findable, which is the
-    // whole point: an empty result is a state, not a disappearance.
-    expect(screen.getByTestId('things-grid')).toHaveAttribute('data-empty', 'true');
-  });
-});

package/src/__tests__/package-wiring.test.ts

@@ -1,41 +0,0 @@
-import { createRequire } from "node:module";
-import { describe, expect, it } from "vitest";
-
-// Load the package's OWN manifest via require (no fs.readFileSync — so this
-// asserts real dependency wiring without tripping the anti-flake fs rule; the
-// manifest is a deterministic, package-local file).
-const requireJson = createRequire(import.meta.url);
-
-interface UiPackageJson {
-  dependencies?: Record<string, string>;
-  exports?: Record<string, unknown>;
-  typesVersions?: Record<string, Record<string, string[]>>;
-}
-
-function readPkg(): UiPackageJson {
-  return requireJson("../../package.json") as UiPackageJson;
-}
-
-describe("@12-apps/ui package wiring (Task 5)", () => {
-  it("depends on the leaf @12-apps/forms-core, not the heavy @12-apps/shared-helpers", () => {
-    const pkg = readPkg();
-    // @12-apps/ui must stay self-contained: it uses the zero-dependency
-    // @12-apps/forms-core for form validation and must NOT pull in the
-    // Prisma/AWS-laden @12-apps/shared-helpers.
-    expect(pkg.dependencies?.["@12-apps/forms-core"]).toBe("workspace:*");
-    expect(pkg.dependencies?.["@12-apps/shared-helpers"]).toBeUndefined();
-  });
-
-  it("exposes the ./form/total-form package export", () => {
-    const pkg = readPkg();
-    expect(pkg.exports?.["./form/total-form"]).toBe(
-      "./src/components/form/total-form/index.ts",
-    );
-  });
-
-  it("registers a form/* typesVersions entry covering total-form", () => {
-    const pkg = readPkg();
-    const formTypes = pkg.typesVersions?.["*"]?.["form/*"];
-    expect(formTypes).toContain("./src/components/form/*/index.d.ts");
-  });
-});

package/src/__tests__/setup.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom/vitest";

package/src/__tests__/social-login-button.test.tsx

@@ -1,186 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import {
-  SocialLoginButton,
-  SocialLoginContainer,
-  type SocialProvider,
-} from "../social-login-button";
-
-describe("SocialLoginButton", () => {
-  const providers: SocialProvider[] = ["google", "facebook", "apple"];
-
-  describe.each(providers)("%s provider", (provider) => {
-    it(`should render ${provider} button with correct text`, () => {
-      render(<SocialLoginButton provider={provider} />);
-
-      const expectedTexts: Record<SocialProvider, string> = {
-        google: "Continue with Google",
-        facebook: "Continue with Facebook",
-        apple: "Continue with Apple",
-      };
-
-      expect(screen.getByText(expectedTexts[provider])).toBeInTheDocument();
-    });
-
-    it(`should call onClick when ${provider} button is clicked`, () => {
-      const handleClick = vi.fn();
-      render(<SocialLoginButton provider={provider} onClick={handleClick} />);
-
-      const button = screen.getByRole("button");
-      fireEvent.click(button);
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it(`should show loading state for ${provider}`, () => {
-      const { container } = render(<SocialLoginButton provider={provider} loading />);
-
-      // When loading, Button shows CircularProgress spinner
-      expect(container.querySelector('.MuiCircularProgress-root')).toBeInTheDocument();
-    });
-
-    it(`should be disabled when loading for ${provider}`, () => {
-      render(<SocialLoginButton provider={provider} loading />);
-
-      const button = screen.getByRole("button");
-      expect(button).toBeDisabled();
-    });
-
-    it(`should be disabled when disabled prop is true for ${provider}`, () => {
-      render(<SocialLoginButton provider={provider} disabled />);
-
-      const button = screen.getByRole("button");
-      expect(button).toBeDisabled();
-    });
-  });
-
-  it("should apply fullWidth style by default", () => {
-    render(<SocialLoginButton provider="google" />);
-
-    const button = screen.getByRole("button");
-    // MUI Button with fullWidth prop applies width: 100%
-    expect(button).toHaveClass('MuiButton-fullWidth');
-  });
-
-  it("should not have fullWidth class when fullWidth is false", () => {
-    render(<SocialLoginButton provider="google" fullWidth={false} />);
-
-    const button = screen.getByRole("button");
-    expect(button).not.toHaveClass('MuiButton-fullWidth');
-  });
-
-  it("should not call onClick when disabled", () => {
-    const handleClick = vi.fn();
-    render(
-      <SocialLoginButton provider="google" onClick={handleClick} disabled />
-    );
-
-    const button = screen.getByRole("button");
-    fireEvent.click(button);
-
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it("should render correct SVG icon for each provider", () => {
-    const { container: googleContainer } = render(
-      <SocialLoginButton provider="google" />
-    );
-    expect(googleContainer.querySelector("svg")).toBeInTheDocument();
-
-    const { container: facebookContainer } = render(
-      <SocialLoginButton provider="facebook" />
-    );
-    expect(facebookContainer.querySelector("svg")).toBeInTheDocument();
-
-    const { container: appleContainer } = render(
-      <SocialLoginButton provider="apple" />
-    );
-    expect(appleContainer.querySelector("svg")).toBeInTheDocument();
-  });
-});
-
-describe("SocialLoginContainer", () => {
-  it("should render children", () => {
-    render(
-      <SocialLoginContainer>
-        <span>Child content</span>
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("Child content")).toBeInTheDocument();
-  });
-
-  it("should render default title", () => {
-    render(
-      <SocialLoginContainer>
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("Sign in to continue")).toBeInTheDocument();
-  });
-
-  it("should render custom title", () => {
-    render(
-      <SocialLoginContainer title="Welcome Back">
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
-  });
-
-  it("should not render title when title is empty", async () => {
-    render(
-      <SocialLoginContainer title="">
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    await waitFor(() => expect(screen.queryByRole("heading")).not.toBeInTheDocument());
-  });
-
-  it("should render divider when showDivider is true", () => {
-    render(
-      <SocialLoginContainer showDivider>
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("or")).toBeInTheDocument();
-  });
-
-  it("should not render divider by default", async () => {
-    render(
-      <SocialLoginContainer>
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    await waitFor(() => expect(screen.queryByText("or")).not.toBeInTheDocument());
-  });
-
-  it("should render custom divider text", () => {
-    render(
-      <SocialLoginContainer showDivider dividerText="or continue with email">
-        <span>Content</span>
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("or continue with email")).toBeInTheDocument();
-  });
-
-  it("should render multiple buttons", () => {
-    render(
-      <SocialLoginContainer>
-        <SocialLoginButton provider="google" />
-        <SocialLoginButton provider="facebook" />
-        <SocialLoginButton provider="apple" />
-      </SocialLoginContainer>
-    );
-
-    expect(screen.getByText("Continue with Google")).toBeInTheDocument();
-    expect(screen.getByText("Continue with Facebook")).toBeInTheDocument();
-    expect(screen.getByText("Continue with Apple")).toBeInTheDocument();
-  });
-});