@availity/mui-datepicker 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.6.2](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.6.1...@availity/mui-datepicker@0.6.2) (2025-02-18)
+
+### Dependency Updates
+
+* `mui-textfield` updated to version `0.6.1`
 ## [0.6.1](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.6.0...@availity/mui-datepicker@0.6.1) (2025-02-05)
 
 ### Dependency Updates

package/DateRangePicker.stories.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Source } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+
+import Docs from './DateRangePickerDocs.md?raw';
+
+<Meta title="Form Components/Datepicker/Datepicker/Date Range Picker Docs" />
+
+<Markdown>{Docs}</Markdown>

package/DateRangePickerDocs.md

@@ -0,0 +1,294 @@
+# DateRangePicker Docs
+
+The `element` library has a `Datepicker` component that can be used to create your own `DateRangePicker`. There is not a `DateRangePicker` exported from the library.
+
+## Example
+
+The following code block shows an example `DateRangePicker` using the `Datepicker` and `Grid` components.
+
+```tsx
+import { Datepicker, Grid } from '@availity/element';
+import type { Dayjs } from 'dayjs';
+
+type DateRangePickerProps = {
+  startDate: Dayjs | null;
+  endDate: Dayjs | null;
+  onStartDateChange: (date: Dayjs | null) => void;
+  onEndDateChange: (date: Dayjs | null) => void;
+  startFieldProps?: {
+    label?: string;
+    helperText?: string;
+    helpTopicId?: string;
+    fullWidth?: boolean;
+  };
+  endFieldProps?: {
+    label?: string;
+    helperText?: string;
+    helpTopicId?: string;
+    fullWidth?: boolean;
+  };
+};
+
+const DateRangePicker = ({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  startFieldProps = {
+    label: 'Start Date',
+    helperText: 'Select start date',
+  },
+  endFieldProps = {
+    label: 'End Date',
+    helperText: 'Select end date',
+  },
+}: DateRangePickerProps) => {
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid xs={12} sm={6}>
+          <Datepicker
+            value={startDate}
+            onChange={onStartDateChange}
+            FieldProps={startFieldProps}
+            maxDate={endDate ?? undefined} // Prevent selecting start date after end date
+            views={['day', 'month', 'year']}
+          />
+        </Grid>
+        <Grid xs={12} sm={6}>
+          <Datepicker
+            value={endDate}
+            onChange={onEndDateChange}
+            FieldProps={endFieldProps}
+            minDate={startDate ?? undefined} // Prevent selecting end date before start date
+            views={['day', 'month', 'year']}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+```
+
+### Simple Usage
+
+Below is an example of the `DateRangePicker` component we made above.
+
+<Source />
+
+```tsx
+import { useState } from 'react';
+import { Dayjs } from 'dayjs';
+
+import { DateRangePicker } from './DateRangePicker';
+
+const MyComponent = () => {
+  const [startDate, setStartDate] = useState<Dayjs | null>(null);
+  const [endDate, setEndDate] = useState<Dayjs | null>(null);
+
+  return (
+    <DateRangePicker
+      // Required props
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      // Optional props with default values shown
+      startFieldProps={{
+        label: 'Start Date',
+        helperText: 'Select start date',
+        helpTopicId: '1234', // Optional help topic ID
+        fullWidth: false, // Optional width control
+      }}
+      endFieldProps={{
+        label: 'End Date',
+        helperText: 'Select end date',
+        helpTopicId: '1234', // Optional help topic ID
+        fullWidth: false, // Optional width control
+      }}
+    />
+  );
+};
+```
+
+### Validation
+
+The recommended way to validate the `DateRangePicker` is to use `yup`. Below we have an example of validating that the `endDate` is after the `startDate`.
+
+```tsx
+import * as yup from 'yup';
+import { Dayjs } from 'dayjs';
+
+const dateRangeSchema = yup.object().shape({
+  startDate: yup.mixed<Dayjs | null>().nullable().required('Start date is required'),
+
+  endDate: yup
+    .mixed<Dayjs | null>()
+    .nullable()
+    .required('End date is required')
+    .test('is-after-start', 'End date must be after start date', function (endDate, context) {
+      const { startDate } = context.parent;
+
+      if (!startDate || !endDate) {
+        return true;
+      }
+
+      return endDate.isAfter(startDate) || endDate.isSame(startDate);
+    }),
+});
+```
+
+You can then use the created component and validation schema in a form with `react-hook-form`.
+
+```tsx
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { Dayjs } from 'dayjs';
+
+import { DateRangePicker } from './DateRangePicker';
+
+interface DateRangeForm {
+  startDate: Dayjs | null;
+  endDate: Dayjs | null;
+}
+
+const dateRangeSchema = yup.object().shape({
+  startDate: yup.mixed<Dayjs | null>().nullable().required('Start date is required'),
+
+  endDate: yup
+    .mixed<Dayjs | null>()
+    .nullable()
+    .required('End date is required')
+    .test('is-after-start', 'End date must be after start date', function (endDate, context) {
+      const { startDate } = context.parent;
+
+      if (!startDate || !endDate) {
+        return true;
+      }
+
+      return endDate.isAfter(startDate) || endDate.isSame(startDate);
+    }),
+});
+
+const DateRangeForm = () => {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<DateRangeForm>({
+    resolver: yupResolver(dateRangeSchema),
+    defaultValues: {
+      startDate: null,
+      endDate: null,
+    },
+  });
+  const DateRangeForm = () => {
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+      watch,
+    } = useForm<DateRangeForm>({
+      resolver: yupResolver(dateRangeSchema),
+      defaultValues: {
+        startDate: null,
+        endDate: null,
+      },
+      mode: 'onChange', // Enable real-time validation
+    });
+
+    // Watch for changes in dates
+    const startDate = watch('startDate');
+    const endDate = watch('endDate');
+
+    // Optional: Add side effects when dates change
+    useEffect(() => {
+      if (startDate && endDate) {
+        // Perform any additional validation or business logic
+        console.log('Date range changed:', { startDate, endDate });
+      }
+    }, [startDate, endDate]);
+
+    const onSubmit = (data: DateRangeForm) => {
+      console.log('Form submitted:', data);
+    };
+
+    return (
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          name="startDate"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <Controller
+              name="endDate"
+              control={control}
+              render={({ field: { onChange: onEndChange, value: endValue } }) => (
+                <DateRangePicker
+                  startDate={value}
+                  endDate={endValue}
+                  onStartDateChange={onChange}
+                  onEndDateChange={onEndChange}
+                  startFieldProps={{
+                    helperText: errors.startDate?.message,
+                    error: Boolean(errors.startDate),
+                    label: 'Start Date',
+                    fullWidth: true,
+                  }}
+                  endFieldProps={{
+                    helperText: errors.endDate?.message,
+                    error: Boolean(errors.endDate),
+                    label: 'End Date',
+                    fullWidth: true,
+                  }}
+                />
+              )}
+            />
+          )}
+        />
+        <button type="submit" style={{ marginTop: '16px' }}>
+          Submit
+        </button>
+      </form>
+    );
+  };
+
+  const onSubmit = (data: DateRangeForm) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="startDate"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Controller
+            name="endDate"
+            control={control}
+            render={({ field: { onChange: onEndChange, value: endValue } }) => (
+              <DateRangePicker
+                startDate={value}
+                endDate={endValue}
+                onStartDateChange={onChange}
+                onEndDateChange={onEndChange}
+                startFieldProps={{
+                  helperText: errors.startDate?.message,
+                  error: Boolean(errors.startDate),
+                  label: 'Start Date',
+                }}
+                endFieldProps={{
+                  helperText: errors.endDate?.message,
+                  error: Boolean(errors.endDate),
+                  label: 'End Date',
+                }}
+              />
+            )}
+          />
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@availity/mui-icon": "0.14.0",
-    "@availity/mui-textfield": "0.7.0",
+    "@availity/mui-textfield": "0.7.1",
     "@mui/x-date-pickers": "^7.2.0",
     "dayjs": "^1.11.13"
   },

package/src/lib/Datepicker.stories.tsx

@@ -1,12 +1,12 @@
 // Each exported component in the package should have its own stories file
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import Grid from '@mui/material/Unstable_Grid2';
-import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';
 import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
 import dayjs, { Dayjs } from 'dayjs';
+import { Box, Grid } from '@availity/mui-layout';
+import { Paper } from '@availity/mui-paper';
 import { Datepicker, DatepickerProps } from './Datepicker';
 import { DateCalendar } from './DateCalendar';
 
@@ -42,6 +42,65 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
   },
 };
 
+type DateRangePickerProps = {
+  startDate: Dayjs | null;
+  endDate: Dayjs | null;
+  onStartDateChange: (date: Dayjs | null) => void;
+  onEndDateChange: (date: Dayjs | null) => void;
+  startFieldProps?: {
+    label?: string;
+    helperText?: string;
+    helpTopicId?: string;
+    fullWidth?: boolean;
+  };
+  endFieldProps?: {
+    label?: string;
+    helperText?: string;
+    helpTopicId?: string;
+    fullWidth?: boolean;
+  };
+};
+
+type DateRangePicker = (props: DateRangePickerProps) => JSX.Element;
+
+export const _DateRangePicker: StoryObj<DateRangePicker> = {
+  render: () => {
+    const [startDate, setStartDate] = useState<Dayjs | null>(null);
+    const [endDate, setEndDate] = useState<Dayjs | null>(null);
+
+    return (
+      <Box sx={{ backgroundColor: 'background.paper', padding: '1.25rem' }}>
+        <Grid container spacing={2}>
+          <Grid xs={12} sm={6}>
+            <Datepicker
+              value={startDate}
+              onChange={setStartDate}
+              FieldProps={{
+                label: 'Start Date',
+                helperText: 'Select start date',
+              }}
+              maxDate={endDate ?? undefined} // Prevent selecting start date after end date
+              views={['day', 'month', 'year']}
+            />
+          </Grid>
+          <Grid xs={12} sm={6}>
+            <Datepicker
+              value={endDate}
+              onChange={setEndDate}
+              FieldProps={{
+                label: 'End Date',
+                helperText: 'Select end date',
+              }}
+              minDate={startDate ?? undefined} // Prevent selecting end date before start date
+              views={['day', 'month', 'year']}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+    );
+  },
+};
+
 export const _PickerViews: StoryObj<typeof DateCalendar> = {
   render: () => {
     const minDate = dayjs('2020-01-01T00:00:00.000');