UIKit
UIKit · 
Um conjunto de componentes React flexíveis, altamente práticos e eficientes para criar aplicações web ricas.
Instalação
npm install --save-dev @gravity-ui/uikit
Uso
import {Button} from '@gravity-ui/uikit';
const SubmitButton = <Button view="action" size="l" />;
Estilos
O UIKit vem com estilos base e tema. Para que tudo fique bonito, inclua isto no topo do seu arquivo de entrada:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
// ...
O UIKit suporta diferentes temas: claro, escuro e suas variantes de contraste. Sua aplicação deve ser renderizada dentro de ThemeProvider:
import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';
const root = createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme="light">
<App />
</ThemeProvider>,
);
É possível gerar classes CSS raiz iniciais durante o SSR para evitar o flash de tema:
import {getRootClassName} from '@gravity-ui/uikit/server';
const theme = 'dark';
const rootClassName = getRootClassName({theme});
const html = `
<html>
<body>
<div id="root" class="${rootClassName}"></div>
</body>
</html>
`;
Além disso, há um arquivo SCSS com mixins com utilitários úteis para usar em sua aplicação.
I18N
Alguns componentes contêm tokens de texto (palavras e frases). Eles vêm em dois idiomas: en (padrão) e ru.
Para definir o idioma, use a função configure:
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
Desenvolvimento
Para iniciar o servidor de desenvolvimento com o storybook, execute o seguinte:
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start
