diff --git a/examples/with-storybook-typescript/.storybook/addons.js b/examples/with-storybook-typescript/.storybook/addons.js new file mode 100644 index 0000000000000..402ccc13eba33 --- /dev/null +++ b/examples/with-storybook-typescript/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register' +import '@storybook/addon-links/register' diff --git a/examples/with-storybook-typescript/.storybook/config.js b/examples/with-storybook-typescript/.storybook/config.js new file mode 100644 index 0000000000000..e01335c2f110a --- /dev/null +++ b/examples/with-storybook-typescript/.storybook/config.js @@ -0,0 +1,25 @@ +import { configure, addParameters } from '@storybook/react' + +addParameters({ + options: { + storySort: (a, b) => { + // We want the Welcome story at the top + if (a[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 }) + }, + }, +}) + +// automatically import all files ending in *.stories.(ts|tsx) +const req = require.context('../stories', true, /.stories.tsx?$/) + +// the first argument can be an array too, so if you want to load from different locations or +// different extensions, you can do it like this: configure([req1, req2], module) +configure(req, module) diff --git a/examples/with-storybook-typescript/.storybook/main.js b/examples/with-storybook-typescript/.storybook/main.js new file mode 100644 index 0000000000000..a9f47cffb9cfc --- /dev/null +++ b/examples/with-storybook-typescript/.storybook/main.js @@ -0,0 +1,3 @@ +module.exports = { + addons: ['@storybook/preset-typescript'], +} diff --git a/examples/with-storybook-typescript/README.md b/examples/with-storybook-typescript/README.md new file mode 100644 index 0000000000000..c37520be320b1 --- /dev/null +++ b/examples/with-storybook-typescript/README.md @@ -0,0 +1,52 @@ +# Example app with Storybook and TypeScript. + +This example shows a default set up of Storybook plus TypeScript, using [@storybook/preset-typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript). Also included in the example is a custom component included in both Storybook and the Next.js application. + +## How to use + +### Using `create-next-app` + +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-typescript with-storybook-app +# or +yarn create next-app --example with-storybook-typescript with-storybook-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-storybook-typescript +cd with-storybook-typescript +``` + +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 +``` + +You can use [Vercel](https://vercel.com/import?filter=next.js&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-typescript/components/index.tsx b/examples/with-storybook-typescript/components/index.tsx new file mode 100644 index 0000000000000..c9eaaf748d055 --- /dev/null +++ b/examples/with-storybook-typescript/components/index.tsx @@ -0,0 +1,4 @@ +import React from 'react' +export default function Home() { + return
Hello World
+} diff --git a/examples/with-storybook-typescript/next-env.d.ts b/examples/with-storybook-typescript/next-env.d.ts new file mode 100644 index 0000000000000..7b7aa2c7727d8 --- /dev/null +++ b/examples/with-storybook-typescript/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-storybook-typescript/package.json b/examples/with-storybook-typescript/package.json new file mode 100644 index 0000000000000..4aa78f1f1824b --- /dev/null +++ b/examples/with-storybook-typescript/package.json @@ -0,0 +1,31 @@ +{ + "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": "ISC", + "devDependencies": { + "@storybook/addon-actions": "5.3.19", + "@storybook/addon-links": "5.3.19", + "@storybook/addons": "5.3.19", + "@storybook/preset-typescript": "3.0.0", + "@storybook/react": "5.3.19", + "@types/node": "14.0.13", + "@types/react": "16.9.38", + "babel-loader": "^8.0.5", + "fork-ts-checker-webpack-plugin": "5.0.4", + "ts-loader": "7.0.5", + "typescript": "3.9.5" + } +} diff --git a/examples/with-storybook-typescript/pages/index.tsx b/examples/with-storybook-typescript/pages/index.tsx new file mode 100644 index 0000000000000..37e7e01d2c642 --- /dev/null +++ b/examples/with-storybook-typescript/pages/index.tsx @@ -0,0 +1,10 @@ +import HelloWorld from '../components' + +export default function Home() { + return ( +
+

Simple Storybook Example

+ +
+ ) +} diff --git a/examples/with-storybook-typescript/stories/button.stories.tsx b/examples/with-storybook-typescript/stories/button.stories.tsx new file mode 100644 index 0000000000000..adcd12fa27712 --- /dev/null +++ b/examples/with-storybook-typescript/stories/button.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { action } from '@storybook/addon-actions' +import { Button } from '@storybook/react/demo' + +export default { title: 'Button' } + +export const withText = () => ( + +) + +export const withSomeEmoji = () => ( + +) diff --git a/examples/with-storybook-typescript/stories/helloWorld.stories.tsx b/examples/with-storybook-typescript/stories/helloWorld.stories.tsx new file mode 100644 index 0000000000000..1c524fc556c66 --- /dev/null +++ b/examples/with-storybook-typescript/stories/helloWorld.stories.tsx @@ -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-typescript/stories/welcome.stories.tsx b/examples/with-storybook-typescript/stories/welcome.stories.tsx new file mode 100644 index 0000000000000..2466b9882ddfc --- /dev/null +++ b/examples/with-storybook-typescript/stories/welcome.stories.tsx @@ -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/examples/with-storybook-typescript/tsconfig.json b/examples/with-storybook-typescript/tsconfig.json new file mode 100644 index 0000000000000..c5d53d8983d19 --- /dev/null +++ b/examples/with-storybook-typescript/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "exclude": ["node_modules"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] +}