Datepicker stories

src/datepicker/DatePicker.ts

@@ -1,7 +1,7 @@
 import { createOnKeyDown } from "reakit-utils";
 import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
-import { ariaAttr, callAllHandlers } from "@chakra-ui/utils";
+import { ariaAttr, callAllHandlers, dataAttr } from "@chakra-ui/utils";
 
 import { DATE_PICKER_KEYS } from "./__keys";
 import { DatePickerStateReturn } from "./DatePickerState";

src/datepicker/DatePickerState.ts

@@ -28,6 +28,7 @@ export const useDatePickerState = (props: DatePickerStateInitialProps = {}) => {
     isDisabled,
     isReadOnly,
     isRequired,
+    autoFocus,
     pickerId: pickerIdProp,
     dialogId: dialogIdProp,
     formatOptions,
@@ -98,6 +99,13 @@ export const useDatePickerState = (props: DatePickerStateInitialProps = {}) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popover.visible]);
 
+  React.useEffect(() => {
+    if (autoFocus) {
+      composite.first();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus, composite.first]);
+
   return {
     pickerId,
     dialogId,

src/datepicker/DatePickerTrigger.ts

@@ -7,8 +7,10 @@ import {
 } from "reakit";
 
 import { DATE_PICKER_TRIGGER_KEYS } from "./__keys";
+import { DatePickerStateReturn } from "./DatePickerState";
 
-export type DatePickerTriggerOptions = PopoverDisclosureOptions;
+export type DatePickerTriggerOptions = PopoverDisclosureOptions &
+  Pick<DatePickerStateReturn, "isDisabled" | "isReadOnly">;
 
 export type DatePickerTriggerHTMLProps = PopoverDisclosureHTMLProps;
 
@@ -23,6 +25,13 @@ export const useDatePickerTrigger = createHook<
   compose: usePopoverDisclosure,
   keys: DATE_PICKER_TRIGGER_KEYS,
 
+  useOptions(options, htmlProps) {
+    return {
+      disabled: options.isDisabled || options.isReadOnly,
+      ...options,
+    };
+  },
+
   useProps(_, { onMouseDown: htmlOnMouseDown, ...htmlProps }) {
     const onMouseDown = (e: React.MouseEvent) => {
       e.stopPropagation();

src/datepicker/DateSegment.ts

@@ -60,7 +60,10 @@ export const useDateSegment = createHook<
 
   useOptions(options, htmlProps) {
     return {
-      disabled: options.segment.type === "literal",
+      disabled:
+        options.isDisabled ||
+        options.isReadOnly ||
+        options.segment.type === "literal",
       ...options,
     };
   },

src/datepicker/stories/DatePicker.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { addDays } from "date-fns";
 import { Meta } from "@storybook/react";
+import { addDays, addWeeks, subWeeks } from "date-fns";
 
 import "./index.css";
 import { DatePickerStateInitialProps, DateValue } from "../index.d";
@@ -24,10 +24,8 @@ const DatePickerComp: React.FC<DatePickerStateInitialProps> = props => {
     ...props,
   });
 
-  console.log("%c state", "color: #f27999", state);
-
   return (
-    <DatePicker {...state}>
+    <DatePicker className="datepicker" {...state}>
       <div className="datepicker__header">
         <DateSegmentField {...state} className="datepicker__field">
           {state.segments.map((segment, i) => (
@@ -78,3 +76,28 @@ export const ControllableState = () => {
     </div>
   );
 };
+
+export const MinMaxDate = () => (
+  <DatePickerComp minValue={new Date()} maxValue={addWeeks(new Date(), 1)} />
+);
+
+export const InValidDate = () => (
+  <DatePickerComp
+    defaultValue={addWeeks(new Date(), 2)}
+    minValue={subWeeks(new Date(), 1)}
+    maxValue={addWeeks(new Date(), 1)}
+  />
+);
+
+export const isDisabled = () => (
+  <DatePickerComp defaultValue={addDays(new Date(), 1)} isDisabled />
+);
+
+export const isReadOnly = () => (
+  <DatePickerComp defaultValue={addDays(new Date(), 1)} isReadOnly />
+);
+
+export const autoFocus = () => (
+  // eslint-disable-next-line jsx-a11y/no-autofocus
+  <DatePickerComp defaultValue={addDays(new Date(), 1)} autoFocus />
+);

src/datepicker/stories/index.css

@@ -25,6 +25,10 @@
   border: 1px solid #1e65fd;
 }
 
+[aria-invalid="true"] > .datepicker__header {
+  border: 1px solid #c00000;
+}
+
 .datepicker__field {
   font-family: monospace;
   display: flex;
@@ -34,8 +38,13 @@
   padding: 2px;
   border-radius: 4px;
 }
+
 .datepicker__field--item:focus {
   background-color: #1e65fd;
   color: white;
   outline: none;
 }
+
+.datepicker [aria-disabled="true"] {
+  opacity: 0.5;
+}