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,51 +33,52 @@ A container component for grouping related content. Supports titles, borders, lo
<StoryWithControls
component="Card"
props={{
padded: true,
title: "Dashboard Overview",
children: "This card displays a summary of your dashboard metrics and recent activity.",
bordered: true,
loading: false,
hoverable: false
}}
padded: true,
title: 'Dashboard Overview',
children:
'This card displays a summary of your dashboard metrics and recent activity.',
bordered: true,
loading: false,
hoverable: false,
}}
controls={[
{
name: "padded",
label: "Padded",
type: "boolean",
description: "Whether the card content has padding."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title text displayed at the top of the card."
},
{
name: "children",
label: "Children",
type: "text",
description: "The content inside the card."
},
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show a border around the card."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading skeleton."
},
{
name: "hoverable",
label: "Hoverable",
type: "boolean",
description: "Whether the card lifts on hover."
}
]}
{
name: 'padded',
label: 'Padded',
type: 'boolean',
description: 'Whether the card content has padding.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title text displayed at the top of the card.',
},
{
name: 'children',
label: 'Children',
type: 'text',
description: 'The content inside the card.',
},
{
name: 'bordered',
label: 'Bordered',
type: 'boolean',
description: 'Whether to show a border around the card.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether to show a loading skeleton.',
},
{
name: 'hoverable',
label: 'Hoverable',
type: 'boolean',
description: 'Whether the card lifts on hover.',
},
]}
/>
## Try It
@@ -88,7 +89,8 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<Card title="Dashboard Overview" bordered>
This card displays a summary of your dashboard metrics and recent activity.
This card displays a summary of your dashboard metrics and recent
activity.
</Card>
);
}
@@ -119,14 +121,14 @@ function CardStates() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `padded` | `boolean` | `true` | Whether the card content has padding. |
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
| Prop | Type | Default | Description |
| ----------- | --------- | ------------------------------------------------------------------------------- | -------------------------------------------- |
| `padded` | `boolean` | `true` | Whether the card content has padding. |
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
## Import