Package Exports
- @salutejs/sdds-netology
- @salutejs/sdds-netology/es/index.js
- @salutejs/sdds-netology/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@salutejs/sdds-netology) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
SDDS-NETOLOGY
Набор компонентов и утилит для создания web-приложений на базе ReactJS.
Использование
Библиотека реализована с помощью:
- typescript
- styled-components (рекомендуем использовать версию
5.3.1)
Однако их использование необязательно!
Установка зависимостей
$ npm install --save @salutejs/sdds-netology @salutejs/plasma-themesДля работы со styled-components, необходимо установить
$ npm install --save styled-components@5.3.1Использование компонентов
Все компоненты доступны напрямую из пакета
import styled from 'styled-components';
import { Button } from '@salutejs/sdds-netology';
import { textAccent } from '@salutejs/plasma-themes/tokens';
export const App = () => {
const StyledP = styled.p`
color: ${textAccent};
`;
return (
<>
<Button>Hello, Plasma!</Button>
<StyledP>Token usage example</StyledP>
</>
);
};Так же библиотека поставляет компоненты собранные с помощью styled-components
import { Button } from '@salutejs/sdds-netology/styled-components';Подключение шрифтов
Типографическая система основана на фирменных шрифтах.
Для того чтобы шрифт было удобно поставлять в 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-netology';
export default function Home() {
return (
<>
<Head>
<title>Create Next App with sdds-netology 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 </H2>
<Button text="Hello" />
</div>
</main>
</div>
</>
);
}Подключение темы
Точкой входа является корень приложения:
- Если вы используете Create React App, делайте вызов внутри
src/index.tsx. - Если вы используете Next.js, создайте файл
pages/_app.tsxи подключите стили в нем.
CSS
Возможные дополнительные настройки bundle tools для проекта:
В файле, где происходит подключение всех стилей, например index.css
@import '@salutejs/plasma-themes/css/plasma_b2c__dark.css';import React from 'react';
import { Button, BodyL } from '@salutejs/sdds-netology';
import 'index.css';
const App = () => {
return (
<>
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;Styled-components
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/sdds-netology/styled-components';
import { plasma_b2c__light } from '@salutejs/plasma-themes';
const Theme = createGlobalStyle(plasma_b2c__light);
const App = () => {
return (
<>
<Theme />
<BodyL>Hello world</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/plasma-themes/tokens(подходит в большинстве случаев, т.к там лежит весь базовый набор токенов) - Непосредственно из темы
@salutejs/plasma-themes/tokens/plasma_b2c(следует использовать, когда необходимо импортировать уникальные токены, которые используются только в этой теме)
Использование
import React from 'react';
import styled from 'styled-components';
import { textAccent, backgroundPrimary, textL } from '@salutejs/plasma-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 world</span>
</Container>
</AppStyled>
);
};
export default App;Типографика
Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
import { BodyL, DsplL, H3 } from '@salutejs/sdds-netology';Токены типографики на примере компонента 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;