docs(datefield): 📝 finish docs

adaptui · Jul 21, 2022 · 9e38545 · 9e38545
1 parent cc6538c
commit 9e38545
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 48 deletions.
diff --git a/docs-templates/calendar.md b/docs-templates/calendar.md
@@ -4,7 +4,10 @@
 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/WAI/ARIA/apg/patterns/grid/) for the keyboard
-navigaiton & focus management.
+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)
 
 <!-- ADD_TOC -->
 

diff --git a/docs-templates/datefield.md b/docs-templates/datefield.md
@@ -3,7 +3,9 @@
 `DateField` component provides a way to select a date with the help of
 [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. Supports all the features
+of React Aria's
+[useDateField](https://react-spectrum.adobe.com/react-aria/useDateField.html#features)
 
 <!-- ADD_TOC -->
 
@@ -18,3 +20,25 @@ 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 -->
diff --git a/docs/calendar.md b/docs/calendar.md
@@ -4,7 +4,10 @@
 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/WAI/ARIA/apg/patterns/grid/) for the keyboard
-navigaiton & focus management.
+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)
 
 ## Table of Contents
 
@@ -62,11 +65,7 @@ import { ChevronLeft, ChevronRight } from "./Utils.component";
 export const CalendarBasic = props => {
   let { locale } = useLocale();
 
-  const state = useCalendarBaseState({
-    locale: locale,
-    createCalendar: createCalendar,
-    ...props,
-  });
+  const state = useCalendarBaseState({ locale, createCalendar, ...props });
   const calendar = useCalendarState({ ...props, state });
 
   return (
@@ -146,8 +145,8 @@ const CalendarCellComp = props => {
 };
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/jomxy9)
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/71qfrc)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8etxc0)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5by8vl)
 
 ### Range Calendar
 
@@ -194,16 +193,16 @@ Also we can customize and style the ranges with CSS attribute selectors
 }
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/xheffs)
-[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/sjox17)
+[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/9mwysg)
+[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/uj6zx9)
 
 ## Other Examples
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/ynlty4)
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/smok6q)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/xwt87e)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5bivzk)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0mu0zd)
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/bt8bhs)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/t8rnvf)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/pjwlqp)
 
 ## Composition