Введение
Plasma UI – библиотека с открытым исходным кодом, в которую входят компоненты дизайн-системы Plasma и вспомогательные утилиты для создания смартапов на React или в коде сценария с помощью разметки AML.
Библиотека написана на Typescript, а компоненты реализованы с применением styled-components.
#
УстановкаPlasma UI поддерживает версии React 16.8+ и styled-components 5.1+. Ее можно использовать в существующем проекте.
Установите React, ReactDOM и styled-components:
npm install react react-dom styled-components
Использовать styled-components и typescript в проекте не обязательно.
Установите библиотеку компонентов, библиотеку токенов и библиотеку иконок:
npm install @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons
#
НастройкаСоздайте компонент для подключения глобальных стилей и ротации цветовых тем:
import { createGlobalStyle } from 'styled-components';import { darkSber } from '@salutejs/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSberimport { text, // Цвет текста background, // Цвет подложки gradient, // Градиент} from '@salutejs/plasma-tokens';
const DocumentStyle = createGlobalStyle` html { color: ${text}; background-color: ${background}; background-image: ${gradient}; }`;const ThemeStyle = createGlobalStyle(darkSber);
export const GlobalStyle = () => ( <> <DocumentStyle /> <ThemeStyle /> </>);
#
Корень приложенияВ корне приложения вызовите компонент глобальных стилей GlobalStyle
,
а также с помощью DeviceThemeProvider
подключите типографическую систему:
- Если вы используете Create React App, делайте вызов внутри
src/index.tsx
. - Если вы используете Next.js, создайте файл
pages/_app.tsx
и подключите стили в нем.
Для корректной работы server side rendering приложение нужно обернуть SSRProvider
;
- Create React App
- Next.js
import { DeviceThemeProvider, SSRProvider } from '@salutejs/plasma-ui';import { GlobalStyle } from './GlobalStyle';import { App } from './App';
ReactDOM.render( <DeviceThemeProvider> <SSRProvider> <App /> <GlobalStyle /> </SSRProvider> </DeviceThemeProvider>, document.getElementById('root'),);
import type { AppProps } from 'next/app';import { DeviceThemeProvider, SSRProvider } from '@salutejs/plasma-ui';import { GlobalStyle } from './GlobalStyle';
function MyApp({ Component, pageProps }: AppProps) { return ( <DeviceThemeProvider> <SSRProvider> <Component {...pageProps} /> <GlobalStyle /> </SSRProvider> </DeviceThemeProvider> );}
export default MyApp;
Подробнее о стилях и типографике.
#
ИспользованиеНе смотря на то, что все компоненты доступны из папки components
,
рекомендуется использовать их напрямую из пакета.
Таким образом, обеспечивается работа tree shaking.
import { Container } from '@salutejs/plasma-ui/components/Grid';import { Button } from '@salutejs/plasma-ui';
export default function App() { return ( <Container> <Button>Hello, Plasma!</Button> </Container> );}
Библиотека предоставляет вспомогательную функциональность (utils
, mixins
, hocs
),
доступную в соответствующих директориях.
import { animatedScrollToX, addFocus, withAutoFocus } from '@salutejs/plasma-ui';
Подробную информацию ищите в документации по hocs, mixins и utils.