@sberdevices/ui
Advanced tools
Weekly downloads
Readme
Реализация компонентов для создания смартаппов.
Компоненты реализованы на typescript с помощью react и styled-components;
Использование данного пакета предполагает использование react
& react-dom
;
Использование styled-components
на проект не обязательно, также как и использование typescript
.
Но для того чтобы комопненты работали styled-components
необходимо установить.
$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc
Подключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью DeviceThemeProvider
:
// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';
import { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import {
text, // Цвет текста
background, // Цвет подложки
gradient, // Градиент
} from '@sberdevices/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 />
</>
);
// index.tsx
import { DeviceThemeProvider } from '@sberdevices/ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства
import { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)
import { App } from './App';
ReactDOM.render(
<DeviceThemeProvider>
<GlobalStyle />
<App />
</DeviceThemeProvider>,
document.getElementById('root'),
);
Подробнее о стилях и типографике.
Все компоненты доступны из папки components
или напрямую из пакета:
// App.tsx
import { Container } from '@sberdevices/ui/components/Grid';
import { Button } from '@sberdevices/ui';
export const App = () => {
return (
<Container>
<Button>Hello, Plasma!</Button>
</Container>
);
};
Библиотека предоставляет вспомогательную функциональность - utils
, mixins
, hocs
, доступную в соответствующих директориях.
Пример импорта:
import { animatedScrollToX } from '@sberdevices/ui/utils';
import { addFocus } from '@sberdevices/ui/mixins';
import { withAutoFocus } from '@sberdevices/ui/hocs';
Подробнее можно ознакомиться на страницах документации по hocs, mixins и utils.
Витрина с компонентами Storybook.
FAQs
SberDevices Design System
The npm package @sberdevices/ui receives a total of 150 weekly downloads. As such, @sberdevices/ui popularity was classified as not popular.
We found that @sberdevices/ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.