Merge pull request #187 from eccenca/feature/maintainingDependencies-…

…CMEM-5995

Update dependencies

.github/dependabot.yml

@@ -0,0 +1,23 @@
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 1 # set 0 to temporarily disable automatic update requests
+    pull-request-branch-name:
+      separator: "/"
+    assignees:
+      - "haschek"
+  # Maintain dependencies for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    versioning-strategy: increase
+    open-pull-requests-limit: 3 # set 0 to temporarily disable automatic update requests
+    pull-request-branch-name:
+      separator: "/"
+    assignees:
+      - "haschek"

.github/workflows/deployment-storybook.yml

@@ -19,19 +19,20 @@ on:
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'dependabot[bot]' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Install dependencies
         run: yarn install
       - name: Create jest results
         run: yarn test:generate-output
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/release-branch.yml

@@ -4,7 +4,6 @@ on:
   workflow_dispatch:
     branches:
       - "develop"
-      - "feature/prepareReleaseForDM-CMEM-4151" # TODO: only for testing, remove it later
     inputs:
       releasetype:
         description: "Type of release"
@@ -20,10 +19,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@main
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Update package.json with new release candidate version
         id: create-version
         run: |

.github/workflows/release-candidate.yml

@@ -30,15 +30,15 @@ jobs:
               echo "You started it on '${{ steps.branch-name.outputs.current_branch }}'."
               exit 1
           fi
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Initialize mandatory git config
         # @see https://gh.neting.ccmunity/t/how-do-i-get-gh-username-based-on-actions-events/17882
         run: |
           git config user.name "${{ github.actor }}"
           git config user.email "${{ github.actor }}@users.noreply.github.com"
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Get version
         id: package-version
         run: echo "version=$(node -p -e "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/release-final.yml

@@ -13,15 +13,15 @@ jobs:
       sha: ${{ steps.tag-revision.outputs.sha }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Initialize mandatory git config
         # @see https://gh.neting.ccmunity/t/how-do-i-get-gh-username-based-on-actions-events/17882
         run: |
           git config user.name "${{ github.actor }}"
           git config user.email "${{ github.actor }}@users.noreply.github.com"
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Get version
         id: package-version
         run: echo "version=$(node -p -e "require('./package.json').version.split('-').shift()")" >> $GITHUB_OUTPUT
@@ -44,7 +44,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: create-release-version
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           ref: develop
       - name: Initialize mandatory git config

.github/workflows/release-publish.yml

@@ -26,13 +26,13 @@ jobs:
           echo ${{ inputs.ref }}
           echo ${{ inputs.sha }}
           echo ${{ inputs.sectionChangelog }}
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
         with:
           fetch-depth: 0
           ref: ${{ inputs.ref }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
           registry-url: "https://registry.npmjs.org"
       - name: Set name vars
         id: info-vars
@@ -56,7 +56,7 @@ jobs:
         # @see https://github.com/chromaui/chromatic-cli/issues/551
         if: inputs.sectionChangelog != 'Unreleased'
         id: chromatic-upload
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.chromaticToken }}

.github/workflows/test-code.yml

@@ -15,11 +15,11 @@ jobs:
   test-code:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Test using Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@main
         with:
-          node-version: "16"
+          node-version: "18"
       - run: yarn install
       - run: yarn compile
       - run: yarn compile-scss

.github/workflows/test-project.yml

@@ -5,29 +5,29 @@ on:
     branches-ignore:
       - "develop"
       - "main"
+      - "next"
+      - "legacy"
   pull_request:
 
 jobs:
   test-branch-name:
     runs-on: ubuntu-latest
     steps:
       - name: Test branch name
-        # https://github.com/marketplace/actions/branch-name-rules
-        uses: deepakputhraya/action-branch-name@master
+        # https://github.com/marketplace/actions/enforce-branch-name
+        uses: finleyfamily/action-enforce-branch-name@master
         with:
           regex: '([a-z])+\/([a-z]).([aA-zZ\.\-\d])+'
-          allowed_prefixes: "feature,release,fix,bugfix,hotfix,change,temp"
-          ignore: "main,develop"
-          min_length: 10
-          max_length: 100
+          allowed_prefixes: "feature,release,fix,bugfix,hotfix,change,temp,dependabot"
+          exclude: "main,develop,next,legacy"
   test-documentation:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@main
       - name: Test existence of important files
         # https://github.com/marketplace/actions/file-existence
         id: check_files
-        uses: andstor/file-existence-action@v2
+        uses: andstor/file-existence-action@main
         with:
           files: "package.json, LICENSE, README.md, CHANGELOG.md"
       - name: 'Test for "## [Unreleased]" section in changelog'

.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
                 },
             },
         },
+        "@storybook/addon-webpack5-compiler-babel",
     ],
     framework: {
         name: "@storybook/react-webpack5",

CHANGELOG.md

@@ -13,7 +13,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Changed
 
--   Typescript library usage was updated to v5
+-   GUI elements library needs node 18 or an higher version because dependencies were upgraded
+    -   you may run into problems if you try it with Node v16 or v17, or Webpack v4, mainly because of a Node bugfix regarding the OpenSSL provider
+    -   if you cannot upgrade your dependencies then you could workaround that by patching the `crypto` package or using Node with `--openssl-legacy-provider` option
+    -   see https://github.com/webpack/webpack/issues/14532 and https://stackoverflow.com/questions/69692842/ for more info and possible solutions
+-   upgrade to Typescript v5
+    -   your package should be compatible to Typescript 5 patterns
+-   upgrade to Storybook v8
+    -   include a few patches for actions, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
+-   allow `next` and `legacy` as branch names
 
 ## [23.8.0] - 2024-08-19
 

README.md

@@ -47,6 +47,24 @@ All [configuration variables](https://github.com/eccenca/gui-elements/blob/devel
 
 ## Development
 
+### Branch management
+
+We have 4 types of major branches representing the current state:
+
+-   `main`: contains the latest official release, only `release/*` branches will be merged into this branch
+-   `develop`: contains the latest state of development, `feature/*`, `bugfix/*` and `next` branches will be merged into `develop`
+-   `next`: development tree for an upcoming new major version, it will be merged into `develop` at some point, `feature/*`, `bugfix/*` and `release/*` branches will be merged into it
+-   `legacy`: development tree for the predecessor of the current major version, only `bugfix/*` and `hotfix/*` branches will be merged into it
+
+We allow a few more prefixes for valid branchnames:
+
+-   `feature/*`: extend functionality, maintain dependencies
+-   `fix/*`, `bugfix/*`, `hotfix/*`: fix functionality
+-   `release/*`: branches to finalize releases, also used to publish release candidate packages
+-   `change/*`, `temp/*`
+
+`next` and `legacy` only exist if necessary, otherwise we do not maintain those branches. Merges into `main`, `develop`, `next` and `legacy` are always managed by pull requests.
+
 ### Running tests
 
 Run the Jest tests with `yarn test`, for test coverage information run `yarn test:coverage`.

package.json

@@ -28,7 +28,7 @@
         "registry": "https://registry.npmjs.org"
     },
     "engines": {
-        "node": ">=16.x"
+        "node": ">=18"
     },
     "style": "src/index.scss",
     "main": "dist/cjs/index.js",
@@ -66,8 +66,8 @@
     },
     "dependencies": {
         "@blueprintjs/colors": "^5.1.1",
-        "@blueprintjs/core": "^5.10.3",
-        "@blueprintjs/select": "^5.1.5",
+        "@blueprintjs/core": "^5.11.0",
+        "@blueprintjs/select": "^5.2.2",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "11.19.0",
         "@carbon/styles": "1.32.0",
@@ -76,6 +76,7 @@
         "codemirror": "^5.65.16",
         "codemirror-formatting": "^1.0.0",
         "color": "^4.2.3",
+        "compute-scroll-into-view": "^3.1.0",
         "lodash": "^4.17.21",
         "re-resizable": "6.9.9",
         "react": "^16.13.1",
@@ -91,85 +92,80 @@
         "remark-gfm": "^3.0.1",
         "remark-parse": "^10.0.2",
         "reset-css": "^5.0.2",
-        "unified": "^11.0.4",
-        "wicg-inert": "^3.1.2"
+        "unified": "^11.0.5",
+        "wicg-inert": "^3.1.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.9",
+        "@babel/core": "^7.25.2",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-private-methods": "^7.16.11",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.23.9",
-        "@babel/preset-flow": "^7.23.3",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.23.3",
-        "@storybook/addon-actions": "^7.6.17",
-        "@storybook/addon-essentials": "^7.6.17",
-        "@storybook/addon-jest": "^7.6.17",
-        "@storybook/addon-links": "^7.6.17",
-        "@storybook/cli": "^7.6.17",
+        "@babel/preset-env": "^7.25.4",
+        "@babel/preset-flow": "^7.24.7",
+        "@babel/preset-react": "^7.24.7",
+        "@babel/preset-typescript": "^7.24.7",
+        "@storybook/addon-actions": "^8.2.9",
+        "@storybook/addon-essentials": "^8.2.9",
+        "@storybook/addon-jest": "^8.2.9",
+        "@storybook/addon-links": "^8.2.9",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/cli": "^8.2.9",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^7.6.17",
-        "@storybook/react-webpack5": "^7.6.17",
-        "@testing-library/jest-dom": "^6.4.2",
+        "@storybook/react": "^8.2.9",
+        "@storybook/react-webpack5": "^8.2.9",
+        "@storybook/test": "^8.2.9",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^12.1.2",
-        "@types/carbon-components-react": "^7.55.10",
+        "@types/carbon-components-react": "^7.55.13",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.12",
-        "@types/lodash": "^4.14.202",
+        "@types/lodash": "^4.17.7",
         "@types/react-syntax-highlighter": "15.5.11",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^10.9.6",
-        "eslint": "^8.56.0",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "chromatic": "^11.7.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^13.3.0",
+        "lint-staged": "^15.2.9",
         "node-sass-package-importer": "^5.3.3",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
         "regenerator-runtime": "^0.13.9",
-        "rimraf": "^5.0.5",
+        "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^7.6.17",
+        "storybook": "^8.2.9",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
         "ts-node": "^10.9.2",
-        "tsc-esm-fix": "^2.20.25",
+        "tsc-esm-fix": "^3.0.2",
         "typescript": "5.5.3",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
     },
     "peerDependencies": {
+        "@blueprintjs/core": ">=5",
         "@carbon/icons-react": ">=11.34.1",
         "@carbon/styles": "<1.33.0",
         "@types/carbon-components-react": ">=7",
         "react": ">=16",
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.75",
+        "**/@types/react": "^17.0.80",
         "**/@carbon/icons-react": "11.19.0",
-        "**/jackspeak": "2.1.1",
-        "node-sass-package-importer/**/postcss": "^8.4.31",
-        "**/word-wrap": "^1.2.4",
-        "**/webpack-dev-middleware": "^6.1.2",
-        "**/braces": "^3.0.3",
-        "**/ws": "^8.17.1",
-        "**/ejs": "^3.1.10",
-        "**/tar": "^6.2.1",
-        "**/express": "^4.19.2"
+        "node-sass-package-importer/**/postcss": "^8.4.41"
     },
     "husky": {
         "hooks": {