docs(date-time): 📝 separate normal & range calendars & pickers

adaptui · Jul 25, 2022 · 42545fb · 42545fb
1 parent 2e62661
commit 42545fb
Show file tree

Hide file tree

Showing 87 changed files with 1,971 additions and 1,732 deletions.
diff --git a/docs-templates/calendar.md b/docs-templates/calendar.md
@@ -1,20 +1,17 @@
 # Calendar
 
-`Calendar` component provides a way to select a date or a range of dates while
-allowing you to style them however. All the date, month & year calculations are
-done internally to provide the ease of use. It follows the
+`Calendar` component provides a way to select a date while allowing you to style
+them however. All the date, month & year calculations are done internally using
+[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html)
+to provide the ease of use. It follows the
 [Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) for the keyboard
 navigaiton & focus management. Support all the features as React Aria's
-[useCalendar](https://react-spectrum.adobe.com/react-aria/useCalendar.html#features)
-&
-[useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html#features)
+[useCalendar](https://react-spectrum.adobe.com/react-aria/useCalendar.html#features).
 
 <!-- ADD_TOC -->
 
 ## Usage
 
-### Base Calendar
-
 <!-- ADD_EXAMPLE src/calendar/stories/templates/CalendarBasicJsx.ts -->
 
 <!-- CODESANDBOX
@@ -30,64 +27,6 @@ css: src/calendar/stories/templates/CalendarBasicCss.ts
 files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
-### Range Calendar
-
-Converting a normal calendar to a range calendar is as easy as just swaping out
-the hook to range calendar hook.
-
-You'll need to import the `useRangeCalendarState` hook from the `@adaptui/react`
-first
-
-```diff
-- const state = useCalendarBaseState(props);
-+ const state = useRangeCalendarBaseState(props);
-- const calendar = useCalendarState({ ...props, state });
-+ const calendar = useRangeCalendarState({ ...props, state });
-
-return (
--   <Calendar state={calendar}>
-+   <RangeCalendar state={calendar}>
-      ...
--   </Calendar>
-+   </RangeCalendar>
-  );
-```
-
-Also we can customize and style the ranges with CSS attribute selectors
-
-```css
-[data-is-range-selection] > span {
-  /* styles for any cells between start-end (inclusive) */
-}
-[data-is-selection-start] > span {
-  /* styles for first selected range cell */
-}
-[data-is-selection-end] > span {
-  /* styles for end selected range cell */
-}
-
-/* only applied if cell date is first or last of the month*/
-[data-is-range-start] > span {
-  /**/
-}
-[data-is-range-end] > span {
-  /**/
-}
-```
-
-<!-- CODESANDBOX
-link_title: Range Calendar
-js: src/calendar/stories/templates/CalendarRangeJsx.ts
-css: src/calendar/stories/templates/CalendarRangeCss.ts
-files: [src/calendar/stories/templates/UtilsJsx.ts]
--->
-<!-- CODESANDBOX
-link_title: Range Calendar TS
-tsx: src/calendar/stories/templates/CalendarRangeTsx.ts
-css: src/calendar/stories/templates/CalendarRangeCss.ts
-files: [src/calendar/stories/templates/UtilsTsx.ts]
--->
-
 ## Other Examples
 
 <!-- CODESANDBOX
@@ -103,19 +42,6 @@ css: src/calendar/stories/templates/CalendarBasicCss.ts
 files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
-<!-- CODESANDBOX
-link_title: Calendar Range Styled
-js: src/calendar/stories/templates/CalendarRangeStyledJsx.ts
-css: src/calendar/stories/templates/CalendarRangeCss.ts
-files: [src/calendar/stories/templates/UtilsJsx.ts]
--->
-<!-- CODESANDBOX
-link_title: Calendar Range Styled TS
-tsx: src/calendar/stories/templates/CalendarRangeStyledTsx.ts
-css: src/calendar/stories/templates/CalendarRangeCss.ts
-files: [src/calendar/stories/templates/UtilsTsx.ts]
--->
-
 <!-- ADD_COMPOSITION src/calendar -->
 
 <!-- ADD_PROPS src/calendar -->
diff --git a/docs-templates/datefield.md b/docs-templates/datefield.md
@@ -1,7 +1,7 @@
 # DateField
 
-`DateField` component provides a way to select a date with the help of
-[Calendar](./calendar.md) component. It follows the
+`DateField` component is an input that provides a way to select a date and time
+using keyboard. It follows the
 [Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
 for the keyboard navigation & accessibility features. Supports all the features
 of React Aria's
@@ -11,8 +11,6 @@ of React Aria's
 
 ## Usage
 
-### DateField
-
 <!-- ADD_EXAMPLE src/datefield/stories/templates/DateFieldBasicJsx.ts -->
 
 <!-- CODESANDBOX

diff --git a/docs-templates/datepicker.md b/docs-templates/datepicker.md
@@ -1,16 +1,16 @@
 # DatePicker
 
-`DatePicker` component provides a way to select a date or a range of dates with
-the help of [Calendar](./calendar.md) component. It follows the
+`DatePicker` component provides a way to select a date using
+[DateField](./datefield) & [Calendar](./calendar.md) component. It follows the
 [Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
-for the keyboard navigation & accessibility features.
+for the keyboard navigation & accessibility features. Support all the features
+as React Aria's
+[useDatePicker](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#features).
 
 <!-- ADD_TOC -->
 
 ## Usage
 
-### DatePicker
-
 <!-- ADD_EXAMPLE src/datepicker/stories/templates/DatePickerBasicJsx.ts -->
 
 <!-- CODESANDBOX
@@ -26,21 +26,19 @@ css: src/datepicker/stories/templates/DatePickerBasicCss.ts
 files: [src/datepicker/stories/templates/UtilsTsx.ts, src/calendar/stories/templates/CalendarBasicTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts]
 -->
 
-### Range DatePicker
-
-<!-- ADD_EXAMPLE src/datepicker/stories/templates/DateRangePickerBasicJsx.ts -->
+## Other Examples
 
 <!-- CODESANDBOX
-link_title: DateRangePicker
-js: src/datepicker/stories/templates/DateRangePickerBasicJsx.ts
-css: src/datepicker/stories/templates/DateRangePickerBasicCss.ts
-files: [src/datepicker/stories/templates/UtilsJsx.ts, src/calendar/stories/templates/CalendarRangeJsx.ts, src/datefield/stories/templates/DateFieldBasicJsx.ts]
+link_title: DatePicker Styled
+js: src/datepicker/stories/templates/DatePickerStyledJsx.ts
+css: src/datepicker/stories/templates/DatePickerBasicCss.ts
+files: [src/datepicker/stories/templates/UtilsJsx.ts, src/calendar/stories/templates/CalendarStyledJsx.ts, src/datefield/stories/templates/DateFieldStyledJsx.ts]
 -->
 <!-- CODESANDBOX
-link_title: DateRangePicker TS
-tsx: src/datepicker/stories/templates/DateRangePickerBasicTsx.ts
-css: src/datepicker/stories/templates/DateRangePickerBasicCss.ts
-files: [src/datepicker/stories/templates/UtilsTsx.ts, src/calendar/stories/templates/CalendarRangeTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts]
+link_title: DatePicker Styled TS
+tsx: src/datepicker/stories/templates/DatePickerStyledTsx.ts
+css: src/datepicker/stories/templates/DatePickerBasicCss.ts
+files: [src/datepicker/stories/templates/UtilsTsx.ts, src/calendar/stories/templates/CalendarStyledTsx.ts, src/datefield/stories/templates/DateFieldStyledTsx.ts]
 -->
 
 <!-- ADD_COMPOSITION src/datepicker -->

diff --git a/docs-templates/daterange-picker.md b/docs-templates/daterange-picker.md
@@ -0,0 +1,46 @@
+# DateRangePicker
+
+`DateRangePicker` component provides a way to select a a range of dates using
+[DateField](./datefield) & [Calendar](./calendar.md) component. It follows the
+[Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
+for the keyboard navigation & accessibility features. Support all the features
+as React Aria's
+[useDateRangePicker](https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html#features).
+
+<!-- ADD_TOC -->
+
+## Usage
+
+<!-- ADD_EXAMPLE src/daterange-picker/stories/templates/DateRangePickerBasicJsx.ts -->
+
+<!-- CODESANDBOX
+link_title: DateRangePicker
+js: src/daterange-picker/stories/templates/DateRangePickerBasicJsx.ts
+css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts
+files: [src/daterange-picker/stories/templates/UtilsJsx.ts, src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts, src/datefield/stories/templates/DateFieldBasicJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: DateRangePicker TS
+tsx: src/daterange-picker/stories/templates/DateRangePickerBasicTsx.ts
+css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts
+files: [src/daterange-picker/stories/templates/UtilsTsx.ts, src/range-calendar/stories/templates/RangeCalendarBasicTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts]
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: DateRangePicker Styled
+js: src/daterange-picker/stories/templates/DateRangePickerStyledJsx.ts
+css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts
+files: [src/daterange-picker/stories/templates/UtilsJsx.ts, src/range-calendar/stories/templates/RangeCalendarStyledJsx.ts, src/datefield/stories/templates/DateFieldStyledJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: DateRangePicker Styled TS
+tsx: src/daterange-picker/stories/templates/DateRangePickerStyledTsx.ts
+css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts
+files: [src/daterange-picker/stories/templates/UtilsTsx.ts, src/range-calendar/stories/templates/RangeCalendarStyledTsx.ts, src/datefield/stories/templates/DateFieldStyledTsx.ts]
+-->
+
+<!-- ADD_COMPOSITION src/daterange-picker -->
+
+<!-- ADD_PROPS src/daterange-picker -->
diff --git a/docs-templates/range-calendar.md b/docs-templates/range-calendar.md
@@ -0,0 +1,70 @@
+# RangeCalendar
+
+`RangeCalendar` component provides a way to a range of dates while allowing you
+to style them however. All the date, month & year calculations are done
+internally using
+[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html)
+to provide the ease of use. It follows the
+[Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) for the keyboard
+navigaiton & focus management. Support all the features as React Aria's
+[useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html#features).
+
+<!-- ADD_TOC -->
+
+## Usage
+
+<!-- ADD_EXAMPLE src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts -->
+
+<!-- CODESANDBOX
+link_title: RangeCalendar
+js: src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts
+css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: RangeCalendar TS
+tsx: src/range-calendar/stories/templates/RangeCalendarBasicTsx.ts
+css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
+-->
+
+You can customize and style the ranges with CSS attribute selectors
+
+```css
+[data-is-range-selection] > span {
+  /* styles for any cells between start-end (inclusive) */
+}
+[data-is-selection-start] > span {
+  /* styles for first selected range cell */
+}
+[data-is-selection-end] > span {
+  /* styles for end selected range cell */
+}
+
+/* only applied if cell date is first or last of the month*/
+[data-is-range-start] > span {
+  /**/
+}
+[data-is-range-end] > span {
+  /**/
+}
+```
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: Range Calendar Styled
+js: src/range-calendar/stories/templates/RangeCalendarStyledJsx.ts
+css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: Range Calendar Styled TS
+tsx: src/range-calendar/stories/templates/RangeCalendarStyledTsx.ts
+css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
+-->
+
+<!-- ADD_COMPOSITION src/range-calendar -->
+
+<!-- ADD_PROPS src/range-calendar -->
diff --git a/docs-templates/timefield.md b/docs-templates/timefield.md
@@ -1,23 +1,42 @@
-# TimePicker
+# TimeField
 
-`TimePicker` component provides a way to select a time while giving the freedom
+`TimeField` component provides a way to select a time while giving the freedom
 to style. It follows the
 [Native Input Time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
-for the keyboard navigation & accessibility features.
+for the keyboard navigation & accessibility features. Supports all the features
+of React Aria's
+[useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html#features)
 
 <!-- ADD_TOC -->
 
 ## Usage
 
-<!-- ADD_EXAMPLE src/timepicker/stories/templates/TimePickerBasicJsx.ts -->
+<!-- ADD_EXAMPLE src/timefield/stories/templates/TimeFieldBasicJsx.ts -->
 
 <!-- CODESANDBOX
-link_title: TimePicker
-js: src/timepicker/stories/templates/TimePickerBasicJsx.ts
-css: src/timepicker/stories/templates/TimePickerBasicCss.ts
-utils: src/timepicker/stories/templates/UtilsJsx.ts
+link_title: TimeField
+js: src/timefield/stories/templates/TimeFieldBasicJsx.ts
+css: src/timefield/stories/templates/TimeFieldBasicCss.ts
+-->
+<!-- CODESANDBOX
+link_title: TimeField TS
+tsx: src/timefield/stories/templates/TimeFieldBasicTsx.ts
+css: src/timefield/stories/templates/TimeFieldBasicCss.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: TimeField Styled
+js: src/timefield/stories/templates/TimeFieldStyledJsx.ts
+css: src/timefield/stories/templates/TimeFieldBasicCss.ts
+-->
+<!-- CODESANDBOX
+link_title: TimeField Styled TS
+tsx: src/timefield/stories/templates/TimeFieldStyledTsx.ts
+css: src/timefield/stories/templates/TimeFieldBasicCss.ts
 -->
 
-<!-- ADD_COMPOSITION src/timepicker -->
+<!-- ADD_COMPOSITION src/timefield -->
 
-<!-- ADD_PROPS src/timepicker -->
+<!-- ADD_PROPS src/timefield -->
diff --git a/docs/accordion.md b/docs/accordion.md
@@ -67,24 +67,24 @@ export const AccordionBasic = props => {
 export default AccordionBasic;
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Accordion-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/30bd0o)
+[![Edit CodeSandbox](https://img.shields.io/badge/Accordion-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/2i7s7i)
 [![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/3lx8e2)
 
 ## Other Examples
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Multiple-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5uvhf6)
+[![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Multiple-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/obdq0e)
 [![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Multiple%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/bedlw0)
 
 [![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/e0m91w)
 [![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/gt6ek1)
 
 ## Composition
 
-- Accordion uses `CompositeOptions`
-- AccordionDisclosure uses `CompositeItemOptions`
-- AccordionPanel uses `FocusableOptions`, `CollectionItemOptions`, and
-  `DisclosureContentOptions`
-- AccordionState uses `CompositeStateProps`
+- Accordion uses `useComposite`
+- AccordionDisclosure uses `useCompositeItem`
+- AccordionPanel uses `useFocusable`, `useCollectionItem`, and
+  `useDisclosureContent`
+- useAccordionState uses `useCompositeState`
 
 ## Props
 

diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md
@@ -61,7 +61,7 @@ export default BreadcrumbsBasic;
 
 ## Composition
 
-- BreadcrumbLink uses `CommandOptions`
+- BreadcrumbLink uses `useCommand`
 - Breadcrumbs uses `Role`
 
 ## Props