[#453] Storybook update

govtool/frontend/.storybook/preview.tsx

@@ -1,8 +1,12 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "@emotion/react";
 import { theme } from "../src/theme";
 import { MemoryRouter, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../src/i18n";
+import { ModalProvider } from "../src/context/modal";
 
 const queryClient = new QueryClient();
 
@@ -19,26 +23,30 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <MemoryRouter>
-            <Routes>
-              <Route
-                path="/*"
-                element={
-                  <div
-                    style={{
-                      margin: "0px",
-                      padding: "0px",
-                      position: "relative",
-                    }}
-                  >
-                    <Story />
-                  </div>
-                }
-              />
-            </Routes>
-          </MemoryRouter>
-        </ThemeProvider>
+        <ModalProvider>
+          <I18nextProvider i18n={i18n}>
+            <ThemeProvider theme={theme}>
+              <MemoryRouter>
+                <Routes>
+                  <Route
+                    path="/*"
+                    element={
+                      <div
+                        style={{
+                          margin: "0px",
+                          padding: "0px",
+                          position: "relative",
+                        }}
+                      >
+                        <Story />
+                      </div>
+                    }
+                  />
+                </Routes>
+              </MemoryRouter>
+            </ThemeProvider>
+          </I18nextProvider>
+        </ModalProvider>
       </QueryClientProvider>
     ),
   ],

govtool/frontend/src/stories/DRepInfoCard.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Meta, StoryFn } from "@storybook/react";
+import { DRepInfoCard } from "@molecules";
+
+// Create a mock context with a default value (adjust according to your real context structure)
+const CardanoContext = React.createContext({
+  dRepIDBech32: "",
+});
+
+// Define the type for the children prop to fix the TypeScript error
+interface MockedProviderProps {
+  children: React.ReactNode;
+}
+
+// MockedProvider component that provides the mock context value for the stories
+const MockedProvider: React.FC<MockedProviderProps> = ({ children }) => (
+  <CardanoContext.Provider
+    value={{ dRepIDBech32: "mockedRandomStringForDRepID" }}
+  >
+    {children}
+  </CardanoContext.Provider>
+);
+
+// Meta configuration for the Storybook
+const meta: Meta = {
+  title: "Example/DRepInfoCard",
+  component: DRepInfoCard,
+  decorators: [
+    (Story) => (
+      <MockedProvider>
+        <Story />
+      </MockedProvider>
+    ),
+  ], // Apply the mock provider as a decorator
+};
+
+export default meta;
+
+// Template for creating stories
+const Template: StoryFn = (args) => <DRepInfoCard {...args} />;
+
+// Default story using the Template
+export const Default = Template.bind({});

govtool/frontend/src/stories/DashboardCard.stories.ts

@@ -21,9 +21,7 @@ export const DashboardCardComponent: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
   },
@@ -38,13 +36,22 @@ export const DashboardCardComponent: Story = {
   },
 };
 
+export const WithDRepIdDashboardCardComponent: Story = {
+  args: {
+    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
+    firstButtonLabel: "first button",
+    imageURL: IMAGES.govActionDelegateImage,
+    secondButtonLabel: "second button",
+    title: "Action card",
+    cardId: "drep1gwsw9ckkhuwscj9savt5f7u9xsrudw209hne7pggcktzuw5sv32",
+  },
+};
+
 export const isLoadingDashboardCard: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
     isLoading: true,
@@ -62,9 +69,7 @@ export const isProgressDashboardCard: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
     inProgress: true,

govtool/frontend/src/stories/DashboardTopNav.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { DashboardTopNav } from "@organisms";
-import { IMAGES } from "@/consts";
 import { within, userEvent, waitFor, screen } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 
@@ -15,7 +14,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const DashboardTopNavComponent: Story = {
-  args: { title: "Example title", isDrawer: true },
+  args: { title: "Example title" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText("Example title")).toBeInTheDocument();
@@ -31,16 +30,3 @@ export const DashboardTopNavComponent: Story = {
     });
   },
 };
-
-export const DashboardTopNavWithIcon: Story = {
-  args: {
-    title: "Example title",
-    isDrawer: true,
-    imageSRC: IMAGES.appLogoWithoutText,
-    imageHeight: 24,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByRole("img")).toBeInTheDocument();
-  },
-};

govtool/frontend/src/stories/DelegateActionRadio.stories.ts

@@ -68,3 +68,19 @@ export const ActionRadioActive: Story = {
     );
   },
 };
+
+export const ActionRadioOnlyTitle: Story = {
+  args: {
+    title: "Title",
+    value: "",
+    isChecked: false,
+  },
+};
+
+export const ActionRadioOnlyTitleChecked: Story = {
+  args: {
+    title: "Title",
+    value: "",
+    isChecked: true,
+  },
+};

govtool/frontend/src/stories/Input.stories.tsx

@@ -60,3 +60,8 @@ ErrorAndLabel.play = async ({ canvasElement }) => {
   expect(canvas.getByText("Label")).toBeInTheDocument();
   expect(canvas.getByTestId("error-message-error")).toBeInTheDocument();
 };
+
+export const WithHelpfulText = Template.bind({});
+WithHelpfulText.args = {
+  helpfulText: "Helpful text",
+};

govtool/frontend/src/stories/LinkWithIcon.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkWithIcon } from "@molecules";
+import { ICONS } from "@consts";
+
+const meta: Meta<typeof LinkWithIcon> = {
+  title: "Example/LinkWithIcon",
+  component: LinkWithIcon,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof LinkWithIcon> = {
+  args: {
+    label: "Default Link",
+  },
+};
+
+export const WithCustomIcon: StoryObj<typeof LinkWithIcon> = {
+  args: {
+    label: "Custom Icon Link",
+    icon: <img src={ICONS.link} />,
+  },
+};

govtool/frontend/src/stories/LoadingButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LoadingButton } from "@atoms";
+
+const meta = {
+  title: "Example/LoadingButton",
+  component: LoadingButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof LoadingButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    isLoading: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    isLoading: true,
+  },
+};

govtool/frontend/src/stories/Step.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@atoms";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+
+import { Field, Step } from "@molecules";
+
+const meta: Meta<typeof Step> = {
+  title: "Example/Step",
+  component: Step,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const WithButton: StoryObj<typeof Step> = {
+  args: {
+    label: "Download this file",
+    stepNumber: 1,
+    component: (
+      <Button size="extraLarge" sx={{ width: "fit-content" }}>
+        Info.jsonld
+      </Button>
+    ),
+  },
+};
+
+export const WithIconButton: StoryObj<typeof Step> = {
+  args: {
+    label:
+      "Save this file in a location that provides a public URL (ex. github)",
+    stepNumber: 2,
+    component: (
+      <Button
+        endIcon={
+          <OpenInNewIcon
+            sx={{
+              color: "primary",
+              height: 17,
+              width: 17,
+            }}
+          />
+        }
+        size="extraLarge"
+        sx={{ width: "fit-content" }}
+        variant="text"
+      >
+        Read full guide
+      </Button>
+    ),
+  },
+};
+
+export const WithInput: StoryObj<typeof Step> = {
+  args: {
+    label:
+      "Save this file in a location that provides a public URL (ex. github)",
+    stepNumber: 2,
+    component: <Field.Input name="storingURL" placeholder={"URL"} />,
+  },
+};

govtool/frontend/src/stories/TextArea.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { Field } from "@molecules";
+import { ComponentProps } from "react";
+
+const meta: Meta<typeof Field.TextArea> = {
+  title: "Example/TextArea",
+  component: Field.TextArea,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+const Template: StoryFn<ComponentProps<typeof Field.TextArea>> = (args) => {
+  return <Field.TextArea {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Label",
+};
+
+export const WithHelpfulText = Template.bind({});
+WithHelpfulText.args = {
+  helpfulText: "Helpful text here",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  errorMessage: "Error message",
+};
+
+export const ErrorAndLabel = Template.bind({});
+ErrorAndLabel.args = {
+  errorMessage: "Error message",
+  label: "Label",
+};