@storybook/experimental-nextjs-vite 8.3.0-alpha.6 → 8.3.0-alpha.7

package/dist/export-mocks/navigation/index.d.ts

@@ -5,9 +5,10 @@ export * from 'next/dist/client/components/navigation';
 
 /**
  * Creates a next/navigation router API mock. Used internally.
+ *
  * @ignore
  * @internal
- * */
+ */
 declare const createNavigation: (overrides: any) => {
     push: Mock;
     replace: Mock;

package/dist/export-mocks/router/index.d.ts

@@ -11,9 +11,10 @@ import { NextRouter } from 'next/router';
 
 /**
  * Creates a next/router router API mock. Used internally.
+ *
  * @ignore
  * @internal
- * */
+ */
 declare const createRouter: (overrides: Partial<NextRouter>) => originalRouter.NextRouter;
 declare const getRouter: () => {
     push: Mock;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 type FrameworkOptions = {
     /**
      * The directory where the Next.js app is located.
+     *
      * @default process.cwd()
      */
     nextAppDir?: string;
@@ -24,37 +25,39 @@ type StorybookConfigFramework = {
         };
     };
 };
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
+/** The interface for Storybook configuration in `main.ts` files. */
 type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework & {};
 
-/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
  *
- * 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`.
+ * 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`.
  *
  * Example:
- *```jsx
+ *
+ * ```jsx
  * // setup.js (for jest)
  * import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
  * import projectAnnotations from './.storybook/preview';
  *
  * setProjectAnnotations(projectAnnotations);
- *```
+ * ```
  *
- * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
  */
 declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer>;
 /**
  * Function that will receive a story along with meta (e.g. a default export from a .stories file)
- * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
- * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
- *
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a
+ * composed component that has all args/parameters/decorators/etc combined and applied to it.
  *
  * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
  *
  * Example:
- *```jsx
+ *
+ * ```jsx
  * import { render } from '@testing-library/react';
  * import { composeStory } from '@storybook/experimental-nextjs-vite';
  * import Meta, { Primary as PrimaryStory } from './Button.stories';
@@ -65,24 +68,26 @@ declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProject
  *   const { getByText } = render(<Primary>Hello world</Primary>);
  *   expect(getByText(/Hello world/i)).not.toBeNull();
  * });
- *```
+ * ```
  *
  * @param story
- * @param componentAnnotations - e.g. (import Meta from './Button.stories')
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
- * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ * @param componentAnnotations - E.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
+ *   this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - In case your story does not contain a name and you want it to have a name.
  */
 declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
 /**
  * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
- * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
- * 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.
- *
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`) 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.
  *
  * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
  *
  * Example:
- *```jsx
+ *
+ * ```jsx
  * import { render } from '@testing-library/react';
  * import { composeStories } from '@storybook/experimental-nextjs-vite';
  * import * as stories from './Button.stories';
@@ -93,10 +98,11 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
  *   const { getByText } = render(<Primary>Hello world</Primary>);
  *   expect(getByText(/Hello world/i)).not.toBeNull();
  * });
- *```
+ * ```
  *
- * @param csfExports - e.g. (import * as stories from './Button.stories')
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param csfExports - E.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
+ *   this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  */
 declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-nextjs-vite",
-  "version": "8.3.0-alpha.6",
+  "version": "8.3.0-alpha.7",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
@@ -90,9 +90,9 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "8.3.0-alpha.6",
-    "@storybook/react": "8.3.0-alpha.6",
-    "@storybook/test": "8.3.0-alpha.6",
+    "@storybook/builder-vite": "8.3.0-alpha.7",
+    "@storybook/react": "8.3.0-alpha.7",
+    "@storybook/test": "8.3.0-alpha.7",
     "styled-jsx": "5.1.6"
   },
   "devDependencies": {
@@ -105,7 +105,7 @@
     "next": "^14.2.5",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^8.3.0-alpha.6",
+    "storybook": "^8.3.0-alpha.7",
     "vite": "^5.0.0",
     "vite-plugin-storybook-nextjs": "^1.0.0"
   },

package/template/cli/.eslintrc.json

@@ -1,6 +1,5 @@
 {
   "rules": {
-    "import/no-extraneous-dependencies": "off",
     "import/extensions": "off",
     "react/no-unknown-property": "off"
   }

package/template/cli/js/Button.jsx

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 
 import './button.css';
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
@@ -26,25 +24,15 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
 };
 
 Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick: PropTypes.func,
 };
 

package/template/cli/ts-3-8/Button.tsx

@@ -3,31 +3,19 @@ import React from 'react';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({
   primary = false,
   size = 'medium',

package/template/cli/ts-4-9/Button.tsx

@@ -3,31 +3,19 @@ import React from 'react';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({
   primary = false,
   size = 'medium',