Package Exports

@consta/uikit/Avatar
@consta/uikit/Avatar/index.js
@consta/uikit/Badge
@consta/uikit/Badge/index.js
@consta/uikit/Button
@consta/uikit/Button/index.js
@consta/uikit/Card
@consta/uikit/Card/index.js
@consta/uikit/Checkbox
@consta/uikit/Checkbox/index.js
@consta/uikit/ChoiceGroup
@consta/uikit/ChoiceGroup/index.js
@consta/uikit/Collapse
@consta/uikit/Collapse/index.js
@consta/uikit/ContextMenu
@consta/uikit/ContextMenu/index.js
@consta/uikit/DatePicker
@consta/uikit/DatePicker/index.js
@consta/uikit/IconAdd
@consta/uikit/IconAdd/index.js
@consta/uikit/IconAlert
@consta/uikit/IconAlert/index.js
@consta/uikit/IconAllDone
@consta/uikit/IconAllDone/index.js
@consta/uikit/IconArrowDown
@consta/uikit/IconArrowDown/index.js
@consta/uikit/IconArrowLeft
@consta/uikit/IconArrowLeft/index.js
@consta/uikit/IconArrowRight
@consta/uikit/IconArrowRight/index.js
@consta/uikit/IconBackward
@consta/uikit/IconBackward/index.js
@consta/uikit/IconBento
@consta/uikit/IconBento/index.js
@consta/uikit/IconCalendar
@consta/uikit/IconCalendar/index.js
@consta/uikit/IconCancel
@consta/uikit/IconCancel/index.js
@consta/uikit/IconCheck
@consta/uikit/IconCheck/index.js
@consta/uikit/IconClose
@consta/uikit/IconClose/index.js
@consta/uikit/IconCollapse
@consta/uikit/IconCollapse/index.js
@consta/uikit/IconConnection
@consta/uikit/IconConnection/index.js
@consta/uikit/IconCopy
@consta/uikit/IconCopy/index.js
@consta/uikit/IconDocFilled
@consta/uikit/IconDocFilled/index.js
@consta/uikit/IconDown
@consta/uikit/IconDown/index.js
@consta/uikit/IconEdit
@consta/uikit/IconEdit/index.js
@consta/uikit/IconExpand
@consta/uikit/IconExpand/index.js
@consta/uikit/IconFavorite
@consta/uikit/IconFavorite/index.js
@consta/uikit/IconForward
@consta/uikit/IconForward/index.js
@consta/uikit/IconHamburger
@consta/uikit/IconHamburger/index.js
@consta/uikit/IconLaptop
@consta/uikit/IconLaptop/index.js
@consta/uikit/IconLink
@consta/uikit/IconLink/index.js
@consta/uikit/IconMeatball
@consta/uikit/IconMeatball/index.js
@consta/uikit/IconMoon
@consta/uikit/IconMoon/index.js
@consta/uikit/IconRemove
@consta/uikit/IconRemove/index.js
@consta/uikit/IconRing
@consta/uikit/IconRing/index.js
@consta/uikit/IconSave
@consta/uikit/IconSave/index.js
@consta/uikit/IconSearch
@consta/uikit/IconSearch/index.js
@consta/uikit/IconSelect
@consta/uikit/IconSelect/index.js
@consta/uikit/IconSettings
@consta/uikit/IconSettings/index.js
@consta/uikit/IconSun
@consta/uikit/IconSun/index.js
@consta/uikit/IconTop
@consta/uikit/IconTop/index.js
@consta/uikit/IconWarning
@consta/uikit/IconWarning/index.js
@consta/uikit/IconYoutube
@consta/uikit/IconYoutube/index.js
@consta/uikit/Informer
@consta/uikit/Informer/index.js
@consta/uikit/Loader
@consta/uikit/Loader/index.js
@consta/uikit/MixFocus
@consta/uikit/MixFocus/index.js
@consta/uikit/MixPopoverAnimate
@consta/uikit/MixPopoverAnimate/index.js
@consta/uikit/MixSpace
@consta/uikit/MixSpace/index.js
@consta/uikit/Modal
@consta/uikit/Modal/index.js
@consta/uikit/Popover
@consta/uikit/Popover/index.js
@consta/uikit/PortalWithTheme
@consta/uikit/PortalWithTheme/index.js
@consta/uikit/ProgressSpin
@consta/uikit/ProgressSpin/index.js
@consta/uikit/Select
@consta/uikit/Select/index.js
@consta/uikit/Sidebar
@consta/uikit/Sidebar/index.js
@consta/uikit/SnackBar
@consta/uikit/SnackBar/index.js
@consta/uikit/Switch
@consta/uikit/Switch/index.js
@consta/uikit/Table
@consta/uikit/Table/index.js
@consta/uikit/Tabs
@consta/uikit/Tabs/index.js
@consta/uikit/Text
@consta/uikit/Text/index.js
@consta/uikit/TextField
@consta/uikit/TextField/index.js
@consta/uikit/Theme
@consta/uikit/Theme/index.js
@consta/uikit/ThemeToggler
@consta/uikit/ThemeToggler/index.js
@consta/uikit/Tooltip
@consta/uikit/Tooltip/index.js
@consta/uikit/User
@consta/uikit/User/index.js
@consta/uikit/__internal__/src/components/Responses/createResponses
@consta/uikit/__internal__/src/components/Responses/createResponses.js
@consta/uikit/__internal__/src/utils/cnForCssTransition
@consta/uikit/__internal__/src/utils/cnForCssTransition.js
@consta/uikit/__internal__/src/utils/fabricIndex
@consta/uikit/__internal__/src/utils/fabricIndex.js
@consta/uikit/__internal__/src/utils/getByMap
@consta/uikit/__internal__/src/utils/getByMap.js
@consta/uikit/__internal__/src/utils/getGroups
@consta/uikit/__internal__/src/utils/getGroups.js
@consta/uikit/__internal__/src/utils/types/PropsWithAsAttributes
@consta/uikit/__internal__/src/utils/types/PropsWithAsAttributes.js
@consta/uikit/useBreakpoints
@consta/uikit/useBreakpoints/index.js
@consta/uikit/useClickOutside
@consta/uikit/useClickOutside/index.js
@consta/uikit/useComponentSize
@consta/uikit/useComponentSize/index.js
@consta/uikit/useDebounce
@consta/uikit/useDebounce/index.js
@consta/uikit/useFlag
@consta/uikit/useFlag/index.js
@consta/uikit/useForkRef
@consta/uikit/useForkRef/index.js
@consta/uikit/useHideElementsInLine
@consta/uikit/useHideElementsInLine/index.js
@consta/uikit/useMutableRef
@consta/uikit/useMutableRef/index.js
@consta/uikit/useRefs
@consta/uikit/useRefs/index.js
@consta/uikit/useResizeObserved
@consta/uikit/useResizeObserved/index.js
@consta/uikit/useThemeVars
@consta/uikit/useThemeVars/index.js
@consta/uikit/withTooltip
@consta/uikit/withTooltip/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@consta/uikit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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

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

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

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

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

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

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

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

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

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

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

yarn add @consta/uikit

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

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

import React from 'react';
import { Theme, presetGpnDefault } from '@consta/uikit/Theme';
import { Button } from '@consta/uikit/Button';

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

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

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

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

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

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

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

Лицензия

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