fsk-design-system 1.0.12 → 1.0.13

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.
package/README.md CHANGED
@@ -1,96 +1,96 @@
1
- # FSK Design System
2
-
3
- Универсальная дизайн-система с поддержкой тем и кастомных UI-компонентов.
4
-
5
- ## 📦 Установка
6
-
7
- ```bash
8
- npm install fsk-design-system
9
- ```
10
-
11
- ## ⚡ Быстрый старт
12
-
13
- 1. **Импортируйте стили дизайн-системы в корневом файле:**
14
-
15
- ```ts
16
- import 'fsk-design-system/styles.css';
17
- ```
18
-
19
- 2. **Оберните приложение в `ThemeProvider`:**
20
-
21
- ```tsx
22
- import { ThemeProvider } from 'fsk-design-system';
23
-
24
- const App = () => (
25
- <ThemeProvider>
26
- {/* Ваш код */}
27
- </ThemeProvider>
28
- );
29
- ```
30
-
31
- 3. **Оберните приложение в `ConfigProvider` для русификации:**
32
-
33
- ```tsx
34
- import ConfigProvider from "antd/es/config-provider"
35
- import ruRU from "antd/locale/ru_RU"
36
-
37
- const App = () => (
38
- <ConfigProvider locale={ruRU}>
39
- {/* Ваш код */}
40
- </ConfigProvider>
41
- );
42
- ```
43
-
44
- ## 🔹 Смена темы через хук `useTheme`
45
-
46
- ```tsx
47
- import { useTheme } from 'fsk-design-system';
48
-
49
- const ThemeSwitcher = () => {
50
- const { changeTheme } = useTheme();
51
-
52
- return (
53
- <button onClick={() => changeTheme('dark')}>
54
- Переключить на тёмную тему
55
- </button>
56
- );
57
- };
58
- ```
59
-
60
- ## 🎨 Доступные темы
61
-
62
- | Название темы | Описание |
63
- |---------------|----------------|
64
- | `light` | Светлая тема (по умолчанию) |
65
- | `dark` | Тёмная тема |
66
-
67
- ## 🧩 Компоненты
68
-
69
- > Полный список компонентов — см. в [документации](https://design-system.k8s-dev.fsk.ru/)
70
-
71
- Пример:
72
-
73
- ```tsx
74
- import { Button } from 'fsk-design-system';
75
-
76
- <Button size="xl" type="main-secondary">Click me</Button>
77
- ```
78
-
79
- ## 📌 Требования
80
-
81
- ```json
82
- "dependencies": {
83
- "@emotion/css": "^11.13.5",
84
- "@emotion/react": "^11.13.3",
85
- "@emotion/styled": "^11.13.0",
86
- "antd": "^5.23.4",
87
- "react": "^18.3.1",
88
- "react-dom": "^18.3.1"
89
- }
90
- ```
91
-
92
- ```bash
93
- npm install @emotion/css@^11.13.5 @emotion/react@^11.13.3 @emotion/styled@^11.13.0 antd@^5.23.4 react@^18.3.1 react-dom@^18.3.1
94
- ```
95
-
1
+ # FSK Design System
2
+
3
+ Универсальная дизайн-система с поддержкой тем и кастомных UI-компонентов.
4
+
5
+ ## 📦 Установка
6
+
7
+ ```bash
8
+ npm install fsk-design-system
9
+ ```
10
+
11
+ ## ⚡ Быстрый старт
12
+
13
+ 1. **Импортируйте стили дизайн-системы в корневом файле:**
14
+
15
+ ```ts
16
+ import 'fsk-design-system/styles.css';
17
+ ```
18
+
19
+ 2. **Оберните приложение в `ThemeProvider`:**
20
+
21
+ ```tsx
22
+ import { ThemeProvider } from 'fsk-design-system';
23
+
24
+ const App = () => (
25
+ <ThemeProvider>
26
+ {/* Ваш код */}
27
+ </ThemeProvider>
28
+ );
29
+ ```
30
+
31
+ 3. **Оберните приложение в `ConfigProvider` для русификации:**
32
+
33
+ ```tsx
34
+ import ConfigProvider from "antd/es/config-provider"
35
+ import ruRU from "antd/locale/ru_RU"
36
+
37
+ const App = () => (
38
+ <ConfigProvider locale={ruRU}>
39
+ {/* Ваш код */}
40
+ </ConfigProvider>
41
+ );
42
+ ```
43
+
44
+ ## 🔹 Смена темы через хук `useTheme`
45
+
46
+ ```tsx
47
+ import { useTheme } from 'fsk-design-system';
48
+
49
+ const ThemeSwitcher = () => {
50
+ const { changeTheme } = useTheme();
51
+
52
+ return (
53
+ <button onClick={() => changeTheme('dark')}>
54
+ Переключить на тёмную тему
55
+ </button>
56
+ );
57
+ };
58
+ ```
59
+
60
+ ## 🎨 Доступные темы
61
+
62
+ | Название темы | Описание |
63
+ |---------------|----------------|
64
+ | `light` | Светлая тема (по умолчанию) |
65
+ | `dark` | Тёмная тема |
66
+
67
+ ## 🧩 Компоненты
68
+
69
+ > Полный список компонентов — см. в [документации](https://design-system.k8s-dev.fsk.ru/)
70
+
71
+ Пример:
72
+
73
+ ```tsx
74
+ import { Button } from 'fsk-design-system';
75
+
76
+ <Button size="xl" type="main-secondary">Click me</Button>
77
+ ```
78
+
79
+ ## 📌 Требования
80
+
81
+ ```json
82
+ "dependencies": {
83
+ "@emotion/css": "^11.13.5",
84
+ "@emotion/react": "^11.13.3",
85
+ "@emotion/styled": "^11.13.0",
86
+ "antd": "^5.23.4",
87
+ "react": "^18.3.1",
88
+ "react-dom": "^18.3.1"
89
+ }
90
+ ```
91
+
92
+ ```bash
93
+ npm install @emotion/css@^11.13.5 @emotion/react@^11.13.3 @emotion/styled@^11.13.0 antd@^5.23.4 react@^18.3.1 react-dom@^18.3.1
94
+ ```
95
+
96
96
  ---