@salutejs/sdds-dfa 0.368.0-canary.3206.36552149682.0 → 0.368.0-dev.0

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 (3) hide show
  1. package/README.md +115 -32
  2. package/README.mdx +3 -67
  3. package/package.json +9 -9
package/README.md CHANGED
@@ -1,65 +1,148 @@
1
1
  # Библиотека компонентов SDDS DFA
2
2
 
3
+ [![license](https://img.shields.io/github/license/salute-developers/plasma)](https://github.com/salute-developers/plasma/blob/master/LICENSE.txt)
4
+ [![npm version](https://img.shields.io/npm/v/@salutejs/sdds-dfa.svg)](https://www.npmjs.com/package/@salutejs/sdds-dfa)
5
+ [![typescript](https://img.shields.io/github/package-json/dependency-version/salute-developers/plasma/dev/typescript)](https://www.typescriptlang.org/)
6
+ [![sdds-themes](https://img.shields.io/github/package-json/dependency-version/salute-developers/plasma/@salutejs/sdds-themes?filename=packages%2Fsdds-dfa%2Fpackage.json)](https://www.npmjs.com/package/@salutejs/sdds-themes)
7
+
3
8
  Реализация компонентов для создания веб-приложений.
4
9
 
5
- ## Использование
10
+ Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в варианте на [styled-components](https://styled-components.com/).
6
11
 
7
- Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);
12
+ ## Ссылки
8
13
 
9
- Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
14
+ - [Документация](https://plasma.sberdevices.ru/sdds-dfa/) — гайды, список компонентов с примерами и API
15
+ - [Подключение в Next.js](https://plasma.sberdevices.ru/sdds-dfa/next/)
16
+ - [Changelog](https://plasma.sberdevices.ru/changelog/?vertical=SDDSDFA&platform=React&version=0.367.0)
17
+ - [Задать вопрос или сообщить о проблеме](https://github.com/salute-developers/plasma/issues)
10
18
 
11
- Использование `styled-components` на проект необязательно, так же как и использование `typescript`.
19
+ ## Установка
12
20
 
13
- ### Установка пакета
21
+ Требуются `react` и `react-dom` версии `16.13.1` или выше, а также `styled-components` версии `5.3.1`:
14
22
 
15
23
  ```bash
16
24
  $ npm install --save react react-dom
17
- $ npm install --save styled-components@5.3.1
18
25
  $ npm install --save @salutejs/sdds-dfa @salutejs/sdds-themes
26
+ $ npm install --save styled-components@5.3.1
19
27
  ```
20
28
 
21
- ## Настройка
29
+ ## Варианты поставки
22
30
 
23
- Создайте компонент для подключения глобальных стилей:
31
+ | Точка входа | Реализация | Дополнительные зависимости |
32
+ | ----------- | ---------- | --------------------------- |
33
+ | `@salutejs/sdds-dfa` | styled-components | `styled-components@5.3.1` |
24
34
 
25
- ```jsx title="GlobalStyle.tsx"
26
- import { createGlobalStyle } from 'styled-components';
27
- import { sdds_dfa__light } from '@salutejs/sdds-themes';
35
+ ```jsx
36
+ import { Button } from '@salutejs/sdds-dfa';
37
+ ```
38
+
39
+ ## Подключение шрифтов
28
40
 
29
- const ThemeStyle = createGlobalStyle(sdds_dfa__light);
41
+ Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
30
42
 
31
- export const GlobalStyle = () => (
32
- <>
33
- <ThemeStyle />
34
- </>
35
- );
43
+ Добавьте три css-файла внутрь тега `<head>`.
44
+
45
+ ```html
46
+ <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
47
+ <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />
48
+ <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
36
49
  ```
37
50
 
38
- ### Корень приложения
51
+ ## Подключение темы
39
52
 
40
- В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
53
+ Тема подключается один раз в корне приложения.
41
54
 
42
- - Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
43
- - Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
55
+ > **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
44
56
 
45
- Для корректной работы `SSR - server side rendering` - приложение нужно обернуть в `SSRProvider` (доступен в `sdds-dfa`);
57
+ Тема включает в себя цветовые и типографические токены.
46
58
 
47
- ### Использование компонентов
59
+ Доступны светлая и тёмная темы — `sdds_dfa__light` и `sdds_dfa__dark`.
48
60
 
49
- Все компоненты доступны из папки `components` или напрямую из пакета:
61
+ ```jsx
62
+ import React from 'react';
63
+ import { createGlobalStyle } from 'styled-components';
64
+ import { sdds_dfa__light } from '@salutejs/sdds-themes';
65
+
66
+ const Theme = createGlobalStyle(sdds_dfa__light);
67
+
68
+ // вызовите <Theme /> в корне приложения
69
+ ```
70
+
71
+ Переключение темы в рантайме описано в [документации](https://plasma.sberdevices.ru/sdds-dfa/).
72
+
73
+ ## Использование компонентов
50
74
 
51
75
  ```jsx
52
- // App.tsx
53
- import { Button } from '@salutejs/sdds-dfa';
54
- import { textAccent } from '@salutejs/sdds-themes/tokens/sdds-dfa';
76
+ import React from 'react';
77
+ import { createGlobalStyle } from 'styled-components';
78
+ import { Button, BodyL } from '@salutejs/sdds-dfa';
79
+ import { sdds_dfa__light } from '@salutejs/sdds-themes';
80
+
81
+ const Theme = createGlobalStyle(sdds_dfa__light);
55
82
 
56
83
  export const App = () => {
57
84
  return (
58
- <Button>Hello, SDDS DFA!</Button>
59
-
60
- <p style={{color: textAccent}}>
61
- Token usage example
62
- </p>
85
+ <>
86
+ <Theme />
87
+ <BodyL>Hello, SDDS DFA!</BodyL>
88
+ <Button>Кнопка</Button>
89
+ </>
63
90
  );
64
91
  };
65
92
  ```
93
+
94
+ Дизайн-токены доступны в виде js-переменных:
95
+
96
+ - базовый набор — из `@salutejs/sdds-themes/tokens`
97
+ - уникальные токены темы — из `@salutejs/sdds-themes/tokens/sdds_dfa`.
98
+
99
+ ```jsx
100
+ import { textAccent } from '@salutejs/sdds-themes/tokens';
101
+
102
+ <p style={{ color: textAccent }}>Пример использования токена</p>;
103
+ ```
104
+
105
+ ## SSR и Next.js
106
+
107
+ - Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
108
+ - Добавьте пакеты в `transpilePackages` в `next.config.js`:
109
+
110
+ ```js
111
+ const nextConfig = {
112
+ transpilePackages: ['@salutejs/sdds-dfa', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons'],
113
+ };
114
+ ```
115
+
116
+ Подробности — в [гайде по Next.js](https://plasma.sberdevices.ru/sdds-dfa/next/).
117
+
118
+ ## MCP-сервер для AI-агентов
119
+
120
+ > **Примечание**: Поддерживаются версии библиотеки начиная с `0.352.0` — нужная указывается параметром `--version`.
121
+
122
+ Библиотека предоставляет [MCP-сервер](https://plasma.sberdevices.ru/sdds-dfa/how-to-mcp/) `@salutejs/sdds-mcp` — через него LLM-агент (Claude Code, Cursor и др.) получает актуальную документацию:
123
+
124
+ - список компонентов
125
+ - описание props
126
+ - примеры использования
127
+ - токены и гайды.
128
+
129
+ Сервер работает по `stdio`:
130
+
131
+ ```bash
132
+ npx -y @salutejs/sdds-mcp@latest --lib sdds-dfa
133
+ ```
134
+
135
+ Если агент настраивается через конфигурацию, используйте шаблон:
136
+
137
+ ```json
138
+ {
139
+ "mcpServers": {
140
+ "sdds-dfa": {
141
+ "command": "npx",
142
+ "args": ["-y", "@salutejs/sdds-mcp@latest", "--lib", "sdds-dfa"]
143
+ }
144
+ }
145
+ }
146
+ ```
147
+
148
+ Подробности и список инструментов — в [гайде по MCP](https://plasma.sberdevices.ru/sdds-dfa/how-to-mcp/).
package/README.mdx CHANGED
@@ -1,70 +1,6 @@
1
- import { Meta } from "@storybook/addon-docs/blocks";
1
+ import { Meta, Markdown } from "@storybook/addon-docs/blocks";
2
+ import ReadmeMd from './README.md?raw';
2
3
 
3
4
  <Meta title="About" />
4
5
 
5
- # Библиотека компонентов SDDS DFA
6
-
7
- Реализация компонентов для создания веб-приложений.
8
-
9
-
10
- ## Использование
11
-
12
- Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);
13
-
14
- Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
15
-
16
- Использование `styled-components` на проект необязательно, так же как и использование `typescript`.
17
-
18
- ### Установка пакета
19
-
20
- ```bash
21
- $ npm install --save react react-dom
22
- $ npm install --save styled-components@5.1.1
23
- $ npm install --save @salutejs/sdds-dfa @salutejs/sdds-themes
24
- ```
25
-
26
- ## Настройка
27
-
28
- Создайте компонент для подключения глобальных стилей:
29
-
30
- ```jsx title="GlobalStyle.tsx"
31
- import { createGlobalStyle } from 'styled-components';
32
- import { sdds_dfa__light } from '@salutejs/sdds-themes';
33
-
34
- const ThemeStyle = createGlobalStyle(sdds_dfa__light);
35
-
36
- export const GlobalStyle = () => (
37
- <>
38
- <ThemeStyle />
39
- </>
40
- );
41
- ```
42
-
43
- ### Корень приложения
44
-
45
- В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
46
-
47
- - Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
48
- - Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
49
-
50
- Для корректной работы dfaer side rendering приложение нужно обернуть `SSRProvider` (доступен в sdds-dfa);
51
-
52
- ### Использование компонентов
53
-
54
- Все компоненты доступны из папки `components` или напрямую из пакета:
55
-
56
- ```jsx
57
- // App.tsx
58
- import { Button } from '@salutejs/sdds-dfa';
59
- import { textAccent } from '@salutejs/sdds-themes/tokens/sdds-dfa';
60
-
61
- export const App = () => {
62
- return (
63
- <Button>Hello, SDDS DFA!</Button>
64
-
65
- <p style={{color: textAccent}}>
66
- Token usage example
67
- </p>
68
- );
69
- };
70
- ```
6
+ <Markdown>{ReadmeMd}</Markdown>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/sdds-dfa",
3
- "version": "0.368.0-canary.3206.36552149682.0",
3
+ "version": "0.368.0-dev.0",
4
4
  "description": "Salute Design System / React UI kit for SDDS DFA web applications",
5
5
  "author": "Salute Frontend Team <salute.developers@gmail.com>",
6
6
  "publishConfig": {
@@ -35,8 +35,8 @@
35
35
  "styled-components": "^5.3.1"
36
36
  },
37
37
  "dependencies": {
38
- "@salutejs/plasma-new-hope": "0.382.0-canary.3206.36552149682.0",
39
- "@salutejs/sdds-themes": "0.83.0-canary.3206.36552149682.0"
38
+ "@salutejs/plasma-new-hope": "0.382.0-dev.0",
39
+ "@salutejs/sdds-themes": "0.83.0-dev.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@babel/cli": "7.24.1",
@@ -46,11 +46,11 @@
46
46
  "@babel/preset-env": "7.24.4",
47
47
  "@babel/preset-react": "7.24.1",
48
48
  "@babel/preset-typescript": "7.24.1",
49
- "@salutejs/plasma-colors": "0.24.0-canary.3206.36552149682.0",
50
- "@salutejs/plasma-core": "1.245.0-canary.3206.36552149682.0",
51
- "@salutejs/plasma-cy-utils": "0.175.0-canary.3206.36552149682.0",
52
- "@salutejs/plasma-icons": "1.251.0-canary.3206.36552149682.0",
53
- "@salutejs/plasma-sb-utils": "0.246.0-canary.3206.36552149682.0",
49
+ "@salutejs/plasma-colors": "0.25.0-dev.0",
50
+ "@salutejs/plasma-core": "1.245.0-dev.0",
51
+ "@salutejs/plasma-cy-utils": "0.175.0-dev.0",
52
+ "@salutejs/plasma-icons": "1.252.0-dev.0",
53
+ "@salutejs/plasma-sb-utils": "0.246.0-dev.0",
54
54
  "@types/node": "16.7.13",
55
55
  "@types/react": "18.0.28",
56
56
  "@types/react-dom": "18.0.11",
@@ -88,5 +88,5 @@
88
88
  "salute.developers@gmail.com"
89
89
  ],
90
90
  "sideEffects": false,
91
- "gitHead": "8698b88eeb17871f8ea9806bbebc08c5c1f80d6f"
91
+ "gitHead": "507075774f11d105e198f069a8b367878b859d12"
92
92
  }