;
+}
diff --git a/app/components/Create/Create.view.tsx b/app/components/Create/Create.view.tsx
new file mode 100644
index 0000000..bf89cbc
--- /dev/null
+++ b/app/components/Create/Create.view.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import ContentLockup from "../ContentLockup";
+import ModalFooter from "../ModalFooter";
+import ModalHeader from "../ModalHeader";
+import type { CreateViewProps } from "./Create.types";
+
+export function CreateView({
+ isOpen,
+ onClose,
+ title,
+ description,
+ children,
+ footerContent,
+ showBackButton,
+ showNextButton,
+ onBack,
+ onNext,
+ backButtonText,
+ nextButtonText,
+ nextButtonDisabled,
+ currentStep,
+ totalSteps,
+ className,
+ ariaLabel,
+ ariaLabelledBy,
+ createRef,
+ overlayRef,
+}: CreateViewProps) {
+ if (!isOpen) return null;
+
+ const createContent = (
+ <>
+ {/* Overlay */}
+
+
+ {/* Create Dialog */}
+
+ {/* Header with close buttons */}
+
+
+ {/* Header Lockup Section (Sticky) */}
+ {(title || description) && (
+
+
+ )}
+
+ {/* Content Area (Scrollable) */}
+
+ {children}
+
+
+ {/* Footer */}
+
+
+ {/* Label with help icon */}
+ {label && (
+
+
+ {label}
+
+ {showHelpIcon && (
+
+
+
+
+
+
+ )}
+
+ )}
+
+ {/* Input field */}
+
+
+
+ {/* Character counter */}
+
+ {value.length}/{maxLength}
+
+
+ {/* Back Button - Absolutely positioned bottom left */}
+ {showBackButton && (
+
+
+ {defaultBackText}
+
+
+ )}
+
+ {/* Stepper (Centered) */}
+ {currentStep && totalSteps && (
+
+
+ )}
+
+ {/* Next Button - Absolutely positioned bottom right */}
+ {showNextButton && (
+
+
+ {defaultNextText}
+
+
+ )}
+
+ {/* Custom Footer Content */}
+ {footerContent}
+
+ {/* Close Button - Left */}
+ {showCloseButton && (
+
+
+ )}
+
+ {/* More Options Button - Right */}
+ {showMoreOptionsButton && (
+
+
+
+
+ )}
+
+
+
+
+
+
diff --git a/stories/Create.stories.js b/stories/Create.stories.js
new file mode 100644
index 0000000..cea920c
--- /dev/null
+++ b/stories/Create.stories.js
@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import Create from "../app/components/Create";
+import Input from "../app/components/Input";
+
+export default {
+ title: "Components/Create",
+ component: Create,
+ parameters: {
+ layout: "fullscreen",
+ docs: {
+ description: {
+ component:
+ "Create dialog component with portal rendering, keyboard navigation, and focus trap. Supports multi-step workflows with stepper integration. Used for the create flow in the application.",
+ },
+ },
+ },
+ argTypes: {
+ isOpen: {
+ control: { type: "boolean" },
+ },
+ title: {
+ control: { type: "text" },
+ },
+ description: {
+ control: { type: "text" },
+ },
+ showBackButton: {
+ control: { type: "boolean" },
+ },
+ showNextButton: {
+ control: { type: "boolean" },
+ },
+ nextButtonDisabled: {
+ control: { type: "boolean" },
+ },
+ currentStep: {
+ control: { type: "number", min: 1, max: 5 },
+ },
+ totalSteps: {
+ control: { type: "number", min: 1, max: 5 },
+ },
+ },
+ tags: ["autodocs"],
+};
+
+const Template = (args) => {
+ const [isOpen, setIsOpen] = useState(args.isOpen || false);
+
+ return (
+
+ setIsOpen(true)}
+ className="px-4 py-2 bg-blue-500 text-white rounded"
+ >
+ Open Create Dialog
+
+ setIsOpen(false)}>
+ {args.children}
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ isOpen: true,
+ title: "What do you call your group's new policy?",
+ description: "You can also combine or add new approaches to the list",
+ children: (
+
+ ),
+ showBackButton: true,
+ showNextButton: true,
+ backButtonText: "Back",
+ nextButtonText: "Next",
+ nextButtonDisabled: false,
+};
+
+export const WithStepper = Template.bind({});
+WithStepper.args = {
+ isOpen: true,
+ title: "What do you call your group's new policy?",
+ description: "You can also combine or add new approaches to the list",
+ children: (
+
+ ),
+ showBackButton: true,
+ showNextButton: true,
+ backButtonText: "Back",
+ nextButtonText: "Next",
+ nextButtonDisabled: false,
+ currentStep: 1,
+ totalSteps: 3,
+};
+
+export const Step2 = Template.bind({});
+Step2.args = {
+ isOpen: true,
+ title: "How should conflicts be resolved?",
+ description: "You can also combine or add new approaches to the list",
+ children: (
+
+
+ ),
+ showBackButton: true,
+ showNextButton: true,
+ backButtonText: "Back",
+ nextButtonText: "Next",
+ nextButtonDisabled: false,
+ currentStep: 2,
+ totalSteps: 3,
+};
+
+export const Step3 = Template.bind({});
+Step3.args = {
+ isOpen: true,
+ title: "Final step",
+ description: "Review your settings",
+ children: (
+
+
+ Review your policy configuration
+
+
+
+ Modal content without footer
+
+
;
+
+describe("Create", () => {
+ const defaultProps: CreateProps = {
+ isOpen: true,
+ onClose: vi.fn(),
+ title: "Test Create Dialog",
+ description: "Test description",
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders when isOpen is true", () => {
+ renderWithProviders(
+ Create dialog content ,
+ );
+ expect(screen.getByRole("dialog")).toBeInTheDocument();
+ expect(screen.getByText("Test Create Dialog")).toBeInTheDocument();
+ expect(screen.getByText("Create dialog content")).toBeInTheDocument();
+ });
+
+ it("does not render when isOpen is false", () => {
+ renderWithProviders(Custom Footer}
+ />,
+ );
+ expect(screen.getByText("Custom Footer")).toBeInTheDocument();
+ });
+
+ it("has proper ARIA attributes", () => {
+ renderWithProviders(
+
+ ,
+ );
+
+ const closeButton = screen.getByLabelText("Close dialog");
+ screen.getByLabelText("Test Input"); // Verify input is rendered
+
+ // Focus should start on first focusable element (close button)
+ await waitFor(() => {
+ expect(closeButton).toHaveFocus();
+ });
+
+ // Tab should move focus to next element
+ fireEvent.keyDown(document, { key: "Tab" });
+ await waitFor(() => {
+ // Should focus on the more options button or input
+ const focusedElement = document.activeElement;
+ expect(focusedElement).toBeInTheDocument();
+ });
+ });
+});