Establish cursor rules

2026-04-18 09:33:24 -06:00
parent 4854c49c4a
commit f866d11ff8
30 changed files with 1711 additions and 144 deletions
@@ -0,0 +1,72 @@
+import React from "react";
+import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+
+export default {
+  title: "Create Flow/ModalTextAreaField",
+  component: ModalTextAreaField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` (with help icon) with a `TextArea` set to the `embedded` appearance.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: "text" } },
+    placeholder: { control: { type: "text" } },
+    rows: { control: { type: "number" } },
+    helpIcon: { control: { type: "boolean" } },
+    disabled: { control: { type: "boolean" } },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+    return (
+      <div className="w-[520px]">
+        <ModalTextAreaField {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: "Description",
+    helpIcon: true,
+    placeholder: "What does this rule cover?",
+    rows: 4,
+  },
+};
+
+export const WithValue = {
+  render: () => {
+    const [value, setValue] = React.useState(
+      "We decide together whenever a change would affect more than two teams.",
+    );
+    return (
+      <div className="w-[520px]">
+        <ModalTextAreaField
+          label="Core principle"
+          value={value}
+          onChange={setValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled = {
+  render: () => (
+    <div className="w-[520px]">
+      <ModalTextAreaField
+        label="Description"
+        value="Read-only content"
+        onChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};