Fix failing tests

stories/Checkbox.stories.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Checkbox from "../app/components/Checkbox";
 import {
   DefaultInteraction,
@@ -57,6 +58,16 @@ export const Default = {
     label: "Default checkbox",
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Checked = {
@@ -68,34 +79,74 @@ export const Checked = {
     label: "Checked checkbox",
   },
   play: CheckedInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <div className="flex flex-col gap-2">
-          <Checkbox label="Unchecked" checked={false} mode="standard" />
-          <Checkbox label="Checked" checked={true} mode="standard" />
+  render: () => {
+    const [unchecked, setUnchecked] = React.useState(false);
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <div className="flex flex-col gap-2">
+            <Checkbox
+              label="Unchecked"
+              checked={unchecked}
+              mode="standard"
+              onChange={({ checked: newChecked }) => setUnchecked(newChecked)}
+            />
+            <Checkbox
+              label="Checked"
+              checked={checked}
+              mode="standard"
+              onChange={({ checked: newChecked }) => setChecked(newChecked)}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <div className="flex flex-col gap-2">
-          <Checkbox label="Unchecked" checked={false} mode="inverse" />
-          <Checkbox label="Checked" checked={true} mode="inverse" />
+  render: () => {
+    const [unchecked, setUnchecked] = React.useState(false);
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <div className="flex flex-col gap-2">
+            <Checkbox
+              label="Unchecked"
+              checked={unchecked}
+              mode="inverse"
+              onChange={({ checked: newChecked }) => setUnchecked(newChecked)}
+            />
+            <Checkbox
+              label="Checked"
+              checked={checked}
+              mode="inverse"
+              onChange={({ checked: newChecked }) => setChecked(newChecked)}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };

stories/RadioButton.stories.js

@@ -1,3 +1,4 @@
+import React from "react";
 import RadioButton from "../app/components/RadioButton";
 import {
   DefaultInteraction,
@@ -50,6 +51,16 @@ export const Default = {
     label: "Default radio button",
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <RadioButton
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Checked = {
@@ -60,34 +71,88 @@ export const Checked = {
     label: "Checked radio button",
   },
   play: CheckedInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <RadioButton
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <div className="flex flex-col gap-2">
-          <RadioButton label="Unchecked" checked={false} mode="standard" />
-          <RadioButton label="Checked" checked={true} mode="standard" />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState("checked");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <div className="flex flex-col gap-2">
+            <RadioButton
+              label="Unchecked"
+              checked={selectedValue === "unchecked"}
+              name="standard-example"
+              value="unchecked"
+              mode="standard"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("unchecked");
+              }}
+            />
+            <RadioButton
+              label="Checked"
+              checked={selectedValue === "checked"}
+              name="standard-example"
+              value="checked"
+              mode="standard"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("checked");
+              }}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <div className="flex flex-col gap-2">
-          <RadioButton label="Unchecked" checked={false} mode="inverse" />
-          <RadioButton label="Checked" checked={true} mode="inverse" />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState("checked");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <div className="flex flex-col gap-2">
+            <RadioButton
+              label="Unchecked"
+              checked={selectedValue === "unchecked"}
+              name="inverse-example"
+              value="unchecked"
+              mode="inverse"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("unchecked");
+              }}
+            />
+            <RadioButton
+              label="Checked"
+              checked={selectedValue === "checked"}
+              name="inverse-example"
+              value="checked"
+              mode="inverse"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("checked");
+              }}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };

stories/RadioGroup.stories.js

@@ -59,49 +59,67 @@ export const Default = {
     ],
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value);
+    return (
+      <RadioGroup
+        {...args}
+        value={value}
+        onChange={({ value: newValue }) => setValue(newValue)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <RadioGroup
-          name="standard-example"
-          value="option2"
-          mode="standard"
-          options={[
-            { value: "option1", label: "Option 1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ]}
-          onChange={() => {}}
-        />
+  render: () => {
+    const [value, setValue] = React.useState("option2");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <RadioGroup
+            name="standard-example"
+            value={value}
+            mode="standard"
+            options={[
+              { value: "option1", label: "Option 1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ]}
+            onChange={({ value: newValue }) => setValue(newValue)}
+          />
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <RadioGroup
-          name="inverse-example"
-          value="option1"
-          mode="inverse"
-          options={[
-            { value: "option1", label: "Option 1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ]}
-          onChange={() => {}}
-        />
+  render: () => {
+    const [value, setValue] = React.useState("option1");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <RadioGroup
+            name="inverse-example"
+            value={value}
+            mode="inverse"
+            options={[
+              { value: "option1", label: "Option 1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ]}
+            onChange={({ value: newValue }) => setValue(newValue)}
+          />
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };
 

stories/Select.stories.js

@@ -35,11 +35,16 @@ export default {
 const Template = (args) => {
   const [value, setValue] = useState("");
   return (
-    <Select {...args} value={value} onChange={(e) => setValue(e.target.value)}>
-      <option value="item1">Context Menu Item 1</option>
-      <option value="item2">Context Menu Item 2</option>
-      <option value="item3">Context Menu Item 3</option>
-    </Select>
+    <Select
+      {...args}
+      value={value}
+      onChange={setValue}
+      options={[
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ]}
+    />
   );
 };