Add [with-storybook-typescript] example

examples/with-storybook-typescript/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

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)

examples/with-storybook-typescript/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  addons: ['@storybook/preset-typescript'],
+}

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.

examples/with-storybook-typescript/components/index.tsx

@@ -0,0 +1,4 @@
+import React from 'react'
+export default function Home() {
+  return <div>Hello World</div>
+}

examples/with-storybook-typescript/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

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"
+  }
+}

examples/with-storybook-typescript/pages/index.tsx

@@ -0,0 +1,10 @@
+import HelloWorld from '../components'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Simple Storybook Example</h1>
+      <HelloWorld />
+    </div>
+  )
+}

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 = () => (
+  <Button onClick={action('clicked')}>Hello Button</Button>
+)
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+)

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 = () => <HelloWorld />

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 = () => <Welcome showApp={linkTo('Button')} />

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"]
+}