chore(i18n): finish i18n for packages (#126)

* feat(i18n): add i18n package * feat(i18n): add russian language * chore(ci): update CI with i18n * feat(cdk, core): `TuiMonthPipe` move from cdk to core, add i18n BREAKING CHANGE: import it from @taiga-ui/core library and use with async pipe * chore(all): add i18n * chore(tests): fix them all * chore(kit): fix calendars i18n * chore(demo): add i18n page * chore(i18n): bump version after merge main * chore(i18n): fix use before declaration error * chore(kit): fix build error * chore(all): fix comments * chore(kit): fix async issue * chore(kit): fix typing issue
taiga-family · Jan 22, 2021 · d4061cf · d4061cf
2 parents a4b3b3a + bdfc627
commit d4061cf
Show file tree

Hide file tree

Showing 155 changed files with 1,490 additions and 506 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -36,6 +36,7 @@ jobs:
     # End of setup
     - run: |
         npm run build cdk
+        npm run build i18n
         npm run build core
         npm run build kit
         npm run build addon-charts

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -30,6 +30,7 @@ jobs:
     - name: build packages
       run: |
         npm run build cdk
+        npm run build i18n
         npm run build core
         npm run build kit
         npm run build addon-charts
@@ -45,6 +46,7 @@ jobs:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       run: |
         npm publish dist/cdk
+        npm publish dist/i18n
         npm publish dist/core
         npm publish dist/kit
         npm publish dist/addon-charts

diff --git a/angular.json b/angular.json
@@ -41,6 +41,33 @@
                 }
             }
         },
+        "i18n": {
+            "root": "projects/i18n",
+            "sourceRoot": "projects/i18n",
+            "projectType": "library",
+            "prefix": "tui",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-ng-packagr:build",
+                    "options": {
+                        "tsConfig": "projects/i18n/tsconfig.lib.json",
+                        "project": "projects/i18n/ng-package.json"
+                    },
+                    "configurations": {
+                        "production": {
+                            "tsConfig": "projects/i18n/tsconfig.lib.prod.json"
+                        }
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": ["projects/i18n/tsconfig.lib.json"],
+                        "exclude": ["**/node_modules/**"]
+                    }
+                }
+            }
+        },
         "core": {
             "root": "projects/core",
             "sourceRoot": "projects/core",

diff --git a/projects/addon-charts/package.json b/projects/addon-charts/package.json
@@ -23,4 +23,4 @@
     "devDependencies": {
         "@taiga-ui/core": "2.1.3"
     }
-}
+}
diff --git a/projects/addon-charts/tsconfig.spec.json b/projects/addon-charts/tsconfig.spec.json
@@ -6,6 +6,8 @@
         "paths": {
             "@taiga-ui/cdk": ["./projects/cdk/index"],
             "@taiga-ui/cdk/*": ["./projects/cdk/*"],
+            "@taiga-ui/i18n": ["./projects/i18n/index"],
+            "@taiga-ui/i18n/*": ["./projects/i18n/*"],
             "@taiga-ui/core": ["./projects/core/index"],
             "@taiga-ui/core/*": ["./projects/core/*"],
             "@taiga-ui/kit": ["./projects/kit/index"],

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
@@ -158,8 +158,10 @@ export class TuiInputCardGroupedComponent
         @Inject(TUI_IS_MOBILE) isMobile: boolean,
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,
-        @Inject(TUI_CARD_NUMBER_TEXTS) readonly cardNumberTexts: [string, string],
-        @Inject(TUI_CARD_EXPIRY_TEXTS) readonly cardExpiryTexts: [string, string],
+        @Inject(TUI_CARD_NUMBER_TEXTS)
+        readonly cardNumberTexts$: Observable<[string, string]>,
+        @Inject(TUI_CARD_EXPIRY_TEXTS)
+        readonly cardExpiryTexts$: Observable<[string, string]>,
     ) {
         super(control, changeDetectorRef);
 

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
@@ -21,10 +21,11 @@
         </span>
         <label>
             <span
+                *ngIf="cardNumberTexts$ | async as texts"
                 class="placeholder"
                 [class.placeholder_raised]="placeholderRaised"
             >
-                {{isMobile ? cardNumberTexts[0] : cardNumberTexts[1]}}
+                {{isMobile ? texts[0] : texts[1]}}
             </span>
             <span
                 class="collapsed"
@@ -70,10 +71,11 @@
         <span *ngIf="hasExpireExampleText" class="example-text"> 00/00 </span>
         <label>
             <span
+                *ngIf="cardExpiryTexts$ | async as texts"
                 class="placeholder"
                 [class.placeholder_raised]="placeholderRaised"
             >
-                {{isMobile ? cardExpiryTexts[0] : cardExpiryTexts[1]}}
+                {{isMobile ? texts[0] : texts[1]}}
             </span>
             <input
                 #inputExpire

diff --git a/projects/addon-commerce/package.json b/projects/addon-commerce/package.json
@@ -20,10 +20,11 @@
         "@tinkoff/ng-polymorpheus": ">=3.0.0",
         "@taiga-ui/cdk": "2.1.3",
         "@taiga-ui/core": "2.1.3",
+        "@taiga-ui/i18n": "2.1.3",
         "angular2-text-mask": "9.0.0",
         "rxjs": ">=6.0.0"
     },
     "devDependencies": {
         "@taiga-ui/core": "2.1.3"
     }
-}
+}
diff --git a/projects/addon-commerce/tokens/i18n.ts b/projects/addon-commerce/tokens/i18n.ts
@@ -1,15 +1,10 @@
 import {InjectionToken} from '@angular/core';
+import {extractI18n} from '@taiga-ui/i18n';
 
-export const TUI_CARD_NUMBER_TEXTS = new InjectionToken<[string, string]>(
-    `Number and card number i18n`,
-    {
-        factory: () => ['Number', 'Card number'],
-    },
-);
+export const TUI_CARD_NUMBER_TEXTS = new InjectionToken(`Number and card number i18n`, {
+    factory: extractI18n('cardNumber'),
+});
 
-export const TUI_CARD_EXPIRY_TEXTS = new InjectionToken<[string, string]>(
-    `Expiry and card expiry i18n`,
-    {
-        factory: () => ['Expiry', 'Card expiry'],
-    },
-);
+export const TUI_CARD_EXPIRY_TEXTS = new InjectionToken(`Expiry and card expiry i18n`, {
+    factory: extractI18n('cardExpiry'),
+});
diff --git a/projects/addon-commerce/tsconfig.spec.json b/projects/addon-commerce/tsconfig.spec.json
@@ -6,6 +6,8 @@
         "paths": {
             "@taiga-ui/cdk": ["./projects/cdk/index"],
             "@taiga-ui/cdk/*": ["./projects/cdk/*"],
+            "@taiga-ui/i18n": ["./projects/i18n/index"],
+            "@taiga-ui/i18n/*": ["./projects/i18n/*"],
             "@taiga-ui/core": ["./projects/core/index"],
             "@taiga-ui/core/*": ["./projects/core/*"],
             "@taiga-ui/kit": ["./projects/kit/index"],

diff --git a/projects/addon-doc/src/components/copy/copy.component.ts b/projects/addon-doc/src/components/copy/copy.component.ts
@@ -1,8 +1,8 @@
 import {ChangeDetectionStrategy, Component, HostBinding, Inject} from '@angular/core';
-import {tuiPure} from '@taiga-ui/cdk';
+import {TuiDestroyService, tuiPure} from '@taiga-ui/cdk';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit';
 import {Observable, Subject, timer} from 'rxjs';
-import {mapTo, startWith, switchMapTo} from 'rxjs/operators';
+import {mapTo, startWith, switchMapTo, takeUntil} from 'rxjs/operators';
 
 const COPIED_TIMEOUT = 1500;
 
@@ -12,14 +12,24 @@ const COPIED_TIMEOUT = 1500;
     templateUrl: './copy.template.html',
     styleUrls: ['./copy.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TuiDestroyService],
 })
 export class TuiDocCopyComponent {
     private readonly copy$ = new Subject();
 
     @HostBinding('attr.title')
-    readonly title = this.texts[0];
+    title = '';
 
-    constructor(@Inject(TUI_COPY_TEXTS) readonly texts: [string, string]) {}
+    copiedMessage = '';
+
+    constructor(
+        @Inject(TuiDestroyService) destroy$: Observable<void>,
+        @Inject(TUI_COPY_TEXTS) texts$: Observable<[string, string]>,
+    ) {
+        texts$.pipe(takeUntil(destroy$)).subscribe(texts => {
+            [this.title, this.copiedMessage] = texts;
+        });
+    }
 
     @tuiPure
     get copied$(): Observable<boolean> {

diff --git a/projects/addon-doc/src/components/copy/copy.template.html b/projects/addon-doc/src/components/copy/copy.template.html
@@ -10,6 +10,6 @@
         <span class="initial">
             <ng-content></ng-content>
         </span>
-        {{texts[1]}}
+        {{copiedMessage}}
     </span>
 </button>
diff --git a/projects/addon-doc/src/components/example/example.component.ts b/projects/addon-doc/src/components/example/example.component.ts
@@ -9,6 +9,8 @@ import {WINDOW} from '@ng-web-apis/common';
 import {tuiPure} from '@taiga-ui/cdk';
 import {TuiNotification, TuiNotificationsService} from '@taiga-ui/core';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 import {ClipboardCopyService} from '../../services/clipboard-copy.service';
 import {TUI_DOC_EXAMPLE_TEXTS} from '../../tokens/i18n';
 
@@ -34,6 +36,8 @@ export class TuiDocExampleComponent {
 
     readonly defaultTab = this.texts[0];
 
+    readonly copy$ = this.copyTexts$.pipe(map(([copy]) => copy));
+
     constructor(
         @Attribute('id')
         readonly id: string | null,
@@ -42,7 +46,7 @@ export class TuiDocExampleComponent {
         @Inject(TuiNotificationsService)
         private readonly notifications: TuiNotificationsService,
         @Inject(WINDOW) private readonly windowRef: Window,
-        @Inject(TUI_COPY_TEXTS) readonly copyTexts: [string, string],
+        @Inject(TUI_COPY_TEXTS) private readonly copyTexts$: Observable<[string, string]>,
         @Inject(TUI_DOC_EXAMPLE_TEXTS) readonly texts: [string, string, string],
     ) {}
 

diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html
@@ -8,7 +8,7 @@ <h3 *ngIf="heading" class="title">
         class="link-icon"
         icon="tuiIconLinkLarge"
         appearance="icon"
-        [title]="copyTexts[0]"
+        [title]="copy$ | async"
         (click)="copyExampleLink()"
     ></button>
 </h3>
@@ -29,7 +29,7 @@ <h4 *ngIf="description" class="description">{{description}}</h4>
         </div>
         <ng-template #codeTab>
             <tui-doc-copy class="copy-code" (click)="copyCodeExample()">
-                {{copyTexts[0]}}
+                {{copy$ | async}}
             </tui-doc-copy>
             <tui-doc-code [code]="code"></tui-doc-code>
         </ng-template>

diff --git a/projects/addon-doc/src/languages/russian.ts b/projects/addon-doc/src/languages/russian.ts
@@ -0,0 +1,47 @@
+import {Provider} from '@angular/core';
+import {
+    TUI_DOC_DEMO_TEXTS,
+    TUI_DOC_DOCUMENTATION_TEXTS,
+    TUI_DOC_EXAMPLE_TEXTS,
+    TUI_DOC_MENU_TEXT,
+    TUI_DOC_SEARCH_TEXT,
+    TUI_DOC_SEE_ALSO_TEXT,
+    TUI_DOC_SOURCE_CODE_TEXT,
+} from '../tokens/i18n';
+
+export const TUI_DOC_RUSSIAN: Provider[] = [
+    {
+        provide: TUI_DOC_DEMO_TEXTS,
+        useValue: ['Сделано с помощью директивы: ', 'Фон', 'Детали формы'],
+    },
+    {
+        provide: TUI_DOC_DOCUMENTATION_TEXTS,
+        useValue: [
+            'Аргумент',
+            'Тип',
+            'Имя и описание',
+            'Значение',
+            'Для работы с динамическими шаблонами используется',
+        ],
+    },
+    {
+        provide: TUI_DOC_EXAMPLE_TEXTS,
+        useValue: ['Превью', 'Ссылка на пример скопирована', 'Готово'],
+    },
+    {
+        provide: TUI_DOC_MENU_TEXT,
+        useValue: 'Меню',
+    },
+    {
+        provide: TUI_DOC_SEARCH_TEXT,
+        useValue: 'Поиск',
+    },
+    {
+        provide: TUI_DOC_SEE_ALSO_TEXT,
+        useValue: 'Смотрите также',
+    },
+    {
+        provide: TUI_DOC_SOURCE_CODE_TEXT,
+        useValue: 'Исходный код',
+    },
+];
diff --git a/projects/addon-doc/src/public-api.ts b/projects/addon-doc/src/public-api.ts
@@ -29,6 +29,9 @@ export * from './constants/page-modules';
 export * from './interfaces/page';
 export * from './interfaces/source-code-path-options';
 
+/* Languages */
+export * from './languages/russian';
+
 /* Services */
 export * from './services/clipboard-copy.service';
 

diff --git a/projects/addon-doc/src/tokens/i18n.ts b/projects/addon-doc/src/tokens/i18n.ts
@@ -1,5 +1,9 @@
 import {InjectionToken} from '@angular/core';
 
+/**
+ * TODO: think about reorganization in @taiga-ui/i18n way
+ */
+
 /**
  * Works with a tuple
  * [@string tuiMode tooltip content, @string word 'background', @string 'form value']

diff --git a/projects/addon-editor/components/toolbar/toolbar.component.ts b/projects/addon-editor/components/toolbar/toolbar.component.ts
@@ -18,11 +18,8 @@ import {USER_AGENT} from '@ng-web-apis/common';
 import {defaultEditorTools} from '@taiga-ui/addon-editor/constants';
 import {TuiEditorTool} from '@taiga-ui/addon-editor/enums';
 import {TuiEditorFontOption} from '@taiga-ui/addon-editor/interfaces';
-import {
-    EditorToolbarTexts,
-    TUI_EDITOR_TOOLBAR_TEXTS,
-    TUI_IMAGE_LOADER,
-} from '@taiga-ui/addon-editor/tokens';
+import {TUI_IMAGE_LOADER} from '@taiga-ui/addon-editor/tokens';
+import {TUI_EDITOR_TOOLBAR_TEXTS} from '@taiga-ui/addon-editor/tokens';
 import {isSelectionIn, tuiInsertHtml} from '@taiga-ui/addon-editor/utils';
 import {
     EMPTY_QUERY,
@@ -149,7 +146,7 @@ export class TuiToolbarComponent {
         private readonly imageLoader: TuiHandler<File, Observable<string>>,
         @Inject(USER_AGENT) private readonly userAgent: string,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
-        readonly texts: Record<EditorToolbarTexts, string>,
+        readonly texts: Record<string, string>,
     ) {
         this.documentRef = shadowRootRef || documentRef;
 

diff --git a/projects/addon-editor/package.json b/projects/addon-editor/package.json
@@ -20,11 +20,12 @@
         "@angular/platform-browser": ">=6.0.0",
         "@taiga-ui/cdk": "2.1.3",
         "@taiga-ui/core": "2.1.3",
+        "@taiga-ui/i18n": "2.1.3",
         "@taiga-ui/kit": "2.1.3",
         "rxjs": ">=6.0.0"
     },
     "devDependencies": {
         "@taiga-ui/core": "2.1.3",
         "@taiga-ui/kit": "2.1.3"
     }
-}
+}
diff --git a/projects/addon-editor/tsconfig.spec.json b/projects/addon-editor/tsconfig.spec.json
@@ -6,6 +6,8 @@
         "paths": {
             "@taiga-ui/cdk": ["./projects/cdk/index"],
             "@taiga-ui/cdk/*": ["./projects/cdk/*"],
+            "@taiga-ui/i18n": ["./projects/i18n/index"],
+            "@taiga-ui/i18n/*": ["./projects/i18n/*"],
             "@taiga-ui/core": ["./projects/core/index"],
             "@taiga-ui/core/*": ["./projects/core/*"],
             "@taiga-ui/kit": ["./projects/kit/index"],

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -129,13 +129,15 @@ export class TuiMobileCalendarComponent {
         private readonly destroy$: TuiDestroyService,
         @Inject(TUI_VALUE_STREAM)
         valueChanges: Observable<TuiDayRange | null>,
-        @Inject(TUI_CLOSE_WORD) readonly closeWord: string,
-        @Inject(TUI_CANCEL_WORD) readonly cancelWord: string,
-        @Inject(TUI_DONE_WORD) readonly doneWord: string,
+        @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable<string>,
+        @Inject(TUI_CANCEL_WORD) readonly cancelWord$: Observable<string>,
+        @Inject(TUI_DONE_WORD) readonly doneWord$: Observable<string>,
         @Inject(TUI_SHORT_WEEK_DAYS)
-        readonly weekDays: [string, string, string, string, string, string, string],
+        readonly weekDays$: Observable<
+            [string, string, string, string, string, string, string]
+        >,
         @Inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS)
-        readonly chooseDayOrRangeTexts: [string, string],
+        readonly chooseDayOrRangeTexts$: Observable<[string, string]>,
     ) {
         this.isIOS = isIOS;
 

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.module.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.module.ts
@@ -4,7 +4,8 @@ import {NgModule} from '@angular/core';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile/directives/ripple';
 import {TuiTouchableModule} from '@taiga-ui/addon-mobile/directives/touchable';
 import {TuiPrimitiveCalendarMobileModule} from '@taiga-ui/addon-mobile/internal/primitive-calendar-mobile';
-import {TuiMapperPipeModule, TuiMonthPipeModule} from '@taiga-ui/cdk';
+import {TuiMapperPipeModule} from '@taiga-ui/cdk';
+import {TuiMonthPipeModule} from '@taiga-ui/core';
 import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
 import {TuiMobileCalendarComponent} from './mobile-calendar.component';
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,4 @@ @@
         "devDependencies": {
             "@taiga-ui/core": "2.1.3"
         }
-    }
+    }