From 544d8e5ed728e8d076b3ffbb4275af551b0af0a4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 1 Dec 2022 16:36:25 +0100 Subject: [PATCH] Document next/link component and create stories --- code/frameworks/nextjs/src/config/webpack.ts | 3 + .../Link.stories.jsx | 0 .../stories_default-js/Link.stories.jsx | 74 ++++++++++++++++++ .../Link.stories.module.css | 3 + .../Link.stories.module.css | 3 + .../stories_default-ts/Link.stories.tsx | 77 +++++++++++++++++++ 6 files changed, 160 insertions(+) rename code/frameworks/nextjs/template/{stories => stories_12-js}/Link.stories.jsx (100%) create mode 100644 code/frameworks/nextjs/template/stories_default-js/Link.stories.jsx create mode 100644 code/frameworks/nextjs/template/stories_default-js/Link.stories.module.css create mode 100644 code/frameworks/nextjs/template/stories_default-ts/Link.stories.module.css create mode 100644 code/frameworks/nextjs/template/stories_default-ts/Link.stories.tsx diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index 799f95a73df0..c96685703a39 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -42,6 +42,9 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): * In Next13, the `newNextLinkBehavior` option now defaults to truthy (still * `undefined` in the config), and `next/link` was engineered to opt *out* * of it + * + * TODO: Revisit logic as soon as the changes in https://github.com/vercel/next.js/pull/42623 + * were released in the next version of Next.js */ const newNextLinkBehavior = nextConfig.experimental?.newNextLinkBehavior; if ( diff --git a/code/frameworks/nextjs/template/stories/Link.stories.jsx b/code/frameworks/nextjs/template/stories_12-js/Link.stories.jsx similarity index 100% rename from code/frameworks/nextjs/template/stories/Link.stories.jsx rename to code/frameworks/nextjs/template/stories_12-js/Link.stories.jsx diff --git a/code/frameworks/nextjs/template/stories_default-js/Link.stories.jsx b/code/frameworks/nextjs/template/stories_default-js/Link.stories.jsx new file mode 100644 index 000000000000..44d8fa69957e --- /dev/null +++ b/code/frameworks/nextjs/template/stories_default-js/Link.stories.jsx @@ -0,0 +1,74 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import Link from 'next/link'; + +import style from './Link.stories.module.css'; + +// `onClick`, `href`, and `ref` need to be passed to the DOM element +// for proper handling +const MyButton = React.forwardRef(function Button({ onClick, href, children }, ref) { + return ( + + {children} + + ); +}); + +const Component = () => ( + +); + +export default { + component: Component, +}; + +export const Default = {}; diff --git a/code/frameworks/nextjs/template/stories_default-js/Link.stories.module.css b/code/frameworks/nextjs/template/stories_default-js/Link.stories.module.css new file mode 100644 index 000000000000..9edb616226d0 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_default-js/Link.stories.module.css @@ -0,0 +1,3 @@ +.link { + color: green; +} diff --git a/code/frameworks/nextjs/template/stories_default-ts/Link.stories.module.css b/code/frameworks/nextjs/template/stories_default-ts/Link.stories.module.css new file mode 100644 index 000000000000..9edb616226d0 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_default-ts/Link.stories.module.css @@ -0,0 +1,3 @@ +.link { + color: green; +} diff --git a/code/frameworks/nextjs/template/stories_default-ts/Link.stories.tsx b/code/frameworks/nextjs/template/stories_default-ts/Link.stories.tsx new file mode 100644 index 000000000000..651f9fb20211 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_default-ts/Link.stories.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import Link from 'next/link'; +import type { Meta, StoryObj } from '@storybook/react'; + +import style from './Link.stories.module.css'; + +// `onClick`, `href`, and `ref` need to be passed to the DOM element +// for proper handling +const MyButton = React.forwardRef< + HTMLAnchorElement, + React.DetailedHTMLProps, HTMLAnchorElement> +>(function Button({ onClick, href, children }, ref) { + return ( + + {children} + + ); +}); + +const Component = () => ( + +); + +export default { + component: Component, +} as Meta; + +export const Default: StoryObj = {};