@storybook/experimental-nextjs-vite 0.0.0-pr-28882-sha-441ae2cd → 0.0.0-pr-28916-sha-7e83d7e4
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/dist/export-mocks/navigation/index.d.ts +2 -1
- package/dist/export-mocks/router/index.d.ts +2 -1
- package/dist/index.d.ts +31 -25
- package/package.json +5 -5
- package/template/cli/.eslintrc.json +0 -1
- package/template/cli/js/Button.jsx +6 -18
- package/template/cli/ts-3-8/Button.tsx +6 -18
- package/template/cli/ts-4-9/Button.tsx +6 -18
|
@@ -5,9 +5,10 @@ export * from 'next/dist/client/components/navigation';
|
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Creates a next/navigation router API mock. Used internally.
|
|
8
|
+
*
|
|
8
9
|
* @ignore
|
|
9
10
|
* @internal
|
|
10
|
-
|
|
11
|
+
*/
|
|
11
12
|
declare const createNavigation: (overrides: any) => {
|
|
12
13
|
push: Mock;
|
|
13
14
|
replace: Mock;
|
|
@@ -11,9 +11,10 @@ import { NextRouter } from 'next/router';
|
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Creates a next/router router API mock. Used internally.
|
|
14
|
+
*
|
|
14
15
|
* @ignore
|
|
15
16
|
* @internal
|
|
16
|
-
|
|
17
|
+
*/
|
|
17
18
|
declare const createRouter: (overrides: Partial<NextRouter>) => originalRouter.NextRouter;
|
|
18
19
|
declare const getRouter: () => {
|
|
19
20
|
push: Mock;
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type BuilderName = CompatibleString<'@storybook/builder-vite'>;
|
|
|
7
7
|
type FrameworkOptions = {
|
|
8
8
|
/**
|
|
9
9
|
* The directory where the Next.js app is located.
|
|
10
|
+
*
|
|
10
11
|
* @default process.cwd()
|
|
11
12
|
*/
|
|
12
13
|
nextAppDir?: string;
|
|
@@ -24,37 +25,39 @@ type StorybookConfigFramework = {
|
|
|
24
25
|
};
|
|
25
26
|
};
|
|
26
27
|
};
|
|
27
|
-
/**
|
|
28
|
-
* The interface for Storybook configuration in `main.ts` files.
|
|
29
|
-
*/
|
|
28
|
+
/** The interface for Storybook configuration in `main.ts` files. */
|
|
30
29
|
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework & {};
|
|
31
30
|
|
|
32
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Function that sets the globalConfig of your storybook. The global config is the preview module of
|
|
33
|
+
* your .storybook folder.
|
|
33
34
|
*
|
|
34
|
-
* It should be run a single time, so that your global config (e.g. decorators) is applied to your
|
|
35
|
+
* It should be run a single time, so that your global config (e.g. decorators) is applied to your
|
|
36
|
+
* stories when using `composeStories` or `composeStory`.
|
|
35
37
|
*
|
|
36
38
|
* Example:
|
|
37
|
-
|
|
38
|
-
*
|
|
39
|
+
*
|
|
40
|
+
* ```jsx
|
|
41
|
+
* // setup-file.js
|
|
39
42
|
* import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
|
|
40
43
|
* import projectAnnotations from './.storybook/preview';
|
|
41
44
|
*
|
|
42
45
|
* setProjectAnnotations(projectAnnotations);
|
|
43
|
-
|
|
46
|
+
* ```
|
|
44
47
|
*
|
|
45
|
-
* @param projectAnnotations -
|
|
48
|
+
* @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
|
|
46
49
|
*/
|
|
47
|
-
declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations | NamedOrDefaultProjectAnnotations[]): NormalizedProjectAnnotations<ReactRenderer>;
|
|
50
|
+
declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer>;
|
|
48
51
|
/**
|
|
49
52
|
* Function that will receive a story along with meta (e.g. a default export from a .stories file)
|
|
50
|
-
* and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
+
* and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a
|
|
54
|
+
* composed component that has all args/parameters/decorators/etc combined and applied to it.
|
|
53
55
|
*
|
|
54
56
|
* It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
|
|
55
57
|
*
|
|
56
58
|
* Example:
|
|
57
|
-
|
|
59
|
+
*
|
|
60
|
+
* ```jsx
|
|
58
61
|
* import { render } from '@testing-library/react';
|
|
59
62
|
* import { composeStory } from '@storybook/experimental-nextjs-vite';
|
|
60
63
|
* import Meta, { Primary as PrimaryStory } from './Button.stories';
|
|
@@ -65,24 +68,26 @@ declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProject
|
|
|
65
68
|
* const { getByText } = render(<Primary>Hello world</Primary>);
|
|
66
69
|
* expect(getByText(/Hello world/i)).not.toBeNull();
|
|
67
70
|
* });
|
|
68
|
-
|
|
71
|
+
* ```
|
|
69
72
|
*
|
|
70
73
|
* @param story
|
|
71
|
-
* @param componentAnnotations -
|
|
72
|
-
* @param [projectAnnotations] -
|
|
73
|
-
*
|
|
74
|
+
* @param componentAnnotations - E.g. (import Meta from './Button.stories')
|
|
75
|
+
* @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
|
|
76
|
+
* this can be applied automatically if you use `setProjectAnnotations` in your setup files.
|
|
77
|
+
* @param [exportsName] - In case your story does not contain a name and you want it to have a name.
|
|
74
78
|
*/
|
|
75
79
|
declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
|
|
76
80
|
/**
|
|
77
81
|
* Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
|
|
78
|
-
* and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
|
|
79
|
-
*
|
|
80
|
-
*
|
|
82
|
+
* and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`) and will return
|
|
83
|
+
* an object containing all the stories passed, but now as a composed component that has all
|
|
84
|
+
* args/parameters/decorators/etc combined and applied to it.
|
|
81
85
|
*
|
|
82
86
|
* It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
|
|
83
87
|
*
|
|
84
88
|
* Example:
|
|
85
|
-
|
|
89
|
+
*
|
|
90
|
+
* ```jsx
|
|
86
91
|
* import { render } from '@testing-library/react';
|
|
87
92
|
* import { composeStories } from '@storybook/experimental-nextjs-vite';
|
|
88
93
|
* import * as stories from './Button.stories';
|
|
@@ -93,10 +98,11 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
|
|
|
93
98
|
* const { getByText } = render(<Primary>Hello world</Primary>);
|
|
94
99
|
* expect(getByText(/Hello world/i)).not.toBeNull();
|
|
95
100
|
* });
|
|
96
|
-
|
|
101
|
+
* ```
|
|
97
102
|
*
|
|
98
|
-
* @param csfExports -
|
|
99
|
-
* @param [projectAnnotations] -
|
|
103
|
+
* @param csfExports - E.g. (import * as stories from './Button.stories')
|
|
104
|
+
* @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
|
|
105
|
+
* this can be applied automatically if you use `setProjectAnnotations` in your setup files.
|
|
100
106
|
*/
|
|
101
107
|
declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
|
|
102
108
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/experimental-nextjs-vite",
|
|
3
|
-
"version": "0.0.0-pr-
|
|
3
|
+
"version": "0.0.0-pr-28916-sha-7e83d7e4",
|
|
4
4
|
"description": "Storybook for Next.js and Vite",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -90,9 +90,9 @@
|
|
|
90
90
|
"prep": "jiti ../../../scripts/prepare/bundle.ts"
|
|
91
91
|
},
|
|
92
92
|
"dependencies": {
|
|
93
|
-
"@storybook/builder-vite": "0.0.0-pr-
|
|
94
|
-
"@storybook/react": "0.0.0-pr-
|
|
95
|
-
"@storybook/test": "0.0.0-pr-
|
|
93
|
+
"@storybook/builder-vite": "0.0.0-pr-28916-sha-7e83d7e4",
|
|
94
|
+
"@storybook/react": "0.0.0-pr-28916-sha-7e83d7e4",
|
|
95
|
+
"@storybook/test": "0.0.0-pr-28916-sha-7e83d7e4",
|
|
96
96
|
"styled-jsx": "5.1.6"
|
|
97
97
|
},
|
|
98
98
|
"devDependencies": {
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
"next": "^14.2.5",
|
|
106
106
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
|
|
107
107
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
|
|
108
|
-
"storybook": "^0.0.0-pr-
|
|
108
|
+
"storybook": "^0.0.0-pr-28916-sha-7e83d7e4",
|
|
109
109
|
"vite": "^5.0.0",
|
|
110
110
|
"vite-plugin-storybook-nextjs": "^1.0.0"
|
|
111
111
|
},
|
|
@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
|
|
5
5
|
import './button.css';
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* Primary UI component for user interaction
|
|
9
|
-
*/
|
|
7
|
+
/** Primary UI component for user interaction */
|
|
10
8
|
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
|
|
11
9
|
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
12
10
|
return (
|
|
@@ -26,25 +24,15 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
|
|
|
26
24
|
};
|
|
27
25
|
|
|
28
26
|
Button.propTypes = {
|
|
29
|
-
/**
|
|
30
|
-
* Is this the principal call to action on the page?
|
|
31
|
-
*/
|
|
27
|
+
/** Is this the principal call to action on the page? */
|
|
32
28
|
primary: PropTypes.bool,
|
|
33
|
-
/**
|
|
34
|
-
* What background color to use
|
|
35
|
-
*/
|
|
29
|
+
/** What background color to use */
|
|
36
30
|
backgroundColor: PropTypes.string,
|
|
37
|
-
/**
|
|
38
|
-
* How large should the button be?
|
|
39
|
-
*/
|
|
31
|
+
/** How large should the button be? */
|
|
40
32
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
41
|
-
/**
|
|
42
|
-
* Button contents
|
|
43
|
-
*/
|
|
33
|
+
/** Button contents */
|
|
44
34
|
label: PropTypes.string.isRequired,
|
|
45
|
-
/**
|
|
46
|
-
* Optional click handler
|
|
47
|
-
*/
|
|
35
|
+
/** Optional click handler */
|
|
48
36
|
onClick: PropTypes.func,
|
|
49
37
|
};
|
|
50
38
|
|
|
@@ -3,31 +3,19 @@ import React from 'react';
|
|
|
3
3
|
import './button.css';
|
|
4
4
|
|
|
5
5
|
export interface ButtonProps {
|
|
6
|
-
/**
|
|
7
|
-
* Is this the principal call to action on the page?
|
|
8
|
-
*/
|
|
6
|
+
/** Is this the principal call to action on the page? */
|
|
9
7
|
primary?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* What background color to use
|
|
12
|
-
*/
|
|
8
|
+
/** What background color to use */
|
|
13
9
|
backgroundColor?: string;
|
|
14
|
-
/**
|
|
15
|
-
* How large should the button be?
|
|
16
|
-
*/
|
|
10
|
+
/** How large should the button be? */
|
|
17
11
|
size?: 'small' | 'medium' | 'large';
|
|
18
|
-
/**
|
|
19
|
-
* Button contents
|
|
20
|
-
*/
|
|
12
|
+
/** Button contents */
|
|
21
13
|
label: string;
|
|
22
|
-
/**
|
|
23
|
-
* Optional click handler
|
|
24
|
-
*/
|
|
14
|
+
/** Optional click handler */
|
|
25
15
|
onClick?: () => void;
|
|
26
16
|
}
|
|
27
17
|
|
|
28
|
-
/**
|
|
29
|
-
* Primary UI component for user interaction
|
|
30
|
-
*/
|
|
18
|
+
/** Primary UI component for user interaction */
|
|
31
19
|
export const Button = ({
|
|
32
20
|
primary = false,
|
|
33
21
|
size = 'medium',
|
|
@@ -3,31 +3,19 @@ import React from 'react';
|
|
|
3
3
|
import './button.css';
|
|
4
4
|
|
|
5
5
|
export interface ButtonProps {
|
|
6
|
-
/**
|
|
7
|
-
* Is this the principal call to action on the page?
|
|
8
|
-
*/
|
|
6
|
+
/** Is this the principal call to action on the page? */
|
|
9
7
|
primary?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* What background color to use
|
|
12
|
-
*/
|
|
8
|
+
/** What background color to use */
|
|
13
9
|
backgroundColor?: string;
|
|
14
|
-
/**
|
|
15
|
-
* How large should the button be?
|
|
16
|
-
*/
|
|
10
|
+
/** How large should the button be? */
|
|
17
11
|
size?: 'small' | 'medium' | 'large';
|
|
18
|
-
/**
|
|
19
|
-
* Button contents
|
|
20
|
-
*/
|
|
12
|
+
/** Button contents */
|
|
21
13
|
label: string;
|
|
22
|
-
/**
|
|
23
|
-
* Optional click handler
|
|
24
|
-
*/
|
|
14
|
+
/** Optional click handler */
|
|
25
15
|
onClick?: () => void;
|
|
26
16
|
}
|
|
27
17
|
|
|
28
|
-
/**
|
|
29
|
-
* Primary UI component for user interaction
|
|
30
|
-
*/
|
|
18
|
+
/** Primary UI component for user interaction */
|
|
31
19
|
export const Button = ({
|
|
32
20
|
primary = false,
|
|
33
21
|
size = 'medium',
|