Switch to pnpm (#74)

+ build Storybook locally instead of in Azure
bcc-code · Apr 27, 2023 · da85eaa · da85eaa
1 parent 1ed5358
commit da85eaa
Show file tree

Hide file tree

Showing 10 changed files with 8,765 additions and 29,822 deletions.
diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
@@ -15,21 +15,39 @@ jobs:
     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
     runs-on: ubuntu-latest
     name: Build and Deploy
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Build And Deploy
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .node-version
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
         with:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_DUNE_0DAFDD603 }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
           action: "upload"
-          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "/" # App source code path
-          output_location: "storybook-static" # Built app content directory - optional
-          app_build_command: "npm run build-storybook"
+          app_location: "storybook-static"
+          skip_app_build: true
+          skip_api_build: true
 
   close_pull_request:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

diff --git a/.github/workflows/release-dev-version.yml b/.github/workflows/release-dev-version.yml
@@ -23,24 +23,20 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: .node-version
           registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            nodeModules-
+          cache: 'pnpm'
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: npm run build

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,24 +17,20 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: .node-version
           registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            nodeModules-
+          cache: 'pnpm'
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: npm run build

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -18,24 +18,20 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: .node-version
           registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            nodeModules-
+          cache: 'pnpm'
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run Unit Tests
         run: npm run test:unit
@@ -47,24 +43,20 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: .node-version
           registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            nodeModules-
+          cache: 'pnpm'
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Lint
         run: npm run lint:no-fix

diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   "stories": ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
   "framework": {
     name: "@storybook/vue3-vite",
     options: {}

diff --git a/README.md b/README.md
@@ -14,38 +14,44 @@ Refer to the [documentation](https://developer.bcc.no/bcc-design/vue-components/
   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
   - [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 
+### Prerequisites
+This project uses [pnpm](https://pnpm.io/), which you need to install before usage. The easiest way is to install it with npm:
+```sh
+npm install -g pnpm
+```
+
 ### Get started
 Install dependencies:
 ```sh
-npm ci
+pnpm install --frozen-lockfile
 ```
 
 Then run Storybook when developing components to have a live reloading server to test them:
 ```sh
-npm run storybook
+pnpm storybook
 ```
 
 Run a live reloading unit test server:
 ```sh
-npm run test:unit
+pnpm test:unit
 ```
 
 Some unit test use [snapshots](https://vitest.dev/guide/snapshot.html). Be sure to update snapshots after updating a component that has such a test:
 ```sh
-npm run test:unit:update-snapshots
+pnpm test:unit:update-snapshots
 ```
 
 ### Creating a new component
 The repository contains a handy script for scaffolding a new component:
 ```sh
-npm run create-component ComponentName
+pnpm create-component ComponentName
 ```
 This will create a Vue component, with accompanying test, stories and CSS files, and will also update the exports for the library.
 
 ### Building for production
 To build the package for production, including types, run:
 ```sh
-npm run build
+pnpm build
 ```
 
 ## License