Implement create component

2026-02-02 12:53:52 -07:00
parent b98b9dded3
commit a8eb9e192b
21 changed files with 1061 additions and 7 deletions
@@ -0,0 +1,202 @@
+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 (
+    <div className="p-8">
+      <button
+        onClick={() => setIsOpen(true)}
+        className="px-4 py-2 bg-blue-500 text-white rounded"
+      >
+        Open Create Dialog
+      </button>
+      <Create {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        {args.children}
+      </Create>
+    </div>
+  );
+};
+
+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: (
+    <div className="space-y-4">
+      <Input
+        label="Label"
+        placeholder="Policy name"
+        value=""
+      />
+      <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
+        0/48
+      </p>
+    </div>
+  ),
+  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: (
+    <div className="space-y-4">
+      <Input
+        label="Label"
+        placeholder="Policy name"
+        value=""
+      />
+      <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
+        0/48
+      </p>
+    </div>
+  ),
+  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: (
+    <div className="space-y-4">
+      <Input
+        label="Label"
+        placeholder="Enter text"
+        value=""
+      />
+    </div>
+  ),
+  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: (
+    <div className="space-y-4">
+      <p className="text-[var(--color-content-default-primary)]">
+        Review your policy configuration
+      </p>
+    </div>
+  ),
+  showBackButton: true,
+  showNextButton: true,
+  backButtonText: "Back",
+  nextButtonText: "Finish",
+  nextButtonDisabled: false,
+  currentStep: 3,
+  totalSteps: 3,
+};
+
+export const WithoutFooter = Template.bind({});
+WithoutFooter.args = {
+  isOpen: true,
+  title: "Simple Create Dialog",
+  description: "This create dialog has no footer buttons",
+  children: (
+    <div className="space-y-4">
+      <p className="text-[var(--color-content-default-primary)]">
+        Modal content without footer
+      </p>
+    </div>
+  ),
+  showBackButton: false,
+  showNextButton: false,
+};
+
+export const NextButtonDisabled = Template.bind({});
+NextButtonDisabled.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: (
+    <div className="space-y-4">
+      <Input
+        label="Label"
+        placeholder="Policy name"
+        value=""
+      />
+      <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
+        0/48
+      </p>
+    </div>
+  ),
+  showBackButton: true,
+  showNextButton: true,
+  backButtonText: "Back",
+  nextButtonText: "Next",
+  nextButtonDisabled: true,
+  currentStep: 1,
+  totalSteps: 3,
+};