feat: wrap radio group and button components (#282)

src/components/data-entry/Radio/Radio.tsx

@@ -1,6 +1,8 @@
 import { Radio as AntRadio } from 'antd'
 import { type RadioProps as AntRadioProps } from 'antd'
 import { ConfigProvider } from 'src/components'
+import { RadioGroup } from "./RadioGroup";
+import { RadioButton } from "./RadioButton";
 
 export interface IRadioProps extends AntRadioProps {}
 
@@ -14,5 +16,5 @@ export const Radio = (props: IRadioProps) => {
 
 // TODO Is there a way to type the props from Radio.Group better so that value types are inferred?
 // This happens with ant as well. <Radio.Group value={string} /> doesn't get properly propagated to the change event
-Radio.Group = AntRadio.Group
-Radio.Button = AntRadio.Button
+Radio.Group = RadioGroup
+Radio.Button = RadioButton

src/components/data-entry/Radio/RadioButton.stories.tsx

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Radio } from 'src/components/data-entry/Radio/Radio'
+
+const meta: Meta<typeof Radio.Button> = {
+  title: 'Aquarium/Data Entry/Radio/RadioButton',
+  component: Radio.Button,
+
+  args: {
+    autoFocus: false,
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    value: undefined,
+    children: 'Radio Button',
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof Radio.Button>
+
+export const Primary: Story = {}

src/components/data-entry/Radio/RadioButton.tsx

@@ -0,0 +1,13 @@
+import { Radio as AntRadio } from 'antd'
+import { type RadioButtonProps as AntRadioGroupProps } from "antd/es/radio/radioButton";
+import { ConfigProvider } from 'src/components'
+
+export interface IRadioButtonProps extends AntRadioGroupProps {}
+
+export const RadioButton = (props: IRadioButtonProps) => {
+  return (
+    <ConfigProvider>
+      <AntRadio.Button {...props} />
+    </ConfigProvider>
+  )
+}

src/components/data-entry/Radio/RadioGroup.stories.tsx

@@ -0,0 +1,46 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Radio } from 'src/components/data-entry/Radio/Radio'
+
+const meta: Meta<typeof Radio.Group> = {
+  title: 'Aquarium/Data Entry/Radio/RadioGroup',
+  component: Radio.Group,
+
+  args: {
+    buttonStyle: undefined,
+    defaultValue: undefined,
+    disabled: false,
+    name: undefined,
+    options: undefined,
+    optionType: undefined,
+    size: 'middle',
+    value: undefined,
+    onChange: undefined,
+    children: undefined
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof Radio.Group>
+
+export const WithOptionsAndOptionType: Story = {
+  args: {
+    options: [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Pear', value: 'Pear' },
+      { label: 'Orange', value: 'Orange', title: 'Orange' },
+    ],
+    optionType: 'default',
+  },
+}
+
+export const WithRadioButtons: Story = {
+  args: {
+    defaultValue: "a",
+    children: [
+      <Radio.Button value="a">Hangzhou</Radio.Button>,
+      <Radio.Button value="b">Shanghai</Radio.Button>,
+      <Radio.Button value="c">Beijing</Radio.Button>,
+      <Radio.Button value="d">Chengdu</Radio.Button>
+    ]
+  },
+}

src/components/data-entry/Radio/RadioGroup.tsx

@@ -0,0 +1,13 @@
+import { Radio as AntRadio } from 'antd'
+import { type RadioGroupProps as AntRadioGroupProps } from 'antd'
+import { ConfigProvider } from 'src/components'
+
+export interface IRadioGroupProps extends AntRadioGroupProps {}
+
+export const RadioGroup = (props: IRadioGroupProps) => {
+  return (
+    <ConfigProvider>
+      <AntRadio.Group {...props} />
+    </ConfigProvider>
+  )
+}