Remove @reach/skip-nav from the dependencies

[arsnl]

If a user tries to install nextra-theme-docs using npm while using React 18, he gets the following message:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/skip-nav@0.17.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   16 more (@headlessui/react, @mdx-js/react, framer-motion, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || 17.x" from @reach/skip-nav@0.17.0
npm WARN node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN   @reach/skip-nav@"^0.17.0" from nextra-theme-docs@2.0.0
npm WARN   node_modules/nextra-theme-docs
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || 17.x" from @reach/skip-nav@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN     @reach/skip-nav@"^0.17.0" from nextra-theme-docs@2.0.0
npm WARN     node_modules/nextra-theme-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/skip-nav@0.17.0
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.2.0" from the root project
npm WARN   11 more (@headlessui/react, framer-motion, nano-css, next, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0 || 17.x" from @reach/skip-nav@0.17.0
npm WARN node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN   @reach/skip-nav@"^0.17.0" from nextra-theme-docs@2.0.0
npm WARN   node_modules/nextra-theme-docs
npm WARN 
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8.0 || 17.x" from @reach/skip-nav@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN     @reach/skip-nav@"^0.17.0" from nextra-theme-docs@2.0.0
npm WARN     node_modules/nextra-theme-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/utils@0.17.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   16 more (@headlessui/react, @mdx-js/react, framer-motion, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || 17.x" from @reach/utils@0.17.0
npm WARN node_modules/nextra-theme-docs/node_modules/@reach/skip-nav/node_modules/@reach/utils
npm WARN   @reach/utils@"0.17.0" from @reach/skip-nav@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || 17.x" from @reach/utils@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav/node_modules/@reach/utils
npm WARN     @reach/utils@"0.17.0" from @reach/skip-nav@0.17.0
npm WARN     node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/utils@0.17.0
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.2.0" from the root project
npm WARN   11 more (@headlessui/react, framer-motion, nano-css, next, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0 || 17.x" from @reach/utils@0.17.0
npm WARN node_modules/nextra-theme-docs/node_modules/@reach/skip-nav/node_modules/@reach/utils
npm WARN   @reach/utils@"0.17.0" from @reach/skip-nav@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav
npm WARN 
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8.0 || 17.x" from @reach/utils@0.17.0
npm WARN   node_modules/nextra-theme-docs/node_modules/@reach/skip-nav/node_modules/@reach/utils
npm WARN     @reach/utils@"0.17.0" from @reach/skip-nav@0.17.0
npm WARN     node_modules/nextra-theme-docs/node_modules/@reach/skip-nav

The mentioned problem indicates that the @reach/skip-nav library does not support React 18 in its peer dependencies. Normally, I would have opened a PR in the @reach/skip-nav library, but the following message indicates that the library is no longer maintained.

reach/reach-ui#972

Since nextra-theme-docs uses very little @reach and its only dependency is the @reach/skip-nav library (@reach/skip-nav is a small React component library allowing users browsing with their keyboard to jump directly to content without having to navigate through the menu.), I have included the latter's code in the project. (see: https://github.com/shuding/nextra/pull/1051/files#diff-01447ecc1f1f9351440e99fe52c4f3538f1369bb8ac7a57500ac1d2249ae53cb).

I also took the opportunity, while making sure not to introduce any breaking changes, to provide a default visual style (on opt-in until the next major) that matches nextra-theme-docs and I added the possibility to change the label.

The button light UI

The button dark UI

Light UI usage

Dark UI usage

RTL UI usage

[changeset-bot]

⚠️ No Changeset found

Latest commit: a8110b6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
nextra-theme-docs-dev	✅ Ready (Inspect)	Visit Preview		Dec 9, 2022 at 5:21PM (UTC)
nextra-v2	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 9, 2022 at 5:21PM (UTC)

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
nextra	⬜️ Ignored (Inspect)			Dec 9, 2022 at 5:21PM (UTC)

[shuding]

Thank you for this perfect PR, and I appreciate your effort to adjust the styling! One last request, could you also include the license file of Reach in our codebase, as we are now directly including their code?

[arsnl]

Sure things! I've just added the license note. Let me know if the format is ok.

[promer94]

Thank you !