mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-11-03 02:06:37 +00:00
Vinicius LourençoandGitHub
cd86872e1c
* refactor(storybook): add design tokens doc & improve menu organization * fix(turbo): generate components using new structure * refactor(sidebar): change from experimental to old components
126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import { type RadioColorProps, RadioGroup, RadioGroupItem, RadioGroupLabel } from '@signozhq/ui';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { generateDocs } from '../utils/generateDocs.js';
|
|
|
|
const radioGroupExamples = [
|
|
`import { RadioGroup, RadioGroupItem } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
return (
|
|
<RadioGroup defaultValue="option1">
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option1" id="option1-radio" />
|
|
<label htmlFor="option1-radio">Option 1</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option2" id="option2-radio" />
|
|
<label htmlFor="option2-radio">Option 2</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option3" id="option3-radio" disabled />
|
|
<label htmlFor="option3-radio" className="text-zinc-400">Option 3 (Disabled)</label>
|
|
</div>
|
|
</div>
|
|
</RadioGroup>
|
|
);
|
|
}`,
|
|
];
|
|
|
|
const radioGroupDocs = generateDocs({
|
|
packageName: '@signozhq/ui',
|
|
description: 'A radio group component for selecting a single option from a list of choices.',
|
|
examples: radioGroupExamples,
|
|
});
|
|
|
|
const meta: Meta<typeof RadioGroup> = {
|
|
title: 'Old Components/RadioGroup',
|
|
component: RadioGroup,
|
|
argTypes: {
|
|
disabled: { control: 'boolean' },
|
|
id: { control: 'text' },
|
|
color: {
|
|
control: 'select',
|
|
options: ['robin', 'forest', 'amber', 'sienna', 'cherry', 'sakura', 'aqua'] as const,
|
|
description: 'The color variant of the radio button',
|
|
},
|
|
},
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
docs: {
|
|
description: {
|
|
component: radioGroupDocs,
|
|
},
|
|
},
|
|
design: [
|
|
{
|
|
name: 'Figma',
|
|
type: 'figma',
|
|
url: 'https://www.figma.com/design/egMidgk6VJDXTumxcCYUl1/Periscope---Primitives?node-id=12-742&p=f',
|
|
},
|
|
],
|
|
},
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof RadioGroup>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
color: 'robin' as RadioColorProps,
|
|
},
|
|
render: ({ color }) => (
|
|
<RadioGroup defaultValue="option1">
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option1" id="option1-radio" color={color as RadioColorProps} />
|
|
<RadioGroupLabel htmlFor="option1-radio">Option 1</RadioGroupLabel>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option2" id="option2-radio" color={color as RadioColorProps} />
|
|
<RadioGroupLabel htmlFor="option2-radio">Option 2</RadioGroupLabel>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="option3" id="option3-radio" color={color as RadioColorProps} />
|
|
<RadioGroupLabel htmlFor="option3-radio">Option 3</RadioGroupLabel>
|
|
</div>
|
|
</div>
|
|
</RadioGroup>
|
|
),
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
color: 'robin' as RadioColorProps,
|
|
},
|
|
render: ({ color }) => (
|
|
<RadioGroup defaultValue="active">
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="active" id="active-radio" color={color as RadioColorProps} />
|
|
<RadioGroupLabel htmlFor="active-radio">Active Option</RadioGroupLabel>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
value="disabled1"
|
|
id="disabled1-radio"
|
|
disabled
|
|
color={color as RadioColorProps}
|
|
/>
|
|
<RadioGroupLabel htmlFor="disabled1-radio">Disabled Option 1</RadioGroupLabel>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
value="disabled2"
|
|
id="disabled2-radio"
|
|
disabled
|
|
color={color as RadioColorProps}
|
|
/>
|
|
<RadioGroupLabel htmlFor="disabled2-radio">Disabled Option 2</RadioGroupLabel>
|
|
</div>
|
|
</div>
|
|
</RadioGroup>
|
|
),
|
|
};
|