chore: bump Storybook to 8 (#575)

microsoft · Jul 4, 2024 · b070278 · b070278
1 parent daf28f1
commit b070278
Show file tree

Hide file tree

Showing 8 changed files with 933 additions and 1,298 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,11 +1,5 @@
 module.exports = {
-  babel: async options => {
-    return {
-      ...options,
-      presets: [...options.presets, '@babel/typescript'],
-    };
-  },
   core: {},
   stories: [],
-  addons: [],
+  addons: ['@storybook/addon-webpack5-compiler-babel'],
 };
diff --git a/package.json b/package.json
@@ -49,9 +49,10 @@
     "@nx/workspace": "19.3.2",
     "@rspack/cli": "0.7.5",
     "@rspack/core": "0.7.5",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/core-server": "7.6.8",
-    "@storybook/react-webpack5": "7.6.8",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/core-server": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
     "@swc/core": "1.5.29",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "15.0.6",

diff --git a/packages/devtools/src/stories/DefaultMessage.stories.tsx b/packages/devtools/src/stories/DefaultMessage.stories.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
+import type { StoryFn } from '@storybook/react';
+
 import { DefaultMessage } from '../DefaultMessage';
 
-export const Default = () => (
+export const Default: StoryFn = () => (
   <div style={{ display: 'flex', gap: 10, flexDirection: 'column' }}>
     <div style={{ border: '3px solid gray', width: 300 }}>
       <DefaultMessage />

diff --git a/packages/devtools/src/stories/FlattenView.stories.tsx b/packages/devtools/src/stories/FlattenView.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DebugResult } from '@griffel/core';
-import type { Story } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 
 import { FlattenView } from '../FlattenView';
 import { darkTheme, lightTheme } from '../themes';
@@ -96,26 +96,28 @@ const debugResultRoot: DebugResult = {
   ],
 };
 
-export const Default: Story<{ theme: 'dark' | 'light' }> = ({ theme }) => {
-  const tokens = theme === 'dark' ? darkTheme : lightTheme;
+export const Default: StoryObj<{ theme: 'dark' | 'light' }> = {
+  render: ({ theme }) => {
+    const tokens = theme === 'dark' ? darkTheme : lightTheme;
 
-  return (
-    <div
-      style={{
-        ...tokens,
-        border: '3px solid gray',
-        width: 400,
-        height: 600,
-        overflowY: 'auto',
-      }}
-    >
-      <FlattenView debugResultRoot={debugResultRoot} />
-    </div>
-  );
-};
+    return (
+      <div
+        style={{
+          ...tokens,
+          border: '3px solid gray',
+          width: 400,
+          height: 600,
+          overflowY: 'auto',
+        }}
+      >
+        <FlattenView debugResultRoot={debugResultRoot} />
+      </div>
+    );
+  },
 
-Default.args = {
-  theme: 'light',
+  args: {
+    theme: 'light',
+  },
 };
 
 export default {

diff --git a/packages/react/src/stories/ComponentStyles.stories.tsx b/packages/react/src/stories/ComponentStyles.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Story } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 
 import { makeStyles, mergeClasses, shorthands } from '../';
 
@@ -40,12 +40,14 @@ const Button: React.FunctionComponent<{ className?: string; primary?: boolean }>
   return <button {...props} className={mergedClasses} />;
 };
 
-export const ComponentStyles: Story<{ primary: boolean }> = args => {
-  return <Button {...args}>button</Button>;
-};
+export const ComponentStyles: StoryObj<{ primary: boolean }> = {
+  render: args => {
+    return <Button {...args}>button</Button>;
+  },
 
-ComponentStyles.args = {
-  primary: false,
+  args: {
+    primary: false,
+  },
 };
 
 export default {

diff --git a/packages/react/src/stories/DOMRendererFilter.stories.tsx b/packages/react/src/stories/DOMRendererFilter.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Story } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 
 import { createDOMRenderer } from '@griffel/core';
 import { makeStyles, RendererProvider, shorthands } from '../';
@@ -16,12 +16,16 @@ const useStyles = makeStyles({
   },
 });
 
-const ColorBox = () => {
+const ColorBox: React.FC = () => {
   const classes = useStyles();
+
   return <div className={classes.root}>blue box</div>;
 };
 
-export const DOMRendererFilter: Story<{ filterEnabled: boolean }> = ({ filterEnabled }) => {
+const CustomRendererProvider: React.FC<{ children: React.ReactNode; filterEnabled: boolean }> = ({
+  children,
+  filterEnabled,
+}) => {
   const customDOMRenderer = React.useMemo(() => {
     return createDOMRenderer(undefined, {
       unstable_filterCSSRule: cssRule => {
@@ -31,34 +35,39 @@ export const DOMRendererFilter: Story<{ filterEnabled: boolean }> = ({ filterEna
     });
   }, [filterEnabled]);
 
-  return (
-    <>
-      <p>
-        It is possible to define a filter function in <code>DOMRenderer</code> to filter out CSS rules before adding
-        them to DOM. The classes are still applied to an element.
-      </p>
-      <p>Once the CSS rule is added, there is no way to remove it.</p>
-      <ol>
-        <li>Render this story with filter enabled &rarr; it renders the box without a background.</li>
-        <li>Disable the filter &rarr; story is re-rendered, blue background is added to the box.</li>
-        <li>
-          Enable the filter again &rarr; there is still the blue background, you need to refresh the page to get rid of
-          the background
-        </li>
-      </ol>
-      <p style={{ color: 'red' }}>
-        Filter is currently marked as unstable. This functionality can be changed or removed without considering it a
-        breaking change!
-      </p>
-      <RendererProvider renderer={customDOMRenderer}>
-        <ColorBox />
-      </RendererProvider>
-    </>
-  );
+  return <RendererProvider renderer={customDOMRenderer}>{children}</RendererProvider>;
 };
 
-DOMRendererFilter.args = {
-  filterEnabled: true,
+export const DOMRendererFilter: StoryObj<{ filterEnabled: boolean }> = {
+  render: ({ filterEnabled }) => {
+    return (
+      <CustomRendererProvider filterEnabled={filterEnabled}>
+        <p>
+          It is possible to define a filter function in <code>DOMRenderer</code> to filter out CSS rules before adding
+          them to DOM. The classes are still applied to an element.
+        </p>
+        <p>Once the CSS rule is added, there is no way to remove it.</p>
+        <ol>
+          <li>Render this story with filter enabled &rarr; it renders the box without a background.</li>
+          <li>Disable the filter &rarr; story is re-rendered, blue background is added to the box.</li>
+          <li>
+            Enable the filter again &rarr; there is still the blue background, you need to refresh the page to get rid
+            of the background
+          </li>
+        </ol>
+        <p style={{ color: 'red' }}>
+          Filter is currently marked as unstable. This functionality can be changed or removed without considering it a
+          breaking change!
+        </p>
+
+        <ColorBox />
+      </CustomRendererProvider>
+    );
+  },
+
+  args: {
+    filterEnabled: true,
+  },
 };
 
 export default {

diff --git a/packages/react/src/stories/FallbackValues.stories.tsx b/packages/react/src/stories/FallbackValues.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Story } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 import { makeStyles, shorthands, TextDirectionProvider } from '../';
 
@@ -32,7 +32,7 @@ const FallbackTest = ({ isRtl = false }) => {
   );
 };
 
-export const FallbackValues: Story = () => {
+export const FallbackValues: StoryFn = () => {
   return (
     <div>
       <FallbackTest />