feat(Storybook): upgrade to v8 (#527)

* feat(Storybook): upgrade to v8 * fix: comment out useArgs for future implementation * fix: update yarn.lock * fix: yarn.lock
rdkcentral · Sep 19, 2024 · 6c79934 · 6c79934
1 parent 3c47b12
commit 6c79934
Show file tree

Hide file tree

Showing 8 changed files with 3,211 additions and 6,125 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js
@@ -20,7 +20,8 @@ import lng from '@lightningjs/core';
 import { default as ListItemSliderComponent } from './ListItemSlider';
 import { createModeControl, generateSubStory } from '../../docs/utils';
 import { Basic as SliderStory } from '../Slider/Slider.stories';
-import { useArgs } from '@storybook/client-api';
+// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
+// import { useArgs } from '@storybook/manager-api';
 
 /**
  * A ListItem component with slider functionality
@@ -31,23 +32,23 @@ export default {
 };
 
 export const ListItemSlider = () => {
-  const [{ value }, updateArgs] = useArgs();
+  // const [{ value }, updateArgs] = useArgs();
   return class ListItemSlider extends lng.Component {
     static _template() {
       return {
         ListItemSlider: {
-          type: ListItemSliderComponent,
-          value: value,
-          signals: {
-            onSliderChange: true
-          }
+          type: ListItemSliderComponent
+          // value: value,
+          // signals: {
+          //   onSliderChange: true
+          // }
         }
       };
     }
     // update arg control when value changes
-    onSliderChange(value) {
-      updateArgs({ value });
-    }
+    // onSliderChange(value) {
+    //   updateArgs({ value });
+    // }
   };
 };
 

diff --git a/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js b/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js
@@ -20,30 +20,31 @@ import lng from '@lightningjs/core';
 import { createModeControl } from '../../docs/utils';
 import TextBox from '../TextBox';
 import Slider from '.';
-import { useArgs } from '@storybook/client-api';
+// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
+// import { useArgs } from '@storybook/manager-api';
 
 export default {
   title: 'Components/Slider/Slider'
 };
 
 export const Basic = () => {
-  const [{ value }, updateArgs] = useArgs();
+  // const [{ value }, updateArgs] = useArgs();
   return class Basic extends lng.Component {
     static _template() {
       return {
         Slider: {
-          type: Slider,
-          value: value,
-          signals: {
-            onChange: true
-          }
+          type: Slider
+          // value: value,
+          // signals: {
+          //   onChange: true
+          // }
         }
       };
     }
     // update arg control when value changes
-    onChange(value) {
-      updateArgs({ value });
-    }
+    // onChange(value) {
+    //   updateArgs({ value });
+    // }
   };
 };
 

diff --git a/packages/@lightningjs/ui-components/src/components/Slider/SliderLarge.stories.js b/packages/@lightningjs/ui-components/src/components/Slider/SliderLarge.stories.js
@@ -20,30 +20,31 @@ import lng from '@lightningjs/core';
 import Slider from './SliderLarge';
 import { createModeControl } from '../../docs/utils';
 import TextBox from '../TextBox';
-import { useArgs } from '@storybook/client-api';
+// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
+// import { useArgs } from '@storybook/manager-api';
 
 export default {
   title: 'Components/Slider/SliderLarge'
 };
 
 export const Basic = () => {
-  const [{ value }, updateArgs] = useArgs();
+  // const [{ value }, updateArgs] = useArgs();
   return class Basic extends lng.Component {
     static _template() {
       return {
         Slider: {
-          type: Slider,
-          value: value,
-          signals: {
-            onChange: true
-          }
+          type: Slider
+          // value: value,
+          // signals: {
+          //   onChange: true
+          // }
         }
       };
     }
     // update arg control when value changes
-    onChange(value) {
-      updateArgs({ value });
-    }
+    // onChange(value) {
+    //   updateArgs({ value });
+    // }
   };
 };
 

diff --git a/packages/@lightningjs/ui-components/src/docs/Storybook.mdx b/packages/@lightningjs/ui-components/src/docs/Storybook.mdx
@@ -71,7 +71,7 @@ Specifically, `useArgs` has a method called `updateArgs` that can be used to upd
 Below is an example of how to use `updateArgs` along with the value property:
 
 ```js
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/manager-api';
 
 const [{ value }, updateArgs] = useArgs();
 

diff --git a/packages/apps/lightning-ui-docs/.storybook/main.js b/packages/apps/lightning-ui-docs/.storybook/main.js
@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 /**
  * Copyright 2023 Comcast Cable Communications Management, LLC
  *
@@ -19,29 +20,24 @@ import remarkGfm from 'remark-gfm'; // needed for Tables, Links, etc in MDX
 const path = require('path');
 
 const config = {
-  addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-        outline: false, // disable outline addon
-        measure: false, // disable measure addon
-        viewport: false // disable viewport addon
-      }
-    },
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        mdxPluginOptions: {
-          mdxCompileOptions: {
-            remarkPlugins: [remarkGfm] //  needed for MDX to use Github Flavored Markdown
-          }
+  addons: [{
+    name: '@storybook/addon-essentials',
+    options: {
+      backgrounds: false,
+      outline: false, // disable outline addon
+      measure: false, // disable measure addon
+      viewport: false // disable viewport addon
+    }
+  }, {
+    name: '@storybook/addon-docs',
+    options: {
+      mdxPluginOptions: {
+        mdxCompileOptions: {
+          remarkPlugins: [remarkGfm] //  needed for MDX to use Github Flavored Markdown
         }
       }
-    },
-    '@storybook/addon-designs',
-    '@storybook/addon-storysource'
-  ],
+    }
+  }, getAbsolutePath("@storybook/addon-designs"), getAbsolutePath("@storybook/addon-storysource"), '@storybook/addon-webpack5-compiler-babel'],
   stories: [
     '../src/*.mdx',
     '../../../@lightningjs/ui-components/src/**/*.mdx',
@@ -56,12 +52,10 @@ const config = {
     disableTelemetry: true
   },
   framework: {
-    name: '@storybook/html-webpack5',
+    name: getAbsolutePath("@storybook/html-webpack5"),
     options: {}
   },
-  docs: {
-    autodocs: false
-  },
+  docs: {},
   async webpackFinal(config) {
     config.optimization.minimize = false; // Minification seams to to break FocusManager navigation
     // Shorter alias for inspector
@@ -75,3 +69,7 @@ const config = {
 };
 
 export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
diff --git a/packages/apps/lightning-ui-docs/.storybook/preview.js b/packages/apps/lightning-ui-docs/.storybook/preview.js
@@ -31,7 +31,7 @@ registerEventListeners();
  */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: { argTypesRegex: '^on.*' },
     backgrounds: {
       disable: true
     },

diff --git a/packages/apps/lightning-ui-docs/package.json b/packages/apps/lightning-ui-docs/package.json
@@ -17,26 +17,29 @@
     "@lightningjs/ui-components": "workspace:^",
     "@lightningjs/ui-components-theme-base": "workspace:^",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^7.6.6",
-    "@storybook/addon-designs": "^7.0.7",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-mdx-gfm": "^7.6.6",
-    "@storybook/addon-storysource": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/html": "^7.6.6",
-    "@storybook/html-webpack5": "^7.6.6",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-designs": "^8.0.3",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/html": "^8.2.9",
+    "@storybook/html-webpack5": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@yarnpkg/pnpify": "^4.0.0-rc.21",
     "babel-jest": "^29.0.3",
     "babel-loader": "^8.2.5",
     "encoding": "^0.1.13",
     "line-reader-sync": "^0.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark-gfm": "^3.0.1",
-    "storybook": "^7.6.6"
+    "remark-gfm": "^4.0.0",
+    "storybook": "^8.2.9"
   },
   "dependencies": {
     "@babel/preset-react": "^7.18.6"