@astral/ui v3.115.0
@astral/ui
@astral/ui
- это UI-KIT, на основе которого строятся интерфейсы в Астрал-Софт.
@astral/ui
включает в себя пакеты:
@astral/components
@astral/form
@astral/icons
Table of contents
Storybook
Storybook содержит документацию компонентов @astral/ui
.
Introduction
@astral/ui
- это единая точка входа для всех основных составных частей UI-KIT.
@astral/ui
экспортирует:
- все содержимое пакета
@astral/components
- все содержимое пакета
@astral/form
- все содержимое пакета
@astral/icons
- illustrations - иллюстрации, которые необходимо использовать в проекте
- fonts - шрифты, которые необходимо использовать в проекте
@astral/components
@astral/components
- пакет, содержащий основу для построения интерфейсов: react-компоненты, хуки, utils.
@astral/form
@astral/form
- пакет, содержащий обертки @astral/components
для интеграции с react-hook-form.
@astral/icons
@astral/icons
- пакет, содержащий иконки, доступные в дизайн-системе.
Playground
Доступен Codesandbox для проверки фукнционала.
Getting started with Next.js
Example
Пример использования и интеграции @astral/ui
находится здесь.
Installation
npm --save @astral/ui
global.d.ts
/// <reference types="@astral/ui/declarations" />
next.config
const nextConfig = {
...
transpilePackages: [
'@astral/ui',
'@astral/icons',
'@astral/components',
'@astral/form',
],
webpack(config) {
config.module.rules.push({
test: /\.(woff|woff2)$/i,
issuer: { and: [/\.(js|ts)x?$/] },
type: 'asset/resource',
});
return config;
},
...
};
module.exports = nextConfig;
_app.tsx
import { AppProps } from 'next/app';
import Head from 'next/head';
import * as monitoringErrorService from '@sentry/nextjs';
import {
Brand,
ConfigProvider,
NotificationContainer,
StylesCacheProvider,
ThemeProvider,
createTheme,
} from '@astral/ui';
import { createStylesCache as createStylesServerCache } from '@astral/ui/server';
import UbuntuBoldWoff from '@astral/ui/fonts/UbuntuBold.woff';
import UbuntuBoldWoff2 from '@astral/ui/fonts/UbuntuBold.woff2';
import UbuntuLightWoff from '@astral/ui/fonts/UbuntuLight.woff';
import UbuntuLightWoff2 from '@astral/ui/fonts/UbuntuLight.woff2';
import UbuntuRegularWoff from '@astral/ui/fonts/UbuntuRegular.woff';
import UbuntuRegularWoff2 from '@astral/ui/fonts/UbuntuRegular.woff2';
import UbuntuMediumWoff from '@astral/ui/fonts/UbuntuMedium.woff';
import UbuntuMediumWoff2 from '@astral/ui/fonts/UbuntuMedium.woff2';
import { MainLayout } from '@example/modules/LayoutModule';
const fontsUrls = {
bold: {
woff: UbuntuBoldWoff,
woff2: UbuntuBoldWoff2,
},
light: {
woff: UbuntuLightWoff,
woff2: UbuntuLightWoff2,
},
regular: {
woff: UbuntuRegularWoff,
woff2: UbuntuRegularWoff2,
},
medium: {
woff: UbuntuMediumWoff,
woff2: UbuntuMediumWoff2,
},
};
export const theme = createTheme({ brand: Brand.DEFAULT, fontsUrls });
const stylesCache = createStylesServerCache({ key: 'next' });
export const App = ({ Component, pageProps }: AppProps) => {
return (
<>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Astral.Example</title>
</Head>
<StylesCacheProvider value={stylesCache}>
<ConfigProvider
captureException={monitoringErrorService.captureException}
>
<ThemeProvider theme={theme}>
<NotificationContainer />
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</ThemeProvider>
</ConfigProvider>
</StylesCacheProvider>
</>
);
};
export default App;
Migration guide
2.0.0 -> 3.0.0
ConfigProvider
В ConfigProvider добавлен prop imagesMap
:
type ImagesMap = {
/**
* @description изображение при отсутствии данных (используется в DataGrid)
*/
noDataImgSrc: string;
/**
* @description изображение при ошибке (используется в ContentState)
*/
defaultErrorImgSrc: string;
/**
* @description изображение при ошибке при обновлении продукта (используется в ContentState/ErrorBoundary)
*/
outdatedReleaseErrorImgSrc: string;
};
Данный prop содержит ссылки на img, которые используются в компонентах ui-kit.
Breaking changes:
- Компонент DataGrid теперь не инкапсулирует инлайновую svg для отображения NoData статуса. Для того, чтобы изображение появилось необходимо в ConfigProvider указать prop
imagesMap.noDataImgSrc
- Компонент ContentState больше не требует required prop
errorState.imgSrc
. Ссылка на изображение берется из ConfigProvider - Компонент ErrorBoundary перехватывает ошибку устаревших билдов и корректно её обрабатывает, для того, чтобы отобразилось изображение, необходимо в ConfigProvider указать prop
images.outdatedReleaseErrorImgSrc
import noDataImgSrc from '@astral/ui/illustrations/no-data.svg';
import outdatedReleaseErrorImgSrc from '@astral/ui/illustrations/outdated-release.svg';
import errorImgSrc from 'static/erorr-inmg.png';
const App = () => {
return (
<ConfigProvider
imagesMap={{
defaultErrorImgSrc: errorImgSrc,
noDataImgSrc,
outdatedReleaseErrorImgSrc,
}}
>
<ThemeProvider>
<Layout />
</ThemeProvider>
</ConfigProvider>
);
};
Typography
Breaking changes:
- Удалены пропсы, которые являлись css правилами (margin, border, mr...)
- Prop
color
принимает толькоstring
. Удалена возможность использовать для color функцию
Актуальные props находяться здесь.
Grid
Grid из @astral/ui v2 был переименован в LegacyGrid, в четвертой версии @astral/ui данный компонент будет удален.
Сигнатуру нового Grid вы можете увидеть в storybook.
Form
Breaking changes:
- Была удалена дефолтная валидация для компонентов:
FormDatePicker
,FormMobilePhoneField
- Для филдов формы был удален props
rules
. Для валидации форм используйте валидацию по схеме с помощью библиотеки @astral/validations
1.0.0 -> 2.0.0
Deps
Теперь пакет @astral/ui
аккумулирует и реэкспортит пакеты:
@astral/fonts
@astral/illustrations
@astral/icons
@astral/form
@astral/components
Необходимо заменить зависимости:
{
...
"@astral/icons": "^1.19.4",
"@astral/form": "^1.19.4",
"@astral/fonts": "^1.19.4",
"@astral/ui": "^1.19.4",
...
}
На:
{
...
"@astral/ui": "^1.19.4",
...
}
global.d.ts
Заменить файл global.d.ts
:
global.d.ts
/// <reference types="@astral/ui/declaration/emotion" />
/// <reference types="@astral/ui/declaration/mui-material" />
/// <reference types="@emotion/react/types/css-prop" />
На:
global.d.ts
/// <reference types="@astral/ui/declarations" />
fonts
Пакет @astral/fonts
включен в пакет @astral/ui
.
Необходимо заменить импорты:
import UbuntuBoldWoff from '@astral/fonts/UbuntuBold.woff';
import UbuntuBoldWoff2 from '@astral/fonts/UbuntuBold.woff2';
На:
import UbuntuBoldWoff from '@astral/ui/fonts/UbuntuBold.woff';
import UbuntuBoldWoff2 from '@astral/ui/fonts/UbuntuBold.woff2';
И внести соответвующие правки в конфиг сборщика для того, чтобы @astral/ui/fonts обрабатывались как шрифты.
illustrations
Пакет @astral/illustrations
включен в пакет @astral/ui
.
Необходимо заменить импорты:
import certImgSrc from '@astral/illustrations/cert.svg';
На:
import certImgSrc from '@astral/ui/illustrations/cert.svg';
И внести соответвующие правки в конфиг сборщика для того, чтобы @astral/ui/fonts обрабатывались как шрифты.
@astral/form
Все элементы пакета @astral/form
получили префиксы form.
Весь @astral/form
теперь экспортируется из @astral/ui
.
import { useForm, useFormWatch, useFormController } from '@astral/ui';
@astral/icons
Весь @astral/icons
теперь экспортируется из @astral/ui
.
import { QuitOutlineMd } from '@astral/ui';
DatePickerProvider
Компонент был удален, используйте ConfigProvider.
Troubleshooting
Медленно выполняются vitest тесты при импорте пакета
Для того чтобы ускорить выполнение vitest тестов, необходимо добавить следующий параметр conditions
в vitest.config.ts
:
/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(), tsconfigPaths()],
resolve: {
conditions: ['vitest'],
},
test: {
environment: 'jsdom',
},
});
В пакете есть специальное свойство exports.vitest
, оптимизирующее парсинг пакета для vitest.
Исходна проблема: vitest плохо работает с barrel files.
6 days ago
6 days ago
6 days ago
5 days ago
12 days ago
13 days ago
14 days ago
14 days ago
15 days ago
20 days ago
21 days ago
21 days ago
26 days ago
26 days ago
26 days ago
26 days ago
27 days ago
27 days ago
29 days ago
28 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
7 months ago
8 months ago
8 months ago
10 months ago
10 months ago
8 months ago
7 months ago
10 months ago
8 months ago
7 months ago
10 months ago
10 months ago
10 months ago
7 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago