diff --git a/examples/with-storybook/.babelrc b/examples/with-storybook/.babelrc deleted file mode 100644 index 9fcef0394fdf..000000000000 --- a/examples/with-storybook/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [] -} diff --git a/examples/with-storybook/.gitignore b/examples/with-storybook/.gitignore index 5f31e17fdd42..9d9f82483ba7 100644 --- a/examples/with-storybook/.gitignore +++ b/examples/with-storybook/.gitignore @@ -33,5 +33,5 @@ yarn-error.log* # vercel .vercel -# Storybook -/storybook-static +# storybook +storybook-static diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js index 974c2f95aac9..00b6466c3729 100644 --- a/examples/with-storybook/.storybook/main.js +++ b/examples/with-storybook/.storybook/main.js @@ -1,4 +1,15 @@ module.exports = { - stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + stories: [ + '../stories/**/*.stories.mdx', + '../stories/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + 'storybook-addon-next', + ], + framework: '@storybook/react', + core: { + builder: 'webpack5', + }, } diff --git a/examples/with-storybook/.storybook/preview.js b/examples/with-storybook/.storybook/preview.js index 2108b7940329..331c03edd392 100644 --- a/examples/with-storybook/.storybook/preview.js +++ b/examples/with-storybook/.storybook/preview.js @@ -1,16 +1,17 @@ -export const parameters = { - options: { - storySort: (a, b) => { - // We want the Welcome story at the top - if (b[1].kind === 'Welcome') { - return 1 - } +import '../styles/globals.css' +import '../styles/globals.scss' - // Sort the other stories by ID - // https://github.com/storybookjs/storybook/issues/548#issuecomment-530305279 - return a[1].kind === b[1].kind - ? 0 - : a[1].id.localeCompare(b[1].id, { numeric: true }) +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + nextRouter: { + query: { + foo: 'this-is-a-global-override', }, }, } diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md index 7720759c5893..9aee6d1ab3c7 100644 --- a/examples/with-storybook/README.md +++ b/examples/with-storybook/README.md @@ -1,6 +1,6 @@ # Example app with Storybook -This example shows a default set up of Storybook. Also included in the example is a custom component included in both Storybook and the Next.js application. +This example shows a default set up of Storybook using [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next). Included in this example are stories that demonstrate the ability to use Next.js features in Storybook. ### TypeScript diff --git a/examples/with-storybook/components/Links.js b/examples/with-storybook/components/Links.js new file mode 100644 index 000000000000..be88f606554e --- /dev/null +++ b/examples/with-storybook/components/Links.js @@ -0,0 +1,33 @@ +import Link from 'next/link' + +export const Links = () => ( + +) diff --git a/examples/with-storybook/components/MyComponent.js b/examples/with-storybook/components/MyComponent.js new file mode 100644 index 000000000000..9ecc8988b37b --- /dev/null +++ b/examples/with-storybook/components/MyComponent.js @@ -0,0 +1,2 @@ +/** @type {import('react').FC} */ +export const MyComponent = ({ children }) =>
{children}
diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js deleted file mode 100644 index 8f5129010b9b..000000000000 --- a/examples/with-storybook/components/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Home() { - return
Hello World
-} diff --git a/examples/with-storybook/next-env.d.ts b/examples/with-storybook/next-env.d.ts new file mode 100644 index 000000000000..4f11a03dc6cc --- /dev/null +++ b/examples/with-storybook/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-storybook/next.config.js b/examples/with-storybook/next.config.js new file mode 100644 index 000000000000..0d6071006ab3 --- /dev/null +++ b/examples/with-storybook/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + reactStrictMode: true, +} diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json index 80ca9c609267..835a8078a892 100644 --- a/examples/with-storybook/package.json +++ b/examples/with-storybook/package.json @@ -1,23 +1,30 @@ { "private": true, "scripts": { - "dev": "next", + "dev": "next dev", "build": "next build", "start": "next start", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook -s public/", + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public", "serve-storybook": "serve storybook-static" }, "dependencies": { "next": "latest", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "sass": "^1.49.0" }, "devDependencies": { - "@storybook/addon-essentials": "6.0.26", - "@storybook/addon-links": "6.0.26", - "@storybook/react": "6.0.26", - "babel-loader": "^8.0.5", - "serve": "11.3.2" + "@babel/core": "^7.16.7", + "@storybook/addon-actions": "^6.4.9", + "@storybook/addon-essentials": "^6.4.9", + "@storybook/addon-links": "^6.4.9", + "@storybook/builder-webpack5": "^6.4.9", + "@storybook/manager-webpack5": "^6.4.9", + "@storybook/react": "^6.4.9", + "babel-loader": "^8.2.3", + "serve": "13.0.2", + "storybook-addon-next": "1.3.1", + "typescript": "4.5.5" } } diff --git a/examples/with-storybook/pages/_app.js b/examples/with-storybook/pages/_app.js new file mode 100644 index 000000000000..fd297b4f3410 --- /dev/null +++ b/examples/with-storybook/pages/_app.js @@ -0,0 +1,9 @@ +import '../styles/globals.css' +import '../styles/globals.scss' + +/** @param {import('next/app').AppProps} props */ +function MyApp({ Component, pageProps }) { + return +} + +export default MyApp diff --git a/examples/with-storybook/pages/absoluteImports.js b/examples/with-storybook/pages/absoluteImports.js new file mode 100644 index 000000000000..341514c192f3 --- /dev/null +++ b/examples/with-storybook/pages/absoluteImports.js @@ -0,0 +1,19 @@ +import { Links } from 'components/Links' +import { MyComponent } from 'components/MyComponent' +import Head from 'next/head' + +export default function AbsoluteImports() { + return ( +
+ + Absolute Imports + + + +
+ This uses an absolute import:{' '} + Im absolutely imported +
+
+ ) +} diff --git a/examples/with-storybook/pages/cssModules.js b/examples/with-storybook/pages/cssModules.js new file mode 100644 index 000000000000..7aa1683a93c4 --- /dev/null +++ b/examples/with-storybook/pages/cssModules.js @@ -0,0 +1,18 @@ +import { Links } from 'components/Links' +import Head from 'next/head' +import styles from '../styles/CssModules.module.css' + +export default function CssModules() { + return ( +
+ + CSS Modules + + + +
+ This is styled using CSS Modules +
+
+ ) +} diff --git a/examples/with-storybook/pages/globalStyleImports.js b/examples/with-storybook/pages/globalStyleImports.js new file mode 100644 index 000000000000..2f1da586c494 --- /dev/null +++ b/examples/with-storybook/pages/globalStyleImports.js @@ -0,0 +1,19 @@ +import { Links } from 'components/Links' +import Head from 'next/head' + +export default function CssModules() { + return ( +
+ + Global style imports + + + +
+ The background of this page is set by "styles/globals.scss" and this + text size is set by "styles/globals.css". All global style imports need + to be done in ".storybook/preview.js" for storybook. +
+
+ ) +} diff --git a/examples/with-storybook/pages/index.js b/examples/with-storybook/pages/index.js index 37e7e01d2c64..dcc6d30e049e 100644 --- a/examples/with-storybook/pages/index.js +++ b/examples/with-storybook/pages/index.js @@ -1,10 +1,20 @@ -import HelloWorld from '../components' +import { Links } from 'components/Links' +import Head from 'next/head' export default function Home() { return (
-

Simple Storybook Example

- + + Storybook with Next + + + +
+

+ Click on any one of these links to see supported features in action +

+ +
) } diff --git a/examples/with-storybook/pages/nextjsImages.js b/examples/with-storybook/pages/nextjsImages.js new file mode 100644 index 000000000000..7a3aefb250a0 --- /dev/null +++ b/examples/with-storybook/pages/nextjsImages.js @@ -0,0 +1,29 @@ +import { Links } from 'components/Links' +import Image from 'next/image' +import Head from 'next/head' +import nyanCatImgSrc from 'public/nyan-cat.png' + +export default function NextjsImages() { + return ( +
+ + Nextjs Images + + + +
+

This image uses a remote image

+ Vercel Logo +

This image uses a static import with a "placeholder="blur"

+ Nyan Cat +
+
+ ) +} diff --git a/examples/with-storybook/pages/nextjsRouting.js b/examples/with-storybook/pages/nextjsRouting.js new file mode 100644 index 000000000000..55f7441edbed --- /dev/null +++ b/examples/with-storybook/pages/nextjsRouting.js @@ -0,0 +1,30 @@ +import { Links } from 'components/Links' +import Head from 'next/head' +import { useRouter } from 'next/router' + +export default function NextjsRouting() { + const router = useRouter() + console.log('this is the router NextjsRouting received 👉', router) + return ( +
+ + Nextjs Routing + + + +
+

+ Interact with any of the links and look at the "Actions" tab below (if + in storybook) +

+

+ This is the router read by this page (functions not serialized; check + the console for the full object): +

+ 
+          {JSON.stringify(router, null, 2)}
+
+
+
+ ) +} diff --git a/examples/with-storybook/pages/scssModules.js b/examples/with-storybook/pages/scssModules.js new file mode 100644 index 000000000000..d92876d84bef --- /dev/null +++ b/examples/with-storybook/pages/scssModules.js @@ -0,0 +1,18 @@ +import { Links } from 'components/Links' +import Head from 'next/head' +import styles from '../styles/ScssModules.module.scss' + +export default function ScssModules() { + return ( +
+ + SCSS Modules + + + +
+ This is styled using SCSS Modules +
+
+ ) +} diff --git a/examples/with-storybook/pages/styledJsx.js b/examples/with-storybook/pages/styledJsx.js new file mode 100644 index 000000000000..1f027711b2b8 --- /dev/null +++ b/examples/with-storybook/pages/styledJsx.js @@ -0,0 +1,31 @@ +import { Links } from 'components/Links' +import Head from 'next/head' + +export default function StyledJsx() { + return ( +
+ + Styled JSX + + + + +
+ This is styled using Styled JSX +
+
+ ) +} diff --git a/examples/with-storybook/pages/typescript.tsx b/examples/with-storybook/pages/typescript.tsx new file mode 100644 index 000000000000..e80e2ffad0be --- /dev/null +++ b/examples/with-storybook/pages/typescript.tsx @@ -0,0 +1,15 @@ +import { Links } from 'components/Links' +import Head from 'next/head' + +export default function Typescript() { + return ( +
+ + Typescript + + + +
This is a page using typescript
+
+ ) +} diff --git a/examples/with-storybook/public/favicon.ico b/examples/with-storybook/public/favicon.ico new file mode 100644 index 000000000000..718d6fea4835 Binary files /dev/null and b/examples/with-storybook/public/favicon.ico differ diff --git a/examples/with-storybook/public/nyan-cat.png b/examples/with-storybook/public/nyan-cat.png new file mode 100644 index 000000000000..58b24488b6ea Binary files /dev/null and b/examples/with-storybook/public/nyan-cat.png differ diff --git a/examples/with-storybook/public/serve.json b/examples/with-storybook/public/serve.json deleted file mode 100644 index 0967ef424bce..000000000000 --- a/examples/with-storybook/public/serve.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/examples/with-storybook/public/vercel.svg b/examples/with-storybook/public/vercel.svg new file mode 100644 index 000000000000..fbf0e25a651c --- /dev/null +++ b/examples/with-storybook/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-storybook/stories/button.stories.js b/examples/with-storybook/stories/button.stories.js deleted file mode 100644 index a8b486c538d1..000000000000 --- a/examples/with-storybook/stories/button.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { Button } from '@storybook/react/demo' - -export default { - title: 'Button', - argTypes: { onClick: { action: 'clicked' } }, -} - -const TemplateWithText = (args) => - -const TemplateWithEmoji = (args) => ( - -) - -export const withText = TemplateWithText.bind({}) - -withText.args = {} - -export const withSomeEmoji = TemplateWithEmoji.bind({}) - -withSomeEmoji.args = {} diff --git a/examples/with-storybook/stories/helloWorld.stories.js b/examples/with-storybook/stories/helloWorld.stories.js deleted file mode 100644 index 1c524fc556c6..000000000000 --- a/examples/with-storybook/stories/helloWorld.stories.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import HelloWorld from '../components' - -export default { title: 'Hello World' } - -export const simpleComponent = () => diff --git a/examples/with-storybook/stories/pages/absoluteImports.stories.jsx b/examples/with-storybook/stories/pages/absoluteImports.stories.jsx new file mode 100644 index 000000000000..6d7014c996b9 --- /dev/null +++ b/examples/with-storybook/stories/pages/absoluteImports.stories.jsx @@ -0,0 +1,8 @@ +import AbsoluteImports from '../../pages/absoluteImports' + +export default { + title: 'Pages', + component: AbsoluteImports, +} + +export const AbsoluteImportsPage = () => diff --git a/examples/with-storybook/stories/pages/cssModules.stories.jsx b/examples/with-storybook/stories/pages/cssModules.stories.jsx new file mode 100644 index 000000000000..85487cb6d02e --- /dev/null +++ b/examples/with-storybook/stories/pages/cssModules.stories.jsx @@ -0,0 +1,8 @@ +import CssModules from '../../pages/cssModules' + +export default { + title: 'Pages', + component: CssModules, +} + +export const CssModulesPage = () => diff --git a/examples/with-storybook/stories/pages/globalStyleImports.stories.jsx b/examples/with-storybook/stories/pages/globalStyleImports.stories.jsx new file mode 100644 index 000000000000..2ccd0d101ba5 --- /dev/null +++ b/examples/with-storybook/stories/pages/globalStyleImports.stories.jsx @@ -0,0 +1,8 @@ +import GlobalStyleImports from '../../pages/globalStyleImports' + +export default { + title: 'Pages', + component: GlobalStyleImports, +} + +export const GlobalStyleImportsPage = () => diff --git a/examples/with-storybook/stories/pages/home.stories.jsx b/examples/with-storybook/stories/pages/home.stories.jsx new file mode 100644 index 000000000000..0469edb7e614 --- /dev/null +++ b/examples/with-storybook/stories/pages/home.stories.jsx @@ -0,0 +1,8 @@ +import Home from '../../pages/index' + +export default { + title: 'Pages', + component: Home, +} + +export const HomePage = () => diff --git a/examples/with-storybook/stories/pages/nextjsImages.stories.jsx b/examples/with-storybook/stories/pages/nextjsImages.stories.jsx new file mode 100644 index 000000000000..373f4796f990 --- /dev/null +++ b/examples/with-storybook/stories/pages/nextjsImages.stories.jsx @@ -0,0 +1,8 @@ +import NextjsImages from '../../pages/nextjsImages' + +export default { + title: 'Pages', + component: NextjsImages, +} + +export const NextjsImagesPage = () => diff --git a/examples/with-storybook/stories/pages/nextjsRouting.stories.jsx b/examples/with-storybook/stories/pages/nextjsRouting.stories.jsx new file mode 100644 index 000000000000..44a6df44fe0b --- /dev/null +++ b/examples/with-storybook/stories/pages/nextjsRouting.stories.jsx @@ -0,0 +1,14 @@ +import NextjsRouting from '../../pages/nextjsRouting' + +export default { + title: 'Pages', + component: NextjsRouting, +} + +export const NextjsRoutingPage = () => + +NextjsRoutingPage.parameters = { + nextRouter: { + route: 'this-is-a-story-override', + }, +} diff --git a/examples/with-storybook/stories/pages/scssModules.stories.jsx b/examples/with-storybook/stories/pages/scssModules.stories.jsx new file mode 100644 index 000000000000..5de7527f3e99 --- /dev/null +++ b/examples/with-storybook/stories/pages/scssModules.stories.jsx @@ -0,0 +1,8 @@ +import ScssModules from '../../pages/scssModules' + +export default { + title: 'Pages', + component: ScssModules, +} + +export const ScssModulesPage = () => diff --git a/examples/with-storybook/stories/pages/styledJsx.stories.jsx b/examples/with-storybook/stories/pages/styledJsx.stories.jsx new file mode 100644 index 000000000000..1450c651082a --- /dev/null +++ b/examples/with-storybook/stories/pages/styledJsx.stories.jsx @@ -0,0 +1,8 @@ +import StyledJsx from '../../pages/styledJsx' + +export default { + title: 'Pages', + component: StyledJsx, +} + +export const StyledJsxPage = () => diff --git a/examples/with-storybook/stories/pages/typescript.stories.tsx b/examples/with-storybook/stories/pages/typescript.stories.tsx new file mode 100644 index 000000000000..40e0219b0399 --- /dev/null +++ b/examples/with-storybook/stories/pages/typescript.stories.tsx @@ -0,0 +1,8 @@ +import Typescript from '../../pages/typescript' + +export default { + title: 'Pages', + component: Typescript, +} + +export const TypescriptPage = () => diff --git a/examples/with-storybook/stories/welcome.stories.js b/examples/with-storybook/stories/welcome.stories.js deleted file mode 100644 index 2466b9882ddf..000000000000 --- a/examples/with-storybook/stories/welcome.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { linkTo } from '@storybook/addon-links' -import { Welcome } from '@storybook/react/demo' - -export default { title: 'Welcome' } - -export const toStorybook = () => diff --git a/examples/with-storybook/styles/CssModules.module.css b/examples/with-storybook/styles/CssModules.module.css new file mode 100644 index 000000000000..42720e93f033 --- /dev/null +++ b/examples/with-storybook/styles/CssModules.module.css @@ -0,0 +1,12 @@ +.main { + padding: 4rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.main span { + color: red; +} diff --git a/examples/with-storybook/styles/ScssModules.module.scss b/examples/with-storybook/styles/ScssModules.module.scss new file mode 100644 index 000000000000..76d90a7cbb43 --- /dev/null +++ b/examples/with-storybook/styles/ScssModules.module.scss @@ -0,0 +1,12 @@ +.main { + padding: 4rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + span { + color: steelblue; + } +} diff --git a/examples/with-storybook/styles/globals.css b/examples/with-storybook/styles/globals.css new file mode 100644 index 000000000000..be20427a07a5 --- /dev/null +++ b/examples/with-storybook/styles/globals.css @@ -0,0 +1,3 @@ +main { + font-size: 1.25rem; +} diff --git a/examples/with-storybook/styles/globals.scss b/examples/with-storybook/styles/globals.scss new file mode 100644 index 000000000000..cafcfc8beb0b --- /dev/null +++ b/examples/with-storybook/styles/globals.scss @@ -0,0 +1,3 @@ +body { + background: azure; +} diff --git a/examples/with-storybook/tsconfig.json b/examples/with-storybook/tsconfig.json new file mode 100644 index 000000000000..cabfca7e4ffc --- /dev/null +++ b/examples/with-storybook/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "esnext", + "moduleResolution": "node", + "isolatedModules": true, + "esModuleInterop": true, + "skipLibCheck": true, + "strict": true, + "resolveJsonModule": true, + "jsx": "preserve", + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "lib": ["dom", "dom.iterable", "esnext"], + "incremental": true, + "baseUrl": "." + }, + "exclude": ["node_modules", ".next", "out", "storybook-static"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] +}