Skip to content

Commit

Permalink
fix: Select's storybook (#27785)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michael-s-molina
michael-s-molina committed Mar 29, 2024
1 parent 356b0d8 commit 5b1d6b2
Showing 1 changed file with 132 additions and 137 deletions.
269 changes: 132 additions & 137 deletions superset-frontend/src/components/Select/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
* under the License.
*/
import React from 'react';
import { StoryObj } from '@storybook/react';
import ControlHeader from 'src/explore/components/ControlHeader';
import { SelectOptionsType, SelectProps } from './types';

import Select from './Select';

export default {
Expand Down Expand Up @@ -74,87 +74,6 @@ const selectPositions = [
},
];

const ARG_TYPES = {
options: {
defaultValue: options,
description: `It defines the options of the Select.
The options can be static, an array of options.
The options can also be async, a promise that returns an array of options.
`,
},
ariaLabel: {
description: `It adds the aria-label tag for accessibility standards.
Must be plain English and localized.
`,
},
labelInValue: {
defaultValue: true,
table: {
disable: true,
},
},
name: {
table: {
disable: true,
},
},
notFoundContent: {
table: {
disable: true,
},
},
mappedMode: {
table: {
disable: true,
},
},
mode: {
description: `It defines whether the Select should allow for
the selection of multiple options or single. Single by default.
`,
defaultValue: 'single',
control: {
type: 'inline-radio',
options: ['single', 'multiple'],
},
},
allowNewOptions: {
description: `It enables the user to create new options.
Can be used with standard or async select types.
Can be used with any mode, single or multiple. False by default.
`,
},
invertSelection: {
description: `It shows a stop-outlined icon at the far right of a selected
option instead of the default checkmark.
Useful to better indicate to the user that by clicking on a selected
option it will be de-selected. False by default.
`,
},
optionFilterProps: {
description: `It allows to define which properties of the option object
should be looked for when searching.
By default label and value.
`,
},
oneLine: {
defaultValue: false,
description: `Sets maxTagCount to 1. The overflow tag is always displayed in
the same line, line wrapping is disabled.
When the dropdown is open, sets maxTagCount to 0,
displays only the overflow tag.
Requires '"mode=multiple"'.
`,
},
maxTagCount: {
defaultValue: 4,
description: `Sets maxTagCount attribute. The overflow tag is displayed in
place of the remaining items.
Requires '"mode=multiple"'.
`,
},
};

const mountHeader = (type: String) => {
let header;
if (type === 'text') {
Expand Down Expand Up @@ -186,67 +105,143 @@ const generateOptions = (opts: SelectOptionsType, count: number) => {
return generated.slice(0, count);
};

export const InteractiveSelect = ({
header,
options,
optionsCount,
...args
}: SelectProps & { header: string; optionsCount: number }) => (
<div
style={{
width: DEFAULT_WIDTH,
}}
>
<Select
{...args}
options={
Array.isArray(options)
? generateOptions(options, optionsCount)
: options
}
header={mountHeader(header)}
/>
</div>
);

InteractiveSelect.args = {
autoFocus: true,
allowNewOptions: false,
allowClear: false,
autoClearSearchValue: false,
allowSelectAll: true,
showSearch: true,
disabled: false,
invertSelection: false,
placeholder: 'Select ...',
optionFilterProps: ['value', 'label', 'custom'],
oneLine: false,
maxTagCount: 4,
};

InteractiveSelect.argTypes = {
...ARG_TYPES,
optionsCount: {
defaultValue: options.length,
control: {
type: 'number',
},
},
header: {
defaultValue: 'none',
description: `It adds a header on top of the Select. Can be any ReactNode.`,
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
export const InteractiveSelect: StoryObj = {
render: ({
header,
options,
optionsCount,
...args
}: SelectProps & { header: string; optionsCount: number }) => (
<div
style={{
width: DEFAULT_WIDTH,
}}
>
<Select
{...args}
options={
Array.isArray(options)
? generateOptions(options, optionsCount)
: options
}
header={mountHeader(header)}
mode="multiple"
/>
</div>
),
args: {
autoFocus: true,
allowNewOptions: false,
allowClear: false,
autoClearSearchValue: false,
allowSelectAll: true,
disabled: false,
header: 'none',
invertSelection: false,
labelInValue: true,
maxTagCount: 4,
mode: 'single',
oneLine: false,
options,
optionsCount: options.length,
optionFilterProps: ['value', 'label', 'custom'],
placeholder: 'Select ...',
showSearch: true,
},
pageSize: {
description: `It defines how many results should be included in the query response.
argTypes: {
options: {
description: `It defines the options of the Select.
The options can be static, an array of options.
The options can also be async, a promise that returns an array of options.
`,
},
ariaLabel: {
description: `It adds the aria-label tag for accessibility standards.
Must be plain English and localized.
`,
},
labelInValue: {
table: {
disable: true,
},
},
name: {
table: {
disable: true,
},
},
notFoundContent: {
table: {
disable: true,
},
},
mappedMode: {
table: {
disable: true,
},
},
mode: {
description: `It defines whether the Select should allow for
the selection of multiple options or single. Single by default.
`,
control: {
type: 'inline-radio',
options: ['single', 'multiple'],
},
},
allowNewOptions: {
description: `It enables the user to create new options.
Can be used with standard or async select types.
Can be used with any mode, single or multiple. False by default.
`,
},
invertSelection: {
description: `It shows a stop-outlined icon at the far right of a selected
option instead of the default checkmark.
Useful to better indicate to the user that by clicking on a selected
option it will be de-selected. False by default.
`,
},
optionFilterProps: {
description: `It allows to define which properties of the option object
should be looked for when searching.
By default label and value.
`,
},
oneLine: {
description: `Sets maxTagCount to 1. The overflow tag is always displayed in
the same line, line wrapping is disabled.
When the dropdown is open, sets maxTagCount to 0,
displays only the overflow tag.
Requires '"mode=multiple"'.
`,
},
maxTagCount: {
description: `Sets maxTagCount attribute. The overflow tag is displayed in
place of the remaining items.
Requires '"mode=multiple"'.
`,
},
optionsCount: {
control: {
type: 'number',
},
},
header: {
description: `It adds a header on top of the Select. Can be any ReactNode.`,
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
},
pageSize: {
description: `It defines how many results should be included in the query response.
Works in async mode only (See the options property).
`,
},
fetchOnlyOnSearch: {
description: `It fires a request against the server only after searching.
},
fetchOnlyOnSearch: {
description: `It fires a request against the server only after searching.
Works in async mode only (See the options property).
Undefined by default.
`,
},
},
};

Expand Down

0 comments on commit 5b1d6b2

Please sign in to comment.