DE-2074: Update storybook dependencies - check existing story files - create new ones for components that don't have

.storybook/main.ts

@@ -1,28 +1,16 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "storybook-addon-remix-react-router",
-    "@chromatic-com/storybook",
-  ],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-themes"],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
-  docs: {
-    autodocs: "tag",
+    name: "@storybook/react-vite",
+    options: {},
   },
   staticDirs: ["../public"],
+  typescript: {
+    reactDocgen: false,
+  },
 };
 
 export default config;

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -1,28 +1,43 @@
 import type { Preview } from "@storybook/react";
 
 import React from "react";
+import { MemoryRouter } from "react-router-dom";
 import Providers from "../src/app/Providers";
+import { useCMSData } from "../src/app/hooks/useCMSData";
+import { useInitialLoad } from "../src/app/hooks/useInitialLoad";
+import { useCMSCollections } from "../src/app/hooks/useCMSCollections";
+
+const CMSLoaderDecorator = () => {
+  useInitialLoad();
+  useCMSData({ loadData: true });
+  useCMSCollections({ loadData: true });
+
+  return null;
+};
 
 export const decorators = [
   (Story) => (
-    <Providers>
-      <React.StrictMode>
-        <Story />
-      </React.StrictMode>
-    </Providers>
+    <MemoryRouter>
+      <Providers>
+        <CMSLoaderDecorator />
+        <React.StrictMode>
+          <Story />
+        </React.StrictMode>
+      </Providers>
+    </MemoryRouter>
   ),
 ];
 
 const preview: Preview = {
   parameters: {
-    // actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
   },
+  tags: ["autodocs"],
 };
 
 export default preview;

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 
 export default create({
   base: "light",

package.json

@@ -45,17 +45,11 @@
     "web-vitals": "^3.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.0.0",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/addon-interactions": "^8.1.2",
-    "@storybook/addon-links": "^8.1.2",
-    "@storybook/addon-onboarding": "^8.1.2",
-    "@storybook/addon-themes": "^8.1.2",
-    "@storybook/blocks": "^8.1.2",
-    "@storybook/preset-create-react-app": "^8.1.2",
-    "@storybook/react": "^8.1.2",
-    "@storybook/react-webpack5": "^8.1.2",
-    "@storybook/test": "^8.1.2",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-links": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
@@ -80,13 +74,12 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^0.7.0",
+    "eslint-plugin-storybook": "^10.3.6",
     "globals": "^16.3.0",
     "husky": "^9.0.11",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "storybook": "^8.6.17",
-    "storybook-addon-remix-react-router": "^3.1.0",
+    "storybook": "^10.3.6",
     "tsx": "^4.7.0",
     "typescript-eslint": "^8.38.0",
     "vite-plugin-svgr": "^4.3.0",

src/app/components/chart-block/ChartBlock.stories.tsx

@@ -4,7 +4,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { CYCLES } from "app/pages/home/data";
 import { BarChart } from "app/components/charts/bar";
 import { ChartBlock } from "app/components/chart-block";
-import { withRouter } from "storybook-addon-remix-react-router";
 import { STORY_DATA_VARIANT_2 } from "app/components/charts/bar/data";
 
 const Wrapper: React.FC = () => {
@@ -46,13 +45,12 @@ const Wrapper: React.FC = () => {
 const meta = {
   title: "Components/Chart block",
   component: Wrapper,
-  decorators: [withRouter],
   parameters: {
     layout: "fullscreen",
   },
-  tags: ["autodocs"],
+  tags: [],
   argTypes: {},
-} satisfies Meta<typeof ChartBlock>;
+} as Meta<typeof ChartBlock>;
 
 export default meta;
 type StoryType = StoryObj<typeof meta>;

src/app/components/chart-block/components/button-toolbar/ChartBlockButtonToolbar.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ChartBlockButtonToolbar } from "app/components/chart-block/components/button-toolbar";
+
+const meta = {
+  title: "Components/ChartBlock/ButtonToolbar",
+  component: ChartBlockButtonToolbar,
+  parameters: {
+    layout: "padded",
+  },
+  tags: [],
+  argTypes: {
+    infoType: { control: "text" },
+  },
+} as Meta<typeof ChartBlockButtonToolbar>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    infoType: "global",
+  },
+};

src/app/components/chart-block/components/cycles/ChartBlockCycles.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ChartBlockCycles } from "app/components/chart-block/components/cycles";
+
+const meta = {
+  title: "Components/ChartBlock/Cycles",
+  component: ChartBlockCycles,
+  parameters: {
+    layout: "padded",
+  },
+  tags: [],
+  argTypes: {
+    showCycleAll: { control: "boolean" },
+  },
+} as Meta<typeof ChartBlockCycles>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    cycles: [
+      { name: "2020", value: "2020" },
+      { name: "2021", value: "2021" },
+      { name: "2022", value: "2022" },
+    ],
+    selectedCycles: [{ name: "2021", value: "2021" }],
+    showCycleAll: true,
+    handleCycleChange: () => {},
+  },
+};

src/app/components/charts/bar-series/Bar.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { BarSeriesChart } from "app/components/charts/bar-series";
-import { withRouter } from "storybook-addon-remix-react-router";
 import {
   KEYS,
   STORY_DATA_VARIANT_1,
@@ -10,13 +9,12 @@ import {
 const meta = {
   title: "Components/Charts/Bar series chart",
   component: BarSeriesChart,
-  decorators: [withRouter],
   parameters: {
     layout: "fullscreen",
   },
-  tags: ["autodocs"],
+  tags: [],
   argTypes: {},
-} satisfies Meta<typeof BarSeriesChart>;
+} as Meta<typeof BarSeriesChart>;
 
 export default meta;
 type StoryType = StoryObj<typeof meta>;

src/app/components/charts/bar/Bar.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { BarChart } from "app/components/charts/bar";
-import { withRouter } from "storybook-addon-remix-react-router";
 import {
   STORY_DATA_VARIANT_1,
   STORY_DATA_VARIANT_2,
@@ -10,13 +9,12 @@ import {
 const meta = {
   title: "Components/Charts/Bar chart",
   component: BarChart,
-  decorators: [withRouter],
   parameters: {
     layout: "fullscreen",
   },
-  tags: ["autodocs"],
+  tags: [],
   argTypes: {},
-} satisfies Meta<typeof BarChart>;
+} as Meta<typeof BarChart>;
 
 export default meta;
 type StoryType = StoryObj<typeof meta>;

src/app/components/charts/donut/DonutChart.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DonutChart } from "app/components/charts/donut";
+
+const meta = {
+  title: "Components/Charts/Donut",
+  component: DonutChart,
+  parameters: {
+    layout: "centered",
+  },
+  tags: [],
+  argTypes: {
+    value: { control: "number" },
+    valueColor: { control: "color" },
+    label: { control: "text" },
+  },
+} as Meta<typeof DonutChart>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    value: 75.5,
+    valueColor: "#013E77",
+    label: "Complete",
+  },
+};
+
+export const Half: StoryType = {
+  args: {
+    value: 50,
+    valueColor: "#FFA500",
+    label: "Half",
+  },
+};
+
+export const Full: StoryType = {
+  args: {
+    value: 100,
+    valueColor: "#00FF00",
+    label: "Full",
+  },
+};

src/app/components/charts/expandable-horizontal-bar/ExpandableHorizontalBar.stories.tsx

@@ -1,19 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ExpandableHorizontalBar } from "app/components/charts/expandable-horizontal-bar";
-import { withRouter } from "storybook-addon-remix-react-router";
 import { STORY_DATA_VARIANT_1 } from "app/components/charts/expandable-horizontal-bar/data";
 
 const meta = {
   title: "Components/Charts/Expandable Horizontal Bar chart",
   component: ExpandableHorizontalBar,
-  decorators: [withRouter],
   parameters: {
     layout: "fullscreen",
   },
-  tags: ["autodocs"],
+  tags: [],
   argTypes: {},
-} satisfies Meta<typeof ExpandableHorizontalBar>;
+} as Meta<typeof ExpandableHorizontalBar>;
 
 export default meta;
 type StoryType = StoryObj<typeof meta>;

src/app/components/charts/financial-metric/FinancialMetric.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FinancialMetric } from "app/components/charts/financial-metric";
+
+const meta = {
+  title: "Components/Charts/FinancialMetric",
+  component: FinancialMetric,
+  parameters: {
+    layout: "padded",
+  },
+  tags: [],
+  argTypes: {},
+} as Meta<typeof FinancialMetric>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    title: "Financial Overview",
+    legends: [
+      { name: "Allocated", color: "#013E77" },
+      { name: "Spent", color: "#FFA500" },
+    ],
+    donutChart: {
+      id: "donut-1",
+      value: 65.5,
+      valueColor: "#013E77",
+      label: "Complete",
+    },
+    items: [
+      {
+        name: "Category A",
+        value: 80,
+        color: "#013E77",
+        level: 0,
+        items: [
+          {
+            name: "Subcategory A1",
+            value: 90,
+            color: "#015C9F",
+            level: 1,
+            items: [],
+          },
+          {
+            name: "Subcategory A2",
+            value: 70,
+            color: "#015C9F",
+            level: 1,
+            items: [],
+          },
+        ],
+      },
+      {
+        name: "Category B",
+        value: 50,
+        color: "#FFA500",
+        level: 0,
+        items: [],
+      },
+    ],
+  },
+};