@astral/ui 3.4.3 → 3.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +154 -2
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,10 +1,162 @@
1
1
  # @astral/ui
2
2
 
3
- Пакет содержит все необходимые фичи для построения интерфейсов приложений Астрал.Софт.
3
+ ```@astral/ui``` - это UI-KIT, на основе которого строятся интерфейсы в Астрал-Софт.
4
4
 
5
- # [Documentation](https://main--61baeff6f06230003a88ef8a.chromatic.com/)
5
+ ```@astral/ui``` включает в себя пакеты:
6
+ - ```@astral/components```
7
+ - ```@astral/form```
8
+ - ```@astral/icons```
9
+
10
+ # Table of contents
11
+ - [Storybook](#storybook)
12
+ - [Introduction](#introduction)
13
+ - [Getting started with Next.js](#getting-started-with-nextjs)
14
+ - [Migration guide](#migration-guide)
15
+
16
+ # [Storybook](https://main--61baeff6f06230003a88ef8a.chromatic.com/)
6
17
  [Storybook](https://main--61baeff6f06230003a88ef8a.chromatic.com/) содержит документацию компонентов ```@astral/ui```.
7
18
 
19
+ # Introduction
20
+ ```@astral/ui``` - это единая точка входа для всех основных составных частей UI-KIT.
21
+
22
+ ```@astral/ui``` экспортирует:
23
+ - все содержимое пакета ```@astral/components```
24
+ - все содержимое пакета ```@astral/form```
25
+ - все содержимое пакета ```@astral/icons```
26
+ - illustrations - иллюстрации, которые необходимо использовать в проекте
27
+ - fonts - шрифты, которые необходимо использовать в проекте
28
+
29
+ ## @astral/components
30
+ ```@astral/components``` - пакет, содержащий основу для построения интерфейсов: react-компоненты, хуки, utils.
31
+
32
+ ## @astral/form
33
+ ```@astral/form``` - пакет, содержащий обертки ```@astral/components``` для интеграции с react-hook-form.
34
+
35
+ ## @astral/icons
36
+ ```@astral/icons``` - пакет, содержащий иконки, доступные в дизайн-системе.
37
+
38
+ # Getting started with Next.js
39
+
40
+ ## Example
41
+ Пример использования и интеграции ```@astral/ui``` находится [здесь](https://github.com/kaluga-astral/nextjs-boilerplate).
42
+
43
+ ## Installation
44
+
45
+ ```shell
46
+ npm --save @astral/ui
47
+ ```
48
+
49
+ ## global.d.ts
50
+
51
+ ```ts
52
+ /// <reference types="@astral/ui/declarations" />
53
+
54
+ ```
55
+
56
+ ## next.config
57
+
58
+ ```js
59
+ const nextConfig = {
60
+ ...
61
+ transpilePackages: [
62
+ '@astral/ui',
63
+ '@astral/icons',
64
+ '@astral/components',
65
+ '@astral/form',
66
+ ],
67
+ webpack(config) {
68
+ config.module.rules.push({
69
+ test: /\.(woff|woff2)$/i,
70
+ issuer: { and: [/\.(js|ts)x?$/] },
71
+ type: 'asset/resource',
72
+ });
73
+
74
+ return config;
75
+ },
76
+ ...
77
+ };
78
+
79
+ module.exports = nextConfig;
80
+ ```
81
+
82
+ ## _app.tsx
83
+
84
+ ```tsx
85
+ import { AppProps } from 'next/app';
86
+ import Head from 'next/head';
87
+ import * as monitoringErrorService from '@sentry/nextjs';
88
+ import {
89
+ Brand,
90
+ ConfigProvider,
91
+ NotificationContainer,
92
+ StylesCacheProvider,
93
+ ThemeProvider,
94
+ createTheme,
95
+ } from '@astral/ui';
96
+ import { createStylesCache as createStylesServerCache } from '@astral/ui/server';
97
+ import UbuntuBoldWoff from '@astral/ui/fonts/UbuntuBold.woff';
98
+ import UbuntuBoldWoff2 from '@astral/ui/fonts/UbuntuBold.woff2';
99
+ import UbuntuLightWoff from '@astral/ui/fonts/UbuntuLight.woff';
100
+ import UbuntuLightWoff2 from '@astral/ui/fonts/UbuntuLight.woff2';
101
+ import UbuntuRegularWoff from '@astral/ui/fonts/UbuntuRegular.woff';
102
+ import UbuntuRegularWoff2 from '@astral/ui/fonts/UbuntuRegular.woff2';
103
+ import UbuntuMediumWoff from '@astral/ui/fonts/UbuntuMedium.woff';
104
+ import UbuntuMediumWoff2 from '@astral/ui/fonts/UbuntuMedium.woff2';
105
+
106
+ import { MainLayout } from '@example/modules/LayoutModule';
107
+
108
+ const fontsUrls = {
109
+ bold: {
110
+ woff: UbuntuBoldWoff,
111
+ woff2: UbuntuBoldWoff2,
112
+ },
113
+ light: {
114
+ woff: UbuntuLightWoff,
115
+ woff2: UbuntuLightWoff2,
116
+ },
117
+ regular: {
118
+ woff: UbuntuRegularWoff,
119
+ woff2: UbuntuRegularWoff2,
120
+ },
121
+ medium: {
122
+ woff: UbuntuMediumWoff,
123
+ woff2: UbuntuMediumWoff2,
124
+ },
125
+ };
126
+
127
+ export const theme = createTheme({ brand: Brand.DEFAULT, fontsUrls });
128
+
129
+ const stylesCache = createStylesServerCache({ key: 'next' });
130
+
131
+ export const App = ({ Component, pageProps }: AppProps) => {
132
+ return (
133
+ <>
134
+ <Head>
135
+ <meta
136
+ name="viewport"
137
+ content="width=device-width, initial-scale=1, shrink-to-fit=no"
138
+ />
139
+ <title>Astral.Example</title>
140
+ </Head>
141
+ <StylesCacheProvider value={stylesCache}>
142
+ <ConfigProvider
143
+ captureException={monitoringErrorService.captureException}
144
+ >
145
+ <ThemeProvider theme={theme}>
146
+ <NotificationContainer />
147
+ <MainLayout>
148
+ <Component {...pageProps} />
149
+ </MainLayout>
150
+ </ThemeProvider>
151
+ </ConfigProvider>
152
+ </StylesCacheProvider>
153
+ </>
154
+ );
155
+ };
156
+
157
+ export default App;
158
+ ```
159
+
8
160
  # Migration guide
9
161
 
10
162
  ## 2.0.0 -> 3.0.0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "3.4.3",
3
+ "version": "3.4.5",
4
4
  "browser": "./index.js",
5
5
  "main": "./index.js",
6
6
  "exports": {
@@ -10,9 +10,9 @@
10
10
  "./illustrations/*": "./illustrations/*"
11
11
  },
12
12
  "dependencies": {
13
- "@astral/icons": "^3.4.3",
14
- "@astral/components": "^3.4.3",
15
- "@astral/form": "^3.4.3"
13
+ "@astral/icons": "^3.4.5",
14
+ "@astral/components": "^3.4.5",
15
+ "@astral/form": "^3.4.5"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=17.0.0"