@storybook/experimental-nextjs-vite 0.0.0-pr-28882-sha-441ae2cd → 0.0.0-pr-28916-sha-7e83d7e4

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
- /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
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 stories when using `composeStories` or `composeStory`.
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
- *```jsx
38
- * // setup.js (for jest)
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 - e.g. (import projectAnnotations from '../.storybook/preview')
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
- * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
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
- *```jsx
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 - e.g. (import Meta from './Button.stories')
72
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
73
- * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
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
- * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
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
- *```jsx
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 - e.g. (import * as stories from './Button.stories')
99
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
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-28882-sha-441ae2cd",
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-28882-sha-441ae2cd",
94
- "@storybook/react": "0.0.0-pr-28882-sha-441ae2cd",
95
- "@storybook/test": "0.0.0-pr-28882-sha-441ae2cd",
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-28882-sha-441ae2cd",
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
  },
@@ -1,6 +1,5 @@
1
1
  {
2
2
  "rules": {
3
- "import/no-extraneous-dependencies": "off",
4
3
  "import/extensions": "off",
5
4
  "react/no-unknown-property": "off"
6
5
  }
@@ -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',