extra changes

.storybook/main.ts

@@ -11,9 +11,11 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  stories: ["../packages/*/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  stories: ["../packages/*/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
   staticDirs: ["../docs/public"],
-
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
   addons: [
     {
       name: "@storybook/addon-essentials",
@@ -28,7 +30,14 @@ const config: StorybookConfig = {
     "@storybook/addon-storysource",
   ],
   async viteFinal(config, { configType }) {
-    // customize the Vite config here
+    // https://github.com/storybookjs/storybook/issues/26532 - package-deduplication breaks ag-grid-react.
+    const fixedConfig = {
+      ...config,
+      plugins: config.plugins?.filter(
+        // @ts-ignore
+        (plugin) => plugin?.name !== "storybook:package-deduplication"
+      ),
+    };
 
     const customConfig: UserConfig = {
       plugins: [cssInline(), cssVariableDocgen()],
@@ -40,7 +49,7 @@ const config: StorybookConfig = {
       );
     }
 
-    return mergeConfig(customConfig, config);
+    return mergeConfig(customConfig, fixedConfig);
   },
 };
 

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import saltTheme from "./SaltTheme";
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { ArgTypes, Parameters } from "@storybook/react";
+import type { Parameters } from "@storybook/react";
 import type { GlobalTypes } from "@storybook/csf";
 import "@salt-ds/theme/index.css";
 import "@salt-ds/theme/css/theme-next.css";
@@ -139,9 +139,9 @@ export const globalTypes: GlobalTypes = {
   },
 };
 
-export const argTypes: ArgTypes = {
-  ref: { control: { type: null } },
-};
+// export const argTypes: ArgTypes = {
+//   ref: { control: { type: null } },
+// };
 
 export const parameters: Parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package.json

@@ -59,11 +59,13 @@
     "@storybook/addon-docs": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
-    "@storybook/addon-mdx-gfm": "8.0.0",
+    "@storybook/addon-mdx-gfm": "^8.0.0",
     "@storybook/addon-storysource": "^8.0.0",
-    "@storybook/addons": "^7.4.5",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
     "@storybook/react": "^8.0.0",
-    "@storybook/react-vite": "8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@storybook/theming": "^8.0.0",
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/cypress": "^10.0.0",
@@ -95,7 +97,7 @@
     "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-local-rules": "^2.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.8.0",
     "modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^1.8.0",
@@ -106,7 +108,7 @@
     "react-dom": "^18.0.0",
     "rifm": "^0.12.0",
     "sass": "^1.52.3",
-    "storybook": "8.0.0",
+    "storybook": "^8.0.0",
     "stylelint": "^16.0.0",
     "typescript": "4.6.4",
     "vite": "^4.4.9",

packages/core/stories/floating-platform/floating-platform.doc.stories.mdx → packages/core/stories/floating-platform/floating-platform.mdx

@@ -1,18 +1,7 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { Button, Text, Tooltip } from "@salt-ds/core";
-import {
-  CharacteristicUsage,
-  CSSClassTable,
-} from "css-variable-docgen-components";
-import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx";
-
-<Meta
-  title="Documentation/Desktop Support"
-  component={Tooltip}
-  parameters={{
-    viewMode: "docs",
-  }}
-/>
+import { Canvas, Meta } from "@storybook/addon-docs";
+import * as CustomFloatingUiPlatformStories from "./custom-floating-ui-platform.stories";
+
+<Meta title="Documentation/Desktop Support" />
 
 ## Custom Floating UI Platform
 
@@ -131,22 +120,16 @@ The example uses the `FloatingComponentProvider` to trigger creating the new win
 
 It also uses the `FloatingPlatformProvider` to customize the positioning of the Tooltip based on the global coordinates of the anchor, rather than the position within it's own window.
 
-<Canvas>
-  <Story id="core-floating-platform--custom-floating-ui-platform" />
-</Canvas>
+<Canvas of={CustomFloatingUiPlatformStories.CustomFloatingUiPlatform} />
 
 ### Custom Middleware Example
 
 In the following example custom `offset` middleware has been added to offset the tooltip by an additional amount on top of the default
 
-<Canvas>
-  <Story id="core-floating-platform--custom-middleware" />
-</Canvas>
+<Canvas of={CustomFloatingUiPlatformStories.CustomMiddleware} />
 
 ### Animation Frame autoUpdate
 
 In the following example the Tooltip is being positioned on animation frame, allowing it to remain anchored to a component suring an animation
 
-<Canvas>
-  <Story id="core-floating-platform--animation-frame" />
-</Canvas>
+<Canvas of={CustomFloatingUiPlatformStories.AnimationFrame} />

packages/countries/stories/CountrySymbol.stories.tsx

@@ -90,11 +90,3 @@ export const AllCountrySymbolsWithSearch: StoryFn<typeof CountrySymbol> = (
 AllCountrySymbolsWithSearch.args = {
   size: 2,
 };
-
-AllCountrySymbolsWithSearch.parameters = {
-  docs: {
-    source: {
-      code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554",
-    },
-  },
-};

packages/countries/stories/LazyCountrySymbol.qa.stories.tsx

@@ -13,6 +13,7 @@ export const AllLazyCountrySymbols: StoryFn = () => {
     <Suspense fallback="Loading...">
       {sizes.map((size) => (
         <div
+          key={size}
           style={{
             display: "grid",
             gridTemplateColumns: "repeat(15, auto)",

packages/countries/stories/LazyCountrySymbol.stories.tsx

@@ -21,13 +21,6 @@ export default {
       type: "number",
     },
   },
-  parameters: {
-    docs: {
-      source: {
-        code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554",
-      },
-    },
-  },
 } as Meta<typeof LazyCountrySymbolComponent>;
 
 export const LazyCountrySymbol: StoryFn<typeof LazyCountrySymbolComponent> = (

packages/data-grid/stories/LazyStoryCanvas.tsx

@@ -7,7 +7,6 @@ export const LazyStoryCanvas = ({ children }: PropsWithChildren) => {
     if (!ref.current) return;
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
-        console.log(entry.isIntersecting);
         setVisible(true);
       }
     });