Skip to content

Commit

Permalink
docs(guides): 📝 improve docs/guides (#16)
Browse files Browse the repository at this point in the history 
docs(guides): 📝 improve docs/guides
  • Loading branch information
@kodiakhq
kodiakhq[bot] authored Jun 5, 2023
2 parents 9d64693 + fb69848 commit 48aaccc
Show file tree
Hide file tree
Showing 30 changed files with 1,881 additions and 1,209 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
},
"dependencies": {
"@adaptui/react": "1.0.0-alpha.9",
"@adaptui/react-tailwind": "0.1.0-alpha.4",
"@adaptui/react-tailwind": "0.1.0-alpha.5",
"@chakra-ui/hooks": "2.0.4",
"@reach/skip-nav": "0.17.0",
"ariakit": "2.0.0-next.36",
Expand Down
109 changes: 74 additions & 35 deletions pages/docs/components/feedback/circular-progress.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import {
ComponentLinks,
InteractiveCodeblock,
PropsTable,
Codeblock,
} from "@/components/index";

# CircularProgress

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

<ComponentLinks
github="circular-progress"
Expand All @@ -24,11 +25,8 @@ import {
CircularProgressBar,
CircularProgressBarWrapper,
CircularProgressHint,
useCircularProgressProps,
useCircularProgressState,
CircularProgressTrack,
CircularProgressTrackWrapper,
} from "@renderlesskit/react-tailwind";
} from "@adaptui/react-tailwind";
```

<Nextra.Callout>
Expand All @@ -42,72 +40,113 @@ import {
children={({ spreadProps }) =>
`<CircularProgress value={40} ${spreadProps} />`
}
themeProps={{ size: "circularProgress.barWrapper.common.size" }}
themeProps={{ size: "circularProgress.size" }}
/>

## CircularProgress sizes

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

<Codeblock
live
code={`
<div className="flex items-center space-x-2">
<CircularProgress size="sm" value={20} />
<CircularProgress size="md" value={30} />
<CircularProgress size="lg" value={40} />
<CircularProgress size="xl" value={50} />
</div>
`}
/>
<Codeblock live noInline>

```
import { CircularProgress } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="flex items-center space-x-2">
<CircularProgress size="sm" value={20} />
<CircularProgress size="md" value={30} />
<CircularProgress size="lg" value={40} />
<CircularProgress size="xl" value={50} />
</div>
);
};
```

</Codeblock>

## Min max values

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

<Codeblock
live
code={`<CircularProgress min={10} max={40} value={35} />`}
/>
<Codeblock live noInline>

```
import { CircularProgress } from "@adaptui/react-tailwind";
export const App = props => {
return <CircularProgress min={10} max={40} value={35} />;
};
```

</Codeblock>

## Indeterminate progress

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

<Codeblock live code={`<CircularProgress value={null} />`} />
<Codeblock live noInline>

```
import { CircularProgress } from "@adaptui/react-tailwind";
export const App = props => {
return <CircularProgress value={null} />;
};
```

</Codeblock>

## CircularProgress Hint

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

<Codeblock live code={`<CircularProgress value={50} hint={50}/>`} />
<Codeblock live noInline>

```
import { CircularProgress } from "@adaptui/react-tailwind";
export const App = props => {
return <CircularProgress value={50} hint={50} />;
};
```

</Codeblock>

## Customizing CircularProgress

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

<Codeblock
live
code={`
<CircularProgress value={40}>
<CircularProgressTrack className="text-red-300" />
<CircularProgressBar className="text-red-700" />
<CircularProgressHint className="text-red-900" />
</CircularProgress>
`}
/>
<Codeblock live noInline>

```
import { CircularProgress } from "@adaptui/react-tailwind";
export const App = props => {
return (
<CircularProgress value={40}>
<CircularProgressTrack className="text-red-300" />
<CircularProgressBar className="text-red-700" />
<CircularProgressHint className="text-red-900" />
</CircularProgress>
);
};
```

</Codeblock>

## API Reference

<PropsTable
data={[
{
name: "size",
themeKey: "circularProgress.barWrapper.common.size",
themeKey: "circularProgress.size",
default: "md",
},
{
Expand Down
127 changes: 90 additions & 37 deletions pages/docs/components/feedback/meter.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import {
ComponentLinks,
InteractiveCodeblock,
PropsTable,
Codeblock,
} from "@/components/index";

# Meter

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

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

Expand All @@ -21,11 +22,9 @@ import {
MeterBarWrapper,
MeterHint,
MeterLabel,
useMeterProps,
useMeterState,
MeterTrack,
MeterWrapper,
} from "@renderlesskit/react-tailwind";
} from "@adaptui/react-tailwind";
```

<Nextra.Callout>
Expand All @@ -39,77 +38,127 @@ import {
children={({ spreadProps }) =>
`<Meter value={40} max={100} ${spreadProps} />`
}
themeProps={{ size: "meter.track.size" }}
themeProps={{ size: "meter.size" }}
/>

## Meter sizes

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

<Codeblock
live
code={`
<div className="flex flex-col space-y-2">
<Meter size="sm" value={20} max={100} />
<Meter size="md" value={30} max={100} />
<Meter size="lg" value={40} max={100} />
<Meter size="xl" value={50} max={100} />
</div>
`}
/>
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="flex flex-col space-y-2">
<Meter size="sm" value={20} max={100} />
<Meter size="md" value={30} max={100} />
<Meter size="lg" value={40} max={100} />
<Meter size="xl" value={50} max={100} />
</div>
);
};
```

</Codeblock>

## Min max values

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

<Codeblock live code={`<Meter value={35} max={100} />`} />
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return <Meter value={35} max={100} />;
};
```

</Codeblock>

## Meter Label

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

<Codeblock live code={`<Meter value={50} max={100} label="Charging..."/>`} />
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return <Meter value={50} max={100} label="Charging..." />;
};
```

</Codeblock>

## Meter Hint

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

<Codeblock
live
code={`<Meter value={50} max={100} label="Charging..." hint={50}/>`}
/>
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return <Meter value={50} max={100} label="Charging..." hint={50} />;
};
```

</Codeblock>

## Meter Interval

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

<Codeblock
live
code={`<Meter value={50} max={100} label="Charging..." hint={50} intervals={4} /> `}
/>
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return (
<Meter value={50} max={100} label="Charging..." hint={50} intervals={4} />
);
};
```

</Codeblock>

## Customizing Meter

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

<Codeblock
live
code={`
<Meter value={40} max={100}>
<MeterTrack className="bg-red-300" />
<MeterBar className="bg-red-800" />
</Meter>
`}
/>
<Codeblock live noInline>

```
import { Meter } from "@adaptui/react-tailwind";
export const App = props => {
return (
<Meter value={40} max={100}>
<MeterTrack className="bg-red-300" />
<MeterBar className="bg-red-800" />
</Meter>
);
};
```

</Codeblock>

## API Reference

<PropsTable
data={[
{ name: "size", themeKey: "meter.track.size", default: "md" },
{ name: "size", themeKey: "meter.size", default: "md" },
{
name: "intervals",
type: "number",
Expand All @@ -132,3 +181,7 @@ children components (MeterTrack, MeterBar) for more control.
},

]} />

```
```
Loading

1 comment on commit 48aaccc

@vercel
Copy link

@vercel vercel bot commented on 48aaccc Jun 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-tailwind-docs – ./

adaptui-react-docs.vercel.app
react-tailwind-docs-timelessco.vercel.app
react-tailwind-docs-git-main-timelessco.vercel.app

Please sign in to comment.