refactor: migrate library to Lit

.eslintignore

@@ -2,9 +2,8 @@ dist/
 loader/
 hydrate/
 src/components.d.ts
-storybook-static/
 www/
-convenience/generate-component/boilerplate/
+tools/generate-component/boilerplate/
 
 # not ignored folders/files
 !.github/

.eslintrc.json

@@ -13,7 +13,6 @@
       "jsx": true
     }
   },
-  "ignorePatterns": ["**/react-library/**/*"],
   "overrides": [
     {
       "files": ["*.js", "*.jsx"],
@@ -30,7 +29,14 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
+      "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+        "plugin:lit/recommended",
+        "plugin:lyne/all",
+        "prettier"
+      ],
       "rules": {
         "@typescript-eslint/array-type": "error",
         "@typescript-eslint/explicit-function-return-type": ["warn", { "allowExpressions": true }],
@@ -82,22 +88,40 @@
         // TODO: Remove this after fixing issues
         "@typescript-eslint/no-var-requires": "off",
         // TODO: Evaluate this rule
-        "@typescript-eslint/semi": ["error"],
+        "@typescript-eslint/semi": "error",
+        "import/first": "error",
+        "import/no-absolute-path": "error",
+        "import/no-cycle": "error",
+        "import/no-self-import": "error",
+        "import/no-unresolved": [
+          "error",
+          {
+            "ignore": [
+              "\\.md\\?raw$",
+              "\\.svg\\?raw$",
+              "\\.scss\\?lit\\&inline",
+              // Broken. Maybe due to commonjs?
+              "@storybook/addon-actions/decorator"
+            ]
+          }
+        ],
+        "import/no-useless-path-segments": "error",
+        "import/order": [
+          "error",
+          {
+            "alphabetize": { "order": "asc", "caseInsensitive": true },
+            "newlines-between": "always"
+          }
+        ],
+        // TODO Discuss this with the team
+        "lit/no-invalid-html": "off",
         "camelcase": "off"
       }
     },
     {
       "files": ["*.yaml", "*.yml"],
       "plugins": ["yaml"]
     },
-    {
-      "files": ["*e2e.ts", "*spec.ts"],
-      "env": {
-        "jest/globals": true
-      },
-      "extends": ["plugin:jest/recommended"],
-      "plugins": ["jest"]
-    },
     {
       "files": ["*.tsx", "*.jsx"],
       "extends": ["plugin:jsx-a11y/recommended"],

.github/workflows/continuous-integration-secure.yml

@@ -32,10 +32,10 @@ jobs:
         uses: ./.github/actions/download-artifacts-from-workflow
         with:
           artifacts: 'storybook'
-      - run: mkdir storybook-static
-      - run: unzip storybook.zip -d storybook-static
+      - run: mkdir -p dist/storybook
+      - run: unzip storybook.zip -d dist/storybook
       - name: Remove files with forbidden extensions
-        run: node ./ci/clean-storybook-files.js
+        run: node ./ci/clean-storybook-files.cjs
 
       - name: Create GitHub Deployment
         id: tag-name
@@ -100,6 +100,6 @@ jobs:
           directory: coverage
           override_branch: ${{ github.event.workflow_run.head_branch }}
           override_commit: ${{ github.event.workflow_run.head_commit.id }}
-          override_pr: ${{ steps.yarn-cache-dir-path.outputs.pr }}
+          override_pr: ${{ steps.pr-number.outputs.pr }}
           fail_ci_if_error: true
           verbose: true

.github/workflows/continuous-integration.yml

@@ -39,23 +39,19 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      # Attempt to prevent "The operation was canceled" error
-      - name: Set Swap Space
-        uses: pierotofy/set-swap-space@master
-        with:
-          swap-size-gb: 5
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
       - run: yarn install --frozen-lockfile --non-interactive
 
+      - name: Install browser dependencies
+        run: yarn playwright install-deps
       - name: Run tests
-        # Try yarn test:prod up to three times, if it fails and exit with the exit code from the last execution
-        run: for i in $(seq 1 3); do [ $i -gt 1 ] && sleep 5; yarn test:prod && s=0 && break || s=$?; done; (exit $s)
+        run: yarn test
         env:
-          NODE_OPTIONS: '--max-old-space-size=6144'
+          NODE_ENV: production
       - name: Store coverage
         if: github.event_name == 'pull_request'
         uses: actions/upload-artifact@v3
@@ -85,21 +81,14 @@ jobs:
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: Run build
-        run: STORYBOOK_COMPONENTS_VERSION=$GITHUB_SHA yarn build
-      - name: Store stencil artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: stencil
-          path: |
-            dist/
-            hydrate/
-            loader/
-            react-library/dist/
+        run: yarn build
+        env:
+          STORYBOOK_COMPONENTS_VERSION: ${{ github.event.pull_request.head.sha || github.sha }}
       - name: Store storybook artifacts
         uses: actions/upload-artifact@v3
         with:
           name: storybook
-          path: storybook-static/
+          path: dist/storybook/
 
   chromatic:
     runs-on: ubuntu-latest
@@ -114,18 +103,16 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'yarn'
       - run: yarn install --frozen-lockfile --non-interactive
-      - name: Restore stencil artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: stencil
-          path: .
       - name: Run build
-        run: yarn build:chromatic-stories && yarn build:storybook
+        run: yarn generate:chromatic-stories && yarn build:storybook
+        env:
+          CHROMATIC: true
       - name: Publish to Chromatic
         id: chromatic-publish
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_TOKEN }}
-          storybookBuildDir: storybook-static
+          storybookBuildDir: dist/storybook
           exitOnceUploaded: true
           exitZeroOnChanges: true
+          zip: true

.github/workflows/release.yml

@@ -48,11 +48,6 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
           scope: sbb-esta
       - run: yarn install --frozen-lockfile --non-interactive
-      - name: Run build
-        run: yarn build:chromatic-stories && yarn build
-
-      - name: Bundle stories
-        run: node ./ci/bundleStories.js
 
       - name: 'Release: Set git user'
         run: |
@@ -65,45 +60,22 @@ jobs:
         run: echo "value=$(jq --raw-output .version ./package.json)" >> $GITHUB_OUTPUT
       - name: 'Release: Push release to repository'
         run: git push --follow-tags origin master
+      - name: Run build
+        run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.value }} yarn build
       - name: 'Release: Determine npm tag'
         id: npm_tag
         run: echo "npm_tag=$([[ "${{ steps.version.outputs.value }}" == *"-"* ]] && echo "next" || echo "latest")" >> $GITHUB_OUTPUT
       - name: 'Release: Publish @sbb-esta/lyne-components'
-        run: yarn publish --tag ${{ steps.npm_tag.outputs.npm_tag }}
+        run: yarn publish dist/components --tag ${{ steps.npm_tag.outputs.npm_tag }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: 'Release: Assign current dependency version'
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const fs = require('fs');
-            const path = `${process.env.GITHUB_WORKSPACE}/react-library/package.json`;
-            const pkgJson = fs.readFileSync(path, 'utf8');
-            fs.writeFileSync(path, pkgJson.replace(/0.0.0-PLACEHOLDER/g, '${{ steps.version.outputs.value }}'), 'utf8');
       - name: 'Release: Publish @sbb-esta/lyne-components-react'
-        run: yarn publish react-library --tag ${{ steps.npm_tag.outputs.npm_tag }}
+        run: yarn publish dist/react --tag ${{ steps.npm_tag.outputs.npm_tag }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Create versioned storybook for chromatic
-        run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.value }} yarn build:storybook
-        # Send storybook to chromatic. These snapshots should be accepted as new
-        # baseline in storybook.
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
-          storybookBuildDir: storybook-static
-          autoAcceptChanges: true
-          exitZeroOnChanges: true
-
-      - name: Remove chromatic stories
-        run: cd src && git clean -f -X
-      - name: Create versioned storybook for image
-        run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.value }} yarn build:storybook
       - name: Remove files with forbidden extensions
-        run: node ./ci/clean-storybook-files.js
-
+        run: node ./ci/clean-storybook-files.cjs
       - name: 'Container: Login to GitHub Container Repository'
         run: echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io --username ${{ github.actor }} --password-stdin
       - name: 'Container: Build image'
@@ -114,3 +86,18 @@ jobs:
         run: docker push $IMAGE_REPO:${{ steps.version.outputs.value }}
       - name: 'Container: Publish image as latest'
         run: docker push $IMAGE_REPO:latest
+
+      - name: Generate chromatic stories
+        run: yarn generate:chromatic-stories
+      - name: Create versioned storybook for chromatic
+        run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.value }} yarn build:storybook
+        # Send storybook to chromatic. These snapshots should be accepted as new
+        # baseline in storybook.
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          storybookBuildDir: dist/storybook
+          autoAcceptChanges: true
+          exitZeroOnChanges: true
+          zip: true

.gitignore

@@ -1,10 +1,5 @@
 /dist
-/www
-/loader
-/hydrate
-/storybook-static
 /coverage
-/react-library/dist
 
 *~
 *.sw[mnpcod]
@@ -18,7 +13,6 @@ log.txt
 **/*.chromatic.stories.tsx
 package-lock.json
 
-.stencil/
 .idea/
 .vscode/
 .sass-cache/

.husky/commit-msg

@@ -3,4 +3,4 @@
 
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit $1
+yarn commitlint --edit $1

.nvmrc

@@ -1 +1 @@
-18.16.1
+20.9.0

.prettierignore

@@ -1,10 +1,5 @@
 coverage
 dist
-hydrate
-loader
-storybook-static
-src/components.d.ts
-src/components/*/readme.md
-src/global/core/components/*/readme.md
-convenience/generate-component/boilerplate/readme.md
-react-library
+
+# needed for apexes in `HTMLElementTagNameMap`, which otherwise would be stripped
+tools/generate-component/boilerplate/component.ts

.storybook/main.ts

@@ -1,25 +1,35 @@
-import type { StorybookConfig } from '@storybook/html-webpack5';
+import type { StorybookConfig } from '@storybook/web-components-vite';
+import { BuildOptions, UserConfig, mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.tsx', '../src/**/*.stories.mdx'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-    '@storybook/addon-interactions',
-    '@storybook/preset-scss',
-    '@storybook/addon-mdx-gfm',
-  ],
-  features: {},
-  typescript: {
-    check: false,
-  },
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions'],
   framework: {
-    name: '@storybook/html-webpack5',
+    name: '@storybook/web-components-vite',
     options: {},
   },
   docs: {
     autodocs: true,
   },
-};
+  async viteFinal(config) {
+    let build: BuildOptions = {};
+    if (process.env.CHROMATIC) {
+      build = {
+        sourcemap: false,
+        rollupOptions: {
+          output: {
+            manualChunks(id) {
+              return 'main';
+            },
+          },
+        },
+      };
+    }
 
+    return mergeConfig(config, <UserConfig>{
+      assetsInclude: ['src/**/*.md'],
+      build,
+    });
+  },
+};
 export default config;

.storybook/preview-head.html

@@ -3,6 +3,28 @@
 -->
 <meta name="components-version" content="%STORYBOOK_COMPONENTS_VERSION%" />
 
+<link
+  rel="preload"
+  href="https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+
 <style>
   /* Classes used for the custom sbb-header story. */
   .last-element {