Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: wrap radio group and button components #282

Merged
merged 5 commits into from
Jun 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/components/data-entry/Radio/Radio.tsx
Original file line number Diff line number Diff line change
@@ -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 {}

Expand All @@ -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
Comment on lines 17 to 18
Copy link
Collaborator

@tibuurcio tibuurcio Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I've noticed that as well. I'm not 100% sure but Input.tsx might help here. We used some inspiration code from Antd's codebase there to be able to properly type the ref prop. Not sure how long you'd like to spend on that though, so I'm approving the PR without it. Let me know if you need another approval.

Radio.Group = AntRadio.Group
Radio.Button = AntRadio.Button
Radio.Group = RadioGroup
Radio.Button = RadioButton
21 changes: 21 additions & 0 deletions src/components/data-entry/Radio/RadioButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 = {}
13 changes: 13 additions & 0 deletions src/components/data-entry/Radio/RadioButton.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
46 changes: 46 additions & 0 deletions src/components/data-entry/Radio/RadioGroup.stories.tsx
Original file line number Diff line number Diff line change
@@ -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>
]
},
}
13 changes: 13 additions & 0 deletions src/components/data-entry/Radio/RadioGroup.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Loading