1.0.46 • Published 7 months ago

design-system-senai-react v1.0.46

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

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:

🔗 Design System SENAI - Figma


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:

  1. Instale o pacote:

    npm install design-system-senai-react

    ou

    yarn add design-system-senai-react

    ou

    pnpm add design-system-senai-react
  2. 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:

  1. Clone o repositório:

    git clone [LINK DO REPOSITÓRIO]
  2. Acesse a pasta do projeto:

    cd design-system-senai-react
  3. Instale as dependências:

    pnpm install
  4. 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:

  1. Crie uma branch para sua feature/fix:

    git checkout -b feature/nome-da-feature
  2. Após realizar as alterações, faça o commit:

    git commit -m "Descrição das alterações"
  3. Envie a branch para o repositório remoto:

    git push origin feature/nome-da-feature
  4. 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.

1.0.46

7 months ago

1.0.45

7 months ago

1.0.44

8 months ago

1.0.43

8 months ago

1.0.42

8 months ago

1.0.39

8 months ago

1.0.40

8 months ago

1.0.38

9 months ago

1.0.37

9 months ago

1.0.36

9 months ago

1.0.29

9 months ago

1.0.28

9 months ago

1.0.27

9 months ago

1.0.33

9 months ago

1.0.32

9 months ago

1.0.31

9 months ago

1.0.30

9 months ago

1.0.35

9 months ago

1.0.34

9 months ago

1.0.26

9 months ago

1.0.25

9 months ago

1.0.24

9 months ago

1.0.23

10 months ago

1.0.19

10 months ago

1.0.18

10 months ago

1.0.17

10 months ago

1.0.16

10 months ago

1.0.22

10 months ago

1.0.21

10 months ago

1.0.20

10 months ago

1.0.15

10 months ago

1.0.14

10 months ago

1.0.13

10 months ago

1.0.12

10 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.7

10 months ago

1.0.4

10 months ago