Merge pull request #6 from silversonicaxel/feat/migrate-v-8

Migrate to Storybook 8

.github/workflows/release.yml

@@ -7,15 +7,15 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 20.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
@@ -25,4 +25,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          yarn release

.storybook/main.js

@@ -4,4 +4,11 @@ module.exports = {
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: ["../preset.js", "@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
 };

package.json

@@ -49,42 +49,46 @@
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "prerelease": "zx scripts/prepublish-checks.mjs",
     "release": "yarn build && auto shipit",
     "eject-ts": "zx scripts/eject-typescript.mjs"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-essentials": "^6.4.0",
-    "@storybook/react": "^6.4.0",
-    "auto": "^10.3.0",
-    "babel-loader": "^8.1.0",
-    "boxen": "^5.0.1",
-    "concurrently": "^6.2.0",
-    "dedent": "^0.7.0",
-    "prettier": "^2.3.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.2.4",
-    "zx": "^1.14.1"
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@storybook/addon-essentials": "^8.2.0",
+    "@storybook/cli": "^8.2.4",
+    "@storybook/react": "^8.2.0",
+    "@storybook/react-vite": "^8.2.4",
+    "@types/dedent": "^0.7.2",
+    "@vitejs/plugin-react": "^4.3.1",
+    "auto": "^11.1.6",
+    "boxen": "^8.0.0",
+    "concurrently": "^8.2.2",
+    "dedent": "^1.5.3",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "zx": "^8.1.4"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.4.0",
-    "@storybook/api": "^6.4.0",
-    "@storybook/components": "^6.4.0",
-    "@storybook/core-events": "^6.4.0",
-    "@storybook/theming": "^6.4.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "@storybook/components": "^8.2.0",
+    "@storybook/core-events": "^8.2.0",
+    "@storybook/manager-api": "^8.2.0",
+    "@storybook/theming": "^8.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {

scripts/prepublish-checks.mjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env zx
 
 const packageJson = require("../package.json");
-const boxen = require("boxen");
-const dedent = require("dedent");
+import boxen from 'boxen'
+import dedent from 'dedent'
 
 const name = packageJson.name;
 const displayName = packageJson.storybook.displayName;

src/preset/manager.ts

@@ -1,4 +1,4 @@
-import { addons, types } from '@storybook/addons'
+import { addons, types } from '@storybook/manager-api'
 import { ADDON_ID, ADDON_PANEL_ID, ADDON_PARAM_KEY } from '../constants'
 import { SpotifyPanel } from '../views/SpotifyPanel'
 

src/views/SpotifyPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useParameter } from '@storybook/api'
+import { useParameter } from '@storybook/manager-api'
 import { ADDON_PARAM_KEY } from '../constants'
 import { AddonPanel } from '@storybook/components'
 import type { AddonSpotifyParameters } from '../types'
@@ -20,15 +20,15 @@ export const SpotifyPanel = (props: SpotifyPanelProps) => {
     const parsedUrlData = parseUrl(url)
 
     if(parsedUrlData.error) {
-      return <AddonPanel {...props}><SpotifyError error={parsedUrlData.error} /></AddonPanel>    
+      return <AddonPanel {...props}><SpotifyError error={parsedUrlData.error} /></AddonPanel>
     }
 
     return (
       <AddonPanel {...props}>
-        <iframe 
-          src={parsedUrlData.url} 
-          width="100%" 
-          height="100%" 
+        <iframe
+          src={parsedUrlData.url}
+          width="100%"
+          height="100%"
           frameBorder="0"
           allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
       </AddonPanel>

tsconfig.json

@@ -18,4 +18,4 @@
   "include": [
     "src/**/*"
   ],
-}
+}

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});