App reorganization

2026-04-18 14:12:49 -06:00
parent f866d11ff8
commit e9dab04b34
288 changed files with 2698 additions and 5029 deletions
@@ -0,0 +1,82 @@
+import React from "react";
+import InputWithCounter from "../../app/components/controls/InputWithCounter";
+
+export default {
+  title: "Components/Controls/InputWithCounter",
+  component: InputWithCounter,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label rendered above the input",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty",
+    },
+    value: {
+      control: "text",
+      description: "Current value of the input (controlled)",
+    },
+    maxLength: {
+      control: { type: "number", min: 1, max: 500, step: 1 },
+      description: "Maximum number of characters allowed",
+    },
+    showHelpIcon: {
+      control: "boolean",
+      description: "Whether to show the help icon next to the label",
+    },
+    onChange: { action: "changed" },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = React.useState(args.value ?? "");
+  return (
+    <div style={{ width: 320 }}>
+      <InputWithCounter
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: false,
+  },
+};
+
+export const WithHelpIcon = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: true,
+  },
+};
+
+export const WithInitialValue = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "My community",
+    maxLength: 30,
+    showHelpIcon: false,
+  },
+};