feat(build): migrate from Prettier to Oxfmt for docs

Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
hainenber
2026-07-28 21:38:39 +07:00
parent af9729a861
commit 1bbc63099b
2163 changed files with 89307 additions and 32009 deletions

View File

@@ -33,73 +33,73 @@ A component that renders a trigger element which opens a modal when clicked. Use
<StoryWithControls
component="ModalTrigger"
props={{
isButton: true,
modalTitle: "Modal Title",
modalBody: "This is the modal body content.",
tooltip: "Click to open modal",
width: "600px",
maxWidth: "1000px",
responsive: true,
draggable: false,
resizable: false,
triggerNode: "Click to Open Modal"
}}
isButton: true,
modalTitle: 'Modal Title',
modalBody: 'This is the modal body content.',
tooltip: 'Click to open modal',
width: '600px',
maxWidth: '1000px',
responsive: true,
draggable: false,
resizable: false,
triggerNode: 'Click to Open Modal',
}}
controls={[
{
name: "isButton",
label: "Is Button",
type: "boolean",
description: "Whether to wrap the trigger in a button element."
},
{
name: "modalTitle",
label: "Modal Title",
type: "text",
description: "Title displayed in the modal header."
},
{
name: "modalBody",
label: "Modal Body",
type: "text",
description: "Content displayed in the modal body."
},
{
name: "tooltip",
label: "Tooltip",
type: "text",
description: "Tooltip text shown on hover over the trigger."
},
{
name: "width",
label: "Width",
type: "text",
description: "Width of the modal (e.g., \"600px\", \"80%\")."
},
{
name: "maxWidth",
label: "Max Width",
type: "text",
description: "Maximum width of the modal."
},
{
name: "responsive",
label: "Responsive",
type: "boolean",
description: "Whether the modal should be responsive."
},
{
name: "draggable",
label: "Draggable",
type: "boolean",
description: "Whether the modal can be dragged by its header."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether the modal can be resized by dragging corners."
}
]}
{
name: 'isButton',
label: 'Is Button',
type: 'boolean',
description: 'Whether to wrap the trigger in a button element.',
},
{
name: 'modalTitle',
label: 'Modal Title',
type: 'text',
description: 'Title displayed in the modal header.',
},
{
name: 'modalBody',
label: 'Modal Body',
type: 'text',
description: 'Content displayed in the modal body.',
},
{
name: 'tooltip',
label: 'Tooltip',
type: 'text',
description: 'Tooltip text shown on hover over the trigger.',
},
{
name: 'width',
label: 'Width',
type: 'text',
description: 'Width of the modal (e.g., "600px", "80%").',
},
{
name: 'maxWidth',
label: 'Max Width',
type: 'text',
description: 'Maximum width of the modal.',
},
{
name: 'responsive',
label: 'Responsive',
type: 'boolean',
description: 'Whether the modal should be responsive.',
},
{
name: 'draggable',
label: 'Draggable',
type: 'boolean',
description: 'Whether the modal can be dragged by its header.',
},
{
name: 'resizable',
label: 'Resizable',
type: 'boolean',
description: 'Whether the modal can be resized by dragging corners.',
},
]}
/>
## Try It
@@ -113,7 +113,9 @@ function Demo() {
isButton
triggerNode={<span>Click to Open</span>}
modalTitle="Example Modal"
modalBody={<p>This is the modal content. You can put any React elements here.</p>}
modalBody={
<p>This is the modal content. You can put any React elements here.</p>
}
width="500px"
responsive
/>
@@ -165,18 +167,18 @@ function DraggableModal() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
| Prop | Type | Default | Description |
| ------------- | --------- | ----------------------------------- | -------------------------------------------------------- |
| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
## Import