From c97ab70fd33a6bfb2d0d758b164c5fd2655c6165 Mon Sep 17 00:00:00 2001 From: Anton Mikhailov Date: Sun, 3 May 2026 13:46:46 +0300 Subject: [PATCH 1/6] fix(sdds-os): use @salutejs-ds/sdds_os [PLASMA-7164] --- .../sdds-os/.storybook/decoratorThemes.tsx | 10 +- packages/sdds-os/README.md | 19 +- packages/sdds-os/README.mdx | 258 +-- packages/sdds-os/package-lock.json | 1519 ++++++++++++++--- packages/sdds-os/package.json | 4 +- .../ViewContainer/ViewContainer.config.ts | 2 +- packages/sdds-os/src/index.ts | 1 - packages/sdds-os/src/mixins/index.ts | 2 +- packages/sdds-os/src/tokens/index.ts | 38 - 9 files changed, 1279 insertions(+), 574 deletions(-) delete mode 100644 packages/sdds-os/src/tokens/index.ts diff --git a/packages/sdds-os/.storybook/decoratorThemes.tsx b/packages/sdds-os/.storybook/decoratorThemes.tsx index 798529899a6..9a45d58ee9f 100644 --- a/packages/sdds-os/.storybook/decoratorThemes.tsx +++ b/packages/sdds-os/.storybook/decoratorThemes.tsx @@ -1,14 +1,14 @@ import React from 'react'; import type { Decorator } from '@storybook/react-vite'; import { createGlobalStyle } from 'styled-components'; -import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-themes'; +import { sdds_os__light, sdds_os__dark } from '@salutejs-ds/sdds_os'; -import { ViewContainer } from '../src/components/ViewContainer/ViewContainer'; +import { ViewContainer } from '../src'; const DocumentStyle = createGlobalStyle` html:root { min-height: 100vh; - background-color: var(--surface-solid-primary); + background-color: var(--background-primary); } a { @@ -33,8 +33,8 @@ export const ON_DARK_MODE = 'onDark'; export const ON_LIGHT_MODE = 'onLight'; const themes = { - [SDDS_SBER_OS_LIGHT_THEME]: createGlobalStyle(sdds_serv__light), - [SDDS_SBER_OS_DARK_THEME]: createGlobalStyle(sdds_serv__dark), + [SDDS_SBER_OS_LIGHT_THEME]: createGlobalStyle(sdds_os__light), + [SDDS_SBER_OS_DARK_THEME]: createGlobalStyle(sdds_os__dark), }; type ViewType = { diff --git a/packages/sdds-os/README.md b/packages/sdds-os/README.md index c1dff8b08f2..2c29f9b9f17 100644 --- a/packages/sdds-os/README.md +++ b/packages/sdds-os/README.md @@ -14,7 +14,7 @@ ### Установка зависимостей ```bash -$ npm install --save @salutejs/sdds-os @salutejs/sdds-themes +$ npm install --save @salutejs/sdds-os @salutejs-ds/sdds_os ``` Для работы со `styled-components`, необходимо установить @@ -30,7 +30,7 @@ $ npm install --save styled-components@5.3.1 ```jsx import styled from 'styled-components'; import { Button } from '@salutejs/sdds-os'; -import { textAccent } from '@salutejs/sdds-themes/tokens'; +import { textAccent } from '@salutejs-ds/sdds_os'; export const App = () => { const StyledP = styled.p` @@ -137,7 +137,7 @@ export default function Home() { В файле, где происходит подключение всех стилей, например `index.css` ```css -@import '@salutejs/sdss-themes/css/sdds_serv__dark.css'; +@import '@salutejs-вы/sdss_os/css/sdds_os__dark.css'; ``` ```jsx @@ -164,9 +164,9 @@ export default App; import React from 'react'; import { createGlobalStyle } from 'styled-components'; import { Button, BodyL } from '@salutejs/sdds-os/styled-components'; -import { sdds_serv__light } from '@salutejs/sdds-themes'; +import { sdds_os__light } from '@salutejs-ds/sdds_os'; -const Theme = createGlobalStyle(sdds_serv__light); +const Theme = createGlobalStyle(sdds_os__light); const App = () => { return ( @@ -194,17 +194,16 @@ export const backgroundPrimary = 'var(--background-primary, #000000)'; ### Способы подключения -Есть два пути импорта токенов: - -- Из вертикали `@salutejs/sdds-themes/tokens` (подходит в большинстве случаев, т.к там лежит весь базовый набор токенов) -- Непосредственно из темы `@salutejs/sdds-themes/tokens/sdds-serv` (следует использовать, когда необходимо импортировать уникальные токены, которые используются только в этой теме) +```tsx +import { textPrimary, h5 } from '@salutejs-ds/sdds_os'; +``` ### Использование ```jsx import React from 'react'; import styled from 'styled-components'; -import { textAccent, backgroundPrimary, textL } from '@salutejs/sdds-themes/tokens'; +import { textAccent, backgroundPrimary, textL } from '@salutejs-ds/sdds_os'; const AppStyled = styled.div` padding: 2rem; diff --git a/packages/sdds-os/README.mdx b/packages/sdds-os/README.mdx index 2c8a1c75b68..9095a9e9b44 100644 --- a/packages/sdds-os/README.mdx +++ b/packages/sdds-os/README.mdx @@ -1,256 +1,6 @@ -# SDDS-OS +import { Meta, Markdown } from "@storybook/addon-docs/blocks"; +import ReadmeMd from './README.md?raw'; -Набор компонентов и утилит для создания web-приложений на базе [ReactJS](https://reactjs.org/). + -## Использование - -Библиотека реализована с помощью: - -- [typescript](https://www.typescriptlang.org/) -- [styled-components](https://styled-components.com/) (рекомендуем использовать версию `5.3.1`) - -Однако их использование **необязательно**! - -### Установка зависимостей - -```bash -$ npm install --save @salutejs/sdds-os @salutejs/sdds-themes -``` - -Для работы со `styled-components`, необходимо установить - -```bash -$ npm install --save styled-components@5.3.1 -``` - -### Использование компонентов - -Все компоненты доступны напрямую из пакета - -```jsx -import styled from 'styled-components'; -import { Button } from '@salutejs/sdds-os'; -import { textAccent } from '@salutejs/sdds-themes/tokens'; - -export const App = () => { - const StyledP = styled.p` - color: ${textAccent}; - `; - - return ( - <> - - Token usage example - - ); -}; -``` - -Так же библиотека поставляет компоненты собранные с помощью `styled-components` - -```js -import { Button } from '@salutejs/sdds-os/styled-components'; -``` - -## Подключение шрифтов - -Типографическая система основана на фирменных шрифтах. - -Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN** - -Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме. - -### Create react app - -Добавить внутрь тега `head`. - -```html - - - - - Wep App - - - ... - - -``` - -### NextJs - -```tsx -import Head from 'next/head'; - -import { H2, Button } from '@salutejs/sdds-os'; - -export default function Home() { - return ( - <> - - Create Next App with sdds-os components - - - -
-
-
-

Salute

-
-
-
- - ); -} -``` - -## Подключение темы - -Точкой входа является корень приложения: - -- Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`. -- Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем. - -### CSS - -Возможные дополнительные настройки bundle tools для проекта: - - - -В файле, где происходит подключение всех стилей, например `index.css` - -```css -@import '@salutejs/sdss-themes/css/sdds_serv__dark.css'; -``` - -```jsx -import React from 'react'; -import { Button, BodyL } from '@salutejs/sdds-os'; - -import 'index.css'; - -const App = () => { - return ( - <> - Hello world -