remove turbo reference

.github/workflows/actions/build/action.yml

@@ -1,41 +1,37 @@
-name: 'Build Icons'
-description: 'Build Icons'
+name: 'PNPM & Turbo Cache'
+description: 'PNPM & Turbo Cache'
 runs:
   using: 'composite'
   steps:
-    - name: Remove .npmrc
-      run: rm .npmrc
-      shell: bash
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      with:
+        version: 8
+        run_install: false
 
-    - uses: actions/setup-node@v3
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3
       with:
-        node-version: 16
-        registry-url: 'https://registry.npmjs.org'
-        scope: '@siemens'
+        node-version: 18
+        cache: 'pnpm'
 
-    - name: configure yarnrc
+    - name: Get pnpm store directory
       run: |
-        echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
-        echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       shell: bash
 
-    - uses: actions/cache@v2
-      id: cache
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
       with:
-        path: ./node_modules
-        key: yarn-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
 
-    - name: install
-      if: steps.cache.outputs.cache-hit != 'true'
-      run: yarn install --frozen-lockfile --no-progress
+    - name: Install dependencies
+      run: pnpm install
       shell: bash
 
-    - name: build
-      run: yarn build
-      shell: bash
 
-    - uses: actions/upload-artifact@v3
-      with:
-        name: dist
-        path: |
-          dist
+    - name: Build
+      run: pnpm build --cache-dir=.turbo

.github/workflows/build.yml

@@ -18,81 +18,31 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
-    container:
-      image: node:16.16.0
-      env:
-        DEBIAN_FRONTEND: noninteractive
     steps:
-      - run: |
-          echo "github.ref = ${{ github.ref }}"
-          echo "github.sha = ${{ github.sha }}"
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build
-      - uses: ./.github/workflows/actions/test
-      - uses: actions/cache@v2
-        id: build
-        with:
-          key: build-${{ runner.os }}-${{ github.sha }}
-          path: |
-            dist
-            loader
-            www
-            icons
+
+
+      - name: Test
+        run: pnpm test --cache-dir=.turbo
 
   visual-test:
     needs: [build]
-    timeout-minutes: 60
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.32.1-focal
-      env:
-        DEBIAN_FRONTEND: noninteractive
+      image: mcr.microsoft.com/playwright:v1.39.0-jammy
     steps:
       - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/build
 
-      - name: Remove .npmrc
-        run: rm .npmrc
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: 'https://registry.npmjs.org'
-          scope: '@siemens'
-
-      - name: configure yarnrc
-        run: |
-          echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
-          echo 'yarn-offline-mirror-pruning true' >> .yarnrc
-
-      - uses: actions/cache@v2
-        id: cache
-        with:
-          path: ./node_modules
-          key: yarn-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: install
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile --no-progress
+      - name: Visual Regression
+        run: pnpm run visual-regression --cache-dir=.turbo
 
-      - uses: actions/cache@v2
-        id: build
+      - uses: actions/upload-artifact@v3
+        if: failure()
         with:
-          key: build-${{ runner.os }}-${{ github.sha }}
+          name: html-report--attempt-${{ github.run_attempt }}
           path: |
-            dist
-            loader
-            www
-            icons
-
-      - name: Install Playwright Browsers
-        run: yarn playwright install chromium
-
-      - name: test
-        run: yarn test:e2e
-
-      - uses: actions/upload-artifact@v2
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
+            ./playwright-report/
           retention-days: 1

.github/workflows/publish.yml

@@ -1,25 +1,30 @@
-name: publish
+name: Release
 
 on:
   push:
-    tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
+    branches:
+      - main
 
-concurrency:
-  group: publish-${{ github.sha }}
-  cancel-in-progress: true
+concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
-  build:
+  release:
+    if: ${{ github.repository == 'siemens/ix-icons' }}
+    name: Release
     runs-on: ubuntu-latest
-    container:
-      image: node:16.16.0
-      env:
-        DEBIAN_FRONTEND: noninteractive
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+
       - uses: ./.github/workflows/actions/build
-      - name: Publish to npmjs.org
-        run: yarn publish --access public
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
         env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        with:
+          publish: pnpm ci:publish --publish-branch ${{ github.ref_name }}
+          version: pnpm ci:version

package.json

@@ -37,9 +37,11 @@
     "start": "rimraf build-dist svg && pnpm build:js-icons && stencil build --dev --watch --serve",
     "test": "stencil test --spec",
     "test:watch": "stencil test --spec --watchAll",
-    "test:e2e": "playwright test --reporter html",
+    "visual-regression": "playwright test --reporter html",
     "generate": "stencil generate",
-    "host-root": "http-server -a 127.0.0.1 -p 8080 ./"
+    "host-root": "http-server -a 127.0.0.1 -p 8080 ./",
+    "ci:version": "pnpm changeset version && pnpm i --lockfile-only",
+    "ci:publish": "pnpm publish"
   },
   "dependencies": {
     "@stencil/core": "^4.12.6"

src/components/icon/resolveIcon.ts

@@ -158,7 +158,5 @@ export async function resolveIcon(iconName: string) {
     }
   }
 
-  console.log('old');
-
   return getESMIcon(iconName);
 }

src/components/icon/test/resolveIcon.spec.ts

@@ -1,8 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
  */
+import * as metaTag from './../meta-tag';
 import { resolveIcon } from '../resolveIcon';
-
 const exampleSvg = `
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -22,25 +22,57 @@ const invalidexampleSvg = `
 </script>
 `;
 
-let fetch = (global.fetch = jest.fn(() =>
-  Promise.resolve({
-    text: () => Promise.resolve(exampleSvg),
-    ok: true,
-  }),
-) as jest.Mock);
+jest.mock('../meta-tag');
+jest.mock('../icons', () => ({
+  iconStar: exampleSvg,
+}));
+let fetch = (global.fetch = jest.fn((url: string) => {
+  console.log(url);
+  if (url === '/svg/bulb.svg') {
+    return Promise.resolve({
+      text: () => Promise.resolve(exampleSvg),
+      ok: true,
+    });
+  }
+
+  if (url === 'http://localhost/test.svg') {
+    return Promise.resolve({
+      text: () => Promise.resolve(exampleSvg),
+      ok: true,
+    });
+  }
+
+  if (url === 'http://localhost/invalid.svg') {
+    return Promise.resolve({
+      text: () => Promise.resolve(invalidexampleSvg),
+      ok: true,
+    });
+  }
+}) as jest.Mock);
 
 describe('resolve icon', () => {
   beforeEach(() => {
     fetch.mockClear();
   });
 
   it('should resolve svg from name', async () => {
-    const icon = 'http://localhost/test.svg';
+    const icon = 'star';
+    const data = await resolveIcon(icon);
+
+    expect(data).toBe(
+      `<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`,
+    );
+  });
 
-    const expectedName: string = await resolveIcon(icon);
+  it('resolve by v3 preview feature flat', async () => {
+    (metaTag as any).isV3PreviewEnabled = jest.fn(() => true);
 
-    expect(expectedName.startsWith('<svg')).toBeTruthy();
-    expect(expectedName.endsWith('</svg>')).toBeTruthy();
+    const icon = 'bulb';
+    const data = await resolveIcon(icon);
+
+    expect(data).toBe(
+      `<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`,
+    );
   });
 
   it('should resolve svg from src', async () => {
@@ -52,32 +84,8 @@ describe('resolve icon', () => {
   });
 
   it('should not resolve invalid svg from src', async () => {
-    fetch = global.fetch = jest.fn(() =>
-      Promise.resolve({
-        text: () => Promise.resolve(invalidexampleSvg),
-        ok: true,
-      }),
-    ) as jest.Mock;
-
-    const icon = 'http://localhost/test.svg';
+    const icon = 'http://localhost/invalid.svg';
 
     await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided');
   });
-
-  it('xxxxx', async () => {
-    fetch = global.fetch = jest.fn(url => {
-      expect(url).toBe('/svg/test.svg');
-      return Promise.resolve({
-        text: () => Promise.resolve(exampleSvg),
-        ok: true,
-      });
-    }) as jest.Mock;
-
-    const icon = 'test';
-    const data = await resolveIcon(icon);
-
-    expect(data).toBe(
-      `<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`,
-    );
-  });
 });