Skip to content

Commit 48aaccc

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
docs(guides): 📝 improve docs/guides (#16)
docs(guides): 📝 improve docs/guides
2 parents 9d64693 + fb69848 commit 48aaccc

30 files changed

+1881
-1209
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
},
6767
"dependencies": {
6868
"@adaptui/react": "1.0.0-alpha.9",
69-
"@adaptui/react-tailwind": "0.1.0-alpha.4",
69+
"@adaptui/react-tailwind": "0.1.0-alpha.5",
7070
"@chakra-ui/hooks": "2.0.4",
7171
"@reach/skip-nav": "0.17.0",
7272
"ariakit": "2.0.0-next.36",

‎pages/docs/components/feedback/circular-progress.mdx‎

Lines changed: 74 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import {
22
ComponentLinks,
33
InteractiveCodeblock,
44
PropsTable,
5-
Codeblock,
65
} from "@/components/index";
76

87
# CircularProgress
98

109
The CircularProgress component is used to indicate the progress for determinate
11-
and indeterminate processes.
10+
and indeterminate processes. It uses AdaptUI Core's
11+
[Progress](https://github.com/adaptui/react/blob/main/docs/progress.md)
12+
component internally.
1213

1314
<ComponentLinks
1415
github="circular-progress"
@@ -24,11 +25,8 @@ import {
2425
CircularProgressBar,
2526
CircularProgressBarWrapper,
2627
CircularProgressHint,
27-
useCircularProgressProps,
28-
useCircularProgressState,
2928
CircularProgressTrack,
30-
CircularProgressTrackWrapper,
31-
} from "@renderlesskit/react-tailwind";
29+
} from "@adaptui/react-tailwind";
3230
```
3331

3432
<Nextra.Callout>
@@ -42,72 +40,113 @@ import {
4240
children={({ spreadProps }) =>
4341
`<CircularProgress value={40} ${spreadProps} />`
4442
}
45-
themeProps={{ size: "circularProgress.barWrapper.common.size" }}
43+
themeProps={{ size: "circularProgress.size" }}
4644
/>
4745

4846
## CircularProgress sizes
4947

5048
Sizes can be set using the `size` prop. The default size is `md`. The available
5149
sizes are: `sm` `md` `lg` `xl`
5250

53-
<Codeblock
54-
live
55-
code={`
56-
<div className="flex items-center space-x-2">
57-
<CircularProgress size="sm" value={20} />
58-
<CircularProgress size="md" value={30} />
59-
<CircularProgress size="lg" value={40} />
60-
<CircularProgress size="xl" value={50} />
61-
</div>
62-
`}
63-
/>
51+
<Codeblock live noInline>
52+
53+
```
54+
import { CircularProgress } from "@adaptui/react-tailwind";
55+
56+
export const App = props => {
57+
return (
58+
<div className="flex items-center space-x-2">
59+
<CircularProgress size="sm" value={20} />
60+
<CircularProgress size="md" value={30} />
61+
<CircularProgress size="lg" value={40} />
62+
<CircularProgress size="xl" value={50} />
63+
</div>
64+
);
65+
};
66+
```
67+
68+
</Codeblock>
6469

6570
## Min max values
6671

6772
Set the `min` and `max` values of the progress bar.
6873

69-
<Codeblock
70-
live
71-
code={`<CircularProgress min={10} max={40} value={35} />`}
72-
/>
74+
<Codeblock live noInline>
75+
76+
```
77+
import { CircularProgress } from "@adaptui/react-tailwind";
78+
79+
export const App = props => {
80+
return <CircularProgress min={10} max={40} value={35} />;
81+
};
82+
```
83+
84+
</Codeblock>
7385

7486
## Indeterminate progress
7587

7688
By setting the value prop to `null`, progress state becomes indeterminate
7789

78-
<Codeblock live code={`<CircularProgress value={null} />`} />
90+
<Codeblock live noInline>
91+
92+
```
93+
import { CircularProgress } from "@adaptui/react-tailwind";
94+
95+
export const App = props => {
96+
return <CircularProgress value={null} />;
97+
};
98+
```
99+
100+
</Codeblock>
79101

80102
## CircularProgress Hint
81103

82104
CircularProgress comes with A11y hint that can be used with label to indicate
83105
the progress status.
84106

85-
<Codeblock live code={`<CircularProgress value={50} hint={50}/>`} />
107+
<Codeblock live noInline>
108+
109+
```
110+
import { CircularProgress } from "@adaptui/react-tailwind";
111+
112+
export const App = props => {
113+
return <CircularProgress value={50} hint={50} />;
114+
};
115+
```
116+
117+
</Codeblock>
86118

87119
## Customizing CircularProgress
88120

89121
To customize the appearance of the CircularProgress component we can simply pass
90122
down children components (CircularProgressTrack, CircularProgressBar,
91123
CircularProgressHint) for more control.
92124

93-
<Codeblock
94-
live
95-
code={`
96-
<CircularProgress value={40}>
97-
<CircularProgressTrack className="text-red-300" />
98-
<CircularProgressBar className="text-red-700" />
99-
<CircularProgressHint className="text-red-900" />
100-
</CircularProgress>
101-
`}
102-
/>
125+
<Codeblock live noInline>
126+
127+
```
128+
import { CircularProgress } from "@adaptui/react-tailwind";
129+
130+
export const App = props => {
131+
return (
132+
<CircularProgress value={40}>
133+
<CircularProgressTrack className="text-red-300" />
134+
<CircularProgressBar className="text-red-700" />
135+
<CircularProgressHint className="text-red-900" />
136+
</CircularProgress>
137+
);
138+
};
139+
```
140+
141+
</Codeblock>
103142

104143
## API Reference
105144

106145
<PropsTable
107146
data={[
108147
{
109148
name: "size",
110-
themeKey: "circularProgress.barWrapper.common.size",
149+
themeKey: "circularProgress.size",
111150
default: "md",
112151
},
113152
{

‎pages/docs/components/feedback/meter.mdx‎

Lines changed: 90 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import {
22
ComponentLinks,
33
InteractiveCodeblock,
44
PropsTable,
5-
Codeblock,
65
} from "@/components/index";
76

87
# Meter
98

109
Meter is used to display finite value that are within a known range eg., CPU
11-
usage.
10+
usage. It uses AdaptUI Core's
11+
[Meter](https://github.com/adaptui/react/blob/main/docs/meter.md) component
12+
internally.
1213

1314
<ComponentLinks github="meter" theme="meter" story="feedback-meter" />
1415

@@ -21,11 +22,9 @@ import {
2122
MeterBarWrapper,
2223
MeterHint,
2324
MeterLabel,
24-
useMeterProps,
25-
useMeterState,
2625
MeterTrack,
2726
MeterWrapper,
28-
} from "@renderlesskit/react-tailwind";
27+
} from "@adaptui/react-tailwind";
2928
```
3029

3130
<Nextra.Callout>
@@ -39,77 +38,127 @@ import {
3938
children={({ spreadProps }) =>
4039
`<Meter value={40} max={100} ${spreadProps} />`
4140
}
42-
themeProps={{ size: "meter.track.size" }}
41+
themeProps={{ size: "meter.size" }}
4342
/>
4443

4544
## Meter sizes
4645

4746
Sizes can be set using the `size` prop. The default size is `md`. The available
4847
sizes are: `sm` `md` `lg` `xl`
4948

50-
<Codeblock
51-
live
52-
code={`
53-
<div className="flex flex-col space-y-2">
54-
<Meter size="sm" value={20} max={100} />
55-
<Meter size="md" value={30} max={100} />
56-
<Meter size="lg" value={40} max={100} />
57-
<Meter size="xl" value={50} max={100} />
58-
</div>
59-
`}
60-
/>
49+
<Codeblock live noInline>
50+
51+
```
52+
import { Meter } from "@adaptui/react-tailwind";
53+
54+
export const App = props => {
55+
return (
56+
<div className="flex flex-col space-y-2">
57+
<Meter size="sm" value={20} max={100} />
58+
<Meter size="md" value={30} max={100} />
59+
<Meter size="lg" value={40} max={100} />
60+
<Meter size="xl" value={50} max={100} />
61+
</div>
62+
);
63+
};
64+
```
65+
66+
</Codeblock>
6167

6268
## Min max values
6369

6470
Set the `min` and `max` values of the progress bar.
6571

66-
<Codeblock live code={`<Meter value={35} max={100} />`} />
72+
<Codeblock live noInline>
73+
74+
```
75+
import { Meter } from "@adaptui/react-tailwind";
76+
77+
export const App = props => {
78+
return <Meter value={35} max={100} />;
79+
};
80+
```
81+
82+
</Codeblock>
6783

6884
## Meter Label
6985

7086
Meter also comes with A11y label that can also be used to describe the meter.
7187

72-
<Codeblock live code={`<Meter value={50} max={100} label="Charging..."/>`} />
88+
<Codeblock live noInline>
89+
90+
```
91+
import { Meter } from "@adaptui/react-tailwind";
92+
93+
export const App = props => {
94+
return <Meter value={50} max={100} label="Charging..." />;
95+
};
96+
```
97+
98+
</Codeblock>
7399

74100
## Meter Hint
75101

76102
Meter comes with A11y hint that can be used with label to indicate the meter
77103
status.
78104

79-
<Codeblock
80-
live
81-
code={`<Meter value={50} max={100} label="Charging..." hint={50}/>`}
82-
/>
105+
<Codeblock live noInline>
106+
107+
```
108+
import { Meter } from "@adaptui/react-tailwind";
109+
110+
export const App = props => {
111+
return <Meter value={50} max={100} label="Charging..." hint={50} />;
112+
};
113+
```
114+
115+
</Codeblock>
83116

84117
## Meter Interval
85118

86119
Meter has an interval that can be used to indicate multiple range of the meter.
87120

88-
<Codeblock
89-
live
90-
code={`<Meter value={50} max={100} label="Charging..." hint={50} intervals={4} /> `}
91-
/>
121+
<Codeblock live noInline>
122+
123+
```
124+
import { Meter } from "@adaptui/react-tailwind";
125+
126+
export const App = props => {
127+
return (
128+
<Meter value={50} max={100} label="Charging..." hint={50} intervals={4} />
129+
);
130+
};
131+
```
132+
133+
</Codeblock>
92134

93135
## Customizing Meter
94136

95137
To customize the appearance of the Meter component we can simply pass down
96138
children components (MeterTrack, MeterBar) for more control.
97139

98-
<Codeblock
99-
live
100-
code={`
101-
<Meter value={40} max={100}>
102-
<MeterTrack className="bg-red-300" />
103-
<MeterBar className="bg-red-800" />
104-
</Meter>
105-
`}
106-
/>
140+
<Codeblock live noInline>
141+
142+
```
143+
import { Meter } from "@adaptui/react-tailwind";
144+
145+
export const App = props => {
146+
return (
147+
<Meter value={40} max={100}>
148+
<MeterTrack className="bg-red-300" />
149+
<MeterBar className="bg-red-800" />
150+
</Meter>
151+
);
152+
};
153+
```
154+
155+
</Codeblock>
107156

108157
## API Reference
109158

110159
<PropsTable
111160
data={[
112-
{ name: "size", themeKey: "meter.track.size", default: "md" },
161+
{ name: "size", themeKey: "meter.size", default: "md" },
113162
{
114163
name: "intervals",
115164
type: "number",
@@ -132,3 +181,7 @@ children components (MeterTrack, MeterBar) for more control.
132181
},
133182

134183
]} />
184+
185+
```
186+
187+
```

0 commit comments

Comments
 (0)