diff --git a/.eslintrc.js b/.eslintrc.js index 6f61fb9..94d0512 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -31,7 +31,6 @@ module.exports = { 'import', 'jsx-a11y', 'react-hooks', - '@typescript-eslint', 'simple-import-sort', 'prettier', ], diff --git a/package.json b/package.json index 4ee6969..24d3a4a 100644 --- a/package.json +++ b/package.json @@ -194,7 +194,7 @@ "@consta/charts": "^1.0.0", "@consta/header": "^3.0.0", "@consta/icons": "^1.0.0", - "@consta/stand": "^0.0.141", + "@consta/stand": "0.0.139-beta", "@consta/uikit": "^5.0.0", "@consta/widgets-utils": "^0.2.15", "@evless/react-textfit": "1.1.1", diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 735a31a..b06b5c2 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,4 +1,5 @@ .portal--Header { + z-index: 1000; display: flex; justify-content: space-between; align-items: center; diff --git a/src/containers/HeaderContainer/HeaderContainer.tsx b/src/containers/HeaderContainer/HeaderContainer.tsx index 1bdd375..a64545d 100644 --- a/src/containers/HeaderContainer/HeaderContainer.tsx +++ b/src/containers/HeaderContainer/HeaderContainer.tsx @@ -8,16 +8,9 @@ import React, { useEffect, useRef } from 'react'; import { HeaderFlexible } from '##/components/HeaderFlexible/HeaderFlexible'; import IconComponent from '##/icons/Component.icon.svg'; -import IconFigma from '##/icons/FigmaSmall.icon.svg'; -import IconGithub from '##/icons/GithubSmall.icon.svg'; import IconTelegram from '##/icons/TelegramSmall.icon.svg'; import ConstaLogo from '##/images/ConstaLogo2.image.svg'; -import { - constaGitHub, - constaTelegram, - contsaCommunityFigma, - gazPromNeft, -} from '##/modules/api/links'; +import { constaTelegram, gazPromNeft } from '##/modules/api/links'; import { fixedAtom } from '##/modules/header'; import { cn } from '##/utils/bem'; @@ -64,18 +57,6 @@ export const HeaderContainer: React.FC = () => { icon: IconComponent, onlyIcon: false, }, - { - label: 'Figma', - link: contsaCommunityFigma, - icon: IconFigma, - onlyIcon: false, - }, - { - label: 'GitHub', - link: constaGitHub, - icon: IconGithub, - onlyIcon: false, - }, { label: 'Новости в Telegram', link: constaTelegram, diff --git a/src/docs/FAQ/faq.stand.mdx b/src/docs/FAQ/faq.stand.mdx index f743c88..eebe793 100644 --- a/src/docs/FAQ/faq.stand.mdx +++ b/src/docs/FAQ/faq.stand.mdx @@ -38,10 +38,8 @@ import { MdxCollapse } from '@consta/stand/src/componets/MdxCollapse';
**Заявки на доработки (issues)**
-- [Список](https://github.com/consta-design-system/uikit/issues) - [Доска](https://github.com/consta-design-system/uikit/projects/1)
**Задачи в работе (PR)** -
- [PR](https://github.com/consta-design-system/uikit/pulls) @@ -58,9 +56,8 @@ import { MdxCollapse } from '@consta/stand/src/componets/MdxCollapse';
**Как отправить запрос:**
-- Создайте [issue](https://github.com/consta-design-system/uikit/issues/new). - Подробно -опишите, какие возможности нужно добавить и какие задачи они будут решать. - Делайте -отдельный issue для каждой доработки. +- Подробно опишите, какие возможности нужно добавить и какие задачи они будут решать. +- Делайте отдельный issue для каждой доработки.
[Подробнее о постановке задач](##LIBS.LIB.STAND/lib:portal/stand:custom-issue)
@@ -75,7 +72,6 @@ import { MdxCollapse } from '@consta/stand/src/componets/MdxCollapse'; Для тех, кто договорился с командой Consta о внесении своих доработок.
-Отправьте PR в ветку dev в один из наших [репозиториев](https://github.com/consta-design-system). Подробную информацию, о том, как правильно оформить PR и работать над дизайн-системой совместно с командой Consta читайте в [инструкции для контрибьюторов](##LIBS.LIB.STAND/lib:portal/stand:contributers-addcomponent) @@ -87,14 +83,12 @@ import { MdxCollapse } from '@consta/stand/src/componets/MdxCollapse';
- [Как создать и автоматически генерировать иконки из SVG](##LIBS.LIB.STAND.TAB/lib:portal/stand:custom-addicons/tab:dev) -- [Как добавить новые иконки в библиотеки в Figma и в код](##LIBS.LIB.STAND.TAB/lib:portal/stand:custom-addicons/tab:design)
Если вы хотите отправить команде дизайн-системы запрос на добавление новой иконки, действуйте по следующей схеме: -1. Создайте [issue](https://github.com/consta-design-system/uikit/issues/new). -2. Подробно опишите, какая нужна иконка (приложите референсы). -3. Можно также добавить запрос на иконку в комментарии под этим [постом](https://t.me/consta_ui_releases/499). +1. 2. Подробно опишите, какая нужна иконка (приложите референсы). +2. Можно также добавить запрос на иконку в комментарии под этим [постом](https://t.me/consta_ui_releases/499). diff --git a/src/docs/aboutConsta/aboutConsta.stand.mdx b/src/docs/aboutConsta/aboutConsta.stand.mdx index 1c175e0..26c9e6a 100644 --- a/src/docs/aboutConsta/aboutConsta.stand.mdx +++ b/src/docs/aboutConsta/aboutConsta.stand.mdx @@ -2,9 +2,7 @@ import { MdxMenu } from '@consta/stand'; Дизайн-система Consta — это набор библиотек готовых интерфейсных компонентов для создания цифровых продуктов и сервисов любого уровня сложности. -Наша дизайн-система состоит из нескольких библиотек компонентов с документацией на русском языке. Компоненты реализованы в двух форматах: для разработчиков ― в виде [репозитория](https://github.com/consta-design-system) с открытым исходным кодом на React и для дизайнеров — в виде библиотек в [Figma Community](https://www.figma.com/@Consta). - -Consta распространяется бесплатно по [лицензии MIT](https://github.com/consta-design-system/uikit/blob/master/LICENSE). +Наша дизайн-система состоит из нескольких библиотек компонентов с документацией на русском языке. ## Принципы дизайн-системы @@ -26,7 +24,7 @@ Consta предлагает готовые блоки, большой набор ## Технологии -Дизайн-система построена по принципам [БЭМ-методологии](https://ru.bem.info/), на основе библиотеки [whitepaper](https://github.com/whitepapertools). Библиотеки компонентов дизайн-системы существуют в React-реализации. +Библиотеки компонентов дизайн-системы существуют в React-реализации. ### Технологический стек: @@ -34,8 +32,6 @@ Consta можно использовать при создании проект - [React](https://reactjs.org/) - [Typescript](https://www.typescriptlang.org/) -- PostCSS ([postcss-nested](https://github.com/postcss/postcss-nested), [postcss-color-function](https://github.com/postcss/postcss-color-function), [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars) для media-query) -- [whitepaper](https://github.com/whitepapertools) Библиотеки рассчитаны на браузеры семейства Chromium. diff --git a/src/docs/addComponent/addComponent.stand.mdx b/src/docs/addComponent/addComponent.stand.mdx index 1dc72da..17062e9 100644 --- a/src/docs/addComponent/addComponent.stand.mdx +++ b/src/docs/addComponent/addComponent.stand.mdx @@ -16,9 +16,7 @@ import { Это зависит от состояния, в котором находится новый компонент. -- **Есть только идея** — поставьте [задачу](https://github.com/consta-design-system/uikit/issues). - **Готов дизайн** — отправьте ссылку на макет, в задаче или на почту. -- **Готов код компонента** — [отправьте PR](https://github.com/consta-design-system/uikit/pulls). Если вы не знаете, как лучше отправить предложение или есть другие вопросы, напишите нам на почту design@gazprom-neft.ru. diff --git a/src/docs/addIcons/__stand__/addIcons.design.stand.mdx b/src/docs/addIcons/__stand__/addIcons.design.stand.mdx index da3f79f..d0cf658 100644 --- a/src/docs/addIcons/__stand__/addIcons.design.stand.mdx +++ b/src/docs/addIcons/__stand__/addIcons.design.stand.mdx @@ -51,12 +51,12 @@ import Export from './images/Export.image.png'; -- Готовая иконка должна быть одним [шейпом](https://figma.community/blog/dlya-chego-sluzhit-instrument-shape-tool-v-figma.php) с заливкой. Чтобы объединить фигуры, составляющие иконки: +Чтобы объединить фигуры, составляющие иконки: - 1. Выберите объекты для объединения. - 2. На верхней панели нажмите значок объединения. - 3. В раскрывшемся списке выберите подходящий вариант объединения. - 4. Нажмите **Flatten selection**. +1. Выберите объекты для объединения. +2. На верхней панели нажмите значок объединения. +3. В раскрывшемся списке выберите подходящий вариант объединения. +4. Нажмите **Flatten selection**. - Выровняйте координаты точек фигур иконки по пиксельной сетке. @@ -83,12 +83,10 @@ import Export from './images/Export.image.png'; ### Подготовка SVG -1. Экспортируйте иконки из Figma в формате SVG. +1. - - -2. Откройте файл SVG в редакторе кода или текстовом редакторе (например, Блокнот или TextEdit) -3. Удалите атрибуты `fill`, `fillOpacity`, `width`, `height`. Это нужно для адаптации иконки к размеру компонента или теме. +2. Откройте файл SVG в редакторе кода или текстовом редакторе (например, Блокнот или TextEdit) +3. Удалите атрибуты `fill`, `fillOpacity`, `width`, `height`. Это нужно для адаптации иконки к размеру компонента или теме. Пример кода готовой иконки: @@ -105,11 +103,10 @@ import Export from './images/Export.image.png'; Вы можете задать свойства для рендера иконки:: -| Свойство | Тип | По умолчанию | Описание | -| -------------- | ------------------ | ------------ | ----------------------------------------------- | -| `color?` | `mono`, `multiple` | `mono` | Цветность иконки | -| `group?` | - | - | Группа иконки на стенде | -| `withoutSvgo?` | `boolean` | - | Выключить [`svgo`](https://github.com/svg/svgo) | +| Свойство | Тип | По умолчанию | Описание | +| -------- | ------------------ | ------------ | ----------------------- | +| `color?` | `mono`, `multiple` | `mono` | Цветность иконки | +| `group?` | - | - | Группа иконки на стенде | Например, так будет выглядеть код со свойствами `color?` и `group?`: @@ -127,10 +124,10 @@ import Export from './images/Export.image.png'; ### Добавление изменений в репозиторий Consta -1. Клонируйте [репозиторий @consta/uikit](https://github.com/consta-design-system/uikit) на GitHub: +1. ```bash -git clone https://github.com/consta-design-system/uikit.git + ``` 2. Создайте новую ветку: @@ -162,6 +159,5 @@ git push ### Создание Pull request -1. Перейдите на [GitHub](https://github.com/consta-design-system/uikit), найдите свою ветку и нажмите **New pull request**. -2. Выберите в первом селекте ветку **dev**, во втором свою. И заполните всё, что сможете. -3. Готово! Когда мы примем ваш пулреквест, иконки будут добавлены в библиотеку. +1. 2. Выберите в первом селекте ветку **dev**, во втором свою. И заполните всё, что сможете. +2. Готово! Когда мы примем ваш пулреквест, иконки будут добавлены в библиотеку. diff --git a/src/docs/addIcons/__stand__/addIcons.dev.stand.mdx b/src/docs/addIcons/__stand__/addIcons.dev.stand.mdx index b013405..994acba 100644 --- a/src/docs/addIcons/__stand__/addIcons.dev.stand.mdx +++ b/src/docs/addIcons/__stand__/addIcons.dev.stand.mdx @@ -1,6 +1,6 @@ import { MdxMenu } from '@consta/stand'; -Это инструкция по созданию и автоматической генерации иконок из SVG. Чтобы узнать, как добавить иконку в Figma, загляните в [эту инструкцию](##LIBS.LIB.STAND.TAB/lib:portal/stand:contributers-addicons/tab:design) +Это инструкция по созданию и автоматической генерации иконок из SVG. diff --git a/src/docs/addIcons/__stand__/addIcons.stand.mdx b/src/docs/addIcons/__stand__/addIcons.stand.mdx index b52c6d3..fe15bca 100644 --- a/src/docs/addIcons/__stand__/addIcons.stand.mdx +++ b/src/docs/addIcons/__stand__/addIcons.stand.mdx @@ -1,6 +1,5 @@ В дизайн-системе есть большая библиотека иконок: -- [Макеты иконок в библиотеке Consta Graphics](https://www.figma.com/community/file/855772200870304447) (во вкладке **Icons**) - [Иконки в коде](##LIBS.LIB/lib:icons) Если готовых иконок недостаточно, вы можете сделать свои и добавить их в дизайн-систему. diff --git a/src/docs/code/code.stand.mdx b/src/docs/code/code.stand.mdx index 73b3e2a..f92c391 100644 --- a/src/docs/code/code.stand.mdx +++ b/src/docs/code/code.stand.mdx @@ -63,7 +63,6 @@ export const Component: React.FC = ({ data }) => { Требования к иконками в UI-ките: - Для каждого размера иконки нужно использовать отдельное изображение. -- Все иконки в библиотеке должны соответствовать типу `IconComponent` ([посмотреть тип `IconComponent`](https://github.com/consta-design-system/uikit/blob/master/src/icons/Icon/Icon.tsx#L36)). Если в API компонента используются иконки, стоит указывать тип `IconComponent`. diff --git a/src/docs/colorPalette/colorPalette.stand.mdx b/src/docs/colorPalette/colorPalette.stand.mdx index eb60edc..5380b93 100644 --- a/src/docs/colorPalette/colorPalette.stand.mdx +++ b/src/docs/colorPalette/colorPalette.stand.mdx @@ -51,22 +51,10 @@ import { MdxMenu } from '@consta/stand'; # Как настроить палитру -По умолчанию в дизайн-системе Consta доступно три цветовые схемы: светлая (Default), тёмная (Dark) и акцентная (Display). За каждую отвечает свой макет в Figma и CSS-файл. - - - -- [Consta Default Colors](https://www.figma.com/community/file/855572288089401017/consta-default-colors) -- [Consta Dark Colors](https://www.figma.com/community/file/855572445137814202/consta-dark-colors) -- [Consta Display Colors](https://www.figma.com/community/file/855572769860808379/consta-display-colors) +По умолчанию в дизайн-системе Consta доступно три цветовые схемы: светлая (Default), тёмная (Dark) и акцентная (Display). - - -- [Theme_color_gpnDefault.css](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDefault.css) -- [Theme_color_gpnDark.css](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDark.css) -- [Theme_color_gpnDisplay.css](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDisplay.css) - Это готовые темы, которые уже настроены и доступны в Consta, но вы можете создавать неограниченное количество цветовых схем. @@ -76,7 +64,6 @@ import { MdxMenu } from '@consta/stand'; > Этот способ будет полезен: > > - разработчикам, -> - дизайнерам на этапе просмотра составных цветов и переноса их значений в Figma. Проще всего создать свою цветовую палитру в [Конструкторе тем](##THEME_CONSTRUCTOR). Так вы сможете отслеживать результат изменений в режиме реального времени и скачивать темы с нужными цветами в формате CSS или JSON. @@ -86,26 +73,21 @@ import { MdxMenu } from '@consta/stand'; ### Разработчикам -1. Выберите тему, которую хотите кастомизировать: [светлую](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDefault.css), [темную](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDark.css) или [акцентную](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_color/Theme_color_gpnDisplay.css). -2. Скачайте файл с выбранной темой с GitHub. -3. Определите базовые цвета. -4. Запишите коды базовых цветов в соответствующий CSS-файл. -5. Значения дополнительных цветов внутри CSS-класса рассчитаются с помощью [postcss-color-function](https://github.com/postcss/postcss-color-function) и [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars). +1. 2. 3. Определите базовые цвета. +2. Запишите коды базовых цветов в соответствующий CSS-файл. +3. ### Дизайнерам -1. Выберите тему, которую нужно кастомизировать: [светлую](https://www.figma.com/community/file/855572288089401017/consta-default-colors), [темную](https://www.figma.com/community/file/855572445137814202/consta-dark-colors) или [акцентную](https://www.figma.com/community/file/855572769860808379/consta-display-colors).. -2. Создайте копию файла библиотеки в Figma. -3. Определите базовые цвета. -
- {' '} - > Составные цвета в макете Figma не будут изменены автоматически. Чтобы посмотреть - составные цвета, воспользуйтесь [конструктором тем](##THEME_CONSTRUCTOR). -
-4. Отредактируйте стиль каждого цветового значения в соответствии с рассчитанными в конструкторе значениями. -5. Напишите коды базовых цветов разработчику или самостоятельно пропишите их в соответствующий CSS-файл. -6. Значения дополнительных цветов внутри CSS-класса рассчитаются с помощью [postcss-color-function](https://github.com/postcss/postcss-color-function) и [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars). -7. Готово, вы создали цветовую палитру для вашего проекта. +1. 2. 3. Определите базовые цвета. + {' '} +
+ {' '} + Чтобы посмотреть составные цвета, воспользуйтесь [конструктором тем](##THEME_CONSTRUCTOR). +
+2. Отредактируйте стиль каждого цветового значения в соответствии с рассчитанными в конструкторе значениями. +3. Напишите коды базовых цветов разработчику или самостоятельно пропишите их в соответствующий CSS-файл. +4. 7. Готово, вы создали цветовую палитру для вашего проекта. # Полезные ссылки diff --git a/src/docs/commits/commits.stand.mdx b/src/docs/commits/commits.stand.mdx index bda25c7..a6b3ad5 100644 --- a/src/docs/commits/commits.stand.mdx +++ b/src/docs/commits/commits.stand.mdx @@ -8,7 +8,7 @@ `Подробное описание (опционально)` -В проекте используется [commitizen](http://commitizen.github.io/cz-cli/), который позволяет автоматизировать форматирование имен коммитов. Запускается при вызове `git commit`. +Запускается при вызове `git commit`. ## Тип коммита diff --git a/src/docs/componentGuide/componentGuide.stand.mdx b/src/docs/componentGuide/componentGuide.stand.mdx index cdc86e5..1f88015 100644 --- a/src/docs/componentGuide/componentGuide.stand.mdx +++ b/src/docs/componentGuide/componentGuide.stand.mdx @@ -14,7 +14,7 @@ import image11 from './images/component_guide11.png'; import image12 from './images/component_guide12.png'; Мы разрабатываем компоненты в едином подходе, чтобы повысить масштабируемость и удобство использования дизайн-системы. -Для синхронизации кода и дизайна, структура и свойства компонентов описываются по методологии БЭМ. В этом гайде представлена надстройка над методологией, которая позволяет оптимизировать производительность компонентов в Figma. Мы используем последние нововведения Figma, чтобы дизайнеры могли ещё быстрее настраивать компоненты на своих проектах. +Для синхронизации кода и дизайна, структура и свойства компонентов описываются по методологии БЭМ. @@ -49,7 +49,7 @@ import image12 from './images/component_guide12.png'; ## Что такое БЭМ -БЭМ (Блок-Элемент-Модификатор) — методология разработки компонентов страниц. Мы используем эту методологию для того, чтобы компоненты в Figma и в коде были максимально синхронны. +БЭМ (Блок-Элемент-Модификатор) — методология разработки компонентов страниц. ### Блок — Компонент @@ -67,8 +67,7 @@ import image12 from './images/component_guide12.png'; ## Что такое ЧМК -Методология БЭМ хорошо ложится на код. Но если строго следовать ей при создании компонентов в Figma, то можно столкнуться с переизбытком вариантов. С таким компонентом сложнее работать: трудно найти или добавить новый вариант, падает производительность. -Поэтому в новом подходе мы предлагаем надстройку «ЧМК» — часть-модуль-компонент, которая не влияет на базовую методологию и код, но упрощает жизнь дизайнерам-создателям и пользователям дизайн-системы. +Методология БЭМ хорошо ложится на код. С таким компонентом сложнее работать: трудно найти или добавить новый вариант, падает производительность. Поэтому в новом подходе мы предлагаем надстройку «ЧМК» — часть-модуль-компонент, которая не влияет на базовую методологию и код, но упрощает жизнь дизайнерам-создателям и пользователям дизайн-системы. ### Часть @@ -88,19 +87,16 @@ import image12 from './images/component_guide12.png'; -Надстройку ЧМК мы используем в ситуациях, когда есть вероятность, что в компоненте будут сотни вариантов. [Посмотреть пример]() - -Компоненты с малым количеством элементов и внутренних состояний, мы делаем без частей и модулей. [Посмотреть пример]() - -Компоненты, собранные из базовых компонентов Consta UI-Kit мы всегда делаем с данной надстройкой. [Посмотреть пример]() - -Если необходимо, ступень с модулями можно пропускать. [Посмотреть пример]() +Надстройку ЧМК мы используем в ситуациях, когда есть вероятность, что в компоненте будут сотни вариантов. +Компоненты с малым количеством элементов и внутренних состояний, мы делаем без частей и модулей. +Компоненты, собранные из базовых компонентов Consta UI-Kit мы всегда делаем с данной надстройкой. +Если необходимо, ступень с модулями можно пропускать. ## Как собирать компонент ### Подготовка -В начале рекомендуем сформировать конечный образ компонента с максимальным количеством элементов. Можно сделать это как на бумаге, так и в Figma. На этом этапе не важны корректные Autolayout или наличие вариантов. +В начале рекомендуем сформировать конечный образ компонента с максимальным количеством элементов. На этом этапе не важны корректные Autolayout или наличие вариантов. @@ -143,8 +139,6 @@ import image12 from './images/component_guide12.png'; ## Рекомендации -**Используйте инструменты Figma** - Главный инструмент дизайнера при работе с компонентами — Component Properties. С его помощью создаются варианты-состояния и настраиваются свойства. **1. Boolean** diff --git a/src/docs/contribute/__stand__/contribute.design.stand.mdx b/src/docs/contribute/__stand__/contribute.design.stand.mdx index 5fbae02..b40bf85 100644 --- a/src/docs/contribute/__stand__/contribute.design.stand.mdx +++ b/src/docs/contribute/__stand__/contribute.design.stand.mdx @@ -1,4 +1,4 @@ -> Рассказываем, что делать, если вы хотите поучаствовать в создании библиотек дизайн-системы в Figma. Если вы разработчик, загляните в [гайд по контрибьютингу для разработчиков](##LIBS.LIB.STAND.TAB/lib:portal/stand:custom-contribute/tab:dev). +Если вы разработчик, загляните в [гайд по контрибьютингу для разработчиков](##LIBS.LIB.STAND.TAB/lib:portal/stand:custom-contribute/tab:dev). - [Формат совместной работы](#формат-совместной-работы) - [Как предложить изменения](#как-предложить-изменения) @@ -6,11 +6,7 @@ ## Формат совместной работы -Команда дизайн-системы работает в Figma —  все библиотеки собраны в пространстве [Figma@consta](https://figma.com/@consta). Поэтому любые дизайн-решения и доработки мы ждём в том же формате — в виде макетов в Figma. - -Передать нам файлы с макетами и документацией к ним можно **по ссылке**, а мы уже добавим их в библиотеки. (Это самый удобный способ для совместной работы, который позволяет тарифная политика Figma.) - -> Не забудьте открыть файл для просмотра (настройка при шеринге в Figma: **anyone with the link can view**). +Передать нам файлы с макетами и документацией к ним можно **по ссылке**, а мы уже добавим их в библиотеки. ## Как предложить изменения @@ -18,20 +14,16 @@ _Подходит для мелких ошибок в констрейнтах, отступах или применении цветовых переменных, а также ошибках в variants._ -Создайте [issue на GitHub](https://github.com/consta-design-system/uikit/issues/new), опишите проблему и, если нужно, способы её решения. Команда разработки сама запланирует работу над ней. - -> Если вы хотите добавить новые иконки в [Consta Graphics](https://www.figma.com/community/file/855772200870304447), загляните в [гайд по созданию новых иконок](##LIBS.LIB.STAND/lib:portal/stand:custom-addicons) +Команда разработки сама запланирует работу над ней. ### Большое изменение _Подходит для расширения функциональности текущих компонентов или создания новых._ - Сообщите о своем желании принять участие в до- или разработке дизайн-ресурсов. При необходимости — созвонитесь с кем-то из команды. Возможно, мы уже всё поправили или запланировали такую же задачу. -- Создайте [issue на GitHub](https://github.com/consta-design-system/uikit/issues/new) и закрепите в нём ссылку на файл в Figma (если мы договорились, что вы реализуете изменения на своей стороне). ## Требования к макетам - Реализовать в трех цветовых темах: Default, Dark и Display. - Использовать токены из дизайн-системы (шрифты, отступы). - Использовать autolayout и variants. -- Описать решение в документации, с примерами состояний взаимодействия и объяснением принципов работы (эту информацию можно оставить в Figma). diff --git a/src/docs/contribute/__stand__/contribute.dev.stand.mdx b/src/docs/contribute/__stand__/contribute.dev.stand.mdx index 3f68a49..8ada9bc 100644 --- a/src/docs/contribute/__stand__/contribute.dev.stand.mdx +++ b/src/docs/contribute/__stand__/contribute.dev.stand.mdx @@ -1,6 +1,6 @@ ### Если хотите сообщить о проблеме, не участвуя в её решении -Создайте [issue в Github](https://github.com/consta-design-system/uikit/issues/new). Команда разработки сама запланирует работу над ней. +Команда разработки сама запланирует работу над ней. ### Если изменения большие @@ -18,7 +18,6 @@ ### Сделать PR понятным для остальных помогут: -- [Шаблон с чеклистом для PR](https://github.com/consta-design-system/uikit/blob/master/.github/pull_request_template.md), автоматически подставится при создании PR. - Ваши комментарии к PR. Их можно добавить, не дожидаясь появления первых вопросов. - Комментарии в коде к неочевидным решениям или специальным браузерным хакам. При этом комментариями в коде не следует злоупотреблять. Код должен говорить сам за себя и быть понятным. - Следует придерживаться правила: если есть необходимость что-то прокомментировать внутри метода, этот код лучше выделить в новый метод. @@ -35,7 +34,6 @@ - Код написан понятно, имена переменных читаемы, не используются сложные конструкции. - Код подходит под описание задачи. Не было проведено другой работы не по задаче, которая может повлиять на другие части библиотеки. -- Нет (по возможности) числовых отступов в CSS, используются [переменные](https://github.com/consta-design-system/uikit/tree/master/src/components/Theme) и CSS-классы из дизайн-системы. **Тесты** diff --git a/src/docs/contribute/__stand__/contribute.stand.mdx b/src/docs/contribute/__stand__/contribute.stand.mdx index 55c1dae..58c7d58 100644 --- a/src/docs/contribute/__stand__/contribute.stand.mdx +++ b/src/docs/contribute/__stand__/contribute.stand.mdx @@ -3,9 +3,6 @@ Всё здесь: -- [figma.com/@consta](https://www.figma.com/@consta) -- [github.com/consta-design-system](https://github.com/consta-design-system) - В создании дизайн-системы можно участвовать, мы рады вашим предложениям и доработкам. - [Инструкция для контрибьюторов-дизайнеров](##LIBS.LIB.STAND.TAB/lib:portal/stand:contributers-owerview/tab:design) diff --git a/src/docs/createPreset/createPreset.stand.mdx b/src/docs/createPreset/createPreset.stand.mdx index 890ff52..ddfece0 100644 --- a/src/docs/createPreset/createPreset.stand.mdx +++ b/src/docs/createPreset/createPreset.stand.mdx @@ -13,7 +13,7 @@ import { MdxMenu } from '@consta/stand'; ## Шаг 1. Создайте директорию для новых пресетов -Создайте директорию для пресетов, внутри сделайте папки для каждого модификатора — такие же, как в [компоненте Theme](https://github.com/consta-design-system/uikit/tree/master/src/components/Theme). Например, так: +Например, так: ``` pathToPresets/ @@ -62,7 +62,7 @@ pathToPresets/ ## Шаг 3. Настройте переменные в CSS -Настройте переменные в CSS (их иногда называют _дизайн-токенами_). За образец можно взять CSS-файлы из [компонента Theme](https://github.com/consta-design-system/uikit/tree/master/src/components/Theme). +Настройте переменные в CSS (их иногда называют _дизайн-токенами_). > Лучше давать переменным семантические имена, так их проще контролировать и применять @@ -72,9 +72,6 @@ pathToPresets/ Сначала определитесь с базовыми переменными и запишите их в CSS-файл в папке `_color`. -Значения переменных внутри CSS-класса рассчитываются с помощью [postcss-color-function](https://github.com/postcss/postcss-color-function) -и [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars), но цвета **можно подобрать и вручную.** - Нужно создать хотя бы два варианта CSS для цветов: - `default` — для светлой цветовой схемы (`color.primary` в [пресете](#шаг-4--создайте-файл-пресета)) diff --git a/src/docs/docs/docs.stand.mdx b/src/docs/docs/docs.stand.mdx index 20707e2..cd2e9d2 100644 --- a/src/docs/docs/docs.stand.mdx +++ b/src/docs/docs/docs.stand.mdx @@ -56,15 +56,11 @@ export default createStand({ version: '1.0.0', // версия библиотеки, в которой появился компонент status: 'stable', // статус компонента sandbox: 'avatar-quh7em', // идентификатор песочницы - figma: - 'https://www.figma.com/embed?embed_host=uikit.consta.design&url=https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/Consta-UI-Kit?node-id=56%3A30966', - // ссылка на макет компонента в Figma order: 10, // порядок в группе }); ``` -**Версия** — `version` — версия библиотеки, в которой появился этот компонент. Формат: `'x.x.x'`, где `x` — целое число. Версию можно посмотреть по истории коммитов на GitHub, у макета компонента в Figma нужно указать ту же версию. - +**Версия** — `version` — версия библиотеки, в которой появился этот компонент. Формат: `'x.x.x'`, где `x` — целое число. **Статус** — статус компонента в процессе разработки. Варианты: @@ -153,10 +149,6 @@ export default createStand({ ### Дизайнерам -В этой вкладке подгружается макет компонента из Figma. - -Чтобы добавить эту вкладку, укажите ссылку на файл (или фрейм с компонентом) в Figma в настройках страницы `src/components/ComponentName/__stand__/ComponentName.stand.tsx`, в параметре `figma`. - [Посмотреть пример](#настройки-компонента) ### Песочница @@ -201,7 +193,6 @@ standTabs: [ // табы поумолчанию { id: '', label: 'Обзор' }, { id: 'dev', label: 'Разработчикам' }, - { id: 'design', label: 'Дизайнерам', figma: true }, { id: 'sandbox', label: 'Песочница', sandbox: true }, // свои табы { id: 'use', label: 'Как использовать' }, @@ -255,6 +246,3 @@ import { MdxMenu } from '@consta/stand'; Чтобы добавить витрину, в папке с документацией для компонента создайте файл `ComponentName.variants.tsx`. В этом файле опишите параметры, которые хотите вывести на витрину, и вызовите компонент с этими параметрами. - -- [Посмотреть параметры для витрины](https://github.com/consta-design-system/stand/blob/main/src/exportAtoms/variants/variants.ts) -- [Посмотреть пример витрины](https://github.com/consta-design-system/uikit/blob/dev/src/components/Attachment/__stand__/Attachment.variants.tsx) diff --git a/src/docs/docsPortal/docsPortal.stand.mdx b/src/docs/docsPortal/docsPortal.stand.mdx index 9f60f40..9f0ac97 100644 --- a/src/docs/docsPortal/docsPortal.stand.mdx +++ b/src/docs/docsPortal/docsPortal.stand.mdx @@ -25,7 +25,6 @@ import { MdxMenu } from '@consta/stand'; ## Портал - [Адрес портала](##HOME) -- [Репозиторий](https://github.com/consta-design-system/portal) Портал — это рамка для всех библиотек. @@ -49,18 +48,14 @@ import { MdxMenu } from '@consta/stand'; ##### Шаг 2. Добавьте репозиторий библиотеки -Добавьте репозиторий и ветку, из которой нужно взять данные для библиотеки, в список [clone-repositories.sh](https://github.com/consta-design-system/portal/blob/master/clone-repositories.sh) - Например, так: ```tsx -git clone -b master https://${REPO_ACCESS_TOKEN}@github.com/consta-design-system/uikit.git ./repositories/uikit` + ``` ##### Шаг 3. Добавьте алиас библиотеки -Добавьте алиас библиотеки в [webpack.config.js](https://github.com/consta-design-system/portal/blob/master/webpack.config.js) в объект `repos`: - ```tsx const repos = [ 'analytic-ui', @@ -170,7 +165,6 @@ export const { createStand } = createConfig({ image, // изображение на главной странице библиотеки description, // описание на главной странице библиотеки standPageDecoration, // темы - repositoryUrl: 'https://github.com/consta-design-system/uikit', // репозиторий библиотеки на GitHub order: 1, // порядок в группе на портале }); ``` diff --git a/src/docs/fontInter/__stand__/fontInter.design.stand.mdx b/src/docs/fontInter/__stand__/fontInter.design.stand.mdx index ed1b984..7fbcce0 100644 --- a/src/docs/fontInter/__stand__/fontInter.design.stand.mdx +++ b/src/docs/fontInter/__stand__/fontInter.design.stand.mdx @@ -12,18 +12,12 @@ import { NewFontPictures } from './components/newFontPictures'; [Инструкция по установке нового шрифта для Mac OS](https://lifehacker.ru/kak-ustanovit-shrift-v-windows-i-macos) -### 3. Обновите библиотеки Consta в Figma +### 3. Подтяните обновления с новым шрифтом в свои файлы. Скорее всего, вы используете эти библиотеки у себя в макетах, их нужно обновить в первую очередь: -- [Consta Default Typography](https://www.figma.com/community/file/855746990421795518) -- [Consta UI-kit](https://www.figma.com/community/file/853774806786762374) -- [Consta Geo-kit](https://www.figma.com/community/file/1063113573061305628) -- [Consta Charts](https://www.figma.com/community/file/982611119114314434) - Остальные файлы в Community предназначены для просмотра, копирования или не используют типографику как экспортируемый ресурс. -В них уже установлен новый шрифт, но в Figma вы, скорее всего, не получите уведомлений. ### 3. Проверьте макеты @@ -33,9 +27,7 @@ import { NewFontPictures } from './components/newFontPictures'; ### 4. Замените шрифт там, где не подключены компоненты или стили библиотек -Для замены шрифта в остальных элементах и компонентах есть плагин [Consta font replacer](https://www.figma.com/community/plugin/1100808562040625391). - -API Figma позволяет искать текстовые слои по всему файлу, внутри всех страниц. Если макетов в файле много, плагин обходит слои в проекте очень медленно и редактор часто зависает. Поэтому плагин меняет шрифт не во всём файле сразу, а только **на одной странице**. Это быстрее и позволяет лучше контролировать процесс замены. +Если макетов в файле много, плагин обходит слои в проекте очень медленно и редактор часто зависает. Поэтому плагин меняет шрифт не во всём файле сразу, а только **на одной странице**. Это быстрее и позволяет лучше контролировать процесс замены. > Плагин лучше запускать на десктопном клиенте, а не в браузере @@ -43,14 +35,10 @@ API Figma позволяет искать текстовые слои по вс **Шаг 1.** Установить Inter в систему, если его нет. -**Шаг 2.** Установить плагин из Figma Community. - **Шаг 3.** Открыть рабочий файл. **Шаг 4.** Зайти на первую страницу (Page) и запустить плагин (в зависимости от количества артбордов, плагин может работать до 5 минут, именно столько обрабатывалась страница с ~40 артбордами и 24 000 текстовых слоев). -**Шаг 5.** Во время работы плагина лучше закрыть все программы, кроме Figma, и ничего не трогать на артбордах. - **Шаг 6.** Дождаться завершения работы плагина, рандомно прокликав текстовые слои. **Далее.** Перейти на другую страницу и вызвать плагин заново. Для других файлов алгоритм такой же. @@ -63,7 +51,6 @@ API Figma позволяет искать текстовые слои по вс Если проблема повторяется: -- Перезапустите Figma и плагин. - Разбейте макеты с одной на несколько страниц. ### «Поехали» контейнеры с текстом diff --git a/src/docs/fontInter/__stand__/fontInter.dev.stand.mdx b/src/docs/fontInter/__stand__/fontInter.dev.stand.mdx index 81c827b..52ab432 100644 --- a/src/docs/fontInter/__stand__/fontInter.dev.stand.mdx +++ b/src/docs/fontInter/__stand__/fontInter.dev.stand.mdx @@ -22,6 +22,5 @@ import '@consta/uikit/fonts'; ### Подключение вручную -1. Скопируйте файлы шрифтов и CSS из [пакета](https://github.com/consta-design-system/uikit/tree/dev/src/fonts/inter) в ваш проект. -2. Проверьте пути к файлам шрифтов в скопированном CSS-файле. -3. Подключите CSS к проекту. +1. 2. Проверьте пути к файлам шрифтов в скопированном CSS-файле. +2. Подключите CSS к проекту. diff --git a/src/docs/fontInter/__stand__/fontInter.stand.mdx b/src/docs/fontInter/__stand__/fontInter.stand.mdx index 2e5983f..cc771af 100644 --- a/src/docs/fontInter/__stand__/fontInter.stand.mdx +++ b/src/docs/fontInter/__stand__/fontInter.stand.mdx @@ -1,5 +1,3 @@ > C версии **4.0.0** шрифт Inter встроен в дизайн-систему: ничего специально настраивать и подключать не нужно. Но если вы используете версию **3.23.0** или ниже, можете подключить Inter по этой инструкции. -[Как поменять шрифт в макетах в Figma](##LIBS.LIB.STAND.TAB/lib:portal/stand:guidelines-fontinter/tab:design) - [Как поменять шрифт в коде вашего проекта](##LIBS.LIB.STAND.TAB/lib:portal/stand:guidelines-fontinter/tab:dev) diff --git a/src/docs/howToGo/howToGo.stand.mdx b/src/docs/howToGo/howToGo.stand.mdx index a3dcd1a..db1d0cb 100644 --- a/src/docs/howToGo/howToGo.stand.mdx +++ b/src/docs/howToGo/howToGo.stand.mdx @@ -15,25 +15,18 @@ ### Библиотека компонентов -- [Репозиторий](https://github.com/consta-design-system/uikit) - [Песочница и документация](##LIBS.LIB/lib:uikit) ### Библиотека графиков -- [Репозиторий](https://github.com/consta-design-system/charts) - [Песочница и документация](##LIBS.LIB/lib:charts) Если что-то не нашлось, проверьте, может быть, задача на доработки, которые нужны вам, уже запланирована или в работе. ### Заявки на доработки (issues) -- [Список](https://github.com/consta-design-system/uikit/issues) -- [Доска](https://github.com/consta-design-system/uikit/projects/1) - ### Задачи в работе (PR) -- [PR](https://github.com/consta-design-system/uikit/pulls) - Если нужных компонентов нигде нет, что ж. Некоторые компоненты мы берём в работу, но что-то вам придётся добавить самостоятельно. ## Отправьте запрос на доработку дизайн-системы @@ -46,8 +39,7 @@ ### Как отправить запрос на доработку -1. Создайте [issue](https://github.com/consta-design-system/uikit/issues/new). -2. Подробно опишите, какие возможности нужно добавить и какие задачи они будут решать. +1. 2. Подробно опишите, какие возможности нужно добавить и какие задачи они будут решать. Если хотите самостоятельно добавить новый компонент, напишите, как вы собираетесь его реализовывать, в общих чертах (какой API будет у компонента, спорные технические моменты и т. д.). @@ -59,6 +51,4 @@ Это для тех, кто договорился с командой дизайн-системы, что будет самостоятельно делать доработку. -Отправьте PR в ветку dev в [нашем репозитории](https://github.com/consta-design-system/uikit). - Подробности об оформлении PR и совместной работе над дизайн-системой — в [инструкции для контрибьюторов](##LIBS.LIB.STAND/lib:portal/stand:contributers-owerview). diff --git a/src/docs/issue/issue.stand.mdx b/src/docs/issue/issue.stand.mdx index a000ff7..77356e3 100644 --- a/src/docs/issue/issue.stand.mdx +++ b/src/docs/issue/issue.stand.mdx @@ -1,7 +1,5 @@ Поставить задачу на изменение (issue) можно в нашем репозитории. Пожалуйста, когда ставите задачу, следите за форматом. Так мы быстрее поймём в чём дело и сможем передать задачу нужному человеку. -[Основной список задач](https://github.com/consta-design-system/uikit/issues) — здесь можно создать новую задачу и посмотреть примеры. - ## Как сформировать заголовок В начале напишите тему, которой касается задача, потом — описание того, что нужно сделать. @@ -19,8 +17,6 @@ - `storybook` — изменения, связанные с платформой. - `doc` — задачи по документации и другие варианты. -Примеры можно посмотреть в [списке задач](https://github.com/consta-design-system/uikit/issues). - Если не получилось подобрать подходящую тему, придумайте новую. ### Описание задачи diff --git a/src/docs/principle/principles.stand.mdx b/src/docs/principle/principles.stand.mdx index ae91cf0..11a5312 100644 --- a/src/docs/principle/principles.stand.mdx +++ b/src/docs/principle/principles.stand.mdx @@ -10,9 +10,7 @@ ## Всем и каждому -Дизайн-система бесплатна и доступна всем. Её можно использовать для личных или рабочих проектов в любой организации, всё в открытом доступе — в [Figma](https://www.figma.com/@consta) и на [GitHub](https://github.com/consta-design-system). - -[Посмотреть лицензию](https://github.com/consta-design-system/uikit/blob/master/LICENSE) +Дизайн-система бесплатна и доступна всем. ## Готово к работе diff --git a/src/docs/prototype/prototype.stand.mdx b/src/docs/prototype/prototype.stand.mdx index 01a1a77..337504c 100644 --- a/src/docs/prototype/prototype.stand.mdx +++ b/src/docs/prototype/prototype.stand.mdx @@ -13,8 +13,6 @@ ## Цвета и отступы -Мы предполагаем, что при создании макетов и элементов интерфейса дизайнеры используют [библиотеки Consta в Figma](https://www.figma.com/@consta) — или хотя бы набор цветов и отступов из наших библиотек. - В этом случае проблем с цветами и отступами быть не должно, все они есть в @consta-uikit и других наших библиотеках. Если в макетах всё же попадаются цвета и размеры отступов, которых нет в библиотеках для разработчиков, можно подобрать максимально подходящие из тех, что есть, или уточнить у дизайнера. @@ -43,8 +41,6 @@ background: var(--color-bg-success); В макетах отступы могут не совпадать с размерами из Consta. В этом случае можно выбрать максимально подходящий отступ из `@consta-uikit` или уточнить у дизайнера. -[Посмотреть все отступы](https://github.com/consta-design-system/uikit/blob/master/src/components/Theme/_space/Theme_space_gpnDefault.css) - ## Текст Настроить текст можно с помощью компонента [Text](##LIBS.LIB.STAND.TAB/lib:uikit/stand:components-text-stable/tab:dev). @@ -55,8 +51,6 @@ background: var(--color-bg-success); При использовании переменных нужно называть размеры текста и межстрочного интервала так же, как в дизайн-системе. -[Посмотреть все размеры](https://github.com/gpn-prototypes/ui-kit/blob/master/src/components/Theme/_size/Theme_size_gpnDefault.css) - ## Тестирование Обычно проверять фактические значения цветов и размеров не нужно — они все определены в библиотеках Consta. Но есть несколько исключений. @@ -64,8 +58,7 @@ background: var(--color-bg-success); #### Когда нужна проверка - Если в макете нет комментария с указанием цвета или размера текста - из дизайн-системы, нужно проверить, чтобы при реализации были подобраны максимально похожие. Сравнивать типографику можно с её [основным макетом](https://www.figma.com/file/4FOymgclcGF3Fm2M9ZeNUk/Consta-Default-Typography?node-id=62%3A0). -- В макете есть цвета с прозрачностью, которой нет в Consta. Например, у цвета `bg-caution` нет прозрачности, но иногда она появляется в макетах. В таких ситуациях нужно скопировать фактическое значение цвета с добавлением нужной прозрачности. + из дизайн-системы, нужно проверить, чтобы при реализации были подобраны максимально похожие. - В макете есть цвета с прозрачностью, которой нет в Consta. Например, у цвета `bg-caution` нет прозрачности, но иногда она появляется в макетах. В таких ситуациях нужно скопировать фактическое значение цвета с добавлением нужной прозрачности. - Отступы каждый раз подбираются вручную, поэтому стоит проверить, чтобы были подобраны правильные размеры. Если в макете указан цвет `bg-caution`, в коде используется `bg-caution` из Consta, но при этом визуально или фактически цвета макета и реализации отличаются, скорее всего, ошибка в макете. diff --git a/src/docs/review/review.stand.mdx b/src/docs/review/review.stand.mdx index 8cc7ceb..7ef3a2d 100644 --- a/src/docs/review/review.stand.mdx +++ b/src/docs/review/review.stand.mdx @@ -1,6 +1,6 @@ При разработке библиотеки важно, чтобы компоненты были удобны и понятны для пользователей. Ревью помогает это контролировать и поддерживать качество кода. -В репозиторий добавлен файл [CODEOWNERS](https://github.com/consta-design-system/uikit/blob/master/.github/CODEOWNERS) со списками мейнтейнеров библиотеки. Ревьюеры из этого файла автоматически проставятся у PR и получат уведомление о новом PR. +Ревьюеры из этого файла автоматически проставятся у PR и получат уведомление о новом PR. ## Правила ревью diff --git a/src/docs/sla/sla.stand.mdx b/src/docs/sla/sla.stand.mdx index 1f39bac..f4f20b2 100644 --- a/src/docs/sla/sla.stand.mdx +++ b/src/docs/sla/sla.stand.mdx @@ -24,14 +24,10 @@ import { SlaScheme } from './components/SlaPictures/SlaPictures'; 2.3.1 Для оперативного информирования о новых версиях ведётся [канал в Telegram](https://t.me/consta_ui_releases). -2.3.2 Для получения сводной информации обо всех изменениях в программном коде рекомендуется использовать механизм [наблюдения](https://github.com/watching) за проектом. - 2.3.3 В случаях, когда сохранение обратной совместимости невозможно в силу наличия потенциальных уязвимостей или серьезных проблем с производительностью применяется механизм [deprecated](https://docs.npmjs.com/cli/v7/commands/npm-deprecate). ### 2.4 История версий -Полная история изменений по всем версиям продуктов доступна на [страницах](https://github.com/consta-design-system/uikit/releases) с релизами. - ## 3. Доступность и поддержка Направления, за которые отвечает команда Consta: @@ -41,8 +37,6 @@ import { SlaScheme } from './components/SlaPictures/SlaPictures'; - Поддержка и развитие информационных ресурсов: - [Основной информационный ресурс](##HOME) - [Витрина компонентов](##LIBS) - - [Библиотека компонентов в Figma](https://www.figma.com/@Consta) - - [Исходный код библиотеки компонентов](https://github.com/consta-design-system/uikit) - [Пакет UI Kit](http://npmjs.com/package/@consta/uikit) - [Информационный канал в Telegram](https://t.me/consta_ui_releases) @@ -60,8 +54,6 @@ import { SlaScheme } from './components/SlaPictures/SlaPictures'; ## 5. Типы тикетов и порядок их заведения -Дефекты, запросы на новую функциональность или вопросы оформляются в виде [тикета на Github](https://github.com/consta-design-system/uikit/issues) или письмом на [design@gazprom-neft.ru](design@gazprom-neft.ru). - Возможные типы тикетов: | Тип тикета | Расшифровка | @@ -149,8 +141,6 @@ import { SlaScheme } from './components/SlaPictures/SlaPictures'; ## 9. Запросы на принятие изменений (PR) -Изменения и доработки, предлагаемые контрибьютерами, [оформляются](##LIBS.LIB.STAND/lib:portal/stand:custom-contribute) в виде [запросов на принятие изменений](https://github.com/consta-design-system/uikit/pulls). - При появлении нового PR команда Consta в течение двух рабочих дней проводит [ревью](##LIBS.LIB.STAND/lib:portal/stand:workflow-review) и, при отсутствии критичных замечаний, принимает PR. К мержу допускаются PR, получившие не менее двух аппрувов. Изменения включаются в следующий релиз. Релизы выпускаются еженедельно по средам. diff --git a/src/docs/start/__stand__/start.design.stand.mdx b/src/docs/start/__stand__/start.design.stand.mdx index 5e14830..4ef9191 100644 --- a/src/docs/start/__stand__/start.design.stand.mdx +++ b/src/docs/start/__stand__/start.design.stand.mdx @@ -15,9 +15,7 @@ import { MdxMenu } from '@consta/stand'; <> 1. Создайте проект в пространстве команды. -2. Выберите [библиотеку компонентов](https://www.figma.com/@consta) Consta. - -> Для корректной работы также скопируйте библиотеки **Default Colors**, **Dark Colors**, **Display Colors**, **Default Typography**. +2. > Для корректной работы также скопируйте библиотеки **Default Colors**, **Dark Colors**, **Display Colors**, **Default Typography**. 3. Перейдите на вкладку **Assets** и нажмите **Publish** для каждой библиотеки. 4. Откройте командный проект и перейдите на вкладку **Assets**. @@ -27,26 +25,21 @@ import { MdxMenu } from '@consta/stand'; <> -1. Выберите [библиотеку компонентов](https://www.figma.com/@consta) Consta. - -> Для корректной работы также скопируйте библиотеки **Default Colors**, **Dark Colors**, **Display Colors**, **Default Typography**. +1. > Для корректной работы также скопируйте библиотеки **Default Colors**, **Dark Colors**, **Display Colors**, **Default Typography**. -2. Перейдите на вкладку **Assets**. -3. Используйте ресурсы Consta для работы над проектом. +2. Перейдите на вкладку **Assets**. +3. Используйте ресурсы Consta для работы над проектом. Варианты и свойства компонентов обеспечивают гибкость компонентов и позволяют оптимизировать конфигурации компонентов в соответствии с вашими потребностями. Если нужного компонента нет, [создайте новый](##LIBS.LIB.STAND/lib:portal/stand:contributers-componentguide) и [отправьте](##LIBS.LIB.STAND/lib:portal/stand:contributers-addcomponent) его нам — мы будем рады вашему участию. -Чтобы узнать больше о компонентах, прочтите этот [справочик Figma](https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties). - # Что дальше -1. Создайте макеты интерфейсов с помощью готовых компонентов из Consta. [Посмотреть примеры](https://www.figma.com/community/file/997586644523081587). -2. Разработайте компоненты по [принципам](##LIBS.LIB.STAND/lib:portal/stand:startwork-aboutconsta) дизайн-системы на основе [визуального языка](##LIBS.LIB.STAND/lib:portal/stand:startwork-visualstyle). -3. Создайте дизайн-спецификацию для разработчиков: опишите, как ведут себя элементы, какие у них могут быть модификации, варианты цветовых схем, анимацию — всё, что может понадобиться при реализации проекта. -4. Отправьте макеты в разработку. +1. Создайте макеты интерфейсов с помощью готовых компонентов из Consta. 2. Разработайте компоненты по [принципам](##LIBS.LIB.STAND/lib:portal/stand:startwork-aboutconsta) дизайн-системы на основе [визуального языка](##LIBS.LIB.STAND/lib:portal/stand:startwork-visualstyle). +2. Создайте дизайн-спецификацию для разработчиков: опишите, как ведут себя элементы, какие у них могут быть модификации, варианты цветовых схем, анимацию — всё, что может понадобиться при реализации проекта. +3. Отправьте макеты в разработку. # Полезные ссылки diff --git a/src/docs/start/__stand__/start.dev.stand.mdx b/src/docs/start/__stand__/start.dev.stand.mdx index 0a75eb8..f9ae419 100644 --- a/src/docs/start/__stand__/start.dev.stand.mdx +++ b/src/docs/start/__stand__/start.dev.stand.mdx @@ -10,7 +10,7 @@ import { MdxMenu } from '@consta/stand'; -> Для работы с Consta используйте библиотеку React. Если вы работаете с другими технологиями, сделайте дизайн на основе библиотек в Figma и разработайте компоненты самостоятельно. +> Для работы с Consta используйте библиотеку React. # Установка Consta @@ -68,8 +68,6 @@ yarn add @consta/uikit -Полный список доступных библиотек смотрите [здесь](https://github.com/orgs/consta-design-system/repositories?type=all). - # Импорт компонентов 1. Импортируйте в корневой файл: @@ -95,11 +93,10 @@ const App = () => ( # Что дальше -Создайте интерфейс по макетам и спецификации, которые передал дизайнер. Используйте компоненты из [библиотек Consta](https://github.com/consta-design-system) на Github. Если нужного компонента нет, [создайте новый](##LIBS.LIB.STAND/lib:portal/stand:contributers-componentguide) и [отправьте](##LIBS.LIB.STAND/lib:portal/stand:contributers-addcomponent) его нам — мы будем рады вашему участию. +Создайте интерфейс по макетам и спецификации, которые передал дизайнер. Если нужного компонента нет, [создайте новый](##LIBS.LIB.STAND/lib:portal/stand:contributers-componentguide) и [отправьте](##LIBS.LIB.STAND/lib:portal/stand:contributers-addcomponent) его нам — мы будем рады вашему участию. # Полезные ссылки - [Что такое тематизация](##LIBS.LIB.STAND/lib:portal/stand:theme-themeabout) - [Theme](##LIBS.LIB.STAND.TAB/lib:uikit/stand:components-theme-stable/tab:dev) -- [Figma для разработчиков](##LIBS.LIB.STAND/lib:portal/stand:guidelines-figmadev) - [Редполитика](##LIBS.LIB.STAND/lib:portal/stand:guidelines-editorialpolicy) diff --git a/src/docs/tableComparison/tableComparison.stand.mdx b/src/docs/tableComparison/tableComparison.stand.mdx index 9ccdc54..6144f04 100644 --- a/src/docs/tableComparison/tableComparison.stand.mdx +++ b/src/docs/tableComparison/tableComparison.stand.mdx @@ -48,12 +48,9 @@ import { MdxMenu } from '@consta/stand'; - [Посмотреть возможности AG Grid](https://www.ag-grid.com/react-data-grid/licensing/#feature-comparison) - [Документация адаптера ag-grid-adapter](##LIBS.LIB/lib:ag-grid-adapter) -- [GitHub адаптера ag-grid-adapter](https://github.com/consta-design-system/ag-grid-adapter) ### Библиотека rc-table-adapter -Адаптер для таблицы [rc-table](https://github.com/react-component/table). - У этой таблицы чуть больше возможностей, чем у компонента `Table`. Быстро работает, оптимизирована для работы с большим набором данных. @@ -62,7 +59,6 @@ import { MdxMenu } from '@consta/stand'; - [Документация rc-table с примерами](https://table-react-component.vercel.app/) - [Документация адаптера rc-table-adapter](##LIBS.LIB/lib:rc-table-adapter) -- [GitHub адаптера rc-table-adapter](https://github.com/consta-design-system/rc-table-adapter) ## Как выбрать diff --git a/src/docs/themeAbout/themeAbout.stand.mdx b/src/docs/themeAbout/themeAbout.stand.mdx index c3c54f5..365f761 100644 --- a/src/docs/themeAbout/themeAbout.stand.mdx +++ b/src/docs/themeAbout/themeAbout.stand.mdx @@ -56,8 +56,6 @@ _color / Theme_color_gpnDisplay.css; `gpnDark`, `gpnDefault` и `gpnDisplay` — это значения модификатора `_color`, они нужны при создании [пресета](#зачем-нужны-пресеты) — чтобы указать, какой CSS-файл в каких случаях использовать. -[Посмотреть, что в других папках](https://github.com/consta-design-system/uikit/tree/master/src/components/Theme) - ## Зачем нужны пресеты Пресет — это `preset`, свойство компонента `Theme`. Он нужен, чтобы сформировать набор конкретных CSS-файлов, которые нужно использовать в разных случаях. diff --git a/src/docs/visualStyle/visual.stand.mdx b/src/docs/visualStyle/visual.stand.mdx index 7f433bb..2f53e77 100644 --- a/src/docs/visualStyle/visual.stand.mdx +++ b/src/docs/visualStyle/visual.stand.mdx @@ -26,8 +26,7 @@ import image2 from './images/image2.png'; ### Темы -В дизайн-системе Consta есть три готовые цветовые схемы: [светлая (Default)](https://www.figma.com/file/vNZFtFH6w0IjD2Twi5OXXE?embed_host=uikit.consta.design&kind=&node-id=1721%3A6&viewer=1), [тёмная (Dark)](https://www.figma.com/file/NgRz8tesBgdad2Lv6kbWEe/Consta-Dark-Colors?type=design&node-id=763-157&mode=design&t=tiyR4OTeCy2M7DxS-0) и [акцентная (Display)](https://www.figma.com/file/CjGnwm0kwWkW9wSgwPirJA/Consta-Display-Colors?type=design&node-id=1457-157&mode=design&t=tiyR4OTeCy2M7DxS-0). За каждую отвечает свой CSS-файл. Обычно проекты, разработанные на основе Consta, используют темы Default и Dark с возможностью переключения между ними. - +За каждую отвечает свой CSS-файл. Обычно проекты, разработанные на основе Consta, используют темы Default и Dark с возможностью переключения между ними. Подробнее о том, как работают темы, модификаторы и пресеты читайте в статье [Theme](##LIBS.LIB.STAND/lib:uikit/stand:components-theme-stable). @@ -38,8 +37,6 @@ import image2 from './images/image2.png'; ### Тени -В каждой теме предусмотрен [стиль тени](https://www.figma.com/file/vNZFtFH6w0IjD2Twi5OXXE/Consta-Default-Colors?type=design&node-id=2667-22&mode=design&t=bKh5zYTT8nFjrUVG-0) для выделения группы объектов, выделения объектов на отдельный слой и выделения отдельных режимов. - ## Шрифты ### Шрифт Inter @@ -50,20 +47,14 @@ import image2 from './images/image2.png'; ### Нативные шрифты -Помимо Inter в дизайн-системе используются шрифты нативных систем: [iOS](https://www.figma.com/community/file/1159878818572493484/Consta-iOS-Typography) и [Android](https://www.figma.com/community/file/1159878488174966443/Consta-Android-Typography). - ### Стили заголовков и текста -[Стили шрифта](https://www.figma.com/community/file/1122106488653770247/Consta-Font-Styles), которые используются при проектировании интерфейсов по умолчанию. - Regular styles – используется для заголовков страниц и блоков, а также для стандартных текстовых блоков. Bold styles – используется для смыслового выделения,заголовков страниц, блоков и модулей. ## Графика -В [библиотеке](https://www.figma.com/community/file/855772200870304447) дизайн-системы Consta представлены наиболее популярные иконки, иллюстрации и графические элементы необходимые для создания интерфейсов. - ### Иконки При создании иконок дизайн-системы мы ориентируемся на правильные геометрические формы и фигуры. Все иконки представлены в трёх размерах: @@ -87,6 +78,6 @@ Bold styles – используется для смыслового выдел ## Отступы -В интерфейсах используются [отступы](https://www.figma.com/community/file/855575974468435644/Consta-Default-Spaces) кратные 4, за исключением 3xs размера. Это размеры отступов внутри блоков (padding) и между блоками (margin). +Это размеры отступов внутри блоков (padding) и между блоками (margin). diff --git a/src/docs/workflow/workflow.stand.mdx b/src/docs/workflow/workflow.stand.mdx index fe56462..84861af 100644 --- a/src/docs/workflow/workflow.stand.mdx +++ b/src/docs/workflow/workflow.stand.mdx @@ -8,16 +8,12 @@ ## 1. Дизайн-макет -1. Дизайнер подключает к проекту в Figma [библиотеки дизайн-системы](https://www.figma.com/@consta). Например, [библиотеку компонентов Consta UI Kit](https://www.figma.com/community/file/853774806786762374) и [библиотеку графиков Consta Charts](https://www.figma.com/community/file/982611119114314434). -2. Создаёт макеты интерфейсов с помощью готовых компонентов из Consta. [Посмотреть примеры](https://www.figma.com/community/file/997586644523081587) -3. Если готовых компонентов не хватает, разрабатывает свои компоненты по принципам дизайн-системы. При этом использует переменные из дизайн-системы ([цвета и тени](https://www.figma.com/community/file/855572288089401017), [отступы](https://www.figma.com/community/file/855575974468435644), [шрифты](https://www.figma.com/community/file/855746990421795518)) и [графические элементы](https://www.figma.com/community/file/855772200870304447) — например, иконки. -4. Создаёт дизайн-спецификацию для разработчиков: описывает, как ведут себя элементы, какие у них могут быть модификации, варианты цветовых схем, анимацию — всё, что может понадобиться при реализации проекта. +1. 2. Создаёт макеты интерфейсов с помощью готовых компонентов из Consta.3. Если готовых компонентов не хватает, разрабатывает свои компоненты по принципам дизайн-системы. 4. Создаёт дизайн-спецификацию для разработчиков: описывает, как ведут себя элементы, какие у них могут быть модификации, варианты цветовых схем, анимацию — всё, что может понадобиться при реализации проекта. После этого макеты отправляются в разработку. > Если у вас нет дизайнера, > можете использовать дизайн-систему как брендбук: посмотреть и сделать так же. -> Размеры, цвета и другие параметры можно взять из Figma. ## 2. Разработка @@ -33,7 +29,6 @@ > Дизайн-система сделана на React.js. Если вы работаете с другими технологиями, > библиотеки использовать не получится. В этом случае -> можно сделать дизайн на основе библиотек в Figma и разработать > все нужные компоненты самим. ## 3. Тестирование и следующие этапы diff --git a/src/pages/MainPage/About/About.tsx b/src/pages/MainPage/About/About.tsx index ae0708c..3989436 100644 --- a/src/pages/MainPage/About/About.tsx +++ b/src/pages/MainPage/About/About.tsx @@ -1,53 +1,15 @@ import './About.css'; -import { IconForward } from '@consta/icons/IconForward'; import { IconThumbUp } from '@consta/icons/IconThumbUp'; -import { useLink } from '@consta/stand/src/hooks/useLink'; -import { routesNames } from '@consta/stand/src/modules/router'; -import { cnText, Text } from '@consta/uikit/Text'; -import { useTheme } from '@consta/uikit/Theme'; -import React, { Fragment } from 'react'; +import { Text } from '@consta/uikit/Text'; +import React from 'react'; -import IconFigma from '##/icons/FigmaMono.icon.svg'; -import IconGithub from '##/icons/Github.icon.svg'; -import IconStorybook from '##/icons/Storybook.icon.svg'; -import { - constaGitHub, - contsaCommunityFigma, - licenceMit, -} from '##/modules/api/links'; +import { licenceMit } from '##/modules/api/links'; import { cn } from '##/utils/bem'; -// import { AboutVideo } from './AboutVideo/AboutVideo'; - const cnAbout = cn('About'); -const cnLinks = cn('LinksToLibrary'); - -const More = ( - - Смотреть - - -); - export const About: React.FC = () => { - const { themeClassNames } = useTheme(); - - const [componentsLink, componentsOnClick] = useLink({ - to: routesNames.LIBS, - }); return (
{
*/} -
-
- {[ - { - title: 'Всем-всем', - subTitle: - 'Витрина компонентов с подробной документацией и правилами использования.', - hasVersion: false, - icon: 'storybook', - href: componentsLink, - onClick: componentsOnClick, - additionalClassNames: themeClassNames.color.accent, - }, - { - title: 'Дизайнерам', - subTitle: - 'Правила использования и библиотека компонентов в Figma Community.', - hasVersion: false, - icon: 'figma', - href: contsaCommunityFigma, - additionalClassNames: themeClassNames.color.invert, - }, - { - title: 'Разработчикам', - subTitle: 'Репозитории библиотек на GitHub.', - hasVersion: true, - icon: 'github', - href: constaGitHub, - additionalClassNames: themeClassNames.color.invert, - }, - ].map((item, index) => ( - - -
- - {item.title} - - - {item.subTitle} - -
- -
- {item.icon === 'storybook' && ( - - )} - {item.icon === 'figma' && ( - - )} - {item.icon === 'github' && ( - - )} - - {More} -
- - - ))} -
-
-
- - Для дизайна - - - - Figma - {' '} - — инструмент для разработки интерфейсов и прототипирования - ), }, @@ -146,12 +135,6 @@ export const questions = [ { title: 'Как использовать дизайн-систему?', answer: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [libLink] = useLink({ - to: routesNames.LIBS_LIB, - params: { lib: 'uikit' }, - }); - return ( <> - - Использовать все возможности - - - Если вы запускаете веб-проект и готовы вести разработку на React, - разработчики могут{' '} - - подключить нашу библиотеку - {' '} - с элементами интерфейса. Если нет, дизайнеры могут собрать макет - интерфейса на основе{' '} - - шаблонов в Figma - - . - - - Дополнять и дорабатывать - - - Всё в открытом доступе. Вы можете посмотреть{' '} - - исходный код нашей библиотеки на GitHub - {' '} - и предложить изменения. - ); }, @@ -257,41 +209,6 @@ export const questions = [ ), }, - { - title: 'Как принять участие в разработке?', - answer: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [link] = useLink({ - to: routesNames.LIBS_LIB_STAND, - params: { lib: 'portal', stand: 'custom-contribute' }, - }); - - return ( - <> - - Очень просто: дизайн-система в публичном репозитории на GitHub, вы - можете прислать заявку на изменения или даже сделать доработку. - - - Как это сделать - - - ); - }, - }, { title: 'В какой момент её лучше подключать?', answer: () => ( @@ -330,10 +247,6 @@ export const questions = [ className="decorator decorator_indent-b_m" >
  • Менеджер или заказчик ставит задачу на создание продукта
    • -
  • - Дизайнеры создают макет — из компонентов дизайн-системы, на основе - наших шаблонов в Figma. -
  • Разработчики собирают интерфейс на основе макета — берут компоненты из npm пакета{' '} diff --git a/src/pages/MainPage/HeroScreen/HeroScreen.tsx b/src/pages/MainPage/HeroScreen/HeroScreen.tsx index a2b7ef6..468d707 100644 --- a/src/pages/MainPage/HeroScreen/HeroScreen.tsx +++ b/src/pages/MainPage/HeroScreen/HeroScreen.tsx @@ -1,17 +1,11 @@ /* eslint-disable camelcase */ import './HeroScreen.css'; -import { useLink } from '@consta/stand/src/hooks/useLink'; -import { routesNames } from '@consta/stand/src/modules/router'; -import { Button } from '@consta/uikit/Button'; import { Text } from '@consta/uikit/Text'; -import { useBreakpoints } from '@consta/uikit/useBreakpoints'; import { useAction } from '@reatom/npm-react'; import React, { useEffect, useRef } from 'react'; import { Picture } from '##/components/Picture/Picture'; -import IconFigma from '##/icons/FigmaMono.icon.svg'; -import IconGithub from '##/icons/Github.icon.svg'; import ConstaLogo from '##/images/ConstaLogo.image.svg'; import AltHeroImage_375_1x_dark from '##/images/HeroImage/Alt/Dark/HeroImage_375_1x.jpg'; import AltHeroImage_375_2x_dark from '##/images/HeroImage/Alt/Dark/HeroImage_375_2x.jpg'; @@ -67,7 +61,6 @@ import GPNHeroImage_375_3x_display from '##/images/HeroImage/GPN/Display/HeroIma import GPNHeroImage_720_1x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_1x.jpg'; import GPNHeroImage_720_2x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_2x.jpg'; import GPNHeroImage_720_3x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_3x.jpg'; -import { constaGitHub, contsaCommunityFigma } from '##/modules/api/links'; import { fixedAtom } from '##/modules/header'; import { cn } from '##/utils/bem'; @@ -76,14 +69,6 @@ const cnHeroScreen = cn('HeroScreen'); export const HeroScreen: React.FC = () => { const setFixedHeader = useAction(fixedAtom); const ref = useRef(null); - const [componentsLink, componentsOnClick] = useLink({ - to: routesNames.LIBS, - }); - const breakpoints = useBreakpoints({ - map: { bigPhone: 400 }, - isActive: true, - }); - const buttonSize = breakpoints.bigPhone ? 'l' : 'm'; useEffect(() => { const listner = () => { @@ -122,40 +107,6 @@ export const HeroScreen: React.FC = () => { Дизайн‑система для быстрой разработки интерфейсов -
    -
    -
    -
    • ( - +