@quark-uilib/components v1.25.0

Описание

Quark — это дизайн-система продуктов Гринатома. Правила, которых мы придерживались при разработке, легли в основу принципов дизайн-системы. 1) Простота: Мы стремимся к интуитивному взаимодействию пользователя с продуктом. 2) Отзывчивость: Интерфейс должен находиться в контакте с пользователем — отвечать на его вопросы и подсказывать верный путь. 3) Эффективность: Функциональность в приоритете над стилистикой. 4) Развитие: Мы совершенствуем нашу дизайн-систему каждый день.

В основе стилизации компонентов лежит styled-components

Поддержка браузеров

Быстрый старт

Установка

npm: npm i @quark-uilib/components

yarn: yarn add quark-uilib/components

Подключение стилей и шрифтов

import React from "react";
import "@quark-uilib/components/styles/index.css";

const App: React.FC = () => (
  <div>
     <...>
  </div>
)

Подключение в файле стилей

@import "~@quark-uilib/components/styles/index.css";

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

import { Button } from "@quark-uilib/components";

  <...>
    <Button viewType="primary">Кнопка</Button>
  <...>

Иконки

Для использования иконок - необходимо установить @quark-uilib/icons в свой проект.

Установка

npm i --save @quark-uilib/icons

Темизация

В библиотеке реализована возможность темизации компонентов. Компоненты используют в своих стилях переменные, заданные в дефолтной теме (import { LIGHT_THEME } from '@quark-uilib/components';), с помощью темизации значения данных переменных можно перезадать, тем самым изменив внешний вид компонентов. Механизм темизации позаимствован из styled-components.

Как внедрить темизацию в свой проект: 1) с помощью функции createTheme нужно создать новую тему. Для этого в функцию необходимо передать объект, с теми свойствами, которые вы хотите перезадать. Внутри себя createTheme смерджит заданные вами опции с дефолтной темой. 2) затем нужно импортировать компонент ThemeProvider из @quark-uilib/components или styled-components. В ThemeProvider вы можете обернуть тот компонент, который хотите стилизовать, или сразу целую часть приложения, тогда тема будет применена сразу к нескольким компонентам. 3) В ThemeProvider задайте параметр theme, в который передайте результат выполнения функции createTheme

Подробнее о механизме темизации можно прочесть здесь https://styled-components.com/docs/advanced. Возможен вариант, когда один ThemeProvider вложен в другой и так далее.

Примеры темизации:

import { ThemeProvider, createTheme, Button } from '@quark-uilib/components';

 render (
  <ThemeProvider theme={createTheme({ borderWidth: '4px', shape: { borderRadiusSmall: '5px' } })}>
  <Button view="rounded">Привет</Button>
  </ThemeProvider>
 );