Feature/storybook deploy (#15)

* Upgraded Storybook to v8

* Fixed deployment of Storybook including static files

Author: marcveens

.DS_Store

@@ -18,6 +18,9 @@ permissions:
   pages: write
   id-token: write
 
+env:
+  VITE_GH_PAGE: true
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   # This workflow contains a single job called "build"
@@ -27,10 +30,10 @@ jobs:
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # Set up Node
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/deploy-storybook.yml

@@ -5,7 +5,6 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
     '@storybook/addon-storysource'
   ],
   framework: {

.storybook/main.ts

@@ -10,7 +10,7 @@
     "build": "rollup -c && npm run emit-declarations",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "start:storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build --static-dir react-drawio"
+    "build:storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -32,15 +32,14 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.1",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-interactions": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
     "@storybook/addon-storysource": "^8.0.0",
-    "@storybook/blocks": "^7.3.2",
-    "@storybook/builder-vite": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/react-vite": "^7.3.2",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -50,14 +49,14 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.28.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-import-css": "^3.3.1",
     "rollup-plugin-swc3": "^0.10.1",
-    "storybook": "^7.3.2",
+    "storybook": "^8.0.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   },

package-lock.json

@@ -4,11 +4,13 @@ type UrlToBase64Options = {
   isVisio?: boolean;
 };
 
+const basePath = import.meta.env.VITE_GH_PAGE === 'true' ? '/react-drawio' : '';
+
 export const useRemoteFile = () => {
   const [inputXml, setInputXml] = useState<string>('');
 
   const urlToBase64 = async (url: string, options?: UrlToBase64Options) => {
-    const data = await fetch(url);
+    const data = await fetch(`${basePath}${url}`);
 
     if (data) {
       const blob = await data.blob();

package.json

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_GH_PAGE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}