change version 1.7.0

2025-02-23 19:58:59 +07:00
parent d6e3946296
commit d73d28a114
15 changed files with 642 additions and 418 deletions
--- a/.vscode/card.code-snippets
+++ b/.vscode/card.code-snippets
@@ -2,24 +2,14 @@
    "DocuCards": {
      "prefix": "card",
      "body": [
-        "<div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">",
-            "<Card>",
-            "    <Card.Title title=\"${1:Heading}\" icon=\"${2:Heading}\" />",
-            "       <Card.Description description=\"${3:Your description card here! change this text}\" />",
+        "<CardGroup cols={2}>",
+            "<Card title=\"${1:Heading2}\" icon=\"${2:Heading2}\">",
+            "   This is an example of card content with columns.",
            "</Card>",
-            "<Card>",
-            "    <Card.Title title=\"Link\" icon=\"Link\" />",
-            "       <Card.Description description=\"Your description card here! change this text\" />",
+            "<Card title=\"${3:Heading3}\" icon=\"${4:Heading3}\">",
+            "   This is an example of card content with columns.",
            "</Card>",
-            "<Card>",
-            "    <Card.Title title=\"Images\" icon=\"Images\" />",
-            "        <Card.Description description=\"Your description card here! change this text\" />",
-            "</Card>",
-            "<Card>",
-            "    <Card.Title title=\"Code Block\" icon=\"Code\" />",
-            "        <Card.Description description=\"Your description card here! change this text\" />",
-            "</Card>",
-        "</div>"
+        "</CardGroup>"
      ],
      "description": "Create a DocuCards component on markdown."
    }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +0,0 @@
-{
-    "recommendations": []
-}
--- a/.vscode/tooltips.code-snippets
+++ b/.vscode/tooltips.code-snippets
@@ -2,14 +2,7 @@
    "DocuTooltips": {
      "prefix": "tooltips",
      "body": [
-        "<div className=\"w-full\">",
-        "   <Tooltip tip=\"${1:this is tooltips! DocuBook on version 1.0.5}\">",
-        "       <span style={{ textDecoration: \"underline dotted\", cursor: \"pointer\" }}>",
-        "           ${2:Hover over me}",
-        "       </span>",
-        "   </Tooltip>",
-        "   <span> ${3:and this is some regular text.}</span>",
-        "</div>"
+        "${1:What do you know about }<Tooltip text=\"${2:DocuBook}\" tip=\"${3:npx @docubook/create@latest}\" /> ${4:? Create interactive nested documentations using MDX.}",
      ],
      "description": "Create a DocuTooltips component with version examples."
    }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,183 @@
+## [1.7.0] - 2025-02-23
+
+> Remove the old function in the search dialog and replace it with a new and more optimal feature
+
+### Added
+
+- Up and down navigation : search dialog.tsx
+- Enter (return) to select : search dialog.tsx
+- Escape to close the dialog : search dialog.tsx
+
+### Improved
+
+- Maintenance for anchor components
+- Anchor.tsx adjustments for all elements that use it
+
+### Removed
+
+- Remove suboptimal search features
+
+## [1.6.0] - 2025-02-21
+
+> New Feature Card Groups with arrays for more Flexible Content
+
+### Added
+
+- Card Groups Components
+- Props : href to url link
+- Props : horizontal boolean
+
+### Improved
+
+- Card props styling
+- Compability for Cards components
+- {children} support for card content
+
+### Removed
+
+- remove unused props cards components
+
+## [1.5.0] - 2025-02-18
+
+> Minor Update - improved features and responsiveness on all devices
+
+### Added
+
+- New dialog footer on searchbox above @media 768px
+- Icon X for close dialog on searcbox as esc on medium screen
+
+### Improved
+
+- Responsive Leftbar components on large screen
+- Menu Trigger on medium screen
+- Responsive Navbar components on medium screen
+- Better UX for searchbox dialog
+- tooltips components can be written together with regular paragraphs
+
+### Fixed
+
+- Responsive issue
+- Compatibility for Bun
+- Changes postcss.config.js to .cjs for Bun
+- all CLI installer and updater not working
+- adjustments for package managers npm, pnpm, bun, yarn
+
+## [1.4.2] - 2025-02-16
+
+> Complex Content for Accordion Component props {children}
+
+### Added
+
+- New Props with {children} in accordion
+- Compatibility for markdown in accordion
+- Nested components inside an accordion
+- New icon on note components
+- add CLI npx @docubook/create@latest
+- add CLI npx @docubook/update@latest
+
+### Improved
+
+- Better UI design for accordion
+- Styling Note components on markdown
+- Change accordion output on playground
+- Change accordion output on snippet
+
+### Removed
+
+- Remove depcreated props on accordion
+- Remove CLI npx update_docu
+- Remove CLI npx create_docu
+
+## [1.4.0] - 2025-02-11
+
+> Floating Button Version with Dynamic Tag {version} on Changelog page
+
+### Added
+
+- New components / changelog floating-version.tsx
+- Button popover to open version-toc below @media 1024px
+- Dynamic tag by section ID #version
+- Dynamic url tag #version
+- Dynamic version indicator on floating version when scrolling section by ID
+
+### Improved
+
+- change icon version history
+- responsive version-toc
+- improvement components to changelog page
+
+## [1.3.8] - 2025-02-08
+
+> Responsive Table of Content
+
+### Added
+
+- Components terminal MagicUI
+- Components card Shadcn
+- New mob-toc for a better experience on mobile devices
+- New Components scroll to top button
+- Scroll to top :blog-post
+- Scroll to top :docs-post
+
+### Improved
+
+- lib/markdown for generated dynamic toc on markdown
+- Responsive Table of Content below @media 1024px
+- Improve docs page
+
+## [1.3.6] - 2025-02-01
+
+> Appears more modern editor for Docu Play
+
+![version 1.3.6 - Playground](https://docubook.pro/images/new-editor.png)
+
+### Added
+
+- Line Number for editor
+- editor.css
+
+### Improved
+
+- Better Design for Editor
+- Similar to Github Editor
+- Moved Handler Element (copy, download, reset and fullscreen) on Header
+
+## [1.3.5] - 2025-01-30
+
+> it's Easy to Write Markdown with Playground
+
+![version 1.3.5 - Playground](https://docubook.pro/images/img-playground.png)
+
+### Added
+
+- New Playground Page
+- New Playground Layout
+- Toolbar for Markdown Components
+- Fullscreen Mode to Focus Editing Your Content
+- Copy to Clipboard Your Content
+- Download Your Content as index.mdx
+- Reset Your Content without refresh the Browser
+- Only Large Screen for Better Experience
+
+## [1.3.1] - 2025-01-20
+
+> Snippet Feature to Easily Write Markdown and Call DocuBook Components
+
+![version 1.3.1 - Snippet Features](https://docubook.pro/images/snippet.png)
+
+### Added
+
+- New Feature Snippet for Markdown Components
+- Support Snippet for Visual Studio Code
+
+### Removed
+
+- remove props icon and props description for accordion components
+
 ## [1.3.0] - 2024-12-31

 > Release Note Feature to Make it Easier to Write Changelogs

-![version 1.3.0 - release note image](https://docubook.pro/images/release-note.png)
-
 ### Added

 - New Release Note Feature
@@ -48,7 +222,7 @@

 ## [1.1.0] - 2024-12-15

-> Major Update : Easily manage set up with docu.json
+> Minor Update : Easily manage set up with docu.json

 ### Added

--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -287,16 +287,10 @@ export default function PlaygroundPage() {
    Content for step 2
  </StepperItem>
 </Stepper>\n`,
-      card: `<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-  <Card>
-    <Card.Title title="Heading" icon="Heading" />
-    <Card.Description description="Your description card here! change this text" />
-  </Card>
-  <Card>
-    <Card.Title title="Link" icon="Link" />
-    <Card.Description description="Your description card here! change this text" />
-  </Card>
-</div>\n`,
+      card: `<Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
+    This is how you use a card with an icon and a link. Clicking on this card
+    brings you to the Card Group page.
+</Card>\n`,
      button: `<Button
  text="Click Me"
  href="#"
@@ -311,9 +305,7 @@ export default function PlaygroundPage() {
    3. number three
 </Accordion>\n`,
      youtube: `<Youtube videoId="your-video-id" />\n`,
-      tooltip: `<Tooltip tip="Your tooltip text">
-  <span>Hover over me</span>
-</Tooltip>\n`,
+      tooltip: `What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.\n`,
      tabs: `<Tabs defaultValue="tab1" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
--- a/components/anchor.tsx
+++ b/components/anchor.tsx
@@ -3,7 +3,7 @@
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ComponentProps } from "react";
+import { ComponentProps, forwardRef } from "react";

 type AnchorProps = ComponentProps<typeof Link> & {
  absolute?: boolean;
@@ -11,14 +11,8 @@ type AnchorProps = ComponentProps<typeof Link> & {
  disabled?: boolean;
 };

-export default function Anchor({
-  absolute,
-  className = "",
-  activeClassName = "",
-  disabled,
-  children,
-  ...props
-}: AnchorProps) {
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({ absolute, className = "", activeClassName = "", disabled, children, ...props }, ref) => {
    const path = usePathname();
    let isMatch = absolute
      ? props.href.toString().split("/")[1] == path.split("/")[1]
@@ -30,9 +24,15 @@ export default function Anchor({
      return (
        <div className={cn(className, "cursor-not-allowed")}>{children}</div>
      );
+
    return (
-    <Link className={cn(className, isMatch && activeClassName)} {...props}>
+      <Link ref={ref} className={cn(className, isMatch && activeClassName)} {...props}>
        {children}
      </Link>
    );
  }
+);
+// ✅ Tambahkan display name agar tidak error saat build
+Anchor.displayName = "Anchor";
+
+export default Anchor;
--- a/components/markdown/card.tsx
+++ b/components/markdown/card.tsx
@@ -1,57 +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;

-// Props untuk Card utama
 interface CardProps {
-  children: ReactNode;
-}
-
-// Props untuk CardTitle
-interface CardTitleProps {
  title: string;
-  icon?: IconName; // Properti ikon berupa nama ikon yang valid
+  icon?: IconName;
+  href?: string;
+  horizontal?: boolean;
+  children: ReactNode;
+  className?: string;
 }

-// Props untuk CardDescription
-interface CardDescriptionProps {
-  description: string;
-}
+const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, className }) => {
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;

-// Komponen Card Utama
-const Card: React.FC<CardProps> & {
-  Title: React.FC<CardTitleProps>;
-  Description: React.FC<CardDescriptionProps>;
-} = ({ children }) => {
-  return (
-    <div className="border rounded-lg shadow-md overflow-hidden py-4 px-8">
-      {children}
+  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;
 };

-// Komponen Card Title
-Card.Title = ({ title, icon }: CardTitleProps) => {
-  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
-
-  return (
-    <div className="flex flex-col space-y-1">
-      {Icon && <Icon className="text-xl text-primary" />} {/* Render ikon jika ada */}
-      <h2 className="text-xl font-bold">{title}</h2>
-    </div>
-  );
-};
-
-// Menambahkan displayName untuk Card.Title
-Card.Title.displayName = "CardTitle";
-
-// Komponen Card Description
-Card.Description = ({ description }: CardDescriptionProps) => (
-  <p className="text-muted-foreground text-[16.5px] mt-2">{description}</p>
-);
-
-// Menambahkan displayName untuk Card.Description
-Card.Description.displayName = "CardDescription";
-
 export default Card;
--- a/components/markdown/cardgroup.tsx
+++ b/components/markdown/cardgroup.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;
--- a/components/markdown/tooltips.tsx
+++ b/components/markdown/tooltips.tsx
@@ -1,30 +1,27 @@
-'use client';
+"use client";
 import React, { useState } from "react";

 interface TooltipProps {
-  tip: string; // Teks yang akan ditampilkan dalam tooltip
-  children: React.ReactNode; // Elemen yang akan memunculkan tooltip
+  text: string;
+  tip: string;
 }

-const Tooltip: React.FC<TooltipProps> = ({ tip, children }) => {
+const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
  const [visible, setVisible] = useState(false);

  return (
-    <div
-      className="relative inline-block"
+    <span
+      className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
-      {children}
+      {text}
      {visible && (
-        <div
-          className="absolute bottom-12 bg-black border-solid-2 border border-white text-white text-sm px-2 py-1 rounded"
-          style={{ whiteSpace: "nowrap" }}
-        >
+        <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}
-        </div>
+        </span>
      )}
-    </div>
+    </span>
  );
 };

--- a/components/search.tsx
+++ b/components/search.tsx
@@ -1,6 +1,8 @@
 "use client";

-import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileTextIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import {
  Dialog,
@@ -11,14 +13,15 @@ import {
  DialogClose,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { useEffect, useMemo, useState } from "react";
 import Anchor from "./anchor";
 import { advanceSearch, cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";

 export default function Search() {
+  const router = useRouter();
  const [searchedInput, setSearchedInput] = useState("");
  const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
@@ -40,6 +43,41 @@ export default function Search() {
    [searchedInput]
  );

+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredResults]);
+
+  useEffect(() => {
+    const handleNavigation = (event: KeyboardEvent) => {
+      if (!isOpen || filteredResults.length === 0) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const selectedItem = filteredResults[selectedIndex];
+        if (selectedItem) {
+          router.push(`/docs${selectedItem.href}`);
+          setIsOpen(false);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleNavigation);
+
+    return () => {
+      window.removeEventListener("keydown", handleNavigation);
+    };
+  }, [isOpen, filteredResults, selectedIndex, router]);
+
  return (
    <div>
      <Dialog
@@ -82,19 +120,21 @@ export default function Search() {
          )}
          <ScrollArea className="max-h-[400px] overflow-y-auto">
            <div className="flex flex-col items-start overflow-y-auto sm:px-2 px-1 pb-4">
-              {filteredResults.map((item) => {
-                const level = (item.href.split("/").slice(1).length -
-                  1) as keyof typeof paddingMap;
+              {filteredResults.map((item, index) => {
+                const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
                const paddingClass = paddingMap[level];
+                const isActive = index === selectedIndex;

                return (
                    <DialogClose key={item.href} asChild>
                        <Anchor
                        className={cn(
-                        "dark:hover:bg-stone-900 hover:bg-stone-100 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                            "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                            isActive && "bg-primary/20 dark:bg-primary/30",
                            paddingClass
                        )}
                        href={`/docs${item.href}`}
+                        tabIndex={0}
                        >
                        <div
                            className={cn(
@@ -102,8 +142,7 @@ export default function Search() {
                            level > 1 && "border-l pl-4"
                            )}
                        >
-                        <FileIcon className="h-[1.1rem] w-[1.1rem] mr-1" />{" "}
-                        {item.title}
+                            <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" /> {item.title}
                        </div>
                        </Anchor>
                    </DialogClose>
@@ -140,5 +179,4 @@ const paddingMap = {
  1: "pl-2",
  2: "pl-4",
  3: "pl-10",
-  // Add more levels if needed
 } as const;
--- a/contents/docs/getting-started/introduction/index.mdx
+++ b/contents/docs/getting-started/introduction/index.mdx
@@ -10,24 +10,20 @@ Selamat datang di **AddonSejoliPro** penyedia produk Add-On plugin Sejoli yang s

 > Beberapa plugin yang sering digunakan oleh pengguna untuk membuat tampilan custom member area, custom halaman checkout hanya dengan Elementor Page Builder.

-<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-  <Card>
-    <Card.Title title="Sejoli Member Area UI" icon="LayoutPanelLeft" />
-    <Card.Description description="Untuk mengubah desain tampilan member area hanya drag and drop." />
+<CardGroup cols={2}>
+<Card title="Sejoli Member Area UI" icon="LayoutPanelLeft">
+   Untuk mengubah desain tampilan member area hanya drag and drop.
 </Card>
-  <Card>
-    <Card.Title title="Sejoli Shortcodes" icon="Brackets" />
-    <Card.Description description="Plugin ini merupakan depedensi dari Member Area UI." />
+<Card title="Sejoli Shortcodes" icon="Brackets">
+   Plugin ini merupakan depedensi dari Member Area UI.
 </Card>
-  <Card>
-    <Card.Title title="Sejoli Checkout UI" icon="ReceiptText" />
-    <Card.Description description="Mengubah halaman checkout sepenuhnya dengan widget Elementor." />
+<Card title="Sejoli Checkout UI" icon="ReceiptText">
+   Mengubah halaman checkout sepenuhnya dengan widget Elementor.
 </Card>
-  <Card>
-    <Card.Title title="Sejoli LMS Pro" icon="GraduationCap" />
-    <Card.Description description="Plugin yang digunakan untuk membuat kursus online based on Sejoli." />
+<Card title="Sejoli LMS Pro" icon="GraduationCap">
+   Plugin yang digunakan untuk membuat kursus online based on Sejoli.
 </Card>
-</div>
+</CardGroup>

 ## Depedensi

--- a/lib/markdown.ts
+++ b/lib/markdown.ts
@@ -23,6 +23,7 @@ import Tooltip from "@/components/markdown/tooltips";
 import Card from "@/components/markdown/card";
 import Button from "@/components/markdown/button";
 import Accordion from "@/components/markdown/accordion";
+import CardGroup from "@/components/markdown/cardgroup";

 // add custom components
 const components = {
@@ -42,6 +43,7 @@ const components = {
  Card,
  Button,
  Accordion,
+  CardGroup,
 };

 // can be used for other pages like blogs, Guides etc
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "docubook",
-  "version": "1.5.0",
+  "version": "1.7.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "docubook",
-      "version": "1.5.0",
+      "version": "1.7.0",
      "dependencies": {
        "@radix-ui/react-accordion": "^1.2.0",
        "@radix-ui/react-avatar": "^1.1.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "docubook",
-  "version": "1.5.0",
+  "version": "1.7.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
@@ -51,5 +51,6 @@
    "postcss": "^8",
    "tailwindcss": "^3.4.10",
    "typescript": "^5"
-  }
+  },
+  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml