diff --git a/examples/with-storybook/.storybook/addons.js b/examples/with-storybook/.storybook/addons.js new file mode 100644 index 00000000..402ccc13 --- /dev/null +++ b/examples/with-storybook/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register' +import '@storybook/addon-links/register' diff --git a/examples/with-storybook/.storybook/config.js b/examples/with-storybook/.storybook/config.js new file mode 100644 index 00000000..0f1c26f7 --- /dev/null +++ b/examples/with-storybook/.storybook/config.js @@ -0,0 +1,9 @@ +import { configure } from '@storybook/react' + +// automatically import all files ending in *.stories.js +const req = require.context('../stories', true, /.stories.js$/) +function loadStories () { + req.keys().forEach(filename => req(filename)) +} + +configure(loadStories, module) diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md new file mode 100644 index 00000000..5bbe409a --- /dev/null +++ b/examples/with-storybook/README.md @@ -0,0 +1,65 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-storybook) + +# Example app with Storybook + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) 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 +``` + +### Download manually + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-storybook +cd with-storybook +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +## Run Storybook + +```bash +npm run storybook +# or +yarn storybook +``` + +## Build Static Storybook + +```bash +npm run build-storybook +# or +yarn build-storybook +``` + +Deploy Storybook to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +npm run build-storybook +# or +yarn build-storybook +# then +cd storybook-static +now +``` + +## The idea behind the example + +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. diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js new file mode 100644 index 00000000..dbfaaa59 --- /dev/null +++ b/examples/with-storybook/components/index.js @@ -0,0 +1,2 @@ +import React from 'react' +export default () =>
Hello World
diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json new file mode 100644 index 00000000..82ed7970 --- /dev/null +++ b/examples/with-storybook/package.json @@ -0,0 +1,26 @@ +{ + "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.0.0", + "react-dom": "^16.0.0" + }, + "license": "ISC", + "devDependencies": { + "@storybook/react": "^3.4.7", + "@storybook/addon-actions": "^3.4.7", + "@storybook/addon-links": "^3.4.7", + "@storybook/addons": "^3.4.7", + "babel-core": "^6.26.3", + "babel-runtime": "^6.26.0" + } +} diff --git a/examples/with-storybook/pages/index.js b/examples/with-storybook/pages/index.js new file mode 100644 index 00000000..8a454e14 --- /dev/null +++ b/examples/with-storybook/pages/index.js @@ -0,0 +1,7 @@ +import HelloWorld from '../components' +export default () => ( +
+

Simple Storybook Example

+ +
+) diff --git a/examples/with-storybook/stories/index.stories.js b/examples/with-storybook/stories/index.stories.js new file mode 100644 index 00000000..f97e8916 --- /dev/null +++ b/examples/with-storybook/stories/index.stories.js @@ -0,0 +1,26 @@ +import React from 'react' + +import { storiesOf } from '@storybook/react' +import { action } from '@storybook/addon-actions' +import { linkTo } from '@storybook/addon-links' + +import { Button, Welcome } from '@storybook/react/demo' +import HelloWorld from '../components' + +storiesOf('Welcome', module).add('to Storybook', () => ( + +)) + +storiesOf('Button', module) + .add('with text', () => ( + + )) + .add('with some emoji', () => ( + + )) + +storiesOf('HelloWorld', module).add('simple component', () => )