Merge pull request #391 from adaptui/docs

Author: navin-moorthy

.eslintrc.json

@@ -14,7 +14,13 @@
         // https://github.com/lydell/eslint-plugin-simple-import-sort#custom-grouping
         "groups": [
           // Packages. `react` related packages come first.
-          ["^react", "^ariakit", "^ariakit-utils", "^@?\\w"],
+          [
+            "^react",
+            "^ariakit-utils/system",
+            "^ariakit",
+            "^ariakit-utils",
+            "^@?\\w"
+          ],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.

.prettierignore

@@ -55,6 +55,6 @@ yarn.lock
 dist
 __js
 templates
-docs
+/docs
 CHANGELOG.md
 .yalc

README.md

@@ -26,15 +26,19 @@ System.
 
 ## ⚓ Installation
 
+### npm
+
 ```sh
-# npm
 npm install @adaptui/react
+```
+
+### Yarn
 
-# Yarn
+```sh
 yarn add @adaptui/react
 ```
 
-> Make sure `react react-dom` is installed.
+> Make sure `react` and `react-dom` is installed.
 
 ## :beginner: Getting started
 
@@ -45,21 +49,19 @@ Check out our [getting started docs](/docs/getting-started.md)
 - [Accordion](docs/accordion.md)
 - [Breadcrumbs](docs/breadcrumb.md)
 - [Calendar](docs/calendar.md)
-- [Checkbox](docs/checkbox.md)
-- [Date Picker](docs/datepicker.md)
-- [Disclosure](docs/disclosure.md)
+- [RangeCalendar](docs/range-calendar.md)
+- [DateField](docs/datefield.md)
+- [DatePicker](docs/datepicker.md)
+- [DateRangePicker](docs/daterange-picker.md)
+- [TimeField](docs/timefield.md)
 - [Drawer](docs/drawer.md)
+- [Disclosure](docs/disclosure.md)
 - [Link](docs/link.md)
 - [Meter](docs/meter.md)
-- [Number Input](docs/number-input.md)
+- [Number field](docs/numberfield.md)
 - [Pagination](docs/pagination.md)
-- [Picker Base](docs/picker-base.md)
 - [Progress](docs/progress.md)
-- [Radio](docs/radio.md)
-- [Segment](docs/segment.md)
-- [Select](docs/select.md)
 - [Slider](docs/slider.md)
-- [Time Picker](docs/timepicker.md)
 - [Toast](docs/toast.md)
 
 > **Note:** As the 0.#.# version number suggests that we are still very much

docs-templates/accordion.md

@@ -1,35 +1,50 @@
 # Accordion
 
 `Accordion` component expands/collapses to show more information on clicking the
-trigger button. It follows the
-[WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion)
+trigger button. It follows The
+[WAI-ARIA Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
 for
-[keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction)
+[keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/#:~:text=at%20a%20time.-,Keyboard%20Interaction,-Enter)
 &
-[accessibiltiy properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties).
+[accessibiltiy properties](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/#:~:text=last%20accordion%20header.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties%3A,-The%20title%20of).
 
-<!-- INJECT_TOC -->
+<!-- ADD_TOC -->
 
 ## Usage
 
-<!-- IMPORT_EXAMPLE src/accordion/stories/templates/AccordionBasicJsx.ts -->
+<!-- ADD_EXAMPLE src/accordion/stories/templates/AccordionBasicJsx.ts -->
 
 <!-- CODESANDBOX
 link_title: Accordion
 js: src/accordion/stories/templates/AccordionBasicJsx.ts
 -->
+<!-- CODESANDBOX
+link_title: Accordion TS
+tsx: src/accordion/stories/templates/AccordionBasicTsx.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: Accordion Multiple
+js: src/accordion/stories/templates/AccordionMultipleJsx.ts
+-->
+<!-- CODESANDBOX
+link_title: Accordion Multiple TS
+tsx: src/accordion/stories/templates/AccordionMultipleTsx.ts
+-->
 
 <!-- CODESANDBOX
 link_title: Accordion Styled
 js: src/accordion/stories/templates/AccordionStyledJsx.ts
 css: src/accordion/stories/templates/AccordionStyledCss.ts
 -->
+<!-- CODESANDBOX
+link_title: Accordion Styled TS
+tsx: src/accordion/stories/templates/AccordionStyledTsx.ts
+css: src/accordion/stories/templates/AccordionStyledCss.ts
+-->
 
-## Accessibility Requirements
-
-- Each `AccordionTrigger` should be wrapped in an element with role `heading`
-  with proper aria-level.
-
-<!-- INJECT_COMPOSITION src/accordion -->
+<!-- ADD_COMPOSITION src/accordion -->
 
-<!-- INJECT_PROPS src/accordion -->
+<!-- ADD_PROPS src/accordion -->

docs-templates/breadcrumb.md

@@ -1,29 +1,28 @@
 # Breadcrumb
 
 `Breadcrumb` component is used for the page navigation and it provides the
-required aria attributes for it's links. It follows the
-[WAI-ARIA Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#breadcrumb)
+required aria attributes for it's links and the current link. It follows the
+[WAI-ARIA Breadcrumb Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
 for its
-[accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-2).
+[accessibility properties](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#:~:text=Not%20applicable.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-Breadcrumb%20trail%20is).
 
-<!-- INJECT_TOC -->
+<!-- ADD_TOC -->
 
 ## Usage
 
-<!-- IMPORT_EXAMPLE src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts -->
+<!-- ADD_EXAMPLE src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts -->
 
 <!-- CODESANDBOX
 link_title: Breadcrumbs
 js: src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts
 css: src/breadcrumbs/stories/templates/BreadcrumbsBasicCss.ts
 -->
+<!-- CODESANDBOX
+link_title: Breadcrumbs TS
+tsx: src/breadcrumbs/stories/templates/BreadcrumbsBasicTsx.ts
+css: src/breadcrumbs/stories/templates/BreadcrumbsBasicCss.ts
+-->
 
-## Accessibility Requirement
-
-- `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute.
-- `BreadcrumbLink` should have `aria-current` set to `page` if the currenct page
-  is loaded.
-
-<!-- INJECT_COMPOSITION src/breadcrumbs -->
+<!-- ADD_COMPOSITION src/breadcrumbs -->
 
-<!-- INJECT_PROPS src/breadcrumbs -->
+<!-- ADD_PROPS src/breadcrumbs -->

docs-templates/calendar.md

@@ -1,68 +1,47 @@
 # 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
-[Grid Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#grid) for the
-keyboard navigaiton & focus management.
+`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. Supports all the features as React Aria's
+[useCalendar](https://react-spectrum.adobe.com/react-aria/useCalendar.html#features).
 
-<!-- INJECT_TOC -->
+<!-- ADD_TOC -->
 
 ## Usage
 
-### Base Calendar
-
-<!-- IMPORT_EXAMPLE src/calendar/stories/templates/CalendarBasicJsx.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 = useCalendarState(props);
-+ const state = useRangeCalendarState(props);
-```
-
-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 {
-  /**/
-}
-```
+<!-- ADD_EXAMPLE src/calendar/stories/templates/CalendarBasicJsx.ts -->
 
 <!-- CODESANDBOX
 link_title: Calendar
 js: src/calendar/stories/templates/CalendarBasicJsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
 -->
+<!-- CODESANDBOX
+link_title: Calendar TS
+tsx: src/calendar/stories/templates/CalendarBasicTsx.ts
+css: src/calendar/stories/templates/CalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
+-->
+
+## Other Examples
 
 <!-- CODESANDBOX
-link_title: Range Calendar
-js: src/calendar/stories/templates/CalendarRangeJsx.ts
-css: src/calendar/stories/templates/CalendarRangeCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+link_title: Calendar Styled
+js: src/calendar/stories/templates/CalendarStyledJsx.ts
+css: src/calendar/stories/templates/CalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: Calendar Styled TS
+tsx: src/calendar/stories/templates/CalendarStyledTsx.ts
+css: src/calendar/stories/templates/CalendarBasicCss.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
-<!-- INJECT_COMPOSITION src/calendar -->
+<!-- ADD_COMPOSITION src/calendar -->
 
-<!-- INJECT_PROPS src/calendar -->
+<!-- ADD_PROPS src/calendar -->

docs-templates/checkbox.md

@@ -0,0 +1,42 @@
+# DateField
+
+`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
+[useDateField](https://react-spectrum.adobe.com/react-aria/useDateField.html#features).
+
+<!-- ADD_TOC -->
+
+## Usage
+
+<!-- ADD_EXAMPLE src/datefield/stories/templates/DateFieldBasicJsx.ts -->
+
+<!-- CODESANDBOX
+link_title: DateField
+js: src/datefield/stories/templates/DateFieldBasicJsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->
+<!-- CODESANDBOX
+link_title: DateField TS
+tsx: src/datefield/stories/templates/DateFieldBasicTsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: DateField Styled
+js: src/datefield/stories/templates/DateFieldStyledJsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->
+<!-- CODESANDBOX
+link_title: DateField Styled TS
+tsx: src/datefield/stories/templates/DateFieldStyledTsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->
+
+<!-- ADD_COMPOSITION src/datefield -->
+
+<!-- ADD_PROPS src/datefield -->