first pass

examples/nextv12/.storybook/main.js

@@ -8,7 +8,6 @@ module.exports = {
     '@storybook/addon-essentials',
     'storybook-addon-next'
   ],
-  framework: '@storybook/react',
   core: {
     builder: 'webpack5'
   }

examples/nextv12/components/MyComponent.tsx

@@ -0,0 +1 @@
+export const MyComponent: React.FC = () => <div>My Component</div>

examples/nextv12/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextv12/package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "storybook": "start-storybook -p 6006 -s ./public",
+    "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {

examples/nextv12/pages/index.js

@@ -1,6 +1,10 @@
 import Head from 'next/head'
 import Image from 'next/image'
+import { MyComponent } from 'components/MyComponent'
 import styles from '../styles/Home.module.css'
+import nyanCatImgSrc from 'public/vercel.svg'
+
+console.log(nyanCatImgSrc)
 
 export default function Home() {
   return (
@@ -12,6 +16,15 @@ export default function Home() {
       </Head>
 
       <main className={styles.main}>
+        <MyComponent />
+        <Image
+          src={nyanCatImgSrc}
+          layout="responsive"
+          objectFit="cover"
+          objectPosition="center"
+          placeholder="blur"
+          alt="Some graphic"
+        />
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>

examples/nextv12/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "incremental": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "importHelpers": true,
+    "strict": true,
+    "composite": true,
+    "resolveJsonModule": true,
+    "noImplicitReturns": true,
+    "jsx": "preserve",
+    "allowJs": true,
+    "checkJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": "."
+  },
+  "exclude": ["node_modules", ".next", "out", "storybook-static"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.mjs",
+    "**/*.jsx",
+    ".storybook/*.js"
+  ]
+}

examples/nextv12/yarn.lock

@@ -4645,6 +4645,20 @@ css-loader@^5.0.1:
     schema-utils "^3.0.0"
     semver "^7.3.5"
 
+css-loader@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.5.1.tgz#0c43d4fbe0d97f699c91e9818cb585759091d1b1"
+  integrity sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.2.15"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    semver "^7.3.5"
+
 css-select@^4.1.3:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
@@ -7337,7 +7351,7 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-klona@^2.0.4:
+klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -8692,6 +8706,15 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -9669,6 +9692,14 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sass-loader@^12.4.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.4.0.tgz#260b0d51a8a373bb8e88efc11f6ba5583fea0bcf"
+  integrity sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@@ -10295,6 +10326,11 @@ style-loader@^2.0.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+style-loader@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
+  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
+
 [email protected], style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"

package.json

@@ -18,10 +18,9 @@
   "bugs": {
     "url": "https://github.com/RyanClementsHax/storybook-addon-next/issues"
   },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "dist/preset.js",
   "files": [
-    "lib"
+    "dist"
   ],
   "scripts": {
     "watch": "tsc --watch",
@@ -38,9 +37,14 @@
     "release": "semantic-release"
   },
   "dependencies": {
+    "@storybook/addons": "^6.4.10",
+    "css-loader": "^6.5.1",
     "image-size": "^1.0.0",
     "loader-utils": "^3.2.0",
-    "storybook-addon-next-router": "^3.1.1"
+    "postcss-loader": "^6.2.1",
+    "sass-loader": "^12.4.0",
+    "storybook-addon-next-router": "^3.1.1",
+    "style-loader": "^3.3.1"
   },
   "devDependencies": {
     "@types/loader-utils": "^2.0.3",
@@ -64,9 +68,9 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
+    "@storybook/react": "^6.0.0",
     "next": "^12.0.0",
     "react": "^16.8.0 || ^17.0.0",
-    "webpack": "^4.0.0 || ^5.0.0",
-    "@storybook/react": "^6.0.0"
+    "webpack": "^4.0.0 || ^5.0.0"
   }
 }

preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset.js')

src/next-image-loader-stub.ts

@@ -21,10 +21,10 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function (
 
   this.emitFile(outputPath, content, undefined)
 
-  const { width, height } = imageSizeOf(content)
+  const { width, height } = imageSizeOf(Buffer.from(content))
 
   return `export default ${JSON.stringify({
-    src: outputPath,
+    src: `/${outputPath}`,
     height,
     width,
     blurDataURL: outputPath

src/next-image-stub.tsx

@@ -1,12 +1,16 @@
+import React from 'react'
 import * as NextImage from 'next/image'
 import { ImageProps } from 'next/image'
 
+console.log('modifying!!!', NextImage)
+
 const OriginalNextImage = NextImage.default
 
 // eslint-disable-next-line no-import-assign
 Object.defineProperty(NextImage, 'default', {
   configurable: true,
   value: (props: ImageProps) => {
+    console.log('in image', props)
     if (typeof props.src === 'string') {
       return (
         <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />

src/index.ts → src/preset.ts

@@ -4,27 +4,36 @@ import path from 'path'
 import { NextConfig } from 'next'
 import { Configuration as WebpackConfig } from 'webpack'
 
-export const addons = ['storybook-addon-next-router']
+console.log(require.resolve('./preview'))
+
+// export const addons = ['storybook-addon-next-router']
 
 export const config = (entry: string[] = []): string[] => [
   ...entry,
   require.resolve('./preview')
 ]
 
+export const managerEntries = (entry: string[] = []): string[] => [
+  ...entry,
+  require.resolve('./register')
+]
+
 export const webpackFinal = async (
-  baseConfig: WebpackConfig,
-  ...params: unknown[]
+  baseConfig: WebpackConfig
 ): Promise<WebpackConfig> => {
-  console.log(params)
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-expect-error
-  const nextConfig = await import('./next.config.js')
-  const nextConfigResolved: NextConfig = nextConfig([], baseConfig)
+  // check
+  const nextConfig = await import(
+    path.resolve(path.resolve(), 'next.config.js')
+  )
+  const nextConfigResolved: NextConfig =
+    typeof nextConfig === 'function' ? nextConfig([], baseConfig) : nextConfig
 
   configureRootAbsoluteImport(baseConfig)
-  configureCss(baseConfig, nextConfigResolved)
+  // configureCss(baseConfig, nextConfigResolved)
   configureStaticImageImport(baseConfig)
 
+  console.log(baseConfig.module?.rules as any)
+
   return baseConfig
 }
 

src/preview.ts

@@ -1,6 +1,8 @@
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 import './next-image-stub'
 
+console.log('HELLOOOOOOOOOOOOO')
+
 export const parameters = {
   nextRouter: {
     Provider: RouterContext.Provider

src/register.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons'
+
+const ADDON_ID = 'storybook-addon-next'
+
+addons.register(ADDON_ID, () => {
+  return
+})

tsconfig.json

@@ -13,7 +13,7 @@
     /* Language and Environment */
     "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "preserve" /* Specify what JSX code is generated. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
@@ -28,9 +28,7 @@
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    "paths": {
-      "@/*": ["./src/*"]
-    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
+    // "paths": {}                                       /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
@@ -49,7 +47,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-    "outDir": "lib" /* Specify an output folder for all emitted files. */,
+    "outDir": "dist" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     "importHelpers": true /* Allow importing helper functions from tslib once per project, instead of including them per-file. */,