Skip to content

Commit 43d9797

Browse files
navin-moorthynavin-moorthy
committed
docs(getting-started): 📝 update docs
1 parent 0135c7d commit 43d9797

11 files changed

+68
-65
lines changed

‎docs/calendar.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,10 @@ const CalendarCellComp = props => {
216216

217217
### `CalendarCellStateProps`
218218

219-
| Name | Type | Description |
220-
| :---------- | :----------------------------------------------- | :-------------------------------------------- | ------------------------------ |
221-
| **`date`** | <code>CalendarDate</code> | The date that this cell represents. |
222-
| **`state`** | <code>CalendarState \| RangeCalendarState</code> | Object returned by the `useCalendarBaseState` | `RangeCalendarBaseState` hook. |
219+
| Name | Type | Description |
220+
| :---------- | :----------------------------------------------- | :----------------------------------------------------------------------------- |
221+
| **`date`** | <code>CalendarDate</code> | The date that this cell represents. |
222+
| **`state`** | <code>CalendarState \| RangeCalendarState</code> | Object returned by the `useCalendarBaseState` & `RangeCalendarBaseState` hook. |
223223

224224
### `CalendarGridOptions`
225225

@@ -230,22 +230,22 @@ const CalendarCellComp = props => {
230230
### `CalendarGridStateProps`
231231

232232
| Name | Type | Description |
233-
| :-------------- | :----------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
233+
| :-------------- | :----------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
234234
| **`startDate`** | <code>CalendarDate \| undefined</code> | The first date displayed in the calendar grid.Defaults to the first visible date in the calendar.Override this to display multiple date grids in a calendar. |
235235
| **`endDate`** | <code>CalendarDate \| undefined</code> | The last date displayed in the calendar grid.Defaults to the last visible date in the calendar.Override this to display multiple date grids in a calendar. |
236-
| **`state`** | <code>CalendarState \| RangeCalendarState</code> | Object returned by the `useCalendarBaseState` | `RangeCalendarBaseState` hook. |
236+
| **`state`** | <code>CalendarState \| RangeCalendarState</code> | Object returned by the `useCalendarBaseState` & `RangeCalendarBaseState` hook. |
237237

238238
### `CalendarNextButtonOptions`
239239

240-
| Name | Type | Description |
241-
| :---------- | :---------------------------------------------- | :---------------------------------------- | -------------------------- |
242-
| **`state`** | <code>CalendarAria \| RangeCalendarState</code> | Object returned by the `useCalendarState` | `RangeCalendarState` hook. |
240+
| Name | Type | Description |
241+
| :---------- | :---------------------------------------------- | :--------------------------------------------------------------------- |
242+
| **`state`** | <code>CalendarAria \| RangeCalendarState</code> | Object returned by the `useCalendarState` & `RangeCalendarState` hook. |
243243

244244
### `CalendarPreviousButtonOptions`
245245

246-
| Name | Type | Description |
247-
| :---------- | :---------------------------------------------- | :---------------------------------------- | -------------------------- |
248-
| **`state`** | <code>CalendarAria \| RangeCalendarState</code> | Object returned by the `useCalendarState` | `RangeCalendarState` hook. |
246+
| Name | Type | Description |
247+
| :---------- | :---------------------------------------------- | :--------------------------------------------------------------------- |
248+
| **`state`** | <code>CalendarAria \| RangeCalendarState</code> | Object returned by the `useCalendarState` & `RangeCalendarState` hook. |
249249

250250
### `CalendarStateProps`
251251

‎docs/datepicker.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,9 @@ export default DatePickerBasic;
151151

152152
### `DatePickerDisclosureOptions`
153153

154-
| Name | Type | Description |
155-
| :---------- | :--------------------------------------------------- | :------------------------------------------ | ------------------------------- |
156-
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` | `useDateRangePickerState` hook. |
154+
| Name | Type | Description |
155+
| :---------- | :--------------------------------------------------- | :---------------------------------------------------------------------------- |
156+
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` & `useDateRangePickerState` hook. |
157157

158158
<details><summary>PopoverDisclosureOptions props</summary>
159159
> These props are returned by the other props You can also provide these props.
@@ -173,21 +173,21 @@ export default DatePickerBasic;
173173

174174
### `DatePickerGroupOptions`
175175

176-
| Name | Type | Description |
177-
| :---------- | :--------------------------------------------------- | :------------------------------------------ | ------------------------------- |
178-
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` | `useDateRangePickerState` hook. |
176+
| Name | Type | Description |
177+
| :---------- | :--------------------------------------------------- | :---------------------------------------------------------------------------- |
178+
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` & `useDateRangePickerState` hook. |
179179

180180
### `DatePickerLabelOptions`
181181

182-
| Name | Type | Description |
183-
| :---------- | :--------------------------------------------------- | :------------------------------------------ | ------------------------------- |
184-
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` | `useDateRangePickerState` hook. |
182+
| Name | Type | Description |
183+
| :---------- | :--------------------------------------------------- | :---------------------------------------------------------------------------- |
184+
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` & `useDateRangePickerState` hook. |
185185

186186
### `DatePickerPopoverOptions`
187187

188-
| Name | Type | Description |
189-
| :---------- | :--------------------------------------------------- | :------------------------------------------ | ------------------------------- |
190-
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` | `useDateRangePickerState` hook. |
188+
| Name | Type | Description |
189+
| :---------- | :--------------------------------------------------- | :---------------------------------------------------------------------------- |
190+
| **`state`** | <code>DatePickerState \| DateRangePickerState</code> | Object returned by the `useDatePickerState` & `useDateRangePickerState` hook. |
191191

192192
<details><summary>PopoverOptions props</summary>
193193
> These props are returned by the other props You can also provide these props.

‎docs/getting-started.md‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22

33
Collection of headless components/hooks that are accessible, composable,
44
customizable from low level to build your own UI & Design System powered by
5-
[Reakit](https://reakit.io)
5+
[Ariakit System](https://reakit.io)
66

77
## :rocket: Installation
88

9+
### npm
910
```sh
10-
# npm
1111
npm install @adaptui/react reakit
12+
```
1213

13-
# Yarn
14+
### Yarn
15+
```sh
1416
yarn add @adaptui/react reakit
1517
```
1618

@@ -20,58 +22,59 @@ yarn add @adaptui/react reakit
2022

2123
Code below will render an [Accordion](./Accordion.md)
2224

23-
Play with this on
24-
[CodeSandbox](https://codesandbox.io/s/renderless-accordion-seywy)
25-
2625
See [Accordion](./Accordion.md) docs for more info.
2726

27+
2828
```jsx
29-
import React from "react";
29+
import * as React from "react";
30+
3031
import {
3132
Accordion,
33+
AccordionDisclosure,
3234
AccordionPanel,
33-
AccordionTrigger,
3435
useAccordionState,
3536
} from "@adaptui/react";
3637

37-
function App() {
38-
const state = useAccordionState();
38+
export const AccordionBasic = props => {
39+
const state = useAccordionState(props);
3940

4041
return (
41-
<Accordion {...state}>
42+
<Accordion state={state}>
4243
<h2>
43-
<AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
44+
<AccordionDisclosure id="Trigger 1">Trigger 1</AccordionDisclosure>
4445
</h2>
45-
<AccordionPanel {...state}>This is panel 1</AccordionPanel>
46+
<AccordionPanel id="Panel 1">Panel 1</AccordionPanel>
4647
<h2>
47-
<AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
48+
<AccordionDisclosure id="Trigger 2">Trigger 2</AccordionDisclosure>
4849
</h2>
49-
<AccordionPanel {...state}>This is panel 2</AccordionPanel>
50+
<AccordionPanel id="Panel 2">Panel 2</AccordionPanel>
5051
</Accordion>
5152
);
52-
}
53+
};
5354

54-
ReactDOM.render(<App />, document.getElementById("root"));
55+
export default AccordionBasic;
5556
```
5657

5758
## Component Docs
5859

59-
- [Accordion](accordion.md)
60-
- [Breadcrumbs](breadcrumb.md)
61-
- [Calendar](calendar.md)
62-
- [Date Picker](datepicker.md)
63-
- [Drawer](drawer.md)
64-
- [Link](Link.md)
65-
- [Meter](meter.md)
66-
- [Number Input](number-input.md)
67-
- [Pagination](pagination.md)
68-
- [Picker Base](picker-base.md)
69-
- [Progress](progress.md)
70-
- [Segment](segment.md)
71-
- [Select](select.md)
72-
- [Slider](slider.md)
73-
- [Time Picker](timepicker.md)
74-
- [Toast](toast.md)
60+
- [Accordion](./accordion.md)
61+
- [Breadcrumbs](./breadcrumb.md)
62+
- [Calendar](./calendar.md)
63+
- [RangeCalendar](./range-calendar.md)
64+
- [DateField](./datefield.md)
65+
- [DatePicker](./datepicker.md)
66+
- [DateRangePicker](./daterange-picker.md)
67+
- [TimeField](./timefield.md)
68+
- [Drawer](./drawer.md)
69+
- [Disclosure](./disclosure.md)
70+
- [Link](./link.md)
71+
- [Meter](./meter.md)
72+
- [Number field](./numberfield.md)
73+
- [Pagination](./pagination.md)
74+
- [Progress](./progress.md)
75+
- [Slider](./slider.md)
76+
- [Toast](./toast.md)
77+
7578

7679
<p align="right">
7780
<a href="./core-principles.md">Next | Core Principles →</a>

‎src/calendar/calendar-cell-state.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export type CalendarCellState = CalendarCellAria & {
3535

3636
export type CalendarCellStateProps = AriaCalendarCellProps & {
3737
/**
38-
* Object returned by the `useCalendarBaseState` | `RangeCalendarBaseState` hook.
38+
* Object returned by the `useCalendarBaseState` & `RangeCalendarBaseState` hook.
3939
*/
4040
state: CalendarBaseState | RangeCalendarBaseState;
4141
};

‎src/calendar/calendar-grid-state.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export type CalendarGridState = CalendarGridAria;
2121

2222
export type CalendarGridStateProps = AriaCalendarGridProps & {
2323
/**
24-
* Object returned by the `useCalendarBaseState` | `RangeCalendarBaseState` hook.
24+
* Object returned by the `useCalendarBaseState` & `RangeCalendarBaseState` hook.
2525
*/
2626
state: CalendarBaseState | RangeCalendarBaseState;
2727
};

‎src/calendar/calendar-next-button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const CalendarNextButton = createComponent<CalendarNextButtonOptions>(
3434

3535
export type CalendarNextButtonOptions<T extends As = "button"> = Options<T> & {
3636
/**
37-
* Object returned by the `useCalendarState` | `RangeCalendarState` hook.
37+
* Object returned by the `useCalendarState` & `RangeCalendarState` hook.
3838
*/
3939
state: CalendarState | RangeCalendarState;
4040
};

‎src/calendar/calendar-prev-button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const CalendarPreviousButton =
3333
export type CalendarPreviousButtonOptions<T extends As = "button"> =
3434
Options<T> & {
3535
/**
36-
* Object returned by the `useCalendarState` | `RangeCalendarState` hook.
36+
* Object returned by the `useCalendarState` & `RangeCalendarState` hook.
3737
*/
3838
state: CalendarState | RangeCalendarState;
3939
};

‎src/datepicker/datepicker-disclosure.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export type DatePickerDisclosureOptions<T extends As = "button"> = Omit<
3939
"state"
4040
> & {
4141
/**
42-
* Object returned by the `useDatePickerState` | `useDateRangePickerState` hook.
42+
* Object returned by the `useDatePickerState` & `useDateRangePickerState` hook.
4343
*/
4444
state: DatePickerState | DateRangePickerState;
4545
};

‎src/datepicker/datepicker-group.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const DatePickerGroup = createComponent<DatePickerGroupOptions>(
3030

3131
export type DatePickerGroupOptions<T extends As = "div"> = Options<T> & {
3232
/**
33-
* Object returned by the `useDatePickerState` | `useDateRangePickerState` hook.
33+
* Object returned by the `useDatePickerState` & `useDateRangePickerState` hook.
3434
*/
3535
state: DatePickerState | DateRangePickerState;
3636
};

‎src/datepicker/datepicker-label.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const DatePickerLabel = createComponent<DatePickerLabelOptions>(
2828

2929
export type DatePickerLabelOptions<T extends As = "span"> = Options<T> & {
3030
/**
31-
* Object returned by the `useDatePickerState` | `useDateRangePickerState` hook.
31+
* Object returned by the `useDatePickerState` & `useDateRangePickerState` hook.
3232
*/
3333
state: DatePickerState | DateRangePickerState;
3434
};

0 commit comments

Comments
 (0)