feat!: add @taiga-ui/styles (#2320)

taiga-family · Aug 30, 2022 · d1a40a5 · d1a40a5
1 parent 12ada74
commit d1a40a5
Show file tree

Hide file tree

Showing 60 changed files with 2,013 additions and 1,241 deletions.
diff --git a/angular.json b/angular.json
@@ -18,6 +18,7 @@
         "i18n": "projects/i18n",
         "icons": "projects/icons",
         "kit": "projects/kit",
+        "styles": "projects/styles",
         "taiga-schematics": "projects/taiga-schematics",
         "testing": "projects/testing"
     }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -103,6 +103,7 @@
         "@types/parse5": "^6.0.3",
         "@types/webpack-env": "^1.17.0",
         "angular-http-server": "^1.10.0",
+        "cpy-cli": "^4.1.0",
         "cy2": "~2.0.0",
         "cypress": "~10.0.3",
         "eslint-plugin-decorator-position": "~5.0.1",

diff --git a/projects/cdk/schematics/constants/file-globs.ts b/projects/cdk/schematics/constants/file-globs.ts
@@ -6,4 +6,4 @@ const EXCLUDE_FILE_PATTERNS = [
 
 const FILTERED_PATHS = `!(${EXCLUDE_DIRECTORIES})/**/!(${EXCLUDE_FILE_PATTERNS})`;
 export const ALL_TS_FILES = `${FILTERED_PATHS}.ts`;
-export const ALL_FILES = `${FILTERED_PATHS}.{html,ts}`;
+export const ALL_FILES = `${FILTERED_PATHS}.{html,ts,less}`;
diff --git a/projects/cdk/schematics/constants/taiga-styles.ts b/projects/cdk/schematics/constants/taiga-styles.ts
@@ -1,4 +1,6 @@
-export const TAIGA_GLOBAL_STYLE =
-    'node_modules/@taiga-ui/core/styles/taiga-ui-global.less';
+export const TAIGA_GLOBAL_STYLE = [
+    'node_modules/@taiga-ui/core/styles/taiga-ui-local.less',
+    'node_modules/@taiga-ui/styles/taiga-ui-global.less',
+];
 export const TAIGA_THEME_STYLE = 'node_modules/@taiga-ui/core/styles/taiga-ui-theme.less';
 export const TAIGA_THEME_FONTS = 'node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less';
diff --git a/projects/cdk/schematics/ng-add/index.ts b/projects/cdk/schematics/ng-add/index.ts
@@ -36,6 +36,13 @@ function addDependencies(tree: Tree, options: Schema): void {
         });
     });
 
+    if (options.addGlobalStyles) {
+        addPackageJsonDependency(tree, {
+            name: `@taiga-ui/styles`,
+            version: TAIGA_VERSION,
+        });
+    }
+
     if (options.addSanitizer) {
         addPackageJsonDependency(tree, {
             name: '@tinkoff/ng-dompurify',

diff --git a/projects/cdk/schematics/ng-add/schema.json b/projects/cdk/schematics/ng-add/schema.json
@@ -11,6 +11,15 @@
                 "$source": "projectName"
             }
         },
+        "addGlobalStyles": {
+            "description": "Setting up global styles",
+            "type": "boolean",
+            "default": false,
+            "x-prompt": {
+                "message": "Do you want to use global Taiga UI classes, such as 'tui-space', 'tui-skeleton', etc?",
+                "type": "confirmation"
+            }
+        },
         "addDialogsModule": {
             "description": "Setting up dialog module",
             "type": "boolean",

diff --git a/projects/cdk/schematics/ng-add/schema.ts b/projects/cdk/schematics/ng-add/schema.ts
@@ -1,6 +1,7 @@
 export interface Schema {
     readonly project: string;
     readonly addons: ReadonlyArray<string>;
+    readonly addGlobalStyles: boolean;
     readonly addAlertModule: boolean;
     readonly addDialogsModule: boolean;
     readonly addSanitizer: boolean;

diff --git a/projects/cdk/schematics/ng-add/steps/add-taiga-styles.ts b/projects/cdk/schematics/ng-add/steps/add-taiga-styles.ts
@@ -1,11 +1,18 @@
 import {Rule, Tree} from '@angular-devkit/schematics';
 import {Schema} from '../schema';
 import {addStylesToAngularJson} from '../../utils/add-styles';
-import {TAIGA_THEME_FONTS, TAIGA_THEME_STYLE} from '../../constants/taiga-styles';
+import {
+    TAIGA_GLOBAL_STYLE,
+    TAIGA_THEME_FONTS,
+    TAIGA_THEME_STYLE,
+} from '../../constants/taiga-styles';
 
 export function addTaigaStyles(options: Schema): Rule {
     return async (_: Tree, context) => {
-        const taigaStyles = [TAIGA_THEME_STYLE, TAIGA_THEME_FONTS];
+        const taigaLocalStyles = [TAIGA_THEME_STYLE, TAIGA_THEME_FONTS];
+        const taigaStyles = options.addGlobalStyles
+            ? [...taigaLocalStyles, ...TAIGA_GLOBAL_STYLE]
+            : taigaLocalStyles;
 
         return addStylesToAngularJson(options, context, taigaStyles);
     };

diff --git a/projects/cdk/schematics/ng-add/tests/schematic-ng-add.spec.ts b/projects/cdk/schematics/ng-add/tests/schematic-ng-add.spec.ts
@@ -42,6 +42,7 @@ describe('ng-add', () => {
     it('should add main modules in package.json', async () => {
         const options: Schema = {
             addSanitizer: false,
+            addGlobalStyles: false,
             addDialogsModule: false,
             addAlertModule: false,
             addons: [],
@@ -66,6 +67,7 @@ describe('ng-add', () => {
     it('should add additional modules in package.json', async () => {
         const options: Schema = {
             addSanitizer: true,
+            addGlobalStyles: false,
             addDialogsModule: false,
             addAlertModule: false,
             addons: ['addon-doc', 'addon-mobile'],
@@ -95,6 +97,40 @@ describe('ng-add', () => {
         );
     });
 
+    it('should add additional modules in package.json and global styles', async () => {
+        const options: Schema = {
+            addSanitizer: true,
+            addGlobalStyles: true,
+            addDialogsModule: false,
+            addAlertModule: false,
+            addons: ['addon-doc', 'addon-mobile'],
+            project: '',
+        };
+
+        const tree = await runner.runSchematicAsync('ng-add', options, host).toPromise();
+
+        expect(tree.readContent('package.json')).toEqual(
+            `{
+  "devDependencies": {
+    "@types/dompurify": "${DOMPURIFY_TYPES_VERSION}"
+  },
+  "dependencies": {
+    "@angular/cdk": "^13.0.0",
+    "@angular/core": "~13.0.0",
+    "@taiga-ui/addon-doc": "${TAIGA_VERSION}",
+    "@taiga-ui/addon-mobile": "${TAIGA_VERSION}",
+    "@taiga-ui/cdk": "${TAIGA_VERSION}",
+    "@taiga-ui/core": "${TAIGA_VERSION}",
+    "@taiga-ui/icons": "${TAIGA_VERSION}",
+    "@taiga-ui/kit": "${TAIGA_VERSION}",
+    "@taiga-ui/styles": "${TAIGA_VERSION}",
+    "@tinkoff/ng-dompurify": "${NG_DOMPURIFY_VERSION}",
+    "dompurify": "${DOMPURIFY_VERSION}"
+  }
+}`,
+        );
+    });
+
     it('should add assets and styles in angular.json', async () => {
         const tree = await runner
             .runSchematicAsync('ng-add-setup-project', {}, host)
@@ -167,9 +203,50 @@ describe('ng-add', () => {
 }`);
     });
 
+    it('should add global styles', async () => {
+        createAngularJson({stylesExist: true});
+        saveActiveProject();
+
+        const tree = await runner
+            .runSchematicAsync('ng-add-setup-project', {addGlobalStyles: true}, host)
+            .toPromise();
+
+        expect(tree.readContent('angular.json')).toEqual(`
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-local.less",
+              "node_modules/@taiga-ui/styles/taiga-ui-global.less",
+              "some.style"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ]
+                }
+          }
+        }
+    }
+  }
+}`);
+    });
+
     it('Should add Taiga-ui modules and providers to main module', async () => {
         const options: Schema = {
             addSanitizer: true,
+            addGlobalStyles: false,
             addDialogsModule: true,
             addAlertModule: true,
             addons: [],

diff --git a/projects/cdk/schematics/ng-update/index.ts b/projects/cdk/schematics/ng-update/index.ts
@@ -18,6 +18,7 @@ import {FINISH_SYMBOL, START_SYMBOL, titleLog} from '../utils/colored-log';
 import {dateTimeMigrations} from './steps/migrate-date-time';
 import {addStylesToAngularJson} from '../utils/add-styles';
 import {TAIGA_THEME_FONTS} from '../constants/taiga-styles';
+import {replaceStyles} from './steps/replace-styles';
 import {ALL_FILES} from '../constants';
 import {getExecutionTime} from '../utils/get-execution-time';
 
@@ -61,6 +62,7 @@ function main(_: Schema): Rule {
         renameTypes();
         replaceConstants();
         replaceServices();
+        replaceStyles();
         showWarnings(context);
         migrateTemplates(fileSystem);
 

diff --git a/projects/cdk/schematics/ng-update/steps/migrate-templates.ts b/projects/cdk/schematics/ng-update/steps/migrate-templates.ts
@@ -26,7 +26,6 @@ import {
     getTemplateFromTemplateResource,
     getTemplateOffset,
 } from '../../utils/templates/template-resource';
-import {addProviderToComponent} from 'ng-morph';
 import {getNgComponents} from '../../utils/angular/ng-component';
 import {addUniqueImport} from '../../utils/add-unique-import';
 import {

diff --git a/projects/cdk/schematics/ng-update/steps/replace-styles.ts b/projects/cdk/schematics/ng-update/steps/replace-styles.ts
@@ -0,0 +1,16 @@
+import {getActiveProject} from 'ng-morph';
+
+export function replaceStyles() {
+    getActiveProject()
+        ?.getSourceFiles('**/**.less')
+        .forEach(sourceFile => {
+            const fullText = sourceFile.getFullText();
+
+            sourceFile.replaceWithText(
+                fullText.replace(
+                    `@import '~@taiga-ui/core/styles/taiga-ui-global';`,
+                    `@import '~@taiga-ui/core/styles/taiga-ui-local';\n@import '~@taiga-ui/styles/taiga-ui-global';`,
+                ),
+            );
+        });
+}
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-deep-imports.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-deep-imports.spec.ts
@@ -42,7 +42,8 @@ export class AppComponent {}`,
         );
 
         expect(tree.readContent('test/style.less')).toEqual(
-            `@import '~@taiga-ui/core/styles/taiga-ui-global';`,
+            `@import '~@taiga-ui/core/styles/taiga-ui-local';
+@import '~@taiga-ui/styles/taiga-ui-global';`,
         );
 
         expect(tree.readContent('test/app/app.template.less')).toEqual(

diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-styles.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-styles.spec.ts
@@ -0,0 +1,86 @@
+import {HostTree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+
+import {
+    createProject,
+    createSourceFile,
+    resetActiveProject,
+    saveActiveProject,
+    setActiveProject,
+} from 'ng-morph';
+import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
+
+const collectionPath = join(__dirname, '../../migration.json');
+
+const BEFORE_GLOBAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-fonts';
+@import '~@taiga-ui/core/styles/taiga-ui-global';
+@import '~@taiga-ui/proprietary-core/styles/tinkoff-fonts';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-v2';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-mobile';
+`;
+
+const AFTER_GLOBAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-fonts';
+@import '~@taiga-ui/core/styles/taiga-ui-local';
+@import '~@taiga-ui/styles/taiga-ui-global';
+@import '~@taiga-ui/proprietary-core/styles/tinkoff-fonts';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-v2';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-mobile';
+`;
+
+const BEFORE_LOCAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-local';
+`;
+
+const AFTER_LOCAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-local';
+`;
+
+describe('replace styles', () => {
+    let host: UnitTestTree;
+    let runner: SchematicTestRunner;
+
+    beforeEach(() => {
+        host = new UnitTestTree(new HostTree());
+        runner = new SchematicTestRunner('schematics', collectionPath);
+
+        setActiveProject(createProject(host, '/', '**/**'));
+
+        createMainFiles();
+
+        saveActiveProject();
+    });
+
+    it('should replace with new global styles', async () => {
+        const tree = await runner.runSchematicAsync('updateToV3', {}, host).toPromise();
+
+        expect(tree.readContent('test/style.less')).toBe(AFTER_GLOBAL_STYLE);
+        expect(tree.readContent('test/app/app.template.less')).toBe(AFTER_LOCAL_STYLE);
+    });
+
+    afterEach(() => {
+        resetActiveProject();
+    });
+});
+
+function createMainFiles(): void {
+    createSourceFile(
+        'test/app/app.component.ts',
+        `
+@Component({
+    templateUrl: './app.template.html',
+    styleUrls: ['./app.template.less']
+})
+export class AppComponent {
+}
+`,
+    );
+
+    createSourceFile('test/app/app.template.html', `<app></app>`);
+    createSourceFile('test/style.less', BEFORE_GLOBAL_STYLE);
+    createSourceFile('test/app/app.template.less', BEFORE_LOCAL_STYLE);
+
+    createAngularJson();
+}
diff --git a/projects/core/components/group/group-styles.component.ts b/projects/core/components/group/group-styles.component.ts
@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
     template: ``,
-    styleUrls: [`../../styles/markup/tui-group.less`],
+    styleUrls: [`./group.style.less`],
     encapsulation: ViewEncapsulation.None,
 })
 export class TuiGroupStylesComponent {}
diff --git a/projects/core/styles/markup/tui-group.less → ...ts/core/components/group/group.style.less b/projects/core/styles/markup/tui-group.less → ...ts/core/components/group/group.style.less
@@ -1,4 +1,4 @@
-@import '../taiga-ui-local';
+@import '../../styles/taiga-ui-local';
 
 .tui-group {
     .createStackingContext();

diff --git a/projects/core/styles/taiga-ui-fonts.less b/projects/core/styles/taiga-ui-fonts.less
@@ -1 +1 @@
-@import 'theme/fonts.css';
+@import (css) url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap');
diff --git a/projects/core/styles/taiga-ui-global-old.less b/projects/core/styles/taiga-ui-global-old.less
diff --git a/projects/core/styles/taiga-ui-local-old.less b/projects/core/styles/taiga-ui-local-old.less
diff --git a/projects/core/styles/theme/fonts.css b/projects/core/styles/theme/fonts.css
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import 'theme/fonts.css';
		@import (css) url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap');