feat(icons): migrate to evo-icons lib (v6)

angular.json

@@ -28,7 +28,17 @@
               {
                 "glob": "**/*",
                 "input": "./node_modules/evo-ui-kit/assets/",
-                "output": "./assets/"
+                "output": "./assets/ui-kit"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@evotor-dev/evo-icons/dist/monochrome",
+                "output": "./assets/ui-kit/icons"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@evotor-dev/evo-icons/dist/color",
+                "output": "./assets/ui-kit/color-icons"
               }
             ],
             "styles": [
@@ -143,5 +153,8 @@
       }
     }
   },
-  "defaultProject": "evo-ui-kit"
+  "defaultProject": "evo-ui-kit",
+  "cli": {
+    "analytics": false
+  }
 }

gulpfile.js

@@ -5,92 +5,56 @@ const url = require('postcss-url');
 const fs = require('fs');
 const path = require('path');
 const childProcess = require('child_process');
-const {buildColorIcons, buildMonochromeIcons} = require('./scripts/gulp-icons-build');
 
-const {
-    DIST_PATH,
-    SRC_PATH,
-    STORYBOOK_DIST_PATH,
-    STORYBOOK_SRC_PATH,
-    GENERATED_DIR
-} = require('./scripts/gulp-config');
+const {DIST_PATH, SRC_PATH, STORYBOOK_DIST_PATH, STORYBOOK_SRC_PATH} = require('./scripts/gulp-config');
 
 const postcssOptions = {
-    parser: parser
+    parser: parser,
 };
 
-const inlineURL = () => gulp.src(path.join(SRC_PATH, 'lib/styles/**/*.scss'))
-    .pipe(postcss([
-            url({
-                url: 'inline',
-                encodeType: 'base64',
-            }),
-        ],
-        postcssOptions
-    ))
-    .pipe(gulp.dest(path.join(DIST_PATH, 'styles')));
+const inlineURL = () =>
+    gulp
+        .src(path.join(SRC_PATH, 'lib/styles/**/*.scss'))
+        .pipe(
+            postcss(
+                [
+                    url({
+                        url: 'inline',
+                        encodeType: 'base64',
+                    }),
+                ],
+                postcssOptions,
+            ),
+        )
+        .pipe(gulp.dest(path.join(DIST_PATH, 'styles')));
 
 const buildUIKit = () => {
     return childProcess.execSync('ng build evo-ui-kit --configuration production', {stdio: 'inherit'});
-}
-
-const copyGeneratedAssets = (cb) => {
-    gulp
-        .src(path.join(GENERATED_DIR, 'assets/**/*'))
-        .pipe(gulp.dest(path.join(DIST_PATH, 'assets')));
-    return cb();
-}
+};
 
-const copyReadme = (cb) => fs.copyFile(
-    path.join(__dirname, 'README.md'),
-    path.join(DIST_PATH, 'README.md'),
-    cb
-);
+const copyReadme = (cb) => fs.copyFile(path.join(__dirname, 'README.md'), path.join(DIST_PATH, 'README.md'), cb);
 
-const copyReleaserc = () => fs.copyFileSync(
-    path.join(SRC_PATH, '..', 'package-releaserc.json'),
-    path.join(DIST_PATH, '.releaserc.json')
-);
+const copyReleaserc = () =>
+    fs.copyFileSync(path.join(SRC_PATH, '..', 'package-releaserc.json'), path.join(DIST_PATH, '.releaserc.json'));
 
 const buildStorybook = (cb) => {
     childProcess.execSync(`build-storybook -c .storybook -o ${STORYBOOK_DIST_PATH}`, {stdio: 'inherit'});
     return cb();
 };
 
 const copyStorybookAssets = (cb) => {
-    gulp
-        .src(path.join(STORYBOOK_SRC_PATH, 'assets/*'))
-        .pipe(gulp.dest(STORYBOOK_DIST_PATH));
-
-    gulp
-        .src(path.join(GENERATED_DIR, 'assets/**/*'))
-        .pipe(gulp.dest(path.join(STORYBOOK_DIST_PATH, 'assets')));
+    gulp.src(path.join(STORYBOOK_SRC_PATH, 'assets/*')).pipe(gulp.dest(STORYBOOK_DIST_PATH));
+    gulp.src(path.join('./node_modules/@evotor-dev/evo-icons/dist/color/*')).pipe(
+        gulp.dest(path.join(STORYBOOK_DIST_PATH, 'assets/color-icons')),
+    );
     return cb();
 };
 
 gulp.task('storybook', gulp.series(buildStorybook, copyStorybookAssets));
 
-gulp.task('buildMonochromeIcons', (cb) => {
-    buildMonochromeIcons();
-    return cb();
-});
-
-gulp.task('buildColorIcons', (cb) => {
-    buildColorIcons();
-    return cb();
-});
-
-gulp.task('copyGeneratedAssets', (cb) => {
-    copyGeneratedAssets(cb);
-    return cb();
-});
-
 gulp.task('default', (cb) => {
-    buildMonochromeIcons();
-    buildColorIcons();
     buildUIKit();
     inlineURL();
     copyReleaserc();
     copyReadme(cb);
-    copyGeneratedAssets(cb);
 });

package.json

@@ -14,8 +14,6 @@
     "ng": "ng",
     "gulp": "gulp",
     "build": "gulp",
-    "build:icons": "gulp buildMonochromeIcons",
-    "build:color-icons": "gulp buildColorIcons",
     "build:storybook": "gulp storybook",
     "lint": "npm run lint:ts && npm run lint:styles",
     "lint:styles": "stylelint \"**/*.scss\"",
@@ -80,6 +78,7 @@
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-angular": "19.3.0",
     "@evotor-dev/eslint-config-ng": "^0.3.0",
+    "@evotor-dev/evo-icons": "1.0.3",
     "@evotor-dev/front-tools-config": "^2.0.1",
     "@evotor-dev/prettier-config": "^2.2.0",
     "@ngneat/spectator": "^8.3.2",

projects/evo-ui-kit/package.json

@@ -19,6 +19,7 @@
         "flatpickr": "4.6.9",
         "ngx-page-scroll": "^7.0.6",
         "ngx-page-scroll-core": "^7.0.6",
+        "@evotor-dev/evo-icons": "*",
         "rxjs": "^6.5.5",
         "ts-keycode-enum": "^1.0.4",
         "@popperjs/core": "2.0.6",

projects/evo-ui-kit/src/lib/components/evo-accordion/evo-accordion.component.spec.ts

@@ -1,29 +1,29 @@
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { EvoAccordionContentComponent } from './evo-accordion-content/evo-accordion-content.component';
-import { EvoAccordionPanelComponent } from './evo-accordion-panel/evo-accordion-panel.component';
-import { EvoAccordionTitleComponent } from './evo-accordion-title/evo-accordion-title.component';
-import { EvoAccordionComponent } from './evo-accordion.component';
-import { EvoIconModule } from '../evo-icon/evo-icon.module';
-import { Component, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { By } from '@angular/platform-browser';
-import { EvoUiKitModule } from '../../evo-ui-kit.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { iconUnfoldLess, iconUnfoldMore } from '@evotor-dev/ui-kit/icons/navigation';
+import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing';
+import {EvoAccordionContentComponent} from './evo-accordion-content/evo-accordion-content.component';
+import {EvoAccordionPanelComponent} from './evo-accordion-panel/evo-accordion-panel.component';
+import {EvoAccordionTitleComponent} from './evo-accordion-title/evo-accordion-title.component';
+import {EvoAccordionComponent} from './evo-accordion.component';
+import {EvoIconModule} from '../evo-icon/evo-icon.module';
+import {Component, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {By} from '@angular/platform-browser';
+import {EvoUiKitModule} from '../../evo-ui-kit.module';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {iconUnfoldLess, iconUnfoldMore} from '@evotor-dev/evo-icons/dist/monochrome/navigation';
 
 @Component({
     template: `
-    <evo-accordion>
-        <evo-accordion-panel #testPanel1>
-            <evo-accordion-title label="Panel 1"></evo-accordion-title>
-            <evo-accordion-content>Panel 1 content</evo-accordion-content>
-        </evo-accordion-panel>
-        <evo-accordion-panel #testPanel2>
-            <evo-accordion-title label="Panel 2"></evo-accordion-title>
-            <evo-accordion-content *evoIsExpanded="testIsExpanded">Panel 2 content</evo-accordion-content>
-        </evo-accordion-panel>
-    </evo-accordion>
-    `
+        <evo-accordion>
+            <evo-accordion-panel #testPanel1>
+                <evo-accordion-title label="Panel 1"></evo-accordion-title>
+                <evo-accordion-content>Panel 1 content</evo-accordion-content>
+            </evo-accordion-panel>
+            <evo-accordion-panel #testPanel2>
+                <evo-accordion-title label="Panel 2"></evo-accordion-title>
+                <evo-accordion-content *evoIsExpanded="testIsExpanded">Panel 2 content</evo-accordion-content>
+            </evo-accordion-panel>
+        </evo-accordion>
+    `,
 })
 export class TestHostComponent {
     @ViewChild('testPanel1') testPanel1: EvoAccordionPanelComponent;
@@ -35,31 +35,33 @@ describe('EvoAccordionComponent', () => {
     let component: TestHostComponent;
     let fixture: ComponentFixture<TestHostComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [
-                EvoAccordionComponent,
-                EvoAccordionTitleComponent,
-                EvoAccordionPanelComponent,
-                EvoAccordionContentComponent,
-                TestHostComponent
-            ],
-            imports: [
-                CommonModule,
-                BrowserAnimationsModule,
-                EvoUiKitModule,
-                EvoIconModule.forRoot([
-                    {
-                        name: 'navigation',
-                        shapes: {
-                            unfold: iconUnfoldMore,
-                            fold: iconUnfoldLess,
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    EvoAccordionComponent,
+                    EvoAccordionTitleComponent,
+                    EvoAccordionPanelComponent,
+                    EvoAccordionContentComponent,
+                    TestHostComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    BrowserAnimationsModule,
+                    EvoUiKitModule,
+                    EvoIconModule.forRoot([
+                        {
+                            name: 'navigation',
+                            shapes: {
+                                unfold: iconUnfoldMore,
+                                fold: iconUnfoldLess,
+                            },
                         },
-                    }
-                ])
-            ]
-        }).compileComponents();
-    }));
+                    ]),
+                ],
+            }).compileComponents();
+        }),
+    );
 
     beforeEach(fakeAsync(() => {
         fixture = TestBed.createComponent(TestHostComponent);
@@ -73,7 +75,9 @@ describe('EvoAccordionComponent', () => {
     });
 
     it('should hide content default, without evoIsExpanded directive', () => {
-        const contentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'));
+        const contentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'),
+        );
         expect(contentElement.styles.height === '0px').toBeTruthy();
     });
 
@@ -82,33 +86,43 @@ describe('EvoAccordionComponent', () => {
         titleElement.triggerEventHandler('click', {});
         tick(300);
         fixture.detectChanges();
-        const contentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'));
+        const contentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'),
+        );
         expect(contentElement.styles.height === '0px').toBeFalsy();
     }));
 
     it('should show content after panel toggle, without evoIsExpanded directive', fakeAsync(() => {
         component.testPanel1.toggle();
         tick(300);
         fixture.detectChanges();
-        const contentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'));
+        const contentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(1) evo-accordion-content'),
+        );
         expect(contentElement.styles.height === '0px').toBeFalsy();
     }));
 
     it('should hide content with expanded = false', () => {
-        const evoAccordionContentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'));
+        const evoAccordionContentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'),
+        );
         expect(evoAccordionContentElement).not.toExist();
     });
 
     it('should show content with expanded = true', () => {
         component.testIsExpanded = true;
         fixture.detectChanges();
-        const evoAccordionContentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'));
+        const evoAccordionContentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'),
+        );
         expect(evoAccordionContentElement).toExist();
     });
 
     it('should show content after toggle panel', () => {
         component.testPanel2.toggle();
-        const evoAccordionContentElement = fixture.debugElement.query(By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'));
+        const evoAccordionContentElement = fixture.debugElement.query(
+            By.css('evo-accordion-panel:nth-child(2) evo-accordion-content'),
+        );
         expect(evoAccordionContentElement).toExist();
     });
 });

projects/evo-ui-kit/src/lib/components/evo-accordion/evo-accordion.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { iconUnfoldMore, iconUnfoldLess } from '@evotor-dev/ui-kit/icons/navigation';
+import { iconUnfoldMore, iconUnfoldLess } from '@evotor-dev/evo-icons/dist/monochrome/navigation';
 import { EvoUiKitModule } from '../../evo-ui-kit.module';
 import { EvoIconModule } from '../evo-icon';
 import { EvoAccordionContentComponent } from './evo-accordion-content/evo-accordion-content.component';

projects/evo-ui-kit/src/lib/components/evo-autocomplete/components/evo-autocomplete/evo-autocomplete.component.ts

@@ -18,7 +18,7 @@ import {NgSelectComponent} from '@ng-select/ng-select';
 import {delay, takeUntil, tap} from 'rxjs/operators';
 import {isNull} from 'lodash-es';
 import {EvoInputTheme} from '../../../evo-input';
-import {iconDecline} from '@evotor-dev/ui-kit/icons/system';
+import {iconDecline} from '@evotor-dev/evo-icons/dist/monochrome/system';
 import {EvoAutocompleteSize} from '../../types/evo-autocomplete-size';
 
 export type DropdownPosition = 'bottom' | 'top' | 'auto';

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts

@@ -5,7 +5,7 @@ import {Component, QueryList, ViewChildren} from '@angular/core';
 import {EvoUiClassDirective} from '../../directives';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {EvoIconModule} from '../evo-icon';
-import {icons} from '../../../../icons';
+import {icons} from '@evotor-dev/evo-icons/dist/monochrome';
 
 @Component({selector: 'evo-host-component', template: ''})
 class TestHostComponent {

projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts

@@ -4,7 +4,7 @@ import { EvoChipComponent } from './evo-chip.component';
 import { FormsModule } from '@angular/forms';
 import { EvoUiKitModule } from '../../evo-ui-kit.module';
 import { EvoIconModule } from '../evo-icon';
-import { iconDecline } from '@evotor-dev/ui-kit/icons/system';
+import { iconDecline } from '@evotor-dev/evo-icons/dist/monochrome/system';
 
 @NgModule({
     declarations: [EvoChipComponent],