Establish cursor rules

stories/create-flow/ApplicableScopeField.stories.js

@@ -0,0 +1,89 @@
+import React from "react";
+import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+
+export default {
+  title: "Create Flow/ApplicableScopeField",
+  component: ApplicableScopeField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Shared 'Applicable Scope' field used by the `decision-approaches` and `conflict-management` create-flow modals. Pairs an `InputLabel` with a row of toggle-chips plus an inline pill input for adding new scope values.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: "text" } },
+    addLabel: { control: { type: "text" } },
+    inputPlaceholder: { control: { type: "text" } },
+    onToggleScope: { action: "toggle" },
+    onAddScope: { action: "add" },
+  },
+  tags: ["autodocs"],
+};
+
+const INITIAL_SCOPES = ["Finance", "Operations", "Product", "People"];
+
+export const Default = {
+  render: (args) => {
+    const [scopes, setScopes] = React.useState(INITIAL_SCOPES);
+    const [selected, setSelected] = React.useState(["Finance"]);
+
+    return (
+      <div className="w-[520px]">
+        <ApplicableScopeField
+          {...args}
+          scopes={scopes}
+          selectedScopes={selected}
+          onToggleScope={(scope) => {
+            setSelected((prev) =>
+              prev.includes(scope)
+                ? prev.filter((s) => s !== scope)
+                : [...prev, scope],
+            );
+          }}
+          onAddScope={(scope) => setScopes((prev) => [...prev, scope])}
+        />
+      </div>
+    );
+  },
+  args: {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+  },
+};
+
+export const Empty = {
+  render: () => {
+    const [scopes, setScopes] = React.useState([]);
+    const [selected, setSelected] = React.useState([]);
+
+    return (
+      <div className="w-[520px]">
+        <ApplicableScopeField
+          label="Applicable Scope"
+          addLabel="Add Applicable Scope"
+          scopes={scopes}
+          selectedScopes={selected}
+          onToggleScope={(scope) =>
+            setSelected((prev) =>
+              prev.includes(scope)
+                ? prev.filter((s) => s !== scope)
+                : [...prev, scope],
+            )
+          }
+          onAddScope={(scope) => setScopes((prev) => [...prev, scope])}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "With no scopes yet — only the '+ Add' affordance is visible. Click it to reveal the pill text input.",
+      },
+    },
+  },
+};

stories/create-flow/ModalTextAreaField.stories.js

@@ -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>
+  ),
+};