Update stories to match new component organization

2026-02-05 22:46:16 -07:00
parent 6f178e934f
commit aef04c525a
51 changed files with 111 additions and 111 deletions
@@ -0,0 +1,122 @@
+import React from "react";
+import Toggle from "../../app/components/controls/Toggle";
+
+export default {
+  title: "Components/Controls/Toggle",
+  component: Toggle,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: ["default", "hover", "focus"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    checked: {
+      control: { type: "boolean" },
+    },
+    showIcon: {
+      control: { type: "boolean" },
+    },
+    showText: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <Toggle {...args} />;
+
+export const States = () => (
+  <div className="space-y-6">
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Toggle States</h3>
+      <div className="space-y-4">
+        <Toggle label="Default State" checked={false} />
+        <Toggle label="Hover State" checked={false} state="hover" />
+        <Toggle label="Selected State" checked={true} />
+        <Toggle label="Focus State" checked={false} state="focus" />
+        <Toggle label="Disabled State" checked={false} disabled />
+      </div>
+    </div>
+  </div>
+);
+
+export const WithText = Template.bind({});
+WithText.args = {
+  label: "Text Toggle",
+  checked: false,
+  showText: true,
+  text: "Toggle",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  label: "Icon Toggle",
+  checked: false,
+  showIcon: true,
+  icon: "I",
+};
+
+export const Interactive = () => {
+  const [checked, setChecked] = React.useState(false);
+  const [state, setState] = React.useState("default");
+  const [disabled, setDisabled] = React.useState(false);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Interactive Toggle</h3>
+        <div className="space-y-4">
+          <Toggle
+            label="Interactive Toggle"
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            state={state}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+      <div className="space-y-4">
+        <h4 className="text-md font-semibold">Controls</h4>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="checked"
+              checked={checked}
+              onChange={(e) => setChecked(e.target.checked)}
+            />
+            <label htmlFor="checked" className="text-sm">
+              Checked
+            </label>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">State:</label>
+            <select
+              value={state}
+              onChange={(e) => setState(e.target.value)}
+              className="px-3 py-1 border border-gray-300 rounded"
+            >
+              <option value="default">Default</option>
+              <option value="focus">Focus</option>
+            </select>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="disabled"
+              checked={disabled}
+              onChange={(e) => setDisabled(e.target.checked)}
+            />
+            <label htmlFor="disabled" className="text-sm">
+              Disabled
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};