@docubook/create 1.9.0 → 1.11.2

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

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+import NextImage from "next/image";
+
+type Height = ComponentProps<typeof NextImage>["height"];
+type Width = ComponentProps<typeof NextImage>["width"];
+
+export default function Image({
+  src,
+  alt = "alt",
+  width = 800,
+  height = 350,
+  ...props
+}: ComponentProps<"img">) {
+  if (!src) return null;
+  return (
+    <NextImage
+      src={src}
+      alt={alt}
+      width={width as Width}
+      height={height as Height}
+      quality={40}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,102 @@
+import React from 'react';
+
+// Map of special keys to their Mac symbols
+const macKeyMap: Record<string, string> = {
+  command: '⌘',
+  cmd: '⌘',
+  option: '⌥',
+  alt: '⌥',
+  shift: '⇧',
+  ctrl: '⌃',
+  control: '⌃',
+  tab: '⇥',
+  caps: '⇪',
+  enter: '⏎',
+  return: '⏎',
+  delete: '⌫',
+  escape: '⎋',
+  esc: '⎋',
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+  space: '␣',
+};
+
+// Map of special keys to their Windows display text
+const windowsKeyMap: Record<string, string> = {
+  command: 'Win',
+  cmd: 'Win',
+  option: 'Alt',
+  alt: 'Alt',
+  ctrl: 'Ctrl',
+  control: 'Ctrl',
+  delete: 'Del',
+  escape: 'Esc',
+  esc: 'Esc',
+  enter: 'Enter',
+  return: 'Enter',
+  tab: 'Tab',
+  caps: 'Caps',
+  shift: 'Shift',
+  space: 'Space',
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+};
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  /** The key to display (e.g., 'cmd', 'ctrl', 'a') */
+  show?: string;
+  /** Platform style - 'window' or 'mac' */
+  type?: 'window' | 'mac';
+  /** Custom content to display (overrides automatic rendering) */
+  children?: React.ReactNode;
+}
+
+const KbdComponent: React.FC<KbdProps> = ({
+  show: keyProp,
+  type = 'window',
+  children,
+  ...props
+}) => {
+  // Get the display text based on the key and type
+  const getKeyDisplay = (): React.ReactNode => {
+    if (!keyProp || typeof keyProp !== 'string') return null;
+
+    const lowerKey = keyProp.toLowerCase();
+
+    // For Mac type, return the symbol if it exists
+    if (type === 'mac') {
+      return macKeyMap[lowerKey] || keyProp;
+    }
+
+    // For Windows, return the formatted key if it exists, otherwise capitalize the first letter
+    return windowsKeyMap[lowerKey] || (keyProp.charAt(0).toUpperCase() + keyProp.slice(1));
+  };
+
+  // Determine what to render
+  const renderContent = () => {
+    // If children are provided, always use them
+    if (children !== undefined && children !== null && children !== '') {
+      return children;
+    }
+    // Otherwise use the generated display
+    return getKeyDisplay() || keyProp || '';
+  };
+
+  return (
+    <kbd
+      className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+      {...props}
+    >
+      {renderContent()}
+    </kbd>
+  );
+};
+
+// Export the component
+export const Kbd = KbdComponent;
+// Default export for backward compatibility
+export default KbdComponent;

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

@@ -0,0 +1,14 @@
+import NextLink from "next/link";
+import { ComponentProps } from "react";
+
+export default function Link({ href, ...props }: ComponentProps<"a">) {
+  if (!href) return null;
+  return (
+    <NextLink
+      href={href}
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer"
+    />
+  );
+}

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

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+import {
+  Info,
+  AlertTriangle,
+  ShieldAlert,
+  CheckCircle,
+} from "lucide-react";
+
+type NoteProps = PropsWithChildren & {
+  title?: string;
+  type?: "note" | "danger" | "warning" | "success";
+};
+
+const iconMap = {
+  note: <Info size={16} className="text-blue-500" />,
+  danger: <ShieldAlert size={16} className="text-red-500" />,
+  warning: <AlertTriangle size={16} className="text-orange-500" />,
+  success: <CheckCircle size={16} className="text-green-500" />,
+};
+
+export default function Note({
+  children,
+  title = "Note",
+  type = "note",
+}: NoteProps) {
+  const noteClassNames = clsx({
+    "dark:bg-stone-950/25 bg-stone-50": type === "note",
+    "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
+      type === "danger",
+    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
+      type === "warning",
+    "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
+      type === "success",
+  });
+
+  return (
+    <div
+      className={cn(
+        "border rounded-md px-5 pb-0.5 mt-5 mb-7 text-sm tracking-wide",
+        noteClassNames
+      )}
+    >
+      <div className="flex items-center gap-2 font-bold -mb-2.5 pt-6">
+        {iconMap[type]}
+        <span className="text-base">{title}:</span>
+      </div>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { BaseMdxFrontmatter, getAllChilds } from "@/lib/markdown";
+import Link from "next/link";
+
+export default async function Outlet({ path }: { path: string }) {
+  if (!path) throw new Error("path not provided");
+  const output = await getAllChilds(path);
+
+  return (
+    <div className="grid md:grid-cols-2 gap-5">
+      {output.map((child) => (
+        <ChildCard {...child} key={child.title} />
+      ))}
+    </div>
+  );
+}
+
+type ChildCardProps = BaseMdxFrontmatter & { href: string };
+
+function ChildCard({ description, href, title }: ChildCardProps) {
+  return (
+    <Link
+      href={href}
+      className="border rounded-md p-4 no-underline flex flex-col gap-0.5"
+    >
+      <h4 className="!my-0">{title}</h4>
+      <p className="text-sm text-muted-foreground !my-0">{description}</p>
+    </Link>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import Copy from "./CopyMdx";
+
+export default function Pre({
+  children,
+  raw,
+  ...rest
+}: ComponentProps<"pre"> & { raw?: string }) {
+  return (
+    <div className="my-5 relative">
+      <div className="absolute top-3 right-2.5 z-10 sm:block hidden">
+        <Copy content={raw!} />
+      </div>
+      <div className="relative">
+        <pre {...rest}>{children}</pre>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,109 @@
+import React, { PropsWithChildren } from 'react';
+import { cn } from '@/lib/utils';
+import { PlusCircle, Wrench, Zap, AlertTriangle, XCircle } from 'lucide-react';
+
+interface ReleaseProps extends PropsWithChildren {
+  version: string;
+  title: string;
+  date?: string;
+}
+
+function Release({ version, title, date, children }: ReleaseProps) {
+
+  return (
+    <div className="mb-16 group">
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="bg-primary/10 text-primary border-2 border-primary/20 rounded-full px-4 py-1.5 text-base font-medium">
+            v{version}
+          </div>
+          {date && (
+            <div className="text-muted-foreground text-sm">
+              {new Date(date).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </div>
+          )}
+        </div>
+        <h2 className="text-2xl font-bold text-foreground/90 mb-3">
+          {title}
+        </h2>
+      </div>
+      <div className="space-y-8">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface ChangesProps extends PropsWithChildren {
+  type: 'added' | 'fixed' | 'improved' | 'deprecated' | 'removed';
+}
+
+const typeConfig = {
+  added: {
+    label: 'Added',
+    className: 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300',
+    icon: PlusCircle,
+  },
+  fixed: {
+    label: 'Fixed',
+    className: 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300',
+    icon: Wrench,
+  },
+  improved: {
+    label: 'Improved',
+    className: 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300',
+    icon: Zap,
+  },
+  deprecated: {
+    label: 'Deprecated',
+    className: 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300',
+    icon: AlertTriangle,
+  },
+  removed: {
+    label: 'Removed',
+    className: 'bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300',
+    icon: XCircle,
+  },
+} as const;
+
+function Changes({ type, children }: ChangesProps) {
+  const config = typeConfig[type] || typeConfig.added;
+
+  return (
+    <div className="space-y-3 mb-8">
+      <div className="flex items-center gap-2">
+        <div className={cn("px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1.5", config.className)}>
+          <config.icon className="h-3.5 w-3.5" />
+          <span>{config.label}</span>
+        </div>
+      </div>
+      <ul className="list-none pl-0 space-y-2 text-foreground/80">
+        {React.Children.map(children, (child, index) => {
+          // Jika teks dimulai dengan - atau *, hapus karakter tersebut
+          const processedChild = typeof child === 'string'
+            ? child.trim().replace(/^[-*]\s+/, '')
+            : child;
+
+          return (
+            <li key={index} className="leading-relaxed">
+              {processedChild}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export { Release, Changes };
+
+const ReleaseMdx = {
+  Release,
+  Changes
+};
+
+export default ReleaseMdx;

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

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+import clsx from "clsx";
+import { Children, PropsWithChildren } from "react";
+
+export function Stepper({ children }: PropsWithChildren) {
+  const length = Children.count(children);
+
+  return (
+    <div className="flex flex-col">
+      {Children.map(children, (child, index) => {
+        return (
+          <div
+            className={cn(
+              "border-l pl-9 ml-3 relative",
+              clsx({
+                "pb-5 ": index < length - 1,
+              })
+            )}
+          >
+            <div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
+              {index + 1}
+            </div>
+            {child}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function StepperItem({
+  children,
+  title,
+}: PropsWithChildren & { title?: string }) {
+  return (
+    <div className="pt-0.5">
+      <h4 className="mt-0">{title}</h4>
+      <div>{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+
+interface TooltipProps {
+  text: string;
+  tip: string;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <span
+      className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      {text}
+      {visible && (
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-background text-foreground text-sm p-2 rounded shadow-md break-words text-center outline outline-1 outline-offset-2">
+          {tip}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default Tooltip;

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface YoutubeProps {
+  videoId: string;
+  className?: string;
+}
+
+const Youtube: React.FC<YoutubeProps> = ({ videoId, className }) => {
+  return (
+    <div className={`youtube ${className || ""}`}>
+      <iframe
+        src={`https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&showinfo=0&autohide=1&controls=1`}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+};
+
+export default Youtube;

package/src/dist/components/markdown/mdx-provider.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
+import { Kbd } from './KeyboardMdx';
+
+// Define components mapping
+const components = {
+  // Keyboard components
+  Kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
+  kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
+};
+
+interface MDXProviderWrapperProps {
+  source: string;
+}
+
+export function MDXProviderWrapper({ source }: MDXProviderWrapperProps) {
+  return (
+    <div className="prose dark:prose-invert max-w-none">
+      <MDXRemote
+        source={source}
+        components={components}
+        options={{
+          parseFrontmatter: true,
+        }}
+      />
+    </div>
+  );
+}

package/src/dist/components/mob-toc.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { List, ChevronDown, ChevronUp } from "lucide-react";
+import TocObserver from "./toc-observer";
+import * as React from "react";
+import { useRef, useMemo } from "react";
+import { usePathname } from "next/navigation";
+import { Button } from "./ui/button";
+import { motion, AnimatePresence } from "framer-motion";
+import { useScrollPosition, useActiveSection } from "@/hooks";
+import { TocItem } from "@/lib/toc";
+
+interface MobTocProps {
+  tocs: TocItem[];
+}
+
+const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClick = React.useCallback((event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  }, [ref, callback]);
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [handleClick]);
+};
+
+export default function MobToc({ tocs }: MobTocProps) {
+  const pathname = usePathname();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const tocRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Use custom hooks
+  const { activeId, setActiveId } = useActiveSection(tocs);
+
+  // Only show on /docs pages
+  const isDocsPage = useMemo(() => pathname?.startsWith('/docs'), [pathname]);
+
+  // Toggle expanded state
+  const toggleExpanded = React.useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded(prev => !prev);
+  }, []);
+
+  // Close TOC when clicking outside
+  useClickOutside(tocRef, () => {
+    if (isExpanded) {
+      setIsExpanded(false);
+    }
+  });
+
+  // Handle body overflow when TOC is expanded
+  React.useEffect(() => {
+    if (isExpanded) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isExpanded]);
+
+  // Don't render anything if not on docs page or no TOC items
+  if (!isDocsPage || !tocs?.length) return null;
+
+  const chevronIcon = isExpanded ? (
+    <ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+  ) : (
+    <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+  );
+
+  return (
+    <AnimatePresence>
+        <motion.div
+          ref={tocRef}
+          className="lg:hidden fixed top-16 left-0 right-0 z-50"
+          initial={{ y: -100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -100, opacity: 0 }}
+          transition={{ duration: 0.2, ease: 'easeInOut' }}
+        >
+          <div className="w-full bg-background/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-800 shadow-sm">
+            <div className="sm:px-8 px-4 py-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-full justify-between h-auto py-2 px-2 -mx-1 rounded-md hover:bg-transparent hover:text-inherit"
+                onClick={toggleExpanded}
+                aria-label={isExpanded ? 'Collapse table of contents' : 'Expand table of contents'}
+              >
+                <div className="flex items-center gap-2">
+                  <List className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  <span className="font-medium text-sm">On this page</span>
+                </div>
+                {chevronIcon}
+              </Button>
+
+              <AnimatePresence>
+                {isExpanded && (
+                  <motion.div
+                    ref={contentRef}
+                    className="mt-2 pb-2 max-h-[60vh] overflow-y-auto px-1 -mx-1"
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.2, ease: 'easeInOut' }}
+                  >
+                    <TocObserver
+                      data={tocs}
+                      activeId={activeId}
+                      onActiveIdChange={setActiveId}
+                    />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        </motion.div>
+    </AnimatePresence>
+  );
+}