Switch component with storybook and testing

2025-10-14 17:27:09 -06:00
parent 460237fc66
commit 9de194bfc0
8 changed files with 908 additions and 262 deletions
@@ -0,0 +1,128 @@
+import React from "react";
+import Switch from "../app/components/Switch";
+
+export default {
+  title: "Forms/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    checked: {
+      control: "boolean",
+      description: "Whether the switch is checked (on) or not (off)",
+    },
+    state: {
+      control: "select",
+      options: ["default", "focus"],
+      description: "Visual state of the switch",
+    },
+    label: {
+      control: "text",
+      description: "Label text displayed next to the switch",
+    },
+    onChange: {
+      action: "changed",
+      description: "Callback fired when the switch is toggled",
+    },
+    onFocus: {
+      action: "focused",
+      description: "Callback fired when the switch receives focus",
+    },
+    onBlur: {
+      action: "blurred",
+      description: "Callback fired when the switch loses focus",
+    },
+  },
+};
+
+const Template = (args) => <Switch {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  checked: false,
+  label: "Switch label",
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+  label: "Switch label",
+};
+
+export const Focus = Template.bind({});
+Focus.args = {
+  checked: false,
+  state: "focus",
+  label: "Switch label",
+};
+
+export const FocusChecked = Template.bind({});
+FocusChecked.args = {
+  checked: true,
+  state: "focus",
+  label: "Switch label",
+};
+
+export const States = () => (
+  <div className="space-y-4">
+    <div className="space-y-2">
+      <h3 className="text-lg font-semibold">Switch States</h3>
+      <div className="space-y-4">
+        <Switch checked={false} label="Switch label" />
+        <Switch checked={true} label="Switch label" />
+        <Switch checked={false} state="focus" label="Switch label" />
+        <Switch checked={true} state="focus" label="Switch label" />
+      </div>
+    </div>
+  </div>
+);
+
+export const Interactive = () => {
+  const [checked, setChecked] = React.useState(false);
+  const [state, setState] = React.useState("default");
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Interactive Switch</h3>
+        <Switch
+          checked={checked}
+          state={state}
+          onChange={() => setChecked(!checked)}
+          label="Enable notifications"
+        />
+      </div>
+      <div className="space-y-4">
+        <h4 className="text-md font-semibold">Controls</h4>
+        <div className="space-y-2">
+          <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>
+      </div>
+    </div>
+  );
+};
+
+export const WithText = () => (
+  <div className="space-y-4">
+    <div className="space-y-2">
+      <h3 className="text-lg font-semibold">Switch with Different Labels</h3>
+      <div className="space-y-4">
+        <Switch checked={false} label="Enable notifications" />
+        <Switch checked={true} label="Auto-save documents" />
+        <Switch checked={false} label="Dark mode" />
+        <Switch checked={true} label="Email updates" />
+      </div>
+    </div>
+  </div>
+);