§UIKit ·

English | Русский

Um conjunto de componentes React flexíveis, altamente práticos e eficientes para a criação de aplicações web ricas. Parte do sistema de design Gravity UI.

§Sobre

O UIKit é o pacote fundamental do sistema de design Gravity UI — um conjunto testado em batalha com mais de 70 componentes React construídos para aplicações web de produção. Ele cuida das partes difíceis: temas, acessibilidade, layout RTL, renderização do lado do servidor e internacionalização, para que você possa focar na construção do seu produto.

Principais recursos:

• Mais de 70 componentes — inputs, overlays, exibição de dados, primitivas de layout, feedback e muito mais
• Temas integrados — variantes claras, escuras e de alto contraste com uma ferramenta Themer ao vivo para personalizar tokens
• Suporte RTL — direção completa do layout da direita para a esquerda

Navegue pelo catálogo completo de componentes no Storybook ou na documentação.

§Primeiros Passos

§Pré-requisitos

React 16.14, 17, 18 ou 19 deve estar instalado no seu projeto.

§Instalação

npm install @gravity-ui/uikit

§Uso

Importe componentes diretamente do pacote:

import {Button} from '@gravity-ui/uikit';

const SubmitButton = (
  <Button view="action" size="l">
    Submit
  </Button>
);

§Estilos

Inclua os estilos base e as fontes uma vez no topo do ponto de entrada da sua aplicação:

// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

Um arquivo SCSS com mixins e utilitários úteis também está disponível para uso em suas próprias folhas de estilo.

§Guias

Leia mais:

• Temas — habilite temas claros, escuros e de alto contraste
• Renderização do lado do servidor — gere a classe CSS raiz no servidor
• Internacionalização — defina o idioma dos componentes integrados

§Desenvolvimento

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # inicia o Storybook em http://localhost:7007

Outros comandos úteis:

npm test              # executa testes unitários
npm run lint          # faz lint em JS, SCSS e Markdown
npm run typecheck     # verifica tipos do TypeScript
npm run playwright    # executa testes de regressão visual

§Mantenedores

@amje

@ValeraS

@korvin89

§Contribuições

Suas contribuições são bem-vindas! Por favor, leia o CONTRIBUTING.md antes de enviar um pull request. Para diretrizes detalhadas de PR, consulte contribute/pull-request.md.

Temos contribuidores e contando — junte-se a nós!

Participe da comunidade no Telegram para dúvidas e discussões.

§Licença

Distribuído sob a Licença MIT. Veja LICENSE para detalhes.

§Para agentes de IA

A biblioteca base de componentes React e tokens de design para aplicativos Gravity UI — controles, entradas, overlays, layout e temas nos quais todos os outros pacotes @gravity-ui/* se baseiam.

§Quando usar

• UI padrão de aplicativos: botões, controles de formulário, modais e popups, menus, abas, rótulos, tipografia e primitivas de layout.
• A base de temas de um aplicativo Gravity UI: ThemeProvider, tokens de design e variáveis CSS que o restante do ecossistema @gravity-ui/* espera que estejam presentes.
• Dados tabulares simples através do componente Table integrado (seleção, ordenação, ações de linha).

§Quando não usar

• Grids de dados com muitos recursos (virtualização, redimensionamento de colunas, agrupamento, reordenação) — use @gravity-ui/table, um pacote headless separado. Ele não é o mesmo que o componente Table do uikit.
• Gráficos e visualização de dados — use @gravity-ui/charts (@gravity-ui/chartkit é o wrapper legado).
• Estruturas de navegação de aplicativos (cabeçalho lateral, rodapé, logo) — use @gravity-ui/navigation.
• Seletores de data, calendários e controles de intervalo — use @gravity-ui/date-components.
• O próprio conjunto de ícones SVG — use @gravity-ui/icons; o uikit apenas fornece o renderizador Icon.

§Armadilhas comuns

• A prop de estilo do Button é view, não variant ou color.
• Componentes renderizam sem estilo sem configuração. Envolva o aplicativo em ThemeProvider e importe @gravity-ui/uikit/styles/styles.css (mais fonts.css) uma vez no ponto de entrada — ambos são necessários.
• Icon não tem a prop name. Passe um componente de ícone importado através de data: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
• Os valores de theme são light | dark | light-hc | dark-hc. Não existe theme="default".

§Documentação útil

• Componentes de layout e espaçamentos
• Temas, Cores e Branding
• Tipografia

§Documentação para agentes de IA

A documentação legível por agente para a versão instalada está localizada em node_modules/@gravity-ui/uikit/build/docs/INDEX.md.

§Histórico de Estrelas

Se você achar o UIKit útil, considere dar uma ⭐ no GitHub — isso ajuda outras pessoas a descobrirem o projeto.