UIKit
UIKit · 
Un conjunto de componentes React flexibles, muy prácticos y eficientes para crear aplicaciones web enriquecidas.
Instalación
npm install --save-dev @gravity-ui/uikit
Uso
import {Button} from '@gravity-ui/uikit';
const SubmitButton = <Button view="action" size="l" />;
Estilos
UIKit viene con estilos base y un tema. Para que todo se vea bien, incluye esto al principio de tu archivo de entrada:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
// ...
UIKit soporta diferentes temas: claro, oscuro y sus variantes de contraste. Tu aplicación debe renderizarse 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>,
);
Es posible generar clases CSS raíz iniciales durante el SSR para evitar el parpadeo del 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>
`;
Además, hay un archivo SCSS con mixins con utilidades útiles para usar en tu aplicación.
Internacionalización (I18N)
Algunos componentes contienen tokens de texto (palabras y frases). Vienen en dos idiomas: en (por defecto) y ru.
Para establecer el idioma, usa la función configure:
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
Desarrollo
Para iniciar el servidor de desarrollo con storybook, ejecuta lo siguiente:
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start
