Showcase pages

apps/doc/src/app/about-prizm/changelog/changelog.component.html

@@ -1,3 +1,3 @@
-<prizm-doc-page header="Changelog">
+<prizm-doc-page header="Changelog" class="info-page">
  <markdown lineNumbers [data]="(changelog | async) || ''"></markdown>
 </prizm-doc-page>

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;
- }
-}

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;

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 {}

apps/doc/src/app/about-prizm/design-system/design-system.component.html

@@ -1 +1,98 @@
-<p>design-system works!</p>
+<prizm-doc-page header="О дизайн-системе Prizm" class="info-page">
+ <p>
+ <strong>Дизайн-система «PRIZM»</strong> представляет собой симбиоз дизайн-системы Spectr (ГПН БЛПС) и
+ дизайн-системы ZIIoT design system 3.0, учитывает специфику промышленности, где представлена платформа,
+ наш прошлый опыт и рынок, куда мы хотим попасть. Prizm распространяется по типу
+ <a href="{{ storybookBaseUrl }}/about-prizm/license">лицензии MIT</a> и подходит для создания цифровых
+ продуктов, включая бизнес-приложения поверх платформы ZIIoT. По сути, это единый визуальный язык и его
+ техническое отражение в виде библиотеки компонентов в одном общем хранилище. Он не имеет отношения к
+ back-end, а скорее представляет собой документ, объединяющий в себе информацию о решениях и требованиях,
+ которые должны быть использованы при разработке и обновлении частей платформы и прикладных решений на
+ ZIIoT. На него необходимо будет ссылаться при разработке технических заданий, руководств пользователя и
+ прочих документов.
+ </p>
+
+ <h4>Для кого</h4>
+
+ <ol class="disc">
+ <li>Аналитиков</li>
+ <li>Руководителей проектов</li>
+ <li>Проектировщиков</li>
+ <li>Владельцев продуктов</li>
+ <li>Дизайнеров</li>
+ <li>Тестировщиков</li>
+ <li>Разработчиков</li>
+ <li>Технических писателей</li>
+ </ol>
+
+ <h4>Из чего состоит дизайн-система</h4>
+
+ <ol class="decimal">
+ <li>Библиотека интерфейсных компонентов</li>
+ <li>Библиотке компонентов в Figma</li>
+ <li>Правила, рекомендации, гайдлайны, патерны, шаблоны, витрина компонентов.</li>
+ <li>Философия к дизайну, разработке, поддержке.</li>
+ <li>Команда Prizm.</li>
+ </ol>
+ <div class="doc-table">
+ <div class="doc-cell">
+ <h4>ЦЕЛЬ СОЗДАНИЯ</h4>
+ <ol class="disc">
+ <li>Снижение стоимости разработки</li>
+ <li>Снижение стоимости дизайна</li>
+ <li>Унификация множества интерфейсов</li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>ПРИЧИНА СОЗДАНИЯ</h4>
+ <ol class="disc">
+ <li>Разрозненность решений</li>
+ <li>Отсутствие единого источника правды</li>
+ <li>Поиски лучших решений в каждом проекте</li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>ЗАДАЧИ ДИЗАЙН-СИСТЕМЫ</h4>
+ <ol class="disc">
+ <li>Стандартизация решений</li>
+ <li>Независимость проектов от состава команд</li>
+ <li>Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»</li>
+ <li>Снижение затрат на поддержку, развитие и запуск продуктов</li>
+ <li>Повышает узнаваемость бренда</li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>ПОЧЕМУ В ЭТОМ ЕСТЬ ЦЕННОСТЬ</h4>
+ <ol class="disc">
+ <li>Экономит время на дизайн / разработку</li>
+ <li>Динамична и легко обновляемая</li>
+ <li>Стандартизирует интерфейсы и минимизирует баги</li>
+ <li>Служит готовым конструктором</li>
+ <li>Легко масштабируется</li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>ПРИНЦИПЫ</h4>
+ <ol class="disc">
+ <li>Единый UX в продуктах</li>
+ <li>Масштабируемость</li>
+ <li>Дизайн на основе данных</li>
+ <li>Локализация</li>
+ <li>Сохранение интересов продукта</li>
+ <li>Развитие и потенциал для эволюции</li>
+ <li>Универсальность</li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>КАКИЕ ПРЕИМУЩЕСТВА ПОЛУЧАЕМ</h4>
+ <ol class="disc">
+ <li>Обучаемость пользователей</li>
+ <li>Переиспользование графических элементов, паттернов</li>
+ <li>Единообразие компонентов</li>
+ <li>Удешевление тестирования</li>
+ <li>Переиспользование кода / единые компоненты на технологическом уровне</li>
+ <li>Структурированность</li>
+ </ol>
+ </div>
+ </div>
+</prizm-doc-page>

apps/doc/src/app/about-prizm/design-system/design-system.component.less

@@ -0,0 +1,3 @@
+h4 {
+ margin-top: 0;
+}

apps/doc/src/app/about-prizm/design-system/design-system.component.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { environment } from './../../../environments/environment';
 
 @Component({
  selector: 'prizm-design-system',
  templateUrl: './design-system.component.html',
  styleUrls: ['./design-system.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DesignSystemComponent {}
+export class DesignSystemComponent {
+ public storybookBaseUrl: string = environment.storybookBaseUrl;
+}

apps/doc/src/app/about-prizm/design-system/design-system.module.ts

@@ -0,0 +1,14 @@
+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 {}

apps/doc/src/app/about-prizm/release-policy/release-policy.component.html

@@ -0,0 +1,3 @@
+<prizm-doc-page header="Релизная политика" class="info-page">
+ <p>Эта страница сейчас в работе</p>
+</prizm-doc-page>

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<ReleasePolicyComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ReleasePolicyComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ReleasePolicyComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

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 {}

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 {}

apps/doc/src/app/about-prizm/repositories/repositories.component.html

@@ -0,0 +1,105 @@
+<prizm-doc-page header="Репозитории" class="info-page">
+ <p>
+ Библиотеки дизайн-системы Prizm для разработчиков написаны на Angular и хранятся в репозиториях на GitHub
+ — в открытом доступе.
+ </p>
+ <div class="doc-table">
+ <div class="doc-cell">
+ <h4>Репозитории</h4>
+ <ol class="disc">
+ <li><a href="http:/zyfra/Prizm">http:/zyfra/Prizm</a> - репозиторий</li>
+ <li>
+ <a href="https://gitlab.idp.yc.ziiot.ru/public-group/zui-sdk"
+ >https://gitlab.idp.yc.ziiot.ru/public-group/zui-sdk</a
+ >
+ - репозиторий
+ </li>
+ </ol>
+ </div>
+ <div class="doc-cell halfSize">
+ <h4>Figma Community</h4>
+ <ol class="disc">
+ <li>
+ <a href="https://www.figma.com/community/file/1156311020501452261">Prizm. Компоненты</a>
+ </li>
+ <li>
+ <a href="https://www.figma.com/community/file/1156476623180542596">Prizm. Описания</a>
+ </li>
+ <li>
+ <a href="https://www.figma.com/community/file/1195274345502705022">Prizm. Icons V2</a>
+ </li>
+ <li>
+ <a href="https://www.figma.com/community/file/1159182309864432682">🎨 Dark theme 4.0</a>
+ </li>
+ <li>
+ <a href="https://www.figma.com/community/file/1159182809581939755">🎨 Light theme 4.0</a>
+ </li>
+ </ol>
+ </div>
+ <div class="doc-cell halfSize">
+ <h4>Figma Zyfra Organization</h4>
+ <ol class="disc">
+ <li>
+ <a
+ href="https://www.figma.com/file/2KJZq6hHEdxQmFMRVTJWKT/%F0%9F%92%8E-Prizm.-%D0%A1omponent-base-4.0"
+ >Prizm. Компоненты</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://www.figma.com/file/IEsKtY2w1cx6mvpy3hqB9O/%F0%9F%92%8E-Prizm.-%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D1%8F-4.0"
+ >Prizm. Описания</a
+ >
+ </li>
+ <li>
+ <a href="https://www.figma.com/file/sQkSOkQENVt17Z8eWW0E9W/Prizm.-Icons-for-design-4.0"
+ >Prizm. Icon for designer</a
+ >
+ </li>
+ <li>
+ <a href="https://www.figma.com/file/d8aZpPQ1C4Ihsj3GQaCnqX/%F0%9F%8E%A8-Dark-theme-4.0"
+ >🎨 Dark theme 4.0</a
+ >
+ </li>
+ <li>
+ <a href="https://www.figma.com/file/3gmeOTLP1cVoBF5nxvbXg1/%F0%9F%8E%A8-Light-theme-4.0"
+ >🎨 Light theme 4.0</a
+ >
+ </li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>Главные ссылки</h4>
+ <ol class="disc">
+ <li><a href="http://prizm.zyfra.com/">prizm.zyfra.com</a> – главная страница Prizm</li>
+ <li>
+ <a href="http://doc.prizm.zyfra.com/">doc.prizm.zyfra.com</a> – витрина. Примеры работающих
+ компонентов
+ </li>
+ <li><a href="http:/zyfra/Prizm">github.com/zyfra/Prizm</a> – репозиторий</li>
+ <li><a href="https://t.me/prizmdesign">Телеграм-канал</a> с новостями и релизами</li>
+ <li>
+ <a href="https://ziiot-dev-11.kube01.yc.ziiot.ru/">https://ziiot-dev-11.kube01.yc.ziiot.ru</a> –
+ внутренний полигон
+ </li>
+ <li>
+ Figma:
+ <a href="https://www.figma.com/files/team/1158761786178321833">Prizm design system</a>
+ <ol class="disc">
+ <li>
+ Проект: —
+ <a href="https://www.figma.com/files/project/46644683">Prizm design system</a>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ <div class="doc-cell">
+ <h4>О релизах</h4>
+ <p>
+ <a href="https:/zyfra/Prizm/releases">https:/zyfra/Prizm/releases</a> –
+ подпишитесь на страницу
+ </p>
+ </div>
+ </div>
+</prizm-doc-page>

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;
+}