@docubook/create 2.3.0 → 2.5.0

package/src/dist/docs/components/card.mdx

@@ -0,0 +1,68 @@
+---
+title: Cards
+description: A component used to create cards that can be used to display content in a compact and organized way.
+date: 20-02-2025
+---
+
+## Example
+
+### Card with Link and icon
+
+<Card title="Click on me" icon="Link" href="/docs/components/card-group">
+  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>
+
+### Card Horizontal
+
+<Card title="Horizontal Card" icon="Layout" horizontal>
+  This is a horizontal card layout.
+</Card>
+
+### Card Simple
+
+<Card title="Simple Card">
+  This is a simple card without an icon or link.
+</Card>
+
+
+## Props
+
+| Prop          | Type     | Default | Description                                             |
+| ------------- | -------- | ------- | ------------------------------------------------------- |
+| `title`       | string   | null    | The value of card title.                                |
+| `icon`        | string   | null  | The value of card icon render from lucide.              |
+| `href`        | string   | null  | The value of card link url.              |
+| `horizontal`   | boolean  | undefined    | horizontal layout for card. |
+
+## Output Markdown
+
+<Tabs defaultValue="link" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="link">Link & Icon</TabsTrigger>
+    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
+    <TabsTrigger value="simple">Simple</TabsTrigger>
+  </TabsList>
+  <TabsContent value="link">
+    ```markdown
+    <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>
+    ```
+  </TabsContent>
+  <TabsContent value="horizontal">
+    ```markdown
+    <Card title="Horizontal Card" icon="Layout" horizontal>
+        This is a horizontal card layout.
+    </Card>
+    ```
+  </TabsContent>
+  <TabsContent value="simple">
+    ```markdown
+    <Card title="Simple Card">
+        This is a simple card without an icon or link.
+    </Card>
+    ```
+  </TabsContent>
+</Tabs>

package/src/dist/docs/components/code-block.mdx

@@ -0,0 +1,67 @@
+---
+title: Code Block
+description: A component used to display code snippets with optional line numbering and line highlighting.
+date: 14-12-2024
+---
+
+## Preview
+
+```javascript:main.js showLineNumbers {3-4}
+function isRocketAboutToCrash() {
+    // Check if the rocket is stable
+    if (!isStable()) {
+        NoCrash(); // Prevent the crash
+    }
+}
+```
+
+In this example, line numbers are displayed for lines 3 and 4. You can specify which lines to highlight using the format `{2,3-5}`.
+
+## Output Markdown
+
+You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
+
+````plaintext
+```javascript:main.js showLineNumbers {3-4}
+function isRocketAboutToCrash() {
+    // Check if the rocket is stable
+    if (!isStable()) {
+        NoCrash(); // Prevent the crash
+    }
+}
+```
+````
+
+## Features
+
+- **Language Title**: You can use a title for each programming language to render an icon and display a title bar. For example : `javascript:index.js`
+- **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks.
+- **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).
+- **Syntax Highlighting**: Use the appropriate language for syntax highlighting.
+
+## Language Support
+
+| **Language**         | **Title**                |
+| -------------------- | ------------------------ |
+| **javascript**       | `javascript:index.js`    |
+| **typescript**       | `typescript:index.ts`    |
+| **jsx** or **tsx**   | `jsx:index.jsx`          |
+| **python**           | `python:main.py`         |
+| **go**               | `go:main.go`             |
+| **php**              | `php:index.php`          |
+| **ruby**             | `ruby:main.rb`           |
+| **swift**            | `swift:main.swift`       |
+| **kotlin**           | `kotlin:main.kt`         |
+| **html**             | `html:index.html`        |
+| **css**              | `css:styles.css`         |
+| **sass** or **scss** | `sass:styles.sass`       |
+| **sql**              | `sql:database.sql`       |
+| **graphql**          | `graphql:database.gql`   |
+| **json**             | `json:config.json`       |
+| **yaml**             | `yaml:config.yml`        |
+| **toml**             | `toml:config.toml`       |
+| **docker**           | `docker:main.Dockerfile` |
+| **nginx**            | `nginx:config.nginx`     |
+| **gitignore**        | `gitignore:.git`         |
+| **bash**             | `bash:install.sh`        |
+| **markdown**         | `markdown:readme.md`     |

package/src/dist/docs/components/custom.mdx

@@ -0,0 +1,38 @@
+---
+title: Custom Components
+description: How to create custom components for Markdown.
+date: 14-12-2024
+---
+
+To add custom components in DocuBook, follow these steps:
+
+1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
+
+2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
+
+3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
+
+```ts
+import Outlet from "@/components/markdown/outlet";
+
+// Add custom components
+const components = {
+  Outlet,
+};
+```
+
+4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
+
+### Markdown Example
+
+```markdown
+<Outlet>
+  This is some custom content rendered by the Outlet component!
+</Outlet>
+```
+
+### Rendered Output
+
+This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
+
+By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.

package/src/dist/docs/components/file-tree.mdx

@@ -0,0 +1,109 @@
+---
+title: File Tree Component
+description: A customizable file tree component for displaying hierarchical file structures in your documentation.
+date: 28-05-2025
+---
+
+The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.
+
+## Basic Usage
+
+```
+<Files>
+  <Folder name="src">
+    <File name="App.tsx" />
+    <File name="index.tsx" />
+    <Folder name="components">
+      <File name="Button.tsx" />
+      <File name="Card.tsx" />
+    </Folder>
+    <Folder name="pages">
+      <File name="Home.tsx" />
+      <File name="About.tsx" />
+    </Folder>
+  </Folder>
+</Files>
+```
+
+Render As:
+<Files>
+  <Folder name="src">
+    <File name="App.tsx" />
+    <File name="index.tsx" />
+    <Folder name="components">
+      <File name="Button.tsx" />
+      <File name="Card.tsx" />
+    </Folder>
+    <Folder name="pages">
+      <File name="Home.tsx" />
+      <File name="About.tsx" />
+    </Folder>
+  </Folder>
+</Files>
+
+## Props
+
+### Files
+
+The root component that wraps the entire file tree.
+
+### Folder
+
+| Prop     | Type     | Required | Description                           |
+|----------|----------|----------|---------------------------------------|
+| `name`     | string   | Yes      | The name of the folder                |
+| `children` | ReactNode | No      | Child elements (File or Folder)       |
+
+### File
+
+| Prop | Type   | Required | Description                |
+|------|--------|----------|----------------------------|
+| `name` | string | Yes      | The name of the file       |
+
+
+## Examples
+
+### Nested Folder Structure
+
+```
+<Files>
+  <Folder name="project-root">
+    <File name="package.json" />
+    <File name="tsconfig.json" />
+    <Folder name="src">
+      <File name="index.ts" />
+      <Folder name="components">
+        <File name="Button.tsx" />
+        <File name="Card.tsx" />
+      </Folder>
+    </Folder>
+  </Folder>
+</Files>
+```
+
+### Minimal Example
+
+```
+<Files>
+  <Folder name="components">
+    <File name="Button.tsx" />
+    <File name="Input.tsx" />
+  </Folder>
+</Files>
+```
+
+## Best Practices
+
+1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
+2. Use clear and descriptive names for files and folders
+3. Consider the user experience when displaying large file structures
+4. Use consistent naming conventions throughout your file tree
+
+## Accessibility
+
+The File Tree component includes built-in accessibility features:
+
+- Keyboard navigation support
+- ARIA attributes for screen readers
+- Focus management for interactive elements
+- High contrast mode support

package/src/dist/docs/components/image.mdx

@@ -0,0 +1,37 @@
+---
+title: Image
+description: A component used to display images in Markdown.
+date: 14-12-2024
+---
+
+In DocuBook, all images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
+
+## Images
+
+Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
+
+### Markdown
+
+```markdown
+![Alt text for the image](https://via.placeholder.com/150)
+```
+
+### Rendered Output
+
+The above Markdown is converted to:
+
+```jsx
+<Image
+  src="https://via.placeholder.com/150"
+  alt="Alt text for the image"
+  width={800}
+  height={350}
+/>
+```
+
+## Benefits
+
+- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images.
+- **Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
+
+By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

package/src/dist/docs/components/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Components
+description: This section provides an overview of the custom components available in DocuBook.
+date: 29-11-2024
+---
+
+Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
+
+<Outlet path="components" />

package/src/dist/docs/components/keyboard.mdx

@@ -0,0 +1,117 @@
+---
+title: Keyboard
+description: Display keyboard keys with platform-specific styling for Windows and macOS.
+date : 19-05-2025
+---
+
+The `Keyboard` component automatically renders platform-appropriate key symbols for macOS and Windows. It's perfect for documenting keyboard shortcuts in your application.
+
+## Usage
+
+### Basic Usage
+
+Simply use the `Kbd` component with a `show` prop:
+
+```tsx
+<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
+```
+
+Renders as:
+<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
+
+### Automatic Symbol Rendering
+
+The component automatically renders appropriate symbols based on the platform:
+
+```tsx
+{/* Windows style (default) */}
+<Kbd show="ctrl" /> + <Kbd show="v" />
+
+{/* Mac style */}
+<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
+```
+
+Renders as:
+- Windows: <Kbd show="ctrl" type="window" /> + <Kbd show="v" type="window" />
+- Mac: <Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
+
+### Custom Content
+
+For custom key labels, provide children:
+
+```tsx
+<Kbd show="custom">Custom</Kbd>
+```
+
+Renders as: <Kbd show="custom">Custom</Kbd>
+
+## Props
+
+| Prop      | Type                | Default    | Description |
+|-----------|---------------------|------------|-------------|
+| `show`    | string            | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') |
+| `type`    | string | `window` | for device type `mac` or `window` | Platform style or custom content |
+| `children`| ReactNode         | -          | Custom content to display (overrides automatic rendering) |
+
+## Supported Keys
+
+The component includes special handling for common keys:
+
+| Key Name    | Windows | macOS |
+|-------------|---------|-------|
+| command/cmd | `Win`   | `⌘`   |
+| option/alt  | `Alt`   | `⌥`   |
+| shift       | `Shift` | `⇧`   |
+| ctrl/control| `Ctrl`  | `⌃`   |
+| tab         | `Tab`   | `⇥`   |
+| enter/return| `Enter` | `⏎`   |
+| delete      | `Del`   | `⌫`   |
+| escape/esc  | `Esc`   | `⎋`   |
+| up/down/left/right  | `↑` `↓` `←` `→` | `↑` `↓` `←` `→` |
+| space       | `Space` | `␣`   |
+
+## Examples
+
+### Common Shortcuts
+
+```tsx
+{/* Copy shortcut */}
+<Kbd show="ctrl" /> + <Kbd show="c" />
+
+{/* Paste shortcut */}
+<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
+
+{/* Save shortcut */}
+<Kbd show="ctrl" /> + <Kbd show="s" />
+```
+
+### Custom Key Combinations
+
+```tsx
+{/* Custom application shortcut */}
+<Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
+```
+
+Render as: <Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
+
+### Arrow Key
+
+```tsx
+<Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
+```
+
+Render as: <Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
+
+## Best Practices
+
+1. **Be Consistent**: Stick to one platform style within the same context
+2. **Use Type Wisely**:
+   - Use `type="mac"` for Mac-specific documentation
+   - Use `type="window"` (default) for Windows/Linux
+3. **Accessibility**: The component uses semantic `<kbd>` HTML for better accessibility
+
+## Notes
+
+- The component automatically capitalizes single letters (e.g., 'a' becomes 'A')
+- Unrecognized keys are displayed as-is
+- Dark mode is automatically supported through Tailwind's dark mode classes

package/src/dist/docs/components/link.mdx

@@ -0,0 +1,34 @@
+---
+title: Link
+description: A component used to create links that can be used to navigate to other pages.
+date: 14-12-2024
+---
+
+In DocuBook, all links written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
+
+## Links
+
+When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:
+
+### Markdown
+
+```markdown
+[Visit OpenAI](https://www.openai.com)
+```
+
+### Rendered Output
+
+The above Markdown is converted to:
+
+```jsx
+<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
+  Visit OpenAI
+</Link>
+```
+
+## Benefits
+
+- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of links.
+- **Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
+
+By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

package/src/dist/docs/components/note.mdx

@@ -0,0 +1,44 @@
+---
+title: Note
+description: A component used to display different types of messages such as general notes, warnings, or success notifications.
+date: 14-12-2024
+---
+
+## Preview
+
+<Note type="note" title="Note">
+  This is a general note to convey information to the user.
+</Note>
+<Note type="danger" title="Danger">
+  This is a danger alert to notify the user of a critical issue.
+</Note>
+<Note type="warning" title="Warning">
+  This is a warning alert for issues that require attention.
+</Note>
+<Note type="success" title="Success">
+  This is a success message to inform the user of successful actions.
+</Note>
+
+## Props
+
+| Prop    | Type                                           | Default | Description                              |
+| ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
+| `title` | string                                       | "Note"  | Sets the title of the note.              |
+| `type`  | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
+
+## Output Markdown
+
+```markdown
+<Note type="note" title="Note">
+  This is a general note to convey information to the user.
+</Note>
+<Note type="danger" title="Danger">
+  This is a danger alert to notify the user of a critical issue.
+</Note>
+<Note type="warning" title="Warning">
+  This is a warning alert for issues that require attention.
+</Note>
+<Note type="success" title="Success">
+  This is a success message to inform the user of successful actions.
+</Note>
+```

package/src/dist/docs/components/release-note.mdx

@@ -0,0 +1,114 @@
+---
+title: Release Note
+description: The Release Note component makes it easy for you to write updates for each version of your application.
+date: 31-12-2024
+---
+
+The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: `Release` and `Changes` which can be used to display version, date, release title, and a list of changes categorized by type.
+
+## Basic Usage
+
+Here is a basic example of using the Release Note component:
+
+```markdown:.mdx
+<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
+  <Changes type="added">
+    - New feature to improve accessibility
+    - Keyboard navigation support for dialog components
+  </Changes>
+  <Changes type="fixed">
+    - Bug fix for mobile menu
+    - Fixed loading issues on documentation pages
+  </Changes>
+</Release>
+```
+
+## Release Component
+
+The `Release` component is used to display key information about a release version, such as version number, release date, and title.
+
+### Release Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `version` | string | ✅ | Version number to display (without "v" prefix) |
+| `title` | string | ✅ | Title or name of the release |
+| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
+| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
+
+```markdown:.mdx
+<Release
+  version="1.10.1"
+  date="2025-05-24"
+  title="Accessibility Improvements and Bug Fixes"
+>
+  {/* Changes content here */}
+</Release>
+```
+
+## Changes Component
+
+The `Changes` component is used to group changes by category with appropriate icons and colors.
+
+### Changes Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
+| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
+
+### Changes Note
+
+| Category | Description |
+|----------|-------------|
+| `added` | New features or functionality added |
+| `fixed` | Bugs or issues that have been fixed |
+| `improved` | Enhancements or optimizations to existing features |
+| `deprecated` | Features that are not recommended and may be removed in future |
+| `removed` | Features that have been completely removed |
+
+### Changes Example
+
+```markdown:.mdx
+<Changes type="added">
+  - New feature to improve accessibility
+  - Keyboard navigation support for dialog components
+</Changes>
+
+<Changes type="fixed">
+  - Bug fix for mobile menu
+  - Fixed loading issues on documentation pages
+</Changes>
+```
+
+## Complete Implementation
+
+Here is a complete example of using the Release Note component in an MDX file:
+
+```markdown:.mdx
+<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
+  <Changes type="added">
+    - Keyboard navigation for all interactive components
+    - Screen reader support for table components
+    - Dark mode feature with system preference detection
+  </Changes>
+
+  <Changes type="fixed">
+    - Fixed mobile menu bug that wouldn't close when navigating to another page
+    - Fixed loading issues on documentation pages
+    - Fixed display issues in Safari browser
+  </Changes>
+
+  <Changes type="improved">
+    - Improved page loading performance
+    - Optimized JavaScript bundle size
+    - Enhanced responsive design across all viewports
+  </Changes>
+</Release>
+```
+
+## Usage Tips
+
+1. **Date Format**: Use a consistent date format for all releases.
+2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
+3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.

package/src/dist/docs/components/stepper.mdx

@@ -0,0 +1,45 @@
+---
+title: Stepper
+description: A component used to display step-by-step instructions directly within the markdown render.
+date: 14-12-2024
+---
+
+In this guide, we utilize a custom `Stepper` component, specifically designed for DocuBook, which enables users to display step-by-step instructions directly within the markdown render.
+
+## Preview
+
+<Stepper>
+  <StepperItem title="Step 1: Clone the DocuBook Repository">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
+    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
+    dolor in lorem.
+  </StepperItem>
+  <StepperItem title="Step 2: Access the Project Directory">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
+    eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
+  </StepperItem>
+  <StepperItem title="Step 3: Install Required Dependencies">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
+    ipsum nec nulla ultricies porttitor et non justo.
+  </StepperItem>
+</Stepper>
+
+## Output Markdown
+
+```markdown
+<Stepper>
+  <StepperItem title="Step 1: Clone the DocuBook Repository">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
+    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
+    dolor in lorem.
+  </StepperItem>
+  <StepperItem title="Step 2: Access the Project Directory">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
+    eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
+  </StepperItem>
+  <StepperItem title="Step 3: Install Required Dependencies">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
+    ipsum nec nulla ultricies porttitor et non justo.
+  </StepperItem>
+</Stepper>
+```