From 671dc53a531d6eb476b15c3f59053683fbe235b0 Mon Sep 17 00:00:00 2001 From: Shinigami92 Date: Fri, 12 Jul 2024 13:12:52 +0200 Subject: [PATCH 1/3] Allow custom argType sorting --- code/addons/controls/src/ControlsPanel.tsx | 9 +++++++-- code/lib/blocks/src/blocks/ArgTypes.tsx | 4 ++-- code/lib/blocks/src/blocks/Controls.tsx | 4 ++-- code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx | 8 ++++---- code/lib/blocks/src/index.ts | 2 +- 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 80feaa374b51..0640421434a2 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -8,7 +8,12 @@ import { useParameter, useStorybookState, } from 'storybook/internal/manager-api'; -import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; +import { + PureArgsTable as ArgsTable, + type PresetColor, + type SortFn, + type SortType, +} from '@storybook/blocks'; import { styled } from 'storybook/internal/theming'; import type { ArgTypes } from 'storybook/internal/types'; @@ -31,7 +36,7 @@ const AddonWrapper = styled.div({ }); interface ControlsParameters { - sort?: SortType; + sort?: SortType | SortFn; expanded?: boolean; presetColors?: PresetColor[]; } diff --git a/code/lib/blocks/src/blocks/ArgTypes.tsx b/code/lib/blocks/src/blocks/ArgTypes.tsx index bfab62aa23df..65f2a71a2b67 100644 --- a/code/lib/blocks/src/blocks/ArgTypes.tsx +++ b/code/lib/blocks/src/blocks/ArgTypes.tsx @@ -7,7 +7,7 @@ import { filterArgTypes } from 'storybook/internal/preview-api'; import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import React from 'react'; -import type { SortType } from '../components'; +import type { SortFn, SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { useOf } from './useOf'; import { getComponentName } from './utils'; @@ -15,7 +15,7 @@ import { getComponentName } from './utils'; type ArgTypesParameters = { include?: PropDescriptor; exclude?: PropDescriptor; - sort?: SortType; + sort?: SortType | SortFn; }; type ArgTypesProps = ArgTypesParameters & { diff --git a/code/lib/blocks/src/blocks/Controls.tsx b/code/lib/blocks/src/blocks/Controls.tsx index a4684ded1ad4..3dc03828fd88 100644 --- a/code/lib/blocks/src/blocks/Controls.tsx +++ b/code/lib/blocks/src/blocks/Controls.tsx @@ -7,7 +7,7 @@ import { filterArgTypes } from 'storybook/internal/preview-api'; import type { PropDescriptor } from 'storybook/internal/preview-api'; import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; -import type { SortType } from '../components'; +import type { SortFn, SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { DocsContext } from './DocsContext'; import { useGlobals } from './useGlobals'; @@ -17,7 +17,7 @@ import { getComponentName } from './utils'; type ControlsParameters = { include?: PropDescriptor; exclude?: PropDescriptor; - sort?: SortType; + sort?: SortType | SortFn; }; type ControlsProps = ControlsParameters & { diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx index 0bac6d042a30..df73e1045b1e 100644 --- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -180,7 +180,7 @@ export enum ArgsTableError { } export type SortType = 'alpha' | 'requiredFirst' | 'none'; -type SortFn = (a: ArgType, b: ArgType) => number; +export type SortFn = (a: ArgType, b: ArgType) => number; const sortFns: Record = { alpha: (a: ArgType, b: ArgType) => a.name.localeCompare(b.name), @@ -197,7 +197,7 @@ export interface ArgsTableOptionProps { inAddonPanel?: boolean; initialExpandedArgs?: boolean; isLoading?: boolean; - sort?: SortType; + sort?: SortType | SortFn; } interface ArgsTableDataProps { rows: ArgTypes; @@ -228,7 +228,7 @@ type Sections = { sections: Record; }; -const groupRows = (rows: ArgType, sort: SortType) => { +const groupRows = (rows: ArgType, sort: SortType | SortFn) => { const sections: Sections = { ungrouped: [], ungroupedSubsections: {}, sections: {} }; if (!rows) return sections; @@ -254,7 +254,7 @@ const groupRows = (rows: ArgType, sort: SortType) => { }); // apply sort - const sortFn = sortFns[sort]; + const sortFn = typeof sort === 'function' ? sort : sortFns[sort]; const sortSubsection = (record: Record) => { if (!sortFn) return record; diff --git a/code/lib/blocks/src/index.ts b/code/lib/blocks/src/index.ts index f9cbbfe66f18..9f18c06466fc 100644 --- a/code/lib/blocks/src/index.ts +++ b/code/lib/blocks/src/index.ts @@ -1,7 +1,7 @@ // FIXME: sort this out, maybe with package.json exports map // https://medium.com/swlh/npm-new-package-json-exports-field-1a7d1f489ccf export { ArgsTable as PureArgsTable } from './components'; -export type { SortType } from './components'; +export type { SortFn, SortType } from './components'; export * from './blocks'; export * from './controls'; From a273169c7805a4451b90d931f42f105969a7aa3d Mon Sep 17 00:00:00 2001 From: Shinigami92 Date: Fri, 12 Jul 2024 13:40:14 +0200 Subject: [PATCH 2/3] docs --- docs/api/doc-blocks/doc-block-argtypes.mdx | 3 ++- docs/api/doc-blocks/doc-block-controls.mdx | 3 ++- docs/essentials/controls.mdx | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/api/doc-blocks/doc-block-argtypes.mdx b/docs/api/doc-blocks/doc-block-argtypes.mdx index f7009dd1ee32..28190d942603 100644 --- a/docs/api/doc-blocks/doc-block-argtypes.mdx +++ b/docs/api/doc-blocks/doc-block-argtypes.mdx @@ -86,7 +86,7 @@ Specifies which story to get the arg types from. If a CSF file exports is provid ### `sort` -Type: `'none' | 'alpha' | 'requiredFirst'` +Type: `'none' | 'alpha' | 'requiredFirst' | SortFn` Default: `parameters.docs.argTypes.sort` or `'none'` @@ -95,3 +95,4 @@ Specifies how the arg types are sorted. * **none**: Unsorted, displayed in the same order the arg types are processed in * **alpha**: Sorted alphabetically, by the arg type's name * **requiredFirst**: Same as `alpha`, with any required arg types displayed first +* **SortFn**: A callback to define your own sorting logic diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index 5c11708a0019..c0b1fa359514 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -100,7 +100,7 @@ Specifies which story to get the controls from. If a CSF file exports is provide ### `sort` -Type: `'none' | 'alpha' | 'requiredFirst'` +Type: `'none' | 'alpha' | 'requiredFirst' | SortFn` Default: `parameters.docs.controls.sort` or `'none'` @@ -109,3 +109,4 @@ Specifies how the controls are sorted. * **none**: Unsorted, displayed in the same order the controls are processed in * **alpha**: Sorted alphabetically, by the arg type's name * **requiredFirst**: Same as `alpha`, with any required controls displayed first +* **SortFn**: A callback to define your own sorting logic diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx index 3c249c058e04..a2b9b92cccff 100644 --- a/docs/essentials/controls.mdx +++ b/docs/essentials/controls.mdx @@ -475,7 +475,7 @@ Specify preset color swatches for the color picker control. The color value may #### `sort` -Type: `'none' | 'alpha' | 'requiredFirst'` +Type: `'none' | 'alpha' | 'requiredFirst' | SortFn` Default: `'none'` @@ -484,3 +484,4 @@ Specifies how the controls are sorted. * **none**: Unsorted, displayed in the same order the arg types are processed in * **alpha**: Sorted alphabetically, by the arg type's name * **requiredFirst**: Same as `alpha`, with any required arg types displayed first +* **SortFn**: A callback to define your own sorting logic From 11f76e4d3ddc5dd40044b6469287ed0e05a9d010 Mon Sep 17 00:00:00 2001 From: Shinigami92 Date: Fri, 12 Jul 2024 13:40:21 +0200 Subject: [PATCH 3/3] stories --- .../controls/template/stories/sorting.stories.ts | 11 +++++++++++ .../src/examples/ArgTypesParameters.stories.tsx | 14 ++++++++++++++ .../src/examples/ControlsParameters.stories.tsx | 14 ++++++++++++++ 3 files changed, 39 insertions(+) diff --git a/code/addons/controls/template/stories/sorting.stories.ts b/code/addons/controls/template/stories/sorting.stories.ts index dc6a66acdc31..f294e1170811 100644 --- a/code/addons/controls/template/stories/sorting.stories.ts +++ b/code/addons/controls/template/stories/sorting.stories.ts @@ -31,3 +31,14 @@ export const None = { parameters: { controls: { sort: 'none' } } }; export const Alpha = { parameters: { controls: { sort: 'alpha' } } }; export const RequiredFirst = { parameters: { controls: { sort: 'requiredFirst' } } }; + +export const CustomSort = { + parameters: { + controls: { + sort: (a, b) => + a.table?.category?.localeCompare(b.table?.category) || + (a.type?.required === b.type?.required ? 0 : a.type?.required ? 1 : -1) || + 0, + }, + }, +}; diff --git a/code/lib/blocks/src/examples/ArgTypesParameters.stories.tsx b/code/lib/blocks/src/examples/ArgTypesParameters.stories.tsx index e79c0c1bf0e3..50a8f1bf6579 100644 --- a/code/lib/blocks/src/examples/ArgTypesParameters.stories.tsx +++ b/code/lib/blocks/src/examples/ArgTypesParameters.stories.tsx @@ -49,6 +49,20 @@ export const Sort: Story = { parameters: { docs: { argTypes: { sort: 'alpha' } } }, }; +export const SortCustom: Story = { + ...NoParameters, + parameters: { + docs: { + argTypes: { + sort: (a, b) => + a.table?.category?.localeCompare(b.table?.category) || + (a.type?.required === b.type?.required ? 0 : a.type?.required ? 1 : -1) || + 0, + }, + }, + }, +}; + export const Categories: Story = { ...NoParameters, argTypes: { diff --git a/code/lib/blocks/src/examples/ControlsParameters.stories.tsx b/code/lib/blocks/src/examples/ControlsParameters.stories.tsx index 402e49c601f3..3332b4e8bf74 100644 --- a/code/lib/blocks/src/examples/ControlsParameters.stories.tsx +++ b/code/lib/blocks/src/examples/ControlsParameters.stories.tsx @@ -49,6 +49,20 @@ export const Sort: Story = { parameters: { docs: { controls: { sort: 'alpha' } } }, }; +export const SortCustom: Story = { + ...NoParameters, + parameters: { + docs: { + controls: { + sort: (a, b) => + a.table?.category?.localeCompare(b.table?.category) || + (a.type?.required === b.type?.required ? 0 : a.type?.required ? 1 : -1) || + 0, + }, + }, + }, +}; + export const Categories: Story = { ...NoParameters, argTypes: {