fix(storybook): correct the doc

DIRACGrid · Oct 29, 2024 · 6326939 · 6326939
1 parent 2c6369b
commit 6326939
Show file tree

Hide file tree

Showing 21 changed files with 325 additions and 430 deletions.
diff --git a/packages/diracx-web-components/components/BaseApp/BaseApp.stories.tsx b/packages/diracx-web-components/components/BaseApp/BaseApp.stories.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Paper } from "@mui/material";
 import { Apps } from "@mui/icons-material";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
-import { useMUITheme } from "../../hooks/theme";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { NavigationProvider } from "../../contexts/NavigationProvider";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import BaseApp from "./BaseApp";
 
 const meta = {
@@ -16,18 +15,14 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    headerSize: { control: "radio" },
-  },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ p: 2 }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
     (Story) => (
@@ -76,9 +71,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: {
-    headerSize: undefined,
-  },
+  args: {},
   render: (props) => {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: { preferred_username: "John Doe" },
@@ -88,9 +81,7 @@ export const LoggedIn: Story = {
 };
 
 export const LoggedOff: Story = {
-  args: {
-    headerSize: undefined,
-  },
+  args: {},
   render: (props) => {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: null,

diff --git a/packages/diracx-web-components/components/DashboardLayout/ApplicationDialog.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/ApplicationDialog.stories.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ThemeProvider } from "@mui/material";
 import { useArgs } from "@storybook/core/preview-api";
 
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { applicationList } from "../ApplicationList";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import ApplicationDialog from "./ApplicationDialog";
 
 const meta = {
@@ -31,9 +30,8 @@ const meta = {
       );
     },
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <Story />
         </ThemeProvider>
       );

diff --git a/packages/diracx-web-components/components/DashboardLayout/DashboardDrawer.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/DashboardDrawer.stories.tsx
@@ -3,12 +3,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { Box } from "@mui/material";
 import { Dashboard } from "@mui/icons-material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
-import { useMUITheme } from "../../hooks/theme";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { applicationList } from "../ApplicationList";
 import { DashboardGroup } from "../../types";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import DashboardDrawer from "./DashboardDrawer";
 
 const meta = {
@@ -20,7 +19,6 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       const [userDashboard, setUserDashboard] = React.useState<
         DashboardGroup[]
       >([
@@ -41,11 +39,11 @@ const meta = {
         <ApplicationsContext.Provider
           value={[userDashboard, setUserDashboard, applicationList]}
         >
-          <MUIThemeProvider theme={theme}>
+          <ThemeProvider>
             <Box sx={{ width: "240px", height: "50vh" }}>
               <Story />
             </Box>
-          </MUIThemeProvider>
+          </ThemeProvider>
         </ApplicationsContext.Provider>
       );
     },

diff --git a/packages/diracx-web-components/components/DashboardLayout/DrawerItem.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/DrawerItem.stories.tsx
@@ -2,10 +2,9 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Paper } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Dashboard } from "@mui/icons-material";
-import { useMUITheme } from "../../hooks/theme";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import DrawerItem from "./DrawerItem";
 
 const meta = {
@@ -17,13 +16,12 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ width: "240px" }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/diracx-web-components/components/DashboardLayout/DrawerItem.tsx b/packages/diracx-web-components/components/DashboardLayout/DrawerItem.tsx
@@ -20,7 +20,6 @@ import {
   extractClosestEdge,
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { ThemeProvider } from "@/contexts/ThemeProvider";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 import { useApplicationId } from "@/hooks/application";
@@ -75,15 +74,13 @@ export default function DrawerItem({
                 // Wraps the preview in the theme provider to ensure the correct theme is applied
                 // This is necessary because the preview is rendered outside the main app
                 <ThemeProvider>
-                  <MUIThemeProvider theme={theme}>
-                    <div
-                      style={{
-                        width: source.element.getBoundingClientRect().width,
-                      }}
-                    >
-                      <ItemPreview title={title} icon={icon} />
-                    </div>
-                  </MUIThemeProvider>
+                  <div
+                    style={{
+                      width: source.element.getBoundingClientRect().width,
+                    }}
+                  >
+                    <ItemPreview title={title} icon={icon} />
+                  </div>
                 </ThemeProvider>,
               );
               return () => root.unmount();

diff --git a/packages/diracx-web-components/components/DashboardLayout/DrawerItemGroup.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/DrawerItemGroup.stories.tsx
@@ -2,11 +2,10 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "@storybook/core/preview-api";
 import { Paper } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Dashboard } from "@mui/icons-material";
-import { useMUITheme } from "../../hooks/theme";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { DashboardGroup } from "../../types/DashboardGroup";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import DrawerItemGroup from "./DrawerItemGroup";
 
 const meta = {
@@ -18,13 +17,12 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ width: "240px" }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/diracx-web-components/components/DashboardLayout/ProfileButton.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/ProfileButton.stories.tsx
@@ -2,9 +2,8 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Paper } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
-import { useMUITheme } from "../../hooks/theme";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import { ProfileButton } from "./ProfileButton";
 
 const meta = {
@@ -16,13 +15,12 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ width: "fit-content" }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/diracx-web-components/components/DashboardLayout/ThemeToggleButton.stories.tsx b/packages/diracx-web-components/components/DashboardLayout/ThemeToggleButton.stories.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Paper } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import { ThemeToggleButton } from "./ThemeToggleButton";
 
 const meta = {
@@ -15,13 +14,12 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ width: "fit-content" }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/diracx-web-components/components/JobMonitor/JobDataTable.stories.tsx b/packages/diracx-web-components/components/JobMonitor/JobDataTable.stories.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
-import { useMUITheme } from "../../hooks/theme";
 import { useJobs } from "../../mocks/JobDataService.mock";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import { JobDataTable } from "./JobDataTable";
 
 const meta = {
@@ -25,11 +24,10 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Story />
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/diracx-web-components/components/JobMonitor/JobHistoryDialog.stories.tsx b/packages/diracx-web-components/components/JobMonitor/JobHistoryDialog.stories.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import { useArgs } from "@storybook/core/preview-api";
-import { ThemeProvider } from "@mui/material";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import { JobHistoryDialog } from "./JobHistoryDialog";
 
 const meta = {
@@ -19,9 +18,8 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <Story />
         </ThemeProvider>
       );
@@ -45,6 +43,7 @@ export const Default: Story = {
     ],
     open: true,
     onClose: () => {},
+    jobId: 1234,
   },
   render: (props) => {
     const [, updateArgs] = useArgs();

diff --git a/packages/diracx-web-components/components/JobMonitor/JobMonitor.stories.tsx b/packages/diracx-web-components/components/JobMonitor/JobMonitor.stories.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
-import { Paper, ThemeProvider } from "@mui/material";
+import { Paper } from "@mui/material";
 import { useJobs } from "../../mocks/JobDataService.mock";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { NavigationProvider } from "../../contexts/NavigationProvider";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import JobMonitor from "./JobMonitor";
 
 const meta = {
@@ -15,14 +15,10 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    headerSize: { control: "select" },
-  },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ p: 2 }} elevation={5}>
             <Story />
           </Paper>

diff --git a/packages/diracx-web-components/components/Login/LoginForm.stories.tsx b/packages/diracx-web-components/components/Login/LoginForm.stories.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
-import { Paper, ThemeProvider } from "@mui/material";
+import { Paper } from "@mui/material";
 import { useMetadata } from "../../mocks/metadata.mock";
 import { useOidc } from "../../mocks/react-oidc.mock";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import { LoginForm } from "./LoginForm";
 
 const meta = {
@@ -24,9 +24,8 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ p: 2 }}>
             <Story />
           </Paper>