mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
850 lines
19 KiB
TypeScript
850 lines
19 KiB
TypeScript
import { Code, Database, GitBranch, Terminal } from '@signozhq/icons';
|
|
import { ComboboxSimple } from '@signozhq/ui';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const meta: Meta<typeof ComboboxSimple> = {
|
|
title: 'Composed Components/Combobox',
|
|
component: ComboboxSimple,
|
|
argTypes: {
|
|
testId: {
|
|
control: 'text',
|
|
description: 'Test ID for the combobox.',
|
|
table: { category: 'Testing', type: { summary: 'string' } },
|
|
},
|
|
id: {
|
|
control: 'text',
|
|
description: 'A unique identifier for the combobox.',
|
|
table: { category: 'Accessibility', type: { summary: 'string' } },
|
|
},
|
|
className: {
|
|
control: 'text',
|
|
description: 'Additional CSS classes for custom styling.',
|
|
table: { category: 'Styling', type: { summary: 'string' } },
|
|
},
|
|
items: {
|
|
control: 'object',
|
|
description:
|
|
'List of items to display (flat). Ignored when groups is provided. Items with `insertValue` behave as hints.',
|
|
table: { category: 'Content', type: { summary: 'ComboboxSimpleItem[]' } },
|
|
},
|
|
groups: {
|
|
control: false,
|
|
description:
|
|
'Grouped items with optional headings. When provided, items is ignored. Items with `insertValue` behave as hints.',
|
|
table: { category: 'Content', type: { summary: 'ComboboxSimpleGroup[]' } },
|
|
},
|
|
placeholder: {
|
|
control: 'text',
|
|
description: 'Placeholder text when no value is selected and in the search input.',
|
|
table: { category: 'Content', type: { summary: 'string' } },
|
|
},
|
|
emptyPlaceholder: {
|
|
control: 'text',
|
|
description: 'Text shown when there are no results (e.g. after filtering).',
|
|
table: { category: 'Content', type: { summary: 'string' } },
|
|
},
|
|
value: {
|
|
control: 'text',
|
|
description: 'Controlled selected value. Array when `multiple` is true.',
|
|
table: { category: 'State', type: { summary: 'string | string[]' } },
|
|
},
|
|
defaultValue: {
|
|
control: 'text',
|
|
description: 'Initial value when uncontrolled. Array when `multiple` is true.',
|
|
table: { category: 'State', type: { summary: 'string | string[]' } },
|
|
},
|
|
onChange: {
|
|
control: false,
|
|
description: 'Callback when selection changes.',
|
|
table: { category: 'Events', type: { summary: '(value: string | string[]) => void' } },
|
|
},
|
|
multiple: {
|
|
control: 'boolean',
|
|
description: 'Enable multi-select mode. Values shown as removable pills.',
|
|
table: {
|
|
category: 'Behavior',
|
|
type: { summary: 'boolean' },
|
|
defaultValue: { summary: 'false' },
|
|
},
|
|
},
|
|
allowCreate: {
|
|
control: 'boolean',
|
|
description:
|
|
'Allow creating new items by typing and pressing Enter. Pass a function to customize the create option text.',
|
|
table: {
|
|
category: 'Behavior',
|
|
type: { summary: 'boolean | ((inputValue: string) => ReactNode)' },
|
|
defaultValue: { summary: 'false' },
|
|
},
|
|
},
|
|
maxDisplayedPills: {
|
|
control: 'number',
|
|
description:
|
|
'Maximum number of pills to display in multi-select mode. Overflow shown as "+N".',
|
|
table: { category: 'Display', type: { summary: 'number' } },
|
|
},
|
|
},
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
},
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ComboboxSimple>;
|
|
|
|
const defaultItems = [
|
|
{ value: 'react', label: 'React' },
|
|
{ value: 'vue', label: 'Vue' },
|
|
{ value: 'angular', label: 'Angular' },
|
|
{ value: 'svelte', label: 'Svelte' },
|
|
];
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select a framework...',
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const Controlled: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select a framework...',
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const WithDefaultValue: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select a framework...',
|
|
defaultValue: 'react',
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
const groups = [
|
|
{
|
|
heading: 'Frameworks',
|
|
items: [
|
|
{ value: 'react', label: 'React' },
|
|
{ value: 'vue', label: 'Vue' },
|
|
{ value: 'angular', label: 'Angular' },
|
|
{ value: 'svelte', label: 'Svelte' },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Languages',
|
|
items: [
|
|
{ value: 'javascript', label: 'JavaScript' },
|
|
{ value: 'typescript', label: 'TypeScript' },
|
|
{ value: 'python', label: 'Python' },
|
|
{ value: 'go', label: 'Go' },
|
|
{ value: 'rust', label: 'Rust' },
|
|
],
|
|
},
|
|
];
|
|
|
|
export const WithGroups: Story = {
|
|
args: {
|
|
groups,
|
|
placeholder: 'Select a technology...',
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
const itemsWithIcons = [
|
|
{
|
|
value: 'react',
|
|
label: (
|
|
<>
|
|
<Code style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
React
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'nodejs',
|
|
label: (
|
|
<>
|
|
<Terminal style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
Node.js
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'postgres',
|
|
label: (
|
|
<>
|
|
<Database style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
PostgreSQL
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'git',
|
|
label: (
|
|
<>
|
|
<GitBranch style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
Git
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
|
|
export const WithIcons: Story = {
|
|
args: {
|
|
items: itemsWithIcons,
|
|
placeholder: 'Select a tool...',
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const WithGroupsAndIcons: Story = {
|
|
args: {
|
|
groups: [
|
|
{
|
|
heading: 'Frameworks',
|
|
items: [
|
|
{
|
|
value: 'react',
|
|
label: (
|
|
<>
|
|
<Code style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
React
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'vue',
|
|
label: (
|
|
<>
|
|
<Code style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
Vue
|
|
</>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
heading: 'Databases',
|
|
items: [
|
|
{
|
|
value: 'postgres',
|
|
label: (
|
|
<>
|
|
<Database style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
PostgreSQL
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
value: 'redis',
|
|
label: (
|
|
<>
|
|
<Database style={{ marginRight: 8, height: 16, width: 16 }} />
|
|
Redis
|
|
</>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
placeholder: 'Select a technology...',
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const MultiSelect: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select frameworks...',
|
|
multiple: true,
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>([]);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const MultiSelectWithDefaultValues: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select frameworks...',
|
|
multiple: true,
|
|
defaultValue: ['react', 'vue'],
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const MultiSelectWithMaxPills: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select frameworks...',
|
|
multiple: true,
|
|
defaultValue: ['react', 'vue', 'angular', 'svelte'],
|
|
maxDisplayedPills: 2,
|
|
},
|
|
render: (args) => (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const AllowCreate: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select or create tags...',
|
|
multiple: true,
|
|
allowCreate: true,
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>([]);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Tags: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Type to filter, then click "Create" option to add new tags
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const AllowCreateWithCustomRender: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select or create tags...',
|
|
multiple: true,
|
|
allowCreate: (inputValue: string) => (
|
|
<span>
|
|
Add <strong>"{inputValue}"</strong> as new tag
|
|
</span>
|
|
),
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>([]);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Tags: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const TagsMode: Story = {
|
|
args: {
|
|
items: [],
|
|
placeholder: 'Type to add tags...',
|
|
multiple: true,
|
|
allowCreate: true,
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>(['initial-tag']);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Tags: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Free-form tag input - no predefined options
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const AllowCreateSingle: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select or create...',
|
|
allowCreate: true,
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const AllowCreateSingleCustomText: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
placeholder: 'Select or create...',
|
|
allowCreate: (inputValue: string) => (
|
|
<span>
|
|
Add <strong>"{inputValue}"</strong> as new option
|
|
</span>
|
|
),
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const WithHints: Story = {
|
|
args: {
|
|
groups: [
|
|
{
|
|
heading: 'Suggestions',
|
|
items: [
|
|
{ value: 'hint:status', label: 'status:', insertValue: 'status:' },
|
|
{ value: 'hint:priority', label: 'priority:', insertValue: 'priority:' },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Status',
|
|
items: [
|
|
{ value: 'status:active', label: 'Status: Active' },
|
|
{ value: 'status:pending', label: 'Status: Pending' },
|
|
{ value: 'status:closed', label: 'Status: Closed' },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Priority',
|
|
items: [
|
|
{ value: 'priority:high', label: 'Priority: High' },
|
|
{ value: 'priority:medium', label: 'Priority: Medium' },
|
|
{ value: 'priority:low', label: 'Priority: Low' },
|
|
],
|
|
},
|
|
],
|
|
placeholder: 'Filter by...',
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const WithHintsAndCreate: Story = {
|
|
args: {
|
|
groups: [
|
|
{
|
|
heading: 'Suggestions',
|
|
items: [{ value: 'hint:tag', label: 'tag:', insertValue: 'tag:' }],
|
|
},
|
|
{
|
|
heading: 'Tags',
|
|
items: [
|
|
{ value: 'tag:bug', label: 'tag:bug' },
|
|
{ value: 'tag:feature', label: 'tag:feature' },
|
|
{ value: 'tag:docs', label: 'tag:docs' },
|
|
],
|
|
},
|
|
],
|
|
placeholder: 'Add tag...',
|
|
allowCreate: true,
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Try typing "tag:" to see filtered options, or create a new tag like "tag:mynewtag"
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const MultiSelectWithHints: Story = {
|
|
args: {
|
|
groups: [
|
|
{
|
|
heading: 'Suggestions',
|
|
items: [
|
|
{ value: 'hint:status', label: 'status:', insertValue: 'status:' },
|
|
{ value: 'hint:priority', label: 'priority:', insertValue: 'priority:' },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Status',
|
|
items: [
|
|
{ value: 'status:active', label: 'Status: Active' },
|
|
{ value: 'status:pending', label: 'Status: Pending' },
|
|
{ value: 'status:closed', label: 'Status: Closed' },
|
|
],
|
|
},
|
|
{
|
|
heading: 'Priority',
|
|
items: [
|
|
{ value: 'priority:high', label: 'Priority: High' },
|
|
{ value: 'priority:medium', label: 'Priority: Medium' },
|
|
{ value: 'priority:low', label: 'Priority: Low' },
|
|
],
|
|
},
|
|
],
|
|
placeholder: 'Add filters...',
|
|
multiple: true,
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>([]);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Filters: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const MultiSelectWithHintsAndCreate: Story = {
|
|
args: {
|
|
groups: [
|
|
{
|
|
heading: 'Suggestions',
|
|
items: [{ value: 'hint:tag', label: 'tag:', insertValue: 'tag:' }],
|
|
},
|
|
{
|
|
heading: 'Tags',
|
|
items: [
|
|
{ value: 'tag:bug', label: 'tag:bug' },
|
|
{ value: 'tag:feature', label: 'tag:feature' },
|
|
{ value: 'tag:docs', label: 'tag:docs' },
|
|
],
|
|
},
|
|
],
|
|
placeholder: 'Add tags...',
|
|
multiple: true,
|
|
allowCreate: true,
|
|
},
|
|
render: (args) => {
|
|
const [values, setValues] = useState<string[]>([]);
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={values} onChange={(v) => setValues(v as string[])} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Tags: {values.length > 0 ? values.join(', ') : 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Type "tag:" to filter, or create custom tags like "tag:mynewtag"
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const Loading: Story = {
|
|
render: () => (
|
|
<div className="stack-32" style={{ padding: 32, width: '100%', maxWidth: 672 }}>
|
|
<div>
|
|
<h3 style={{ fontSize: 14, lineHeight: 1.42857, fontWeight: 500, marginBottom: 8 }}>
|
|
Infinite Loading
|
|
</h3>
|
|
<ComboboxSimple
|
|
items={[]}
|
|
placeholder="Select a framework..."
|
|
loading={true}
|
|
loadingPlaceholder="Fetching options..."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 style={{ fontSize: 14, lineHeight: 1.42857, fontWeight: 500, marginBottom: 8 }}>
|
|
Loading with Delay (5s)
|
|
</h3>
|
|
<ComboboxLoadingWithDelay />
|
|
</div>
|
|
</div>
|
|
),
|
|
};
|
|
|
|
function ComboboxLoadingWithDelay() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [items, setItems] = useState<typeof defaultItems>([]);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setItems(defaultItems);
|
|
setIsLoading(false);
|
|
}, 5000);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<ComboboxSimple
|
|
items={items}
|
|
placeholder="Select a framework..."
|
|
loading={isLoading}
|
|
loadingPlaceholder="Loading options..."
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const WithKeywords: Story = {
|
|
args: {
|
|
items: [
|
|
{ value: '15', label: '15 minutes', keywords: ['quarter hour', '15m', '900 seconds'] },
|
|
{ value: '30', label: '30 minutes', keywords: ['half hour', '30m', '1800 seconds'] },
|
|
{ value: '60', label: '1 hour', keywords: ['60 minutes', '1h', '3600 seconds'] },
|
|
{ value: '1440', label: '1 day', keywords: ['24 hours', '1d', 'daily'] },
|
|
],
|
|
placeholder: 'Select duration...',
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Try searching: "minute", "hour", "quarter", "half", "daily"
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const WithStringLabelsFilter: Story = {
|
|
args: {
|
|
items: [
|
|
{ value: 'us-east-1', label: 'US East (N. Virginia)' },
|
|
{ value: 'us-west-2', label: 'US West (Oregon)' },
|
|
{ value: 'eu-west-1', label: 'EU (Ireland)' },
|
|
{ value: 'ap-southeast-1', label: 'Asia Pacific (Singapore)' },
|
|
],
|
|
placeholder: 'Select region...',
|
|
},
|
|
render: (args) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
return (
|
|
<div style={{ padding: 32, width: '100%', maxWidth: 384 }}>
|
|
<ComboboxSimple {...args} value={value} onChange={(v) => setValue(v as string)} />
|
|
<p
|
|
style={{
|
|
marginTop: 16,
|
|
fontSize: 14,
|
|
lineHeight: 1.42857,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Selected: {value || 'none'}
|
|
</p>
|
|
<p
|
|
style={{
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
lineHeight: 1.33333,
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
Search by value ("us-east") or label ("Virginia", "Oregon", "Ireland")
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
};
|