tesseract-design
/
tesseract


			
				
					
						
						
							
							import * as React from 'react';
import type { Meta } from '@storybook/react';
import { TextControl } from '@tesseract-design/web-base';
import { TagInput as Component, TagInputProps as Props, AVAILABLE_TAG_INPUT_SEPARATORS } from '.';

const meta: Meta<typeof Component> = {
	component: Component,
	argTypes: {
		label: {
			control: { type: 'text' },
		},
		hint: {
			control: { type: 'text' },
		},
		indicator: {
			control: {
				type: 'text',
			},
		},
		variant: {
			control: {
				type: 'select',
			},
			options: TextControl.AVAILABLE_VARIANTS,
		},
		size: {
			control: {
				type: 'select',
			},
			options: TextControl.AVAILABLE_SIZES,
		},
		fallbackElement: {
			table: {
				disable: true,
			},
		},
		valueSeparator: {
			control: {
				type: 'select',
			},
			options: AVAILABLE_TAG_INPUT_SEPARATORS,
		},
		onChange: {
			table: {
				disable: true,
			},
			action: 'changed',
		},
	},
	args: {
		...(Component.defaultProps ?? {}),
		label: Component.displayName,
	},
};

export const TagInput = (args: Omit<Props, 'ref'>) => (
	<Component
		{...args}
	/>
);

export default meta;