procyon/stories/components/Display/List.stories.tsx

import { Meta, StoryObj } from '@storybook/react';

import { List } from '@procyon/components/List';

type Story = StoryObj<typeof List>;

export default {
	component: List,
	parameters: {
		docs: {
			description: {
				component: "`import { List } from '@procyon/components/List';`",
			},
		},
	},
	tags: ['autodocs'],
} as Meta;

export const Default: Story = {
	args: {
		options: [
			{
				name: 'Tiger',
				code: 'list1',
			},
			{
				name: 'Elephant',
				code: 'list2',
			},
			{
				name: 'Dolphin',
				code: 'list3',
			},
		],
	},
};

export const WithSearch: Story = {
	args: {
		autoComplete: true,
		options: [
			{ name: 'Pizza', code: 'food1', description: 'Delicious cheese pizza' },
			{ name: 'Burger', code: 'food2', description: 'Juicy beef burger' },
			{ name: 'Pasta', code: 'food3', description: 'Italian style pasta' },
		],
	},
};

export const WithDescription: Story = {
	args: {
		options: [
			{
				name: 'Tiger',
				code: 'list1',
				description: 'Large carnivorous cat originating from Asia',
			},
			{
				name: 'Elephant',
				code: 'list2',
				description: 'Large herbivore with a long trunk, native to Africa and Asia',
			},
			{
				name: 'Dolphin',
				code: 'list3',
				description: 'Intelligent aquatic mammal known for its playful behavior',
			},
		],
	},
};

export const NoInteractive: Story = {
	args: {
		mode: 'view',
		options: [
			{
				name: 'Tiger',
				code: 'list1',
				description: 'Large carnivorous cat originating from Asia',
			},
			{
				name: 'Elephant',
				code: 'list2',
				description: 'Large herbivore with a long trunk, native to Africa and Asia',
			},
			{
				name: 'Dolphin',
				code: 'list3',
				description: 'Intelligent aquatic mammal known for its playful behavior',
			},
		],
	},
};