dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update documentations

Browse Source
This commit is contained in:
gitfromwildan
2025-05-30 17:23:02 +07:00
parent 63fc96be07
commit bcafa9b5d9
14 changed files with 92 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
contents/docs/components/accordion/index.mdx
View File

@@ -4,41 +4,55 @@ description: A component used to create collapsible content that can be hidden a
date: 22-12-2024
---
The Accordion component is a collapsible content container that can be used to hide and show content again. It is a flexible component that can be used to display any content, including HTML elements, markdown components, and plain text.
## Preview
### Code Block
### Basic Usage
<Accordion title="Code Block" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
<Accordion title="Click to expand" defaultOpen={true}>
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
</Accordion>
### With Code Block
<Accordion title="Code Example" className="mt-4">
```javascript:utils.js showLineNumbers
// Example of using the Accordion component
import Accordion from '@/components/markdown/AccordionMdx';
function Example() {
return (
<Accordion title="Click to see code">
<pre>
{`function greet() {\n console.log('Hello, world!');\n}`}
</pre>
</Accordion>
);
}
```
</Accordion>
### Text with Markdown
### With Markdown Content
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
<Accordion title="Markdown Example" className="mt-4">
## This is a markdown heading
- List item 1
- List item 2
- List item 3
You can include **bold** and *italic* text, [links](#), and other markdown elements.
</Accordion>
## Props
| Prop | Type | Default | Description |
| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- |
| `title` | `string` | `null` | The value of Accordion title. |
| `children` | `ReactNode` | `null` | Flexible content, both HTML elements, markdown componenst and plain text. |
| `defaultOpen` | `boolean` | `false` | You can change the value to `true` if you want the content to open when the page loads |
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | string | - | **Required**. The text displayed in the accordion header. |
| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
## Code
## Output Markdown
<Tabs defaultValue="markdown" className="pt-5 pb-1">
<TabsList>

24
contents/docs/components/button/index.mdx
View File

@@ -4,14 +4,12 @@ description: A component used to create buttons that can be used to trigger acti
date: 14-12-2024
---
The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
## Preview
<Button
text="Learn More"
href="https://learn.example.com"
icon="ArrowUpRight"
icon="MoveUpRight"
size="md"
target="_blank"
variation="primary"
@@ -19,18 +17,18 @@ The Button component is a component used to create buttons that can be used to t
## Props
| Prop | Type | Default | Description |
| ----------- | -------- | -------------- | -------------------------------------------- |
| `text` | `string` | `""` | The value of text button. |
| `href` | `string` | `""` | The value of url button. |
| `icon` | `string` | `null` | The value of button icon render from lucide. |
| `size` | `string` | `"sm, md, lg"` | The value of size button. |
| `target` | `string` | `"_blank"` | By default target `_blank` |
| `variation` | `string` | `"primary"` | By default variation is **Primary** |
| Prop | Type | Default | Description |
| ----------- | -------- | ----------- | -------------------------------------------- |
| `text` | string | undefined | The button text |
| `href` | string | **required**| The URL to navigate to |
| `icon` | string | undefined | Lucide icon name (e.g. "MoveUpRight") |
| `size` | string | "md" | Button size: `"sm"`, `"md"`, or `"lg"` |
| `target` | string | undefined | Link target (e.g. "_blank") |
| `variation` | string | "primary" | Button style: `"primary"`, `"accent"`, or `"outline"` |
## Code
## Output Markdown
```bash
```markdown
<Button
text="Learn More"
href="https://learn.example.com"

6
contents/docs/components/card-group/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to create card groups that can be used to display
date: 20-02-2025
---
The CardGroup component is a component used to create card groups that can be used to display multiple cards in a compact and organized way.
## Preview
<CardGroup cols={2}>
@@ -27,9 +25,9 @@ The CardGroup component is a component used to create card groups that can be us
| Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `cols` | `number` | `{2}` | By default 2 The number of columns per row |
| `cols` | number | {2} | By default 2 The number of columns per row |
## Code
## Output Markdown
```markdown
<CardGroup cols={2}>

14
contents/docs/components/card/index.mdx
View File

@@ -4,13 +4,11 @@ description: A component used to create cards that can be used to display conten
date: 20-02-2025
---
The Card component is a component used to create cards that can be used to display content in a compact and organized way.
## Example
### Card with Link and icon
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group">
<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>
@@ -32,12 +30,12 @@ The Card component is a component used to create cards that can be used to displ
| Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `title` | `string` | `""` | 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` | `""` | horizontal layout for card. |
| `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. |
## Code
## Output Markdown
<Tabs defaultValue="link" className="pt-5 pb-1">
<TabsList>

6
contents/docs/components/code-block/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to display code snippets with optional line number
date: 14-12-2024
---
The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
## Preview
```javascript:main.js showLineNumbers {3-4}
@@ -19,7 +17,7 @@ function isRocketAboutToCrash() {
In this example, line numbers are displayed for lines 1 to 4. You can specify which lines to highlight using the format `{2,3-5}`.
## Usage
## Output Markdown
You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
@@ -34,7 +32,7 @@ function isRocketAboutToCrash() {
```
````
### Features
## Features
- **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}`).

6
contents/docs/components/file-tree/index.mdx
View File

@@ -51,14 +51,14 @@ The root component that wraps the entire file tree.
| Prop | Type | Required | Description |
|----------|----------|----------|---------------------------------------|
| name | string | Yes | The name of the folder |
| children | ReactNode | No | Child elements (File or Folder) |
| `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 |
| `name` | string | Yes | The name of the file |
## Examples

6
contents/docs/components/keyboard/index.mdx
View File

@@ -49,9 +49,9 @@ Renders as: <Kbd show="custom">Custom</Kbd>
| 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) |
| `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

10
contents/docs/components/note/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to display different types of messages such as gen
date: 14-12-2024
---
The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
## Preview
<Note type="note" title="Note">
@@ -25,12 +23,12 @@ The `Note` component allows you to display different types of messages such as g
| Prop | Type | Default | Description |
| ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
| `title` | `string` | "Note" | Sets the title of the note. |
| `type` | `"note"`, `"danger"`, `"warning"`, `"success"` | "note" | Determines the visual style of the note. |
| `title` | string | "Note" | Sets the title of the note. |
| `type` | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
## Code
## Output Markdown
```jsx
```markdown
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>

4
contents/docs/components/release-note/index.mdx
View File

@@ -10,7 +10,7 @@ The Release Note component makes it easy for you to write and display changelogs
Here is a basic example of using the Release Note component:
```jsx
```markdown
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="added">
- New feature to improve accessibility
@@ -49,7 +49,7 @@ The `Release` component is used to display key information about a release versi
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
```jsx
```markdown
<Release
version="1.10.1"
date="2025-05-24"

6
contents/docs/components/stepper/index.mdx
View File

@@ -8,8 +8,6 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
## Preview
##
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
@@ -26,9 +24,9 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
</StepperItem>
</Stepper>
## Code
## Output Markdown
```jsx
```markdown
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,

8
contents/docs/components/tabs/index.mdx
View File

@@ -38,12 +38,12 @@ The `Tabs` component allows you to organize content into multiple sections, enab
| Prop | Type | Default | Description |
| -------------- | -------- | ------- | ------------------------------------------------------ |
| `defaultValue` | `string` | `null` | The value of the tab that is selected by default. |
| `className` | `string` | `""` | Additional CSS classes for styling the Tabs component. |
| `defaultValue` | string | null | The value of the tab that is selected by default. |
| `className` | string | null | Additional CSS classes for styling the Tabs component. |
## Code
## Output Markdown
````jsx
````plaintext
<Tabs defaultValue="java" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="java">Java</TabsTrigger>

2
contents/docs/components/tooltips/index.mdx
View File

@@ -13,7 +13,7 @@ You can use tooltips in your Markdown content to provide additional information
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
### Code
### Output Markdown
The above Markdown is converted to:

12
contents/docs/components/youtube/index.mdx
View File

@@ -8,14 +8,16 @@ I have implemented a `YouTube` component for your documentation. This component
## Preview
<Youtube videoId="cpraXaw7dyc" />
<Youtube videoId="8sM0Di7Ew9Q" />
## Code
## Output Markdown
```bash
<Youtube videoId="cpraXaw7dyc" />
```markdown
<Youtube videoId="8sM0Di7Ew9Q" />
```
## Usage
for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`
<Note type="note" title="Usage">
for example the youtube URL show this https://www.youtube.com/watch?v=8sM0Di7Ew9Q the ID `8sM0Di7Ew9Q`
</Note>