design-system-senai-react v1.0.46
design-system-senai-react
Este é o Design System do SENAI, criado para padronizar e facilitar o desenvolvimento de interfaces acessíveis, responsivas e consistentes na rede SENAI. Este sistema foi desenvolvido em React e prioriza a acessibilidade, usabilidade e personalização, alinhado com as necessidades específicas do ecossistema SENAI.
Design no Figma
O Design System do SENAI foi cuidadosamente planejado e documentado no Figma, onde você pode visualizar e explorar os protótipos, componentes e diretrizes visuais. Acesse o arquivo do Figma pelo link abaixo:
Recursos principais
- Componentes reutilizáveis: Inclui botões, inputs, modais, outros elementos padronizados.
- Acessibilidade (WCAG): Totalmente compatível com boas práticas de acessibilidade.
- Tematização: Suporte para temas customizáveis.
- Compatibilidade: Desenvolvido com suporte a React 18+ e TypeScript.
- Estilo moderno: Baseado nas diretrizes visuais do SENAI.
Requisitos
- Node.js 18+
- Npm, yarn ou pnpm (recomendado)
- React 18+
Dependências principais
Este projeto utiliza as seguintes bibliotecas, essenciais para o funcionamento e desenvolvimento do Design System SENAI:
Bibliotecas principais
- React 18+: Biblioteca para construção de interfaces de usuário.
- TypeScript: Superset do JavaScript para tipagem estática.
- Styled-components: Para estilização de componentes em JavaScript/TypeScript.
- @headlessui/react: Componentes acessíveis sem estilo para React.
- clsx: Utilitário para gerenciar classes condicionalmente.
- @vanilla-extract/css: Sistema de estilização CSS com integração ao TypeScript.
Ferramentas de construção (Build Tools)
- rollup: Bundler para JavaScript.
- @rollup/plugin-commonjs: Permite o uso de módulos CommonJS com Rollup.
- @rollup/plugin-image: Permite importar imagens no processo de bundling.
- @rollup/plugin-node-resolve: Resolve dependências externas com Rollup.
- @rollup/plugin-terser: Minifica o código JavaScript com Rollup.
- @rollup/plugin-typescript: Suporte ao TypeScript no Rollup.
- rollup-plugin-dts: Gera definições de tipos
.d.ts
para o pacote. - rollup-plugin-peer-deps-external: Exclui dependências peer do bundle.
- rollup-plugin-postcss: Processa CSS no Rollup.
Ferramentas de qualidade de código
- eslint, eslint-config-prettier, prettier: Ferramentas para garantir a qualidade e consistência do código.
Tipos TypeScript
- @types/react e @types/react-dom: Tipos TypeScript para React.
Instalação
Para utilizar este Design System no seu projeto:
Instale o pacote:
npm install design-system-senai-react
ou
yarn add design-system-senai-react
ou
pnpm add design-system-senai-react
Importe os componentes no seu projeto:
import { Button } from 'design-system-senai-react'; function App() { return ( <div> <Button variant="filled">Clique aqui</Button> </div> ); } export default App;
Como rodar localmente
Se você deseja contribuir ou rodar o projeto localmente, siga os passos abaixo:
Clone o repositório:
git clone [LINK DO REPOSITÓRIO]
Acesse a pasta do projeto:
cd design-system-senai-react
Instale as dependências:
pnpm install
Realizar o build ou iniciar o modo de desenvolvimento
pnpm run build
ou
pnpm run dev
Contribuição
Contribuições são bem-vindas! Para contribuir:
Crie uma branch para sua feature/fix:
git checkout -b feature/nome-da-feature
Após realizar as alterações, faça o commit:
git commit -m "Descrição das alterações"
Envie a branch para o repositório remoto:
git push origin feature/nome-da-feature
Abra um Pull Request no repositório principal.
💡 Nota: Este Design System foi desenvolvido com foco em acessibilidade e padrões de design moderno. Para garantir a melhor experiência, mantenha o pacote sempre atualizado.
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago