@repobuddy/storybook 2.0.1 → 2.1.1

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.
Files changed (103) hide show
  1. package/esm/index.d.ts +574 -13
  2. package/esm/index.js +251 -12
  3. package/esm/manager/index.d.ts +38 -1
  4. package/esm/manager/index.js +32 -1
  5. package/esm/storybook-addon-tag-badges/index.d.ts +95 -2
  6. package/esm/storybook-addon-tag-badges/index.js +207 -1
  7. package/esm/storybook-dark-mode/index.d.ts +110 -3
  8. package/esm/storybook-dark-mode/index.js +102 -3
  9. package/package.json +4 -12
  10. package/cjs/components/show_html.d.ts +0 -16
  11. package/cjs/components/show_html.js +0 -29
  12. package/cjs/decorators/show_doc_source.d.ts +0 -6
  13. package/cjs/decorators/show_doc_source.js +0 -38
  14. package/cjs/index.d.ts +0 -13
  15. package/cjs/index.js +0 -137
  16. package/cjs/manager/brand_title.d.ts +0 -35
  17. package/cjs/manager/brand_title.js +0 -12
  18. package/cjs/manager/index.d.ts +0 -1
  19. package/cjs/manager/index.js +0 -16
  20. package/cjs/parameters/define_actions_param.d.ts +0 -24
  21. package/cjs/parameters/define_actions_param.js +0 -11
  22. package/cjs/parameters/define_backgrounds_param.d.ts +0 -45
  23. package/cjs/parameters/define_backgrounds_param.js +0 -10
  24. package/cjs/parameters/define_docs_param.d.ts +0 -217
  25. package/cjs/parameters/define_docs_param.js +0 -11
  26. package/cjs/parameters/define_layout_param.d.ts +0 -20
  27. package/cjs/parameters/define_layout_param.js +0 -10
  28. package/cjs/parameters/define_parameters.d.ts +0 -39
  29. package/cjs/parameters/define_parameters.js +0 -9
  30. package/cjs/parameters/define_test_param.d.ts +0 -34
  31. package/cjs/parameters/define_test_param.js +0 -11
  32. package/cjs/parameters/define_viewport_param.d.ts +0 -78
  33. package/cjs/parameters/define_viewport_param.js +0 -11
  34. package/cjs/parameters/story_sort.d.ts +0 -27
  35. package/cjs/parameters/story_sort.js +0 -1
  36. package/cjs/storybook-addon-tag-badges/index.d.ts +0 -2
  37. package/cjs/storybook-addon-tag-badges/index.js +0 -16
  38. package/cjs/storybook-addon-tag-badges/tag_badges.d.ts +0 -41
  39. package/cjs/storybook-addon-tag-badges/tag_badges.js +0 -179
  40. package/cjs/storybook-addon-tag-badges/types.d.ts +0 -9
  41. package/cjs/storybook-addon-tag-badges/types.js +0 -1
  42. package/cjs/storybook-dark-mode/dark_mode_docs_container.d.ts +0 -26
  43. package/cjs/storybook-dark-mode/dark_mode_docs_container.js +0 -23
  44. package/cjs/storybook-dark-mode/define_dark_mode.d.ts +0 -54
  45. package/cjs/storybook-dark-mode/define_dark_mode.js +0 -11
  46. package/cjs/storybook-dark-mode/index.d.ts +0 -3
  47. package/cjs/storybook-dark-mode/index.js +0 -38
  48. package/cjs/storybook-dark-mode/with_dark_mode.d.ts +0 -22
  49. package/cjs/storybook-dark-mode/with_dark_mode.js +0 -54
  50. package/cjs/testing/decorators/when_running_in_test.d.ts +0 -5
  51. package/cjs/testing/decorators/when_running_in_test.js +0 -12
  52. package/cjs/testing/decorators/when_running_in_text.ctx.d.ts +0 -3
  53. package/cjs/testing/decorators/when_running_in_text.ctx.js +0 -10
  54. package/cjs/types.d.ts +0 -41
  55. package/cjs/types.js +0 -1
  56. package/cjs/variants/index.d.ts +0 -1
  57. package/cjs/variants/index.js +0 -8
  58. package/cjs/variants/package.json +0 -3
  59. package/cjs/variants/preset.d.ts +0 -11
  60. package/cjs/variants/preset.js +0 -3
  61. package/esm/components/show_html.d.ts +0 -16
  62. package/esm/components/show_html.js +0 -19
  63. package/esm/decorators/show_doc_source.d.ts +0 -6
  64. package/esm/decorators/show_doc_source.js +0 -28
  65. package/esm/manager/brand_title.d.ts +0 -35
  66. package/esm/manager/brand_title.js +0 -6
  67. package/esm/parameters/define_actions_param.d.ts +0 -24
  68. package/esm/parameters/define_actions_param.js +0 -3
  69. package/esm/parameters/define_backgrounds_param.d.ts +0 -45
  70. package/esm/parameters/define_backgrounds_param.js +0 -3
  71. package/esm/parameters/define_docs_param.d.ts +0 -217
  72. package/esm/parameters/define_docs_param.js +0 -3
  73. package/esm/parameters/define_layout_param.d.ts +0 -20
  74. package/esm/parameters/define_layout_param.js +0 -3
  75. package/esm/parameters/define_parameters.d.ts +0 -39
  76. package/esm/parameters/define_parameters.js +0 -3
  77. package/esm/parameters/define_test_param.d.ts +0 -34
  78. package/esm/parameters/define_test_param.js +0 -3
  79. package/esm/parameters/define_viewport_param.d.ts +0 -78
  80. package/esm/parameters/define_viewport_param.js +0 -3
  81. package/esm/parameters/story_sort.d.ts +0 -27
  82. package/esm/parameters/story_sort.js +0 -0
  83. package/esm/storybook-addon-tag-badges/tag_badges.d.ts +0 -41
  84. package/esm/storybook-addon-tag-badges/tag_badges.js +0 -189
  85. package/esm/storybook-addon-tag-badges/types.d.ts +0 -9
  86. package/esm/storybook-addon-tag-badges/types.js +0 -0
  87. package/esm/storybook-dark-mode/dark_mode_docs_container.d.ts +0 -26
  88. package/esm/storybook-dark-mode/dark_mode_docs_container.js +0 -21
  89. package/esm/storybook-dark-mode/define_dark_mode.d.ts +0 -54
  90. package/esm/storybook-dark-mode/define_dark_mode.js +0 -3
  91. package/esm/storybook-dark-mode/with_dark_mode.d.ts +0 -22
  92. package/esm/storybook-dark-mode/with_dark_mode.js +0 -46
  93. package/esm/testing/decorators/when_running_in_test.d.ts +0 -5
  94. package/esm/testing/decorators/when_running_in_test.js +0 -6
  95. package/esm/testing/decorators/when_running_in_text.ctx.d.ts +0 -3
  96. package/esm/testing/decorators/when_running_in_text.ctx.js +0 -4
  97. package/esm/types.d.ts +0 -41
  98. package/esm/types.js +0 -0
  99. package/esm/variants/index.d.ts +0 -1
  100. package/esm/variants/index.js +0 -2
  101. package/esm/variants/package.json +0 -3
  102. package/esm/variants/preset.d.ts +0 -11
  103. package/esm/variants/preset.js +0 -1
@@ -1,189 +0,0 @@
1
- import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
2
- const [, , , , , , versionBadge] = defaultConfig;
3
- export const editorBadge = {
4
- tags: "editor",
5
- badge: {
6
- text: "\u270F\uFE0F",
7
- style: {
8
- backgroundColor: "transparent",
9
- borderColor: "transparent"
10
- },
11
- tooltip: "Editor"
12
- },
13
- display: {
14
- sidebar: {
15
- type: "story",
16
- skipInherited: false
17
- }
18
- }
19
- };
20
- export const newBadge = {
21
- tags: "new",
22
- badge: {
23
- text: "\u{1F195}",
24
- style: {
25
- backgroundColor: "transparent",
26
- borderColor: "transparent"
27
- },
28
- tooltip: "New"
29
- }
30
- };
31
- export const betaBadge = {
32
- tags: "beta",
33
- badge: {
34
- text: "\u{1F171}\uFE0F",
35
- style: {
36
- backgroundColor: "transparent",
37
- borderColor: "transparent"
38
- },
39
- tooltip: "Beta"
40
- }
41
- };
42
- export const propsBadge = {
43
- tags: "props",
44
- badge: {
45
- text: "\u{1F527}",
46
- style: {
47
- backgroundColor: "transparent",
48
- borderColor: "transparent"
49
- },
50
- tooltip: "Props"
51
- }
52
- };
53
- export const deprecatedBadge = {
54
- tags: "deprecated",
55
- badge: {
56
- text: "\u{1FAA6}",
57
- style: {
58
- backgroundColor: "transparent",
59
- borderColor: "transparent"
60
- },
61
- tooltip: "Deprecated"
62
- }
63
- };
64
- export const outdatedBadge = {
65
- tags: "outdated",
66
- badge: {
67
- text: "\u26A0\uFE0F",
68
- style: {
69
- backgroundColor: "transparent",
70
- borderColor: "transparent"
71
- },
72
- tooltip: "Outdated"
73
- }
74
- };
75
- export const dangerBadge = {
76
- tags: "danger",
77
- badge: {
78
- text: "\u{1F6A8}",
79
- style: {
80
- backgroundColor: "transparent",
81
- borderColor: "transparent"
82
- },
83
- tooltip: "Dangerous"
84
- }
85
- };
86
- export const todoBadge = {
87
- tags: "todo",
88
- badge: {
89
- text: "\u{1F4CB}",
90
- style: {
91
- backgroundColor: "transparent",
92
- borderColor: "transparent"
93
- },
94
- tooltip: "Todo"
95
- }
96
- };
97
- export const codeOnlyBadge = {
98
- tags: "code-only",
99
- badge: {
100
- text: "\u{1F4DD}",
101
- style: {
102
- backgroundColor: "transparent",
103
- borderColor: "transparent"
104
- },
105
- tooltip: "Code Only"
106
- }
107
- };
108
- export const snapshotBadge = {
109
- tags: "snapshot",
110
- badge: {
111
- text: "\u{1F4F8}",
112
- style: {
113
- backgroundColor: "transparent",
114
- borderColor: "transparent"
115
- },
116
- tooltip: "Snapshot Test"
117
- },
118
- display: {
119
- sidebar: false,
120
- toolbar: ["story"]
121
- }
122
- };
123
- export const unitBadge = {
124
- tags: "unit",
125
- badge: {
126
- text: "\u{1F9EA}",
127
- style: {
128
- backgroundColor: "transparent",
129
- borderColor: "transparent"
130
- },
131
- tooltip: "Unit Test"
132
- },
133
- display: {
134
- sidebar: false
135
- }
136
- };
137
- export const integrationBadge = {
138
- tags: "integration",
139
- badge: {
140
- text: "\u{1F517}",
141
- style: {
142
- backgroundColor: "transparent",
143
- borderColor: "transparent"
144
- },
145
- tooltip: "Integration Test"
146
- },
147
- display: {
148
- sidebar: false
149
- }
150
- };
151
- export const keyboardBadge = {
152
- tags: "keyboard",
153
- badge: {
154
- text: "\u2328\uFE0F",
155
- style: {
156
- backgroundColor: "transparent",
157
- borderColor: "transparent"
158
- },
159
- tooltip: "Keyboard Interaction"
160
- }
161
- };
162
- export const internalBadge = {
163
- tags: "internal",
164
- badge: {
165
- text: "\u{1F512}",
166
- style: {
167
- backgroundColor: "transparent",
168
- borderColor: "transparent"
169
- },
170
- tooltip: "Internal"
171
- }
172
- };
173
- export const tagBadges = [
174
- editorBadge,
175
- unitBadge,
176
- integrationBadge,
177
- keyboardBadge,
178
- newBadge,
179
- betaBadge,
180
- deprecatedBadge,
181
- outdatedBadge,
182
- dangerBadge,
183
- propsBadge,
184
- todoBadge,
185
- codeOnlyBadge,
186
- internalBadge,
187
- snapshotBadge,
188
- versionBadge
189
- ];
@@ -1,9 +0,0 @@
1
- import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite';
2
- import type { ExtendMeta, ExtendStoryObj } from '../types.js';
3
- import type { TagNames } from './tag_badges.js';
4
- export type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, M<TCmpOrArgs>, {
5
- tag: TagNames;
6
- }>;
7
- export type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, SBO<TMetaOrCmpOrArgs>, {
8
- tag: TagNames;
9
- }>;
File without changes
@@ -1,26 +0,0 @@
1
- import { type DocsContextProps } from '@storybook/addon-docs/blocks';
2
- import { type PropsWithChildren } from 'react';
3
- import { type ThemeVars } from 'storybook/theming';
4
- /**
5
- * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
6
- *
7
- * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
8
- *
9
- * @example
10
- * ```ts
11
- * // .storybook/preview.tsx
12
- * const preview: Preview = {
13
- * parameters: {
14
- * docs: {
15
- * container: createDarkModeDocsContainer()
16
- * }
17
- * }
18
- * }
19
- * ```
20
- */
21
- export declare function createDarkModeDocsContainer(customThemes?: {
22
- light?: ThemeVars | undefined;
23
- dark?: ThemeVars | undefined;
24
- } | undefined): (props: PropsWithChildren<{
25
- context: DocsContextProps;
26
- }>) => import("react").JSX.Element;
@@ -1,21 +0,0 @@
1
- import { DARK_MODE_EVENT_NAME } from "@storybook-community/storybook-dark-mode";
2
- import { DocsContainer } from "@storybook/addon-docs/blocks";
3
- import { useEffect, useState } from "react";
4
- import { themes } from "storybook/theming";
5
- export function createDarkModeDocsContainer(customThemes) {
6
- return function DarkModeDocsContainer(props) {
7
- const [isDark, setDark] = useState(true);
8
- useEffect(() => {
9
- props.context.channel.on(DARK_MODE_EVENT_NAME, setDark);
10
- return () => props.context.channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
11
- }, [props.context.channel]);
12
- return /* @__PURE__ */ React.createElement(
13
- DocsContainer,
14
- {
15
- ...props,
16
- theme: isDark ? customThemes?.dark ?? themes.dark : customThemes?.light ?? themes.light
17
- },
18
- props.children
19
- );
20
- };
21
- }
@@ -1,54 +0,0 @@
1
- import type { CSSProperties } from '@just-web/css';
2
- import type { ThemeVars } from 'storybook/theming';
3
- /**
4
- * Configuration parameters for `@storybook-community/storybook-dark-mode`.
5
- */
6
- export interface DarkModeParam {
7
- /** The current theme ('dark' or 'light') */
8
- current?: 'dark' | 'light' | undefined;
9
- /**
10
- * CSS class(es) to apply in dark mode.
11
- */
12
- darkClass?: string | string[] | undefined;
13
- /**
14
- * CSS style(s) to apply in dark mode.
15
- *
16
- * This only works when using `withStoryRoot`.
17
- */
18
- darkStyle?: CSSProperties | undefined;
19
- /** CSS class(es) to apply in light mode */
20
- lightClass?: string | string[] | undefined;
21
- /**
22
- * CSS style(s) to apply in light mode.
23
- *
24
- * This only works when using `withStoryRoot`.
25
- */
26
- lightStyle?: CSSProperties | undefined;
27
- /** Dark theme variables */
28
- dark?: ThemeVars;
29
- /** Light theme variables */
30
- light?: ThemeVars;
31
- /** Element to apply theme classes to ('html' or 'body') */
32
- classTarget?: 'html' | 'body' | undefined;
33
- /** Whether to apply theme styles to preview iframe */
34
- stylePreview?: boolean | undefined;
35
- }
36
- /**
37
- * Defines `@storybook-community/storybook-dark-mode` parameters for Storybook stories.
38
- *
39
- * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
40
- * @returns An object containing the dark mode parameter configuration
41
- *
42
- * @example
43
- * ```ts
44
- * // ./storybook/preview.tsx
45
- *
46
- * export const preview = {
47
- * parameters: {
48
- * ...defineDarkModeParam({ darkClass: 'dark' })
49
- * }
50
- * }
51
- */
52
- export declare function defineDarkModeParam(darkMode: DarkModeParam): {
53
- darkMode: DarkModeParam;
54
- };
@@ -1,3 +0,0 @@
1
- export function defineDarkModeParam(darkMode) {
2
- return { darkMode };
3
- }
@@ -1,22 +0,0 @@
1
- import type { CSSProperties } from '@just-web/css';
2
- import type { DecoratorFunction } from 'storybook/internal/types';
3
- /**
4
- * Applies additional dark mode behavior.
5
- *
6
- * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
7
- * @returns A decorator function that applies additional dark mode behavior.
8
- */
9
- export declare function withDarkMode(options?: {
10
- /**
11
- * CSS class(es) to apply to the body element.
12
- *
13
- * Useful when using Tailwind CSS and `classTarget: 'html'`
14
- */
15
- bodyClass?: string | string[] | undefined;
16
- /**
17
- * CSS style(s) to apply to the body element.
18
- *
19
- * Useful when using Tailwind CSS and `classTarget: 'html'`
20
- */
21
- bodyStyle?: CSSProperties | undefined;
22
- } | undefined): DecoratorFunction<any, any>;
@@ -1,46 +0,0 @@
1
- import { toDOMStyle } from "@just-web/css";
2
- import { useDarkMode } from "@storybook-community/storybook-dark-mode";
3
- export function withDarkMode(options) {
4
- return function darkModeDecorator(Story, { parameters }) {
5
- const darkMode = parameters.darkMode;
6
- if (!darkMode) return /* @__PURE__ */ React.createElement(Story, null);
7
- const dark = useDarkMode();
8
- const target = darkMode.classTarget === "html" ? document.documentElement : document.body;
9
- if (dark) {
10
- removeStyle(target, darkMode.lightStyle);
11
- addStyle(target, darkMode.darkStyle);
12
- } else {
13
- removeStyle(target, darkMode.darkStyle);
14
- addStyle(target, darkMode.lightStyle);
15
- }
16
- if (options?.bodyClass) {
17
- addClass(document.body, options.bodyClass);
18
- }
19
- if (options?.bodyStyle) {
20
- addStyle(document.body, options.bodyStyle);
21
- }
22
- return /* @__PURE__ */ React.createElement(Story, null);
23
- };
24
- }
25
- function addClass(target, className) {
26
- if (!className) return;
27
- if (typeof className === "string") {
28
- target.classList.add(...className.split(" "));
29
- } else if (Array.isArray(className)) {
30
- target.classList.add(...className);
31
- }
32
- }
33
- function addStyle(target, style) {
34
- if (style) {
35
- for (const [key, value] of Object.entries(toDOMStyle(style))) {
36
- target.style.setProperty(key, value);
37
- }
38
- }
39
- }
40
- function removeStyle(target, style) {
41
- if (style) {
42
- for (const key of Object.keys(toDOMStyle(style))) {
43
- target.style.removeProperty(key);
44
- }
45
- }
46
- }
@@ -1,5 +0,0 @@
1
- import type { Decorator, StrictArgs } from '@storybook/react-vite';
2
- /**
3
- * executes the specified decorator or handler if the code is running in test.
4
- */
5
- export declare function whenRunningInTest<TArgs = StrictArgs>(decoratorOrHandler: ((...args: Parameters<Decorator<TArgs>>) => ReturnType<Decorator<TArgs>> | undefined | void) | (() => ReturnType<Decorator<TArgs>> | undefined | void)): Decorator<TArgs>;
@@ -1,6 +0,0 @@
1
- import { ctx } from "./when_running_in_text.ctx.js";
2
- export function whenRunningInTest(decoratorOrHandler) {
3
- return function RunInTest(Story, context) {
4
- return ctx.isRunningInTest() ? decoratorOrHandler(Story, context) ?? /* @__PURE__ */ React.createElement(Story, null) : /* @__PURE__ */ React.createElement(Story, null);
5
- };
6
- }
@@ -1,3 +0,0 @@
1
- export declare const ctx: {
2
- isRunningInTest: any;
3
- };
@@ -1,4 +0,0 @@
1
- import { isRunningInTest } from "@repobuddy/test";
2
- export const ctx = {
3
- isRunningInTest
4
- };
package/esm/types.d.ts DELETED
@@ -1,41 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- /**
3
- * Extends the Storybook Meta type with custom tag types
4
- * @template TCmpOrArgs - The component or args type
5
- * @template M - The base Meta type
6
- * @template E - The extension type containing tagType
7
- *
8
- * @example
9
- * ```ts
10
- * // Create a generic Meta type for a project
11
- * type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, Meta<TCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
12
- *
13
- * // Create a specific Meta type for a component
14
- * type Meta = ExtendMeta<typeof Component, Meta<typeof Component>, { tagType: 'tag1' | 'tag2' }>
15
- * ```
16
- */
17
- export type ExtendMeta<TCmpOrArgs, M extends Meta<TCmpOrArgs>, E extends {
18
- tag: string;
19
- }> = Omit<M, 'tags'> & {
20
- tags?: Array<E['tag'] | (string & {})> | undefined;
21
- };
22
- /**
23
- * Extends the Storybook StoryObj type with custom tag types
24
- * @template TMetaOrCmpOrArgs - The meta, component or args type
25
- * @template S - The base StoryObj type
26
- * @template E - The extension type containing tagType
27
- *
28
- * @example
29
- * ```ts
30
- * // Create a generic StoryObj type for a project
31
- * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
32
- *
33
- * // Create a specific StoryObj type for a component
34
- * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
35
- * ```
36
- */
37
- export type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E extends {
38
- tag: string;
39
- }> = Omit<S, 'tags'> & {
40
- tags?: Array<E['tag'] | (string & {})> | undefined;
41
- };
package/esm/types.js DELETED
File without changes
@@ -1 +0,0 @@
1
- export declare const empty: {};
@@ -1,2 +0,0 @@
1
- console.info("variants.index.ts.load");
2
- export const empty = {};
@@ -1,3 +0,0 @@
1
- {
2
- "type": "module"
3
- }
@@ -1,11 +0,0 @@
1
- /**
2
- * User specifies `@repobuddy/storybook/variants/addon` in the `.storybook/main.ts`.
3
- *
4
- * Storybook loads it on the server side.
5
- *
6
- * It provides a default export (or in CJS, `module.exports =`) that contains:
7
- *
8
- * - `managerEntries` a function that returns an array of strings on where to load the manager (on the client side)
9
- * - `previewAnnotations` a function that returns an array of strings on where to load the preview (on the client side)
10
- * - `experimental_serverChannel` a function that handles the server-side channel
11
- */
@@ -1 +0,0 @@
1
- console.info("variants.preset.js.load");