Merge pull request #1313 from zyfra/feat/release-4.0.0-next.2

feat: prepare 4.0.0-next.2

.github/workflows/pr-ng14.yml

@@ -1,8 +1,10 @@
 name: PR NG 14
 on:
- pull_request_target:
- branches:
- - main
+ workflow_dispatch:
+ workflow_call:
+# pull_request_target:
+# branches:
+# - main
 jobs:
  doc_deploy:
  runs-on: ubuntu-latest

.github/workflows/pr-ng15.yml

@@ -1,8 +1,10 @@
 name: PR NG 15
 on:
- pull_request_target:
- branches:
- - main
+ workflow_dispatch:
+ workflow_call:
+# pull_request_target:
+# branches:
+# - main
 jobs:
  doc_deploy:
  runs-on: ubuntu-latest

.github/workflows/pr-ng16.yml

@@ -1,8 +1,10 @@
 name: PR NG 16
 on:
- pull_request_target:
- branches:
- - main
+ workflow_dispatch:
+ workflow_call:
+# pull_request_target:
+# branches:
+# - main
 jobs:
  doc_deploy:
  runs-on: ubuntu-latest

apps/doc/project.json

@@ -33,11 +33,6 @@
  "glob": "**/*",
  "input": "node_modules/@taiga-ui/icons/src",
  "output": "assets/taiga-ui/icons"
- },
- {
- "glob": "**/*",
- "input": "libs/icons/base/src/styles/icons",
- "output": "assets/prizm-icons/fonts"
  }
  ],
  "styles": [

apps/doc/src/app/app.component.ts

@@ -13,6 +13,7 @@ import { PRIZM_LOG_LEVEL, prizmAssert } from '@prizm-ui/core';
 import { ActivationEnd, Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { DocDemoService } from './doc-demo.service';
+import { ThemeTokenChangerService } from './theme-token-changer/theme-token-changer.service';
 
 /**
  * Show all assert logg as warning
@@ -49,12 +50,14 @@ export class AppComponent implements AfterViewInit {
  private readonly prizmDocHostElementListenerService: PrizmDocHostElementListenerService,
  private readonly destroy$: PrizmDestroyService,
  public readonly router: Router,
+ public readonly themeTokenChangerService: ThemeTokenChangerService,
  private readonly toastService: PrizmToastService,
  @Inject(DOCUMENT) private readonly documentRef: Document,
  @Inject(PRIZM_DOC_TITLE) private readonly docTitle: string
  ) {
  this.themeSwitcher.rootElement = null;
  this.initPageTitleSetter();
+ this.themeTokenChangerService.init().pipe(takeUntil(this.destroy$)).subscribe();
  }
 
  private initPageTitleSetter(): void {

apps/doc/src/app/app.module.ts

@@ -38,6 +38,7 @@ 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';
 import { PRIZM_ENGLISH_LANGUAGE, PRIZM_RUSSIAN_LANGUAGE, prizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { ThemeTokenChangerComponent } from './theme-token-changer/theme-token-changer.component';
 
 registerLocaleData(localeRu);
 @NgModule({

apps/doc/src/app/logo/logo.component.html

@@ -2,8 +2,22 @@
  <a href="http://prizm.zyfra.com/" target="_blank">
  <img src="/assets/logos/logo-dark.svg" />
  </a>
- <prizm-toggle [ngModel]="isNight$ | async" (ngModelChange)="onMode($event)" iconOn="social-sun">
- </prizm-toggle>
+
+ <div class="buttons-block">
+ <prizm-toggle
+ [ngModel]="isNight$ | async"
+ (ngModelChange)="onMode($event)"
+ iconOn="social-sun"
+ ></prizm-toggle>
+
+ <prizm-icons-svg
+ class="theme-tokens-updater"
+ [size]="24"
+ [name]="PrizmIconSvgEnum.SHAPE_GEOMETRY_SQUARE_CIRCLE_PLUS_TRIANGLE_FILL"
+ (click)="openThemeChanger()"
+ >
+ </prizm-icons-svg>
+ </div>
 </div>
 <div
  class="sub-text x-margin prizm-font-input-text-14px"

apps/doc/src/app/logo/logo.component.less

@@ -29,3 +29,18 @@
  color: var(--prizm-status-info-primary-default);
  }
 }
+
+.buttons-block {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.theme-tokens-updater {
+ color: white;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--prizm-index-plan);
+ }
+}

apps/doc/src/app/logo/logo.component.ts

@@ -2,8 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { debounceTime, filter, map } from 'rxjs/operators';
 import { PrizmThemeService } from '@prizm-ui/theme';
 import { LOCAL_STORAGE } from '@ng-web-apis/common';
-import { PrizmIconsSvgRegistry, PrizmIconSvgEnum, prizmIconSvgOtherGitHub } from '@prizm-ui/icons';
+import {
+ PrizmIconsSvgRegistry,
+ PrizmIconSvgEnum,
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+} from '@prizm-ui/icons';
 import { PrizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { PolymorphComponent, PrizmDialogService } from '@prizm-ui/components';
+import { ThemeTokenChangerComponent } from '../theme-token-changer/theme-token-changer.component';
 
 @Component({
  selector: 'prizm-doc-logo',
@@ -21,18 +28,35 @@ export class LogoComponent {
  readonly githubSvgName = PrizmIconSvgEnum.OTHER_GIT_HUB;
 
  constructor(
+ private readonly dialogService: PrizmDialogService,
  private readonly themeSwitcher: PrizmThemeService,
  public readonly languageSwitcher: PrizmLanguageSwitcher,
  private readonly svgRegistry: PrizmIconsSvgRegistry,
  @Inject(LOCAL_STORAGE) private readonly storage: Storage
  ) {
- this.svgRegistry.registerIcons([prizmIconSvgOtherGitHub]);
+ this.svgRegistry.registerIcons([
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+ ]);
  }
 
  public onMode(isNight: boolean): void {
  this.storage.setItem(`night`, isNight ? 'true' : 'false');
  this.themeSwitcher.update(isNight ? 'dark' : 'light');
  }
+
+ protected readonly PrizmIconSvgEnum = PrizmIconSvgEnum;
+
+ public openThemeChanger() {
+ this.dialogService
+ .open(new PolymorphComponent(ThemeTokenChangerComponent), {
+ closeable: true,
+ header: 'Theme changer',
+ height: 800,
+ width: 1000,
+ })
+ .subscribe();
+ }
 }
 
 export const LOGO_CONTENT = 'assets/images/logo.svg';

apps/doc/src/app/logo/logo.module.ts

@@ -5,18 +5,27 @@ import { LogoComponent } from './logo.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { PrizmIconsSvgComponent } from '@prizm-ui/icons';
-import { PrizmToggleModule } from '@prizm-ui/components';
+import {
+ PrizmButtonComponent,
+ PrizmDialogComponent,
+ PrizmDialogModule,
+ PrizmToggleComponent,
+} from '@prizm-ui/components';
 import { PrizmLetDirective } from '@prizm-ui/helpers';
+import { ThemeTokenChangerComponent } from '../theme-token-changer/theme-token-changer.component';
 
 @NgModule({
  imports: [
  PrizmLetDirective,
  TuiLinkModule,
+ PrizmButtonComponent,
  CommonModule,
  RouterModule,
+ PrizmDialogModule,
+ ThemeTokenChangerComponent,
  FormsModule,
  PrizmIconsSvgComponent,
- PrizmToggleModule,
+ PrizmToggleComponent,
  ],
  declarations: [LogoComponent],
  exports: [LogoComponent],

apps/doc/src/app/theme-token-changer/theme-token-changer.component.html

@@ -0,0 +1,77 @@
+<div class="host-changer" #prizmTheme>
+ <div class="title">
+ <span class="theme-title"> {{ themeService.changesTheme$ | async }} theme </span>
+
+ <div class="buttons-block">
+ <prizm-icons-svg
+ class="theme-tokens-updater"
+ [hidden]="!tokenChangerService.hasDarkValue && !tokenChangerService.hasLightValue"
+ [size]="24"
+ [name]="PrizmIconSvgEnum.SETTINGS_TOOLS_BAN"
+ (click)="tokenChangerService.restore()"
+ >
+ </prizm-icons-svg>
+
+ <prizm-icons-svg
+ class="theme-tokens-updater"
+ [hidden]="!tokenChangerService.hasDarkValue && !tokenChangerService.hasLightValue"
+ [size]="24"
+ [name]="PrizmIconSvgEnum.EDITOR_DECOR_CODE_DOWNLOAD"
+ (click)="tokenChangerService.download()"
+ >
+ </prizm-icons-svg>
+
+ <!-- TODO after fix taiga theme and local updater-->
+ <!-- <prizm-toggle-->
+ <!-- [ngModel]="isNight$ | async"-->
+ <!-- (ngModelChange)="onMode($event)"-->
+ <!-- iconOn="social-sun"-->
+ <!-- ></prizm-toggle>-->
+ </div>
+ </div>
+
+ <div>
+ <prizm-scrollbar class="box">
+ <ng-container *ngIf="theme$ | async as theme; else loadingTemplate">
+ <prizm-doc-documentation
+ [hasTestId]="false"
+ heading="Base variables"
+ hostComponentKey="Base variables"
+ >
+ <ng-template
+ *ngFor="let token of tokens"
+ [documentationPropertyName]="token"
+ [documentationPropertyValue]="tokenChangerService.getTokenValue(token, theme)"
+ [urlUpdate]="false"
+ (documentationPropertyValueChange)="tokenChangerService.updateTokenValue(token, theme, $event)"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ {{ token }}
+ </ng-template>
+ </prizm-doc-documentation>
+ </ng-container>
+ </prizm-scrollbar>
+ </div>
+</div>
+
+<!-- <prizm-doc-documentation-->
+<!-- [hasTestId]="false"-->
+<!-- heading="Palette variables"-->
+<!-- hostComponentKey="Palette variables"-->
+<!-- >-->
+<!-- <ng-template-->
+<!-- *ngFor="let token of PRIZM_THEME_TOKEN_PALETTE_VARIABLES"-->
+<!-- [documentationPropertyName]="token"-->
+<!-- [documentationPropertyValue]="getTokenValue(token)"-->
+<!-- (documentationPropertyValueChange)="themeService.updateTokenValue(token, $event)"-->
+<!-- documentationPropertyType="string"-->
+<!-- documentationPropertyMode="css-var"-->
+<!-- >-->
+<!-- {{ token }}-->
+<!-- </ng-template>-->
+<!-- </prizm-doc-documentation>-->
+
+<ng-template #loadingTemplate>
+ <div class="loading">Загрузка</div>
+</ng-template>

apps/doc/src/app/theme-token-changer/theme-token-changer.component.less

@@ -0,0 +1,77 @@
+.logo-block {
+ margin-top: 44px;
+}
+
+.logo-block,
+.sub-text {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.x-margin {
+ margin-left: 1.25rem;
+ margin-right: 1.25rem;
+}
+
+.sub-text {
+ margin-top: 14px;
+ color: var(--prizm-palette-gray-h750-dark);
+ margin-bottom: 32px;
+ text-align: left;
+}
+
+.icon {
+ cursor: pointer;
+ color: var(--prizm-text-icon-exception);
+
+ &:hover {
+ color: var(--prizm-status-info-primary-default);
+ }
+}
+
+.buttons-block {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.theme-tokens-updater {
+ color: var(--prizm-text-icon-primary);
+ cursor: pointer;
+
+ &:hover {
+ color: var(--prizm-index-plan);
+ }
+}
+
+.buttons-block {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 4px;
+}
+
+.loading {
+ height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 50px;
+}
+
+.box {
+ max-height: 500px;
+ height: 500px;
+}
+
+.theme-title {
+ text-transform: capitalize;
+ color: var(--prizm-text-icon-primary);
+}