docs(calendar): 📝 finish docs

docs-templates/calendar.md

@@ -3,8 +3,8 @@
 `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.
+[Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) for the keyboard
+navigaiton & focus management.
 
 <!-- INJECT_TOC -->
 
@@ -14,6 +14,19 @@ keyboard navigaiton & focus management.
 
 <!-- IMPORT_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
+-->
+<!-- CODESANDBOX
+link_title: Calendar TS
+tsx: src/calendar/stories/templates/CalendarBasicTsx.ts
+css: src/calendar/stories/templates/CalendarBasicCss.ts
+utils: src/calendar/stories/templates/UtilsTsx.ts
+-->
+
 ### Range Calendar
 
 Converting a normal calendar to a range calendar is as easy as just swaping out
@@ -23,8 +36,18 @@ You'll need to import the `useRangeCalendarState` hook from the `@adaptui/react`
 first
 
 ```diff
-- const state = useCalendarState(props);
-+ const state = useRangeCalendarState(props);
+- 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
@@ -50,18 +73,45 @@ Also we can customize and style the ranges with CSS attribute selectors
 ```
 
 <!-- CODESANDBOX
-link_title: Calendar
-js: src/calendar/stories/templates/CalendarBasicJsx.ts
+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
+-->
+<!-- CODESANDBOX
+link_title: Range Calendar TS
+tsx: src/calendar/stories/templates/CalendarRangeTsx.ts
+css: src/calendar/stories/templates/CalendarRangeCss.ts
+utils: src/calendar/stories/templates/UtilsTsx.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: Calendar Styled
+js: src/calendar/stories/templates/CalendarStyledJsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
 utils: 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
+utils: src/calendar/stories/templates/UtilsTsx.ts
+-->
 
 <!-- CODESANDBOX
-link_title: Range Calendar
-js: src/calendar/stories/templates/CalendarRangeJsx.ts
+link_title: Calendar Range Styled
+js: src/calendar/stories/templates/CalendarRangeStyledJsx.ts
 css: src/calendar/stories/templates/CalendarRangeCss.ts
 utils: 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
+utils: src/calendar/stories/templates/UtilsTsx.ts
+-->
 
 <!-- INJECT_COMPOSITION src/calendar -->
 

src/calendar/stories/CalendarBasic.component.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { VisuallyHidden } from "ariakit";
-import { getWeeksInMonth, startOfWeek } from "@internationalized/date";
+import {
+  createCalendar,
+  getWeeksInMonth,
+  startOfWeek,
+} from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
 
 import {
@@ -22,10 +26,19 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
-export type CalendarBasicProps = CalendarBaseStateProps & {};
+export type CalendarBasicProps = Omit<
+  CalendarBaseStateProps,
+  "locale" | "createCalendar"
+> & {};
 
 export const CalendarBasic: React.FC<CalendarBasicProps> = props => {
-  const state = useCalendarBaseState(props);
+  let { locale } = useLocale();
+
+  const state = useCalendarBaseState({
+    locale: locale,
+    createCalendar: createCalendar,
+    ...props,
+  });
   const calendar = useCalendarState({ ...props, state });
 
   return (

src/calendar/stories/CalendarBasic.stories.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { createCalendar } from "@internationalized/date";
-import { useLocale } from "@react-aria/i18n";
 import { ComponentMeta } from "@storybook/react";
 
 import { createPreviewTabs } from "../../../.storybook/utils";
@@ -27,7 +25,5 @@ export default {
 } as Meta;
 
 export const Default = () => {
-  let { locale } = useLocale();
-
-  return <CalendarBasic locale={locale} createCalendar={createCalendar} />;
+  return <CalendarBasic />;
 };

src/calendar/stories/CalendarRange.component.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { VisuallyHidden } from "ariakit";
-import { getWeeksInMonth, startOfWeek } from "@internationalized/date";
+import {
+  createCalendar,
+  getWeeksInMonth,
+  startOfWeek,
+} from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
 
 import {
@@ -22,10 +26,19 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
-export type CalendarRangeProps = RangeCalendarBaseStateProps & {};
+export type CalendarRangeProps = Omit<
+  RangeCalendarBaseStateProps,
+  "locale" | "createCalendar"
+> & {};
 
 export const CalendarRange: React.FC<CalendarRangeProps> = props => {
-  const state = useRangeCalendarBaseState(props);
+  let { locale } = useLocale();
+
+  const state = useRangeCalendarBaseState({
+    locale: locale,
+    createCalendar: createCalendar,
+    ...props,
+  });
   const calendar = useRangeCalendarState({ ...props, state });
 
   return (

src/calendar/stories/CalendarRange.stories.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { createCalendar } from "@internationalized/date";
-import { useLocale } from "@react-aria/i18n";
 import { ComponentMeta } from "@storybook/react";
 
 import { createPreviewTabs } from "../../../.storybook/utils";
@@ -27,7 +25,5 @@ export default {
 } as Meta;
 
 export const Default = () => {
-  let { locale } = useLocale();
-
-  return <CalendarRange locale={locale} createCalendar={createCalendar} />;
+  return <CalendarRange />;
 };

src/calendar/stories/CalendarRangeStyled.component.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { VisuallyHidden } from "ariakit";
-import { getWeeksInMonth, startOfWeek } from "@internationalized/date";
+import {
+  createCalendar,
+  getWeeksInMonth,
+  startOfWeek,
+} from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
 
 import {
@@ -22,12 +26,21 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
-export type CalendarRangeStyledProps = RangeCalendarBaseStateProps & {};
+export type CalendarRangeStyledProps = Omit<
+  RangeCalendarBaseStateProps,
+  "locale" | "createCalendar"
+> & {};
 
 export const CalendarRangeStyled: React.FC<
   CalendarRangeStyledProps
 > = props => {
-  const state = useRangeCalendarBaseState(props);
+  let { locale } = useLocale();
+
+  const state = useRangeCalendarBaseState({
+    locale: locale,
+    createCalendar: createCalendar,
+    ...props,
+  });
   const calendar = useRangeCalendarState({ ...props, state });
 
   return (

src/calendar/stories/CalendarRangeStyled.stories.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { createCalendar } from "@internationalized/date";
-import { useLocale } from "@react-aria/i18n";
 import { ComponentMeta } from "@storybook/react";
 
 import { createPreviewTabs } from "../../../.storybook/utils";
@@ -14,7 +12,6 @@ import { CalendarRangeStyled } from "./CalendarRangeStyled.component";
 import "./tailwind.css";
 
 type Meta = ComponentMeta<typeof CalendarRangeStyled>;
-// type Story = ComponentStoryObj<typeof CalendarRangeStyled>;
 
 export default {
   title: "Calendar/RangeStyled",
@@ -32,9 +29,5 @@ export default {
 } as Meta;
 
 export const Default = () => {
-  let { locale } = useLocale();
-
-  return (
-    <CalendarRangeStyled locale={locale} createCalendar={createCalendar} />
-  );
+  return <CalendarRangeStyled />;
 };

src/calendar/stories/CalendarStyled.component.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { VisuallyHidden } from "ariakit";
-import { getWeeksInMonth, startOfWeek } from "@internationalized/date";
+import {
+  createCalendar,
+  getWeeksInMonth,
+  startOfWeek,
+} from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
 
 import {
@@ -22,10 +26,19 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
-export type CalendarStyledProps = CalendarBaseStateProps & {};
+export type CalendarStyledProps = Omit<
+  CalendarBaseStateProps,
+  "locale" | "createCalendar"
+> & {};
 
 export const CalendarStyled: React.FC<CalendarStyledProps> = props => {
-  const state = useCalendarBaseState(props);
+  let { locale } = useLocale();
+
+  const state = useCalendarBaseState({
+    locale: locale,
+    createCalendar: createCalendar,
+    ...props,
+  });
   const calendar = useCalendarState({ ...props, state });
 
   return (

src/calendar/stories/CalendarStyled.stories.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { createCalendar } from "@internationalized/date";
-import { useLocale } from "@react-aria/i18n";
 import { ComponentMeta } from "@storybook/react";
 
 import { createPreviewTabs } from "../../../.storybook/utils";
@@ -32,7 +30,5 @@ export default {
 } as Meta;
 
 export const Default = () => {
-  let { locale } = useLocale();
-
-  return <CalendarStyled locale={locale} createCalendar={createCalendar} />;
+  return <CalendarStyled />;
 };