chore: Update NPM publishing to use OIDC

.changeset/smart-cobras-smash.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/icons-react16": patch
+---
+
+Update to Npm OIDC release

.github/workflows/changeset.yml

@@ -10,7 +10,7 @@ jobs:
     version:
         runs-on: ubuntu-latest
         permissions:
-            id-token: write # required for provenance https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
+            id-token: write # OIDC for npm Trusted Publishing
             contents: write
             pull-requests: write
 
@@ -21,15 +21,14 @@ jobs:
                   fetch-depth: 0
 
             - name: Install Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                 node-version-file: ".nvmrc"
 
             - name: Install pnpm
-              uses: pnpm/action-setup@v2
+              uses: pnpm/action-setup@v4
               id: pnpm-install
               with:
-                  version: 9
                   run_install: false
 
             - name: Get pnpm store directory
@@ -57,4 +56,3 @@ jobs:
                   publish: pnpm run ci-release
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  NPM_TOKEN: ${{ secrets.WORKLEAP_NPM_TOKEN }}

.github/workflows/ci.yml

@@ -24,16 +24,15 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
-          version: 9
-          run_install: false
+            run_install: false
 
       - name: Get pnpm store directory
         id: pnpm-cache

.nvmrc

@@ -1 +1 @@
-lts/*
+24.10

.stylelintrc.cjs

@@ -1,8 +1,30 @@
 // @ts-check
 
+const HopperCSSVarRegex = /^hop-([A-Z][A-z0-9]+)(-[a-z0-9]+)*$/;
+const NormalKebabCaseRegex = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+// we can't enforce that someone doesn't do --hop-button instead of --hop-Button, because it's too hard to know what is
+// a component and what is a token, such as --hop-primary-color. So we'll just allow any kebab-case variable name.
+const AllowedCSSVarsRegex = new RegExp(`^(${HopperCSSVarRegex.source}|${NormalKebabCaseRegex.source})$`);
+
 /** @type {import('stylelint').Config} */
 const config = {
-    extends: "@workleap/stylelint-configs"
+    extends: "@workleap/stylelint-configs",
+    rules: {
+        "selector-class-pattern": [
+            /** Selector that ensures our classNames have the pattern hop-ComponentName__element-name--modifier-name */
+            "^hop-([A-Z][A-z0-9]+)([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$",
+            {
+                resolveNestedSelectors: true,
+                message: selectorValue => `Expected class selector "${selectorValue}" to match our CSS pattern https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md#css-selector-naming-conventions. Selector validation tool: https://regexr.com/7tftf`
+            }
+        ],
+        "custom-property-pattern": [
+            AllowedCSSVarsRegex.source,
+            {
+                "message": "Expected css variables to be kebab-case or hop-ComponentName-kebab-case"
+            }
+        ],
+    }
 };
 
 module.exports = config;

package.json

@@ -30,19 +30,25 @@
         "@types/jest": "29.5.9",
         "@types/node": "20.9.3",
         "@workleap/eslint-plugin": "3.0.0",
-        "@workleap/stylelint-configs": "2.0.0",
+        "@workleap/stylelint-configs": "2.1.0",
         "@workleap/typescript-configs": "3.0.2",
+        "eslint": "8.57.1",
         "eslint-plugin-storybook": "0.6.15",
+        "postcss": "8.4.33",
+        "postcss-modules": "6.0.0",
         "prettier": "3.1.0",
         "prop-types": "15.8.1",
         "react-dom": "18.2.0",
         "react": "18.2.0",
-        "stylelint": "15.11.0",
-        "ts-node": "10.9.1"
+        "stylelint": "16.24.0",
+        "svgo": "3.3.2",
+        "ts-node": "10.9.1",
+        "tsup": "8.0.1"
     },
     "bugs": {
         "url": "https://github.com/workleap/wl-hopper/issues"
     },
     "readme": "https://github.com/workleap/wl-hopper#readme",
-    "homepage": "https://github.com/workleap/wl-hopper#readme"
+    "homepage": "https://github.com/workleap/wl-hopper#readme",
+    "packageManager": "pnpm@10.19.0"
 }

packages/icons-react16/package.json

@@ -58,6 +58,7 @@
         "postcss-modules": "6.0.0",
         "react": "^16",
         "react-dom": "^16",
+        "svgo": "3.3.2",
         "ts-jest": "29.1.2",
         "ts-node": "10.9.2",
         "tsup": "8.0.1",