switch to pnpm and upgrade storybook

.github/workflows/chromatic.yml

@@ -14,10 +14,26 @@ jobs:
     # Job steps
     steps:
       - uses: actions/checkout@v1
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: yarn
-        # 👇 Adds Chromatic as a step in the workflow
+        run: pnpm install
+
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         # Chromatic GitHub Action options

.github/workflows/release.yml

@@ -12,15 +12,31 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: pnpm install
 
       - name: Lint
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          pnpm run release

.storybook/main.ts

@@ -1,19 +1,27 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm',
     '@storybook/addon-a11y',
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+
   docs: {
     autodocs: 'tag',
   },
+
   staticDirs: ['./assets', '../public'],
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -22,7 +22,6 @@ export const loadFontsForStorybook = () => {
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
       default: 'light',
       values: [

CHANGELOG.md

@@ -563,7 +563,7 @@
 
 #### 🐛 Bug Fix
 
-- some helper exports  were removed in the previous PR, adding those ba… [#53](https://github.com/chromaui/tetra/pull/53) ([@winkerVSbecks](https://github.com/winkerVSbecks))
+- some helper exports were removed in the previous PR, adding those ba… [#53](https://github.com/chromaui/tetra/pull/53) ([@winkerVSbecks](https://github.com/winkerVSbecks))
 
 #### Authors: 1
 

README.md

@@ -2,33 +2,26 @@
 
 <img src="public/cover.jpg" />
 
-This library centralised Chromatic and Storybooks' style guides as well as an exhaustive list of components use accross our suite of marketing sites. This is also a good excuse to test all the new features that both Storybook and Chromatic offers. Please feel free to learn from it and ask any questions that comes your way.
-
-https://tetra.chromatic.com
+Style guide and UI components for Chromatic's docs and marketing sites. https://tetra.chromatic.com
 
 ## Install
 
 ```console
-yarn add @chromatic-com/tetra
+pnpm add @chromatic-com/tetra
 ```
 
-## To Do
-
-- [ ] Replace fonts in Text by the new text helpers
-- [ ] Move icons to a new library and import it as primitive inside the Icon component
-
 ## Developing
 
 Watch and rebuild code with `tsup` and runs Storybook to preview your UI during development.
 
 ```console
-yarn storybook
+pnpm run storybook
 ```
 
 ## Building
 
 Build package with `tsup` for production.
 
 ```console
-yarn build
+pnpm run build
 ```

package.json

@@ -11,14 +11,14 @@
     "url": "git+https://github.com/chromaui/tetra.git"
   },
   "scripts": {
-    "dev": "concurrently  -n \"Build,SB\" \"yarn build --watch\" \"yarn storybook\" ",
+    "dev": "concurrently  -n \"Build,SB\" \"pnpm run build --watch\" \"pnpm run storybook\" ",
     "build": "tsup --onSuccess \"cp -a public/. dist/public\"",
     "type-check": "tsc",
     "lint": "eslint --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\"",
-    "lint:fix": "yarn lint --fix && prettier --write .",
+    "lint:fix": "pnpm run lint --fix && prettier --write .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "yarn build && auto shipit",
+    "release": "pnpm run build && auto shipit",
     "prepare": "node ./prepare.js"
   },
   "lint-staged": {
@@ -48,16 +48,17 @@
     "node": ">=14.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-mdx-gfm": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/eslint-config-storybook": "3.1.2",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.6.12",
+    "@storybook/addon-a11y": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-mdx-gfm": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/eslint-config-storybook": "^4.0.0",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@storybook/test": "^8.2.7",
+    "@storybook/theming": "^8.2.7",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -69,14 +70,14 @@
     "eslint": "8.36.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jest": "27.2.1",
-    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-storybook": "^0.8.0",
     "framer-motion": "11.0.3",
     "husky": "^8.0.0",
     "lint-staged": "13.2.2",
-    "prettier": "2.8.4",
+    "prettier": "3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "^7.6.12",
+    "storybook": "^8.2.7",
     "tsup": "7.2.0",
     "typescript": "5.0.2",
     "vite": "4.2.1"
@@ -109,5 +110,6 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }