-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into timofeyevvv/readme_corrections_from_loc_team
- Loading branch information
Showing
9 changed files
with
145 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/uikit/) | ||
|
||
Набор гибких, универсальных и высокоэффективных React-компонентов для создания сложных веб-приложений. | ||
|
||
<!--GITHUB_BLOCK--> | ||
|
||
![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) | ||
|
||
## Ресурсы | ||
|
||
### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Веб-сайт](https://gravity-ui.com) | ||
|
||
### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Документация](https://gravity-ui.com/components/uikit/alert) | ||
|
||
### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma](<https://www.figma.com/community/file/1271150067798118027/Gravity-UI-Design-System-(Beta)>) | ||
|
||
### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) | ||
|
||
### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) | ||
|
||
### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Сообщество](https://t.me/gravity_ui) | ||
|
||
<!--/GITHUB_BLOCK--> | ||
|
||
## Установка | ||
|
||
```shell | ||
npm install --save-dev @gravity-ui/uikit | ||
``` | ||
|
||
## Использование | ||
|
||
```jsx | ||
import React from 'react'; | ||
import {Button} from '@gravity-ui/uikit'; | ||
|
||
const SubmitButton = <Button view="action" size="l" />; | ||
``` | ||
|
||
### Стили | ||
|
||
UIKit включает в себя базовое стилизованное оформление и тему. Чтобы подключить их, добавьте следующий фрагмент кода в начало точки входа приложения: | ||
|
||
```js | ||
// index.js | ||
|
||
import '@gravity-ui/uikit/styles/fonts.css'; | ||
import '@gravity-ui/uikit/styles/styles.css'; | ||
|
||
// ... | ||
``` | ||
|
||
UIKit поддерживает несколько тем: светлая, темная и их контрастные версии. Приложение должно быть отрисовано внутри компонента `ThemeProvider`: | ||
|
||
```js | ||
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>, | ||
); | ||
``` | ||
|
||
Для предотвращения мигания темы можно сгенерировать исходные CSS-классы для корневого элемента во время серверного рендеринга. | ||
|
||
```js | ||
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> | ||
`; | ||
``` | ||
|
||
Также предусмотрен файл с SCSS-[миксинами](styles/mixins.scss), которые можно использовать в приложении. | ||
|
||
### I18N | ||
|
||
Некоторые компоненты содержат текстовые токены (слова и фразы), доступные на двух языках: `en` (по умолчанию) и `ru`. | ||
Для настройки языка используйте функцию `configure`: | ||
|
||
```js | ||
// index.js | ||
|
||
import {configure} from '@gravity-ui/uikit'; | ||
|
||
configure({ | ||
lang: 'ru', | ||
}); | ||
``` | ||
|
||
## Разработка | ||
|
||
Для запуска Storybook в режиме разработки выполните следующую команду: | ||
|
||
```shell | ||
npm start | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,6 @@ | |
$block: '.#{variables.$ns}icon'; | ||
|
||
#{$block} { | ||
color: inherit; | ||
line-height: 0; | ||
vertical-align: top; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters