feat(all): i18n for packages (#49)

* chore(icons): fix dist paths * chore(kit): finish kit i18n * chore(demo): update logo * chore(addon-table): add i18n * chore(core, kit, tablebars): i18n issues * chore(commerce): add i18n * chore(editor): i18n * chore(all): fix comments and tests * ci(build): build all packages * refactor(package-json): build command * chore(adon-editor): fix build * chore(adon-editor): fix import
taiga-family · Dec 4, 2020 · 020fb59 · 020fb59
1 parent f4797ec
commit 020fb59
Show file tree

Hide file tree

Showing 55 changed files with 433 additions and 177 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -24,6 +24,14 @@ jobs:
       run: npm ci
     # End of setup
     - run: |
-        npm run build:cdk
-        npm run build:core
-        npm run build:kit
+        npm run build cdk
+        npm run build core
+        npm run build kit
+        npm run build addon-charts
+        npm run build addon-commerce
+        npm run build addon-mobile
+        npm run build addon-doc
+        npm run build addon-editor
+        npm run build addon-table
+        npm run build addon-tablebars
+
diff --git a/package.json b/package.json
@@ -19,21 +19,12 @@
         "clear": "prettier --write '**/projects/**/*.{js,ts,html,md,less,json}' && tslint '**/projects/**/*.ts' --fix",
         "typecheck": "tsc --noEmit --skipLibCheck",
         "*** build **": "use package=name command to build a package",
-        "build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng run $package:build --configuration=production",
-        "build:cdk": "package=cdk npm run build",
-        "build:core": "package=core npm run build",
-        "build:kit": "package=kit npm run build",
-        "build:addon-charts": "package=addon-charts npm run build",
-        "build:addon-commerce": "package=addon-commerce npm run build",
-        "build:addon-doc": "package=addon-doc npm run build",
-        "build:addon-mobile": "package=addon-mobile npm run build",
-        "build:addon-table": "package=addon-table npm run build",
-        "build:addon-tablebars": "package=addon-tablebars npm run build",
+        "build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration=production",
         "build:tools": "ng build cypress-testing && ng build testing",
         "*** Icons ***": "",
         "compile:icons": "ts-node --project ./tsconfig.compiler.json scripts/compileIcons.ts",
         "prebuild:icons": "npm run compile:icons projects/icons",
-        "build:icons": "ng run icons:build",
+        "build:icons": "ng run icons:build --configuration=production",
         "postbuild:icons": "node projects/icons/scripts/copy-icons.js",
         "*** Release ***": "",
         "release": "standard-version",

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
@@ -24,6 +24,10 @@ import {
     tuiIconVisa,
 } from '@taiga-ui/addon-commerce/icons';
 import {TuiCard} from '@taiga-ui/addon-commerce/interfaces';
+import {
+    TUI_CARD_EXPIRY_TEXTS,
+    TUI_CARD_NUMBER_TEXTS,
+} from '@taiga-ui/addon-commerce/tokens';
 import {
     getPaymentSystem,
     isCardLengthValid,
@@ -161,6 +165,8 @@ export class TuiInputCardGroupedComponent
         @Optional()
         @Inject(TuiModeDirective)
         private readonly modeDirective: TuiModeDirective | null,
+        @Inject(TUI_CARD_NUMBER_TEXTS) readonly cardNumberTexts: [string, string],
+        @Inject(TUI_CARD_EXPIRY_TEXTS) readonly cardExpiryTexts: [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
@@ -24,8 +24,7 @@
                 class="placeholder"
                 [class.placeholder_raised]="placeholderRaised"
             >
-                <!--TODO: i18n-->
-                {{isMobile ? 'Номер' : 'Номер карты'}}
+                {{isMobile ? cardNumberTexts[0] : cardNumberTexts[1]}}
             </span>
             <span
                 class="collapsed"
@@ -74,8 +73,7 @@
                 class="placeholder"
                 [class.placeholder_raised]="placeholderRaised"
             >
-                <!--TODO: i18n-->
-                {{isMobile ? 'Срок' : 'Срок действия'}}
+                {{isMobile ? cardExpiryTexts[0] : cardExpiryTexts[1]}}
             </span>
             <input
                 #inputExpire

diff --git a/projects/addon-commerce/index.ts b/projects/addon-commerce/index.ts
@@ -5,5 +5,6 @@ export * from '@taiga-ui/addon-commerce/icons';
 export * from '@taiga-ui/addon-commerce/interfaces';
 export * from '@taiga-ui/addon-commerce/pipes';
 export * from '@taiga-ui/addon-commerce/utils';
+export * from '@taiga-ui/addon-commerce/tokens';
 export * from '@taiga-ui/addon-commerce/types';
 export * from '@taiga-ui/addon-commerce/validators';
diff --git a/projects/addon-commerce/tokens/i18n.ts b/projects/addon-commerce/tokens/i18n.ts
@@ -0,0 +1,15 @@
+import {InjectionToken} from '@angular/core';
+
+export const TUI_CARD_NUMBER_TEXTS = new InjectionToken<[string, string]>(
+    `nubmer and card number i18n`,
+    {
+        factory: () => ['Number', 'Card number'],
+    },
+);
+
+export const TUI_CARD_EXPIRY_TEXTS = new InjectionToken<[string, string]>(
+    `Expiry and card expiry i18n`,
+    {
+        factory: () => ['Expiry', 'Card expiry'],
+    },
+);
diff --git a/projects/addon-commerce/tokens/index.ts b/projects/addon-commerce/tokens/index.ts
@@ -0,0 +1 @@
+export * from './i18n';
diff --git a/projects/addon-commerce/tokens/package.json b/projects/addon-commerce/tokens/package.json
@@ -0,0 +1,7 @@
+{
+    "ngPackage": {
+        "lib": {
+            "entryFile": "index.ts"
+        }
+    }
+}
diff --git a/projects/addon-commerce/validators/luhn.validator.ts b/projects/addon-commerce/validators/luhn.validator.ts
@@ -4,12 +4,7 @@ import {TuiValidationError} from '@taiga-ui/cdk';
 import {TUI_NON_DIGITS_REGEXP} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-// TODO: i18n
-const error = 'Неверный формат карты';
-
-export function tuiCreateLuhnValidator(
-    message: PolymorpheusContent = error,
-): ValidatorFn {
+export function tuiCreateLuhnValidator(message: PolymorpheusContent): ValidatorFn {
     return ({value}: AbstractControl) => {
         const cardNumber = String(value).replace(TUI_NON_DIGITS_REGEXP, '');
 

diff --git a/projects/addon-commerce/validators/test/luhn.validator.spec.ts b/projects/addon-commerce/validators/test/luhn.validator.spec.ts
@@ -3,9 +3,8 @@ import {TuiValidationError} from '@taiga-ui/cdk';
 import {tuiCreateLuhnValidator} from '../luhn.validator';
 
 describe('tuiCreateLuhnValidator', () => {
-    const control = new FormControl('', tuiCreateLuhnValidator());
-    const controlCustom = new FormControl('', tuiCreateLuhnValidator('ошибка'));
-    const error = {luhn: new TuiValidationError('Неверный формат карты')};
+    const control = new FormControl('', tuiCreateLuhnValidator('error'));
+    const error = {luhn: new TuiValidationError('error')};
 
     it('Валидный номер карты валиден, проверка 1', () => {
         control.setValue('4111 1111 1111 1111');
@@ -48,11 +47,4 @@ describe('tuiCreateLuhnValidator', () => {
 
         expect(control.errors).toEqual(error);
     });
-
-    it('Кастомный текст ошибки', () => {
-        controlCustom.setValue('2345 7823 4095 8723');
-        controlCustom.updateValueAndValidity();
-
-        expect(controlCustom.errors).toEqual({luhn: new TuiValidationError('ошибка')});
-    });
 });
diff --git a/projects/addon-editor/components/color-selector/color-selector.component.ts b/projects/addon-editor/components/color-selector/color-selector.component.ts
@@ -7,6 +7,7 @@ import {
     Output,
 } from '@angular/core';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
+import {TUI_EDITOR_COLOR_SELECTOR_MODE_NAMES} from '@taiga-ui/addon-editor/tokens';
 import {TuiGradientDirection} from '@taiga-ui/addon-editor/types';
 import {getGradientData, parseColor, parseGradient} from '@taiga-ui/addon-editor/utils';
 import {tuiDefaultProp, tuiPure, tuiRequiredSetter} from '@taiga-ui/cdk';
@@ -29,6 +30,7 @@ const ICONS: Record<TuiGradientDirection, string> = {
     'to top': 'tuiIconArrowLongUp',
 };
 
+// @dynamic
 @Component({
     selector: 'tui-color-selector',
     templateUrl: './color-selector.template.html',
@@ -52,9 +54,6 @@ export class TuiColorSelectorComponent {
 
     color: [number, number, number, number] = [0, 0, 0, 1];
 
-    // TODO: i18n
-    readonly modes = ['Сплошной цвет', 'Градиент'];
-
     currentMode = this.modes[0];
 
     readonly buttons: ReadonlyArray<TuiGradientDirection> = [
@@ -74,7 +73,10 @@ export class TuiColorSelectorComponent {
 
     private direction: TuiGradientDirection = 'to bottom';
 
-    constructor(@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer) {}
+    constructor(
+        @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
+        @Inject(TUI_EDITOR_COLOR_SELECTOR_MODE_NAMES) readonly modes: [string, string],
+    ) {}
 
     get palette(): Map<string, string> {
         return this.filterPalette(this.colors, this.isGradient);

diff --git a/projects/addon-editor/components/toolbar/toolbar.component.ts b/projects/addon-editor/components/toolbar/toolbar.component.ts
@@ -18,7 +18,11 @@ 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 {TUI_IMAGE_LOADER} from '@taiga-ui/addon-editor/tokens';
+import {
+    EditorToolbarTexts,
+    TUI_EDITOR_TOOLBAR_TEXTS,
+    TUI_IMAGE_LOADER,
+} from '@taiga-ui/addon-editor/tokens';
 import {isSelectionIn, tuiInsertHtml} from '@taiga-ui/addon-editor/utils';
 import {
     EMPTY_QUERY,
@@ -36,10 +40,9 @@ import {
     TuiButtonComponent,
     TuiHostedDropdownComponent,
 } from '@taiga-ui/core';
-import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
+import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit';
 import {merge, Observable} from 'rxjs';
 import {take, takeUntil} from 'rxjs/operators';
-import {TUI_CANCEL_WORD} from '../../../kit';
 
 const DEFAULT_FONT = 'haas, helvetica, arial, sans-serif';
 const MONOSPACE_FONT = 'Courier';
@@ -145,7 +148,8 @@ export class TuiToolbarComponent {
         @Inject(TUI_IMAGE_LOADER)
         private readonly imageLoader: TuiHandler<File, Observable<string>>,
         @Inject(USER_AGENT) private readonly userAgent: string,
-        @Inject(TUI_CANCEL_WORD) readonly cancelWord: string,
+        @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
+        readonly texts: Record<EditorToolbarTexts, string>,
     ) {
         this.documentRef = shadowRootRef || documentRef;