feat: fetch svg from asset path (#56)

* refactor: remove es icon import * refactor: adjust path * refactor: remove svgo gulp file * refactor: remove v2 legacy code * test: revert test file * fix: build sample.json * bump version * feat: implement cache * fix: revert svg incoming location * add feature flag * migrate to pnpm * add changeset * remove turbo reference * fix synatx error * fix build pipe * use pnpm 9 * fix build * revert version * chore add changeset * align PR template with ix repo * update readme * fix jsdocs * add changelog * fix: move caching to fetch function * review comments * remove breaking change * use changeset * use latest pnpm version * fix: change cache order
siemens · May 21, 2024 · 858426a · 858426a
1 parent b36dfa3
commit 858426a
Show file tree

Hide file tree

Showing 723 changed files with 8,586 additions and 6,688 deletions.
diff --git a/.changeset/README.md b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "siemens/ix-icons" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/.changeset/cool-humans-sell.md b/.changeset/cool-humans-sell.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix-icons': minor
+---
+
+feat: fetch svg from asset path
diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
@@ -1,29 +1,28 @@
 <!--
-  Thanks for submitting a pull request!
+  First off, thanks for taking the time to contribute! ❤️
   We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
+-->
+## 💡 What is the current behavior?
 
-  Before submitting a pull request, please make sure the following is done:
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
 
-  1. Fork [the repository](https://github.com/siemens/ix) and create your branch from `main`.
-  2. Run `yarn` in the repository root.
-  3. If you've fixed a bug or added code that should be tested, add tests!
-  4. Ensure the test suite passes (`yarn test`).
-  5. Format your code with [prettier](https://github.com/prettier/prettier).
-  6. Make sure your code lints.
-  7. If you haven't already, complete the CLA.
+GitHub Issue Number: #<ISSUE NUMBER>
 
--->
+## 🆕 What is the new behavior?
 
-## Summary
+<!-- Please describe the behavior or changes that are being added by this PR. -->
 
-<!--
- Explain the **motivation** for making this change. What existing problem does the pull request solve?
--->
+-
+-
 
-## How did you test this change?
+## 🏁 Checklist
 
-<!--
-  Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
-  How exactly did you verify that your PR solves the issue you wanted to solve?
-  If you leave this empty, your PR will very likely be closed.
--->
+A pull request can only be merged if all of these conditions are met (where applicable):
+
+- [ ] 🧪 Unit tests were added/updated and pass (`pnpm test`)
+- [ ] 📸 Visual regression tests were added/updated and pass ([Guide](https://github.com/siemens/ix/blob/main/CONTRIBUTING.md#visual-regression-testing))
+- [ ] 🏗️ Successful compilation (`pnpm build`, changes pushed)
+
+## 👨‍💻 Help & support
+
+<!-- If you need help with anything related to your PR please let us know in this section -->
diff --git a/.github/workflows/actions/build/action.yml b/.github/workflows/actions/build/action.yml
@@ -1,41 +1,38 @@
-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: 9
+        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
+      shell: bash
+      run: pnpm build
diff --git a/.github/workflows/actions/test/action.yml b/.github/workflows/actions/test/action.yml
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -18,81 +18,32 @@ 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
 
-  visual-test:
-    needs: [build]
-    timeout-minutes: 60
+  visual-regression:
+    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
 
-      - 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: ./.github/workflows/actions/build
 
-      - uses: actions/cache@v2
-        id: cache
-        with:
-          path: ./node_modules
-          key: yarn-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+      - name: Install dependencies
+        run: pnpm playwright install chromium
 
-      - name: install
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile --no-progress
+      - name: Visual Regression
+        run: pnpm visual-regression
 
-      - 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
diff --git a/.github/workflows/pre-publish.yml b/.github/workflows/pre-publish.yml
diff --git a/.github/workflows/publish.yml b/.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
diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,7 @@ UserInterfaceState.xcuserstate
 
 node_modules/
 dist/
-dist-css/
+build-dist/
 .yarn-cache/
 /.idea/
 *.log
@@ -39,3 +39,4 @@ icons/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/svg
diff --git a/README.md b/README.md
@@ -8,17 +8,13 @@ SPDX-License-Identifier: MIT
 
 > Siemens Industrial Experience Icons
 
-![npm](https://img.shields.io/badge/npm-%3E%3D8.x.x-blue.svg)
-![node](https://img.shields.io/badge/node-%3E%3D16.16.x-blue.svg)
-![yarn](https://img.shields.io/badge/yarn->=1.x.x-blue.svg)
 [![License: SEE LICENSE IN <LICENSE.md>](https://img.shields.io/badge/License-SEE%20LICENSE%20IN%20LICENSE.md-yellow.svg)](./LICENSE.md)
 
 ## Usage
 
 Using icons within your project. You need to:
 
 - Install `@siemens/ix-icons` e.g. `npm install --save @siemens/ix-icons`
-- Load styling e.g. `@siemens/ix-icons/dist/scss/ix-icons.css`
 
 ```javascript
 import { defineCustomElements } from '@siemens/ix-icons/loader';
@@ -28,13 +24,13 @@ import { defineCustomElements } from '@siemens/ix-icons/loader';
 })();
 ```
 
-### Use icon via string name
+### Angular / Web Components
 
 ```html
 <ix-icon name="rocket"></ix-icon>
 ```
 
-### Use icon via import
+### React and Vue
 
 ```tsx
 import { rocket } from '@siemens/ix-icons/icons';
@@ -53,13 +49,13 @@ import { rocket } from '@siemens/ix-icons/icons';
 ### Installation
 
 ```sh
-yarn install
+pnpm install
 ```
 
 ### Build
 
 ```sh
-yarn build
+pnpm build
 ```
 
 ## 🤝 Contributing