mirror of https://github.com/buster-so/buster.git
128 lines
2.8 KiB
TypeScript
128 lines
2.8 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Select } from './Select';
|
|
import { User, MapSettings, Mailbox } from '../icons';
|
|
import { fn } from '@storybook/test';
|
|
|
|
const meta: Meta<typeof Select> = {
|
|
title: 'UI/Select/Select',
|
|
component: Select,
|
|
parameters: {
|
|
layout: 'centered'
|
|
},
|
|
args: {
|
|
onChange: fn()
|
|
},
|
|
tags: ['autodocs']
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Select>;
|
|
|
|
const basicItems = [
|
|
{ value: 'apples', label: 'Apples' },
|
|
{ value: 'bananas', label: 'Bananas' },
|
|
{ value: 'cherries', label: 'Cherries' }
|
|
];
|
|
|
|
const itemsWithIcons = [
|
|
{ value: 'profile', label: 'Profile', icon: <User /> },
|
|
{ value: 'settings', label: 'Settings', icon: <MapSettings /> },
|
|
{ value: 'messages', label: 'Messages', icon: <Mailbox /> }
|
|
];
|
|
|
|
const groupedItems = [
|
|
{
|
|
label: 'Fruits',
|
|
items: [
|
|
{ value: 'apple', label: 'Apple' },
|
|
{ value: 'banana', label: 'Banana' },
|
|
{ value: 'orange', label: 'Orange' }
|
|
]
|
|
},
|
|
{
|
|
label: 'Vegetables',
|
|
items: [
|
|
{ value: 'carrot', label: 'Carrot' },
|
|
{ value: 'broccoli', label: 'Broccoli' },
|
|
{ value: 'spinach', label: 'Spinach' }
|
|
]
|
|
}
|
|
];
|
|
|
|
const itemsWithSecondaryLabel = [
|
|
{ value: 'user1', label: 'John Doe', secondaryLabel: 'Admin' },
|
|
{ value: 'user2', label: 'Jane Smith', secondaryLabel: 'Editor' },
|
|
{ value: 'user3', label: 'Bob Johnson', secondaryLabel: 'Viewer', disabled: true }
|
|
];
|
|
|
|
const itemsWithSomeDisabled = [
|
|
{ value: 'active1', label: 'Available Option 1' },
|
|
{ value: 'disabled1', label: 'Unavailable Option 1', disabled: true },
|
|
{ value: 'active2', label: 'Available Option 2' },
|
|
{ value: 'disabled2', label: 'Unavailable Option 2', disabled: true },
|
|
{ value: 'active3', label: 'Available Option 3' }
|
|
];
|
|
|
|
export const Basic: Story = {
|
|
args: {
|
|
items: basicItems,
|
|
placeholder: 'Select an option'
|
|
}
|
|
};
|
|
|
|
export const WithIcons: Story = {
|
|
args: {
|
|
items: itemsWithIcons,
|
|
placeholder: 'Select an option'
|
|
}
|
|
};
|
|
|
|
export const Grouped: Story = {
|
|
args: {
|
|
items: groupedItems,
|
|
placeholder: 'Select an option'
|
|
}
|
|
};
|
|
|
|
export const WithSecondaryLabels: Story = {
|
|
args: {
|
|
items: itemsWithSecondaryLabel,
|
|
placeholder: 'Select a user'
|
|
}
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
items: basicItems,
|
|
placeholder: 'Select an option',
|
|
disabled: true
|
|
}
|
|
};
|
|
|
|
export const WithShowIndex: Story = {
|
|
args: {
|
|
items: basicItems,
|
|
placeholder: 'Select an option',
|
|
showIndex: true
|
|
}
|
|
};
|
|
|
|
export const PartiallyDisabled: Story = {
|
|
args: {
|
|
items: itemsWithSomeDisabled,
|
|
placeholder: 'Select an available option'
|
|
}
|
|
};
|
|
|
|
export const WithLowCharacters: Story = {
|
|
args: {
|
|
items: [
|
|
{
|
|
value: 'gyj',
|
|
label: 'gyj - GYJ'
|
|
}
|
|
],
|
|
placeholder: 'Select an option'
|
|
}
|
|
};
|