diff --git a/apps/doc/src/app/about-prizm/changelog/changelog.component.html b/apps/doc/src/app/about-prizm/changelog/changelog.component.html index 21745086c7..f4d600662c 100644 --- a/apps/doc/src/app/about-prizm/changelog/changelog.component.html +++ b/apps/doc/src/app/about-prizm/changelog/changelog.component.html @@ -1,3 +1,3 @@ - + diff --git a/apps/doc/src/app/about-prizm/contacts/contacts.component.html b/apps/doc/src/app/about-prizm/contacts/contacts.component.html index b3bd9e6a34..68cf953765 100644 --- a/apps/doc/src/app/about-prizm/contacts/contacts.component.html +++ b/apps/doc/src/app/about-prizm/contacts/contacts.component.html @@ -1,386 +1,131 @@ - +

Способы связи

- - - -

Для связи с командой Prizm можно воспользоваться следующими способами:

-
    -
  1. - С помощью отправки письма на электронный почтовый ящик – - prizm@zyfra.com -
    2. -
  2. - С помощью Issue - способ описан на странице - Сontributing -
    3. -
-

- Скорость реакции и сроки реакции указаны в пункте "SLA – соглашение об уровне услуг" (См. ниже). -

-

- Регистрация запросов производится круглосуточно. Рабочее время 9.00 до 18.00 (время московское), - перерыв с 12.00 до 13.00, в рабочие дни. Запросы, поступившие в нерабочее время, обрабатываются в - следующий рабочий день. -

-
-

Важно!

-

На каждую задачу – свое письмо.

-
- - - - -

- При получении письма на prizm@zyfra.com срабатывает процесс: -

-
    -
  1. Создаётся задача в Jira
    2. -
  2. В зависимости от первого слова в теме письма тикет получает свой тип (bug, feature и т.д.)
    3. -
  3. Задача в Jira назначается на исполнителя
    4. -
  4. Новая задача линкуется к эпику в Jira
    5. -
  5. - Минимум один раз в три рабочих дня мы проверяем и разбираем новые задачи, которые поступают нам - через почту и issue из репозитория -
    6. -
  6. - После разбора задач, каждой задачи присваивает статус, которая команда считает верным, задача - планируется в работу. -
    7. -
- - - - -

Правильное заполнение темы и содержимого повышает скорость обработки.

-
    -
  1. Тему нужно начинать с одного из типа тикетов.
    2. -
  2. Писать тип этикета в теме нужно на англиском языке.
    3. -
  3. Остальную часть темы можно на русском.
    4. -
  4. В теме важно отразить суть.
    5. -
  5. Используйте здравый смысл и критическое мышление.
    6. -
  6. Если есть сложности с определением типа тикета, то выбирайте «question».
    7. -
  7. - Обязательно укажите как с вами связаться. Оптимальнее всего указать электронную почту и telegram. -
    8. -
- - - - - - - - - - - - - - - -
Тип тикетаРасшифровка
{{ item.name }}{{ item.description }}
- - - - -

- Пример темы: question. У нас есть самописная диаграмма Санкея. Хотим её передать - вам на поддержку. -

-

Содержимое письма

-
    -
  1. - Статус (по вашему мнению) -
      -
    1. 🔴 Высокий
      2. -
    2. 🟠 Средний
      3. -
    3. 🟡 Низкий
      4. -
    -
    2. -
  2. - Описание проблемы -
      -
    1. - Мы использовали свою диаграмму Санкея. Разработали её. Сейчас нет возможности её поддерживать. - Она соответствует вашим требованиям к компоненту. Узнали, что такие же требования к самой - диаграмме есть у других команд. -
      2. -
    -
    3. -
  3. - Предложение решения (если есть) -
      -
    1. Мы хотим передать её вам на поддержку. Сможете её принять?
      2. -
    -
    4. -
  4. - Контакты -
      -
    1. name@name.com
      2. -
    2. @telegram
      3. -
    -
    5. -
  5. - Дополнительная информация и ссылки -
      -
    1. Можем обсудить это. Наша почта и телега в контактах. Во вложении ФТ.
      2. -
    2. Ссылка 1 - это репозиторий
      3. -
    3. Ссылка 2 - это видео работы
      4. -
    4. - Ссылка 3 – это видео с котиками, чтобы не было стресса от просмотра нашего - кода. -
      5. -
    -
    6. -
- - - - -

- Настоящее соглашение определяет политику взаимоотношений при использовании дизайн-системы Prizm. -

-

Ссылки в скором времени будут актуализированы

- -

1. Лицензия

-

- Дизайн-система Prizm и часть* её зависимых компонентов распространяются под открытой - лицензией MIT, текст лицензионного соглашения дублируется непосредственно в самих - репозиториях. -

-

- * некоторые части дизайн-системы Prizm, например, картографический виджет, виджет управления - наряд-заказами и другие, могут лицензироваться самостоятельно и отсутствовать в публичном доступе. -

- -

2. Стратегия версионирования

-

2.1 Схема версионирования

-

- Во всех зависимых компонентах экосистемы Цифры применяется стратегия - [RFC] Prizm Версионирование. -

-

- Использование дополнительных постфиксов для предварительных релизов и сборок с мета-обозначениями - допускается, но сохранение в них обратной совместимости не гарантируется, поскольку эти версии не - являются конечными. -

- -

2.2 Жизненный цикл версий

-

- Основной фокус делается на поддержку и стабилизацию крайней major-версии, а пересмотр предложений, - которые потенциально нарушают обратную совместимость, допускается не чаще чем раз в полгода для - отдельно взятого компонента. Отчетный период начинается с даты последнего релиза. -

- -

2.3 Механизм оповещений

-

- 2.3.1 Для оперативного информирования о новых версиях ведется - канал в Telegram. -

-

- 2.3.2 Для получения сводной информации обо всех изменениях в программном коде рекомендуется - использовать механизм 🔗наблюдения за проектом. -

-

- 2.3.3 В случаях, когда сохранение обратной совместимости невозможно в силу наличия потенциальных - уязвимостей или серьезных проблем с производительностью применяется механизм 🔗 - deprecated. -

- -

2.4 История версий

-

- Полная история изменений по всем версиям продуктов доступна на 🔗страницах с - релизами. -

- -

3. Доступность и поддержка

-

Направления, за которые отвечает команда Prizm:

-
    -
  1. Исправление критических дефектов.
    2. -
  2. Стратегическое планирование.
    3. -
  3. - Поддержка и развитие информационных ресурсов -
      -
    1. Основной информационный ресурс
      2. -
    2. Витрина компонентов
      3. -
    3. - Библиотека компонентов в Figma Community -
      4. -
    4. Исходный код библиотеки компонентов
      5. -
    5. Информационный канал в Telegram
      6. -
    -
    4. -
-

- Задачи информационного наполнения, расширения функциональности и исправления незначительных дефектов - мы стараемся раздеделять с нашими контрибьюторами. -

- -

4. Системные ограничения

-

4.1 Браузеры

-

- Ориентируйтесь на то, что все основные компоненты дизайн-системы протестированы и корректно - отображаются в браузерах, которые поддерживает Angular. Это включает в себя следующие конкретные - версии браузеров: -

- - - - - - - - - - - - - - - - -
БраузерПоддреживаемые версии
{{ item.name }}{{ item.description }}
- -

4.2 Разрешения экранов

-

- Разрешение экранов, которые смело можно учитывать при проектировании интерфейсов для полноразмерных - устройств: 1280×720, 1366×768, 1440×900, 1920×1080. -

- -

5. Типы тикетов и порядок их заведения

-

- Дефекты, запросы на новую функциональность или вопросы оформляются в виде 🔗тикета на GitHub - или письмом на prizm@zyfra.com. -

-

Возможные типы тикетов:

- - - - - - - - - - - - - - - - -
Тип тикетаРасшифровка
{{ item.name }}{{ item.description }}
-

- 🔗 - Рекомендации оформления - тикетов: -

-
    -
  1. - При создании тикетов с типом bug необходимо использовать шаблон оформления баг-репорта (Bug - report). -
    2. -
  2. - При создании тикетов с типами feature или improvement необходимо использовать шаблон запроса фичи - или улучшения (Feature request). -
    3. -
- -

6. Время реагирования

-

В течение 5 рабочих дней с момента появления нового тикета применяется следующий алгоритм:

-
    -
  1. Если тикет понятен, и вопросов нет, ему присваивается тип и приоритет.
    2. -
  2. - Если для правильной категоризации тикета требуются уточнения (обсуждение происходит в - комментариях), то тип и приоритет присваиваются после получения ответов. -
    3. -
- -

6.1 Как определяется приоритет

-

На приоритет тикета влияют следующие факторы:

-
    -
  1. - Потребность проектов Цифровой индустриальной платформы (совместное предприятие ГЦ «Цифра» и ПАО - «Газпром нефть»). -
    2. -
  2. Экспертное мнение команды дизайн-системы Prizm.
    3. -
  3. Популярность компонента в других системах
    4. -
  4. Подробное описание с понятными формулировками проблем или предложений.
    5. -
  5. Высокая активность пользователей.
    6. -
- -

7. Сроки реализации*

-

Сроки реализации тикетов зависят от категории и приоритета:

-
    -
  1. - Если за реализацию берется команда Prizm, то сроки реализации будут соответствовать представленным - в таблице ниже. -
    2. -
  2. Если за реализацию берется внешняя команда, то сроки реализации могут отличаться.
    3. -
  3. - Если реализация задачи требует предварительного исследования или дизайна, то создается отдельная - задача с меткой research или design. -
    4. -
- - - - - - - - - - - - - - - - - - -
ПриоритетКатегорияРеализация
{{ item.priority }}{{ item.name }}{{ item.description }}
- -

8. Актуализация бэклога

-

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

- -

8.1 Причины закрытия тикетов

-

В рамках актуализации бэклога тикет может быть закрыт по следующим причинам:

-
    -
  1. Дубликат.
    2. -
  2. Задача уже реализована.
    3. -
  3. Входит в другой тикет.
    4. -
  4. Задача потеряла актуальность.
    5. -
  5. Не получены ответы на уточняющие вопросы или неполное описание.
    6. -
  6. Обоснованный отказ команды Prizm.
    7. -
- -

9. Запросы на принятие изменений

-

- Изменения и доработки, предлагаемые контрибьютерами, 🔗оформляются в виде 🔗запросов на принятие изменений -

-

- При появлении нового PR/MR команда Prizm в течение двух рабочих дней проводит 🔗ревью - и, при отсутствии критичных замечаний, принимает PR/MR. -

-

- К мержу допускаются PR/MR, получившие не менее двух аппрувов. Изменения включаются в следующий - релиз. Релизы выпускаются раз в две недели. День недели будет определен похже опытным путём. -

- - - +

Введение

+ +

Для связи с командой Prizm можно воспользоваться следующими способами:

+
    +
  1. + С помощью отправки письма на электронный почтовый ящик – + prizm@zyfra.com +
    2. +
  2. + С помощью Issue - способ описан на странице + Сontributing +
    3. +
+

+ Скорость реакции и сроки реакции указаны на странице + "SLA – соглашение об уровне услуг". +

+

+ Регистрация запросов производится круглосуточно. Рабочее время 9.00 до 18.00 (время московское), перерыв с + 12.00 до 13.00, в рабочие дни. Запросы, поступившие в нерабочее время, обрабатываются в следующий рабочий + день. +

+
+

Важно!

+

На каждую задачу – свое письмо.

+
+ +

Как это работает

+ +

При получении письма на prizm@zyfra.com срабатывает процесс:

+
    +
  1. Создаётся задача в Jira
    2. +
  2. В зависимости от первого слова в теме письма тикет получает свой тип (bug, feature и т.д.)
    3. +
  3. Задача в Jira назначается на исполнителя
    4. +
  4. Новая задача линкуется к эпику в Jira
    5. +
  5. + Минимум один раз в три рабочих дня мы проверяем и разбираем новые задачи, которые поступают нам через + почту и issue из репозитория +
    6. +
  6. + После разбора задач, каждой задачи присваивает статус, которая команда считает верным, задача + планируется в работу. +
    7. +
+ +

Шаблон письма

+ +

Правильное заполнение темы и содержимого повышает скорость обработки.

+
    +
  1. Тему нужно начинать с одного из типа тикетов.
    2. +
  2. Писать тип этикета в теме нужно на англиском языке.
    3. +
  3. Остальную часть темы можно на русском.
    4. +
  4. В теме важно отразить суть.
    5. +
  5. Используйте здравый смысл и критическое мышление.
    6. +
  6. Если есть сложности с определением типа тикета, то выбирайте «question».
    7. +
  7. Обязательно укажите как с вами связаться. Оптимальнее всего указать электронную почту и telegram.
    8. +
+ + + + + + + + + + + + + + + + +
Тип тикетаРасшифровка
{{ item.name }}{{ item.description }}
+ +

Пример письма

+ +

+ Пример темы: question. У нас есть самописная диаграмма Санкея. Хотим её передать вам на + поддержку. +

+

Содержимое письма

+
    +
  1. + Статус (по вашему мнению) +
      +
    1. 🔴 Высокий
      2. +
    2. 🟠 Средний
      3. +
    3. 🟡 Низкий
      4. +
    +
    2. +
  2. + Описание проблемы +
      +
    1. + Мы использовали свою диаграмму Санкея. Разработали её. Сейчас нет возможности её поддерживать. Она + соответствует вашим требованиям к компоненту. Узнали, что такие же требования к самой диаграмме есть + у других команд. +
      2. +
    +
    3. +
  3. + Предложение решения (если есть) +
      +
    1. Мы хотим передать её вам на поддержку. Сможете её принять?
      2. +
    +
    4. +
  4. + Контакты +
      +
    1. name@name.com
      2. +
    2. @telegram
      3. +
    +
    5. +
  5. + Дополнительная информация и ссылки +
      +
    1. Можем обсудить это. Наша почта и телега в контактах. Во вложении ФТ.
      2. +
    2. Ссылка 1 - это репозиторий
      3. +
    3. Ссылка 2 - это видео работы
      4. +
    4. + Ссылка 3 – это видео с котиками, чтобы не было стресса от просмотра нашего кода. +
      5. +
    +
    6. +
diff --git a/apps/doc/src/app/about-prizm/contacts/contacts.component.less b/apps/doc/src/app/about-prizm/contacts/contacts.component.less index 75bbffec4c..744f2e63d6 100644 --- a/apps/doc/src/app/about-prizm/contacts/contacts.component.less +++ b/apps/doc/src/app/about-prizm/contacts/contacts.component.less @@ -1,7 +1,3 @@ -a { - color: blue; -} - .examleLinks { a { pointer-events: none; @@ -13,24 +9,3 @@ a { border-radius: 5px; padding: 10px; } -.warning-agreement { - color: #ff6600; - font-style: italic; -} - -.addition { - color: #b1acb5; - font-style: italic; -} - -.disc { - li { - list-style-type: disc; - } -} - -.decimal { - li { - list-style-type: decimal; - } -} diff --git a/apps/doc/src/app/about-prizm/contacts/contacts.component.ts b/apps/doc/src/app/about-prizm/contacts/contacts.component.ts index 59dfb1f649..5b0d33dd4f 100644 --- a/apps/doc/src/app/about-prizm/contacts/contacts.component.ts +++ b/apps/doc/src/app/about-prizm/contacts/contacts.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { environment } from './../../../environments/environment'; export interface ITableProduct { name: string; @@ -14,6 +15,8 @@ export interface ITableProduct { changeDetection: ChangeDetectionStrategy.OnPush, }) export class ContactsComponent { + public storybookBaseUrl = environment.storybookBaseUrl; + public columns: string[] = ['code', 'name', 'description']; public labelTypes: ITableProduct[] = TABLE_LABEL_TYPES; diff --git a/apps/doc/src/app/about-prizm/contacts/contacts.module.ts b/apps/doc/src/app/about-prizm/contacts/contacts.module.ts index 59259981d5..6063f77392 100644 --- a/apps/doc/src/app/about-prizm/contacts/contacts.module.ts +++ b/apps/doc/src/app/about-prizm/contacts/contacts.module.ts @@ -1,13 +1,16 @@ -import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; import { PrizmAccordionModule, PrizmTableModule } from '@prizm-ui/components'; -import { PrizmAddonDocModule } from '@prizm-ui/doc'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; import { ContactsComponent } from './contacts.component'; @NgModule({ exports: [ContactsComponent], declarations: [ContactsComponent], - imports: [CommonModule, PrizmTableModule, FormsModule, PrizmAccordionModule, PrizmAddonDocModule], + imports: [ + PrizmTableModule, + PrizmAddonDocModule, + RouterModule.forChild(prizmDocGenerateRoutes(ContactsComponent)), + ], }) export class ContactsModule {} diff --git a/apps/doc/src/app/about-prizm/design-system/design-system.component.html b/apps/doc/src/app/about-prizm/design-system/design-system.component.html index ed45a92473..ba33f72228 100644 --- a/apps/doc/src/app/about-prizm/design-system/design-system.component.html +++ b/apps/doc/src/app/about-prizm/design-system/design-system.component.html @@ -1 +1,98 @@ -

design-system works!

+ +

+ Дизайн-система «PRIZM» представляет собой симбиоз дизайн-системы Spectr (ГПН БЛПС) и + дизайн-системы ZIIoT design system 3.0, учитывает специфику промышленности, где представлена платформа, + наш прошлый опыт и рынок, куда мы хотим попасть. Prizm распространяется по типу + лицензии MIT и подходит для создания цифровых + продуктов, включая бизнес-приложения поверх платформы ZIIoT. По сути, это единый визуальный язык и его + техническое отражение в виде библиотеки компонентов в одном общем хранилище. Он не имеет отношения к + back-end, а скорее представляет собой документ, объединяющий в себе информацию о решениях и требованиях, + которые должны быть использованы при разработке и обновлении частей платформы и прикладных решений на + ZIIoT. На него необходимо будет ссылаться при разработке технических заданий, руководств пользователя и + прочих документов. +

+ +

Для кого

+ +
    +
  1. Аналитиков
    2. +
  2. Руководителей проектов
    3. +
  3. Проектировщиков
    4. +
  4. Владельцев продуктов
    5. +
  5. Дизайнеров
    6. +
  6. Тестировщиков
    7. +
  7. Разработчиков
    8. +
  8. Технических писателей
    9. +
+ +

Из чего состоит дизайн-система

+ +
    +
  1. Библиотека интерфейсных компонентов
    2. +
  2. Библиотке компонентов в Figma
    3. +
  3. Правила, рекомендации, гайдлайны, патерны, шаблоны, витрина компонентов.
    4. +
  4. Философия к дизайну, разработке, поддержке.
    5. +
  5. Команда Prizm.
    6. +
+
+
+

ЦЕЛЬ СОЗДАНИЯ

+
    +
  1. Снижение стоимости разработки
    2. +
  2. Снижение стоимости дизайна
    3. +
  3. Унификация множества интерфейсов
    4. +
+
+
+

ПРИЧИНА СОЗДАНИЯ

+
    +
  1. Разрозненность решений
    2. +
  2. Отсутствие единого источника правды
    3. +
  3. Поиски лучших решений в каждом проекте
    4. +
+
+
+

ЗАДАЧИ ДИЗАЙН-СИСТЕМЫ

+
    +
  1. Стандартизация решений
    2. +
  2. Независимость проектов от состава команд
    3. +
  3. Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»
    4. +
  4. Снижение затрат на поддержку, развитие и запуск продуктов
    5. +
  5. Повышает узнаваемость бренда
    6. +
+
+
+

ПОЧЕМУ В ЭТОМ ЕСТЬ ЦЕННОСТЬ

+
    +
  1. Экономит время на дизайн / разработку
    2. +
  2. Динамична и легко обновляемая
    3. +
  3. Стандартизирует интерфейсы и минимизирует баги
    4. +
  4. Служит готовым конструктором
    5. +
  5. Легко масштабируется
    6. +
+
+
+

ПРИНЦИПЫ

+
    +
  1. Единый UX в продуктах
    2. +
  2. Масштабируемость
    3. +
  3. Дизайн на основе данных
    4. +
  4. Локализация
    5. +
  5. Сохранение интересов продукта
    6. +
  6. Развитие и потенциал для эволюции
    7. +
  7. Универсальность
    8. +
+
+
+

КАКИЕ ПРЕИМУЩЕСТВА ПОЛУЧАЕМ

+
    +
  1. Обучаемость пользователей
    2. +
  2. Переиспользование графических элементов, паттернов
    3. +
  3. Единообразие компонентов
    4. +
  4. Удешевление тестирования
    5. +
  5. Переиспользование кода / единые компоненты на технологическом уровне
    6. +
  6. Структурированность
    7. +
+
+
+ diff --git a/apps/doc/src/app/about-prizm/design-system/design-system.component.less b/apps/doc/src/app/about-prizm/design-system/design-system.component.less index e69de29bb2..6a7c6a5278 100644 --- a/apps/doc/src/app/about-prizm/design-system/design-system.component.less +++ b/apps/doc/src/app/about-prizm/design-system/design-system.component.less @@ -0,0 +1,3 @@ +h4 { + margin-top: 0; +} diff --git a/apps/doc/src/app/about-prizm/design-system/design-system.component.ts b/apps/doc/src/app/about-prizm/design-system/design-system.component.ts index 8b2a6db143..dd2731a781 100644 --- a/apps/doc/src/app/about-prizm/design-system/design-system.component.ts +++ b/apps/doc/src/app/about-prizm/design-system/design-system.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { environment } from './../../../environments/environment'; @Component({ selector: 'prizm-design-system', @@ -6,4 +7,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; styleUrls: ['./design-system.component.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DesignSystemComponent {} +export class DesignSystemComponent { + public storybookBaseUrl: string = environment.storybookBaseUrl; +} diff --git a/apps/doc/src/app/about-prizm/design-system/design-system.module.ts b/apps/doc/src/app/about-prizm/design-system/design-system.module.ts new file mode 100644 index 0000000000..038bd76272 --- /dev/null +++ b/apps/doc/src/app/about-prizm/design-system/design-system.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { DesignSystemComponent } from './design-system.component'; + +@NgModule({ + exports: [DesignSystemComponent], + declarations: [DesignSystemComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(DesignSystemComponent))], +}) +export class DesignSystemModule {} diff --git a/apps/doc/src/app/about-prizm/release-policy/release-policy.component.html b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.html new file mode 100644 index 0000000000..a1aea239ae --- /dev/null +++ b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.html @@ -0,0 +1,3 @@ + +

Эта страница сейчас в работе

+ diff --git a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.less b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.less similarity index 100% rename from apps/doc/src/app/how-to-start/for-designers/for-designers.component.less rename to apps/doc/src/app/about-prizm/release-policy/release-policy.component.less diff --git a/apps/doc/src/app/about-prizm/release-policy/release-policy.component.spec.ts b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.spec.ts new file mode 100644 index 0000000000..a4e664a340 --- /dev/null +++ b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReleasePolicyComponent } from './release-policy.component'; + +describe('ReleasePolicyComponent', () => { + let component: ReleasePolicyComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ReleasePolicyComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ReleasePolicyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/about-prizm/release-policy/release-policy.component.ts b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.ts new file mode 100644 index 0000000000..afffdedb93 --- /dev/null +++ b/apps/doc/src/app/about-prizm/release-policy/release-policy.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-release-policy', + templateUrl: './release-policy.component.html', + styleUrls: ['./release-policy.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ReleasePolicyComponent {} diff --git a/apps/doc/src/app/about-prizm/release-policy/release-policy.module.ts b/apps/doc/src/app/about-prizm/release-policy/release-policy.module.ts new file mode 100644 index 0000000000..216f31b8d6 --- /dev/null +++ b/apps/doc/src/app/about-prizm/release-policy/release-policy.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { ReleasePolicyComponent } from './release-policy.component'; + +@NgModule({ + exports: [ReleasePolicyComponent], + declarations: [ReleasePolicyComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(ReleasePolicyComponent))], +}) +export class ReleasePolicyModule {} diff --git a/apps/doc/src/app/about-prizm/repositories/repositories.component.html b/apps/doc/src/app/about-prizm/repositories/repositories.component.html new file mode 100644 index 0000000000..66fab8d241 --- /dev/null +++ b/apps/doc/src/app/about-prizm/repositories/repositories.component.html @@ -0,0 +1,105 @@ + +

+ Библиотеки дизайн-системы Prizm для разработчиков написаны на Angular и хранятся в репозиториях на GitHub + — в открытом доступе. +

+
+
+

Репозитории

+
    +
  1. http://github.com/zyfra/Prizm - репозиторий
    2. +
  2. + https://gitlab.idp.yc.ziiot.ru/public-group/zui-sdk + - репозиторий +
    3. +
+
+
+

Figma Community

+
    +
  1. + Prizm. Компоненты +
    2. +
  2. + Prizm. Описания +
    3. +
  3. + Prizm. Icons V2 +
    4. +
  4. + 🎨 Dark theme 4.0 +
    5. +
  5. + 🎨 Light theme 4.0 +
    6. +
+
+
+

Figma Zyfra Organization

+
    +
  1. + Prizm. Компоненты +
    2. +
  2. + Prizm. Описания +
    3. +
  3. + Prizm. Icon for designer +
    4. +
  4. + 🎨 Dark theme 4.0 +
    5. +
  5. + 🎨 Light theme 4.0 +
    6. +
+
+
+

Главные ссылки

+
    +
  1. prizm.zyfra.com – главная страница Prizm
    2. +
  2. + doc.prizm.zyfra.com – витрина. Примеры работающих + компонентов +
    3. +
  3. github.com/zyfra/Prizm – репозиторий
    4. +
  4. Телеграм-канал с новостями и релизами
    5. +
  5. + https://ziiot-dev-11.kube01.yc.ziiot.ru – + внутренний полигон +
    6. +
  6. + Figma: + Prizm design system +
      +
    1. + Проект: — + Prizm design system +
      2. +
    +
    7. +
+
+
+

О релизах

+

+ https://github.com/zyfra/Prizm/releases – + подпишитесь на страницу +

+
+
+ diff --git a/apps/doc/src/app/about-prizm/repositories/repositories.component.less b/apps/doc/src/app/about-prizm/repositories/repositories.component.less new file mode 100644 index 0000000000..1c00b3fdf5 --- /dev/null +++ b/apps/doc/src/app/about-prizm/repositories/repositories.component.less @@ -0,0 +1,15 @@ +prizm-doc-page.info-page { + .doc-cell { + flex-basis: 100%; + } + + .halfSize { + flex-basis: 50%; + flex: 1 1 calc((100% / 2) - 2rem); + } +} + +h4 { + padding: 0; + margin: 0; +} diff --git a/apps/doc/src/app/about-prizm/repositories/repositories.component.spec.ts b/apps/doc/src/app/about-prizm/repositories/repositories.component.spec.ts new file mode 100644 index 0000000000..e762a69001 --- /dev/null +++ b/apps/doc/src/app/about-prizm/repositories/repositories.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RepositoriesComponent } from './repositories.component'; + +describe('RepositoriesComponent', () => { + let component: RepositoriesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RepositoriesComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RepositoriesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/about-prizm/repositories/repositories.component.ts b/apps/doc/src/app/about-prizm/repositories/repositories.component.ts new file mode 100644 index 0000000000..351e9e24f0 --- /dev/null +++ b/apps/doc/src/app/about-prizm/repositories/repositories.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-repositories', + templateUrl: './repositories.component.html', + styleUrls: ['./repositories.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class RepositoriesComponent {} diff --git a/apps/doc/src/app/about-prizm/repositories/repositories.module.ts b/apps/doc/src/app/about-prizm/repositories/repositories.module.ts new file mode 100644 index 0000000000..3b81e65679 --- /dev/null +++ b/apps/doc/src/app/about-prizm/repositories/repositories.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { RepositoriesComponent } from './repositories.component'; + +@NgModule({ + exports: [RepositoriesComponent], + declarations: [RepositoriesComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(RepositoriesComponent))], +}) +export class RepositoriesModule {} diff --git a/apps/doc/src/app/about-prizm/roadmap/roadmap.component.html b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.html new file mode 100644 index 0000000000..4dccfad557 --- /dev/null +++ b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.html @@ -0,0 +1,6 @@ + +

+ Сейчас мы работаем над интеграцией github и jira. После завершения работы в GitHub будет доступна дорожная + карта по этой ссылке. +

+ diff --git a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.less b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.less similarity index 100% rename from apps/doc/src/app/how-to-start/for-developers/for-developers.component.less rename to apps/doc/src/app/about-prizm/roadmap/roadmap.component.less diff --git a/apps/doc/src/app/about-prizm/roadmap/roadmap.component.spec.ts b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.spec.ts new file mode 100644 index 0000000000..7fa1d337c1 --- /dev/null +++ b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoadmapComponent } from './roadmap.component'; + +describe('RoadmapComponent', () => { + let component: RoadmapComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RoadmapComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RoadmapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/about-prizm/roadmap/roadmap.component.ts b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.ts new file mode 100644 index 0000000000..13caa9723e --- /dev/null +++ b/apps/doc/src/app/about-prizm/roadmap/roadmap.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-roadmap', + templateUrl: './roadmap.component.html', + styleUrls: ['./roadmap.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class RoadmapComponent {} diff --git a/apps/doc/src/app/about-prizm/roadmap/roadmap.module.ts b/apps/doc/src/app/about-prizm/roadmap/roadmap.module.ts new file mode 100644 index 0000000000..b739d5ebb5 --- /dev/null +++ b/apps/doc/src/app/about-prizm/roadmap/roadmap.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { RoadmapComponent } from './roadmap.component'; + +@NgModule({ + exports: [RoadmapComponent], + declarations: [RoadmapComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(RoadmapComponent))], +}) +export class RoadmapModule {} diff --git a/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.html b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.html new file mode 100644 index 0000000000..6bcbddd4c8 --- /dev/null +++ b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.html @@ -0,0 +1,236 @@ + +

Настоящее соглашение определяет политику взаимоотношений при использовании дизайн-системы Prizm.

+

Ссылки в скором времени будут актуализированы

+ +

1. Лицензия

+

+ Дизайн-система Prizm и часть* её зависимых компонентов распространяются под открытой + лицензией MIT, текст лицензионного соглашения дублируется непосредственно в самих + репозиториях. +

+

+ * некоторые части дизайн-системы Prizm, например, картографический виджет, виджет управления + наряд-заказами и другие, могут лицензироваться самостоятельно и отсутствовать в публичном доступе. +

+ +

2. Стратегия версионирования

+

2.1 Схема версионирования

+

+ Во всех зависимых компонентах экосистемы Цифры применяется стратегия + [RFC] Prizm Версионирование. +

+

+ Использование дополнительных постфиксов для предварительных релизов и сборок с мета-обозначениями + допускается, но сохранение в них обратной совместимости не гарантируется, поскольку эти версии не являются + конечными. +

+ +

2.2 Жизненный цикл версий

+

+ Основной фокус делается на поддержку и стабилизацию крайней major-версии, а пересмотр предложений, которые + потенциально нарушают обратную совместимость, допускается не чаще чем раз в полгода для отдельно взятого + компонента. Отчетный период начинается с даты последнего релиза. +

+ +

2.3 Механизм оповещений

+

+ 2.3.1 Для оперативного информирования о новых версиях ведется + канал в Telegram. +

+

+ 2.3.2 Для получения сводной информации обо всех изменениях в программном коде рекомендуется использовать + механизм 🔗наблюдения за проектом. +

+

+ 2.3.3 В случаях, когда сохранение обратной совместимости невозможно в силу наличия потенциальных + уязвимостей или серьезных проблем с производительностью применяется механизм 🔗 + deprecated. +

+ +

2.4 История версий

+

Полная история изменений по всем версиям продуктов доступна на 🔗страницах с релизами.

+ +

3. Доступность и поддержка

+

Направления, за которые отвечает команда Prizm:

+
    +
  1. Исправление критических дефектов.
    2. +
  2. Стратегическое планирование.
    3. +
  3. + Поддержка и развитие информационных ресурсов +
      +
    1. Основной информационный ресурс
      2. +
    2. Витрина компонентов
      3. +
    3. + Библиотека компонентов в Figma Community +
      4. +
    4. Исходный код библиотеки компонентов
      5. +
    5. Информационный канал в Telegram
      6. +
    +
    4. +
+

+ Задачи информационного наполнения, расширения функциональности и исправления незначительных дефектов мы + стараемся раздеделять с нашими контрибьюторами. +

+ +

4. Системные ограничения

+

4.1 Браузеры

+

+ Ориентируйтесь на то, что все основные компоненты дизайн-системы протестированы и корректно отображаются в + браузерах, которые поддерживает Angular. Это включает в себя следующие конкретные версии браузеров: +

+ + + + + + + + + + + + + + + + +
БраузерПоддреживаемые версии
{{ item.name }}{{ item.description }}
+ +

4.2 Разрешения экранов

+

+ Разрешение экранов, которые смело можно учитывать при проектировании интерфейсов для полноразмерных + устройств: 1280×720, 1366×768, 1440×900, 1920×1080. +

+ +

5. Типы тикетов и порядок их заведения

+

+ Дефекты, запросы на новую функциональность или вопросы оформляются в виде 🔗тикета на GitHub + или письмом на prizm@zyfra.com. +

+

Возможные типы тикетов:

+ + + + + + + + + + + + + + + + +
Тип тикетаРасшифровка
{{ item.name }}{{ item.description }}
+

+ 🔗 + Рекомендации оформления + тикетов: +

+
    +
  1. + При создании тикетов с типом bug необходимо использовать шаблон оформления баг-репорта (Bug report). +
    2. +
  2. + При создании тикетов с типами feature или improvement необходимо использовать шаблон запроса фичи или + улучшения (Feature request). +
    3. +
+ +

6. Время реагирования

+

В течение 5 рабочих дней с момента появления нового тикета применяется следующий алгоритм:

+
    +
  1. Если тикет понятен, и вопросов нет, ему присваивается тип и приоритет.
    2. +
  2. + Если для правильной категоризации тикета требуются уточнения (обсуждение происходит в комментариях), то + тип и приоритет присваиваются после получения ответов. +
    3. +
+ +

6.1 Как определяется приоритет

+

На приоритет тикета влияют следующие факторы:

+
    +
  1. + Потребность проектов Цифровой индустриальной платформы (совместное предприятие ГЦ «Цифра» и ПАО «Газпром + нефть»). +
    2. +
  2. Экспертное мнение команды дизайн-системы Prizm.
    3. +
  3. Популярность компонента в других системах
    4. +
  4. Подробное описание с понятными формулировками проблем или предложений.
    5. +
  5. Высокая активность пользователей.
    6. +
+ +

7. Сроки реализации*

+

Сроки реализации тикетов зависят от категории и приоритета:

+
    +
  1. + Если за реализацию берется команда Prizm, то сроки реализации будут соответствовать представленным в + таблице ниже. +
    2. +
  2. Если за реализацию берется внешняя команда, то сроки реализации могут отличаться.
    3. +
  3. + Если реализация задачи требует предварительного исследования или дизайна, то создается отдельная задача + с меткой research или design. +
    4. +
+ + + + + + + + + + + + + + + + + + +
ПриоритетКатегорияРеализация
{{ item.priority }}{{ item.name }}{{ item.description }}
+ +

8. Актуализация бэклога

+

+ Актуализация бэклога и пересмотр приоритетов всех тикетов происходит не более трёх раз в квартал. По + итогам пересмотра приоритет тикета может быть как поднят, так и понижен. +

+ +

8.1 Причины закрытия тикетов

+

В рамках актуализации бэклога тикет может быть закрыт по следующим причинам:

+
    +
  1. Дубликат.
    2. +
  2. Задача уже реализована.
    3. +
  3. Входит в другой тикет.
    4. +
  4. Задача потеряла актуальность.
    5. +
  5. Не получены ответы на уточняющие вопросы или неполное описание.
    6. +
  6. Обоснованный отказ команды Prizm.
    7. +
+ +

9. Запросы на принятие изменений

+

+ Изменения и доработки, предлагаемые контрибьютерами, 🔗оформляются в виде 🔗запросов на принятие изменений +

+

+ При появлении нового PR/MR команда Prizm в течение двух рабочих дней проводит 🔗ревью + и, при отсутствии критичных замечаний, принимает PR/MR. +

+

+ К мержу допускаются PR/MR, получившие не менее двух аппрувов. Изменения включаются в следующий релиз. + Релизы выпускаются раз в две недели. День недели будет определен похже опытным путём. +

+ diff --git a/apps/doc/src/app/how-to-start/migration/migration.component.less b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.less similarity index 100% rename from apps/doc/src/app/how-to-start/migration/migration.component.less rename to apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.less diff --git a/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.spec.ts b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.spec.ts new file mode 100644 index 0000000000..02d71963ca --- /dev/null +++ b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServiceLevelAgreementComponent } from './service-level-agreement.component'; + +describe('ServiceLevelAgreementComponent', () => { + let component: ServiceLevelAgreementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ServiceLevelAgreementComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ServiceLevelAgreementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.ts b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.ts new file mode 100644 index 0000000000..12f18f1809 --- /dev/null +++ b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.component.ts @@ -0,0 +1,206 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +export interface ITableProduct { + name: string; + description: string; + priority: string | null; + children?: ITableProduct[]; +} + +@Component({ + selector: 'prizm-service-level-agreement', + templateUrl: './service-level-agreement.component.html', + styleUrls: ['./service-level-agreement.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ServiceLevelAgreementComponent { + public columns: string[] = ['code', 'name', 'description']; + + public labelTypes: ITableProduct[] = TABLE_LABEL_TYPES; + public browserVersions: ITableProduct[] = TABLE_BROWSER_VERSIONS; + public implementationTimeline: ITableProduct[] = TABLE_IMPLEMENTATION_TIMELINE; +} + +const TABLE_LABEL_TYPES: ITableProduct[] = [ + { + name: 'bug', + description: 'Дефект', + priority: null, + }, + { + name: 'design', + description: 'Задача на дизайн', + priority: null, + }, + { + name: 'docs', + description: 'Доработка или добавление документации', + priority: null, + }, + { + name: 'feature', + description: 'Новый функционал', + priority: null, + }, + { + name: 'improvement', + description: 'Улучшение', + priority: null, + }, + { + name: 'question', + description: 'Вопрос', + priority: null, + }, + { + name: 'research', + description: 'Исследование или анализ', + priority: null, + }, + { + name: 'test', + description: 'Задачи на тестирование или покрытие тестами', + priority: null, + }, + { + name: 'charts', + description: 'Задача относится к библиотеке графиков', + priority: null, + }, + { + name: 'widgets', + description: 'Задача относится к библиотеке виджетов', + priority: null, + }, + { + name: 'duplicate', + description: 'Дублирующаяся задача', + priority: null, + }, +]; + +const TABLE_BROWSER_VERSIONS: ITableProduct[] = [ + { + name: 'Chrome', + description: 'последняя и предыдущая стабильная версия', + priority: null, + }, + { + name: 'Firefox', + description: 'последняя и расширенная поддержка (ESR)', + priority: null, + }, + { + name: 'Edge', + description: '2 последние основные версии', + priority: null, + }, + { + name: 'Safari', + description: '2 последние основные версии', + priority: null, + }, + { + name: 'iOS', + description: '2 последние основные версии', + priority: null, + }, + { + name: 'android', + description: '2 последние основные версии', + priority: null, + }, +]; + +const TABLE_IMPLEMENTATION_TIMELINE: ITableProduct[] = [ + { + name: 'bug', + description: '10 рабочих дней', + priority: 'Высокий', + }, + { + name: 'feature', + description: '30 рабочих дней', + priority: 'Высокий', + }, + { + name: 'improvement', + description: '30 рабочих дней', + priority: 'Высокий', + }, + { + name: 'docs', + description: '30 рабочих дней', + priority: 'Высокий', + }, + { + name: 'design', + description: '30 рабочих дней', + priority: 'Высокий', + }, + { + name: 'question', + description: '3 рабочих дня', + priority: 'Высокий', + }, + { + name: 'bug', + description: '20 рабочих дней', + priority: 'Средний', + }, + { + name: 'feature', + description: '60 рабочих дней', + priority: 'Средний', + }, + { + name: 'improvement', + description: '60 рабочих дней', + priority: 'Средний', + }, + { + name: 'docs', + description: '60 рабочих дней', + priority: 'Средний', + }, + { + name: 'design', + description: '60 рабочих дней', + priority: 'Средний', + }, + { + name: 'question', + description: '5 рабочих дней', + priority: 'Средний', + }, + { + name: 'bug', + description: '3 месяца', + priority: 'Низкий', + }, + { + name: 'feature', + description: 'неопределенное время (пересмотр приоритета 1 раз в квартал)', + priority: 'Низкий', + }, + { + name: 'improvement', + description: 'неопределенное время (пересмотр приоритета 1 раз в квартал)', + priority: 'Низкий', + }, + { + name: 'docs', + description: 'неопределенное время (пересмотр приоритета 1 раз в квартал)', + priority: 'Низкий', + }, + { + name: 'design', + description: 'неопределенное время (пересмотр приоритета 1 раз в квартал)', + priority: 'Низкий', + }, + { + name: 'question', + description: '5 рабочих дней', + priority: 'Низкий', + }, +]; diff --git a/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.module.ts b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.module.ts new file mode 100644 index 0000000000..31a436c81a --- /dev/null +++ b/apps/doc/src/app/about-prizm/service-level-agreement/service-level-agreement.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAccordionModule, PrizmTableModule } from '@prizm-ui/components'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { ServiceLevelAgreementComponent } from './service-level-agreement.component'; + +@NgModule({ + exports: [ServiceLevelAgreementComponent], + declarations: [ServiceLevelAgreementComponent], + imports: [ + PrizmAddonDocModule, + PrizmTableModule, + PrizmAccordionModule, + RouterModule.forChild(prizmDocGenerateRoutes(ServiceLevelAgreementComponent)), + ], +}) +export class ServiceLevelAgreementModule {} diff --git a/apps/doc/src/app/about-prizm/technology-list/technology-list.component.html b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.html new file mode 100644 index 0000000000..90cdd42846 --- /dev/null +++ b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.html @@ -0,0 +1,3 @@ + +

Эта страница сейчас в работе

+ diff --git a/apps/doc/src/app/about-prizm/technology-list/technology-list.component.less b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/documentation/getting-started/getting-started.component.spec.ts b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.spec.ts similarity index 50% rename from apps/doc/src/app/documentation/getting-started/getting-started.component.spec.ts rename to apps/doc/src/app/about-prizm/technology-list/technology-list.component.spec.ts index 0926166ee1..4de572e488 100644 --- a/apps/doc/src/app/documentation/getting-started/getting-started.component.spec.ts +++ b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.spec.ts @@ -1,19 +1,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { GettingStartedComponent } from './getting-started.component'; +import { TechnologyListComponent } from './technology-list.component'; -xdescribe('GettingStartedComponent', () => { - let component: GettingStartedComponent; - let fixture: ComponentFixture; +describe('TechnologyListComponent', () => { + let component: TechnologyListComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [GettingStartedComponent], + declarations: [TechnologyListComponent], }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(GettingStartedComponent); + fixture = TestBed.createComponent(TechnologyListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/apps/doc/src/app/about-prizm/technology-list/technology-list.component.ts b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.ts new file mode 100644 index 0000000000..1e2c00942c --- /dev/null +++ b/apps/doc/src/app/about-prizm/technology-list/technology-list.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-technology-list', + templateUrl: './technology-list.component.html', + styleUrls: ['./technology-list.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TechnologyListComponent {} diff --git a/apps/doc/src/app/about-prizm/technology-list/technology-list.module.ts b/apps/doc/src/app/about-prizm/technology-list/technology-list.module.ts new file mode 100644 index 0000000000..f286df5fd6 --- /dev/null +++ b/apps/doc/src/app/about-prizm/technology-list/technology-list.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { TechnologyListComponent } from './technology-list.component'; + +@NgModule({ + exports: [TechnologyListComponent], + declarations: [TechnologyListComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(TechnologyListComponent))], +}) +export class TechnologyListModule {} diff --git a/apps/doc/src/app/app.module.ts b/apps/doc/src/app/app.module.ts index 61abe7b740..0cbb9207d7 100644 --- a/apps/doc/src/app/app.module.ts +++ b/apps/doc/src/app/app.module.ts @@ -1,7 +1,6 @@ import { LOCALE_ID, NgModule, SecurityContext } from '@angular/core'; import { PrizmAddonDocModule, PrizmDocMainModule } from '@prizm-ui/doc'; import { AppComponent } from './app.component'; -import { GettingStartedComponent } from './documentation/getting-started/getting-started.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutes } from './app.routes'; @@ -23,16 +22,22 @@ import { APP_PROVIDERS } from './app.providers'; import { PrizmDocLogoModule } from './logo/logo.module'; import { VersionManagerModule } from './version-manager/version-manager.module'; import { HttpClient, HttpClientModule } from '@angular/common/http'; -import { AboutComponent } from './documentation/about/about.component'; import { registerLocaleData } from '@angular/common'; import localeRu from '@angular/common/locales/ru'; -import { DesignSystemComponent } from './about-prizm/design-system/design-system.component'; -import { ForDesignersComponent } from './how-to-start/for-designers/for-designers.component'; -import { ForDevelopersComponent } from './how-to-start/for-developers/for-developers.component'; -import { MigrationComponent } from './how-to-start/migration/migration.component'; import { PrizmAccordionModule, PrizmToastModule, PrizmToggleModule } from '@prizm-ui/components'; import { PrizmThemeService } from '@prizm-ui/theme'; import { ContactsModule } from './about-prizm/contacts/contacts.module'; +import { DesignSystemModule } from './about-prizm/design-system/design-system.module'; +import { ForDevelopersModule } from './how-to-work/for-developers/for-developers.module'; +import { ReleasePolicyModule } from './about-prizm/release-policy/release-policy.module'; +import { ServiceLevelAgreementModule } from './about-prizm/service-level-agreement/service-level-agreement.module'; +import { RoadmapModule } from './about-prizm/roadmap/roadmap.module'; +import { TechnologyListModule } from './about-prizm/technology-list/technology-list.module'; +import { TransitionModule } from './how-to-work/transition/transition.module'; +import { AddComponentModule } from './how-to-work/add-component/add-component.module'; +import { SetTaskModule } from './how-to-work/set-task/set-task.module'; +import { IntroductionModule } from './forZIIoT/introduction/introduction.module'; +import { LibraryRequirementsModule } from './forZIIoT/library-requirements/library-requirements.module'; registerLocaleData(localeRu); @NgModule({ @@ -59,21 +64,24 @@ registerLocaleData(localeRu); PrizmToastModule, HttpClientModule, PrizmAccordionModule, + DesignSystemModule, + ForDevelopersModule, + ContactsModule, + ReleasePolicyModule, + ServiceLevelAgreementModule, + RoadmapModule, + TechnologyListModule, + TransitionModule, + AddComponentModule, + SetTaskModule, + IntroductionModule, + LibraryRequirementsModule, MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE, }), - ContactsModule, - ], - declarations: [ - AppComponent, - GettingStartedComponent, - AboutComponent, - DesignSystemComponent, - ForDesignersComponent, - ForDevelopersComponent, - MigrationComponent, ], + declarations: [AppComponent], providers: [{ provide: LOCALE_ID, useValue: 'ru-RU' }, ...APP_PROVIDERS], }) export class AppModule { diff --git a/apps/doc/src/app/app.providers.ts b/apps/doc/src/app/app.providers.ts index f637a69838..e19850ca77 100644 --- a/apps/doc/src/app/app.providers.ts +++ b/apps/doc/src/app/app.providers.ts @@ -113,8 +113,8 @@ export const APP_PROVIDERS = [ function sortDocPages(pages: PrizmOrderedDocPage): (PrizmDocPage | PrizmDocPageGroup)[] { const ordering = { [SectionNameEnum.allAboutPrizm]: 0, - [SectionNameEnum.guidelines]: 1, - [SectionNameEnum.howToStart]: 2, + [SectionNameEnum.howToWork]: 1, + [SectionNameEnum.guidelines]: 2, [SectionNameEnum.components]: 3, [SectionNameEnum.charts]: 4, [SectionNameEnum.tools]: 5, diff --git a/apps/doc/src/app/app.routes.ts b/apps/doc/src/app/app.routes.ts index 0f3abb0c54..51bcafefc3 100644 --- a/apps/doc/src/app/app.routes.ts +++ b/apps/doc/src/app/app.routes.ts @@ -1,14 +1,18 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { ContactsComponent } from './about-prizm/contacts/contacts.component'; -import { DesignSystemComponent } from './about-prizm/design-system/design-system.component'; -import { GettingStartedComponent } from './documentation/getting-started/getting-started.component'; -import { MigrationComponent } from './how-to-start/migration/migration.component'; export const ROUTES: Routes = [ { path: 'about-prizm', children: [ + { + path: 'design-system', + loadChildren: (): Promise => + import('./about-prizm/design-system/design-system.module').then(i => i.DesignSystemModule), + data: { + title: 'About Design System', + }, + }, { path: 'license', loadChildren: (): Promise => @@ -17,6 +21,48 @@ export const ROUTES: Routes = [ title: 'License', }, }, + { + path: 'repositories', + loadChildren: (): Promise => + import('./about-prizm/repositories/repositories.module').then(m => m.RepositoriesModule), + data: { + title: 'Repositories', + }, + }, + { + path: 'contacts', + loadChildren: (): Promise => + import('./about-prizm/contacts/contacts.module').then(i => i.ContactsModule), + data: { + title: 'Contacts', + }, + }, + { + path: 'release-policy', + loadChildren: (): Promise => + import('./about-prizm/release-policy/release-policy.module').then(i => i.ReleasePolicyModule), + data: { + title: 'Release policy', + }, + }, + { + path: 'service-level-agreement', + loadChildren: (): Promise => + import('./about-prizm/service-level-agreement/service-level-agreement.module').then( + i => i.ServiceLevelAgreementModule + ), + data: { + title: 'Service level agreement', + }, + }, + { + path: 'roadmap', + loadChildren: (): Promise => + import('./about-prizm/roadmap/roadmap.module').then(i => i.RoadmapModule), + data: { + title: 'Roadmap', + }, + }, { path: 'changelog', loadChildren: (): Promise => @@ -26,71 +72,131 @@ export const ROUTES: Routes = [ }, }, { - path: 'design-system', - component: DesignSystemComponent, + path: 'technology-list', + loadChildren: (): Promise => + import('./about-prizm/technology-list/technology-list.module').then(i => i.TechnologyListModule), data: { - title: 'About Design System', + title: 'Technology list', }, }, + ], + }, + //How to work + { + path: 'how-to-work', + children: [ { - path: 'contacts', - component: ContactsComponent, + path: 'for-developers', + loadChildren: (): Promise => + import('./how-to-work/for-developers/for-developers.module').then(i => i.ForDevelopersModule), data: { - title: 'Contacts', + title: 'For developers', + }, + }, + { + path: 'transition', + loadChildren: (): Promise => + import('./how-to-work/transition/transition.module').then(i => i.TransitionModule), + data: { + title: 'Transition', + }, + }, + { + path: 'add-component', + loadChildren: (): Promise => + import('./how-to-work/add-component/add-component.module').then(i => i.AddComponentModule), + data: { + title: 'Add component', + }, + }, + { + path: 'set-task', + loadChildren: (): Promise => + import('./how-to-work/set-task/set-task.module').then(i => i.SetTaskModule), + data: { + title: 'Set task', + }, + }, + { + path: 'contributing', + loadChildren: (): Promise => + import('./how-to-work/contributing/contributing.module').then(i => i.ContributingModule), + data: { + title: 'Contributing', }, }, + { + path: 'codestyle', + loadChildren: (): Promise => + import('./how-to-work/codestyle/codestyle.module').then(i => i.CodestyleModule), + data: { + title: 'CodeStyle', + }, + }, + { + path: '**', + redirectTo: 'for-developers', + }, ], }, - //Guidelines + //For ZIIoT { - path: 'guidelines', + path: 'forZIIoT', children: [ { - path: 'typography', + path: 'introduction', loadChildren: (): Promise => - import('./guidelines/typography/typography.module').then(m => m.TypographyModule), + import('./forZIIoT/introduction/introduction.module').then(i => i.IntroductionModule), data: { - title: 'Typography', + title: 'Introduction', }, }, { - path: 'colors', + path: 'library-requirements', loadChildren: (): Promise => - import('./guidelines/colors/colors.module').then(m => m.ColorsModule), + import('./forZIIoT/library-requirements/library-requirements.module').then( + i => i.LibraryRequirementsModule + ), data: { - title: 'Colors', + title: 'Library requirements', }, }, { - path: 'grid', - loadChildren: (): Promise => import('./guidelines/grid/grid.module').then(m => m.GridModule), + path: 'migration', + loadChildren: (): Promise => + import('./forZIIoT/migration/migration.module').then(i => i.MigrationModule), data: { - title: 'Grid', + title: 'Migration', }, }, ], }, - //How to start + //Guidelines { - path: 'how-to-start', + path: 'guidelines', children: [ { - path: 'for-developers', - component: GettingStartedComponent, + path: 'typography', + loadChildren: (): Promise => + import('./guidelines/typography/typography.module').then(m => m.TypographyModule), data: { - title: 'For developers', + title: 'Typography', }, }, { - path: 'migration', - component: MigrationComponent, + path: 'colors', + loadChildren: (): Promise => + import('./guidelines/colors/colors.module').then(m => m.ColorsModule), data: { - title: 'Migration', + title: 'Colors', }, }, { - path: '**', - redirectTo: 'for-developers', + path: 'grid', + loadChildren: (): Promise => import('./guidelines/grid/grid.module').then(m => m.GridModule), + data: { + title: 'Grid', + }, }, ], }, @@ -103,22 +209,6 @@ export const ROUTES: Routes = [ title: 'Generate example', }, }, - { - path: 'contributing', - loadChildren: (): Promise => - import('./documentation/contributing/contributing.module').then(i => i.ContributingModule), - data: { - title: 'Contributing', - }, - }, - { - path: 'codestyle', - loadChildren: (): Promise => - import('./documentation/codestyle/codestyle.module').then(i => i.CodestyleModule), - data: { - title: 'CodeStyle', - }, - }, // COMPONENTS { path: 'components/dropdowns/dropdown-host', @@ -792,7 +882,7 @@ export const ROUTES: Routes = [ title: 'File upload', }, }, - { path: '**', redirectTo: 'how-to-start/' }, + { path: '**', redirectTo: 'how-to-work/' }, ]; @NgModule({ diff --git a/apps/doc/src/app/components/table/table-example.const.ts b/apps/doc/src/app/components/table/table-example.const.ts index 801ef4231e..c0ab8335c6 100644 --- a/apps/doc/src/app/components/table/table-example.const.ts +++ b/apps/doc/src/app/components/table/table-example.const.ts @@ -1,184 +1,184 @@ -import { ITableProduct } from './examples/table-basic-example/table-basic-example.component'; - -export const TABLE_EXAMPLE_DATA_1: ITableProduct[] = [ - { - code: '1', - name: 'Name 1', - category: 'Premium', - count: 3000, - }, - { - code: '2', - name: 'Name 2', - category: 'Active', - count: 123, - status: 'success', - }, - { - code: '3', - name: 'Name 3', - category: 'Sport', - count: 56000, - status: 'success', - }, - { - code: '4', - name: 'Name 4', - category: 'Sport+', - count: 539, - }, - { - code: '5', - name: 'Name 5', - category: 'Premium', - count: 23, - status: 'danger', - }, - { - code: '6', - name: 'Name 6', - category: 'Premium', - count: 99, - }, - { - code: '7', - name: 'Name 7', - category: 'Premium', - count: 23, - status: 'warning', - }, - { - code: '8', - name: 'Name 8 that will be the longest name ever', - category: 'Premium', - count: 99, - }, - { - code: '9', - name: 'Name 5', - category: 'Premium', - count: 23, - }, - { - code: '10', - name: 'Name 6', - category: 'Premium', - count: 99, - }, -]; - -export const TABLE_EXAMPLE_DATA_2: ITableProduct[] = [ - { - code: '12143', - name: 'Name 1', - category: 'Premium', - count: 3000, - }, - { - code: '452346', - name: 'Name 2', - category: 'Active', - count: 123, - }, - { - code: '78292', - name: 'Name 2', - category: 'Sport', - count: 500, - status: 'danger', - }, - { - code: '1532254', - name: 'Name 4', - category: 'Sport+', - count: 579, - status: 'danger', - }, - { - code: '16704', - name: 'Name 523', - category: 'Premium', - count: 213, - status: 'danger', - }, - { - code: '3482', - name: 'Name 623', - category: 'Premium', - count: 199, - }, - { - code: '123412', - name: 'Name 89839', - category: 'Premium', - count: 231, - status: 'warning', - }, -]; - -export const TABLE_EXAMPLE_DATA_SEARCH: ITableProduct[] = [ - { - code: '8', - name: 'Углексилый газ', - category: 'Premium', - count: 99, - }, - { - code: '1', - name: 'Полиуретан', - category: 'Premium', - count: 3000, - }, - { - code: '2', - name: 'Полиэстер', - category: 'Active', - count: 123, - status: 'success', - }, - { - code: '3', - name: 'Эпоксидная смола', - category: 'Sport', - count: 56000, - status: 'success', - }, - { - code: '4', - name: 'Пропант', - category: 'Sport+', - count: 539, - }, - { - code: '5', - name: 'Полибетон', - category: 'Premium', - count: 23, - status: 'danger', - }, - { - code: '6', - name: 'Полиуретан', - category: 'Premium', - count: 99, - }, - { - code: '7', - name: 'Пропант', - category: 'Premium', - count: 23, - status: 'warning', - }, - { - code: '9', - name: 'Водород', - category: 'Premium', - count: 23, - }, - { - code: '10', - name: 'Компаунд', - category: 'Premium', - count: 99, - }, -]; +import { ITableProduct } from './examples/table-basic-example/table-basic-example.component'; + +export const TABLE_EXAMPLE_DATA_1: ITableProduct[] = [ + { + code: '1', + name: 'Name 1', + category: 'Premium', + count: 3000, + }, + { + code: '2', + name: 'Name 2', + category: 'Active', + count: 123, + status: 'success', + }, + { + code: '3', + name: 'Name 3', + category: 'Sport', + count: 56000, + status: 'success', + }, + { + code: '4', + name: 'Name 4', + category: 'Sport+', + count: 539, + }, + { + code: '5', + name: 'Name 5', + category: 'Premium', + count: 23, + status: 'danger', + }, + { + code: '6', + name: 'Name 6', + category: 'Premium', + count: 99, + }, + { + code: '7', + name: 'Name 7', + category: 'Premium', + count: 23, + status: 'warning', + }, + { + code: '8', + name: 'Name 8 that will be the longest name ever', + category: 'Premium', + count: 99, + }, + { + code: '9', + name: 'Name 5', + category: 'Premium', + count: 23, + }, + { + code: '10', + name: 'Name 6', + category: 'Premium', + count: 99, + }, +]; + +export const TABLE_EXAMPLE_DATA_2: ITableProduct[] = [ + { + code: '12143', + name: 'Name 1', + category: 'Premium', + count: 3000, + }, + { + code: '452346', + name: 'Name 2', + category: 'Active', + count: 123, + }, + { + code: '78292', + name: 'Name 2', + category: 'Sport', + count: 500, + status: 'danger', + }, + { + code: '1532254', + name: 'Name 4', + category: 'Sport+', + count: 579, + status: 'danger', + }, + { + code: '16704', + name: 'Name 523', + category: 'Premium', + count: 213, + status: 'danger', + }, + { + code: '3482', + name: 'Name 623', + category: 'Premium', + count: 199, + }, + { + code: '123412', + name: 'Name 89839', + category: 'Premium', + count: 231, + status: 'warning', + }, +]; + +export const TABLE_EXAMPLE_DATA_SEARCH: ITableProduct[] = [ + { + code: '8', + name: 'Углексилый газ', + category: 'Premium', + count: 99, + }, + { + code: '1', + name: 'Полиуретан', + category: 'Premium', + count: 3000, + }, + { + code: '2', + name: 'Полиэстер', + category: 'Active', + count: 123, + status: 'success', + }, + { + code: '3', + name: 'Эпоксидная смола', + category: 'Sport', + count: 56000, + status: 'success', + }, + { + code: '4', + name: 'Пропант', + category: 'Sport+', + count: 539, + }, + { + code: '5', + name: 'Полибетон', + category: 'Premium', + count: 23, + status: 'danger', + }, + { + code: '6', + name: 'Полиуретан', + category: 'Premium', + count: 99, + }, + { + code: '7', + name: 'Пропант', + category: 'Premium', + count: 23, + status: 'warning', + }, + { + code: '9', + name: 'Водород', + category: 'Premium', + count: 23, + }, + { + code: '10', + name: 'Компаунд', + category: 'Premium', + count: 99, + }, +]; diff --git a/apps/doc/src/app/documentation/about/about.module.ts b/apps/doc/src/app/documentation/about/about.module.ts new file mode 100644 index 0000000000..56059d4bf7 --- /dev/null +++ b/apps/doc/src/app/documentation/about/about.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from '@angular/core'; +import { AboutComponent } from './about.component'; + +@NgModule({ + exports: [AboutComponent], + declarations: [AboutComponent], + imports: [], +}) +export class AboutModule {} diff --git a/apps/doc/src/app/documentation/getting-started/getting-started.component.html b/apps/doc/src/app/documentation/getting-started/getting-started.component.html deleted file mode 100644 index b06645ee38..0000000000 --- a/apps/doc/src/app/documentation/getting-started/getting-started.component.html +++ /dev/null @@ -1,72 +0,0 @@ -

Default install:

- -

- You can easily install Prizm UI using Angular CLI by running the following command: -

- - - -

Manual install:

-
-

- Required - > Install theme and core: -

- - - -
- -
-

- Optional - > Install helpers: -

- - -
- -
-

- Optional - > Install components: -

- - -
- -
-

- Optional - > Install charts library: -

- - -
- - - - -

Add our styles to angular config:

- -
-

Or you can add to your root styles.less

- - - - - - - - -

To use our icons as svg, please install our library

- -

- But if you want to use fonts not only as svg, and also as font, please add to your angular config -

- - or you can only import to your root styles.less - - - - diff --git a/apps/doc/src/app/documentation/getting-started/getting-started.component.ts b/apps/doc/src/app/documentation/getting-started/getting-started.component.ts deleted file mode 100644 index e5ff7b453b..0000000000 --- a/apps/doc/src/app/documentation/getting-started/getting-started.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; - -@Component({ - selector: 'prizm-getting-started', - templateUrl: './getting-started.component.html', - styleUrls: ['./getting-started.component.less'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class GettingStartedComponent { - public readonly joinSvgFonts = ` - "styles": [ - ... - "@prizm-ui/icons/base/src/styles/styles.less" - ],"; - `; - public readonly joinSvgFontsForImport = `@import "~@prizm-ui/icons/base/src/styles/styles.less"; - `; - public readonly updateAngularStylesFileCode = ` -// (Required) Add for use our theme -@import "~@prizm-ui/theme/src/styles/styles.less"; -// (Optional) Add only for use our components library -@import "~@prizm-ui/components/src/styles/styles.less"; - -// (Optional) Add only for use our old icon set (deprecated) -@import "~@prizm-ui/components/src/styles/icons/icons.less"; -@import "~@prizm-ui/components/src/styles/icons-16/icons-16.less"; - `; - public readonly updateAngularStylesCode = ` - "assets": [ - // .... - ], - "styles": [ - // (Required) Add for use our theme - "node_modules/@prizm-ui/theme/src/styles/styles.less", - // (Optional) Add for use our components - "node_modules/@prizm-ui/components/src/styles/styles.less", - // (Optional) Add only for use our old icon set (deprecated) - "node_modules/@prizm-ui/components/src/styles/icons/icons.less", - "node_modules/@prizm-ui/components/src/styles/icons-16/icons-16.less" - ], - `; -} diff --git a/apps/doc/src/app/forZIIoT/introduction/introduction.component.html b/apps/doc/src/app/forZIIoT/introduction/introduction.component.html new file mode 100644 index 0000000000..e701ac9145 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/introduction/introduction.component.html @@ -0,0 +1,32 @@ + +

Установка

+

+ Следуйте ручной установке: + http://doc.prizm.zyfra.com/how-to-start/for-developers +

+ +

Особенность для ZIIoT приложения

+

+ Ресурсы которые не доступны необходимо переопределить согласно вашему baseHref приложения.
+ Проблема описана в [RFC] КБ Предоставление стилей для иконочных шрифтов
+ Например: +

+ + +

Runtime

+

CSS переменные

+

+ Если есть потребность изменить переменную, делайте это
+ ✅ на уровне своего приложения.
+ ❌ менять в рут ничего нельзя! +

+ +

Темизация

+

+ Для подписки от AppShell на темы следует подписаться на соответствующее событие из ShellPropertiesCore и + обновить тему в самом Prizm. Например так: +

+ + diff --git a/apps/doc/src/app/forZIIoT/introduction/introduction.component.less b/apps/doc/src/app/forZIIoT/introduction/introduction.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/forZIIoT/introduction/introduction.component.spec.ts b/apps/doc/src/app/forZIIoT/introduction/introduction.component.spec.ts new file mode 100644 index 0000000000..97b092c929 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/introduction/introduction.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IntroductionComponent } from './introduction.component'; + +describe('IntroductionComponent', () => { + let component: IntroductionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [IntroductionComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(IntroductionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/forZIIoT/introduction/introduction.component.ts b/apps/doc/src/app/forZIIoT/introduction/introduction.component.ts new file mode 100644 index 0000000000..31c6268ecc --- /dev/null +++ b/apps/doc/src/app/forZIIoT/introduction/introduction.component.ts @@ -0,0 +1,39 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { environment } from './../../../environments/environment'; + +@Component({ + selector: 'prizm-introduction', + templateUrl: './introduction.component.html', + styleUrls: ['./introduction.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class IntroductionComponent { + public storybookBaseUrl = environment.storybookBaseUrl; + public readonly featuresForZIIoT = ` + @font-face { + font-family: 'PrizmIcons'; + src: local('Prizm Icons'),url('/hostDtdrto/Prizm.woff2') format('woff2'),url('/hostDtdrto/Prizm.woff') format('woff'),url('/hostDtdrto/Prizm.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + - добавляют дополнительно baseHref где лежит ресурс: + /hostDtdrto + `; + public readonly themization = ` + private readonly themeService: PrizmThemeService, + + this.shellPropertiesCore + .getProperty(ShellProperty.Theme) + .pipe(takeUntil(this.destroy$)) + .subscribe((theme) => { + if(theme) { + if (theme.className === 'light-theme') { + this.themeService.update('light'); + } + if (theme.className === 'dark-theme') { + this.themeService.update('dark'); + } + } + }); + `; +} diff --git a/apps/doc/src/app/forZIIoT/introduction/introduction.module.ts b/apps/doc/src/app/forZIIoT/introduction/introduction.module.ts new file mode 100644 index 0000000000..fd276904f1 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/introduction/introduction.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { IntroductionComponent } from './introduction.component'; + +@NgModule({ + exports: [IntroductionComponent], + declarations: [IntroductionComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(IntroductionComponent))], +}) +export class IntroductionModule {} diff --git a/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.html b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.html new file mode 100644 index 0000000000..f9bd632af5 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.html @@ -0,0 +1,89 @@ + +

+ Требования которые необходимо соблюдать при вводе общих библиотек в платформу. Все требования основаны на + том что у нас один контекст, одно окружение, одни общие ресурсы, один экран браузера. +

+
    +
  1. Изолированный контекст выполнений функции
    2. +
  2. Изолированные ресурсы (шрифты, css, img)
    3. +
  3. Общие ресурсы должны быть под версиями и не влиять на общий scope.
    4. +
+

Какие фреймворки/библиотеки/решения предоставляют из коробки, и пытаются решить эти требования:

+ +

Angular

+
    +
  1. + ViewEncapsulation.Emulated по + умолчанию +
    2. +
  2. изоляция scope компонентов
    3. +
  3. Нужно вводить ограничения чтобы не декларировать в глобальные области видимости ресурсы
    4. +
+ +

React

+
    +
  1. CSS in JS
    2. +
  2. изоляция scope компонентов
    3. +
  3. Много подходов для написание стилей и холиваров по ним
    4. +
  4. Ресурсы берутся всегда по разному, кучу loader по разному регистрируют свои ресурсы по разному
    5. +
  5. -Нужно вводить ограничения чтобы не декларировать в глобальные области видимости ресурсы
    6. +
+ +

Vue

+
    +
  1. Scoped css
    2. +
  2. изоляция scope компонентов
    3. +
  3. +/- приходят к стандартизации и изоляции на своих собственных сборщиках
    4. +
  4. Нужно вводить ограничения чтобы не декларировать в глобальные области видимости ресурсы
    5. +
+ +

Custom Elements, Shadow dom (lit-element, stencil, …)

+
    +
  1. Styles по дефолту изолированы из коробки
    2. +
  2. можно писать на любом фреймворке и использовать их
    3. +
  3. + декларирует элементы в глобальном скоупе, и мы лишаемся версионирования и жестко привязываем версию либы + ко всей платформе +
    4. +
  4. легко написать функцию в глобальной области видимости.
    5. +
  5. + в 2 раза медленее работают + https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/ +
    6. +
  6. сложно тестировать, доступ до элементов в e2e усложняется
    7. +
+ +

Angular elements

+
    +
  1. Можно перевести КБ на кастомные элементы и начать юзать во всех фреймворках
    2. +
  2. много весят
    3. +
  3. проблемы из Custom Elements
    4. +
+ +

Краткий обзор по разным КБ, фреймворкам:

+
    +
  1. Angular Material - хорош в плане изоляции стилей и легок для изменения.
    2. +
  2. + PrimeNG - был хорош для 2016, так как из JQuery слезали на него, но из за подхода + декларировать в глобальном скоупе стили, имеет более 500 issue в GitHub, которые в принципе не будут + исправлять. В платформе часто возникали вопросы про темизацию, и как все мешали друг другу. +
    3. +
  3. + TaigaUI -с овременная UI библиотека на Angular, изоляция контекста и стилей на уровне. +
    4. +
  4. + Stencil - фреймворк, продукт Ionic, которые решали свою проблему по созданию приложений + на мобилку под разные фреймворки, отсюда и игнорирование ограничений. +
    5. +
  5. + Clarity - UI библиотека на Angular, делает упор на Html+css first, отсюда и проблемы + разных версии. +
    6. +
  6. + Prizm - современная UI библиотека на Angular, учитывающий требования к платформе, под + нашу дизайн-систему +
    7. +
+ diff --git a/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.less b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.spec.ts b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.spec.ts new file mode 100644 index 0000000000..250f35493f --- /dev/null +++ b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LibraryRequirementsComponent } from './library-requirements.component'; + +describe('LibraryRequirementsComponent', () => { + let component: LibraryRequirementsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [LibraryRequirementsComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LibraryRequirementsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.ts b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.ts new file mode 100644 index 0000000000..a0bbd4c06e --- /dev/null +++ b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-library-requirements', + templateUrl: './library-requirements.component.html', + styleUrls: ['./library-requirements.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class LibraryRequirementsComponent {} diff --git a/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.module.ts b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.module.ts new file mode 100644 index 0000000000..bd6c6a3294 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/library-requirements/library-requirements.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { LibraryRequirementsComponent } from './library-requirements.component'; + +@NgModule({ + exports: [LibraryRequirementsComponent], + declarations: [LibraryRequirementsComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(LibraryRequirementsComponent))], +}) +export class LibraryRequirementsModule {} diff --git a/apps/doc/src/app/how-to-start/migration/migration.component.html b/apps/doc/src/app/forZIIoT/migration/migration.component.html similarity index 86% rename from apps/doc/src/app/how-to-start/migration/migration.component.html rename to apps/doc/src/app/forZIIoT/migration/migration.component.html index b31c9857b6..f32dbc3235 100644 --- a/apps/doc/src/app/how-to-start/migration/migration.component.html +++ b/apps/doc/src/app/forZIIoT/migration/migration.component.html @@ -1,4 +1,4 @@ - + We later add migration guides from previous ui library to Prizm.
Please wait for a while. diff --git a/apps/doc/src/app/forZIIoT/migration/migration.component.less b/apps/doc/src/app/forZIIoT/migration/migration.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/how-to-start/migration/migration.component.spec.ts b/apps/doc/src/app/forZIIoT/migration/migration.component.spec.ts similarity index 96% rename from apps/doc/src/app/how-to-start/migration/migration.component.spec.ts rename to apps/doc/src/app/forZIIoT/migration/migration.component.spec.ts index a170fced97..f6ba1e3942 100644 --- a/apps/doc/src/app/how-to-start/migration/migration.component.spec.ts +++ b/apps/doc/src/app/forZIIoT/migration/migration.component.spec.ts @@ -1,26 +1,26 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MigrationComponent } from './migration.component'; - -describe('MigrationComponent', () => { - let component: MigrationComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [MigrationComponent], - schemas: [NO_ERRORS_SCHEMA], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MigrationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MigrationComponent } from './migration.component'; + +describe('MigrationComponent', () => { + let component: MigrationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [MigrationComponent], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MigrationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/how-to-start/migration/migration.component.ts b/apps/doc/src/app/forZIIoT/migration/migration.component.ts similarity index 72% rename from apps/doc/src/app/how-to-start/migration/migration.component.ts rename to apps/doc/src/app/forZIIoT/migration/migration.component.ts index 49431ffb24..427b4b8fe1 100644 --- a/apps/doc/src/app/how-to-start/migration/migration.component.ts +++ b/apps/doc/src/app/forZIIoT/migration/migration.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'prizm-migration', diff --git a/apps/doc/src/app/forZIIoT/migration/migration.module.ts b/apps/doc/src/app/forZIIoT/migration/migration.module.ts new file mode 100644 index 0000000000..8953e41b64 --- /dev/null +++ b/apps/doc/src/app/forZIIoT/migration/migration.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { MigrationComponent } from './migration.component'; + +@NgModule({ + exports: [MigrationComponent], + declarations: [MigrationComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(MigrationComponent))], +}) +export class MigrationModule {} diff --git a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.html b/apps/doc/src/app/how-to-start/for-designers/for-designers.component.html deleted file mode 100644 index 94415df161..0000000000 --- a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.html +++ /dev/null @@ -1 +0,0 @@ -

for-designers works!

diff --git a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.ts b/apps/doc/src/app/how-to-start/for-designers/for-designers.component.ts deleted file mode 100644 index ceb5e1630c..0000000000 --- a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; - -@Component({ - selector: 'prizm-for-designers', - templateUrl: './for-designers.component.html', - styleUrls: ['./for-designers.component.less'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ForDesignersComponent {} diff --git a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.html b/apps/doc/src/app/how-to-start/for-developers/for-developers.component.html deleted file mode 100644 index b6afcb9230..0000000000 --- a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.html +++ /dev/null @@ -1 +0,0 @@ -

for-developers works!

diff --git a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.ts b/apps/doc/src/app/how-to-start/for-developers/for-developers.component.ts deleted file mode 100644 index 9f73be9621..0000000000 --- a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; - -@Component({ - selector: 'prizm-for-developers', - templateUrl: './for-developers.component.html', - styleUrls: ['./for-developers.component.less'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ForDevelopersComponent {} diff --git a/apps/doc/src/app/how-to-work/add-component/add-component.component.html b/apps/doc/src/app/how-to-work/add-component/add-component.component.html new file mode 100644 index 0000000000..773f322e3f --- /dev/null +++ b/apps/doc/src/app/how-to-work/add-component/add-component.component.html @@ -0,0 +1,106 @@ + +

+ Дизайн-система Prizm постоянно развивается, появляются новые компоненты. Вы можете внести свой вклад и + познакомить других участников со своими наработками, предложить добавить новый компонент. Отправьте нам + предложение, мы его рассмотрим и примем решение. +

+ +

Зачем это нужно

+

+ Только вместе можно сделать хорошо. Нет смысла ждать когда всё будет готово. К этому времени всё устареет. +

+ +

Как отправить предложение

+

Это зависит от состояния, в котором находится новый компонент.

+
    +
  1. Есть только идея — поставьте задачу.
    2. +
  2. Готов дизайн — отправьте ссылку на макет, в задаче или на почту.
    3. +
  3. Готов код компонента — отправьте PR.
    4. +
+

+ Напишите нам. В статье «Способы связи с командой Prizm» (Confluence) / Связаться с командой есть + варианты как это сделать. +

+ +

Кто разрабатывает новые компоненты

+
    +
  1. Команда Prizm может взять разработку на себя.
    2. +
  2. Ваша команда может самостоятельно разработать компонент и передаёт его в Prizm.
    3. +
+

+ Кто будет заниматься разработкой, договариваемся в процессе согласования — когда уже решено, что компонент + войдёт в дизайн-систему Prizm. Всё зависит от загрузки, приоритетов, востребованности. +

+ +

Как проходит согласование

+
    +
  1. + Вы отправляете информацию, напишите нам, в статье «Способы связи с командой Prizm» (Confluence) / Связаться с командой есть + варианты как это сделать. +
    2. +
  2. Мы обсуждаем, даём обратную связь (дизайн, код и так далее).
    3. +
  3. Успех.
    4. +
+ +

Примерный план

+ +

ЭТАП 1

+

Принимаем решение

+
    +
  1. Оцениваем популярность компонента: смотрим, есть ли еще запросы на его разработку.
    2. +
  2. + Составляем описание API и описываем, как компонент будет использоваться — на примерах, чтобы лучше + понимать, как всё работает и зачем это нужно. +
    3. +
  3. + Смотрим, что уже готово: если вы прислали PR, проверяем его, смотрим, есть ли в нём примеры + использования и тесты. +
    4. +
+

+ После этого этапа становится понятно, что это за компонент и нужно ли его добавлять в дизайн-систему. + Договариваемся, кто его разрабатывает — вы или команда Prizm. +

+ +

ЭТАП 2

+

Разрабатываем и обсуждаем новый компонент

+
    +
  1. Разрабатываем компонент в дизайне и в коде.
    2. +
  2. Приглашаем сообщество к обсуждению.
    3. +
+ +

ЭТАП 3

+

Проверяем готовый компонент и проводим ревью

+
    +
  1. Проводим ревью кода и устраняем все замечания.
    2. +
  2. Команда дизайн-системы подтверждает, что компонент можно включить в состав основной библиотеки.
    3. +
+ +

ЭТАП 4

+

Публикуем релиз

+
    +
  1. Собираем релизный пакет для выкладки.
    2. +
  2. Публикуем информацию о релизе.
    3. +
+

Готово! Компонент включён в библиотеку, можно использовать.

+ +

Зачем нужно согласование

+

+ Мы хотим сделать понятную процедуру с чёткими этапами, чтобы все участники разработки компонентов + понимали, что происходит и что будет дальше. А заодно: +

+
    +
  1. Получаем качественный код и документацию.
    2. +
  2. Поддерживаем семантическое версионирование всех изменений.
    3. +
  3. Контролируем время на разработку новых предложений.
    4. +
  4. Следим за тем, кто и чем пользуется.
    5. +
  5. Храним все предложения о разработке новых компонентов в одном месте.
    6. +
  6. Снижаем количество уровней принятия решений.
    7. +
+

Со временем у нас появится инструкция с необходимыми шагами и комментариями.

+ diff --git a/apps/doc/src/app/how-to-work/add-component/add-component.component.less b/apps/doc/src/app/how-to-work/add-component/add-component.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.spec.ts b/apps/doc/src/app/how-to-work/add-component/add-component.component.spec.ts similarity index 51% rename from apps/doc/src/app/how-to-start/for-designers/for-designers.component.spec.ts rename to apps/doc/src/app/how-to-work/add-component/add-component.component.spec.ts index d91ae61e52..0303fe58ee 100644 --- a/apps/doc/src/app/how-to-start/for-designers/for-designers.component.spec.ts +++ b/apps/doc/src/app/how-to-work/add-component/add-component.component.spec.ts @@ -1,19 +1,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ForDesignersComponent } from './for-designers.component'; +import { AddComponentComponent } from './add-component.component'; -describe('ForDesignersComponent', () => { - let component: ForDesignersComponent; - let fixture: ComponentFixture; +describe('AddComponentComponent', () => { + let component: AddComponentComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ForDesignersComponent], + declarations: [AddComponentComponent], }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ForDesignersComponent); + fixture = TestBed.createComponent(AddComponentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/apps/doc/src/app/how-to-work/add-component/add-component.component.ts b/apps/doc/src/app/how-to-work/add-component/add-component.component.ts new file mode 100644 index 0000000000..8571a68c22 --- /dev/null +++ b/apps/doc/src/app/how-to-work/add-component/add-component.component.ts @@ -0,0 +1,12 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { environment } from './../../../environments/environment'; + +@Component({ + selector: 'prizm-add-component', + templateUrl: './add-component.component.html', + styleUrls: ['./add-component.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AddComponentComponent { + public storybookBaseUrl = environment.storybookBaseUrl; +} diff --git a/apps/doc/src/app/how-to-work/add-component/add-component.module.ts b/apps/doc/src/app/how-to-work/add-component/add-component.module.ts new file mode 100644 index 0000000000..23a50cd4dd --- /dev/null +++ b/apps/doc/src/app/how-to-work/add-component/add-component.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { AddComponentComponent } from './add-component.component'; + +@NgModule({ + exports: [AddComponentComponent], + declarations: [AddComponentComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(AddComponentComponent))], +}) +export class AddComponentModule {} diff --git a/apps/doc/src/app/documentation/codestyle/codestyle.component.html b/apps/doc/src/app/how-to-work/codestyle/codestyle.component.html similarity index 59% rename from apps/doc/src/app/documentation/codestyle/codestyle.component.html rename to apps/doc/src/app/how-to-work/codestyle/codestyle.component.html index 815e4b922c..d1b520e55c 100644 --- a/apps/doc/src/app/documentation/codestyle/codestyle.component.html +++ b/apps/doc/src/app/how-to-work/codestyle/codestyle.component.html @@ -1,3 +1,3 @@ - + diff --git a/apps/doc/src/app/documentation/codestyle/codestyle.component.less b/apps/doc/src/app/how-to-work/codestyle/codestyle.component.less similarity index 100% rename from apps/doc/src/app/documentation/codestyle/codestyle.component.less rename to apps/doc/src/app/how-to-work/codestyle/codestyle.component.less diff --git a/apps/doc/src/app/documentation/codestyle/codestyle.component.ts b/apps/doc/src/app/how-to-work/codestyle/codestyle.component.ts similarity index 100% rename from apps/doc/src/app/documentation/codestyle/codestyle.component.ts rename to apps/doc/src/app/how-to-work/codestyle/codestyle.component.ts diff --git a/apps/doc/src/app/documentation/codestyle/codestyle.module.ts b/apps/doc/src/app/how-to-work/codestyle/codestyle.module.ts similarity index 100% rename from apps/doc/src/app/documentation/codestyle/codestyle.module.ts rename to apps/doc/src/app/how-to-work/codestyle/codestyle.module.ts diff --git a/apps/doc/src/app/documentation/contributing/contributing.component.html b/apps/doc/src/app/how-to-work/contributing/contributing.component.html similarity index 58% rename from apps/doc/src/app/documentation/contributing/contributing.component.html rename to apps/doc/src/app/how-to-work/contributing/contributing.component.html index cc58925ce7..106e12b79e 100644 --- a/apps/doc/src/app/documentation/contributing/contributing.component.html +++ b/apps/doc/src/app/how-to-work/contributing/contributing.component.html @@ -1,3 +1,3 @@ - + diff --git a/apps/doc/src/app/documentation/contributing/contributing.component.less b/apps/doc/src/app/how-to-work/contributing/contributing.component.less similarity index 100% rename from apps/doc/src/app/documentation/contributing/contributing.component.less rename to apps/doc/src/app/how-to-work/contributing/contributing.component.less diff --git a/apps/doc/src/app/documentation/contributing/contributing.component.ts b/apps/doc/src/app/how-to-work/contributing/contributing.component.ts similarity index 100% rename from apps/doc/src/app/documentation/contributing/contributing.component.ts rename to apps/doc/src/app/how-to-work/contributing/contributing.component.ts diff --git a/apps/doc/src/app/documentation/contributing/contributing.module.ts b/apps/doc/src/app/how-to-work/contributing/contributing.module.ts similarity index 100% rename from apps/doc/src/app/documentation/contributing/contributing.module.ts rename to apps/doc/src/app/how-to-work/contributing/contributing.module.ts diff --git a/apps/doc/src/app/how-to-work/for-developers/for-developers.component.html b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.html new file mode 100644 index 0000000000..a1a5af1251 --- /dev/null +++ b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.html @@ -0,0 +1,74 @@ + +

Default install:

+ +

+ You can easily install Prizm UI using Angular CLI by running the following command: +

+ + + +

Manual install:

+
+

+ Required + > Install theme and core: +

+ + + +
+ +
+

+ Optional + > Install helpers: +

+ + +
+ +
+

+ Optional + > Install components: +

+ + +
+ +
+

+ Optional + > Install charts library: +

+ + +
+ + + + +

Add our styles to angular config:

+ +
+

Or you can add to your root styles.less

+ + + + + + + + +

To use our icons as svg, please install our library

+ +

+ But if you want to use fonts not only as svg, and also as font, please add to your angular config +

+ + or you can only import to your root styles.less + + + + + diff --git a/apps/doc/src/app/documentation/getting-started/getting-started.component.less b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.less similarity index 75% rename from apps/doc/src/app/documentation/getting-started/getting-started.component.less rename to apps/doc/src/app/how-to-work/for-developers/for-developers.component.less index 3cd9fd1ccc..32eb289d08 100644 --- a/apps/doc/src/app/documentation/getting-started/getting-started.component.less +++ b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.less @@ -1,19 +1,15 @@ -:host { - padding: 3.75rem; -} - -prizm-accordion { - margin-top: 16px; -} - -prizm-doc-code { - margin-bottom: 1rem; -} - -.required { - color: var(--prizm-index-danger); -} - -.optional { - color: var(--prizm-index-warning); -} +prizm-accordion { + margin-top: 16px; +} + +prizm-doc-code { + margin-bottom: 10px; +} + +.required { + color: var(--prizm-index-danger); +} + +.optional { + color: var(--prizm-index-warning); +} diff --git a/apps/doc/src/app/how-to-start/for-developers/for-developers.component.spec.ts b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.spec.ts similarity index 100% rename from apps/doc/src/app/how-to-start/for-developers/for-developers.component.spec.ts rename to apps/doc/src/app/how-to-work/for-developers/for-developers.component.spec.ts diff --git a/apps/doc/src/app/how-to-work/for-developers/for-developers.component.ts b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.ts new file mode 100644 index 0000000000..00d33b6ff9 --- /dev/null +++ b/apps/doc/src/app/how-to-work/for-developers/for-developers.component.ts @@ -0,0 +1,42 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-for-developers', + templateUrl: './for-developers.component.html', + styleUrls: ['./for-developers.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ForDevelopersComponent { + public readonly joinSvgFonts = ` + "styles": [ + ... + "@prizm-ui/icons/base/src/styles/styles.less" + ],"; + `; + public readonly joinSvgFontsForImport = `@import "~@prizm-ui/icons/base/src/styles/styles.less"; + `; + public readonly updateAngularStylesFileCode = ` + // (Required) Add for use our theme + @import "~@prizm-ui/theme/src/styles/styles.less"; + // (Optional) Add only for use our components library + @import "~@prizm-ui/components/src/styles/styles.less"; + + // (Optional) Add only for use our old icon set (deprecated) + @import "~@prizm-ui/components/src/styles/icons/icons.less"; + @import "~@prizm-ui/components/src/styles/icons-16/icons-16.less"; + `; + public readonly updateAngularStylesCode = ` + "assets": [ + // .... + ], + "styles": [ + // (Required) Add for use our theme + "node_modules/@prizm-ui/theme/src/styles/styles.less", + // (Optional) Add for use our components + "node_modules/@prizm-ui/components/src/styles/styles.less", + // (Optional) Add only for use our old icon set (deprecated) + "node_modules/@prizm-ui/components/src/styles/icons/icons.less", + "node_modules/@prizm-ui/components/src/styles/icons-16/icons-16.less" + ], + `; +} diff --git a/apps/doc/src/app/how-to-work/for-developers/for-developers.module.ts b/apps/doc/src/app/how-to-work/for-developers/for-developers.module.ts new file mode 100644 index 0000000000..cd0084b522 --- /dev/null +++ b/apps/doc/src/app/how-to-work/for-developers/for-developers.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAccordionModule } from '@prizm-ui/components'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { ForDevelopersComponent } from './for-developers.component'; + +@NgModule({ + exports: [ForDevelopersComponent], + declarations: [ForDevelopersComponent], + imports: [ + PrizmAddonDocModule, + PrizmAccordionModule, + RouterModule.forChild(prizmDocGenerateRoutes(ForDevelopersComponent)), + ], +}) +export class ForDevelopersModule {} diff --git a/apps/doc/src/app/how-to-work/set-task/set-task.component.html b/apps/doc/src/app/how-to-work/set-task/set-task.component.html new file mode 100644 index 0000000000..a913e9bea9 --- /dev/null +++ b/apps/doc/src/app/how-to-work/set-task/set-task.component.html @@ -0,0 +1,34 @@ + +

+ В статье «Способы связи с командой Prizm» (Confluence) / Связаться с командой мы + описали возможные варианты: +

+
    +
  1. + С помощью отправки письма на электронный почтовый ящик – + prizm@zyfra.com +
    2. +
  2. + С помощью Issue (способ описан на странице + Сontributing) +
    3. +
+

+ Поставить задачу на изменение можно (issue) в нашем репозитории. Пожалуйста, когда ставите задачу, следите + за форматом: так мы быстрее поймём, в чём дело, и сможем передать задачу нужному человеку. +

+ +

Комментарий

+

Обязательно напишите комментарий. Мы будем рады:

+
    +
  1. подробному описанию задачи
    2. +
  2. скриншотам и любым другим изображениям
    3. +
+

Если изображения не прикрепляются к задаче, прикрепите архив или поставьте ссылку на облако.

+

+ Объём любой, главное — понятно и по-человечески. Хочется, чтобы в любой момент и автору, и исполнителю + было понятно, что делать. +

+ diff --git a/apps/doc/src/app/how-to-work/set-task/set-task.component.less b/apps/doc/src/app/how-to-work/set-task/set-task.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/how-to-work/set-task/set-task.component.spec.ts b/apps/doc/src/app/how-to-work/set-task/set-task.component.spec.ts new file mode 100644 index 0000000000..b222d7892f --- /dev/null +++ b/apps/doc/src/app/how-to-work/set-task/set-task.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SetTaskComponent } from './set-task.component'; + +describe('SetTaskComponent', () => { + let component: SetTaskComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SetTaskComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SetTaskComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/how-to-work/set-task/set-task.component.ts b/apps/doc/src/app/how-to-work/set-task/set-task.component.ts new file mode 100644 index 0000000000..0aedc293f6 --- /dev/null +++ b/apps/doc/src/app/how-to-work/set-task/set-task.component.ts @@ -0,0 +1,12 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { environment } from './../../../environments/environment'; + +@Component({ + selector: 'prizm-set-task', + templateUrl: './set-task.component.html', + styleUrls: ['./set-task.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SetTaskComponent { + public storybookBaseUrl = environment.storybookBaseUrl; +} diff --git a/apps/doc/src/app/how-to-work/set-task/set-task.module.ts b/apps/doc/src/app/how-to-work/set-task/set-task.module.ts new file mode 100644 index 0000000000..8ea9ceb0ff --- /dev/null +++ b/apps/doc/src/app/how-to-work/set-task/set-task.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { SetTaskComponent } from './set-task.component'; + +@NgModule({ + exports: [SetTaskComponent], + declarations: [SetTaskComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(SetTaskComponent))], +}) +export class SetTaskModule {} diff --git a/apps/doc/src/app/how-to-work/transition/transition.component.html b/apps/doc/src/app/how-to-work/transition/transition.component.html new file mode 100644 index 0000000000..5f65b79dc6 --- /dev/null +++ b/apps/doc/src/app/how-to-work/transition/transition.component.html @@ -0,0 +1,81 @@ + +

Подключите библиотеки

+ Как работать с Prizm (быстрый старт) + +

Посмотрите, каких компонентов вам не хватает

+

+ В дизайн-системе есть самые основные компоненты для разработки интерфейсов. Скорее всего, вам понадобится + несколько уникальных компонентов или доработок. Должно быть примерно так: +

+
    +
  1. 80% — компоненты из дизайн-системы,
    2. +
  2. 20% — новые компоненты и доработки.
    3. +
+

+ Посмотрите заранее, что уже есть, а что вам может понадобиться. Где смотреть: Статья «Репозитории» +

+

+ Если что-то не нашлось, проверьте, может быть, задача на доработки, которые нужны вам, уже запланирована + или в работе. +

+
    +
  1. + Дорожная карта и задачи +
      +
    1. + Со временем дорожная карта будет в GitHub: + ссылка +
      2. +
    2. + Доска и активный спринт +
      3. +
    3. + Бэклог спринтов и продукта +
      4. +
    4. + Песочница бэклога + Backlog. Stage III +
      5. +
    +
    2. +
+

+ Если нужных компонентов нигде нет, что ж. Некоторые компоненты мы берём в работу, но что-то вам придётся + добавить самостоятельно. +

+ +

Отправьте запрос на доработку дизайн-системы

+

Когда стоит это делать

+
    +
  1. Вы нашли ошибку в работе наших компонентов.
    2. +
  2. Ваша доработка или улучшение компонента будет полезна многим.
    3. +
  3. + Новый компонент часто используется в проектировании интерфейсов (во всех дизайн-системах есть, а у нас + нет). +
    4. +
+

Как отправить запрос на доработку

+

+ Статья «Связь с командой Prizm» (Confluence) / Связаться с командой ответит + на все вопросы. +

+ +

Для контрибьюторов

+

+ Статья «Связь с командой Prizm» (Confluence) / Сontributing (сайт) + ответит на все вопросы. +

+ diff --git a/apps/doc/src/app/how-to-work/transition/transition.component.less b/apps/doc/src/app/how-to-work/transition/transition.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/how-to-work/transition/transition.component.spec.ts b/apps/doc/src/app/how-to-work/transition/transition.component.spec.ts new file mode 100644 index 0000000000..6dac8a4fa5 --- /dev/null +++ b/apps/doc/src/app/how-to-work/transition/transition.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TransitionComponent } from './transition.component'; + +describe('TransitionComponent', () => { + let component: TransitionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TransitionComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TransitionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/doc/src/app/how-to-work/transition/transition.component.ts b/apps/doc/src/app/how-to-work/transition/transition.component.ts new file mode 100644 index 0000000000..3a04f6b7bf --- /dev/null +++ b/apps/doc/src/app/how-to-work/transition/transition.component.ts @@ -0,0 +1,12 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { environment } from './../../../environments/environment'; + +@Component({ + selector: 'prizm-transition', + templateUrl: './transition.component.html', + styleUrls: ['./transition.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TransitionComponent { + public storybookBaseUrl = environment.storybookBaseUrl; +} diff --git a/apps/doc/src/app/how-to-work/transition/transition.module.ts b/apps/doc/src/app/how-to-work/transition/transition.module.ts new file mode 100644 index 0000000000..87da53c587 --- /dev/null +++ b/apps/doc/src/app/how-to-work/transition/transition.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { TransitionComponent } from './transition.component'; + +@NgModule({ + exports: [TransitionComponent], + declarations: [TransitionComponent], + imports: [PrizmAddonDocModule, RouterModule.forChild(prizmDocGenerateRoutes(TransitionComponent))], +}) +export class TransitionModule {} diff --git a/apps/doc/src/app/model.ts b/apps/doc/src/app/model.ts index ad80adf3bd..3154c0489c 100644 --- a/apps/doc/src/app/model.ts +++ b/apps/doc/src/app/model.ts @@ -1,7 +1,8 @@ export enum SectionNameEnum { allAboutPrizm = 'Все о Prizm', + howToWork = 'Как работать с Prizm', + forZIIoT = 'Prizm для ZIIoT', guidelines = 'Гайдлайны', - howToStart = 'Как начать', components = 'Компоненты', charts = 'Графики', tools = 'Инструменты', diff --git a/apps/doc/src/app/pages.ts b/apps/doc/src/app/pages.ts index 7b73bc388c..26246c1743 100644 --- a/apps/doc/src/app/pages.ts +++ b/apps/doc/src/app/pages.ts @@ -10,10 +10,9 @@ export const pages: PrizmOrderedDocPage = [ //Window { section: SectionNameEnum.allAboutPrizm, - title: `О дизайн-системе`, + title: `О дизайн-системе Prizm`, keywords: 'дизайн-система, дизайн, система, design system, design, system', - link: 'http://prizm.zyfra.com/', - target: '_blank', + route: 'about-prizm/design-system', order: 1, }, { @@ -25,9 +24,9 @@ export const pages: PrizmOrderedDocPage = [ }, { section: SectionNameEnum.allAboutPrizm, - title: 'Changelog', - keywords: 'ченджлог, changelog', - route: 'about-prizm/changelog', + title: `Репозитории`, + keywords: 'репозитории, repositories', + route: 'about-prizm/repositories', order: 3, }, { @@ -37,51 +36,129 @@ export const pages: PrizmOrderedDocPage = [ route: 'about-prizm/contacts', order: 4, }, + { + section: SectionNameEnum.allAboutPrizm, + title: 'Релизная политика', + keywords: 'релизная, политика, release, policy', + route: 'about-prizm/release-policy', + order: 5, + }, + { + section: SectionNameEnum.allAboutPrizm, + title: 'Соглашение об уровне услуг (SLA)', + keywords: 'соглашение, уровень, услуга, service, level, agreement, sla', + route: 'about-prizm/service-level-agreement', + order: 6, + }, + { + section: SectionNameEnum.allAboutPrizm, + title: 'Дорожная карта и задачи', + keywords: 'дорожная, карта, задачи, roadmap, tasks', + route: 'about-prizm/roadmap', + order: 7, + }, + { + section: SectionNameEnum.allAboutPrizm, + title: 'Журнал изменений (changelog)', + keywords: 'ченджлог, changelog', + route: 'about-prizm/changelog', + order: 8, + }, + { + section: SectionNameEnum.allAboutPrizm, + title: 'Список технологий', + keywords: 'список, технология, technology, list', + route: 'about-prizm/technology-list', + order: 9, + }, + //How to work + { + section: SectionNameEnum.howToWork, + title: `Быстрый старт (разработчикам)`, + keywords: 'intro, how, to, start, guide, getting started, main, главная, начало, как, начать, инструкция', + route: 'how-to-work/for-developers', + order: 1, + }, + { + section: SectionNameEnum.howToWork, + title: `Как перейти`, + keywords: 'переход, как, transition, how', + route: 'how-to-work/transition', + order: 2, + }, + { + section: SectionNameEnum.howToWork, + title: `Как добавить компонент`, + keywords: 'добавить, компонент, как, add, component, how', + route: 'how-to-work/add-component', + order: 3, + }, + { + section: SectionNameEnum.howToWork, + title: `Как поставить задачу`, + keywords: 'поставить, задача, как, set, task, how', + route: 'how-to-work/set-task', + order: 4, + }, + { + section: SectionNameEnum.howToWork, + title: 'Contributing', + keywords: 'contributing', + route: 'how-to-work/contributing', + order: 5, + }, + { + section: SectionNameEnum.howToWork, + title: 'CodeStyle', + keywords: 'code, codestyle', + route: 'how-to-work/codestyle', + order: 6, + }, + //For ZIIoT + { + section: SectionNameEnum.forZIIoT, + title: `Введение`, + keywords: 'введение, introduction', + route: 'forZIIoT/introduction', + order: 1, + }, + { + section: SectionNameEnum.forZIIoT, + title: `Требования к UI библиотекам для ZIIoT`, + keywords: 'требования, библиотеки, requirements, ui, libraries, ziiot', + route: 'forZIIoT/library-requirements', + order: 2, + }, + { + section: SectionNameEnum.forZIIoT, + title: `Миграция`, + keywords: 'миграция, migration', + route: 'forZIIoT/migration', + order: 3, + }, //Guidelines { section: SectionNameEnum.guidelines, title: `Типографика`, keywords: 'типографика, typography', route: 'guidelines/typography', - order: 5, + order: 1, }, { section: SectionNameEnum.guidelines, title: `Цвета`, keywords: 'цвета, colors', route: 'guidelines/colors', - order: 6, + order: 2, }, { section: SectionNameEnum.guidelines, title: `Сетки`, keywords: 'сетка, grid', route: 'guidelines/grid', - order: 7, - }, - //How to start - { - section: SectionNameEnum.howToStart, - title: `Дизайнерам`, - keywords: 'дизайнеры, designers', - target: '_blank', - link: 'https://www.figma.com/community/file/1156311020501452261', - order: 8, - }, - { - section: SectionNameEnum.howToStart, - title: `Разработчикам`, - keywords: 'intro, how, to, start, guide, getting started, main, главная, начало, как, начать, инструкция', - route: 'how-to-start/for-developers', - order: 9, - }, - { - section: SectionNameEnum.howToStart, - title: `Миграция`, - keywords: 'Миграция, migration', - route: 'how-to-start/migration', - order: 10, + order: 3, }, + // Documentation // { // section: SectionNameEnum.allAboutPrizm, @@ -90,20 +167,6 @@ export const pages: PrizmOrderedDocPage = [ // route: 'about', // order: 11, // }, - { - section: SectionNameEnum.allAboutPrizm, - title: 'Contributing', - keywords: 'contributing', - route: 'contributing', - order: 13, - }, - { - section: SectionNameEnum.allAboutPrizm, - title: 'CodeStyle', - keywords: 'code, codestyle', - route: 'codestyle', - order: 14, - }, // Components { section: SectionNameEnum.components, diff --git a/apps/doc/src/environments/environment.prod.ts b/apps/doc/src/environments/environment.prod.ts index 66f6cea608..76f56e0697 100644 --- a/apps/doc/src/environments/environment.prod.ts +++ b/apps/doc/src/environments/environment.prod.ts @@ -1,3 +1,6 @@ export const environment = { production: true, + landingBaseUrl: 'http://prizm.zyfra.com', + storybookBaseUrl: 'http://doc.prizm.zyfra.com', + githubBaseUrl: 'https://github.com/zyfra/Prizm', }; diff --git a/apps/doc/src/environments/environment.ts b/apps/doc/src/environments/environment.ts index bde0e865f1..98d787ae9e 100644 --- a/apps/doc/src/environments/environment.ts +++ b/apps/doc/src/environments/environment.ts @@ -4,6 +4,9 @@ export const environment = { production: false, + storybookBaseUrl: 'http://doc.prizm.zyfra.com', + landingBaseUrl: 'http://prizm.zyfra.com', + githubBaseUrl: 'https://github.com/zyfra/Prizm', }; /* diff --git a/apps/doc/src/styles.less b/apps/doc/src/styles.less index 77978634f5..3bbabd8464 100644 --- a/apps/doc/src/styles.less +++ b/apps/doc/src/styles.less @@ -110,3 +110,77 @@ prizm-doc-page, .t-content prizm-doc-example:first-child { padding-top: 20px; } +//for page with info +prizm-doc-page.info-page { + font-family: 'Inter'; + font-weight: 400; + font-size: 18px; + line-height: 27px; + + h1 { + font-weight: 700; + font-size: 32px; + line-height: 38px; + } + + h2 { + font-weight: 700; + font-size: 24px; + line-height: 32px; + } + + h3 { + font-weight: 600; + font-size: 20px; + line-height: 24px; + } + + ol { + line-height: 36px; + } + + a { + color: rgb(0, 119, 255); + } + + .italic { + font-style: italic; + } + + .warning-agreement { + color: #ff6600; + font-style: italic; + } + + .addition { + color: #b1acb5; + font-style: italic; + } + + .doc { + &-table { + display: flex; + flex-wrap: wrap; + gap: 1rem; + } + + &-cell { + border: 1px solid #aab8c6; + border-radius: 5px; + padding: 10px; + flex: 1 1 calc((100% / 3) - 2rem); + } + } + + .disc { + li { + list-style-type: disc; + } + } + + .decimal { + li { + list-style-type: decimal; + } + } +} diff --git a/libs/components/src/lib/components/table/table.module.ts b/libs/components/src/lib/components/table/table.module.ts index aa19f939c7..1b32f42bdd 100644 --- a/libs/components/src/lib/components/table/table.module.ts +++ b/libs/components/src/lib/components/table/table.module.ts @@ -1,62 +1,62 @@ -import { CommonModule, DecimalPipe } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { PrizmCellDirective } from './directives/cell.directive'; -import { PrizmHeadDirective } from './directives/head.directive'; -import { PrizmResizedDirective } from './directives/resized.directive'; -import { PrizmRowDirective } from './directives/row.directive'; -import { PrizmSortByDirective } from './directives/sort-by.directive'; -import { PrizmSortableDirective } from './directives/sortable.directive'; -import { PrizmTableDirective } from './directives/table.directive'; -import { PrizmTheadDirective } from './directives/thead.directive'; -import { PrizmTableSortPipe } from './pipes/table-sort.pipe'; -import { PrizmTbodyComponent } from './tbody/tbody.component'; -import { PrizmTdComponent } from './td/td.component'; -import { PrizmThComponent } from './th/th.component'; -import { PrizmThGroupComponent } from './th-group/th-group.component'; -import { PrizmTrComponent } from './tr/tr.component'; -import { PrizmMapperPipeModule } from '../../pipes'; -import { PolymorphModule } from '../../directives'; -import { PrizmIconModule } from '../icon'; -import { SearchableContentComponent } from './components/searchable-content/searchable-content.component'; -import { SpaceNumberPipe } from './pipes/space-number.pipe'; - -@NgModule({ - imports: [CommonModule, PrizmMapperPipeModule, PolymorphModule, PrizmIconModule], - declarations: [ - PrizmTableDirective, - PrizmTbodyComponent, - PrizmThGroupComponent, - PrizmThComponent, - PrizmTdComponent, - PrizmTrComponent, - PrizmCellDirective, - PrizmHeadDirective, - PrizmRowDirective, - PrizmSortByDirective, - PrizmSortableDirective, - PrizmTheadDirective, - PrizmResizedDirective, - PrizmTableSortPipe, - SearchableContentComponent, - SpaceNumberPipe, - ], - exports: [ - PrizmTableDirective, - PrizmTbodyComponent, - PrizmThGroupComponent, - PrizmThComponent, - PrizmTdComponent, - PrizmTrComponent, - PrizmCellDirective, - PrizmHeadDirective, - PrizmRowDirective, - PrizmSortByDirective, - PrizmSortableDirective, - PrizmTheadDirective, - PrizmTableSortPipe, - SearchableContentComponent, - SpaceNumberPipe, - ], - providers: [DecimalPipe], -}) -export class PrizmTableModule {} +import { CommonModule, DecimalPipe } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { PrizmCellDirective } from './directives/cell.directive'; +import { PrizmHeadDirective } from './directives/head.directive'; +import { PrizmResizedDirective } from './directives/resized.directive'; +import { PrizmRowDirective } from './directives/row.directive'; +import { PrizmSortByDirective } from './directives/sort-by.directive'; +import { PrizmSortableDirective } from './directives/sortable.directive'; +import { PrizmTableDirective } from './directives/table.directive'; +import { PrizmTheadDirective } from './directives/thead.directive'; +import { PrizmTableSortPipe } from './pipes/table-sort.pipe'; +import { PrizmTbodyComponent } from './tbody/tbody.component'; +import { PrizmTdComponent } from './td/td.component'; +import { PrizmThComponent } from './th/th.component'; +import { PrizmThGroupComponent } from './th-group/th-group.component'; +import { PrizmTrComponent } from './tr/tr.component'; +import { PrizmMapperPipeModule } from '../../pipes'; +import { PolymorphModule } from '../../directives'; +import { PrizmIconModule } from '../icon'; +import { SearchableContentComponent } from './components/searchable-content/searchable-content.component'; +import { SpaceNumberPipe } from './pipes/space-number.pipe'; + +@NgModule({ + imports: [CommonModule, PrizmMapperPipeModule, PolymorphModule, PrizmIconModule], + declarations: [ + PrizmTableDirective, + PrizmTbodyComponent, + PrizmThGroupComponent, + PrizmThComponent, + PrizmTdComponent, + PrizmTrComponent, + PrizmCellDirective, + PrizmHeadDirective, + PrizmRowDirective, + PrizmSortByDirective, + PrizmSortableDirective, + PrizmTheadDirective, + PrizmResizedDirective, + PrizmTableSortPipe, + SearchableContentComponent, + SpaceNumberPipe, + ], + exports: [ + PrizmTableDirective, + PrizmTbodyComponent, + PrizmThGroupComponent, + PrizmThComponent, + PrizmTdComponent, + PrizmTrComponent, + PrizmCellDirective, + PrizmHeadDirective, + PrizmRowDirective, + PrizmSortByDirective, + PrizmSortableDirective, + PrizmTheadDirective, + PrizmTableSortPipe, + SearchableContentComponent, + SpaceNumberPipe, + ], + providers: [DecimalPipe], +}) +export class PrizmTableModule {} diff --git a/libs/components/src/lib/components/table/tr/tr.template.html b/libs/components/src/lib/components/table/tr/tr.template.html index 15616a0db2..7cd8dd8bae 100644 --- a/libs/components/src/lib/components/table/tr/tr.template.html +++ b/libs/components/src/lib/components/table/tr/tr.template.html @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/libs/doc/base/src/lib/components/page/page.style.less b/libs/doc/base/src/lib/components/page/page.style.less index a2b60934de..e377ebb9db 100644 --- a/libs/doc/base/src/lib/components/page/page.style.less +++ b/libs/doc/base/src/lib/components/page/page.style.less @@ -19,6 +19,7 @@ box-sizing: border-box; flex-shrink: 0; margin: 0 ~'min(10vw, 8.75rem)'; + line-height: 300%; :host-context(tui-root._mobile) & { font: var(--tui-font-heading-4);