Библиотека компонентов для вертикали SDDS FINAI

Реализация компонентов для создания веб-приложений.

Компоненты реализованы с помощью React и поставляются в трёх вариантах:

на styled-components (по умолчанию),
на предсобранном CSS,
на emotion.

Установка

info

Требуются react и react-dom версии 16.13.1 или выше.

$ npm install --save react react-dom
$ npm install --save @salutejs/sdds-finai @sddsjs/sdds_finai

Дальнейшие шаги зависят от выбранного варианта поставки.

Для варианта на styled-components:

$ npm install --save styled-components@5.3.11

Для варианта на emotion:

$ npm install --save @emotion/styled @emotion/react

CSS-вариант дополнительных зависимостей не требует.

Варианты поставки

info

Вариант на styled-components является поставкой по умолчанию.

Один и тот же набор компонентов доступен из трёх точек входа:

Точка входа	Реализация	Дополнительные зависимости
`@salutejs/sdds-finai`	styled-components	`styled-components@5.3.11`
`@salutejs/sdds-finai/css`	предсобранный CSS	нет
`@salutejs/sdds-finai/emotion`	emotion	`@emotion/styled`, `@emotion/react`

import { Button } from '@salutejs/sdds-finai';
// или
import { Button } from '@salutejs/sdds-finai/css';
// или
import { Button } from '@salutejs/sdds-finai/emotion';

Beta-компоненты доступны из точки входа @salutejs/sdds-finai/beta. Подробнее — в разделе Beta.

Подключение шрифтов

info

Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN.

Типографическая система основана на фирменных шрифтах.

Для её использования, необходимо загрузить три css файла в зависимости от используемых шрифтов в теме.

html
NextJS

info

Если в качестве основы web-приложения вы используете create-react-app, вам необходимо изменить файл ./public/index.html.

Добавить внутрь тега head.

<html>
    <head>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css"
        />
        <title>Web App</title>
    </head>
    <body>
    ...
    </body>
</html>

info

Если в качестве основы web-приложения вы используете Next.js, добавьте ссылки на шрифты через next/head — например, в ./pages/index.tsx.

import Head from "next/head";

import { H2, Button } from "@salutejs/sdds-finai";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App with sdds-finai components</title>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css"
        />
      </Head>
      <div>
        <main>
            <div>
                <H2> SDDS FINAI </H2>
                <Button text="Hello" />
            </div>
        </main>
      </div>
    </>
  );
}

Подключение темы

Тема включает в себя цветовые и типографические токены и подключается один раз в корне приложения.

info

Точкой входа является корень приложения:

Если вы используете Create React App, делайте вызов внутри src/index.tsx.
Если вы используете Next.js, создайте файл pages/_app.tsx и подключите стили в нем.

Доступны светлая и тёмная темы — sdds_finai__light и sdds_finai__dark.

css
css-module
styled-components
emotion

import React from 'react';
import { Button, BodyL } from '@salutejs/sdds-finai/css';

import '@sddsjs/sdds_finai/css/sdds_finai__light.css';

const App = () => {
    return (
        <>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

Или подключите тему в файле, где собраны все стили приложения, например index.css

@import '@sddsjs/sdds_finai/css/sdds_finai__light.css';

import React from 'react';
import { Button, BodyL } from '@salutejs/sdds-finai/css';

import styles from '@sddsjs/sdds_finai/css/sdds_finai.module.css';

const App = () => {
    return (
        <div className={styles.light}>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </div>
    );
};

export default App;

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/sdds-finai';
import { sdds_finai__light } from '@sddsjs/sdds_finai';

const Theme = createGlobalStyle(sdds_finai__light);

const App = () => {
    return (
        <>
            <Theme />
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

import React from 'react';
import { Global, css } from '@emotion/react';
import { Button, BodyL } from '@salutejs/sdds-finai/emotion';
import { sdds_finai__light } from '@sddsjs/sdds_finai';

const themeStyle = css(sdds_finai__light);

const App = () => {
    return (
        <>
            <Global styles={themeStyle} />
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

Переключение тем

css
css-module
styled-components
emotion

import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/sdds-finai/css';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = theme;
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.css

@import '@sddsjs/sdds_finai/css/sdds_finai.module.css';

import React, { useLayoutEffect, useState } from 'react';

import { Switch } from '@salutejs/sdds-finai/css';
import webThemes from '@sddsjs/sdds_finai/css/sdds_finai.module.css';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = webThemes[theme];
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

import React, { useState } from 'react';
import { createGlobalStyle } from 'styled-components';

import { Switch } from '@salutejs/sdds-finai';
import { sdds_finai__light, sdds_finai__dark } from '@sddsjs/sdds_finai';

const LightTheme = createGlobalStyle(sdds_finai__light);
const DarkTheme = createGlobalStyle(sdds_finai__dark);

const App = () => {
    const [theme, setTheme] = useState('light');

    return (
        <>
            {theme === 'light' ? <LightTheme /> : <DarkTheme />}

            <div className="wrapper">
                <Switch
                    label={`app theme: ${theme}`}
                    onChange={() => {
                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                    }}
                />
            </div>
        </>
    );
};

export default App;

import React, { useState } from 'react';
import { Global, css } from '@emotion/react';

import { Switch } from '@salutejs/sdds-finai/emotion';
import { sdds_finai__light, sdds_finai__dark } from '@sddsjs/sdds_finai';

const lightThemeStyle = css(sdds_finai__light);
const darkThemeStyle = css(sdds_finai__dark);

const App = () => {
    const [theme, setTheme] = useState('light');

    return (
        <>
            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />

            <div className="wrapper">
                <Switch
                    label={`app theme: ${theme}`}
                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
                />
            </div>
        </>
    );
};

export default App;

Использование компонентов

Все компоненты доступны напрямую из пакета:

import { Button, BodyL } from '@salutejs/sdds-finai';

export const App = () => {
    return (
        <>
            <BodyL>Hello, SDDS FINAI!</BodyL>
            <Button>Кнопка</Button>
        </>
    );
};

Использование токенов

Все css токены завернуты в js переменные для более удобного доступа:

/** Основной цвет текста */
export const textPrimary = 'var(--text-primary, #F5F5F5)';
/** Основной фон */
export const backgroundPrimary = 'var(--background-primary, #000000)';

Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.

/** Токены типографики для компонента DsplL */
export const dsplL = ({
    fontFamily: 'var(--plasma-typo-dspl-l-font-family)',
    fontSize: 'var(--plasma-typo-dspl-l-font-size)',
    fontStyle: 'var(--plasma-typo-dspl-l-font-style)',
    fontWeight: 'var(--plasma-typo-dspl-l-font-weight)',
    letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)',
    lineHeight: 'var(--plasma-typo-dspl-l-line-height)',
} as unknown) as CSSObject;

Все токены темы импортируются из @sddsjs/sdds_finai.

Пример использования:

import React from 'react';
import styled from 'styled-components';
import { textAccent, backgroundPrimary, textL } from '@sddsjs/sdds_finai';

const AppStyled = styled.div`
    padding: 2rem;
    color: ${textAccent};
    background-color: ${backgroundPrimary};
`;

const Container = styled.div`
    ${textL};
    margin: 1rem;
`;

const App = () => {
    return (
        <AppStyled>
            <Container>
                <span>Hello world</span>
            </Container>
        </AppStyled>
    );
};

export default App;

Что дальше

Подробные руководства собраны в разделе «Руководства»:

Работа с Next — RSC, 'use client', transpilePackages
Как работать с MCP — актуальная документация для AI-агентов
Как работать с иконками
Поддержка React 16, 17 — SSRProvider
FAQ

Установка​

Варианты поставки​

Подключение шрифтов​

Подключение темы​

Переключение тем​

Использование компонентов​

Использование токенов​

Что дальше​

Установка

Варианты поставки

Подключение шрифтов

Подключение темы

Переключение тем

Использование компонентов

Использование токенов

Что дальше