Design Systems reutilizáveis com React e TypeScript

Problema

Bibliotecas de UI copiadas sem padrão geram dois botões “primários” com alturas diferentes, dark mode quebrado e props inconsistentes. Em escala, cada squad reinventa o básico e a dívida de QA explode.

Solução

Um design system não é só Storybook: é contrato de API de componentes + tokens + documentação de uso. TypeScript força variantes e estados; tokens centralizam cor, espaço e tipografia; publicação como pacote interno (@acme/ui) versionada.

Arquitetura

packages/ui/
  src/
    components/
    styles/tokens.css
  package.json
apps/web/   # consome @acme/ui

• Tokens → CSS variables ou Tailwind preset.
• Primitives (Button, Input) compostos em padrões (DateField, DataTable).
• A11y: Radix/shadcn como base sem acoplar regra de negócio.

Código

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "./cn";
 
const button = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: { sm: "h-8 px-3", md: "h-10 px-4" },
    },
    defaultVariants: { variant: "primary", size: "md" },
  }
);
 
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof button>;
 
export function Button({ className, variant, size, ...props }: ButtonProps) {
  return <button className={cn(button({ variant, size }), className)} {...props} />;
}

Performance

Tree-shaking com sideEffects: false no package.json do pacote; evitar barrel files gigantes; lazy load de demos pesadas no Storybook, não na app.

Melhorias futuras

Visual regression (Chromatic); contraste automatizado; Figma → code sync pontual; design tokens em CI.

Conclusão

DS de verdade reduz discussão repetitiva e aumenta velocidade com qualidade. Para recrutadores, isso mostra que você pensa em produto e engenharia ao mesmo tempo.