@storybook/nextjs 7.3.2 → 7.4.0-alpha.1

package/README.md

@@ -827,10 +827,15 @@ Below is an example of how to add svgr support to Storybook with this framework.
 export default {
   // ...
   webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
     // This modifies the existing image rule to exclude .svg files
     // since you want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find((rule) => rule.test.test('.svg'));
-    imageRule.exclude = /\.svg$/;
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
 
     // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({

package/dist/{index.d-62173427.d.ts → index.d-4cb7d32b.d.ts}

@@ -850,6 +850,19 @@ type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: T
 type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
 type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
 
+interface Options$1 {
+    allowRegExp: boolean;
+    allowFunction: boolean;
+    allowSymbol: boolean;
+    allowDate: boolean;
+    allowUndefined: boolean;
+    allowClass: boolean;
+    allowError: boolean;
+    maxDepth: number;
+    space: number | undefined;
+    lazyEval: boolean;
+}
+
 type ExportName = string;
 type MetaId = string;
 interface StoriesSpecifier {
@@ -962,25 +975,6 @@ type DocsIndexInput = BaseIndexInput & {
     storiesImports?: Path[];
 };
 type IndexInput = StoryIndexInput | DocsIndexInput;
-type Addon_ReturnTypeFramework<ReturnType> = {
-    component: any;
-    storyResult: ReturnType;
-    canvasElement: any;
-};
-type Addon_DecoratorFunction<StoryFnReturnType = unknown> = DecoratorFunction<Addon_ReturnTypeFramework<StoryFnReturnType>>;
-type Path = string;
-
-interface Options$1 {
-    allowRegExp: boolean;
-    allowFunction: boolean;
-    allowSymbol: boolean;
-    allowDate: boolean;
-    allowUndefined: boolean;
-    allowClass: boolean;
-    maxDepth: number;
-    space: number | undefined;
-    lazyEval: boolean;
-}
 
 /**
  * ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now!
@@ -1280,5 +1274,12 @@ interface StorybookConfig {
 type PresetValue<T> = T | ((config: T, options: Options) => T | Promise<T>);
 type PresetProperty<K, TStorybookConfig = StorybookConfig> = TStorybookConfig[K extends keyof TStorybookConfig ? K : never] | PresetPropertyFn<K, TStorybookConfig>;
 type PresetPropertyFn<K, TStorybookConfig = StorybookConfig, TOptions = {}> = (config: TStorybookConfig[K extends keyof TStorybookConfig ? K : never], options: Options & TOptions) => TStorybookConfig[K extends keyof TStorybookConfig ? K : never] | Promise<TStorybookConfig[K extends keyof TStorybookConfig ? K : never]>;
+type Addon_ReturnTypeFramework<ReturnType> = {
+    component: any;
+    storyResult: ReturnType;
+    canvasElement: any;
+};
+type Addon_DecoratorFunction<StoryFnReturnType = unknown> = DecoratorFunction<Addon_ReturnTypeFramework<StoryFnReturnType>>;
+type Path = string;
 
 export { Addon_DecoratorFunction as A, Options as O, PresetProperty as P };

package/dist/preset.d.ts

@@ -1,4 +1,4 @@
-import { P as PresetProperty, O as Options } from './index.d-62173427.js';
+import { P as PresetProperty, O as Options } from './index.d-4cb7d32b.js';
 import { TransformOptions } from '@babel/core';
 import { StorybookConfig } from './index.js';
 import 'file-system-cache';

package/dist/preview.d.ts

@@ -1,4 +1,4 @@
-import { A as Addon_DecoratorFunction } from './index.d-62173427.js';
+import { A as Addon_DecoratorFunction } from './index.d-4cb7d32b.js';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.3.2",
+  "version": "7.4.0-alpha.1",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -48,10 +48,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
@@ -71,13 +72,13 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@babel/runtime": "^7.22.6",
-    "@storybook/addon-actions": "7.3.2",
-    "@storybook/builder-webpack5": "7.3.2",
-    "@storybook/core-common": "7.3.2",
-    "@storybook/node-logger": "7.3.2",
-    "@storybook/preset-react-webpack": "7.3.2",
-    "@storybook/preview-api": "7.3.2",
-    "@storybook/react": "7.3.2",
+    "@storybook/addon-actions": "7.4.0-alpha.1",
+    "@storybook/builder-webpack5": "7.4.0-alpha.1",
+    "@storybook/core-common": "7.4.0-alpha.1",
+    "@storybook/node-logger": "7.4.0-alpha.1",
+    "@storybook/preset-react-webpack": "7.4.0-alpha.1",
+    "@storybook/preview-api": "7.4.0-alpha.1",
+    "@storybook/react": "7.4.0-alpha.1",
     "@types/node": "^16.0.0",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",

package/src/globals.d.ts

@@ -1,3 +0,0 @@
-declare module 'next/dist/compiled';
-declare module 'next/dist/compiled/babel/plugin-transform-modules-commonjs';
-declare module 'next/dist/compiled/babel/plugin-syntax-jsx';

package/template/stories/DynamicImport.stories.jsx

@@ -1,20 +0,0 @@
-import dynamic from 'next/dynamic';
-import React, { Suspense } from 'react';
-
-const DynamicComponent = dynamic(() => import('./dynamic-component'), {
-  ssr: false,
-});
-
-function Component() {
-  return (
-    <Suspense fallback="Loading...">
-      <DynamicComponent />
-    </Suspense>
-  );
-}
-
-export default {
-  component: Component,
-};
-
-export const Default = {};

package/template/stories/Image.stories.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import { waitFor } from '@storybook/testing-library';
-
-import Accessibility from '../../assets/accessibility.svg';
-
-export default {
-  component: Image,
-  args: {
-    src: Accessibility,
-    alt: 'Accessibility',
-  },
-};
-
-export const Default = {};
-
-export const BlurredPlaceholder = {
-  args: {
-    placeholder: 'blur',
-  },
-};
-
-export const BlurredAbsolutePlaceholder = {
-  args: {
-    src: 'https://storybook.js.org/images/placeholders/50x50.png',
-    width: 50,
-    height: 50,
-    blurDataURL:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
-    placeholder: 'blur',
-  },
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots
-    // given that the switch from blur to image is quite fast
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-export const FilledParent = {
-  args: {
-    fill: true,
-  },
-  decorator: [
-    (Story) => <div style={{ width: 500, height: 500, position: 'relative' }}>{Story()}</div>,
-  ],
-};
-
-export const Sized = {
-  args: {
-    fill: true,
-    sizes: '(max-width: 600px) 100vw, 600px',
-    decorator: [
-      (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
-    ],
-  },
-};
-
-export const Lazy = {
-  args: {
-    src: 'https://storybook.js.org/images/placeholders/50x50.png',
-    width: 50,
-    height: 50,
-  },
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
-    chromatic: { disableSnapshot: true },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <div style={{ height: '200vh' }} />
-        {Story()}
-      </>
-    ),
-  ],
-};
-
-export const Eager = {
-  ...Lazy,
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
-    chromatic: { disableSnapshot: true },
-    nextjs: {
-      image: {
-        loading: 'eager',
-      },
-    },
-  },
-};

package/template/stories/StyledJsx.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const Component = () => (
-  <div>
-    <style jsx>{`
-      .main p {
-        color: #ff4785;
-      }
-    `}</style>
-    <main className="main">
-      <p>This is styled using Styled JSX</p>
-    </main>
-  </div>
-);
-
-export default {
-  component: Component,
-};
-
-export const Default = {};

package/template/stories_nextjs-12-js/ImageFuture.stories.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import Image from 'next/future/image';
-
-import Accessibility from '../../assets/accessibility.svg';
-
-export default {
-  component: Image,
-  args: {
-    src: Accessibility,
-    alt: 'Accessibility',
-  },
-};
-
-export const Default = {};
-
-export const BlurredPlaceholder = {
-  args: {
-    placeholder: 'blur',
-  },
-};
-
-export const BlurredAbsolutePlaceholder = {
-  args: {
-    src: 'https://storybook.js.org/images/placeholders/50x50.png',
-    width: 50,
-    height: 50,
-    blurDataURL:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
-    placeholder: 'blur',
-  },
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots
-    // given that the switch from blur to image is quite fast
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-export const FilledParent = {
-  args: {
-    fill: true,
-  },
-  decorator: [
-    (Story) => <div style={{ width: 500, height: 500, position: 'relative' }}>{Story()}</div>,
-  ],
-};
-
-export const Sized = {
-  args: {
-    fill: true,
-    sizes: '(max-width: 600px) 100vw, 600px',
-    decorator: [
-      (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
-    ],
-  },
-};

package/template/stories_nextjs-12-js/Link.stories.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const Component = () => (
-  <ul>
-    <li>
-      <Link href="/">
-        <a>Home</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/about">
-        <a>About Us</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/blog/hello-world">
-        <a>Blog Post</a>
-      </Link>
-    </li>
-  </ul>
-);
-
-export default {
-  component: Component,
-};
-
-export const Default = {};

package/template/stories_nextjs-default-js/Font.jsx

@@ -1,64 +0,0 @@
-/* eslint-disable react/prop-types */
-import { Rubik_Puddles } from 'next/font/google';
-import localFont from 'next/font/local';
-
-import React from 'react';
-
-const rubik = Rubik_Puddles({
-  subsets: ['latin'],
-  variable: '--font-latin-rubik',
-  weight: '400',
-});
-
-export const localRubikStorm = localFont({
-  src: '/fonts/RubikStorm-Regular.ttf',
-  variable: '--font-rubik-storm',
-});
-
-export default function Font({ variant }) {
-  switch (variant) {
-    case 'className':
-      return (
-        <div>
-          <h1 className={rubik.className}>Google Rubik Puddles</h1>
-          <h1 className={localRubikStorm.className}>Google Local Rubik Storm</h1>
-        </div>
-      );
-    case 'style':
-      return (
-        <div>
-          <h1 style={rubik.style}>Google Rubik Puddles</h1>
-          <h1 style={localRubikStorm.style}>Google Local Rubik Storm</h1>
-        </div>
-      );
-    case 'variable':
-      return (
-        <div>
-          <div className={rubik.variable}>
-            <h1
-              style={{
-                fontFamily: 'var(--font-latin-rubik)',
-                fontStyle: rubik.style.fontStyle,
-                fontWeight: rubik.style.fontWeight,
-              }}
-            >
-              Google Rubik Puddles
-            </h1>
-          </div>
-          <div className={localRubikStorm.variable}>
-            <h1
-              style={{
-                fontFamily: 'var(--font-rubik-storm)',
-                fontStyle: localRubikStorm.style.fontStyle,
-                fontWeight: localRubikStorm.style.fontWeight,
-              }}
-            >
-              Google Local Rubik Storm
-            </h1>
-          </div>
-        </div>
-      );
-    default:
-      return null;
-  }
-}

package/template/stories_nextjs-default-js/Font.stories.jsx

@@ -1,23 +0,0 @@
-import Font from './Font';
-
-export default {
-  component: Font,
-};
-
-export const WithClassName = {
-  args: {
-    variant: 'className',
-  },
-};
-
-export const WithStyle = {
-  args: {
-    variant: 'style',
-  },
-};
-
-export const WithVariable = {
-  args: {
-    variant: 'variable',
-  },
-};

package/template/stories_nextjs-default-js/Head.stories.jsx

@@ -1,34 +0,0 @@
-/* eslint-disable no-undef */
-import { expect } from '@storybook/jest';
-import Head from 'next/head';
-import React from 'react';
-import { within, userEvent, waitFor } from '@storybook/testing-library';
-
-function Component() {
-  return (
-    <div>
-      <Head>
-        <title>Next.js Head Title</title>
-        <meta property="og:title" content="My page title" key="title" />
-      </Head>
-      <Head>
-        <meta property="og:title" content="My new title" key="title" />
-      </Head>
-      <p>Hello world!</p>
-    </div>
-  );
-}
-
-export default {
-  component: Component,
-};
-
-export const Default = {
-  play: async ({ canvasElement }) => {
-    await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
-    await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
-    await expect(document.querySelector('meta[property="og:title"]').content).toEqual(
-      'My new title'
-    );
-  },
-};

package/template/stories_nextjs-default-js/ImageLegacy.stories.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import Image from 'next/legacy/image';
-
-import Accessibility from '../../assets/accessibility.svg';
-
-export default {
-  component: Image,
-  args: {
-    src: Accessibility,
-    alt: 'Accessibility',
-  },
-};
-
-export const Default = {};
-
-export const BlurredPlaceholder = {
-  args: {
-    placeholder: 'blur',
-  },
-};
-
-export const BlurredAbsolutePlaceholder = {
-  args: {
-    src: 'https://storybook.js.org/images/placeholders/50x50.png',
-    width: 50,
-    height: 50,
-    blurDataURL:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
-    placeholder: 'blur',
-  },
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots
-    // given that the switch from blur to image is quite fast
-    chromatic: { disableSnapshot: true },
-  },
-};

package/template/stories_nextjs-default-js/Link.stories.jsx

@@ -1,82 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import Link from 'next/link';
-
-import style from './Link.stories.module.css';
-
-// `onClick`, `href`, and `ref` need to be passed to the DOM element
-// for proper handling
-const MyButton = React.forwardRef(function Button({ onClick, href, children }, ref) {
-  return (
-    <a href={href} onClick={onClick} ref={ref}>
-      {children}
-    </a>
-  );
-});
-
-const Component = () => (
-  <ul>
-    <li>
-      <Link href="/">Normal Link</Link>
-    </li>
-    <li>
-      <Link
-        href={{
-          pathname: '/with-url-object',
-          query: { name: 'test' },
-        }}
-      >
-        With URL Object
-      </Link>
-    </li>
-    <li>
-      <Link href="/replace-url" replace>
-        Replace the URL instead of push
-      </Link>
-    </li>
-    <li>
-      <Link href="/legacy-behaviour" legacyBehavior>
-        <a>Legacy behavior</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/child-is-functional-component" passHref legacyBehavior>
-        <MyButton>child is a functional component</MyButton>
-      </Link>
-    </li>
-    <li>
-      <Link href="/#hashid" scroll={false}>
-        Disables scrolling to the top
-      </Link>
-    </li>
-    <li>
-      <Link href="/no-prefetch" prefetch={false}>
-        No Prefetching
-      </Link>
-    </li>
-    <li>
-      <Link style={{ color: 'red' }} href="/with-style">
-        With style
-      </Link>
-    </li>
-    <li>
-      <Link className={style.link} href="/with-classname">
-        With className
-      </Link>
-    </li>
-  </ul>
-);
-
-export default {
-  component: Component,
-};
-
-export const Default = {};
-
-export const InAppDir = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-};

package/template/stories_nextjs-default-js/Link.stories.module.css

@@ -1,3 +0,0 @@
-.link {
-  color: green;
-}

package/template/stories_nextjs-default-js/Navigation.stories.jsx

@@ -1,124 +0,0 @@
-import {
-  useRouter,
-  usePathname,
-  useSearchParams,
-  useParams,
-  useSelectedLayoutSegment,
-  useSelectedLayoutSegments,
-} from 'next/navigation';
-import React from 'react';
-
-function Component() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const params = useParams();
-  const segment = useSelectedLayoutSegment();
-  const segments = useSelectedLayoutSegments();
-
-  const searchParamsList = searchParams ? Array.from(searchParams.entries()) : [];
-
-  const routerActions = [
-    {
-      cb: () => router.back(),
-      name: 'Go back',
-    },
-    {
-      cb: () => router.forward(),
-      name: 'Go forward',
-    },
-    {
-      cb: () => router.prefetch('/prefetched-html'),
-      name: 'Prefetch',
-    },
-    {
-      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
-      name: 'Push HTML',
-    },
-    {
-      cb: () => router.refresh(),
-      name: 'Refresh',
-    },
-    {
-      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
-      name: 'Replace',
-    },
-  ];
-
-  return (
-    <div>
-      <div>pathname: {pathname}</div>
-      <div>segment: {segment}</div>
-      <div>segments: {segments.join(',')}</div>
-      <div>
-        searchparams:{' '}
-        <ul>
-          {searchParamsList.map(([key, value]) => (
-            <li key={key}>
-              {key}: {value}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div>
-        params:{' '}
-        <ul>
-          {Object.entries(params).map(([key, value]) => (
-            <li key={key}>
-              {key}: {value}
-            </li>
-          ))}
-        </ul>
-      </div>
-      {routerActions.map(({ cb, name }) => (
-        <div key={name} style={{ marginBottom: '1em' }}>
-          <button type="button" onClick={cb}>
-            {name}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default {
-  component: Component,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/hello',
-        query: {
-          foo: 'bar',
-        },
-      },
-    },
-  },
-};
-
-export const Default = {};
-
-export const WithSegmentDefined = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        segments: ['dashboard', 'settings'],
-      },
-    },
-  },
-};
-
-export const WithSegmentDefinedForParams = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        segments: [
-          ['slug', 'hello'],
-          ['framework', 'nextjs'],
-        ],
-      },
-    },
-  },
-};

package/template/stories_nextjs-default-js/Router.stories.jsx

@@ -1,69 +0,0 @@
-import { useRouter } from 'next/router';
-import React from 'react';
-
-function Component() {
-  const router = useRouter();
-  const searchParams = router.query;
-
-  const routerActions = [
-    {
-      cb: () => router.back(),
-      name: 'Go back',
-    },
-    {
-      cb: () => router.forward(),
-      name: 'Go forward',
-    },
-    {
-      cb: () => router.prefetch('/prefetched-html'),
-      name: 'Prefetch',
-    },
-    {
-      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
-      name: 'Push HTML',
-    },
-    {
-      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
-      name: 'Replace',
-    },
-  ];
-
-  return (
-    <div>
-      <div>pathname: {router.pathname}</div>
-      <div>
-        searchparams:{' '}
-        <ul>
-          {Object.entries(searchParams).map(([key, value]) => (
-            <li key={key}>
-              {key}: {value}
-            </li>
-          ))}
-        </ul>
-      </div>
-      {routerActions.map(({ cb, name }) => (
-        <div key={name} style={{ marginBottom: '1em' }}>
-          <button type="button" onClick={cb}>
-            {name}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default {
-  component: Component,
-  parameters: {
-    nextjs: {
-      router: {
-        pathname: '/hello',
-        query: {
-          foo: 'bar',
-        },
-      },
-    },
-  },
-};
-
-export const Default = {};

package/template/stories_nextjs-default-js/fonts/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

package/template/stories_nextjs-default-ts/Link.stories.module.css

@@ -1,3 +0,0 @@
-.link {
-  color: green;
-}

package/template/stories_nextjs-default-ts/Link.stories.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import style from './Link.stories.module.css';
-
-// `onClick`, `href`, and `ref` need to be passed to the DOM element
-// for proper handling
-const MyButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
->(function Button({ onClick, href, children }, ref) {
-  return (
-    <a href={href} onClick={onClick} ref={ref}>
-      {children}
-    </a>
-  );
-});
-
-const Component = () => (
-  <ul>
-    <li>
-      <Link href="/">Normal Link</Link>
-    </li>
-    <li>
-      <Link
-        href={{
-          pathname: '/with-url-object',
-          query: { name: 'test' },
-        }}
-      >
-        With URL Object
-      </Link>
-    </li>
-    <li>
-      <Link href="/replace-url" replace>
-        Replace the URL instead of push
-      </Link>
-    </li>
-    <li>
-      <Link href="/legacy-behaviour" legacyBehavior>
-        <a>Legacy behavior</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/child-is-functional-component" passHref legacyBehavior>
-        <MyButton>child is a functional component</MyButton>
-      </Link>
-    </li>
-    <li>
-      <Link href="/#hashid" scroll={false}>
-        Disables scrolling to the top
-      </Link>
-    </li>
-    <li>
-      <Link href="/no-prefetch" prefetch={false}>
-        No Prefetching
-      </Link>
-    </li>
-    <li>
-      <Link style={{ color: 'red' }} href="/with-style">
-        With style
-      </Link>
-    </li>
-    <li>
-      <Link className={style.link} href="/with-classname">
-        With className
-      </Link>
-    </li>
-  </ul>
-);
-
-export default {
-  component: Component,
-} as Meta<typeof Component>;
-
-export const Default: StoryObj<typeof Component> = {};
-
-export const InAppDir: StoryObj<typeof Component> = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-};

package/template/stories_nextjs-default-ts/Navigation.stories.tsx

@@ -1,81 +0,0 @@
-// usePathname and useSearchParams are only usable if experimental: {appDir: true} is set in next.config.js
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-function Component() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const searchParamsList = searchParams ? Array.from(searchParams.entries()) : [];
-
-  const routerActions = [
-    {
-      cb: () => router.back(),
-      name: 'Go back',
-    },
-    {
-      cb: () => router.forward(),
-      name: 'Go forward',
-    },
-    {
-      cb: () => router.prefetch('/prefetched-html'),
-      name: 'Prefetch',
-    },
-    {
-      // @ts-expect-error (old-api)
-      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
-      name: 'Push HTML',
-    },
-    {
-      cb: () => router.refresh(),
-      name: 'Refresh',
-    },
-    {
-      // @ts-expect-error (old-api)
-      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
-      name: 'Replace',
-    },
-  ];
-
-  return (
-    <div>
-      <div>pathname: {pathname}</div>
-      <div>
-        searchparams:{' '}
-        <ul>
-          {searchParamsList.map(([key, value]) => (
-            <li key={key}>
-              {key}: {value}
-            </li>
-          ))}
-        </ul>
-      </div>
-      {routerActions.map(({ cb, name }) => (
-        <div key={name} style={{ marginBottom: '1em' }}>
-          <button type="button" onClick={cb}>
-            {name}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default {
-  component: Component,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/hello',
-        query: {
-          foo: 'bar',
-        },
-      },
-    },
-  },
-} as Meta<typeof Component>;
-
-export const Default: StoryObj<typeof Component> = {};