rd-314 use next out of the box

vordgi · Oct 15, 2024 · 1b3539f · 1b3539f
1 parent 8c65dd4
commit 1b3539f
Show file tree

Hide file tree

Showing 27 changed files with 75 additions and 171 deletions.
diff --git a/packages/robindoc/rollup.config.js b/packages/robindoc/rollup.config.js
@@ -19,6 +19,8 @@ module.exports = {
     external: [
         "react",
         "react-dom",
+        "next/link",
+        "next/navigation",
         "html-react-parser",
         "gray-matter",
         "marked",

diff --git a/packages/robindoc/src/components/blocks/breadcrumbs/index.tsx b/packages/robindoc/src/components/blocks/breadcrumbs/index.tsx
@@ -8,15 +8,14 @@ import "./breadcrumbs.scss";
 export type BreadcrumbsProps = {
     title: string;
     breadcrumbs: BreadcrumbsType;
-    link?: React.ElementType;
 };
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = async ({ title, breadcrumbs, link }) => {
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = async ({ title, breadcrumbs }) => {
     return (
         <ul className="r-breadcrumbs">
             {breadcrumbs.map((breadcrumb) => (
                 <li key={breadcrumb.pathname} className="r-breadcrumb _previous">
-                    <NavLink link={link} href={breadcrumb.pathname} className="r-breadcrumb-link">
+                    <NavLink href={breadcrumb.pathname} className="r-breadcrumb-link">
                         {breadcrumb.title}
                     </NavLink>
                 </li>

diff --git a/packages/robindoc/src/components/blocks/nav-content-link/index.tsx b/packages/robindoc/src/components/blocks/nav-content-link/index.tsx
@@ -5,9 +5,7 @@ import React from "react";
 import { useNavigate } from "@src/components/contexts/navigate/use-navigate";
 import { ContentLink, type ContentLinkProps } from "@src/components/ui/content-link";
 
-interface NavContentLinkProps extends ContentLinkProps {
-    link?: React.ElementType;
-}
+type NavContentLinkProps = ContentLinkProps;
 
 export const NavContentLink: React.FC<NavContentLinkProps> = ({ onClick, ...props }) => {
     const { listeners } = useNavigate();

diff --git a/packages/robindoc/src/components/blocks/nav-link/index.tsx b/packages/robindoc/src/components/blocks/nav-link/index.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import React, { forwardRef } from "react";
+import Link, { LinkProps } from "next/link";
 
 import { useNavigate } from "@src/components/contexts/navigate/use-navigate";
 
-interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    link?: React.ElementType;
-}
+type NavLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.PropsWithChildren<LinkProps>;
 
-export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(({ link: Link = "a", onClick, ...props }, ref) => {
+export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(({ onClick, ...props }, ref) => {
     const { listeners } = useNavigate();
 
     const clickHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {

diff --git a/packages/robindoc/src/components/blocks/pagination/index.tsx b/packages/robindoc/src/components/blocks/pagination/index.tsx
@@ -7,7 +7,6 @@ import "./pagination.scss";
 export type PaginationProps = {
     prev?: { title: string; pathname: string };
     next?: { title: string; pathname: string };
-    link?: React.ElementType;
     translations?: {
         /** Previous */
         previous?: string;
@@ -16,13 +15,13 @@ export type PaginationProps = {
     };
 };
 
-export const Pagination: React.FC<PaginationProps> = async ({ prev, next, link, translations }) => {
+export const Pagination: React.FC<PaginationProps> = async ({ prev, next, translations }) => {
     const { previous = "Previous", next: nextTranslation = "Next" } = translations || {};
 
     return (
         <div className="r-pagination">
             {prev ? (
-                <NavLink link={link} href={prev.pathname} className="r-pagination-item _prev">
+                <NavLink href={prev.pathname} className="r-pagination-item _prev">
                     <span className="r-pagination-icon _prev">
                         <svg
                             width="24"
@@ -47,7 +46,7 @@ export const Pagination: React.FC<PaginationProps> = async ({ prev, next, link,
                 <span />
             )}
             {next ? (
-                <NavLink link={link} href={next.pathname} className="r-pagination-item _next">
+                <NavLink href={next.pathname} className="r-pagination-item _next">
                     <span className="r-pagination-icon _next">
                         <svg
                             width="24"

diff --git a/packages/robindoc/src/components/blocks/search/index.tsx b/packages/robindoc/src/components/blocks/search/index.tsx
@@ -10,15 +10,14 @@ import { KbdContainer, KbdKey } from "@src/components/ui/kbd";
 import { useModal } from "@src/components/ui/modal/use-modal";
 
 export interface SearchProps {
-    link?: React.ElementType;
     searcher: SearchModalProps["searcher"];
     translations?: {
         /** Search... */
         search?: string;
     } & SearchModalProps["translations"];
 }
 
-export const Search: React.FC<SearchProps> = ({ link, searcher, translations }) => {
+export const Search: React.FC<SearchProps> = ({ searcher, translations }) => {
     const { search = "Search...", ...modalTranslations } = translations || {};
     const titleRef = useRef<HTMLSpanElement>(null);
     const { opened, closeHandler, openHandler } = useModal();
@@ -67,7 +66,6 @@ export const Search: React.FC<SearchProps> = ({ link, searcher, translations })
                 open={opened}
                 translations={modalTranslations}
                 searcher={searcher}
-                link={link}
                 onClose={closeHandler}
                 onInput={inputHandler}
             />

diff --git a/packages/robindoc/src/components/blocks/search/search-modal/index.tsx b/packages/robindoc/src/components/blocks/search/search-modal/index.tsx
@@ -11,7 +11,6 @@ import { Modal } from "@src/components/ui/modal";
 
 export interface SearchModalProps {
     onClose(): void;
-    link?: React.ElementType;
     open: boolean;
     onInput(text: string): void;
     searcher: Searcher | string;
@@ -23,7 +22,7 @@ export interface SearchModalProps {
     };
 }
 
-export const SearchModal: React.FC<SearchModalProps> = ({ translations, link, searcher, open, onClose, onInput }) => {
+export const SearchModal: React.FC<SearchModalProps> = ({ translations, searcher, open, onClose, onInput }) => {
     const { typeSomething = "Type something...", nothingFound = "Nothing found" } = translations || {};
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [results, setResults] = useState<SearchItem[] | null>(null);
@@ -66,7 +65,7 @@ export const SearchModal: React.FC<SearchModalProps> = ({ translations, link, se
                     {results.length > 0 ? (
                         results.map((item) => (
                             <li key={item.href}>
-                                <NavLink link={link} href={item.href} onClick={onClose} className="r-search-item">
+                                <NavLink href={item.href} onClick={onClose} className="r-search-item">
                                     <p className="r-search-item-title">{item.title}</p>
                                     {item.description && <p className="r-search-item-desc">{item.description}</p>}
                                 </NavLink>

diff --git a/packages/robindoc/src/components/blocks/section-dropdown/index.tsx b/packages/robindoc/src/components/blocks/section-dropdown/index.tsx
@@ -15,10 +15,9 @@ type SectionDropdownOption = {
 export type SectionDropdownProps = {
     defaultOption: string;
     options: SectionDropdownOption[];
-    link?: React.ElementType;
 };
 
-export const SectionDropdown: React.FC<SectionDropdownProps> = ({ defaultOption, options, link }) => {
+export const SectionDropdown: React.FC<SectionDropdownProps> = ({ defaultOption, options }) => {
     const defaultOptionDetailed = options.find((option) => option.key === defaultOption);
 
     if (!defaultOptionDetailed) {
@@ -47,7 +46,6 @@ export const SectionDropdown: React.FC<SectionDropdownProps> = ({ defaultOption,
                 {options.map((option) => (
                     <li key={option.key}>
                         <NavLink
-                            link={link}
                             href={option.href}
                             className={clsx("r-dropdown-link", option.key === defaultOption && "_active")}
                         >

diff --git a/packages/robindoc/src/components/contexts/sidebar/context.ts b/packages/robindoc/src/components/contexts/sidebar/context.ts
diff --git a/packages/robindoc/src/components/contexts/sidebar/provider.tsx b/packages/robindoc/src/components/contexts/sidebar/provider.tsx
diff --git a/packages/robindoc/src/components/contexts/sidebar/use-sidebar-store.ts b/packages/robindoc/src/components/contexts/sidebar/use-sidebar-store.ts
diff --git a/packages/robindoc/src/components/elements/article/document.tsx b/packages/robindoc/src/components/elements/article/document.tsx
@@ -73,7 +73,6 @@ export type ContentProps = {
     tokens: TokensList;
     headings: AnchorData[];
     subtree?: boolean;
-    link?: React.ElementType;
     pages?: { clientPath: string; origPath: string }[];
 };
 
@@ -86,7 +85,6 @@ export const Document: React.FC<ContentProps> = ({
     headings,
     config = {},
     subtree,
-    link,
     pages,
 }) => {
     const { publicDirs } = config;
@@ -207,7 +205,7 @@ export const Document: React.FC<ContentProps> = ({
                 }
 
                 return (
-                    <NavContentLink link={link} href={finalHref} external={external}>
+                    <NavContentLink href={finalHref} external={external}>
                         {token.tokens ? <DocumentToken token={token.tokens} /> : token.raw}
                     </NavContentLink>
                 );
@@ -336,7 +334,6 @@ export const Document: React.FC<ContentProps> = ({
                         raw={token.raw}
                         components={components}
                         config={config}
-                        link={link}
                         targetProvider={targetProvider}
                         pathname={pathname}
                         uri={uri}

diff --git a/packages/robindoc/src/components/elements/article/index.tsx b/packages/robindoc/src/components/elements/article/index.tsx
@@ -19,7 +19,6 @@ export type ContentProps = {
         publicDirs?: string[];
     };
     provider?: BaseProvider;
-    link?: React.ElementType;
     pathname: string;
     pages?: { clientPath: string; origPath: string }[];
     translations?: {
@@ -40,7 +39,6 @@ export const Article: React.FC<ArticleProps> = async ({
     config = {},
     provider,
     hideContents,
-    link,
     editUri: editUriProp,
     pathname,
     title,
@@ -70,9 +68,7 @@ export const Article: React.FC<ArticleProps> = async ({
 
     return (
         <ContentsProvider>
-            {breadcrumbs && breadcrumbs.length > 0 && (
-                <Breadcrumbs breadcrumbs={breadcrumbs} title={title} link={link} />
-            )}
+            {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs breadcrumbs={breadcrumbs} title={title} />}
             <Contents
                 editUri={editUriProp === null ? null : editUriProp || editUri}
                 hideContents={hideContents}
@@ -86,15 +82,14 @@ export const Article: React.FC<ArticleProps> = async ({
                     pages={pages}
                     components={components}
                     config={config}
-                    link={link}
                     targetProvider={targetProvider}
                     pathname={pathname}
                     uri={uri}
                 />
                 {lastModified && <LastModified date={lastModified}>{lastModifiedOn}</LastModified>}
             </div>
             {(prev || next) && (
-                <Pagination prev={prev} next={next} link={link} translations={{ next: nextTranslation, previous }} />
+                <Pagination prev={prev} next={next} translations={{ next: nextTranslation, previous }} />
             )}
         </ContentsProvider>
     );

diff --git a/packages/robindoc/src/components/elements/header/index.tsx b/packages/robindoc/src/components/elements/header/index.tsx
@@ -22,7 +22,6 @@ type SectionType = {
 
 export type HeaderProps = {
     logo: React.ReactElement;
-    link?: React.ElementType;
     links?: {
         title: string;
         href: string;
@@ -33,16 +32,7 @@ export type HeaderProps = {
 } & HeaderMenuProps &
     SearchProps;
 
-export const Header: React.FC<HeaderProps> = ({
-    logo,
-    versions,
-    locales,
-    link: Link = "a",
-    links = [],
-    git,
-    searcher,
-    translations,
-}) => {
+export const Header: React.FC<HeaderProps> = ({ logo, versions, locales, links = [], git, searcher, translations }) => {
     const { menu, ...searchTranslations } = translations || {};
     const targetVersion = versions?.list.find((version) => version.key === versions.target);
     const versionPrefix = !targetVersion || targetVersion.key === versions?.default ? "" : `/${targetVersion.key}`;
@@ -53,14 +43,14 @@ export const Header: React.FC<HeaderProps> = ({
         <header className="r-header">
             <Container className="r-header-body">
                 <div>
-                    <NavLink href="/" link={Link} className="r-header-logo">
+                    <NavLink href="/" className="r-header-logo">
                         {logo}
                     </NavLink>
                 </div>
                 <HeaderMenu translations={{ menu }}>
                     <nav className="r-header-nav">
                         {links.map((link) => (
-                            <NavLink href={link.href} link={Link} className="r-header-link" key={link.title}>
+                            <NavLink href={link.href} className="r-header-link" key={link.title}>
                                 {link.title}
                             </NavLink>
                         ))}
@@ -78,7 +68,6 @@ export const Header: React.FC<HeaderProps> = ({
                                         title: version.title,
                                         shortTitle: version.shortTitle,
                                     }))}
-                                    link={Link}
                                 />
                             )}
                             {locales && targetLocale && (
@@ -92,11 +81,10 @@ export const Header: React.FC<HeaderProps> = ({
                                         title: locale.title,
                                         shortTitle: locale.shortTitle,
                                     }))}
-                                    link={Link}
                                 />
                             )}
                         </div>
-                        {searcher && <Search link={Link} searcher={searcher} translations={searchTranslations} />}
+                        {searcher && <Search searcher={searcher} translations={searchTranslations} />}
                     </div>
                 </HeaderMenu>
                 {git && <HeaderSocial git={git} />}

diff --git a/packages/robindoc/src/components/elements/robin-provider/index.tsx b/packages/robindoc/src/components/elements/robin-provider/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 
 import { NavigateProvider } from "@src/components/contexts/navigate/provider";
-import { SidebarProvider } from "@src/components/contexts/sidebar/provider";
 
 const clientLogic = () => {
     const userTheme = localStorage.getItem("theme");
@@ -39,9 +38,7 @@ export const RobinProvider: React.FC<React.PropsWithChildren> = ({ children }) =
                     __html: `(${clientLogic})()`,
                 }}
             />
-            <SidebarProvider>
-                <NavigateProvider>{children}</NavigateProvider>
-            </SidebarProvider>
+            <NavigateProvider>{children}</NavigateProvider>
         </>
     );
 };