tesseract/categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.stories.tsx

import * as React from 'react';
import type { Meta } from '@storybook/react';
import { ToggleSwitch as Component, ToggleSwitchProps as Props } from '.';

const LENGTH = 3 as const;

const meta: Meta<typeof Component> = {
	component: Component,
	argTypes: {
		checkedLabel: {
			control: {
				type: 'text',
			},
		},
		subtext: {
			control: {
				type: 'text',
			},
		},
		uncheckedLabel: {
			control: {
				type: 'text',
			},
		},
		onChange: {
			table: {
				disable: true,
			},
			action: 'changed',
		},
	},
	args: {
		...(Component.defaultProps ?? {}),
		checkedLabel: Component.displayName,
	},
};

export const ToggleSwitch = (args: Omit<Props, 'ref'>) => (
	<>
		{Array.from({ length: LENGTH }).map((_, i) => (
			<Component
				{...args}
				key={i}
				name={Component.displayName}
				value={i + 1}
				checkedLabel={`${Component.displayName} ${i + 1}`}
			/>
		))}
	</>
);

export default meta;