Merge pull request #656 from danskernesdigitalebibliotek/develop

Release 2024.23.0

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2

.eslintrc

@@ -1,9 +1,115 @@
 {
-  "extends": ["plugin:reload/typescript"],
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:react/jsx-runtime"
+  ],
+  "settings": {
+    "react": {
+      "version": "16.11.0"
+    }
+  },
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "allowImportExportEverywhere": false,
+    "ecmaFeatures": {
+      "jsx": true,
+      "globalReturn": false,
+    },
+    "project": "./tsconfig.json"
   },
   "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
+    "prefer-arrow-callback": [
+      "error",
+      {
+        "allowNamedFunctions": false,
+        "allowUnboundThis": true
+      }
+    ],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": [
+          "state"
+        ]
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    // We like to use arrow function syntax also for functional components.
+    "react/function-component-definition": "off",
+    // No complaints about missing trailing comma
+    "@typescript-eslint/comma-dangle": "off"
+  },
+  "overrides": [
+    {
+      "files": [
+        "*.tsx"
+      ],
+      "rules": {
+        // We do not use prop-types in ts.
+        "react/prop-types": "off",
+        "react/require-default-props": "off",
+        "react/no-unused-prop-types": "off",
+        "no-underscore-dangle": [
+          "error",
+          {
+            "allow": [
+              "__typename"
+            ]
+          }
+        ],
+        // We do not create any functionality for our components
+        // outside of making them work for storybook viewing
+        "jsx-a11y/click-events-have-key-events": "off",
+        "jsx-a11y/no-noninteractive-element-interactions": "off",
+        "react/button-has-type": "off",
+        "jsx-a11y/alt-text": "off",
+        "react/no-unstable-nested-components": "off",
+        "react/no-array-index-key": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "global-require": "off",
+        "jsx-a11y/no-static-element-interactions": "off",
+        "react/jsx-props-no-spreading": "off",
+        "jsx-a11y/label-has-associated-control": "off",
+        // We do not need return types on react components.
+        "@typescript-eslint/explicit-module-boundary-types": "off"
+      }
+    },
+    {
+      "files": [
+        "*.stories.jsx",
+        "*.stories.tsx",
+        "*.hoc.tsx"
+      ],
+      "rules": {
+        // We need a simple way of passing args in stories via object spreading.
+        "react/jsx-props-no-spreading": "off"
+      }
+    },
+    {
+      "files": [
+        "*.entry.tsx"
+      ],
+      "rules": {
+        // Since we use High Order Functional Component in entries for text props
+        // and want to show the props being used we disable this rule.
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
 }

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+#### Link to issue
+
+Please add a link to the issue being addressed by this change.
+
+#### Description
+
+Please include a short description of the suggested change and the reasoning behind the approach you have chosen.
+
+#### Screenshot of the result
+
+If your change affects the user interface you should include a screenshot of the result with the pull request.
+
+#### Additional comments or questions
+
+If you have any further comments or questions for the reviewer them please add them here.
+

.github/dependabot.yml

@@ -0,0 +1,23 @@
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    open-pull-requests-limit: 10
+    schedule:
+      interval: weekly
+      timezone: Europe/Copenhagen
+    labels:
+      - dependencies
+      - github_actions
+  - package-ecosystem: npm
+    directory: /
+    open-pull-requests-limit: 10
+    schedule:
+      interval: weekly
+      timezone: Europe/Copenhagen
+    labels:
+      - dependencies
+    groups:
+      storybook:
+        patterns:
+          - "@storybook/*"

.github/workflows/a11y.yml

@@ -10,14 +10,14 @@ jobs:
   a11y:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-      - run: npm ci
+      - run: yarn install --frozen-lockfile
 
       - name: Compile styles
-        run: npm run css:build
+        run: yarn css:build
 
       - name: Run accessibility tests
-        run: npm run storybook:axe
+        run: yarn storybook:axe

.github/workflows/chromatic.yml

@@ -6,24 +6,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 
-      - run: npm ci
+      - run: yarn install --frozen-lockfile
 
-      - run: npm run css:build
+      - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11.4.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-        # Forks may not have a CHROMATIC_PROJECT_TOKEN secret set
-        # making the action fail unrelated to the change at hand.
-        # Make it not fail.
-        continue-on-error: true
+          projectToken: c6b96f9648b6

.github/workflows/create-cms-pr.yml

@@ -0,0 +1,60 @@
+# This workflow is triggered when the "Create release on branch changes" workflow is completed.
+# It downloads the release information from the previous workflow and invokes the external PR workflow.
+# The external PR workflow is invoked only if the release branch is not develop or main.
+# Needed secrets:
+#   CMS_PR_CREATION_PAT - for invoking the external PR workflow. A Token with the "repo" scope is needed.
+# Needed env variables:
+#   REMOTE_REPO_GITHUB_HANDLE - is the GitHub handle ([ORG]/[REPO]) of the repository where the external PR workflow is located.
+name: Create CMS PR
+on:
+  workflow_dispatch:
+    inputs:
+      releaseBranch:
+        description: 'Release Branch'
+        required: true
+      dependencyPackage:
+        description: 'Dependency Package'
+        required: true
+
+jobs:
+  invoke-external-pr-workflow:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Invoke external PR workflow
+        id: invoke_external_pr_workflow
+        uses: fjogeleit/http-request-action@v1
+        with:
+          url:  ${{ env.REQUEST_URL}}
+          method: 'POST'
+          customHeaders: |
+            {
+              "Accept": "application/vnd.github+json",
+              "Authorization": "Bearer ${{ secrets.CMS_PR_CREATION_PAT }}"
+            }
+          data: |
+            {
+              "event_type": "create_pr",
+              "client_payload": {
+                "branch": "${{ inputs.releaseBranch }}",
+                "dependency_package": "${{ inputs.dependencyPackage }}"
+              }
+            }
+        env:
+          REQUEST_URL: ${{ format('https://api.github.com/repos/{0}/dispatches', vars.REMOTE_REPO_GITHUB_HANDLE) }}
+        # Only invoke external PR workflow if the release branch is not develop or main
+        if: ${{ !contains(fromJSON('["develop", "main"]'), inputs.releaseBranch) }}
+
+      - name: Adding summary
+        run: |
+          echo "Requested external PR at: ${REMOTE_REPO_GITHUB_HANDLE}" >> $GITHUB_STEP_SUMMARY
+          echo "Based on the [${{ inputs.releaseBranch }}](${{ env.BRANCH_URL }}) branch" >> $GITHUB_STEP_SUMMARY
+        if: ${{ steps.invoke_external_pr_workflow.outcome == 'success' }}
+        env:
+          BRANCH_URL: "${{ github.event.repository.html_url }}/tree/${{ inputs.releaseBranch }}"
+          REMOTE_REPO_GITHUB_HANDLE: "${{ vars.REMOTE_REPO_GITHUB_HANDLE }}"
+
+      - name: Adding summary about skip if branch is develop or main
+        run: |
+          echo "Skipped PR creation because the branch was: $RELEASE_BRANCH " >> $GITHUB_STEP_SUMMARY
+          echo "...which is not considered being a release branch. " >> $GITHUB_STEP_SUMMARY
+        if: ${{ contains(fromJSON('["develop", "main"]'), inputs.releaseBranch) }}

.github/workflows/create-release-on-branch-changes.yml

@@ -0,0 +1,111 @@
+name: Create release on branch changes
+
+on:
+  push:
+    branches-ignore:
+      # Dependabot does not have permissions to create releases
+      - 'dependabot/**'
+
+jobs:
+  create_release_on_branch_changes:
+    name: "Create release on branch changes"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set release variables
+        id: resolve-release-vars
+        # Version 0.0.0-SHA is a schema that supports semantic versioning but
+        # should sink below proper versions.
+        # Output package.json to provide insight and help debugging
+        # Using branch names as tags allows other projects to track unreleased
+        # development.
+        run: |
+          RELEASE_BRANCH=$(echo ${GITHUB_REF#refs/heads/})
+          RELEASE_BRANCH_SLUGGED=$(echo $RELEASE_BRANCH | sed -E -e 's/[^[:alnum:]]+/-/g' -e 's/^-+|-+$//g' | tr '[:upper:]' '[:lower:]')
+          RELEASE_SHA=${{ github.sha }}
+          TAG_NAME=$(echo "branch-${RELEASE_BRANCH}")
+          echo "RELEASE_BRANCH=$RELEASE_BRANCH" >> "$GITHUB_ENV"
+          echo "RELEASE_SHA=$RELEASE_SHA" >> "$GITHUB_ENV"
+          echo "TAG_NAME=$TAG_NAME" >> "$GITHUB_ENV"
+          echo "NPM_VERSION=0.0.0-${RELEASE_SHA}" >> "$GITHUB_ENV"
+          echo "DIST_FILENAME=dist-${RELEASE_BRANCH_SLUGGED}.zip" >> "$GITHUB_ENV"
+
+      # Checkout the HEAD of the PR branch to get the latest commit message.
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Get release description
+        run: |
+          echo "RELEASE_DESCRIPTION=$(git show -s --format=%s)" >> "$GITHUB_ENV"
+
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Create NPMRC
+        run: |
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
+          echo "[@${{ github.repository_owner }}]:registry=https://npm.pkg.github.com" >> ~/.npmrc
+          echo "always-auth=true" >> ~/.npmrc
+          echo 'registry "https://registry.yarnpkg.com"' >> ~/.yarnrc
+
+      - run: yarn install --frozen-lockfile
+
+      - name: Building
+        run: yarn css:build
+
+      - name: Bundling assets
+        run: ./bundle.sh
+        env:
+          VERSION: ${{ env.TAG_NAME }}-${{ env.RELEASE_SHA }}
+
+      - name: Rename assets
+        run: |
+          mv dist.zip $DIST_FILENAME
+
+      - name: Delete existing releases
+        uses: dev-drprasad/delete-tag-and-release@v1.1
+        with:
+          tag_name: ${{ env.TAG_NAME }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+
+      - name: Create or update tag
+        uses: EndBug/latest-tag@v1.6.2
+        with:
+          ref: ${{ env.TAG_NAME }}
+
+      - name: Create release
+        id: create-release
+        uses: softprops/action-gh-release@v2
+        with:
+          prerelease: true
+          target_commitish: ${{ env.RELEASE_SHA }}
+          tag_name: ${{ env.TAG_NAME }}
+          body: ${{ env.RELEASE_DESCRIPTION }}
+          files: ${{ env.DIST_FILENAME }}
+
+      - name: Dispatch CMS PR creation workflow
+        run: |
+          gh workflow run create-cms-pr.yml \
+          -f releaseBranch=${{ env.RELEASE_BRANCH }} \
+          -f dependencyPackage=danskernesdigitalebibliotek/dpl-design-system
+        env:
+          GH_TOKEN: ${{ github.token }}
+
+      - name: Adding summary
+        run: |
+          echo "Release created 🚀😎 at: ${{ steps.create-release.outputs.url }}" >> $GITHUB_STEP_SUMMARY
+
+      - name: Release NPM package
+        run: |
+          npm version ${{ env.NPM_VERSION }} --no-git-tag-version
+          echo ${{ env.TAG_NAME }}
+          cat package.json
+          npm publish --tag ${{ env.TAG_NAME }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Adding summary
+        run: |
+          echo "Npm package created 🚀. Version: ${{ env.NPM_VERSION }}" >> $GITHUB_STEP_SUMMARY