App reorganization

stories/utility/ErrorBoundary.stories.js

@@ -1,40 +0,0 @@
-import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
-
-export default {
-  title: "Components/Utility/ErrorBoundary",
-  component: ErrorBoundary,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "An error boundary component that catches JavaScript errors in its child component tree. Displays a fallback UI when errors occur and logs error information for debugging.",
-      },
-    },
-  },
-  argTypes: {
-    children: {
-      control: { type: "text" },
-      description: "Child components to wrap with error boundary",
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    children: <div>Normal content</div>,
-  },
-};
-
-export const WithError = {
-  render: () => {
-    const ThrowError = () => {
-      throw new Error("Test error for ErrorBoundary");
-    };
-    return (
-      <ErrorBoundary>
-        <ThrowError />
-      </ErrorBoundary>
-    );
-  },
-};

stories/utility/ModalFooter.stories.js

@@ -0,0 +1,71 @@
+import ModalFooter from "../../app/components/utility/ModalFooter";
+
+export default {
+  title: "Components/Utility/ModalFooter",
+  component: ModalFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showBackButton: {
+      control: "boolean",
+      description: "Whether to render the back button on the left",
+    },
+    showNextButton: {
+      control: "boolean",
+      description: "Whether to render the next button on the right",
+    },
+    backButtonText: {
+      control: "text",
+      description: "Override text for the back button",
+    },
+    nextButtonText: {
+      control: "text",
+      description: "Override text for the next button",
+    },
+    nextButtonDisabled: {
+      control: "boolean",
+      description: "Whether the next button is disabled",
+    },
+    currentStep: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Current step (used by the centered Stepper)",
+    },
+    totalSteps: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Total number of steps",
+    },
+    stepper: {
+      control: "boolean",
+      description: "Whether to render the centered stepper",
+    },
+    onBack: { action: "back-clicked" },
+    onNext: { action: "next-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    currentStep: 2,
+    totalSteps: 4,
+  },
+};
+
+export const NextDisabled = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    nextButtonDisabled: true,
+    currentStep: 1,
+    totalSteps: 4,
+  },
+};
+
+export const NextOnly = {
+  args: {
+    showBackButton: false,
+    showNextButton: true,
+  },
+};

stories/utility/ModalHeader.stories.js

@@ -0,0 +1,42 @@
+import ModalHeader from "../../app/components/utility/ModalHeader";
+
+export default {
+  title: "Components/Utility/ModalHeader",
+  component: ModalHeader,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+      description: "Whether to render the close button on the left",
+    },
+    showMoreOptionsButton: {
+      control: "boolean",
+      description: "Whether to render the more-options button on the right",
+    },
+    onClose: { action: "close-clicked" },
+    onMoreOptions: { action: "more-options-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+  },
+};
+
+export const CloseOnly = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: false,
+  },
+};
+
+export const MoreOptionsOnly = {
+  args: {
+    showCloseButton: false,
+    showMoreOptionsButton: true,
+  },
+};

stories/utility/Separator.stories.js

@@ -0,0 +1,28 @@
+import Separator from "../../app/components/utility/Separator";
+
+export default {
+  title: "Components/Utility/Separator",
+  component: Separator,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {},
+};
+
+export const Default = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Separator />
+    </div>
+  ),
+};
+
+export const InContext = {
+  render: () => (
+    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}>
+      <p>Above the separator</p>
+      <Separator />
+      <p>Below the separator</p>
+    </div>
+  ),
+};