tesseract/categories/web/number/react/src/components/Slider/Slider.stories.tsx

import * as React from 'react';
import type { Meta } from '@storybook/react';
import { Slider as Component, SliderProps as Props, AVAILABLE_SLIDER_ORIENTATIONS } from '.';

const meta: Meta<typeof Component> = {
	component: Component,
	argTypes: {
		orient: {
			control: {
				type: 'select',
			},
			options: AVAILABLE_SLIDER_ORIENTATIONS,
		},
		max: {
			control: { type: 'number' },
		},
		min: {
			control: { type: 'number' },
		},
		length: {
			control: { type: 'number' },
		},
		children: {
			control: { type: 'text' },
		},
		onChange: {
			table: {
				disable: true,
			},
			action: 'changed',
		},
	},
	args: {
		...(Component.defaultProps ?? {}),
		max: 100,
		min: 0,
	},
};

export const Slider = ({children, ...args}: Omit<Props, 'ref'>) => (
	<Component
		{...args}
	>
		{(children ? children.toString() : '').split('\n').filter(s => s.length > 0).map((s, i) => {
			const [label, value = label] = s.split(':').map(s => s.trim()) as string[];
			return (
				<option
					key={`${s}:${i}`}
					value={value}
				>
					{label}
				</option>
			);
		})}
	</Component>
);

export default meta;