From 2c8db405f0d2f2336ee67bef3d20e1688bde5d5f Mon Sep 17 00:00:00 2001 From: eric-burel Date: Fri, 12 Mar 2021 17:20:19 +0100 Subject: [PATCH] add an example using @next/plugin-storybook + fix webpack rules --- examples/with-storybook-advanced/.babelrc | 4 ++ examples/with-storybook-advanced/.gitignore | 37 ++++++++++++++++ .../.storybook/main.js | 8 ++++ .../.storybook/preview.js | 16 +++++++ examples/with-storybook-advanced/README.md | 43 +++++++++++++++++++ .../components/index.js | 5 +++ .../with-storybook-advanced/jsconfig.json | 8 ++++ examples/with-storybook-advanced/lib/hello.js | 1 + examples/with-storybook-advanced/package.json | 25 +++++++++++ .../with-storybook-advanced/pages/index.js | 10 +++++ .../stories/button.stories.js | 25 +++++++++++ .../stories/helloWorld.stories.js | 6 +++ .../stories/welcome.stories.js | 7 +++ packages/next-plugin-storybook/preset.js | 4 +- 14 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 examples/with-storybook-advanced/.babelrc create mode 100644 examples/with-storybook-advanced/.gitignore create mode 100644 examples/with-storybook-advanced/.storybook/main.js create mode 100644 examples/with-storybook-advanced/.storybook/preview.js create mode 100644 examples/with-storybook-advanced/README.md create mode 100644 examples/with-storybook-advanced/components/index.js create mode 100644 examples/with-storybook-advanced/jsconfig.json create mode 100644 examples/with-storybook-advanced/lib/hello.js create mode 100644 examples/with-storybook-advanced/package.json create mode 100644 examples/with-storybook-advanced/pages/index.js create mode 100644 examples/with-storybook-advanced/stories/button.stories.js create mode 100644 examples/with-storybook-advanced/stories/helloWorld.stories.js create mode 100644 examples/with-storybook-advanced/stories/welcome.stories.js diff --git a/examples/with-storybook-advanced/.babelrc b/examples/with-storybook-advanced/.babelrc new file mode 100644 index 0000000000000..9fcef0394fdf0 --- /dev/null +++ b/examples/with-storybook-advanced/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [] +} diff --git a/examples/with-storybook-advanced/.gitignore b/examples/with-storybook-advanced/.gitignore new file mode 100644 index 0000000000000..a423604f97788 --- /dev/null +++ b/examples/with-storybook-advanced/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# Storybook +/storybook-static \ No newline at end of file diff --git a/examples/with-storybook-advanced/.storybook/main.js b/examples/with-storybook-advanced/.storybook/main.js new file mode 100644 index 0000000000000..e717439a8c747 --- /dev/null +++ b/examples/with-storybook-advanced/.storybook/main.js @@ -0,0 +1,8 @@ +module.exports = { + stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@next/plugin-storybook', + ], +} diff --git a/examples/with-storybook-advanced/.storybook/preview.js b/examples/with-storybook-advanced/.storybook/preview.js new file mode 100644 index 0000000000000..2108b79403292 --- /dev/null +++ b/examples/with-storybook-advanced/.storybook/preview.js @@ -0,0 +1,16 @@ +export const parameters = { + options: { + storySort: (a, b) => { + // We want the Welcome story at the top + if (b[1].kind === 'Welcome') { + return 1 + } + + // 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 }) + }, + }, +} diff --git a/examples/with-storybook-advanced/README.md b/examples/with-storybook-advanced/README.md new file mode 100644 index 0000000000000..d148a5c06a39a --- /dev/null +++ b/examples/with-storybook-advanced/README.md @@ -0,0 +1,43 @@ +# Example app with Storybook + +This example shows a default set up of Storybook that includes the same build features as Next (built-in CSS support, module path aliases...). + +/!\ This example includes experimental features. Use `with-storybook` for a simpler but safer example. + +## TypeScript + +As of v6.0, Storybook has built-in TypeScript support, so no configuration is needed. If you want to customize the default configuration, refer to the [TypeScript docs](https://storybook.js.org/docs/react/configure/typescript). + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-storybook&project-name=with-storybook&repository-name=with-storybook) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-storybook with-storybook-app +# or +yarn create next-app --example with-storybook with-storybook-app +``` + +### Run Storybook + +```bash +npm run storybook +# or +yarn storybook +``` + +### Build Static Storybook + +```bash +npm run build-storybook +# or +yarn build-storybook +``` + +You can use [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy Storybook. Specify `storybook-static` as the output directory. diff --git a/examples/with-storybook-advanced/components/index.js b/examples/with-storybook-advanced/components/index.js new file mode 100644 index 0000000000000..71cbc635b7b9f --- /dev/null +++ b/examples/with-storybook-advanced/components/index.js @@ -0,0 +1,5 @@ +import helloWorld from '@/hello' + +export default function Home() { + return
{helloWorld}
+} diff --git a/examples/with-storybook-advanced/jsconfig.json b/examples/with-storybook-advanced/jsconfig.json new file mode 100644 index 0000000000000..8ae13e1a4edf3 --- /dev/null +++ b/examples/with-storybook-advanced/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["lib/*"] + } + } +} diff --git a/examples/with-storybook-advanced/lib/hello.js b/examples/with-storybook-advanced/lib/hello.js new file mode 100644 index 0000000000000..c0ec8f5c17d24 --- /dev/null +++ b/examples/with-storybook-advanced/lib/hello.js @@ -0,0 +1 @@ +export default 'Hello world' diff --git a/examples/with-storybook-advanced/package.json b/examples/with-storybook-advanced/package.json new file mode 100644 index 0000000000000..0d7fb33cc060e --- /dev/null +++ b/examples/with-storybook-advanced/package.json @@ -0,0 +1,25 @@ +{ + "name": "with-storybook", + "version": "1.0.0", + "main": "index.js", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "dependencies": { + "next": "latest", + "react": "^16.7.0", + "react-dom": "^16.7.0" + }, + "license": "MIT", + "devDependencies": { + "@next/plugin-storybook": "^10.0.8", + "@storybook/addon-essentials": "6.0.26", + "@storybook/addon-links": "6.0.26", + "@storybook/react": "6.0.26", + "babel-loader": "^8.0.5" + } +} diff --git a/examples/with-storybook-advanced/pages/index.js b/examples/with-storybook-advanced/pages/index.js new file mode 100644 index 0000000000000..37e7e01d2c642 --- /dev/null +++ b/examples/with-storybook-advanced/pages/index.js @@ -0,0 +1,10 @@ +import HelloWorld from '../components' + +export default function Home() { + return ( +
+

Simple Storybook Example

+ +
+ ) +} diff --git a/examples/with-storybook-advanced/stories/button.stories.js b/examples/with-storybook-advanced/stories/button.stories.js new file mode 100644 index 0000000000000..a8b486c538d10 --- /dev/null +++ b/examples/with-storybook-advanced/stories/button.stories.js @@ -0,0 +1,25 @@ +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-advanced/stories/helloWorld.stories.js b/examples/with-storybook-advanced/stories/helloWorld.stories.js new file mode 100644 index 0000000000000..1c524fc556c66 --- /dev/null +++ b/examples/with-storybook-advanced/stories/helloWorld.stories.js @@ -0,0 +1,6 @@ +import React from 'react' +import HelloWorld from '../components' + +export default { title: 'Hello World' } + +export const simpleComponent = () => diff --git a/examples/with-storybook-advanced/stories/welcome.stories.js b/examples/with-storybook-advanced/stories/welcome.stories.js new file mode 100644 index 0000000000000..2466b9882ddfc --- /dev/null +++ b/examples/with-storybook-advanced/stories/welcome.stories.js @@ -0,0 +1,7 @@ +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/packages/next-plugin-storybook/preset.js b/packages/next-plugin-storybook/preset.js index 806677aab0f5a..0cef351937ea6 100644 --- a/packages/next-plugin-storybook/preset.js +++ b/packages/next-plugin-storybook/preset.js @@ -25,7 +25,7 @@ async function webpackFinal(config) { ...nextWebpackConfig.resolve, } - config.module.rules = { + config.module.rules = [ ...filterModuleRules(config), ...nextWebpackConfig.module.rules.map((rule) => { // we need to resolve next-babel-loader since it's not available @@ -37,7 +37,7 @@ async function webpackFinal(config) { } return rule }), - } + ] return config }