Remove @reach/skip-nav from the dependencies (#1051)

* chore: remove reach-ui from the dependencies and create the SkipNavLink/SkipNavContent components * chore: add @reach/skip-nav license note
shuding · Dec 9, 2022 · da3252d · da3252d · vercel · Dec 9, 2022
1 parent 5a620ff
commit da3252d
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 42 deletions.
diff --git a/examples/swr-site/package.json b/examples/swr-site/package.json
@@ -15,7 +15,6 @@
     "react": "*",
     "react-dom": "*",
     "next": ">=13",
-    "@reach/skip-nav": "^0.16.0",
     "focus-visible": "^5.1.0",
     "intersection-observer": "^0.10.0",
     "markdown-to-jsx": "^6.11.4",

diff --git a/examples/swr-site/pages/_document.js b/examples/swr-site/pages/_document.js
@@ -1,14 +1,14 @@
 import React from "react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { SkipNavLink } from "@reach/skip-nav";
+import { SkipNavLink } from "nextra-theme-docs";
 
 class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">
         <Head />
         <body>
-          <SkipNavLink />
+          <SkipNavLink styled />
           <Main />
           <NextScript />
         </body>

diff --git a/examples/swr-site/styles.css b/examples/swr-site/styles.css
@@ -13,14 +13,6 @@
   max-width: calc(100vw - 50px);
 }
 
-[data-reach-skip-link] {
-  @apply sr-only;
-}
-
-[data-reach-skip-link]:focus {
-  @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none focus:ring z-50;
-}
-
 .dark .invert-on-dark {
   filter: invert(1) brightness(1.8);
 }

diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
@@ -46,7 +46,6 @@
     "@headlessui/react": "^1.6.6",
     "@mdx-js/react": "^2.1.5",
     "@popperjs/core": "^2.11.6",
-    "@reach/skip-nav": "^0.17.0",
     "clsx": "^1.2.1",
     "flexsearch": "^0.7.21",
     "focus-visible": "^5.2.0",

diff --git a/packages/nextra-theme-docs/src/components/index.ts b/packages/nextra-theme-docs/src/components/index.ts
@@ -16,6 +16,7 @@ export { Search } from './search'
 export { Select } from './select'
 export { ServerSideErrorPage } from './server-side-error'
 export { Sidebar } from './sidebar'
+export { SkipNavContent, SkipNavLink } from './skip-nav'
 export { Tabs, Tab } from './tabs'
 export { ThemeSwitch } from './theme-switch'
 export { TOC } from './toc'
diff --git a/packages/nextra-theme-docs/src/components/skip-nav.tsx b/packages/nextra-theme-docs/src/components/skip-nav.tsx
@@ -0,0 +1,88 @@
+/**
+ * The code included in this file is inspired by https://github.com/reach/reach-ui/blob/43f450db7bcb25a743121fe31355f2294065a049/packages/skip-nav/src/reach-skip-nav.tsx which is part of the @reach/skip-nav library.
+ *
+ * @reach/skip-nav is licensed as follows:
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2018-2022, React Training LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * 
+ * Source: https://github.com/reach/reach-ui/blob/43f450db7bcb25a743121fe31355f2294065a049/LICENSE
+ */
+import React, { forwardRef, ComponentProps, ReactElement } from 'react'
+import cn from 'clsx'
+
+// TODO: Change the DEFAULT_ID for `nextra-skip-nav` or something else on the next major version (v3.x). The DEFAULT_ID must be 'reach-skip-nav' because changing this value is a breaking change for users that use v2.0.1 and earlier
+const DEFAULT_ID = 'reach-skip-nav'
+const DEFAULT_LABEL = 'Skip to content'
+
+type SkipNavLinkProps = Omit<
+  ComponentProps<'a'>,
+  'ref' | 'href' | 'children'
+> & {
+  label?: string
+  styled?: boolean
+}
+
+export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
+  function (
+    {
+      className: providedClassName,
+      id,
+      label = DEFAULT_LABEL,
+      styled,
+      ...props
+    },
+    forwardedRef
+  ): ReactElement {
+    const className =
+      providedClassName !== undefined // Give the option to the user to pass a falsy other than undefined to remove the default styles
+        ? providedClassName
+        : styled // Give the user a way to opt-in the default style provided with the theme. Probably remove this option in the next major version (v3.x) and just do a check to use the providedClassName or the default
+        ? cn(
+            'nx-sr-only',
+            'focus:nx-not-sr-only focus:nx-fixed focus:nx-z-50 focus:nx-m-3 focus:nx-ml-4 focus:nx-h-[calc(var(--nextra-navbar-height)-1.5rem)] focus:nx-rounded-lg focus:nx-border focus:nx-px-3 focus:nx-py-2 focus:nx-align-middle focus:nx-text-sm focus:nx-font-bold',
+            'focus:nx-text-gray-900 focus:dark:nx-text-gray-100',
+            'focus:nx-bg-white focus:dark:nx-bg-neutral-900',
+            'focus:nx-border-neutral-400 focus:dark:nx-border-neutral-800'
+          )
+        : ''
+
+    return (
+      <a
+        {...props}
+        ref={forwardedRef}
+        href={`#${id || DEFAULT_ID}`}
+        className={className}
+        // TODO: Remove in version v3.x. Must keep for compability reasons
+        data-reach-skip-link=""
+      >
+        {label}
+      </a>
+    )
+  }
+)
+
+type SkipNavContentProps = Omit<ComponentProps<'div'>, 'ref' | 'children'>
+
+export const SkipNavContent = forwardRef<HTMLDivElement, SkipNavContentProps>(
+  function ({ id, ...props }, forwardedRef): ReactElement {
+    return <div {...props} ref={forwardedRef} id={id || DEFAULT_ID} />
+  }
+)
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
@@ -4,12 +4,11 @@ import type { ReactElement, ReactNode } from 'react'
 import React, { useMemo } from 'react'
 import { useRouter } from 'next/router'
 import 'focus-visible'
-import { SkipNavContent } from '@reach/skip-nav'
 import cn from 'clsx'
 import { MDXProvider } from '@mdx-js/react'
 
 import './polyfill'
-import { Head, NavLinks, Sidebar, Breadcrumb, Banner } from './components'
+import { Head, NavLinks, Sidebar, SkipNavContent, Breadcrumb, Banner } from './components'
 import { getComponents } from './mdx-components'
 import { ActiveAnchorProvider, ConfigProvider, useConfig } from './contexts'
 import { DEFAULT_LOCALE } from './constants'
@@ -254,5 +253,7 @@ export {
   Tabs,
   Tab,
   Navbar,
+  SkipNavContent,
+  SkipNavLink,
   ThemeSwitch
 } from './components'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml