{"_id":"@cleitonjustino/componentespadrao","name":"@cleitonjustino/componentespadrao","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cleitonjustino/componentespadrao","private":false,"version":"1.0.0","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-label":"^2.1.8","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-tooltip":"^1.2.8","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^1.14.0","tailwind-merge":"^3.6.0"},"devDependencies":{"@eslint/js":"^9.39.1","@types/node":"^22.15.18","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.7.2","vite":"^7.2.4","vite-plugin-dts":"^4.5.4"},"_id":"@cleitonjustino/componentespadrao@1.0.0","gitHead":"e12b2d346ac278303b217b4ba08766b2b1c14606","description":"Este é um guia feito por um iniciante em Design Patterns para devs .NET que estão começando com React. Se você programa em C# ou .NET, vai achar bastante coisa familiar aqui! 🚀","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-w0I3ymzjDnd7EfXXTynRjwRARG96y5+WB8R7oVbEES1igGn5J5SSJl0dSm0TpNiQYgY7znugzeb4Kk4/BeqbTA==","shasum":"a867e94d127e2b8a8c8c93ba574cae5789f643f1","tarball":"https://registry.npmjs.org/@cleitonjustino/componentespadrao/-/componentespadrao-1.0.0.tgz","fileCount":9,"unpackedSize":1775773,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCLWofFCM0XWGJ7FxSq4Okj3TOwtZnfafUl01D3fmZhmQIhAM0/jb8RhhendXx+A11+jWKglD8n8maesFvAITGHhgT4"}]},"_npmUser":{"name":"cleitonjustino","email":"cleitonjust@yahoo.com.br"},"directories":{},"maintainers":[{"name":"cleitonjustino","email":"cleitonjust@yahoo.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/componentespadrao_1.0.0_1778636644672_0.8284966462033045"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-13T01:44:04.593Z","1.0.0":"2026-05-13T01:44:04.924Z","modified":"2026-05-13T01:44:05.140Z"},"maintainers":[{"name":"cleitonjustino","email":"cleitonjust@yahoo.com.br"}],"description":"Este é um guia feito por um iniciante em Design Patterns para devs .NET que estão começando com React. Se você programa em C# ou .NET, vai achar bastante coisa familiar aqui! 🚀","readme":"# ComponentesPadroes - Padrão React + TypeScript para Devs .NET\n\n Este é um guia feito por um iniciante em Design Patterns para devs .NET que estão começando com React. Se você programa em C# ou .NET, vai achar bastante coisa familiar aqui! 🚀\n\n> **⭐ Agora com TypeScript!** Este projeto usa TypeScript para type-safety e melhor experiência de desenvolvimento, assim como você está acostumado com C#/VB.NET.\n\n## 🤔 Ok, mas o que é React?\n\nSe você vem de .NET:\n- **React é como uma engine de renderização de componentes** que atualiza automaticamente a UI quando os dados mudam\n- **JSX/TSX é tipo uma template com C# inline** - você escreve HTML+JavaScript (ou TypeScript) junto\n- **Estado (State) é como propriedades de uma classe** que quando mudam, a UI se atualiza automaticamente\n- **Props são como parâmetros de método** - você passa dados de componentes pais para filhos\n- **TypeScript é como C#** - adiciona tipagem forte e intellisense ao JavaScript\n\n## ⚙️ TypeScript neste Projeto\n\nTodo o código foi migrado para TypeScript (.tsx e .ts). Você terá:\n\n✅ **Type safety** - Erros de tipo detectados em tempo de compilação  \n✅ **Intellisense completo** - Sua IDE sabe exatamente quais props cada componente aceita  \n✅ **Interfaces tipadas** - Como interfaces em C#  \n✅ **Refatoração segura** - Mude um tipo e veja todos os erros imediatamente  \n\n### Exemplo de Tipagem\n\n```tsx\n// Componente tipado\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"default\" | \"primary\" | \"ghost\";\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ variant = \"default\", size = \"md\", ...props }, ref) => {\n    return <button ref={ref} {...props} />;\n  }\n);\n```\n\n## 📁 Estrutura do Projeto\n\n```\nsrc/\n├── components/\n│   └── ui/                    # Componentes reutilizáveis (como seu repositório de padrões)\n│       ├── Button.tsx         # ✨ Agora em TypeScript!\n│       ├── Card.tsx\n│       ├── Grid.tsx\n│       └── ... (mais componentes)\n├── lib/\n│   ├── utils.ts              # Funções utilitárias tipadas\n│   └── index.ts\n├── styles/\n│   └── tokens.css            # Variáveis de design (cores, espaçamentos)\n├── App.tsx                   # Componente principal\n└── main.tsx                  # Ponto de entrada\n├── tsconfig.json             # Configuração do TypeScript\n└── vite.config.ts            # Configuração do Vite em TypeScript\n```\n\n## 🎯 Padrões Principais\n\n### 1️⃣ Componentes Simples (Stateless)\n\nSão como métodos que retornam HTML. Recebem **props** (parâmetros) e renderizam.\n\n```tsx\n// src/components/ui/Button.tsx\nimport React from \"react\";\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"default\" | \"primary\" | \"ghost\";\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, variant = \"default\", size = \"md\", ...props }, ref) => (\n    <button ref={ref} className={`btn btn-${variant} btn-${size}`} {...props}>\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n```\n\n**Usando o componente:**\n```jsx\nimport Button from \"./components/ui/Button\";\n\nfunction App() {\n  return (\n    <Button variant=\"primary\" size=\"lg\">\n      Clique aqui\n    </Button>\n  );\n}\n```\n\n### 2️⃣ Componentes com Estado (Stateful)\n\nUse `useState` quando precisar armazenar dados que mudam (tipo uma variável de instância).\n\n```tsx\nimport { useState } from \"react\";\n\ninterface CounterState {\n  count: number;\n}\n\nfunction Counter(): JSX.Element {\n  const [count, setCount] = useState<number>(0);  // Estado inicial = 0\n  \n  const increment = (): void => {\n    setCount(count + 1);  // Atualiza o estado e re-renderiza\n  };\n  \n  return (\n    <div>\n      <p>Contagem: {count}</p>\n      <button onClick={increment}>Incrementar</button>\n    </div>\n  );\n}\n\nexport default Counter;\n```\n\n### 3️⃣ Props: Passando Dados Entre Componentes\n\nProps são **imutáveis** (tipo `readonly` em C#).\n\n```tsx\n// Tipos tipados\ninterface User {\n  name: string;\n  email: string;\n}\n\ninterface UserCardProps {\n  user: User;\n  theme: \"light\" | \"dark\";\n}\n\n// Componente Pai\nfunction App(): JSX.Element {\n  const user: User = { name: \"João\", email: \"joao@example.com\" };\n  return <UserCard user={user} theme=\"dark\" />;\n}\n\n// Componente Filho\nfunction UserCard({ user, theme }: UserCardProps): JSX.Element {\n  return (\n    <div className={`card card-${theme}`}>\n      <h2>{user.name}</h2>\n      <p>{user.email}</p>\n    </div>\n  );\n}\n```\n\n### 4️⃣ Componentes Compostos (Compound Components)\n\nUse quando um componente é feito de múltiplas partes que trabalham juntas.\n\n```tsx\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from \"./components/ui\";\n\n// Como Card funciona\nfunction App(): JSX.Element {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Meu Título</CardTitle>\n        <CardDescription>Descrição aqui</CardDescription>\n      </CardHeader>\n      <CardContent>\n        Conteúdo principal\n      </CardContent>\n      <CardFooter>\n        Rodapé\n      </CardFooter>\n    </Card>\n  );\n}\n```\n\n### 5️⃣ Renderização Condicional\n\n```tsx\ninterface UserProfileProps {\n  user?: { name: string };\n  isLoading: boolean;\n}\n\nfunction UserProfile({ user, isLoading }: UserProfileProps): JSX.Element {\n  if (isLoading) {\n    return <div>Carregando...</div>;\n  }\n  \n  if (!user) {\n    return <div>Usuário não encontrado</div>;\n  }\n  \n  return <div>Nome: {user.name}</div>;\n}\n```\n\n### 6️⃣ Listas (map)\n\nEm React, use `.map()` para renderizar listas (como `foreach` do C#).\n\n```tsx\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\ninterface UserListProps {\n  users: User[];\n}\n\nfunction UserList({ users }: UserListProps): JSX.Element {\n  return (\n    <ul>\n      {users.map((user) => (\n        <li key={user.id}>\n          {user.name} - {user.email}\n        </li>\n      ))}\n    </ul>\n  );\n}\n```\n\n**⚠️ Importante:** Sempre use uma `key` única para cada item da lista!\n\n## 🎨 Grid com Breakpoints\n\nO Grid funciona com breakpoints responsivos (como Media Queries do CSS).\n\n```tsx\nimport { Grid, GridItem } from \"./components/ui\";\n\nfunction Dashboard(): JSX.Element {\n  return (\n    <Grid \n      cols={{ \n        initial: 1,    // 1 coluna em phones\n        sm: 2,         // 2 colunas em tablets\n        md: 3,         // 3 colunas em desktop\n        lg: 4          // 4 colunas em telas grandes\n      }}\n      gap={{ \n        initial: 2,    // Gap pequeno em phones\n        md: 4          // Gap maior em desktop\n      }}\n    >\n      <GridItem>Card 1</GridItem>\n      <GridItem>Card 2</GridItem>\n      <GridItem>Card 3</GridItem>\n      <GridItem>Card 4</GridItem>\n    </Grid>\n  );\n}\n```\n\n**Breakpoints disponíveis:**\n- `initial`: 0px (Phones portrait)\n- `xs`: 520px (Phones landscape)\n- `sm`: 768px (Tablets)\n- `md`: 1024px (Tablets landscape)\n- `lg`: 1280px (Laptops)\n- `xl`: 1640px (Desktops)\n\n## 🧩 Componentes Disponíveis\n\n### Básicos\n- **Button** - Botões com variantes (default, primary, ghost, link)\n- **Input** - Campos de texto\n- **Label** - Rótulos para formulários\n- **Textarea** - Áreas de texto\n\n### Contenedores\n- **Card** - Container com header, content, footer\n- **Grid/GridItem** - Layout responsivo\n- **Separator** - Divisor horizontal\n\n### Feedback\n- **Badge** - Tags/etiquetas\n- **Avatar** - Imagens de perfil\n- **Skeleton** - Placeholder de carregamento\n\n### Interativos\n- **Dialog** - Modal/popup\n- **Tabs** - Abas\n- **Select** - Dropdown (como `<select>`)\n- **Checkbox** - Checkboxes\n- **Switch** - Toggle switches\n- **Tooltip** - Dicas ao passar mouse\n- **DropdownMenu** - Menu suspenso\n\n## 🚀 Começando\n\n### 1. Instalação\n\n```bash\nnpm install\n```\n\n### 2. Rodando localmente\n\n```bash\nnpm run dev\n```\n\nAcesse `http://localhost:5173`\n\n### 3. Build para produção\n\n```bash\nnpm run build\n```\n\n### 4. Lint (verificar erros)\n\n```bash\nnpm run lint\n```\n\n## 📚 Exemplo Completo: Formulário Simples\n\n```tsx\nimport { useState, ChangeEvent, FormEvent } from \"react\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  CardFooter,\n  Button,\n  Input,\n  Label,\n  Grid,\n  GridItem,\n} from \"./components/ui\";\n\ninterface FormDataState {\n  name: string;\n  email: string;\n}\n\nfunction FormExample(): JSX.Element {\n  const [formData, setFormData] = useState<FormDataState>({\n    name: \"\",\n    email: \"\",\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const { name, value } = e.currentTarget;\n    setFormData((prev) => ({\n      ...prev,\n      [name]: value,\n    }));\n  };\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {\n    e.preventDefault();\n    console.log(\"Dados do formulário:\", formData);\n    // Aqui você faria uma chamada à API\n  };\n\n  return (\n    <Grid cols={{ initial: 1, sm: 2 }} gap={4}>\n      <GridItem colSpanResponsive={{ initial: 1, sm: 2 }}>\n        <Card>\n          <CardHeader>\n            <CardTitle>Novo Usuário</CardTitle>\n            <CardDescription>Preencha os dados abaixo</CardDescription>\n          </CardHeader>\n\n          <form onSubmit={handleSubmit}>\n            <CardContent>\n              <div style={{ marginBottom: \"1rem\" }}>\n                <Label htmlFor=\"name\">Nome</Label>\n                <Input\n                  id=\"name\"\n                  name=\"name\"\n                  value={formData.name}\n                  onChange={handleChange}\n                  placeholder=\"João Silva\"\n                />\n              </div>\n\n              <div>\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  name=\"email\"\n                  type=\"email\"\n                  value={formData.email}\n                  onChange={handleChange}\n                  placeholder=\"joao@example.com\"\n                />\n              </div>\n            </CardContent>\n\n            <CardFooter>\n              <Button type=\"submit\" variant=\"default\">\n                Salvar\n              </Button>\n            </CardFooter>\n          </form>\n        </Card>\n      </GridItem>\n    </Grid>\n  );\n}\n\nexport default FormExample;\n```\n\n## 🔗 Recursos Úteis\n\n- [React Docs Oficial](https://react.dev) - Documentação completa\n- [TypeScript Handbook](https://www.typescriptlang.org/docs/) - Documentação TypeScript\n- [Radix UI](https://www.radix-ui.com) - Biblioteca de componentes que usamos\n- [MDN - JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript) - Referência JavaScript\n- [Vite Docs](https://vitejs.dev) - Build tool que usamos\n\n## 💡 Dicas para Devs .NET\n\n| .NET | React/TypeScript |\n|-----|-------|\n| `class Component { }` | `function Component(): JSX.Element { return <div> }` |\n| Propriedades (Properties) | Props (com tipagem via interfaces) |\n| Campos privados | Estado com `useState<T>` |\n| `IEnumerable<T>.ForEach()` | `.map((item) => ...)` |\n| Herança (Inheritance) | Composição (Composition) |\n| Data binding | `onChange={handleChange}` |\n| `async/await` | Igual em JavaScript |\n| Injeção de dependência | Context API ou props |\n| Interfaces | Interfaces TypeScript |\n| `null` / `undefined` | `null` / `undefined` com type narrowing |\n\n## ❓ Perguntas Frequentes\n\n**P: Por que meu componente não está atualizando?**\nR: Você provavelmente modificou uma variável normal. Use `useState` para dados que mudam!\n\n**P: Qual é a diferença entre Props e State?**\nR: Props são como parâmetros (imutáveis), State é dados internos do componente que mudam.\n\n**P: Como faço chamadas à API?**\nR: Use `fetch()` ou `axios` dentro de `useEffect()` (para efeitos colaterais).\n\n**P: Como uso TypeScript no React?**\nR: Todos os componentes já estão em TypeScript (.tsx). Use interfaces para tipar props e state:\n```tsx\ninterface MyComponentProps {\n  title: string;\n  count: number;\n  onSubmit: (value: string) => void;\n}\n```\n\n**P: Qual é a diferença entre .jsx e .tsx?**\nR: Iguais, mas `.tsx` suporta TypeScript. Nosso projeto usa `.tsx` para type-safety.\n\n## 📝 Notas\n\n- Este projeto usa **React 19** + **TypeScript** para máxima type-safety\n- **Radix UI** para componentes acessíveis\n- Estilos com **CSS Modules** (evita conflito de nomes)\n- Componentes com interface tipadas e JSDoc\n- **Grid com breakpoints responsivos** como Radix UI Themes\n- Todas as dependências têm `@types/*` instaladas para TypeScript\n\n","readmeFilename":"README.md","_rev":"1-e16cea8922c0b197fd8c3a34c100c6b4"}