docs(radio): 📝 add story components for csb (#175)

src/checkbox/stories/CheckboxGroup.stories.tsx

@@ -10,7 +10,7 @@ type Meta = ComponentMeta<typeof CheckboxGroup>;
 type Story = ComponentStoryObj<typeof CheckboxGroup>;
 
 export default {
-  title: "Forms/Checkbox/Stack",
+  title: "Forms/Checkbox/Group",
   component: CheckboxGroup,
   argTypes: {
     label: { control: { type: "text" } },
@@ -32,37 +32,26 @@ export default {
         "icon",
       ],
     }),
+    disabled: { table: { disable: false } },
+    size: { table: { disable: true } },
   },
   parameters: {
     layout: "centered",
     preview: createPreviewTabs({ js, ts }),
+    options: { showPanel: true },
   },
 } as Meta;
 
-export const Default: Story = {
-  argTypes: {
-    disabled: { table: { disable: false } },
-    size: { table: { disable: true } },
-  },
-  parameters: { options: { showPanel: true } },
-};
-
-export const GroupDefault: Story = {
-  args: { size: "md", stack: "vertical" },
-  parameters: { options: { showPanel: true } },
-};
+export const Default: Story = {};
 
-export const GroupDefaultShowMore: Story = {
-  args: { size: "md", stack: "vertical", maxVisibleItems: 3 },
-  parameters: { options: { showPanel: true } },
+export const ShowMoreDefault: Story = {
+  args: { maxVisibleItems: 3 },
 };
 
-export const GroupHorizontal: Story = {
-  args: { size: "md", stack: "horizontal" },
-  parameters: { options: { showPanel: true } },
+export const Horizontal: Story = {
+  args: { stack: "horizontal" },
 };
 
-export const GroupHorizontalShowMore: Story = {
-  args: { size: "md", stack: "horizontal", maxVisibleItems: 3 },
-  parameters: { options: { showPanel: true } },
+export const ShowMoreHorizontal: Story = {
+  args: { stack: "horizontal", maxVisibleItems: 3 },
 };

src/radio/stories/RadioBasic.component.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { Radio, RadioGroup, RadioGroupProps } from "../index";
+
+export const RadioBasic: React.FC<RadioGroupProps> = props => {
+  return (
+    <RadioGroup aria-label="fruits" {...props}>
+      <Radio value="apple" label="Apple" />
+      <Radio value="orange" label="Orange" />
+      <Radio value="watermelon" label="Watermelon" />
+      <Radio value="grapes" label="Grapes" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="blueberry" label="Blueberry" />
+      <Radio value="sapota" label="Sapota" />
+      <Radio value="papaya" label="Papaya" />
+      <Radio value="avocado" label="Avocado" />
+      <Radio value="strawberry" label="Strawberry" />
+      <Radio value="cherry" label="Cherry" />
+      <Radio value="fig" label="Fig" />
+      <Radio value="guava" label="Guava" />
+      <Radio value="mango" label="Mango" />
+    </RadioGroup>
+  );
+};
+
+export default RadioBasic;

src/radio/stories/RadioBasic.stories.tsx

@@ -0,0 +1,81 @@
+import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+
+import {
+  createControls,
+  createPreviewTabs,
+  createUnionControl,
+} from "../../../.storybook/utils";
+
+import js from "./templates/RadioBasicJsx";
+import ts from "./templates/RadioBasicTsx";
+import { RadioBasic } from "./RadioBasic.component";
+
+type Meta = ComponentMeta<typeof RadioBasic>;
+type Story = ComponentStoryObj<typeof RadioBasic>;
+
+export default {
+  title: "Forms/Radio/Basic",
+  component: RadioBasic,
+  argTypes: {
+    size: createUnionControl(["sm", "md", "lg"]),
+    ...createControls(undefined, {
+      ignore: [
+        "baseId",
+        "unstable_virtual",
+        "rtl",
+        "orientation",
+        "currentId",
+        "loop",
+        "wrap",
+        "shift",
+        "unstable_includesBaseElement",
+        "defaultState",
+        "state",
+        "onStateChange",
+        "wrapElement",
+        "disabled",
+      ],
+    }),
+  },
+  parameters: {
+    layout: "centered",
+    options: { showPanel: true },
+    preview: createPreviewTabs({ js, ts }),
+  },
+} as Meta;
+
+export const Default: Story = {
+  args: { size: "md", stack: "vertical" },
+};
+
+export const WithDefaultState: Story = {
+  ...Default,
+  args: { ...Default.args, defaultState: "orange" },
+};
+
+export const Small: Story = {
+  ...Default,
+  args: { ...Default.args, size: "sm" },
+};
+export const Medium: Story = {
+  ...Default,
+};
+export const Large: Story = {
+  ...Default,
+  args: { ...Default.args, size: "lg" },
+};
+
+export const ShowMoreDefault: Story = {
+  ...Default,
+  args: { ...Default.args, maxVisibleItems: 3 },
+};
+
+export const Horizontal: Story = {
+  ...Default,
+  args: { ...Default.args, size: "md", stack: "horizontal" },
+};
+
+export const ShowMoreHorizontal: Story = {
+  ...Default,
+  args: { ...Default.args, stack: "horizontal", maxVisibleItems: 3 },
+};