@repobuddy/storybook 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright © 2024 Homa Wong (unional) (homawong@gmail.com)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/esm/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './parameters/define_actions_param.ts';
2
+ export * from './parameters/define_layout_param.ts';
3
+ export * from './parameters/define_parameters.ts';
4
+ export * from './parameters/define_story_sort.ts';
5
+ export * from './parameters/define_test_param.ts';
package/esm/index.js ADDED
@@ -0,0 +1,5 @@
1
+ export * from "./parameters/define_actions_param.js";
2
+ export * from "./parameters/define_layout_param.js";
3
+ export * from "./parameters/define_parameters.js";
4
+ export * from "./parameters/define_story_sort.js";
5
+ export * from "./parameters/define_test_param.js";
@@ -0,0 +1,2 @@
1
+ import { type TagBadgeParameters } from 'storybook-addon-tag-badges';
2
+ export declare const tagBadges: TagBadgeParameters;
@@ -0,0 +1,77 @@
1
+ import { defaultConfig } from 'storybook-addon-tag-badges';
2
+ const [, , , , , , versionBadge] = defaultConfig;
3
+ export const tagBadges = [
4
+ {
5
+ tags: 'new',
6
+ badge: {
7
+ text: '🆕',
8
+ bgColor: 'transparent',
9
+ tooltip: 'New'
10
+ }
11
+ },
12
+ {
13
+ tags: 'beta',
14
+ badge: {
15
+ text: '🅱️',
16
+ bgColor: 'transparent',
17
+ tooltip: 'Beta'
18
+ }
19
+ },
20
+ {
21
+ tags: 'deprecated',
22
+ badge: {
23
+ text: '🪦',
24
+ bgColor: 'transparent',
25
+ tooltip: 'Deprecated'
26
+ }
27
+ },
28
+ {
29
+ tags: 'outdated',
30
+ badge: {
31
+ text: '⚠️',
32
+ bgColor: 'transparent',
33
+ tooltip: 'Outdated'
34
+ }
35
+ },
36
+ {
37
+ tags: 'danger',
38
+ badge: {
39
+ text: '🚨',
40
+ bgColor: 'transparent',
41
+ tooltip: 'Dangerous'
42
+ }
43
+ },
44
+ {
45
+ tags: 'todo',
46
+ badge: {
47
+ text: '📋',
48
+ bgColor: 'transparent',
49
+ tooltip: 'Todo'
50
+ }
51
+ },
52
+ {
53
+ tags: 'code-only',
54
+ badge: {
55
+ text: '📝',
56
+ bgColor: 'transparent',
57
+ tooltip: 'Code Only'
58
+ }
59
+ },
60
+ {
61
+ tags: 'unit',
62
+ badge: {
63
+ text: '🧪',
64
+ bgColor: 'transparent',
65
+ tooltip: 'Unit Test'
66
+ }
67
+ },
68
+ {
69
+ tags: 'integration',
70
+ badge: {
71
+ text: '🧱',
72
+ bgColor: 'transparent',
73
+ tooltip: 'Integration Test'
74
+ }
75
+ },
76
+ versionBadge
77
+ ];
@@ -0,0 +1 @@
1
+ export * from './manager/tag_badges.ts';
package/esm/manager.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./manager/tag_badges.js";
@@ -0,0 +1,22 @@
1
+ export interface ActionsParam {
2
+ actions: {
3
+ argTypesRegex?: string | undefined;
4
+ disable?: boolean | undefined;
5
+ handles?: string[] | undefined;
6
+ };
7
+ }
8
+ /**
9
+ * Defines actions parameters for Storybook stories.
10
+ *
11
+ * @see https://storybook.js.org/docs/essentials/actions#parameters
12
+ *
13
+ * @param actions - Configuration for actions parameters
14
+ * @returns An object containing the actions parameter configuration
15
+ */
16
+ export declare function defineActionsParam(actions: ActionsParam['actions']): {
17
+ actions: {
18
+ argTypesRegex?: string | undefined;
19
+ disable?: boolean | undefined;
20
+ handles?: string[] | undefined;
21
+ };
22
+ };
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Defines actions parameters for Storybook stories.
3
+ *
4
+ * @see https://storybook.js.org/docs/essentials/actions#parameters
5
+ *
6
+ * @param actions - Configuration for actions parameters
7
+ * @returns An object containing the actions parameter configuration
8
+ */
9
+ export function defineActionsParam(actions) {
10
+ return { actions };
11
+ }
@@ -0,0 +1,22 @@
1
+ export interface LayoutParam {
2
+ layout: 'padded' | 'fullscreen' | 'centered';
3
+ }
4
+ /**
5
+ * Helper function to define the layout parameter for a story
6
+ *
7
+ * @see https://storybook.js.org/docs/api/parameters#layout
8
+ *
9
+ * @param layout - The layout type to use ('padded', 'fullscreen', or 'centered')
10
+ * @returns An object containing the layout parameter
11
+ * @example
12
+ * ```ts
13
+ * export const MyStory = {
14
+ * parameters: {
15
+ * ...defineLayoutParam('centered')
16
+ * }
17
+ * }
18
+ * ```
19
+ */
20
+ export declare const defineLayoutParam: (layout: LayoutParam["layout"]) => {
21
+ layout: "padded" | "fullscreen" | "centered";
22
+ };
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Helper function to define the layout parameter for a story
3
+ *
4
+ * @see https://storybook.js.org/docs/api/parameters#layout
5
+ *
6
+ * @param layout - The layout type to use ('padded', 'fullscreen', or 'centered')
7
+ * @returns An object containing the layout parameter
8
+ * @example
9
+ * ```ts
10
+ * export const MyStory = {
11
+ * parameters: {
12
+ * ...defineLayoutParam('centered')
13
+ * }
14
+ * }
15
+ * ```
16
+ */
17
+ export const defineLayoutParam = (layout) => ({
18
+ layout
19
+ });
@@ -0,0 +1,6 @@
1
+ import type { LayoutParam } from './define_layout_param.ts';
2
+ import type { StorySortParam } from './define_story_sort.ts';
3
+ import type { TestParam } from './define_test_param.ts';
4
+ export interface StorybookBuiltInParams extends Partial<LayoutParam>, Partial<StorySortParam>, Partial<TestParam> {
5
+ }
6
+ export declare function defineParameters<P extends Record<string, any>>(parameters: P & StorybookBuiltInParams): P & StorybookBuiltInParams;
@@ -0,0 +1,3 @@
1
+ export function defineParameters(parameters) {
2
+ return parameters;
3
+ }
@@ -0,0 +1,54 @@
1
+ type StorySortConfig = {
2
+ includeNames?: boolean;
3
+ locales?: string;
4
+ method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
5
+ order?: string[];
6
+ };
7
+ type Story = {
8
+ id: string;
9
+ importPath: string;
10
+ name: string;
11
+ title: string;
12
+ };
13
+ type StorySortFn = (a: Story, b: Story) => number;
14
+ /**
15
+ * Interface for story sorting parameters in Storybook.
16
+ * Used to define how stories should be sorted in the navigation sidebar.
17
+ */
18
+ export interface StorySortParam {
19
+ /**
20
+ * Configuration for story sorting. Can be either:
21
+ * - A StorySortConfig object specifying sort method and options
22
+ * - A custom sorting function that takes two stories and returns their sort order
23
+ */
24
+ storySort: StorySortConfig | StorySortFn;
25
+ }
26
+ /**
27
+ * Defines story sorting parameters for Storybook navigation.
28
+ *
29
+ * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
30
+ *
31
+ * @param storySort - Configuration for how stories should be sorted. Can be either:
32
+ * - A configuration object specifying sort method and options
33
+ * - A custom sorting function that takes two stories and returns their sort order
34
+ * @returns An object containing the story sort configuration
35
+ *
36
+ * @example
37
+ * // Alphabetical sorting
38
+ * defineStorySort({ method: 'alphabetical' })
39
+ *
40
+ * @example
41
+ * // Custom order
42
+ * defineStorySort({
43
+ * method: 'custom',
44
+ * order: ['Introduction', 'Components', '*']
45
+ * })
46
+ *
47
+ * @example
48
+ * // Custom sort function
49
+ * defineStorySort((a, b) => a.title.localeCompare(b.title))
50
+ */
51
+ export declare function defineStorySort(storySort: StorySortParam['storySort']): {
52
+ storySort: StorySortConfig | StorySortFn;
53
+ };
54
+ export {};
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Defines story sorting parameters for Storybook navigation.
3
+ *
4
+ * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
5
+ *
6
+ * @param storySort - Configuration for how stories should be sorted. Can be either:
7
+ * - A configuration object specifying sort method and options
8
+ * - A custom sorting function that takes two stories and returns their sort order
9
+ * @returns An object containing the story sort configuration
10
+ *
11
+ * @example
12
+ * // Alphabetical sorting
13
+ * defineStorySort({ method: 'alphabetical' })
14
+ *
15
+ * @example
16
+ * // Custom order
17
+ * defineStorySort({
18
+ * method: 'custom',
19
+ * order: ['Introduction', 'Components', '*']
20
+ * })
21
+ *
22
+ * @example
23
+ * // Custom sort function
24
+ * defineStorySort((a, b) => a.title.localeCompare(b.title))
25
+ */
26
+ export function defineStorySort(storySort) {
27
+ return { storySort };
28
+ }
@@ -0,0 +1,32 @@
1
+ export interface TestParam {
2
+ test: {
3
+ clearMocks?: boolean | undefined;
4
+ mockReset?: boolean | undefined;
5
+ restoreMocks?: boolean | undefined;
6
+ dangerouslyIgnoreUnhandledErrors?: boolean | undefined;
7
+ };
8
+ }
9
+ /**
10
+ * Defines test parameters for Storybook stories.
11
+ *
12
+ * @see https://storybook.js.org/docs/api/parameters#test
13
+ *
14
+ * @param test - Configuration for test parameters
15
+ * @returns An object containing the test parameter configuration
16
+ *
17
+ * @example
18
+ * defineTestParam({
19
+ * clearMocks: true,
20
+ * mockReset: true,
21
+ * restoreMocks: true,
22
+ * dangerouslyIgnoreUnhandledErrors: true
23
+ * })
24
+ */
25
+ export declare function defineTestParam(test: TestParam['test']): {
26
+ test: {
27
+ clearMocks?: boolean | undefined;
28
+ mockReset?: boolean | undefined;
29
+ restoreMocks?: boolean | undefined;
30
+ dangerouslyIgnoreUnhandledErrors?: boolean | undefined;
31
+ };
32
+ };
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Defines test parameters for Storybook stories.
3
+ *
4
+ * @see https://storybook.js.org/docs/api/parameters#test
5
+ *
6
+ * @param test - Configuration for test parameters
7
+ * @returns An object containing the test parameter configuration
8
+ *
9
+ * @example
10
+ * defineTestParam({
11
+ * clearMocks: true,
12
+ * mockReset: true,
13
+ * restoreMocks: true,
14
+ * dangerouslyIgnoreUnhandledErrors: true
15
+ * })
16
+ */
17
+ export function defineTestParam(test) {
18
+ return { test };
19
+ }
@@ -0,0 +1 @@
1
+ export * from './it.ts';
@@ -0,0 +1 @@
1
+ export * from "./it.js";
@@ -0,0 +1,6 @@
1
+ import type { Args, Renderer, StoryAnnotations } from 'storybook/internal/csf';
2
+ export type ItObj<TRenderer extends Renderer, TArgs extends Args> = StoryAnnotations<TRenderer, TArgs>;
3
+ export declare function it<TRenderer extends Renderer, TArgs extends Args>(description: string, story: StoryAnnotations<TRenderer, TArgs>): StoryAnnotations<TRenderer, TArgs>;
4
+ export declare namespace it {
5
+ var skip: <TRenderer extends Renderer, TArgs extends Args>(description: string, story: StoryAnnotations<TRenderer, TArgs>) => StoryAnnotations<TRenderer, TArgs>;
6
+ }
@@ -0,0 +1,19 @@
1
+ export function it(description, story) {
2
+ const { play, ...rest } = story;
3
+ return {
4
+ ...rest,
5
+ async play(context) {
6
+ await context.step(description, async () => {
7
+ await play?.(context);
8
+ });
9
+ }
10
+ };
11
+ }
12
+ // does not work
13
+ it.skip = (description, story) => {
14
+ const { tags = [], ...rest } = story;
15
+ return it(description, {
16
+ tags: [...tags, '!test'],
17
+ ...rest
18
+ });
19
+ };
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@repobuddy/storybook",
3
+ "version": "0.1.0",
4
+ "description": "Storybook repo buddy",
5
+ "keywords": [
6
+ "storybook",
7
+ "testing",
8
+ "documentation"
9
+ ],
10
+ "license": "MIT",
11
+ "author": {
12
+ "name": "Homa Wong",
13
+ "email": "homawong@gmail.com",
14
+ "url": "https://github.com/unional"
15
+ },
16
+ "type": "module",
17
+ "exports": {
18
+ ".": {
19
+ "types": "./esm/index.d.ts",
20
+ "default": "./esm/index.js"
21
+ },
22
+ "./manager": {
23
+ "types": "./esm/manager.d.ts",
24
+ "default": "./esm/manager.js"
25
+ }
26
+ },
27
+ "files": [
28
+ "esm",
29
+ "src",
30
+ "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*"
31
+ ],
32
+ "devDependencies": {
33
+ "@storybook/addon-essentials": "^8.6.12",
34
+ "@storybook/addon-storysource": "^8.6.12",
35
+ "@storybook/blocks": "^8.6.12",
36
+ "@storybook/experimental-addon-test": "^8.6.12",
37
+ "@storybook/react": "^8.6.12",
38
+ "@storybook/react-vite": "^8.6.12",
39
+ "@storybook/test": "^8.6.12",
40
+ "@storybook/theming": "^8.6.12",
41
+ "@vitest/browser": "^3.1.2",
42
+ "@vitest/coverage-v8": "^3.1.2",
43
+ "react": "^19.1.0",
44
+ "react-dom": "^19.1.0",
45
+ "rimraf": "^6.0.1",
46
+ "storybook": "^8.6.12",
47
+ "storybook-addon-tag-badges": "^1.4.0",
48
+ "storybook-addon-vis": "^0.19.4",
49
+ "vitest": "^3.1.2"
50
+ },
51
+ "scripts": {
52
+ "build": "tsc",
53
+ "clean": "rimraf .turbo coverage esm storybook-static *.tsbuildinfo",
54
+ "coverage": "vitest run --coverage",
55
+ "sb": "storybook dev -p 6006",
56
+ "sb:build": "storybook build",
57
+ "test": "vitest run",
58
+ "w": "vitest"
59
+ }
60
+ }
package/readme.md ADDED
@@ -0,0 +1,74 @@
1
+ # @repobuddy/storybook
2
+
3
+ Your repo buddy for Storybook.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ pnpm add -D @repobuddy/storybook
9
+ ```
10
+
11
+ ## Features
12
+
13
+ ### Typed Parameters
14
+
15
+ Storybook supports some built-in parameters, but the `StoryObj` type does not include them.
16
+
17
+ [`@repobuddy/storybook`] adds these types as well as their corresponding define-functions so that you can use them in your stories.
18
+
19
+ For example:
20
+
21
+ ```ts
22
+ import { defineLayoutParam } from '@repobuddy/storybook'
23
+
24
+ export const MyStory: StoryObj = {
25
+ parameters: defineLayoutParam('fullscreen')
26
+ }
27
+ ```
28
+
29
+ We also have a `defineParameters` function that types the built-in parameters from Storybook,
30
+ and also allow you to specify additional parameter types.
31
+
32
+ ```ts
33
+ import { defineParameters, type ActionsParam } from '@repobuddy/storybook'
34
+
35
+ export const MyStory: StoryObj = {
36
+ parameters: defineParameters<ActionsParam>({
37
+ layout: 'fullscreen',
38
+ // this is typed
39
+ actions: {
40
+ disable: true
41
+ }
42
+ })
43
+ }
44
+ ```
45
+
46
+ ### Manager Customizations
47
+
48
+ #### Tag Badges
49
+
50
+ If you use [`storybook-addon-tag-badges`],
51
+ we provide a different set of badges that uses icons:
52
+
53
+ - 🆕 New components/features
54
+ - 🅱️ Beta status
55
+ - 🪦 Deprecated notices
56
+ - ⚠️ Outdated warnings
57
+ - 🚨 Dangerous
58
+ - 📋 To-do items
59
+ - 📝 Code-only stories
60
+ - 🧪 Unit tests
61
+ - 🧱 Integration tests
62
+ - Version indicators (unchanged)
63
+
64
+ To use them, add them to your `.storybook/manager.ts`:
65
+
66
+ ```ts
67
+ import { tagBadges } from '@repobuddy/storybook/manager'
68
+ import { addons } from '@storybook/manager-api'
69
+
70
+ addons.setConfig({ tagBadges })
71
+ ```
72
+
73
+ [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
74
+ [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './parameters/define_actions_param.ts'
2
+ export * from './parameters/define_layout_param.ts'
3
+ export * from './parameters/define_parameters.ts'
4
+ export * from './parameters/define_story_sort.ts'
5
+ export * from './parameters/define_test_param.ts'
@@ -0,0 +1,80 @@
1
+ import { type TagBadgeParameters, defaultConfig } from 'storybook-addon-tag-badges'
2
+
3
+ const [, , , , , , versionBadge] = defaultConfig
4
+
5
+ export const tagBadges: TagBadgeParameters = [
6
+ {
7
+ tags: 'new',
8
+ badge: {
9
+ text: '🆕',
10
+ bgColor: 'transparent',
11
+ tooltip: 'New'
12
+ }
13
+ },
14
+ {
15
+ tags: 'beta',
16
+ badge: {
17
+ text: '🅱️',
18
+ bgColor: 'transparent',
19
+ tooltip: 'Beta'
20
+ }
21
+ },
22
+ {
23
+ tags: 'deprecated',
24
+ badge: {
25
+ text: '🪦',
26
+ bgColor: 'transparent',
27
+ tooltip: 'Deprecated'
28
+ }
29
+ },
30
+ {
31
+ tags: 'outdated',
32
+ badge: {
33
+ text: '⚠️',
34
+ bgColor: 'transparent',
35
+ tooltip: 'Outdated'
36
+ }
37
+ },
38
+ {
39
+ tags: 'danger',
40
+ badge: {
41
+ text: '🚨',
42
+ bgColor: 'transparent',
43
+ tooltip: 'Dangerous'
44
+ }
45
+ },
46
+ {
47
+ tags: 'todo',
48
+ badge: {
49
+ text: '📋',
50
+ bgColor: 'transparent',
51
+ tooltip: 'Todo'
52
+ }
53
+ },
54
+ {
55
+ tags: 'code-only',
56
+ badge: {
57
+ text: '📝',
58
+ bgColor: 'transparent',
59
+ tooltip: 'Code Only'
60
+ }
61
+ },
62
+
63
+ {
64
+ tags: 'unit',
65
+ badge: {
66
+ text: '🧪',
67
+ bgColor: 'transparent',
68
+ tooltip: 'Unit Test'
69
+ }
70
+ },
71
+ {
72
+ tags: 'integration',
73
+ badge: {
74
+ text: '🧱',
75
+ bgColor: 'transparent',
76
+ tooltip: 'Integration Test'
77
+ }
78
+ },
79
+ versionBadge
80
+ ]
package/src/manager.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './manager/tag_badges.ts'
@@ -0,0 +1,19 @@
1
+ export interface ActionsParam {
2
+ actions: {
3
+ argTypesRegex?: string | undefined
4
+ disable?: boolean | undefined
5
+ handles?: string[] | undefined
6
+ }
7
+ }
8
+
9
+ /**
10
+ * Defines actions parameters for Storybook stories.
11
+ *
12
+ * @see https://storybook.js.org/docs/essentials/actions#parameters
13
+ *
14
+ * @param actions - Configuration for actions parameters
15
+ * @returns An object containing the actions parameter configuration
16
+ */
17
+ export function defineActionsParam(actions: ActionsParam['actions']) {
18
+ return { actions }
19
+ }
@@ -0,0 +1,23 @@
1
+ export interface LayoutParam {
2
+ layout: 'padded' | 'fullscreen' | 'centered'
3
+ }
4
+
5
+ /**
6
+ * Helper function to define the layout parameter for a story
7
+ *
8
+ * @see https://storybook.js.org/docs/api/parameters#layout
9
+ *
10
+ * @param layout - The layout type to use ('padded', 'fullscreen', or 'centered')
11
+ * @returns An object containing the layout parameter
12
+ * @example
13
+ * ```ts
14
+ * export const MyStory = {
15
+ * parameters: {
16
+ * ...defineLayoutParam('centered')
17
+ * }
18
+ * }
19
+ * ```
20
+ */
21
+ export const defineLayoutParam = (layout: LayoutParam['layout']) => ({
22
+ layout
23
+ })
@@ -0,0 +1,9 @@
1
+ import type { LayoutParam } from './define_layout_param.ts'
2
+ import type { StorySortParam } from './define_story_sort.ts'
3
+ import type { TestParam } from './define_test_param.ts'
4
+
5
+ export interface StorybookBuiltInParams extends Partial<LayoutParam>, Partial<StorySortParam>, Partial<TestParam> {}
6
+
7
+ export function defineParameters<P extends Record<string, any>>(parameters: P & StorybookBuiltInParams) {
8
+ return parameters
9
+ }
@@ -0,0 +1,57 @@
1
+ type StorySortConfig = {
2
+ includeNames?: boolean
3
+ locales?: string
4
+ method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom'
5
+ order?: string[]
6
+ }
7
+
8
+ type Story = {
9
+ id: string
10
+ importPath: string
11
+ name: string
12
+ title: string
13
+ }
14
+
15
+ type StorySortFn = (a: Story, b: Story) => number
16
+
17
+ /**
18
+ * Interface for story sorting parameters in Storybook.
19
+ * Used to define how stories should be sorted in the navigation sidebar.
20
+ */
21
+ export interface StorySortParam {
22
+ /**
23
+ * Configuration for story sorting. Can be either:
24
+ * - A StorySortConfig object specifying sort method and options
25
+ * - A custom sorting function that takes two stories and returns their sort order
26
+ */
27
+ storySort: StorySortConfig | StorySortFn
28
+ }
29
+
30
+ /**
31
+ * Defines story sorting parameters for Storybook navigation.
32
+ *
33
+ * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
34
+ *
35
+ * @param storySort - Configuration for how stories should be sorted. Can be either:
36
+ * - A configuration object specifying sort method and options
37
+ * - A custom sorting function that takes two stories and returns their sort order
38
+ * @returns An object containing the story sort configuration
39
+ *
40
+ * @example
41
+ * // Alphabetical sorting
42
+ * defineStorySort({ method: 'alphabetical' })
43
+ *
44
+ * @example
45
+ * // Custom order
46
+ * defineStorySort({
47
+ * method: 'custom',
48
+ * order: ['Introduction', 'Components', '*']
49
+ * })
50
+ *
51
+ * @example
52
+ * // Custom sort function
53
+ * defineStorySort((a, b) => a.title.localeCompare(b.title))
54
+ */
55
+ export function defineStorySort(storySort: StorySortParam['storySort']) {
56
+ return { storySort }
57
+ }
@@ -0,0 +1,28 @@
1
+ export interface TestParam {
2
+ test: {
3
+ clearMocks?: boolean | undefined
4
+ mockReset?: boolean | undefined
5
+ restoreMocks?: boolean | undefined
6
+ dangerouslyIgnoreUnhandledErrors?: boolean | undefined
7
+ }
8
+ }
9
+
10
+ /**
11
+ * Defines test parameters for Storybook stories.
12
+ *
13
+ * @see https://storybook.js.org/docs/api/parameters#test
14
+ *
15
+ * @param test - Configuration for test parameters
16
+ * @returns An object containing the test parameter configuration
17
+ *
18
+ * @example
19
+ * defineTestParam({
20
+ * clearMocks: true,
21
+ * mockReset: true,
22
+ * restoreMocks: true,
23
+ * dangerouslyIgnoreUnhandledErrors: true
24
+ * })
25
+ */
26
+ export function defineTestParam(test: TestParam['test']) {
27
+ return { test }
28
+ }
@@ -0,0 +1 @@
1
+ export * from './it.ts'
@@ -0,0 +1,30 @@
1
+ import type { Args, Renderer, StoryAnnotations } from 'storybook/internal/csf'
2
+
3
+ export type ItObj<TRenderer extends Renderer, TArgs extends Args> = StoryAnnotations<TRenderer, TArgs>
4
+
5
+ export function it<TRenderer extends Renderer, TArgs extends Args>(
6
+ description: string,
7
+ story: StoryAnnotations<TRenderer, TArgs>
8
+ ): StoryAnnotations<TRenderer, TArgs> {
9
+ const { play, ...rest } = story
10
+ return {
11
+ ...rest,
12
+ async play(context) {
13
+ await context.step(description, async () => {
14
+ await play?.(context)
15
+ })
16
+ }
17
+ }
18
+ }
19
+
20
+ // does not work
21
+ it.skip = <TRenderer extends Renderer, TArgs extends Args>(
22
+ description: string,
23
+ story: StoryAnnotations<TRenderer, TArgs>
24
+ ) => {
25
+ const { tags = [], ...rest } = story
26
+ return it(description, {
27
+ tags: [...tags, '!test'],
28
+ ...rest
29
+ })
30
+ }