0.313.0 • Published 5 months ago

@salutejs/sdds-clfd-auto v0.313.0

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Библиотека компонентов SDDS CLFD AUTO

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

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

Компоненты реализованы на typescript с помощью react , styled-components

Использование данного пакета предполагает установку зависимостей: react & react-dom;

Использование styled-components на проект необязательно, так же как и использование typescript.

Но для того чтобы компоненты работали корректно необходимо установить styled-components.

Установка пакета

$ npm install --save react react-dom
$ npm install --save @salutejs/sdds-clfd-auto @salutejs/plasma-typo @salutejs/plasma-themes

Так же надо установить пакет styled-components

$ npm install --save styled-components@5.3.1

Настройка при работе с пакетом styled-components

Создайте компонент для подключения глобальных стилей:

import { createGlobalStyle } from 'styled-components';
import { standard } from '@salutejs/plasma-typo';
import { plasma_b2c__light } from '@salutejs/plasma-themes';

const ThemeStyle = createGlobalStyle(plasma_b2c__light);
const TypoStyle = createGlobalStyle(standard);

export const GlobalStyle = () => (
    <>
        <ThemeStyle />
        <TypoStyle />
    </>
);

Корень приложения

В корне приложения вызовите компонент глобальных стилей GlobalStyle:

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

Для корректной работы server side rendering приложение нужно обернуть SSRProvider (доступен в sdds-clfd-auto);

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

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

// App.tsx
import { Button } from '@salutejs/sdds-clfd-auto';
import { textAccent } from '@salutejs/plasma-tokens/brands/sdds-clfd-auto';

export const App = () => {
    return (
        <>
            <Button>Hello, Plasma!</Button>

            <p style={{ color: textAccent }}>Token usage example</p>
        </>
    );
};
0.313.0

5 months ago

0.313.0-dev.0

6 months ago

0.312.0

6 months ago

0.312.0-dev.0

6 months ago

0.311.0-dev.0

6 months ago

0.310.1

6 months ago

0.310.0

6 months ago

0.310.0-dev.0

6 months ago

0.309.0

7 months ago

0.309.0-dev.0

7 months ago

0.308.0

7 months ago

0.308.0-dev.0

7 months ago

0.307.0

8 months ago

0.307.0-dev.0

8 months ago

0.306.0-dev.0

8 months ago

0.305.0-dev.0

8 months ago

0.304.0-dev.0

8 months ago

0.303.0-dev.0

8 months ago

0.302.1-dev.0

8 months ago

0.302.0-dev.0

8 months ago

0.301.0-dev.0

8 months ago

0.300.0-dev.0

8 months ago