Establish cursor rules

stories/controls/Incrementer.stories.js

@@ -0,0 +1,101 @@
+import React from "react";
+import Incrementer from "../../app/components/controls/Incrementer";
+
+export default {
+  title: "Components/Controls/Incrementer",
+  component: Incrementer,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Compact `[ - value + ]` row for numeric step input. Figma: `Control / Incrementer` (17857:30943). Pair with `IncrementerBlock` when you need a label above.",
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: "number" },
+      description: "Current numeric value.",
+    },
+    min: {
+      control: { type: "number" },
+      description: "Minimum value (default -Infinity).",
+    },
+    max: {
+      control: { type: "number" },
+      description: "Maximum value (default Infinity).",
+    },
+    step: {
+      control: { type: "number" },
+      description: "Amount added/subtracted per click.",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable both step buttons.",
+    },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value ?? 50);
+    return <Incrementer {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    value: 50,
+  },
+};
+
+export const WithBounds = {
+  render: (args) => {
+    const [value, setValue] = React.useState(50);
+    return <Incrementer {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Clamped to `min`/`max`; the corresponding step button auto-disables at the bounds.",
+      },
+    },
+  },
+};
+
+export const PercentageFormatter = {
+  render: (args) => {
+    const [value, setValue] = React.useState(75);
+    return (
+      <Incrementer
+        {...args}
+        value={value}
+        onChange={setValue}
+        formatValue={(n) => `${n}%`}
+      />
+    );
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use `formatValue` to render units alongside the number (e.g. `%`, `px`).",
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  render: () => <Incrementer value={50} onChange={() => {}} disabled />,
+};

stories/controls/IncrementerBlock.stories.js

@@ -0,0 +1,113 @@
+import React from "react";
+import IncrementerBlock from "../../app/components/controls/IncrementerBlock";
+
+export default {
+  title: "Components/Controls/IncrementerBlock",
+  component: IncrementerBlock,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Labelled incrementer: pairs `InputLabel` with `Incrementer`. Figma: `Control / Incrementer Block` (19883:13283). Matches the grouped-field pattern used by `CheckboxGroup` / `RadioGroup`.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label rendered above the incrementer.",
+    },
+    helpIcon: {
+      control: { type: "boolean" },
+      description: "Show the help (?) icon next to the label.",
+    },
+    asterisk: {
+      control: { type: "boolean" },
+      description: "Show an asterisk indicating a required field.",
+    },
+    helperText: {
+      control: { type: "text" },
+      description:
+        "Helper text shown to the right of the label. Pass `true` to render the default 'Optional text'.",
+    },
+    labelSize: {
+      control: { type: "select" },
+      options: ["s", "m"],
+      description: "Size of the label (Figma prop).",
+    },
+    palette: {
+      control: { type: "select" },
+      options: ["default", "inverse"],
+      description: "Label palette.",
+    },
+    min: { control: { type: "number" } },
+    max: { control: { type: "number" } },
+    step: { control: { type: "number" } },
+    disabled: { control: { type: "boolean" } },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value ?? 75);
+    return <IncrementerBlock {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Consensus level",
+    helpIcon: true,
+    value: 75,
+    min: 0,
+    max: 100,
+    step: 5,
+  },
+};
+
+export const Required = {
+  render: () => {
+    const [value, setValue] = React.useState(50);
+    return (
+      <IncrementerBlock
+        label="Quorum percentage"
+        asterisk
+        helperText="Required"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        step={5}
+      />
+    );
+  },
+};
+
+export const WithFormattedValue = {
+  render: () => {
+    const [value, setValue] = React.useState(75);
+    return (
+      <IncrementerBlock
+        label="Consensus level"
+        helperText="Optional"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        step={5}
+        formatValue={(n) => `${n}%`}
+      />
+    );
+  },
+};
+
+export const Disabled = {
+  render: () => (
+    <IncrementerBlock
+      label="Consensus level"
+      value={75}
+      onChange={() => {}}
+      disabled
+    />
+  ),
+};