From 49cd139018c22fbfc5df00094037f9f9c6f416a1 Mon Sep 17 00:00:00 2001 From: Ethan Arrowood Date: Tue, 6 Jun 2023 12:33:11 -0600 Subject: [PATCH] update with-storybook to be copy from vercel/vercel --- examples/with-storybook/.gitignore | 3 - examples/with-storybook/.storybook/main.js | 15 -- examples/with-storybook/.storybook/main.ts | 17 ++ examples/with-storybook/.storybook/preview.js | 17 -- examples/with-storybook/.storybook/preview.ts | 15 ++ .../with-storybook/app/api/hello/route.ts | 3 + .../{public => app}/favicon.ico | Bin examples/with-storybook/app/globals.css | 107 ++++++++ examples/with-storybook/app/layout.tsx | 18 ++ examples/with-storybook/app/page.module.css | 229 +++++++++++++++++ examples/with-storybook/app/page.tsx | 102 ++++++++ examples/with-storybook/components/Links.js | 33 --- .../with-storybook/components/MyComponent.js | 2 - examples/with-storybook/next-env.d.ts | 5 - examples/with-storybook/next.config.js | 8 +- examples/with-storybook/package.json | 41 +-- examples/with-storybook/pages/_app.js | 9 - .../with-storybook/pages/absoluteImports.js | 19 -- examples/with-storybook/pages/cssModules.js | 18 -- .../pages/globalStyleImports.js | 19 -- examples/with-storybook/pages/index.js | 20 -- examples/with-storybook/pages/nextjsImages.js | 29 --- .../with-storybook/pages/nextjsRouting.js | 30 --- examples/with-storybook/pages/scssModules.js | 18 -- examples/with-storybook/pages/styledJsx.js | 31 --- examples/with-storybook/pages/typescript.tsx | 15 -- examples/with-storybook/public/next.svg | 1 + examples/with-storybook/public/nyan-cat.png | Bin 12273 -> 0 bytes examples/with-storybook/public/vercel.svg | 5 +- .../with-storybook/stories/Button.stories.ts | 46 ++++ examples/with-storybook/stories/Button.tsx | 56 ++++ .../with-storybook/stories/Header.stories.ts | 26 ++ examples/with-storybook/stories/Header.tsx | 71 ++++++ .../with-storybook/stories/Introduction.mdx | 239 ++++++++++++++++++ .../with-storybook/stories/Page.stories.ts | 29 +++ examples/with-storybook/stories/Page.tsx | 91 +++++++ .../stories/assets/code-brackets.svg | 1 + .../with-storybook/stories/assets/colors.svg | 1 + .../stories/assets/comments.svg | 1 + .../stories/assets/direction.svg | 1 + .../with-storybook/stories/assets/flow.svg | 1 + .../with-storybook/stories/assets/plugin.svg | 1 + .../with-storybook/stories/assets/repo.svg | 1 + .../stories/assets/stackalt.svg | 1 + examples/with-storybook/stories/button.css | 30 +++ examples/with-storybook/stories/header.css | 32 +++ examples/with-storybook/stories/page.css | 69 +++++ .../stories/pages/absoluteImports.stories.jsx | 8 - .../stories/pages/cssModules.stories.jsx | 8 - .../pages/globalStyleImports.stories.jsx | 8 - .../stories/pages/home.stories.jsx | 8 - .../stories/pages/nextjsImages.stories.jsx | 8 - .../stories/pages/nextjsRouting.stories.jsx | 14 - .../stories/pages/scssModules.stories.jsx | 8 - .../stories/pages/styledJsx.stories.jsx | 8 - .../stories/pages/typescript.stories.tsx | 8 - .../styles/CssModules.module.css | 12 - .../styles/ScssModules.module.scss | 12 - examples/with-storybook/styles/globals.css | 3 - examples/with-storybook/styles/globals.scss | 3 - examples/with-storybook/tsconfig.json | 29 ++- examples/with-storybook/vercel.json | 4 + 62 files changed, 1241 insertions(+), 426 deletions(-) delete mode 100644 examples/with-storybook/.storybook/main.js create mode 100644 examples/with-storybook/.storybook/main.ts delete mode 100644 examples/with-storybook/.storybook/preview.js create mode 100644 examples/with-storybook/.storybook/preview.ts create mode 100644 examples/with-storybook/app/api/hello/route.ts rename examples/with-storybook/{public => app}/favicon.ico (100%) create mode 100644 examples/with-storybook/app/globals.css create mode 100644 examples/with-storybook/app/layout.tsx create mode 100644 examples/with-storybook/app/page.module.css create mode 100644 examples/with-storybook/app/page.tsx delete mode 100644 examples/with-storybook/components/Links.js delete mode 100644 examples/with-storybook/components/MyComponent.js delete mode 100644 examples/with-storybook/next-env.d.ts delete mode 100644 examples/with-storybook/pages/_app.js delete mode 100644 examples/with-storybook/pages/absoluteImports.js delete mode 100644 examples/with-storybook/pages/cssModules.js delete mode 100644 examples/with-storybook/pages/globalStyleImports.js delete mode 100644 examples/with-storybook/pages/index.js delete mode 100644 examples/with-storybook/pages/nextjsImages.js delete mode 100644 examples/with-storybook/pages/nextjsRouting.js delete mode 100644 examples/with-storybook/pages/scssModules.js delete mode 100644 examples/with-storybook/pages/styledJsx.js delete mode 100644 examples/with-storybook/pages/typescript.tsx create mode 100644 examples/with-storybook/public/next.svg delete mode 100644 examples/with-storybook/public/nyan-cat.png create mode 100644 examples/with-storybook/stories/Button.stories.ts create mode 100644 examples/with-storybook/stories/Button.tsx create mode 100644 examples/with-storybook/stories/Header.stories.ts create mode 100644 examples/with-storybook/stories/Header.tsx create mode 100644 examples/with-storybook/stories/Introduction.mdx create mode 100644 examples/with-storybook/stories/Page.stories.ts create mode 100644 examples/with-storybook/stories/Page.tsx create mode 100644 examples/with-storybook/stories/assets/code-brackets.svg create mode 100644 examples/with-storybook/stories/assets/colors.svg create mode 100644 examples/with-storybook/stories/assets/comments.svg create mode 100644 examples/with-storybook/stories/assets/direction.svg create mode 100644 examples/with-storybook/stories/assets/flow.svg create mode 100644 examples/with-storybook/stories/assets/plugin.svg create mode 100644 examples/with-storybook/stories/assets/repo.svg create mode 100644 examples/with-storybook/stories/assets/stackalt.svg create mode 100644 examples/with-storybook/stories/button.css create mode 100644 examples/with-storybook/stories/header.css create mode 100644 examples/with-storybook/stories/page.css delete mode 100644 examples/with-storybook/stories/pages/absoluteImports.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/cssModules.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/globalStyleImports.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/home.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/nextjsImages.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/nextjsRouting.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/scssModules.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/styledJsx.stories.jsx delete mode 100644 examples/with-storybook/stories/pages/typescript.stories.tsx delete mode 100644 examples/with-storybook/styles/CssModules.module.css delete mode 100644 examples/with-storybook/styles/ScssModules.module.scss delete mode 100644 examples/with-storybook/styles/globals.css delete mode 100644 examples/with-storybook/styles/globals.scss create mode 100644 examples/with-storybook/vercel.json diff --git a/examples/with-storybook/.gitignore b/examples/with-storybook/.gitignore index 78b36f51a1e52..8f322f0d8f495 100644 --- a/examples/with-storybook/.gitignore +++ b/examples/with-storybook/.gitignore @@ -33,6 +33,3 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts - -# storybook -storybook-static diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js deleted file mode 100644 index 00b6466c3729a..0000000000000 --- a/examples/with-storybook/.storybook/main.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - 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/main.ts b/examples/with-storybook/.storybook/main.ts new file mode 100644 index 0000000000000..48166cebdbdcc --- /dev/null +++ b/examples/with-storybook/.storybook/main.ts @@ -0,0 +1,17 @@ +import type { StorybookConfig } from '@storybook/nextjs' +const config: StorybookConfig = { + stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + framework: { + name: '@storybook/nextjs', + options: {}, + }, + docs: { + autodocs: 'tag', + }, +} +export default config diff --git a/examples/with-storybook/.storybook/preview.js b/examples/with-storybook/.storybook/preview.js deleted file mode 100644 index 331c03edd3922..0000000000000 --- a/examples/with-storybook/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import '../styles/globals.css' -import '../styles/globals.scss' - -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/.storybook/preview.ts b/examples/with-storybook/.storybook/preview.ts new file mode 100644 index 0000000000000..f3f8a70cf66b5 --- /dev/null +++ b/examples/with-storybook/.storybook/preview.ts @@ -0,0 +1,15 @@ +import type { Preview } from '@storybook/react' + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +} + +export default preview diff --git a/examples/with-storybook/app/api/hello/route.ts b/examples/with-storybook/app/api/hello/route.ts new file mode 100644 index 0000000000000..d1cc6ee25fedf --- /dev/null +++ b/examples/with-storybook/app/api/hello/route.ts @@ -0,0 +1,3 @@ +export async function GET(request: Request) { + return new Response('Hello, Next.js!') +} diff --git a/examples/with-storybook/public/favicon.ico b/examples/with-storybook/app/favicon.ico similarity index 100% rename from examples/with-storybook/public/favicon.ico rename to examples/with-storybook/app/favicon.ico diff --git a/examples/with-storybook/app/globals.css b/examples/with-storybook/app/globals.css new file mode 100644 index 0000000000000..d4f491e152dd0 --- /dev/null +++ b/examples/with-storybook/app/globals.css @@ -0,0 +1,107 @@ +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} diff --git a/examples/with-storybook/app/layout.tsx b/examples/with-storybook/app/layout.tsx new file mode 100644 index 0000000000000..3d9d72318cec6 --- /dev/null +++ b/examples/with-storybook/app/layout.tsx @@ -0,0 +1,18 @@ +import './globals.css' + +export const metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/examples/with-storybook/app/page.module.css b/examples/with-storybook/app/page.module.css new file mode 100644 index 0000000000000..9411a5e6f26a5 --- /dev/null +++ b/examples/with-storybook/app/page.module.css @@ -0,0 +1,229 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.grid { + display: grid; + grid-template-columns: repeat(4, minmax(25%, auto)); + width: var(--max-width); + max-width: 100%; +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + transition: background 200ms, border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 4rem 0; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo { + position: relative; +} +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +@media (prefers-reduced-motion) { + .card:hover span { + transform: none; + } +} + +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); + } +} + +@media (prefers-color-scheme: dark) { + .vercelLogo { + filter: invert(1); + } + + .logo { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/examples/with-storybook/app/page.tsx b/examples/with-storybook/app/page.tsx new file mode 100644 index 0000000000000..01946f7979e18 --- /dev/null +++ b/examples/with-storybook/app/page.tsx @@ -0,0 +1,102 @@ +import Image from 'next/image' +import { Inter } from 'next/font/google' +import styles from './page.module.css' + +const inter = Inter({ subsets: ['latin'] }) + +export default function Home() { + return ( +
+
+

+ Get started by editing  + app/page.tsx +

+
+ + By{' '} + Vercel Logo + +
+
+ +
+ Next.js Logo +
+ +
+ +

+ Docs -> +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn -> +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates -> +

+

Explore the Next.js 13 playground.

+ + + +

+ Deploy -> +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ) +} diff --git a/examples/with-storybook/components/Links.js b/examples/with-storybook/components/Links.js deleted file mode 100644 index be88f606554ed..0000000000000 --- a/examples/with-storybook/components/Links.js +++ /dev/null @@ -1,33 +0,0 @@ -import Link from 'next/link' - -export const Links = () => ( - -) diff --git a/examples/with-storybook/components/MyComponent.js b/examples/with-storybook/components/MyComponent.js deleted file mode 100644 index 9ecc8988b37b8..0000000000000 --- a/examples/with-storybook/components/MyComponent.js +++ /dev/null @@ -1,2 +0,0 @@ -/** @type {import('react').FC} */ -export const MyComponent = ({ children }) =>
{children}
diff --git a/examples/with-storybook/next-env.d.ts b/examples/with-storybook/next-env.d.ts deleted file mode 100644 index 4f11a03dc6cc3..0000000000000 --- a/examples/with-storybook/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// 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 index 8b61df4e50f8a..dafb0c88e961e 100644 --- a/examples/with-storybook/next.config.js +++ b/examples/with-storybook/next.config.js @@ -1,4 +1,8 @@ /** @type {import('next').NextConfig} */ -module.exports = { - reactStrictMode: true, +const nextConfig = { + experimental: { + appDir: true, + }, } + +module.exports = nextConfig diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json index b9cc8a21b09c6..cdeaf72dce012 100644 --- a/examples/with-storybook/package.json +++ b/examples/with-storybook/package.json @@ -1,30 +1,35 @@ { + "name": "storybook-app", + "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", - "storybook": "start-storybook -p 6006 -s public", - "build-storybook": "build-storybook -s public", - "serve-storybook": "serve storybook-static" + "lint": "next lint", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "dependencies": { - "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "sass": "^1.49.0" + "@types/node": "18.15.12", + "@types/react": "18.0.37", + "@types/react-dom": "18.0.11", + "next": "13.3.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "typescript": "5.0.4" }, "devDependencies": { - "@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" + "@storybook/addon-essentials": "^7.0.6", + "@storybook/addon-interactions": "^7.0.6", + "@storybook/addon-links": "^7.0.6", + "@storybook/blocks": "^7.0.6", + "@storybook/nextjs": "^7.0.6", + "@storybook/react": "^7.0.6", + "@storybook/testing-library": "^0.0.14-next.2", + "storybook": "^7.0.6" + }, + "engines": { + "node": ">=16" } } diff --git a/examples/with-storybook/pages/_app.js b/examples/with-storybook/pages/_app.js deleted file mode 100644 index fd297b4f34108..0000000000000 --- a/examples/with-storybook/pages/_app.js +++ /dev/null @@ -1,9 +0,0 @@ -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 deleted file mode 100644 index 341514c192f36..0000000000000 --- a/examples/with-storybook/pages/absoluteImports.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 7aa1683a93c4d..0000000000000 --- a/examples/with-storybook/pages/cssModules.js +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index 2f1da586c4943..0000000000000 --- a/examples/with-storybook/pages/globalStyleImports.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index dcc6d30e049ed..0000000000000 --- a/examples/with-storybook/pages/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Links } from 'components/Links' -import Head from 'next/head' - -export default function Home() { - return ( -
- - 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 deleted file mode 100644 index 7a3aefb250a0c..0000000000000 --- a/examples/with-storybook/pages/nextjsImages.js +++ /dev/null @@ -1,29 +0,0 @@ -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 deleted file mode 100644 index 55f7441edbed7..0000000000000 --- a/examples/with-storybook/pages/nextjsRouting.js +++ /dev/null @@ -1,30 +0,0 @@ -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 deleted file mode 100644 index d92876d84bef2..0000000000000 --- a/examples/with-storybook/pages/scssModules.js +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index 1f027711b2b8d..0000000000000 --- a/examples/with-storybook/pages/styledJsx.js +++ /dev/null @@ -1,31 +0,0 @@ -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 deleted file mode 100644 index e80e2ffad0be6..0000000000000 --- a/examples/with-storybook/pages/typescript.tsx +++ /dev/null @@ -1,15 +0,0 @@ -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/next.svg b/examples/with-storybook/public/next.svg new file mode 100644 index 0000000000000..5174b28c565c2 --- /dev/null +++ b/examples/with-storybook/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-storybook/public/nyan-cat.png b/examples/with-storybook/public/nyan-cat.png deleted file mode 100644 index 58b24488b6ea66b4cabd682898e3767b0314626e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12273 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 - - \ No newline at end of file + \ No newline at end of file diff --git a/examples/with-storybook/stories/Button.stories.ts b/examples/with-storybook/stories/Button.stories.ts new file mode 100644 index 0000000000000..66a81b0b5f682 --- /dev/null +++ b/examples/with-storybook/stories/Button.stories.ts @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { Button } from './Button' + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { + control: 'color', + }, + }, +} + +export default meta +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +} + +export const Secondary: Story = { + args: { + label: 'Button', + }, +} + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +} + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +} diff --git a/examples/with-storybook/stories/Button.tsx b/examples/with-storybook/stories/Button.tsx new file mode 100644 index 0000000000000..fe9e5fbbe86d0 --- /dev/null +++ b/examples/with-storybook/stories/Button.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import './button.css' + +interface ButtonProps { + /** + * Is this the principal call to action on the page? + */ + primary?: boolean + /** + * What background color to use + */ + backgroundColor?: string + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large' + /** + * Button contents + */ + label: string + /** + * Optional click handler + */ + onClick?: () => void +} + +/** + * Primary UI component for user interaction + */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary + ? 'storybook-button--primary' + : 'storybook-button--secondary' + return ( + + ) +} diff --git a/examples/with-storybook/stories/Header.stories.ts b/examples/with-storybook/stories/Header.stories.ts new file mode 100644 index 0000000000000..d7511df2c2a1f --- /dev/null +++ b/examples/with-storybook/stories/Header.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Header } from './Header' + +const meta: Meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +} + +export default meta +type Story = StoryObj + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +} + +export const LoggedOut: Story = {} diff --git a/examples/with-storybook/stories/Header.tsx b/examples/with-storybook/stories/Header.tsx new file mode 100644 index 0000000000000..f1b3d1c06f373 --- /dev/null +++ b/examples/with-storybook/stories/Header.tsx @@ -0,0 +1,71 @@ +import React from 'react' + +import { Button } from './Button' +import './header.css' + +type User = { + name: string +} + +interface HeaderProps { + user?: User + onLogin: () => void + onLogout: () => void + onCreateAccount: () => void +} + +export const Header = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: HeaderProps) => ( +
+
+
+ + + + + + + +

Acme

+
+
+ {user ? ( + <> + + Welcome, {user.name}! + +
+
+
+) diff --git a/examples/with-storybook/stories/Introduction.mdx b/examples/with-storybook/stories/Introduction.mdx new file mode 100644 index 0000000000000..9f120228791de --- /dev/null +++ b/examples/with-storybook/stories/Introduction.mdx @@ -0,0 +1,239 @@ +import { Meta } from '@storybook/blocks' +import Image from 'next/image' + +import Code from './assets/code-brackets.svg' +import Colors from './assets/colors.svg' +import Comments from './assets/comments.svg' +import Direction from './assets/direction.svg' +import Flow from './assets/flow.svg' +import Plugin from './assets/plugin.svg' +import Repo from './assets/repo.svg' +import StackAlt from './assets/stackalt.svg' + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ + + +
Learn
+ + + +
+ TipEdit the Markdown in{' '} + stories/Introduction.mdx +
diff --git a/examples/with-storybook/stories/Page.stories.ts b/examples/with-storybook/stories/Page.stories.ts new file mode 100644 index 0000000000000..308c2b1197626 --- /dev/null +++ b/examples/with-storybook/stories/Page.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { within, userEvent } from '@storybook/testing-library' + +import { Page } from './Page' + +const meta: Meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +} + +export default meta +type Story = StoryObj + +export const LoggedOut: Story = {} + +// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }) + await userEvent.click(loginButton) + }, +} diff --git a/examples/with-storybook/stories/Page.tsx b/examples/with-storybook/stories/Page.tsx new file mode 100644 index 0000000000000..85f01f37cb1a9 --- /dev/null +++ b/examples/with-storybook/stories/Page.tsx @@ -0,0 +1,91 @@ +import React from 'react' + +import { Header } from './Header' +import './page.css' + +type User = { + name: string +} + +export const Page: React.FC = () => { + const [user, setUser] = React.useState() + + return ( +
+
setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a{' '} + + component-driven + {' '} + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review + page states without needing to navigate to them in your app. Here are + some handy patterns for managing page data in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose + such data from the "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock + these services out using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at{' '} + + Storybook tutorials + + . Read more in the{' '} + + docs + + . +

+
+ Tip Adjust the width of the canvas with + the{' '} + + + + + + Viewports addon in the toolbar +
+
+
+ ) +} diff --git a/examples/with-storybook/stories/assets/code-brackets.svg b/examples/with-storybook/stories/assets/code-brackets.svg new file mode 100644 index 0000000000000..73de947760010 --- /dev/null +++ b/examples/with-storybook/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/colors.svg b/examples/with-storybook/stories/assets/colors.svg new file mode 100644 index 0000000000000..17d58d516e149 --- /dev/null +++ b/examples/with-storybook/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/comments.svg b/examples/with-storybook/stories/assets/comments.svg new file mode 100644 index 0000000000000..6493a139f523e --- /dev/null +++ b/examples/with-storybook/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/direction.svg b/examples/with-storybook/stories/assets/direction.svg new file mode 100644 index 0000000000000..65676ac272294 --- /dev/null +++ b/examples/with-storybook/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/flow.svg b/examples/with-storybook/stories/assets/flow.svg new file mode 100644 index 0000000000000..8ac27db403c23 --- /dev/null +++ b/examples/with-storybook/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/plugin.svg b/examples/with-storybook/stories/assets/plugin.svg new file mode 100644 index 0000000000000..29e5c690c0a25 --- /dev/null +++ b/examples/with-storybook/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/repo.svg b/examples/with-storybook/stories/assets/repo.svg new file mode 100644 index 0000000000000..f386ee902c1fe --- /dev/null +++ b/examples/with-storybook/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/examples/with-storybook/stories/assets/stackalt.svg b/examples/with-storybook/stories/assets/stackalt.svg new file mode 100644 index 0000000000000..9b7ad2743506e --- /dev/null +++ b/examples/with-storybook/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/examples/with-storybook/stories/button.css b/examples/with-storybook/stories/button.css new file mode 100644 index 0000000000000..dc91dc76370b7 --- /dev/null +++ b/examples/with-storybook/stories/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/examples/with-storybook/stories/header.css b/examples/with-storybook/stories/header.css new file mode 100644 index 0000000000000..44c549da27ced --- /dev/null +++ b/examples/with-storybook/stories/header.css @@ -0,0 +1,32 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 700; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} + +.welcome { + color: #333; + font-size: 14px; + margin-right: 10px; +} diff --git a/examples/with-storybook/stories/page.css b/examples/with-storybook/stories/page.css new file mode 100644 index 0000000000000..fb64fe4629438 --- /dev/null +++ b/examples/with-storybook/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +section h2 { + font-weight: 700; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +section p { + margin: 1em 0; +} + +section a { + text-decoration: none; + color: #1ea7fd; +} + +section ul { + padding-left: 30px; + margin: 1em 0; +} + +section li { + margin-bottom: 8px; +} + +section .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +section .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +section .tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +section .tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/examples/with-storybook/stories/pages/absoluteImports.stories.jsx b/examples/with-storybook/stories/pages/absoluteImports.stories.jsx deleted file mode 100644 index 6d7014c996b91..0000000000000 --- a/examples/with-storybook/stories/pages/absoluteImports.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 85487cb6d02ee..0000000000000 --- a/examples/with-storybook/stories/pages/cssModules.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 2ccd0d101ba5a..0000000000000 --- a/examples/with-storybook/stories/pages/globalStyleImports.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 0469edb7e6142..0000000000000 --- a/examples/with-storybook/stories/pages/home.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 373f4796f9901..0000000000000 --- a/examples/with-storybook/stories/pages/nextjsImages.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 44a6df44fe0b1..0000000000000 --- a/examples/with-storybook/stories/pages/nextjsRouting.stories.jsx +++ /dev/null @@ -1,14 +0,0 @@ -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 deleted file mode 100644 index 5de7527f3e995..0000000000000 --- a/examples/with-storybook/stories/pages/scssModules.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 1450c651082ae..0000000000000 --- a/examples/with-storybook/stories/pages/styledJsx.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 40e0219b03993..0000000000000 --- a/examples/with-storybook/stories/pages/typescript.stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import Typescript from '../../pages/typescript' - -export default { - title: 'Pages', - component: Typescript, -} - -export const TypescriptPage = () => diff --git a/examples/with-storybook/styles/CssModules.module.css b/examples/with-storybook/styles/CssModules.module.css deleted file mode 100644 index 42720e93f0337..0000000000000 --- a/examples/with-storybook/styles/CssModules.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.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 deleted file mode 100644 index 76d90a7cbb431..0000000000000 --- a/examples/with-storybook/styles/ScssModules.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.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 deleted file mode 100644 index be20427a07a56..0000000000000 --- a/examples/with-storybook/styles/globals.css +++ /dev/null @@ -1,3 +0,0 @@ -main { - font-size: 1.25rem; -} diff --git a/examples/with-storybook/styles/globals.scss b/examples/with-storybook/styles/globals.scss deleted file mode 100644 index cafcfc8beb0bb..0000000000000 --- a/examples/with-storybook/styles/globals.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: azure; -} diff --git a/examples/with-storybook/tsconfig.json b/examples/with-storybook/tsconfig.json index cabfca7e4ffca..e06a4454ab062 100644 --- a/examples/with-storybook/tsconfig.json +++ b/examples/with-storybook/tsconfig.json @@ -1,21 +1,28 @@ { "compilerOptions": { "target": "es5", - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "esModuleInterop": true, + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, "skipLibCheck": true, "strict": true, - "resolveJsonModule": true, - "jsx": "preserve", - "allowJs": true, "forceConsistentCasingInFileNames": true, "noEmit": true, - "lib": ["dom", "dom.iterable", "esnext"], + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", "incremental": true, - "baseUrl": "." + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } }, - "exclude": ["node_modules", ".next", "out", "storybook-static"], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } diff --git a/examples/with-storybook/vercel.json b/examples/with-storybook/vercel.json new file mode 100644 index 0000000000000..6ed0876280290 --- /dev/null +++ b/examples/with-storybook/vercel.json @@ -0,0 +1,4 @@ +{ + "framework": "storybook", + "buildCommand": "storybook build" +}