@salutejs/sdds-finai
v0.360.0
Published
Salute Design System / React UI kit for SDDS FinAI web applications
Readme
SDDS-FinAI
Набор компонентов и утилит для создания web-приложений на базе ReactJS.
Использование
Библиотека реализована с помощью:
- typescript
- styled-components (рекомендуем использовать версию
5.3.1) - emotion
- обычного
css(linaria)
По умолчанию пакет отдаёт сборку styled-components. Также доступны таргеты emotion и css.
Установка зависимостей
npm install --save @salutejs/sdds-finai @salutejs/sdds-themesДля работы со styled-components, необходимо установить
npm install --save [email protected]Или, если вы используете @emotion
npm install --save @emotion/styled @emotion/react @emotion/cssДля таргета css runtime CSS-in-JS не нужен.
Использование компонентов
Компоненты доступны из разных entry points:
import { Button } from '@salutejs/sdds-finai'; // styled-components (default)
import { Button } from '@salutejs/sdds-finai/emotion';
import { Button } from '@salutejs/sdds-finai/css';Пример со styled-components:
import styled from 'styled-components';
import { Button } from '@salutejs/sdds-finai';
import { textAccent } from '@salutejs/sdds-themes/tokens';
export const App = () => {
const StyledP = styled.p`
color: ${textAccent};
`;
return (
<>
<Button>Hello, FinAI!</Button>
<StyledP>Token usage example</StyledP>
</>
);
};@emotion
import { Button } from '@salutejs/sdds-finai/emotion';
import { textAccent } from '@salutejs/sdds-themes/tokens';
export const App = () => {
return (
<>
<Button>Hello, FinAI!</Button>
<p style={{ color: textAccent }}>Token usage example</p>
</>
);
};css
import { Button } from '@salutejs/sdds-finai/css';
import { textAccent } from '@salutejs/sdds-themes/tokens';
export const App = () => {
return (
<>
<Button>Hello, FinAI!</Button>
<p style={{ color: textAccent }}>Token usage example</p>
</>
);
};Подключение шрифтов
Типографическая система основана на фирменных шрифтах.
Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN
Для использования типографической системы необходимо загрузить два css файла в зависимости от используемых шрифтов в теме.
Create react app
Добавить внутрь тега 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"
/>
<title>Wep App</title>
</head>
<body>
...
</body>
</html>NextJs
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"
/>
</Head>
<div>
<main>
<div>
<H2> Salute FinAI </H2>
<Button text="Hello" />
</div>
</main>
</div>
</>
);
}Подключение темы
Точкой входа является корень приложения:
- Если вы используете Create React App, делайте вызов внутри
src/index.tsx. - Если вы используете Next.js, создайте файл
pages/_app.tsx/app/layout.tsxи подключите стили в нем.
С помощью styled-components
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/sdds-finai';
import { sdds_finai__light } from '@salutejs/sdds-themes';
const Theme = createGlobalStyle(sdds_finai__light);
const App = () => {
return (
<>
<Theme />
<BodyL>Hello FinAI</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;С помощью emotion
import React from 'react';
import { Global, css } from '@emotion/react';
import { Button, BodyL } from '@salutejs/sdds-finai/emotion';
import { sdds_finai__light } from '@salutejs/sdds-themes';
const themeStyle = css(sdds_finai__light);
const App = () => {
return (
<>
<Global styles={themeStyle} />
<BodyL>Hello FinAI</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;С помощью импорта css файла
import React from 'react';
import { Button, BodyL } from '@salutejs/sdds-finai/css';
import '@salutejs/sdds-themes/css/sdds_finai__light.css';
const App = () => {
return (
<>
<BodyL>Hello FinAI</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;Токены
Все css токены завернуты в js переменные для более удобного доступа:
/** Основной цвет текста */
export const textPrimary = 'var(--text-primary, #F5F5F5)';
/** Основной фон */
export const backgroundPrimary = 'var(--background-primary, #000000)';Способы подключения
Есть два пути импорта токенов:
- Из вертикали
@salutejs/sdds-themes/tokens(подходит в большинстве случаев, т.к там лежит весь базовый набор токенов) - Непосредственно из темы
@salutejs/sdds-themes/tokens/sdds-finai(следует использовать, когда необходимо импортировать уникальные токены, которые используются только в этой теме)
Использование
import React from 'react';
import styled from 'styled-components';
import { textAccent, backgroundPrimary, textL } from '@salutejs/sdds-themes/tokens';
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 FinAI</span>
</Container>
</AppStyled>
);
};
export default App;Типографика
Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
import { BodyL, DsplL, H3 } from '@salutejs/sdds-finai';Токены типографики на примере компонента DsplL
Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.
import { CSSObject } from 'styled-components';
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;