# Библиотека компонентов Plasma UI

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

<p>
  <img width="800" src="https://user-images.githubusercontent.com/1813468/98609687-ea20fc80-22fe-11eb-8d84-cd26385f01ed.png" alt="plasma-ui" />
</p>

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

Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);

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

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

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

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

```bash
$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons
```

### Настройка

Подключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:

```jsx
// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';

// Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import { darkSber } from '@salutejs/plasma-tokens/themes';

import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@salutejs/plasma-tokens';

const DocumentStyle = createGlobalStyle`
    html:root {
        min-height: 100vh;
        color: ${text};
        background-color: ${background};
        background-image: ${gradient};
    }
`;

const ThemeStyle = createGlobalStyle(darkSber);

export const GlobalStyle = () => (
    <>
        <DocumentStyle />
        <ThemeStyle />
    </>
);
```

```jsx
// Типографика, имеющая размеры, зависимые от типа устройства
import { DeviceThemeProvider } from '@salutejs/plasma-ui/components/Device';
// Тема оформления (цветовая схема)
import { GlobalStyle } from './GlobalStyle';
import { App } from './App';

ReactDOM.render(
    <DeviceThemeProvider>
        <GlobalStyle />
        <App />
    </DeviceThemeProvider>,
    document.getElementById('root'),
);
```

> Подробнее о [стилях и типографике](https://github.com/salute-developers/plasma/tree/master/packages/plasma-tokens).

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

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

```jsx
// App.tsx
import { Container } from '@salutejs/plasma-ui/components/Grid';
import { Button } from '@salutejs/plasma-ui';

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

Библиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.
Пример импорта:

```jsx
import { animatedScrollToX } from '@salutejs/plasma-ui/utils';
import { addFocus } from '@salutejs/plasma-ui/mixins';
import { withAutoFocus } from '@salutejs/plasma-ui/hocs';
```

Подробнее можно ознакомиться на страницах документации по [hocs](https://bit.ly/412n7fY), [mixins](https://bit.ly/44mQvQT) и [utils](https://bit.ly/3w0POwr).

## Полезные ссылки:

Витрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).

[Документация](https://bit.ly/36MIrA0).

[Репозиторий](https://github.com/salute-developers/plasma).