Document next/link component and create stories

storybookjs · Dec 6, 2022 · 544d8e5 · 544d8e5
1 parent 6ae449f
commit 544d8e5
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 0 deletions.
diff --git 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/.../nextjs/template/stories/Link.stories.jsx → ...s/template/stories_12-js/Link.stories.jsx b/.../nextjs/template/stories/Link.stories.jsx → ...s/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
@@ -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 (
+    <a href={href} onClick={onClick} ref={ref}>
+      {children}
+    </a>
+  );
+});
+
+const Component = () => (
+  <ul>
+    <li>
+      <Link href="/">Normal Link</Link>
+    </li>
+    <li>
+      <Link
+        href={{
+          pathname: '/with-url-object',
+          query: { name: 'test' },
+        }}
+      >
+        With URL Object
+      </Link>
+    </li>
+    <li>
+      <Link href="/replace-url" replace>
+        Replace the URL instead of push
+      </Link>
+    </li>
+    <li>
+      <Link href="/legacy-behaviour" legacyBehavior>
+        <a>Legacy behavior</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/child-is-functional-component" passHref legacyBehavior>
+        <MyButton>child is a functional component</MyButton>
+      </Link>
+    </li>
+    <li>
+      <Link href="/#hashid" scroll={false}>
+        Disables scrolling to the top
+      </Link>
+    </li>
+    <li>
+      <Link href="/no-prefetch" prefetch={false}>
+        No Prefetching
+      </Link>
+    </li>
+    <li>
+      <Link style={{ color: 'red' }} href="/with-style">
+        With style
+      </Link>
+    </li>
+    <li>
+      <Link className={style.link} href="/with-classname">
+        With className
+      </Link>
+    </li>
+  </ul>
+);
+
+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
@@ -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
@@ -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
@@ -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<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+>(function Button({ onClick, href, children }, ref) {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      {children}
+    </a>
+  );
+});
+
+const Component = () => (
+  <ul>
+    <li>
+      <Link href="/">Normal Link</Link>
+    </li>
+    <li>
+      <Link
+        href={{
+          pathname: '/with-url-object',
+          query: { name: 'test' },
+        }}
+      >
+        With URL Object
+      </Link>
+    </li>
+    <li>
+      <Link href="/replace-url" replace>
+        Replace the URL instead of push
+      </Link>
+    </li>
+    <li>
+      <Link href="/legacy-behaviour" legacyBehavior>
+        <a>Legacy behavior</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/child-is-functional-component" passHref legacyBehavior>
+        <MyButton>child is a functional component</MyButton>
+      </Link>
+    </li>
+    <li>
+      <Link href="/#hashid" scroll={false}>
+        Disables scrolling to the top
+      </Link>
+    </li>
+    <li>
+      <Link href="/no-prefetch" prefetch={false}>
+        No Prefetching
+      </Link>
+    </li>
+    <li>
+      <Link style={{ color: 'red' }} href="/with-style">
+        With style
+      </Link>
+    </li>
+    <li>
+      <Link className={style.link} href="/with-classname">
+        With className
+      </Link>
+    </li>
+  </ul>
+);
+
+export default {
+  component: Component,
+} as Meta<typeof Component>;
+
+export const Default: StoryObj<typeof Component> = {};