From 6b73acfaf5c782358258f737942d691af7b4162f Mon Sep 17 00:00:00 2001 From: Ryan Clements Date: Sat, 5 Feb 2022 23:27:56 -0500 Subject: [PATCH] Docs: use the nextv12 example from the storybook-addon-next repo as the with-storybook example (#33891) - use the nextv12 example from the storybook-addon-next repo as the with-storybook example found here: https://github.com/RyanClementsHax/storybook-addon-next/tree/6583c2080386f72fdebc49ff93a2b8262d1219bc/examples/nextv12 - update the readme for the example to include details on what the example includes - tweak the example from the `storybook-addon-next` repo to work with type checking and linting Resolves #33889 ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` ## Context This was kindly requested by @leerob in [this issue](https://github.com/RyanClementsHax/storybook-addon-next/issues/3) on the `storybook-addon-next` repo. P.S. thanks to @leerob for making [this video](https://www.youtube.com/watch?v=cuoNzXFLitc&t=1502s). I found it very helpful for getting me up to speed with how to contribute. I hope I did everything right for y'all. Lmk if there was something I could have done better. --- examples/with-storybook/.babelrc | 4 --- examples/with-storybook/.gitignore | 4 +-- examples/with-storybook/.storybook/main.js | 15 ++++++-- examples/with-storybook/.storybook/preview.js | 25 ++++++------- examples/with-storybook/README.md | 2 +- examples/with-storybook/components/Links.js | 33 ++++++++++++++++++ .../with-storybook/components/MyComponent.js | 2 ++ examples/with-storybook/components/index.js | 3 -- examples/with-storybook/next-env.d.ts | 5 +++ examples/with-storybook/next.config.js | 3 ++ examples/with-storybook/package.json | 25 ++++++++----- 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 | 16 +++++++-- 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/favicon.ico | Bin 0 -> 25931 bytes examples/with-storybook/public/nyan-cat.png | Bin 0 -> 12273 bytes examples/with-storybook/public/serve.json | 1 - examples/with-storybook/public/vercel.svg | 4 +++ .../with-storybook/stories/button.stories.js | 25 ------------- .../stories/helloWorld.stories.js | 6 ---- .../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 +++++ .../with-storybook/stories/welcome.stories.js | 7 ---- .../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 | 21 +++++++++++ 42 files changed, 422 insertions(+), 75 deletions(-) delete mode 100644 examples/with-storybook/.babelrc create mode 100644 examples/with-storybook/components/Links.js create mode 100644 examples/with-storybook/components/MyComponent.js delete mode 100644 examples/with-storybook/components/index.js create mode 100644 examples/with-storybook/next-env.d.ts create mode 100644 examples/with-storybook/next.config.js create mode 100644 examples/with-storybook/pages/_app.js create mode 100644 examples/with-storybook/pages/absoluteImports.js create mode 100644 examples/with-storybook/pages/cssModules.js create mode 100644 examples/with-storybook/pages/globalStyleImports.js create mode 100644 examples/with-storybook/pages/nextjsImages.js create mode 100644 examples/with-storybook/pages/nextjsRouting.js create mode 100644 examples/with-storybook/pages/scssModules.js create mode 100644 examples/with-storybook/pages/styledJsx.js create mode 100644 examples/with-storybook/pages/typescript.tsx create mode 100644 examples/with-storybook/public/favicon.ico create mode 100644 examples/with-storybook/public/nyan-cat.png delete mode 100644 examples/with-storybook/public/serve.json create mode 100644 examples/with-storybook/public/vercel.svg delete mode 100644 examples/with-storybook/stories/button.stories.js delete mode 100644 examples/with-storybook/stories/helloWorld.stories.js create mode 100644 examples/with-storybook/stories/pages/absoluteImports.stories.jsx create mode 100644 examples/with-storybook/stories/pages/cssModules.stories.jsx create mode 100644 examples/with-storybook/stories/pages/globalStyleImports.stories.jsx create mode 100644 examples/with-storybook/stories/pages/home.stories.jsx create mode 100644 examples/with-storybook/stories/pages/nextjsImages.stories.jsx create mode 100644 examples/with-storybook/stories/pages/nextjsRouting.stories.jsx create mode 100644 examples/with-storybook/stories/pages/scssModules.stories.jsx create mode 100644 examples/with-storybook/stories/pages/styledJsx.stories.jsx create mode 100644 examples/with-storybook/stories/pages/typescript.stories.tsx delete mode 100644 examples/with-storybook/stories/welcome.stories.js create mode 100644 examples/with-storybook/styles/CssModules.module.css create mode 100644 examples/with-storybook/styles/ScssModules.module.scss create mode 100644 examples/with-storybook/styles/globals.css create mode 100644 examples/with-storybook/styles/globals.scss create mode 100644 examples/with-storybook/tsconfig.json diff --git a/examples/with-storybook/.babelrc b/examples/with-storybook/.babelrc deleted file mode 100644 index 9fcef0394fdf0b0..000000000000000 --- a/examples/with-storybook/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [] -} diff --git a/examples/with-storybook/.gitignore b/examples/with-storybook/.gitignore index 5f31e17fdd42c8d..9d9f82483ba7008 100644 --- a/examples/with-storybook/.gitignore +++ b/examples/with-storybook/.gitignore @@ -33,5 +33,5 @@ yarn-error.log* # vercel .vercel -# Storybook -/storybook-static +# storybook +storybook-static diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js index 974c2f95aac9f59..00b6466c3729a16 100644 --- a/examples/with-storybook/.storybook/main.js +++ b/examples/with-storybook/.storybook/main.js @@ -1,4 +1,15 @@ module.exports = { - stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + 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/preview.js b/examples/with-storybook/.storybook/preview.js index 2108b7940329218..331c03edd3922c7 100644 --- a/examples/with-storybook/.storybook/preview.js +++ b/examples/with-storybook/.storybook/preview.js @@ -1,16 +1,17 @@ -export const parameters = { - options: { - storySort: (a, b) => { - // We want the Welcome story at the top - if (b[1].kind === 'Welcome') { - return 1 - } +import '../styles/globals.css' +import '../styles/globals.scss' - // 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 }) +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/README.md b/examples/with-storybook/README.md index 7720759c5893543..9aee6d1ab3c7cf0 100644 --- a/examples/with-storybook/README.md +++ b/examples/with-storybook/README.md @@ -1,6 +1,6 @@ # Example app with Storybook -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. +This example shows a default set up of Storybook using [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next). Included in this example are stories that demonstrate the ability to use Next.js features in Storybook. ### TypeScript diff --git a/examples/with-storybook/components/Links.js b/examples/with-storybook/components/Links.js new file mode 100644 index 000000000000000..be88f606554eda5 --- /dev/null +++ b/examples/with-storybook/components/Links.js @@ -0,0 +1,33 @@ +import Link from 'next/link' + +export const Links = () => ( + +) diff --git a/examples/with-storybook/components/MyComponent.js b/examples/with-storybook/components/MyComponent.js new file mode 100644 index 000000000000000..9ecc8988b37b867 --- /dev/null +++ b/examples/with-storybook/components/MyComponent.js @@ -0,0 +1,2 @@ +/** @type {import('react').FC} */ +export const MyComponent = ({ children }) =>
{children}
diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js deleted file mode 100644 index 8f5129010b9b0e4..000000000000000 --- a/examples/with-storybook/components/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Home() { - return
Hello World
-} diff --git a/examples/with-storybook/next-env.d.ts b/examples/with-storybook/next-env.d.ts new file mode 100644 index 000000000000000..4f11a03dc6cc37f --- /dev/null +++ b/examples/with-storybook/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// 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 new file mode 100644 index 000000000000000..0d6071006ab351f --- /dev/null +++ b/examples/with-storybook/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + reactStrictMode: true, +} diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json index 80ca9c6092676e6..835a8078a8920c3 100644 --- a/examples/with-storybook/package.json +++ b/examples/with-storybook/package.json @@ -1,23 +1,30 @@ { "private": true, "scripts": { - "dev": "next", + "dev": "next dev", "build": "next build", "start": "next start", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook -s public/", + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public", "serve-storybook": "serve storybook-static" }, "dependencies": { "next": "latest", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "sass": "^1.49.0" }, "devDependencies": { - "@storybook/addon-essentials": "6.0.26", - "@storybook/addon-links": "6.0.26", - "@storybook/react": "6.0.26", - "babel-loader": "^8.0.5", - "serve": "11.3.2" + "@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" } } diff --git a/examples/with-storybook/pages/_app.js b/examples/with-storybook/pages/_app.js new file mode 100644 index 000000000000000..fd297b4f3410851 --- /dev/null +++ b/examples/with-storybook/pages/_app.js @@ -0,0 +1,9 @@ +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 new file mode 100644 index 000000000000000..341514c192f3670 --- /dev/null +++ b/examples/with-storybook/pages/absoluteImports.js @@ -0,0 +1,19 @@ +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 new file mode 100644 index 000000000000000..7aa1683a93c4deb --- /dev/null +++ b/examples/with-storybook/pages/cssModules.js @@ -0,0 +1,18 @@ +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 new file mode 100644 index 000000000000000..2f1da586c49430c --- /dev/null +++ b/examples/with-storybook/pages/globalStyleImports.js @@ -0,0 +1,19 @@ +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 index 37e7e01d2c6424f..dcc6d30e049ed52 100644 --- a/examples/with-storybook/pages/index.js +++ b/examples/with-storybook/pages/index.js @@ -1,10 +1,20 @@ -import HelloWorld from '../components' +import { Links } from 'components/Links' +import Head from 'next/head' export default function Home() { return (
-

Simple Storybook Example

- + + 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 new file mode 100644 index 000000000000000..7a3aefb250a0ce0 --- /dev/null +++ b/examples/with-storybook/pages/nextjsImages.js @@ -0,0 +1,29 @@ +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 new file mode 100644 index 000000000000000..55f7441edbed7a5 --- /dev/null +++ b/examples/with-storybook/pages/nextjsRouting.js @@ -0,0 +1,30 @@ +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 new file mode 100644 index 000000000000000..d92876d84bef21d --- /dev/null +++ b/examples/with-storybook/pages/scssModules.js @@ -0,0 +1,18 @@ +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 new file mode 100644 index 000000000000000..1f027711b2b8d3b --- /dev/null +++ b/examples/with-storybook/pages/styledJsx.js @@ -0,0 +1,31 @@ +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 new file mode 100644 index 000000000000000..e80e2ffad0be696 --- /dev/null +++ b/examples/with-storybook/pages/typescript.tsx @@ -0,0 +1,15 @@ +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/favicon.ico b/examples/with-storybook/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83 zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO{pgX9699l+Qppw7jXaYf~-84xW z)w4x8?=youko|}Vr~(D$UXIbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0 zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%hJ){&rlvg`CDTj z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8( z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8) zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M>36U4Us zfgYWSiHZL3;lpWT=zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m z{DeR7?0-1^zVs&`AV6Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B@xiyCANc(l zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<fvZQ2zUz5WRc(UnFMKHwe1| zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU* zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5 z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0 zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4 z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7?r!zQTPPSv}{so2e>Fjs1{gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{ zdVUDbHm5`2taPUOY^MAGOw*>=s7=Gst=D+p+2yON!0%Hk` zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6 zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~ z9{AG(e|q3g5B%wYKRxiL2Y$8(4w6bzchKuloQW#e&S3n+P- z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD= z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2 z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3 zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@a|r-@d#f7 z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5 zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1 zrO6RSXHH}DMc$&|?D004DiOVMHV8kXCP@7NKB zgaZq^^O<7PoKEp72kby@W0Z!Y*Ay{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a zuDZDTN}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI z9X4UlIWA|ZYHgbI z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M zEMyTDrC&9K$d|kZe2#ws6)L=7K+{ zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8> z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5EajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O& zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7giLVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c z?J;U~&FfH#*98^G?i}pA{ z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk zUiY$thvX;>Tby6z9Y1edAMQaiH zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V zG#-?gKlr}Eeqifb{|So?HM&g91P8|av8hQoCmQXkd?7wIJwb z_^v8bbg`SAn{I*4bH$u(RZ6*xUhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq36!pV6Az&m{O8$wGFD? zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH( zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x z);_{lY<;);XzT`dBFpRmGrr}z5u1=pC^S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a( z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F= zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk($?Qw({erA$^bC;q33hv!d!>%wRhj# zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?- zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvhCL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ zy|Qn`hxx(58c70$E;L(X0uZZ72M1!6oeg)(cdKO ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC> z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111aH}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+ z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{ z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^ zb&uBN!Ja3UzYHK-CTyA5=L zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*IcmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$ z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G; zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8 zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU&68iRikRrHRW|ZxzRR^`eIGt zIeiDgVS>IeExKVRWW8-=A=yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_ zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v#ix45EVrcEhr>!NMhprl$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~&^=4?PL&nd8)`OfG#n zwAMN$1&>K++c{^|7<4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C zI@}scZlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7 zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S zb+9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc- zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I zgg{b=Iz}WkhCGj1M=hu4#Aw173YxIVbISaoc z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(O(a0e7oY=E( zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/examples/with-storybook/public/nyan-cat.png b/examples/with-storybook/public/nyan-cat.png new file mode 100644 index 0000000000000000000000000000000000000000..58b24488b6ea66b4cabd682898e3767b0314626e GIT binary patch literal 12273 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 + + \ No newline at end of file diff --git a/examples/with-storybook/stories/button.stories.js b/examples/with-storybook/stories/button.stories.js deleted file mode 100644 index a8b486c538d1069..000000000000000 --- a/examples/with-storybook/stories/button.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -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/stories/helloWorld.stories.js b/examples/with-storybook/stories/helloWorld.stories.js deleted file mode 100644 index 1c524fc556c66f4..000000000000000 --- a/examples/with-storybook/stories/helloWorld.stories.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import HelloWorld from '../components' - -export default { title: 'Hello World' } - -export const simpleComponent = () => diff --git a/examples/with-storybook/stories/pages/absoluteImports.stories.jsx b/examples/with-storybook/stories/pages/absoluteImports.stories.jsx new file mode 100644 index 000000000000000..6d7014c996b91bf --- /dev/null +++ b/examples/with-storybook/stories/pages/absoluteImports.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..85487cb6d02eeac --- /dev/null +++ b/examples/with-storybook/stories/pages/cssModules.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..2ccd0d101ba5aad --- /dev/null +++ b/examples/with-storybook/stories/pages/globalStyleImports.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..0469edb7e6142de --- /dev/null +++ b/examples/with-storybook/stories/pages/home.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..373f4796f99014e --- /dev/null +++ b/examples/with-storybook/stories/pages/nextjsImages.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..44a6df44fe0b1cd --- /dev/null +++ b/examples/with-storybook/stories/pages/nextjsRouting.stories.jsx @@ -0,0 +1,14 @@ +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 new file mode 100644 index 000000000000000..5de7527f3e99550 --- /dev/null +++ b/examples/with-storybook/stories/pages/scssModules.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..1450c651082ae92 --- /dev/null +++ b/examples/with-storybook/stories/pages/styledJsx.stories.jsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 000000000000000..40e0219b0399349 --- /dev/null +++ b/examples/with-storybook/stories/pages/typescript.stories.tsx @@ -0,0 +1,8 @@ +import Typescript from '../../pages/typescript' + +export default { + title: 'Pages', + component: Typescript, +} + +export const TypescriptPage = () => diff --git a/examples/with-storybook/stories/welcome.stories.js b/examples/with-storybook/stories/welcome.stories.js deleted file mode 100644 index 2466b9882ddfc9e..000000000000000 --- a/examples/with-storybook/stories/welcome.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -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/styles/CssModules.module.css b/examples/with-storybook/styles/CssModules.module.css new file mode 100644 index 000000000000000..42720e93f033741 --- /dev/null +++ b/examples/with-storybook/styles/CssModules.module.css @@ -0,0 +1,12 @@ +.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 new file mode 100644 index 000000000000000..76d90a7cbb43109 --- /dev/null +++ b/examples/with-storybook/styles/ScssModules.module.scss @@ -0,0 +1,12 @@ +.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 new file mode 100644 index 000000000000000..be20427a07a56e9 --- /dev/null +++ b/examples/with-storybook/styles/globals.css @@ -0,0 +1,3 @@ +main { + font-size: 1.25rem; +} diff --git a/examples/with-storybook/styles/globals.scss b/examples/with-storybook/styles/globals.scss new file mode 100644 index 000000000000000..cafcfc8beb0bbea --- /dev/null +++ b/examples/with-storybook/styles/globals.scss @@ -0,0 +1,3 @@ +body { + background: azure; +} diff --git a/examples/with-storybook/tsconfig.json b/examples/with-storybook/tsconfig.json new file mode 100644 index 000000000000000..cabfca7e4ffca8d --- /dev/null +++ b/examples/with-storybook/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "esnext", + "moduleResolution": "node", + "isolatedModules": true, + "esModuleInterop": true, + "skipLibCheck": true, + "strict": true, + "resolveJsonModule": true, + "jsx": "preserve", + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "lib": ["dom", "dom.iterable", "esnext"], + "incremental": true, + "baseUrl": "." + }, + "exclude": ["node_modules", ".next", "out", "storybook-static"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] +}