{"_id":"@arthur_mosaicq/generic-form-components","name":"@arthur_mosaicq/generic-form-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@arthur_mosaicq/generic-form-components","version":"1.0.0","description":"Componentes de formulário genéricos e reutilizáveis","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","private":false,"scripts":{"build":"tsc","build:rollup":"rollup -c --bundleConfigAsCjs","dev":"tsc -w","clean":"rm -rf dist","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"keywords":["react","form","components","typescript"],"author":"","license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@storybook/addon-docs":"^9.1.10","@storybook/addon-onboarding":"^9.1.10","@storybook/react-vite":"^9.1.10","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","react":"^19.2.0","react-dom":"^19.2.0","rollup":"^4.52.4","storybook":"^9.1.10","typescript":"^5.0.0","vite":"^7.1.9"},"dependencies":{"@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-node-resolve":"^16.0.2","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.4","rollup-plugin-dts":"^6.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"directories":{"example":"examples"},"_id":"@arthur_mosaicq/generic-form-components@1.0.0","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-WwvHAwkk/W1qfOxj4PhqU357HSGVy0DPi4kE6i1R93qio3v3izsnIk+wuvleMUHMCuFuE6/wph0xvlGWQkTUBA==","shasum":"09b55725e27f07e3126b93d985e76f4c3f570d43","tarball":"https://registry.npmjs.org/@arthur_mosaicq/generic-form-components/-/generic-form-components-1.0.0.tgz","fileCount":8,"unpackedSize":11286,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGXhJ2iY3IVE2mtCvTC7M2UDfv48F6Zw+Xb0JIlpOxYzAiEApeyHpLDf22mHo1qeLbQiGlz1xESKDI1H9abKtzPHMt0="}]},"_npmUser":{"name":"arthur_mosaicq","email":"arthur.mussio@mosaicq.com"},"maintainers":[{"name":"arthur_mosaicq","email":"arthur.mussio@mosaicq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/generic-form-components_1.0.0_1759723206656_0.4127501292034077"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-06T04:00:06.587Z","1.0.0":"2025-10-06T04:00:06.881Z","modified":"2025-10-06T04:00:07.151Z"},"maintainers":[{"name":"arthur_mosaicq","email":"arthur.mussio@mosaicq.com"}],"description":"Componentes de formulário genéricos e reutilizáveis","keywords":["react","form","components","typescript"],"license":"MIT","readme":"# Generic Form Components\n\nUma biblioteca de componentes de formulário genéricos e reutilizáveis para React com TypeScript.\n\n## Características\n\n- 🏗️ **Componentes modulares**: Input, TextArea, Select, Button\n- 📝 **Sistema de formulário**: Gerenciamento automático de estado\n- ✅ **Validação integrada**: Suporte a regras de validação customizadas\n- 🎨 **Estilização flexível**: Classes CSS padrão compatíveis com Tailwind CSS\n- 🔗 **Componentes conectados**: FormInput, FormTextArea, FormSelect, SubmitButton\n- 📦 **TypeScript**: Tipagem completa para melhor experiência de desenvolvimento\n\n## Instalação\n\n```bash\n# Usando yarn (recomendado)\nyarn add generic-form-components\n\n# Ou usando npm\nnpm install generic-form-components\n```\n\n## Uso Básico\n\n### Importar componentes\n\n```tsx\nimport { \n  Form, \n  FormInput, \n  FormTextArea, \n  FormSelect, \n  SubmitButton \n} from 'generic-form-components';\n```\n\n### Exemplo de formulário\n\n```tsx\nimport React from 'react';\nimport { \n  Form, \n  FormInput, \n  FormTextArea, \n  FormSelect, \n  SubmitButton,\n  SelectOption \n} from 'generic-form-components';\n\nconst MyForm = () => {\n  const options: SelectOption[] = [\n    { value: 'option1', label: 'Opção 1' },\n    { value: 'option2', label: 'Opção 2' }\n  ];\n\n  const validationRules = {\n    name: (value: string) => {\n      if (!value.trim()) return 'Nome é obrigatório';\n      return undefined;\n    }\n  };\n\n  const handleSubmit = (data: any) => {\n    console.log('Dados:', data);\n  };\n\n  return (\n    <Form\n      initialValues={{ name: '', email: '', country: '' }}\n      validationRules={validationRules}\n      onSubmit={handleSubmit}\n    >\n      <FormInput\n        name=\"name\"\n        label=\"Nome\"\n        placeholder=\"Digite seu nome\"\n        required\n      />\n      \n      <FormInput\n        name=\"email\"\n        type=\"email\"\n        label=\"Email\"\n        placeholder=\"seu@email.com\"\n      />\n      \n      <FormSelect\n        name=\"country\"\n        label=\"País\"\n        placeholder=\"Selecione\"\n        options={options}\n      />\n      \n      <FormTextArea\n        name=\"message\"\n        label=\"Mensagem\"\n        rows={4}\n      />\n      \n      <SubmitButton>\n        Enviar\n      </SubmitButton>\n    </Form>\n  );\n};\n```\n\n## Componentes Disponíveis\n\n### Form\nComponente principal que gerencia o estado do formulário.\n\n```tsx\n<Form\n  onSubmit={(data) => void}           // Função obrigatória\n  initialValues?: FormData            // Valores iniciais\n  validationRules?: ValidationRules   // Regras de validação\n  className?: string                  // Classes CSS adicionais\n>\n  {children}\n</Form>\n```\n\n### FormInput\nInput conectado ao contexto do formulário.\n\n```tsx\n<FormInput\n  name=\"campo\"                       // Nome obrigatório\n  type?: \"text\" | \"email\" | \"password\"\n  label?: string                     // Rótulo do campo\n  placeholder?: string               // Texto placeholder\n  required?: boolean                 // Campo obrigatório\n  disabled?: boolean                 // Campo desabilitado\n/>\n```\n\n### FormTextArea\nTextArea conectado ao contexto do formulário.\n\n```tsx\n<FormTextArea\n  name=\"campo\"\n  label?: string\n  placeholder?: string\n  rows?: number                      // Número de linhas (padrão: 3)\n  resize?: \"none\" | \"both\"           // Controle de redimensionamento\n  required?: boolean\n  disabled?: boolean\n/>\n```\n\n### FormSelect\nSelect conectado ao contexto do formulário.\n\n```tsx\n<FormSelect\n  name=\"campo\"\n  label?: string\n  placeholder?: string               // Opção padrão\n  options: SelectOption[]            // Array de opções obrigatório\n  required?: boolean\n  disabled?: boolean\n/>\n```\n\n### SubmitButton\nBotão de envio com indicação de loading automático.\n\n```tsx\n<SubmitButton\n  variant?: \"primary\" | \"secondary\" | \"danger\" | \"success\"\n  size?: \"small\" | \"medium\" | \"large\"\n  className?: string\n>\n  Texto do botão\n</SubmitButton>\n```\n\n## Tipos\n\n```tsx\ninterface SelectOption {\n  value: string | number;\n  label: string;\n}\n\ninterface ValidationRules {\n  [fieldName: string]: (value: any) => string | unsigned;\n}\n\ninterface FormData {\n  [key: string]: any;\n}\n```\n\n## Validação\n\nA validação é baseada em funções que recebem o valor do campo e retornam uma string de erro ou `undefined`:\n\n```tsx\nconst validationRules = {\n  email: (value: string) => {\n    if (!value.trim()) return 'Email é obrigatório';\n    if (!/\\S+@\\S+\\.\\S+/.test(value)) return 'Email inválido';\n    return undefined; // Sem erro\n  },\n  \n  age: (value: number) => {\n    if (!value) return 'Idade é obrigatória';\n    if (value < 18) return 'Deve ser maior de 18 anos';\n    return undefined;\n  }\n};\n```\n\n## Estilização\n\nOs componentes usam classes Tailwind CSS por padrão. Você pode customizar através da prop `className` ou sobrescrever os estilos CSS.\n\n## Build e Development\n\n```bash\n# Instalar dependências\nyarn install\n\n# Build da biblioteca\nyarn build\n\n# Modo desenvolvimento (watch mode)\nyarn dev\n\n# Limpar diretório build\nyarn clean\n```\n\n## Licença\n\nMIT\n","readmeFilename":"README.md","_rev":"1-f843a846eb157588134f76f83b6bf4ec"}