@greenatom/components

Описание

Quark — это дизайн-система продуктов Гринатома.
Правила, которых мы придерживались при разработке, легли в основу принципов дизайн-системы.

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

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

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

Firefox	Chrome	Safari
Последние 2 версии	Последние 2 версии	Последние 2 версии

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

Установка

npm:
npm i @greenatom/components

yarn:
yarn add greenatom/components

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

Выберите один из вариантов подключения стилей. ### Подключение стилей в корне проекта

import React from "react";
import "@greenatom/components/styles/index.css";

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

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

@import "~@greenatom/components/styles/index.css";

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

import { Button } from "@greenatom/components";

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

Иконки

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

Установка

npm i --save @greenatom/icons

Темизация

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

Как внедрить темизацию в свой проект:

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

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

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

import { ThemeProvider, createTheme, Button } from '@greenatom/components';

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