Введение
Plasma Web – библиотека с открытым исходным кодом, в которую входят компоненты дизайн-системы Plasma и вспомогательные утилиты для создания веб-приложений на React.
Библиотека написана на Typescript, а компоненты реализованы с применением styled-components.
#
УстановкаPlasma Web поддерживает версии 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-web @salutejs/plasma-tokens-web @salutejs/plasma-icons
#
НастройкаСоздайте компонент для подключения глобальных стилей:
import { createGlobalStyle } from 'styled-components';import { standard } from '@salutejs/plasma-typo';import { light } from '@salutejs/plasma-tokens-web/themes';import { text, // Цвет текста background, // Цвет подложки gradient, // Градиент} from '@salutejs/plasma-tokens-web';
const DocumentStyle = createGlobalStyle` html { color: ${text}; background-color: ${background}; background-image: ${gradient}; }`;const ThemeStyle = createGlobalStyle(light);const TypoStyle = createGlobalStyle(standard);
export const GlobalStyle = () => ( <> <DocumentStyle /> <ThemeStyle /> <TypoStyle /> </>);
#
Корень приложенияВ корне приложения вызовите компонент глобальных стилей GlobalStyle
:
- Если вы используете Create React App, делайте вызов внутри
src/index.tsx
. - Если вы используете Next.js, создайте файл
pages/_app.tsx
и подключите стили в нем.
Для корректной работы server side rendering приложение нужно обернуть SSRProvider
;
- Create React App
- Next.js
import { SSRProvider } from '@salutejs/plasma-web';import { GlobalStyle } from './GlobalStyle';import { App } from './App';
ReactDOM.render( <SSRProvider> <App /> <GlobalStyle /> </SSRProvider>, document.getElementById('root'),);
import type { AppProps } from 'next/app';import { SSRProvider } from '@salutejs/plasma-web';import { GlobalStyle } from './GlobalStyle';
function MyApp({ Component, pageProps }: AppProps) { return ( <SSRProvider> <Component {...pageProps} /> <GlobalStyle /> </SSRProvider> );}
export default MyApp;
#
ИспользованиеНе смотря на то, что все компоненты доступны из папки components
,
рекомендуется использовать их напрямую из пакета.
Таким образом, обеспечивается работа tree shaking.
import { Container } from '@salutejs/plasma-web/components/Grid';import { Button } from '@salutejs/plasma-web';
export default function App() { return ( <Container> <Button>Hello, Plasma!</Button> </Container> );}
Библиотека предоставляет вспомогательную функциональность (utils
, mixins
, hocs
),
доступную в соответствующих директориях.
Подробную информацию ищите в документации по hocs, mixins и utils.