@greenatom/components NPM

Описание

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 вложен в другой и так далее.