mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
134 lines
3.8 KiB
TypeScript
134 lines
3.8 KiB
TypeScript
import { Switch } from '@signozhq/ui';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
|
|
const meta: Meta<typeof Switch> = {
|
|
title: 'Primitive Components/Switch',
|
|
component: Switch,
|
|
argTypes: {
|
|
testId: {
|
|
control: 'text',
|
|
description: 'Test ID for the switch.',
|
|
table: { category: 'Testing', type: { summary: 'string' } },
|
|
},
|
|
children: {
|
|
control: 'text',
|
|
description:
|
|
'The content inside the switch label. Typically used for adding text or other elements alongside the switch.',
|
|
table: { category: 'Content' },
|
|
},
|
|
color: {
|
|
control: 'select',
|
|
options: ['robin', 'forest', 'amber', 'sienna', 'cherry', 'sakura', 'aqua'],
|
|
description:
|
|
'The color theme of the switch. Each color has semantic meaning for different use cases.',
|
|
table: { category: 'Appearance', defaultValue: { summary: 'robin' } },
|
|
},
|
|
disabled: {
|
|
control: 'boolean',
|
|
description: 'Prevents user interaction and displays the switch in a disabled state.',
|
|
table: { category: 'Behavior', defaultValue: { summary: 'false' } },
|
|
},
|
|
required: {
|
|
control: 'boolean',
|
|
description:
|
|
'When true, indicates that the user must toggle the switch before the owning form can be submitted.',
|
|
table: {
|
|
category: 'Behavior',
|
|
defaultValue: { summary: 'false' },
|
|
type: { summary: 'boolean' },
|
|
},
|
|
},
|
|
id: {
|
|
control: 'text',
|
|
description:
|
|
'A unique identifier for the switch. Links the switch with its label for accessibility.',
|
|
table: { category: 'Accessibility' },
|
|
},
|
|
name: {
|
|
control: 'text',
|
|
description:
|
|
'The name of the switch. Submitted with its owning form as part of a name/value pair.',
|
|
table: { category: 'Form', type: { summary: 'string' } },
|
|
},
|
|
value: {
|
|
control: 'boolean',
|
|
description:
|
|
'The controlled checked state of the switch. Use when you need to control its checked state.',
|
|
table: { category: 'Form', type: { summary: 'boolean' } },
|
|
},
|
|
defaultValue: {
|
|
control: 'boolean',
|
|
description:
|
|
'The initial checked state of the switch. Use when you do not need to control its checked state.',
|
|
table: { category: 'Form', defaultValue: { summary: 'false' } },
|
|
},
|
|
className: {
|
|
control: 'text',
|
|
description: 'Additional CSS classes to apply to the switch.',
|
|
table: { category: 'Styling', type: { summary: 'string' } },
|
|
},
|
|
onChange: {
|
|
control: false,
|
|
description: 'The callback invoked when the checked state of the switch changes.',
|
|
table: { category: 'Events', type: { summary: '(checked: boolean) => void' } },
|
|
},
|
|
},
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
design: [
|
|
{
|
|
name: 'Figma',
|
|
type: 'figma',
|
|
url: 'https://www.figma.com/design/egMidgk6VJDXTumxcCYUl1/Periscope---Primitives?node-id=12-742&p=f',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Switch>;
|
|
|
|
// Default switch
|
|
export const Default: Story = {
|
|
args: {
|
|
id: 'default',
|
|
children: 'Default switch',
|
|
defaultValue: false,
|
|
disabled: false,
|
|
color: 'robin',
|
|
},
|
|
};
|
|
|
|
export const AllVariants: Story = {
|
|
render: () => (
|
|
<div className="stack-16">
|
|
{['robin', 'forest', 'amber', 'sienna', 'cherry', 'sakura', 'aqua'].map((c) => (
|
|
<div key={c} style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
|
<div style={{ textTransform: 'capitalize', width: 120 }}>{c}</div>
|
|
|
|
<Switch id={`switch-${c}-default`} color={c as any}>
|
|
Default
|
|
</Switch>
|
|
|
|
<Switch id={`switch-${c}-checked`} defaultValue={true} color={c as any}>
|
|
Checked
|
|
</Switch>
|
|
|
|
<Switch id={`switch-${c}-disabled`} disabled={true} color={c as any}>
|
|
Disabled
|
|
</Switch>
|
|
|
|
<Switch
|
|
id={`switch-${c}-disabled-checked`}
|
|
defaultValue={true}
|
|
disabled={true}
|
|
color={c as any}
|
|
>
|
|
Disabled Checked
|
|
</Switch>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
};
|