Дизайн-система Quple | Библиотека интерфейсных компонентов

Quple — дизайн-система для разработки интерфейсов, написана на React.

В дизайн-систему входит несколько библиотек. Здесь — библиотека интерфейсных компонентов: простые контролы, сложные блоки, темы и хуки. Все библиотеки представлены в виде компонентов и макетов в Figma.

Что входит в дизайн-систему

Библиотека компонентов

Репозиторий | NPM | Документация и стенд | Макеты

Библиотека графиков

Репозиторий | NPM | Документация и стенд | Макеты

>> Посмотреть все библиотеки

Подробности — на на сайте дизайн-системы Consta

Следите за новостями и релизами в телеграм-канале дизайн-системы

Как использовать

Установите пакет

yarn add @quple-pos/uikit

Начните работу с библиотекой

Чтобы начать работу с библиотекой интерфейсных компонентов, подключите тему:

import React from 'react';
import { Theme, presetGpnDefault } from '@quple-pos/uikit/Theme';
import { Button } from '@quple-pos/uikit/Button';

const App = () => (
  <Theme preset={presetGpnDefault}>
    <Button label="Кнопка" />
  </Theme>
);

Что такое темы и как с ними работать

Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

Вперёд, к стенду

Разработка

Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

$ yarn install

Основные команды

# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте инструкцию для контрибьюторов.

Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой лицензии MIT.