Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs: use the nextv12 example from the storybook-addon-next repo as t…
…he 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](RyanClementsHax/storybook-addon-next#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.
- Loading branch information
1 parent
80a153c
commit 6b73acf
Showing
42 changed files
with
422 additions
and
75 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,5 +33,5 @@ yarn-error.log* | |
# vercel | ||
.vercel | ||
|
||
# Storybook | ||
/storybook-static | ||
# storybook | ||
storybook-static |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import Link from 'next/link' | ||
|
||
export const Links = () => ( | ||
<ul> | ||
<li> | ||
<Link href="/">Home</Link> | ||
</li> | ||
<li> | ||
<Link href="/nextjsRouting">Next.js Routing Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/nextjsImages">Next.js Images Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/globalStyleImports">Global Style Imports Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/cssModules">Css Module Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/scssModules">Scss Module Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/styledJsx">Styled JSX Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/absoluteImports">Absolute Import Example</Link> | ||
</li> | ||
<li> | ||
<Link href="/typescript">Typescript Example</Link> | ||
</li> | ||
</ul> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
/** @type {import('react').FC} */ | ||
export const MyComponent = ({ children }) => <div>{children}</div> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
reactStrictMode: true, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import '../styles/globals.css' | ||
import '../styles/globals.scss' | ||
|
||
/** @param {import('next/app').AppProps} props */ | ||
function MyApp({ Component, pageProps }) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { Links } from 'components/Links' | ||
import { MyComponent } from 'components/MyComponent' | ||
import Head from 'next/head' | ||
|
||
export default function AbsoluteImports() { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Absolute Imports</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main> | ||
This uses an absolute import:{' '} | ||
<MyComponent>Im absolutely imported</MyComponent> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div> | ||
<Head> | ||
<title>CSS Modules</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main className={styles.main}> | ||
<span>This is styled using CSS Modules</span> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { Links } from 'components/Links' | ||
import Head from 'next/head' | ||
|
||
export default function CssModules() { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Global style imports</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main> | ||
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. | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,20 @@ | ||
import HelloWorld from '../components' | ||
import { Links } from 'components/Links' | ||
import Head from 'next/head' | ||
|
||
export default function Home() { | ||
return ( | ||
<div> | ||
<h1>Simple Storybook Example</h1> | ||
<HelloWorld /> | ||
<Head> | ||
<title>Storybook with Next</title> | ||
<meta name="description" content="Generated by create next app" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<main> | ||
<h1> | ||
Click on any one of these links to see supported features in action | ||
</h1> | ||
<Links /> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div> | ||
<Head> | ||
<title>Nextjs Images</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main> | ||
<h2>This image uses a remote image</h2> | ||
<Image src="/vercel.svg" alt="Vercel Logo" width={200} height={200} /> | ||
<h2>This image uses a static import with a "placeholder="blur"</h2> | ||
<Image | ||
src={nyanCatImgSrc} | ||
layout="responsive" | ||
objectFit="cover" | ||
objectPosition="center" | ||
placeholder="blur" | ||
alt="Nyan Cat" | ||
/> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div> | ||
<Head> | ||
<title>Nextjs Routing</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main> | ||
<p> | ||
Interact with any of the links and look at the "Actions" tab below (if | ||
in storybook) | ||
</p> | ||
<p> | ||
This is the router read by this page (functions not serialized; check | ||
the console for the full object): | ||
</p> | ||
<pre> | ||
<code>{JSON.stringify(router, null, 2)}</code> | ||
</pre> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div> | ||
<Head> | ||
<title>SCSS Modules</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main className={styles.main}> | ||
<span>This is styled using SCSS Modules</span> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { Links } from 'components/Links' | ||
import Head from 'next/head' | ||
|
||
export default function StyledJsx() { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Styled JSX</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<style jsx>{` | ||
.main { | ||
padding: 4rem 0; | ||
flex: 1; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
.main span { | ||
color: blue; | ||
} | ||
`}</style> | ||
<main className="main"> | ||
<span>This is styled using Styled JSX</span> | ||
</main> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Links } from 'components/Links' | ||
import Head from 'next/head' | ||
|
||
export default function Typescript() { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Typescript</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Links /> | ||
<main>This is a page using typescript</main> | ||
</div> | ||
) | ||
} |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.