@docubook/create 1.9.0 → 1.11.2

package/src/dist/components/Sponsor.tsx

@@ -0,0 +1,69 @@
+import docuData from "@/docu.json";
+import Image from "next/image";
+import Link from "next/link";
+
+// Define types for docu.json
+interface SponsorItem {
+  url: string;
+  image: string;
+  title: string;
+  description?: string;
+}
+
+interface DocuConfig {
+  sponsor?: {
+    title?: string;
+    item?: SponsorItem;
+  };
+  navbar: any; // Anda bisa mendefinisikan tipe yang lebih spesifik jika diperlukan
+  footer: any;
+  meta: any;
+  repository: any;
+  routes: any[];
+}
+
+// Type assertion for docu.json
+const docuConfig = docuData as DocuConfig;
+
+export function Sponsor() {
+  // Safely get sponsor data with optional chaining and default values
+  const sponsor = docuConfig?.sponsor || {};
+  const item = sponsor?.item;
+  
+  // Return null if required fields are missing
+  if (!item?.url || !item?.image || !item?.title) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4">
+      {sponsor?.title && (
+        <h2 className="mb-4 text-sm font-medium">{sponsor.title}</h2>
+      )}
+      <Link
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex flex-col justify-center gap-2 p-4 border rounded-lg hover:shadow transition-shadow"
+      >
+        <div className="relative w-8 h-8 flex-shrink-0">
+          <Image
+            src={item.image}
+            alt={item.title}
+            fill
+            className="object-contain"
+            sizes="32px"
+          />
+        </div>
+        <div className="text-center sm:text-left">
+          <h3 className="text-sm font-medium">{item.title}</h3>
+          {item.description && (
+            <p className="text-muted-foreground text-sm">{item.description}</p>
+          )}
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default Sponsor;

package/src/dist/components/anchor.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link, { LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+import { forwardRef } from "react";
+
+type AnchorProps = LinkProps & {
+  absolute?: boolean;
+  activeClassName?: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>;
+
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({
+    absolute = false,
+    className = "",
+    activeClassName = "",
+    disabled = false,
+    children,
+    href,
+    ...props
+  }, ref) => {
+    const path = usePathname();
+    const hrefStr = href?.toString() || '';
+
+    // Check if URL is external
+    const isExternal = /^(https?:\/\/|\/\/)/.test(hrefStr);
+
+    // Check if current path matches the link
+    const isActive = absolute
+      ? hrefStr.split("/")[1] === path?.split("/")[1]
+      : path === hrefStr;
+
+    // Apply active class only for internal links
+    const linkClassName = cn(
+      'transition-colors hover:text-primary',
+      className,
+      !isExternal && isActive && activeClassName
+    );
+
+    if (disabled) {
+      return (
+        <span className={cn(linkClassName, "cursor-not-allowed opacity-50")}>
+          {children}
+        </span>
+      );
+    }
+
+
+    if (isExternal) {
+      return (
+        <a
+          ref={ref}
+          href={hrefStr}
+          className={linkClassName}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...props}
+        >
+          {children}
+        </a>
+      );
+    }
+
+
+    return (
+      <Link
+        ref={ref}
+        href={hrefStr}
+        className={linkClassName}
+        {...props}
+      >
+        {children}
+      </Link>
+    );
+  }
+);
+
+Anchor.displayName = "Anchor";
+
+export default Anchor;

package/src/dist/components/contexts/theme-provider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/src/dist/components/docs-breadcrumb.tsx

@@ -0,0 +1,47 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Fragment } from "react";
+
+export default function DocsBreadcrumb({ paths }: { paths: string[] }) {
+  return (
+    <div className="pb-5 max-lg:pt-12">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink>Docs</BreadcrumbLink>
+          </BreadcrumbItem>
+          {paths.map((path, index) => (
+            <Fragment key={`${path}-${index}`}>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                {index < paths.length - 1 ? (
+                  <BreadcrumbLink className="a">
+                    {toTitleCase(path)}
+                  </BreadcrumbLink>
+                ) : (
+                  <BreadcrumbPage className="b">
+                    {toTitleCase(path)}
+                  </BreadcrumbPage>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          ))}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  );
+}
+
+function toTitleCase(input: string): string {
+  const words = input.split("-");
+  const capitalizedWords = words.map(
+    (word) => word.charAt(0).toUpperCase() + word.slice(1)
+  );
+  return capitalizedWords.join(" ");
+}

package/src/dist/components/docs-menu.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ROUTES } from "@/lib/routes-config";
+import SubLink from "./sublink";
+import { usePathname } from "next/navigation";
+
+interface DocsMenuProps {
+  isSheet?: boolean;
+  className?: string;
+}
+
+export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
+  const pathname = usePathname();
+
+  // Skip rendering if not on a docs page
+  if (!pathname.startsWith("/docs")) return null;
+
+  return (
+    <nav
+      aria-label="Documentation navigation"
+      className={className}
+    >
+      <ul className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
+        {ROUTES.map((item, index) => {
+          // Normalize href - hapus leading/trailing slashes
+          const normalizedHref = `/${item.href.replace(/^\/+|\/+$/g, '')}`;
+          const itemHref = `/docs${normalizedHref}`;
+
+          const modifiedItems = {
+            ...item,
+            href: itemHref,
+            level: 0,
+            isSheet,
+          };
+
+          return (
+            <li key={`${item.title}-${index}`}>
+              <SubLink {...modifiedItems} />
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/dist/components/edit-on-github.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import docuConfig from '@/docu.json'; // Import JSON
+import { SquarePenIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface EditThisPageProps {
+  filePath: string;
+}
+
+const EditThisPage: React.FC<EditThisPageProps> = ({ filePath }) => {
+  const { repository } = docuConfig;
+
+  if (!repository?.editLink || !repository.url || !repository.editPathTemplate) return null;
+
+  const editUrl = `${repository.url}${repository.editPathTemplate.replace("{filePath}", filePath)}`;
+
+  return (
+    <div className="text-right">
+      <Link
+        href={editUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Edit this page on Git"
+        className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground no-underline"
+      >
+        <span className="flex justify-start items-center gap-1">Edit this page
+        <SquarePenIcon className="w-4 h-4" /></span>
+      </Link>
+    </div>
+  );
+};
+
+export default EditThisPage;

package/src/dist/components/footer.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link";
+import { ModeToggle } from "@/components/theme-toggle";
+import docuData from "@/docu.json";
+import * as LucideIcons from "lucide-react";
+
+// Define types for docu.json
+interface SocialItem {
+  name: string;
+  url: string;
+  iconName: string;
+}
+
+interface FooterConfig {
+  copyright: string;
+  social?: SocialItem[];
+}
+
+// Type assertion for docu.json
+const docuConfig = docuData as {
+  footer: FooterConfig;
+};
+
+export function Footer() {
+  const { footer } = docuConfig;
+  return (
+    <footer className="w-full py-8 border-t bg-background">
+      <div className="container flex flex-col lg:flex-row items-center justify-between text-sm">
+        <div className="flex flex-col items-center lg:items-start justify-start gap-4 w-full lg:w-3/5 text-center lg:text-left">
+            <p className="text-muted-foreground">
+                Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
+            </p>
+            <div className="flex items-center justify-center lg:justify-start gap-6 mt-2 w-full">
+                <FooterButtons />
+            </div>
+        </div>
+        <div className="hidden lg:flex items-center justify-end lg:w-2/5">
+            <ModeToggle />
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export function FooterButtons() {
+  const footer = docuConfig?.footer;
+
+  // Jangan render apapun jika tidak ada data sosial
+  if (!footer || !Array.isArray(footer.social) || footer.social.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {footer.social.map((item) => {
+        const IconComponent =
+          (LucideIcons[item.iconName as keyof typeof LucideIcons] ??
+            LucideIcons["Globe"]) as React.FC<{ className?: string }>;
+
+        return (
+          <Link
+            key={item.name}
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={item.name}
+          >
+            <IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+export function MadeWith() {
+  return (
+    <>
+      <span className="text-muted-foreground">Made with </span>
+      <span className="text-primary">
+        <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
+            DocuBook
+        </Link></span>
+    </>
+  );
+}

package/src/dist/components/leftbar.tsx

@@ -0,0 +1,95 @@
+"use client"
+import { useState } from "react";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { Logo, NavMenu } from "@/components/navbar";
+import { Button } from "@/components/ui/button";
+import { AlignLeftIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { FooterButtons } from "@/components/footer";
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import DocsMenu from "@/components/docs-menu";
+import { ModeToggle } from "@/components/theme-toggle";
+
+// Toggle Button Component
+export function ToggleButton({
+  collapsed,
+  onToggle
+}: {
+  collapsed: boolean,
+  onToggle: () => void
+}) {
+  return (
+    <div className="absolute top-0 right-0 py-6 z-10 -mt-4">
+      <Button
+        size="icon"
+        variant="outline"
+        className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
+        onClick={onToggle}
+      >
+        {collapsed ? (
+          <PanelLeftOpen size={18} />
+        ) : (
+          <PanelLeftClose size={18} />
+        )}
+      </Button>
+    </div>
+  )
+}
+
+export function Leftbar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const toggleCollapse = () => setCollapsed(prev => !prev);
+
+  return (
+    <aside
+      className={`sticky lg:flex hidden top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300
+      ${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
+    >
+      <ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
+      {/* Scrollable DocsMenu */}
+      <ScrollArea className="flex-1 px-0.5 pb-4">
+        {!collapsed && <DocsMenu />}
+      </ScrollArea>
+    </aside>
+  );
+}
+
+export function SheetLeftbar() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="max-lg:flex hidden">
+          <AlignLeftIcon />
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="flex flex-col gap-4 px-0" side="left">
+        <DialogTitle className="sr-only">Navigation Menu</DialogTitle>
+        <DialogDescription className="sr-only">
+          Main navigation menu with links to different sections
+        </DialogDescription>
+        <SheetHeader>
+          <SheetClose className="px-5" asChild>
+            <span className="px-2"><Logo /></span>
+          </SheetClose>
+        </SheetHeader>
+        <div className="flex flex-col gap-4 overflow-y-auto">
+          <div className="flex flex-col gap-2.5 mt-3 mx-2 px-5">
+            <NavMenu isSheet />
+          </div>
+          <div className="mx-2 px-5">
+            <DocsMenu isSheet />
+          </div>
+          <div className="flex w-2/4 px-5">
+            <ModeToggle />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/dist/components/markdown/AccordionMdx.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { ReactNode, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type AccordionProps = {
+    title: string;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+};
+
+const Accordion = ({
+    title,
+    children,
+    defaultOpen = false,
+    className,
+}: AccordionProps) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+        <div className={cn("border rounded-lg overflow-hidden", className)}>
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center my-auto space-x-2 space-y-2 w-full px-4 h-12 transition-colors bg-background dark:hover:bg-muted/50 hover:bg-muted/15"
+            >
+                <ChevronRight
+                    className={cn(
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200",
+                        isOpen && "rotate-90"
+                    )}
+                />
+                <h3 className="font-medium text-base text-foreground pb-2">{title}</h3>
+            </button>
+
+            {isOpen && (
+                <div className="px-4 py-3 border-t dark:bg-muted/50 bg-muted/15">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Accordion;

package/src/dist/components/markdown/ButtonMdx.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import * as Icons from "lucide-react";
+import Link from "next/link";
+
+type IconName = keyof typeof Icons;
+type ButtonProps = {
+  icon?: keyof typeof Icons;
+  text?: string;
+  href: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  size?: "sm" | "md" | "lg";
+  variation?: "primary" | "accent" | "outline";
+};
+
+const Button: React.FC<ButtonProps> = ({
+  icon,
+  text,
+  href,
+  target,
+  size = "md",
+  variation = "primary",
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded font-medium focus:outline-none transition no-underline";
+
+  const sizeStyles = {
+    sm: "px-3 py-1 my-6 text-sm",
+    md: "px-4 py-2 my-6 text-base",
+    lg: "px-5 py-3 my-6 text-lg",
+  };
+
+  const variationStyles = {
+    primary: "bg-primary text-white hover:bg-primary/90",
+    accent: "bg-accent text-white hover:bg-accent/90",
+    outline: "border border-accent text-accent hover:bg-accent/10",
+  };
+
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
+      className={`${baseStyles} ${sizeStyles[size]} ${variationStyles[variation]}`}
+    >
+      {text && <span>{text}</span>}
+      {Icon && <Icon className="mr-2 h-5 w-5" />}
+    </Link>
+  );
+};
+
+export default Button;

package/src/dist/components/markdown/CardGroupMdx.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+
+interface CardGroupProps {
+  children: ReactNode;
+  cols?: number;
+  className?: string;
+}
+
+const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className }) => {
+  const cardsArray = React.Children.toArray(children); // Pastikan children berupa array
+
+  return (
+    <div
+      className={clsx(
+        "grid gap-4",
+        `grid-cols-1 sm:grid-cols-${cols}`,
+        className
+      )}
+    >
+      {cardsArray.map((card, index) => (
+        <div key={index}>{card}</div>
+      ))}
+    </div>
+  );
+};
+
+export default CardGroup;

package/src/dist/components/markdown/CardMdx.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import * as Icons from "lucide-react";
+import Link from "next/link";
+import clsx from "clsx";
+
+type IconName = keyof typeof Icons;
+
+interface CardProps {
+  title: string;
+  icon?: IconName;
+  href?: string;
+  horizontal?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, className }) => {
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
+
+  const content = (
+    <div
+      className={clsx(
+        "border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
+        "hover:bg-gray-50 dark:hover:bg-gray-800",
+        "flex gap-2",
+        horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
+        className
+      )}
+    >
+      {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
+      <div className="flex-1 min-w-0 my-auto h-full">
+        <span className="text-base font-semibold">{title}</span>
+        <div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
+      </div>
+    </div>
+  );
+
+  return href ? <Link className="no-underline block" href={href}>{content}</Link> : content;
+};
+
+export default Card;

package/src/dist/components/markdown/CopyMdx.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "../ui/button";
+import { useState } from "react";
+
+export default function Copy({ content }: { content: string }) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(content);
+    setIsCopied(true);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      className="border"
+      size="xs"
+      onClick={handleCopy}
+    >
+      {isCopied ? (
+        <CheckIcon className="w-3 h-3" />
+      ) : (
+        <CopyIcon className="w-3 h-3" />
+      )}
+    </Button>
+  );
+}