Upgrade to Storybook 7 (playcanvas#59)

* Upgrade to Storybook 7 * Add .babelrc.json * No need to specify a port for Storybook
the-mirror-gdp · Jan 20, 2024 · 01c211d · 01c211d
1 parent 3930959
commit 01c211d
Show file tree

Hide file tree

Showing 14 changed files with 25,977 additions and 40,116 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,17 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,11 +1,14 @@
 module.exports = {
-  stories: ['./stories/**'],
+  stories: ['./**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
   addons: [
-    '@storybook/addon-actions/register',
+    '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-docs',
-    '@storybook/addon-backgrounds/register'
+    '@storybook/addon-backgrounds/register',
+    '@storybook/preset-create-react-app'
   ],
+
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -15,32 +18,17 @@ module.exports = {
         if (!rule.test) return true;
         return !rule.test.test(".scss");
     });
-    config.module.rules.unshift(
-      {
-          test: /\.s[ac]ss$/i,
-          use: ['style-loader', 'css-loader', {
-              loader: 'sass-loader'
-          }],
-      }
-    );
-
-    config.module.rules.unshift(
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: "javascript/auto",
-      }
-    );
-
-    config.module.rules[5].include = [
-      /node_modules\/acorn-jsx/,
-      /node_modules\/playcanvas/
-    ];
 
     // Return the altered config
     return config;
   },
-  core: {
-    builder: "webpack5"
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
   }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,12 +1,20 @@
-import { addParameters } from '@storybook/react'; // <- or your storybook framework
-
-addParameters({
-  backgrounds: {
-    default: 'playcanvas',
-    values: [
-      { name: 'playcanvas', value: '#374346', default: true },
-      { name: 'white', value: '#FFFFFF' },
-    ],
-    controls: { expanded: true },
+const preview = {
+  parameters: {
+      backgrounds: {
+          default: 'playcanvas',
+          values: [
+              {
+                  name: 'playcanvas',
+                  value: '#374346'
+              },
+              {
+                  name: 'white',
+                  value: '#FFFFFF'
+              }
+          ]
+      },
+      controls: { expanded: true }
   }
-});
+};
+
+export default preview;
diff --git a/.storybook/stories/advanced/directed-graph.stories.jsx b/.storybook/stories/advanced/directed-graph.stories.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import { GRAPH_ACTIONS } from '../../../src/constants';
-import Component from '../../base-component';
-
-var name = 'Directed Graph';
-var config = {
-    title: `Advanced/${name}`
-};
+import Graph from '../../base-component';
 
 export default {
-    title: config.title,
-    component: Component,
-    parameters: {
-        docs: {}
+    title: 'Advanced/Directed Graph',
+    component: Graph,
+    argTypes: {
+        // Define the args that you want to be editable in the Storybook UI
     }
 };
 
@@ -127,27 +122,32 @@ const GRAPH_CONTEXT_MENU_ITEMS_ITEMS = [
     }
 ];
 
-export const DirectedGraphExample = (args) => { 
-    return <Component schema={GRAPH_SCHEMA} options={{
-        initialData: GRAPH_DATA,
-        contextMenuItems: GRAPH_CONTEXT_MENU_ITEMS_ITEMS,
-        passiveUIEvents: false,
-        includeFonts: true,
-        incrementNodeNames: true,
-        adjustVertices: true,
-        defaultStyles: {
-            background: {
-                color: '#20292B',
-                gridSize: 10
-            },
-            edge: {
-                connectionStyle: 'default'
-            }
+// Template function
+const Template = (args) => <Graph schema={GRAPH_SCHEMA} options={{...args}} />;
+
+// Default story using the template
+export const DirectedGraphExample = Template.bind({});
+
+// Default args for the story
+DirectedGraphExample.args = {
+    initialData: GRAPH_DATA,
+    contextMenuItems: GRAPH_CONTEXT_MENU_ITEMS_ITEMS,
+    passiveUIEvents: false,
+    includeFonts: true,
+    incrementNodeNames: true,
+    adjustVertices: true,
+    defaultStyles: {
+        background: {
+            color: '#20292B',
+            gridSize: 10
+        },
+        edge: {
+            connectionStyle: 'default'
         }
-    }} />;
+    }
 };
 
-document.querySelector('#root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
+document.getElementById('storybook-root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
 document.body.setAttribute('style', 'margin: 0px; padding: 0px;');
 
 setTimeout(() => {

diff --git a/.storybook/stories/advanced/version-control.stories.jsx b/.storybook/stories/advanced/version-control.stories.jsx
@@ -1,16 +1,11 @@
 import React from 'react';
-import Component from '../../base-component';
-
-var name = 'Version Control Graph';
-var config = {
-    title: `Advanced/${name}`
-};
+import Graph from '../../base-component';
 
 export default {
-    title: config.title,
-    component: Component,
-    parameters: {
-        docs: {}
+    title: 'Advanced/Version Control Graph',
+    component: Graph,
+    argTypes: {
+        // Define the args that you want to be editable in the Storybook UI
     }
 };
 
@@ -200,31 +195,35 @@ const GRAPH_DATA =  {
     });
 });
 
-export const VersionControlGraphExample = (args) => { 
-    return <Component schema={GRAPH_SCHEMA} options={{
-        initialData: GRAPH_DATA,
-        passiveUIEvents: false,
-        includeFonts: true,
-        defaultStyles: {
-            initialScale: 0.75,
-            background: {
-                color: '#20292B',
-                gridSize: 1
-            },
-            edge: {
-                connectionStyle: 'default',
-                targetMarker: true,
-                sourceMarker: true
-            }
+// Template function
+const Template = (args) => <Graph schema={GRAPH_SCHEMA} options={{...args}} />;
+
+// Default story using the template
+export const VersionControlGraphExample = Template.bind({});
+
+// Default args for the story
+VersionControlGraphExample.args = {
+    initialData: GRAPH_DATA,
+    passiveUIEvents: false,
+    includeFonts: true,
+    defaultStyles: {
+        initialScale: 0.75,
+        background: {
+            color: '#20292B',
+            gridSize: 1
         },
-        readOnly: true
-    }} />;
+        edge: {
+            connectionStyle: 'default',
+            targetMarker: true,
+            sourceMarker: true
+        }
+    },
+    readOnly: true
 };
 
-document.querySelector('#root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
+document.getElementById('storybook-root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
 document.body.setAttribute('style', 'margin: 0px; padding: 0px;');
 
-
 setTimeout(() => {
     const graph = document.querySelector('.pcui-graph').ui;
     graph.on('EVENT_SELECT_NODE', ({node}) => {

diff --git a/.storybook/stories/advanced/visual-programming-graph.stories.jsx b/.storybook/stories/advanced/visual-programming-graph.stories.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import { GRAPH_ACTIONS } from '../../../src/constants';
-import Component from '../../base-component';
-
-var name = 'Visual Programming Graph';
-var config = {
-    title: `Advanced/${name}`
-};
+import Graph from '../../base-component';
 
 export default {
-    title: config.title,
-    component: Component,
-    parameters: {
-        docs: {}
+    title: 'Advanced/Visual Programming Graph',
+    component: Graph,
+    argTypes: {
+        // Define the args that you want to be editable in the Storybook UI
     }
 };
 
@@ -381,23 +376,28 @@ var GRAPH_CONTEXT_MENU_ITEMS = [
     },
 ];
 
+// Template function
+const Template = (args) => <Graph schema={GRAPH_SCHEMA} options={{...args}} />;
 
-export const VisualProgrammingGraphExample = (args) => { 
-    return <Component schema={GRAPH_SCHEMA} options={{
-        initialData: GRAPH_DATA,
-        contextMenuItems: GRAPH_CONTEXT_MENU_ITEMS,
-        passiveUIEvents: false,
-        includeFonts: true,
-        defaultStyles: {
-            edge: {
-                connectionStyle: 'smoothInOut'
-            },
-            background: {
-                color: '#20292B',
-                gridSize: 10
-            }
+// Default story using the template
+export const VisualProgrammingGraphExample = Template.bind({});
+
+// Default args for the story
+VisualProgrammingGraphExample.args = {
+    initialData: GRAPH_DATA,
+    contextMenuItems: GRAPH_CONTEXT_MENU_ITEMS,
+    passiveUIEvents: false,
+    includeFonts: true,
+    defaultStyles: {
+        edge: {
+            connectionStyle: 'smoothInOut'
+        },
+        background: {
+            color: '#20292B',
+            gridSize: 10
         }
-    }} />;
+    }
 };
-document.querySelector('#root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
+
+document.getElementById('storybook-root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
 document.body.setAttribute('style', 'margin: 0px; padding: 0px;');