Skip to content

Commit effc66e

Browse files
mehdibhamehdibha
authored
docs: fix code preview for ComponentPreview (#35)
* docs: fix code preview for ComponentPreview * fix: format
1 parent 6ea9503 commit effc66e

39 files changed

+1705
-1586
lines changed

‎www/content/docs/components/buttons/file-trigger.mdx

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ links:
1717
<ComponentPreview
1818
name="core/file-trigger-default"
1919
preview={`<FileTrigger>
20-
<Button prefix={<UploadIcon />}>Upload</Button>
20+
<Button prefix={<UploadIcon />}>Upload</Button>
2121
</FileTrigger>`}
2222
/>
2323

@@ -61,7 +61,7 @@ By default, the file trigger will accept any file type. To support only certain
6161
<ComponentPreview
6262
name="core/file-trigger-file-types"
6363
preview={`<FileTrigger acceptedFileTypes={["image/*"]}>
64-
<Button prefix={<UploadIcon />}>Upload</Button>
64+
<Button prefix={<UploadIcon />}>Upload</Button>
6565
</FileTrigger>`}
6666
/>
6767

@@ -72,7 +72,7 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` prop.
7272
<ComponentPreview
7373
name="core/file-trigger-multiple-files"
7474
preview={`<FileTrigger allowMultiple>
75-
<Button prefix={<UploadIcon />}>Upload</Button>
75+
<Button prefix={<UploadIcon />}>Upload</Button>
7676
</FileTrigger>`}
7777
/>
7878

@@ -84,7 +84,7 @@ This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web
8484
<ComponentPreview
8585
name="core/file-trigger-directory-selection"
8686
preview={`<FileTrigger acceptDirectory>
87-
<Button prefix={<UploadIcon />}>Upload</Button>
87+
<Button prefix={<UploadIcon />}>Upload</Button>
8888
</FileTrigger>`}
8989
/>
9090

@@ -96,7 +96,7 @@ This behavior only works on mobile devices. On desktop devices, it will open the
9696
<ComponentPreview
9797
name="core/file-trigger-media-capture"
9898
preview={`<FileTrigger defaultCamera="environment">
99-
<Button prefix={<UploadIcon />}>Upload</Button>
99+
<Button prefix={<UploadIcon />}>Upload</Button>
100100
</FileTrigger>`}
101101
/>
102102

‎www/content/docs/components/buttons/toggle-button.mdx

+8-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ links:
1717

1818
<ComponentPreview
1919
name="core/toggle-button-default"
20-
preview={`<ToggleButton><PinIcon /></ToggleButton>`}
20+
preview={`<ToggleButton>
21+
<PinIcon />
22+
</ToggleButton>`}
2123
/>
2224

2325
## Installation
@@ -115,11 +117,11 @@ Use the `isSelected` and `onChange` props to control the state of the toggle but
115117
<ComponentPreview
116118
name="core/toggle-button-controlled"
117119
preview={`const [isSelected, setSelected] = React.useState(true);
118-
return (
119-
<ToggleButton isSelected={isSelected} onChange={setSelected}>
120-
<PinIcon className="rotate-45" />
121-
</ToggleButton>
122-
);`}
120+
return (
121+
<ToggleButton isSelected={isSelected} onChange={setSelected}>
122+
<PinIcon className="rotate-45" />
123+
</ToggleButton>
124+
);`}
123125
/>
124126

125127
## API Reference

‎www/content/docs/components/colors/color-area.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ If you need to customize things further, you can drop down to the composition le
9494
<ComponentPreview
9595
name="core/color-area-composition"
9696
preview={`<ColorAreaRoot>
97-
<ColorThumb />
98-
</ColorAreaRoot>`}
97+
<ColorThumb />
98+
</ColorAreaRoot>`}
9999
/>
100100

101101
## API Reference

‎www/content/docs/components/colors/color-field.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -180,13 +180,13 @@ If you need to customize things further, you can drop down to the composition le
180180
<ComponentPreview
181181
name="core/color-field-composition"
182182
preview={`<ColorFieldRoot>
183-
<Label>Background</Label>
184-
<InputRoot>
185-
<Input />
186-
</InputRoot>
187-
<Description>Enter a background color.</Description>
188-
<FieldError />
189-
</ColorFieldRoot>`}
183+
<Label>Background</Label>
184+
<InputRoot>
185+
<Input />
186+
</InputRoot>
187+
<Description>Enter a background color.</Description>
188+
<FieldError />
189+
</ColorFieldRoot>`}
190190
/>
191191

192192
## API Reference

‎www/content/docs/components/colors/color-picker.mdx

+7-9
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,13 @@ If you need to customize things further, you can drop down to the composition le
8888
<ComponentPreview
8989
name="core/color-picker-composition"
9090
preview={`<ColorPickerRoot defaultValue="#5100FF">
91-
<DialogRoot>
92-
<Button>
93-
<ColorSwatch />
94-
</Button>
95-
<Dialog>
96-
<ColorEditor />
97-
</Dialog>
98-
</DialogRoot>
99-
</ColorPickerRoot>`}
91+
<DialogRoot>
92+
<Button><ColorSwatch /></Button>
93+
<Dialog>
94+
<ColorEditor />
95+
</Dialog>
96+
</DialogRoot>
97+
</ColorPickerRoot>`}
10098
/>
10199

102100
## API Reference

‎www/content/docs/components/colors/color-slider.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -115,12 +115,12 @@ If you need to customize things further, you can drop down to the composition le
115115
<ComponentPreview
116116
name="core/color-slider-composition"
117117
preview={`<ColorSliderRoot channel="hue" defaultValue="hsl(0, 100%, 50%)">
118-
<Label>Hue</Label>
119-
<ColorSliderOutput />
120-
<ColorSliderTrack>
121-
<ColorThumb />
122-
</ColorSliderTrack>
123-
</ColorSliderRoot>`}
118+
<Label>Hue</Label>
119+
<ColorSliderOutput />
120+
<ColorSliderTrack>
121+
<ColorThumb />
122+
</ColorSliderTrack>
123+
</ColorSliderRoot>`}
124124
/>
125125

126126
## API Reference

‎www/content/docs/components/data-display/avatar.mdx

+8-8
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ Use the `size` prop to control the size of the `Avatar`. The default variant is
6060
<ComponentPreview
6161
name="core/avatar-sizes"
6262
preview={`<Avatar size="sm" />
63-
<Avatar size="md" />
64-
<Avatar size="lg" />`}
63+
<Avatar size="md" />
64+
<Avatar size="lg" />`}
6565
/>
6666

6767
## Composition
@@ -71,12 +71,12 @@ If you need to customize things further, you can drop down to the composition le
7171
<ComponentPreview
7272
name="core/avatar-composition"
7373
preview={`<AvatarRoot>
74-
<AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
75-
<AvatarFallback>M</AvatarFallback>
76-
<AvatarPlaceholder>
77-
<UserIcon className="size-5" />
78-
</AvatarPlaceholder>
79-
</AvatarRoot>`}
74+
<AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
75+
<AvatarFallback>M</AvatarFallback>
76+
<AvatarPlaceholder>
77+
<UserIcon className="size-5" />
78+
</AvatarPlaceholder>
79+
</AvatarRoot>`}
8080
/>
8181

8282
## API Reference

‎www/content/docs/components/data-display/badge.mdx

+41-41
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ links:
1111
href: https://github.com/mehdibha/dotUI/tree/main/content/components/data-display/badge.mdx?plain=1
1212
---
1313

14-
<ComponentPreview name="core/badge-default" />
14+
<ComponentPreview name="core/badge-default" preview={`<Badge>Badge</Badge>`} />
1515

1616
## Installation
1717

@@ -43,30 +43,30 @@ Use the `variant` prop to control the visual style of the `Badge`. The default v
4343
<ComponentPreview
4444
name="core/badge-variants"
4545
preview={`<Flex>
46-
<Badge variant="neutral">Neutral</Badge>
47-
<Badge variant="outline">Outline</Badge>
48-
<Badge variant="primary">Primary</Badge>
49-
</Flex>
50-
<Flex>
51-
<Badge variant="success">Success</Badge>
52-
<Badge variant="success-subtle">Success Subtle</Badge>
53-
<Badge variant="success-outline">Success Outline</Badge>
54-
</Flex>
55-
<Flex>
56-
<Badge variant="danger">Danger</Badge>
57-
<Badge variant="danger-subtle">Danger Subtle</Badge>
58-
<Badge variant="danger-outline">Danger Outline</Badge>
59-
</Flex>
60-
<Flex>
61-
<Badge variant="warning">Warning</Badge>
62-
<Badge variant="warning-subtle">Warning Subtle</Badge>
63-
<Badge variant="warning-outline">Warning Outline</Badge>
64-
</Flex>
65-
<Flex>
66-
<Badge variant="accent">Accent</Badge>
67-
<Badge variant="accent-subtle">Accent Subtle</Badge>
68-
<Badge variant="accent-outline">Accent Outline</Badge>
69-
</Flex>`}
46+
<Badge variant="neutral">Neutral</Badge>
47+
<Badge variant="outline">Outline</Badge>
48+
<Badge variant="primary">Primary</Badge>
49+
</Flex>
50+
<Flex>
51+
<Badge variant="success">Success</Badge>
52+
<Badge variant="success-subtle">Success Subtle</Badge>
53+
<Badge variant="success-outline">Success Outline</Badge>
54+
</Flex>
55+
<Flex>
56+
<Badge variant="danger">Danger</Badge>
57+
<Badge variant="danger-subtle">Danger Subtle</Badge>
58+
<Badge variant="danger-outline">Danger Outline</Badge>
59+
</Flex>
60+
<Flex>
61+
<Badge variant="warning">Warning</Badge>
62+
<Badge variant="warning-subtle">Warning Subtle</Badge>
63+
<Badge variant="warning-outline">Warning Outline</Badge>
64+
</Flex>
65+
<Flex>
66+
<Badge variant="accent">Accent</Badge>
67+
<Badge variant="accent-subtle">Accent Subtle</Badge>
68+
<Badge variant="accent-outline">Accent Outline</Badge>
69+
</Flex>`}
7070
/>
7171

7272
### Size
@@ -76,14 +76,14 @@ Use the `size` prop to control the size of the `Badge`. The default variant is `
7676
<ComponentPreview
7777
name="core/badge-sizes"
7878
preview={`<Badge variant="primary" size="sm">
79-
Small
80-
</Badge>
81-
<Badge variant="primary" size="md">
82-
Medium
83-
</Badge>
84-
<Badge variant="primary" size="lg">
85-
Large
86-
</Badge>`}
79+
Small
80+
</Badge>
81+
<Badge variant="primary" size="md">
82+
Medium
83+
</Badge>
84+
<Badge variant="primary" size="lg">
85+
Large
86+
</Badge>`}
8787
/>
8888

8989
### Icon
@@ -93,14 +93,14 @@ To add additional context for the `Badge`, use the `icon` prop to add an icon.
9393
<ComponentPreview
9494
name="core/badge-icon"
9595
preview={`<Badge icon={<ShieldIcon />} size="sm">
96-
Badge
97-
</Badge>
98-
<Badge icon={<ShieldIcon />} size="md">
99-
Badge
100-
</Badge>
101-
<Badge icon={<ShieldIcon />} size="lg">
102-
Badge
103-
</Badge>`}
96+
Badge
97+
</Badge>
98+
<Badge icon={<ShieldIcon />} size="md">
99+
Badge
100+
</Badge>
101+
<Badge icon={<ShieldIcon />} size="lg">
102+
Badge
103+
</Badge>`}
104104
/>
105105

106106
## API Reference

‎www/content/docs/components/data-display/separator.mdx

+26-26
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,21 @@ links:
1717
<ComponentPreview
1818
name="core/separator-card"
1919
preview={`<div className="space-y-2 rounded-md border p-4">
20-
<div>
21-
<h3 className="font-bold">dotUI</h3>
22-
<p className="text-sm text-fg-muted">Tools for building high-quality, accessible UI.</p>
23-
</div>
24-
<Separator className="my-4" />
25-
<div className="flex h-5 items-center space-x-4 text-sm">
26-
<div>Docs</div>
27-
<Separator orientation="vertical" />
28-
<div>Components</div>
29-
<Separator orientation="vertical" />
30-
<div>Hooks</div>
31-
<Separator orientation="vertical" />
32-
<div>Themes</div>
33-
</div>
34-
</div>`}
20+
<div>
21+
<h3 className="font-bold">dotUI</h3>
22+
<p className="text-sm text-fg-muted">Tools for building high-quality, accessible UI.</p>
23+
</div>
24+
<Separator className="my-4" />
25+
<div className="flex h-5 items-center space-x-4 text-sm">
26+
<div>Docs</div>
27+
<Separator orientation="vertical" />
28+
<div>Components</div>
29+
<Separator orientation="vertical" />
30+
<div>Hooks</div>
31+
<Separator orientation="vertical" />
32+
<div>Themes</div>
33+
</div>
34+
</div>`}
3535
/>
3636

3737
## Installation
@@ -70,17 +70,17 @@ Use the `orientation` prop to change the direction of the separator.
7070
<ComponentPreview
7171
name="core/separator-orientation"
7272
preview={`<div className="flex items-center gap-10">
73-
<div className="flex h-5 items-center gap-2 text-sm">
74-
<div>Components</div>
75-
<Separator orientation="vertical" />
76-
<div>Hooks</div>
77-
</div>
78-
<div className="flex flex-col items-center gap-2 text-sm">
79-
<div>Components</div>
80-
<Separator orientation="horizontal" />
81-
<div>Hooks</div>
82-
</div>
83-
</div>`}
73+
<div className="flex h-5 items-center gap-2 text-sm">
74+
<div>Components</div>
75+
<Separator orientation="vertical" />
76+
<div>Hooks</div>
77+
</div>
78+
<div className="flex flex-col items-center gap-2 text-sm">
79+
<div>Components</div>
80+
<Separator orientation="horizontal" />
81+
<div>Hooks</div>
82+
</div>
83+
</div>`}
8484
/>
8585

8686
### API Reference

0 commit comments

Comments
 (0)