From 070d411e589cf82c60ce72f31e2d6a1230ba4616 Mon Sep 17 00:00:00 2001
From: Lewis <tuannguyenitpy@gmail.com>
Date: Wed, 25 Oct 2023 22:50:29 +0700
Subject: [PATCH] Update: CheckboxGroup & RadioGroup

---
 lib/components/checkbox/Checkbox.stories.tsx  | 16 +-----
 lib/components/checkbox/Checkbox.tsx          |  5 +-
 .../checkbox/CheckboxGroup.stories.tsx        | 50 +++++++++++++++++++
 lib/components/radio/Radio.stories.tsx        | 20 +++++---
 lib/components/radio/Radio.tsx                |  5 +-
 lib/components/radio/RadioGroup.stories.tsx   | 50 +++++++++++++++++++
 .../styles/components/Checkbox.styles.ts      |  2 +-
 .../styles/components/Radio.styles.ts         |  2 +-
 8 files changed, 118 insertions(+), 32 deletions(-)
 create mode 100644 lib/components/checkbox/CheckboxGroup.stories.tsx
 create mode 100644 lib/components/radio/RadioGroup.stories.tsx

diff --git a/lib/components/checkbox/Checkbox.stories.tsx b/lib/components/checkbox/Checkbox.stories.tsx
index 24ec489..d3f2be9 100644
--- a/lib/components/checkbox/Checkbox.stories.tsx
+++ b/lib/components/checkbox/Checkbox.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox } from "./Checkbox";
 
 const meta = {
-  title: "ATOMS/Checkbox",
+  title: "ATOMS/Checkbox/Checkbox",
   component: Checkbox,
   tags: ["autodocs"],
   argTypes: {
@@ -60,17 +60,3 @@ export const Disabled: Story = {
     isDisabled: true,
   },
 };
-
-export const CheckboxGroup = () => {
-  return (
-    <Checkbox.Group
-      value={["1"]}
-      layout="horizontal"
-      onChange={(val) => console.log("checked: ", val)}
-    >
-      <Checkbox value="1">Option A</Checkbox>
-      <Checkbox value="2">Option B</Checkbox>
-      <Checkbox value="3">Option C</Checkbox>
-    </Checkbox.Group>
-  );
-};
diff --git a/lib/components/checkbox/Checkbox.tsx b/lib/components/checkbox/Checkbox.tsx
index d6be236..08a4cc9 100644
--- a/lib/components/checkbox/Checkbox.tsx
+++ b/lib/components/checkbox/Checkbox.tsx
@@ -72,7 +72,7 @@ export const Checkbox = (props: ICheckbox) => {
   );
 };
 
-const CheckboxGroup = ({
+export const CheckboxGroup = ({
   children,
   defaultValue,
   value,
@@ -158,6 +158,3 @@ const CheckboxGroup = ({
     </div>
   );
 };
-
-Checkbox.Group = CheckboxGroup;
-export default Checkbox;
diff --git a/lib/components/checkbox/CheckboxGroup.stories.tsx b/lib/components/checkbox/CheckboxGroup.stories.tsx
new file mode 100644
index 0000000..2521ecd
--- /dev/null
+++ b/lib/components/checkbox/CheckboxGroup.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ICheckboxGroup } from "./Checkbox.types";
+import { Checkbox, CheckboxGroup } from "./Checkbox";
+
+const meta = {
+  title: "ATOMS/Checkbox/CheckboxGroup",
+  component: CheckboxGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+    },
+    spacing: {
+      control: { type: "number" },
+    },
+    value: {
+      control: { type: "text" },
+    },
+    onChange: {
+      action: "onChange",
+    },
+  },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<ICheckboxGroup>;
+
+const radioGroupArgs: ICheckboxGroup = {
+  value: ["1"],
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const Primary: Story = (props: ICheckboxGroup) => {
+  const all = { ...radioGroupArgs, ...props };
+  return (
+    <CheckboxGroup {...all}>
+      <Checkbox value="1">Option A</Checkbox>
+      <Checkbox value="2">Option B</Checkbox>
+      <Checkbox value="3">Option C</Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+Primary.args = radioGroupArgs;
diff --git a/lib/components/radio/Radio.stories.tsx b/lib/components/radio/Radio.stories.tsx
index 6140a99..2c20d77 100644
--- a/lib/components/radio/Radio.stories.tsx
+++ b/lib/components/radio/Radio.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Radio } from "./Radio";
+import { IRadioGroup } from "./Radio.types";
 
 const meta = {
-  title: "ATOMS/Radio",
+  title: "ATOMS/Radio/Radio",
   component: Radio,
   tags: ["autodocs"],
   argTypes: {
@@ -60,16 +61,21 @@ export const Disabled: Story = {
   },
 };
 
-export const RadioGroup = () => {
+const radioGroupArgs: IRadioGroup = {
+  value: "1",
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const RadioGroup = (props: IRadioGroup) => {
+  const all = { ...radioGroupArgs, ...props };
   return (
-    <Radio.Group
-      value="1"
-      layout="horizontal"
-      onChange={(val) => console.log("checked: ", val)}
-    >
+    <Radio.Group {...all}>
       <Radio value="1">Option A</Radio>
       <Radio value="2">Option B</Radio>
       <Radio value="3">Option C</Radio>
     </Radio.Group>
   );
 };
+
+RadioGroup.args = radioGroupArgs;
diff --git a/lib/components/radio/Radio.tsx b/lib/components/radio/Radio.tsx
index cc06c3d..9e29b06 100644
--- a/lib/components/radio/Radio.tsx
+++ b/lib/components/radio/Radio.tsx
@@ -65,7 +65,7 @@ export const Radio = (props: IRadio) => {
   );
 };
 
-const RadioGroup = ({
+export const RadioGroup = ({
   children,
   defaultValue,
   value,
@@ -142,6 +142,3 @@ const RadioGroup = ({
     </div>
   );
 };
-
-Radio.Group = RadioGroup;
-export default Radio;
diff --git a/lib/components/radio/RadioGroup.stories.tsx b/lib/components/radio/RadioGroup.stories.tsx
new file mode 100644
index 0000000..63f72c7
--- /dev/null
+++ b/lib/components/radio/RadioGroup.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IRadioGroup } from "./Radio.types";
+import { Radio, RadioGroup } from "./Radio";
+
+const meta = {
+  title: "ATOMS/Radio/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+    },
+    spacing: {
+      control: { type: "number" },
+    },
+    value: {
+      control: { type: "text" },
+    },
+    onChange: {
+      action: "onChange",
+    },
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<IRadioGroup>;
+
+const radioGroupArgs: IRadioGroup = {
+  value: "1",
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const Primary: Story = (props: IRadioGroup) => {
+  const all = { ...radioGroupArgs, ...props };
+  return (
+    <RadioGroup {...all}>
+      <Radio value="1">Option A</Radio>
+      <Radio value="2">Option B</Radio>
+      <Radio value="3">Option C</Radio>
+    </RadioGroup>
+  );
+};
+
+Primary.args = radioGroupArgs;
diff --git a/lib/customization/styles/components/Checkbox.styles.ts b/lib/customization/styles/components/Checkbox.styles.ts
index d79c2ed..e6f6db6 100644
--- a/lib/customization/styles/components/Checkbox.styles.ts
+++ b/lib/customization/styles/components/Checkbox.styles.ts
@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const container = cva(["flex", "items-center", "w-fit", "gap-3"]);
+const container = cva(["flex", "items-center", "w-fit", "gap-2"]);
 const input = cva(
   [
     "bg-primary-background",
diff --git a/lib/customization/styles/components/Radio.styles.ts b/lib/customization/styles/components/Radio.styles.ts
index f42355a..f98f2d5 100644
--- a/lib/customization/styles/components/Radio.styles.ts
+++ b/lib/customization/styles/components/Radio.styles.ts
@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const container = cva(["flex", "items-center", "w-fit", "gap-3"]);
+const container = cva(["flex", "items-center", "w-fit", "gap-2"]);
 const input = cva(
   [
     "bg-primary-background",