Use PNPM (#1088)

Co-authored-by: asyncapi-bot <bot+chan@asyncapi.io>

.changeset/odd-rules-accept.md

@@ -0,0 +1,8 @@
+---
+"design-system": patch
+"studio-next": patch
+"@asyncapi/studio": patch
+"@asyncapi/studio-ui": patch
+---
+
+- Use PNPM instead of NPM.

.github/workflows/if-nodejs-pr-testing.yml

@@ -44,36 +44,31 @@ jobs:
         name: Checkout repository
         uses: actions/checkout@v4
       - if: steps.should_run.outputs.shouldrun == 'true' 
-        name: Check if Node.js project and has package.json
-        id: packagejson
-        run: test -e ./package.json && echo "exists=true" >> $GITHUB_OUTPUT || echo "exists=false" >> $GITHUB_OUTPUT
-        shell: bash
-      - if: steps.packagejson.outputs.exists == 'true'
-        name: Check package-lock version
-        uses: asyncapi/.github/.github/actions/get-node-version-from-package-lock@master
-        id: lockversion
-      - if: steps.packagejson.outputs.exists == 'true'
         name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "${{ steps.lockversion.outputs.version }}"
-      - if: steps.lockversion.outputs.version == '18' && matrix.os == 'windows-latest'
-        #npm cli 10 is buggy because of some cache issue
-        name: Install npm cli 8
+          node-version: 20
+      - if: steps.should_run.outputs.shouldrun == 'true' 
+        uses: pnpm/action-setup@v3
+        with:
+          run_install: false
+      - if: steps.should_run.outputs.shouldrun == 'true' 
+        name: Get pnpm store directory
         shell: bash
-        run: npm install -g npm@8.19.4
-      - if: steps.packagejson.outputs.exists == 'true'
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - if: steps.should_run.outputs.shouldrun == 'true' 
+        uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - if: steps.should_run.outputs.shouldrun == 'true' 
         name: Install dependencies
         shell: bash
-        run: npm ci
-      - if: steps.packagejson.outputs.exists == 'true'
+        run: pnpm install
+      - if: steps.should_run.outputs.shouldrun == 'true' 
         name: Test
-        run: npm test --if-present
-      - if: steps.packagejson.outputs.exists == 'true' && matrix.os == 'ubuntu-latest'
-        #linting should run just one and not on all possible operating systems
-        name: Run linter
-        run: npm run lint --if-present
-      - if: steps.packagejson.outputs.exists == 'true'
-        name: Run release assets generation to make sure PR does not break it
-        shell: bash
-        run: npm run generate:assets --if-present
+        run: pnpm test

.github/workflows/release.yml

@@ -20,23 +20,36 @@ jobs:
         run: |
           git config --global core.autocrlf false
           git config --global core.eol lf
+
       - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.GH_TOKEN }}
+        uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
         with:
-          node-version: 18
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        run: npm install
+        shell: bash
+        run: pnpm install
       - name: Create Release Pull Request or Release
         uses: changesets/action@v1
         with:
-          publish: npm run publish-packages
-          version: npm run version-packages
+          publish: pnpm run publish-packages
+          version: pnpm run version-packages
           commit: "version packages"
           title: "chore: version packages"
         env:

.npmrc

@@ -1 +1,3 @@
 legacy-peer-deps=true
+public-hoist-pattern[]=@asyncapi*
+public-hoist-pattern[]=nimma*

.nvmrc

@@ -0,0 +1 @@
+18.17

README.md

@@ -7,47 +7,47 @@ This is a monorepo containing Studio source code, design system, and all their d
 Clone this repo and run:
 
 ```
-npm install
+pnpm install
 ```
 
-> **Note:** NPM v7+ is required.
+> **Note:** PNPM v8+ and Node.js v18.17+ is required.
 
 ## Development
 
 #### Run Studio locally
 
 ```
-npm run studio
+pnpm run studio
 ```
 
 #### Run the Design System locally
 
 ```
-npm run ds
+pnpm run ds
 ```
 
 #### Run Studio and the Design System locally at the same time
 
 ```
-npm run dev
+pnpm run dev
 ```
 
 #### Build Studio for production
 
 ```
-npm run build:studio
+pnpm run build:studio
 ```
 
 #### Build the Design System for production
 
 ```
-npm run build:ds
+pnpm run build:ds
 ```
 
 #### Build Studio and the Design System for production
 
 ```
-npm run build
+pnpm run build
 ```
 
 ## Architecture decision records

apps/design-system/.eslintignore

@@ -0,0 +1,2 @@
+!.storybook
+storybook-static

apps/design-system/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": ["eslint-config-custom","plugin:storybook/recommended"],
+  "plugins": ["import", "sonarjs"],
+  "rules": {
+    "import/no-anonymous-default-export": ["error", {
+      "allowObject": true
+    }],
+    "sonarjs/no-duplicate-string": "off"
+    }
+}

apps/design-system/.storybook/main.ts

@@ -0,0 +1,34 @@
+import remarkGfm from 'remark-gfm';
+import { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  staticDirs: ['../public']
+};
+
+export default config;

apps/design-system/.babelrc.json → apps/design-system/babel.config.json

@@ -9,7 +9,8 @@
         }
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": []
-}
+}