add month picker to form components

Author: =

packages/opub-ui/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,59 +1,60 @@
-import { DatePicker } from './DatePicker'
-import { DateRangePicker } from './DateRangePicker'
-import { MonthPicker } from './MonthPicker'
-import { getLocalTimeZone, today, parseDate } from '@internationalized/date'
-import { Meta, StoryObj } from '@storybook/react'
+import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DatePicker } from './DatePicker';
+import { DateRangePicker } from './DateRangePicker';
+import { MonthPicker } from './MonthPicker';
 
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  *
  * Reference: https://react-spectrum.adobe.com/react-aria/useDatePicker.html
  */
 const meta = {
-	title: 'Components/DatePicker',
-	component: DatePicker,
-} satisfies Meta<typeof DatePicker>
+  title: 'Components/DatePicker',
+  component: DatePicker,
+} satisfies Meta<typeof DatePicker>;
 
-export default meta
-type Story = StoryObj<typeof meta>
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const metaRange = {
-	component: DateRangePicker,
-} satisfies Meta<typeof DateRangePicker>
-type StoryRange = StoryObj<typeof metaRange>
+  component: DateRangePicker,
+} satisfies Meta<typeof DateRangePicker>;
+type StoryRange = StoryObj<typeof metaRange>;
 
 export const Default: Story = {
-	args: {
-		label: 'Date Picker',
-	},
-}
+  args: {
+    label: 'Date Picker',
+  },
+};
 
 export const Range: StoryRange = {
-	render: ({ ...args }) => <DateRangePicker {...args} />,
-	args: {
-		label: 'Date Range Picker',
-		onChange: (val) => console.log(val),
-	},
-}
+  render: ({ ...args }) => <DateRangePicker {...args} />,
+  args: {
+    label: 'Date Range Picker',
+    onChange: (val) => console.log(val),
+  },
+};
 
 export const Month: Story = {
-	render: ({ ...args }) => <MonthPicker {...args} />,
-	args: {
-		label: 'Month Picker',
-		onChange: (val) => console.log(val),
-		defaultValue: parseDate('2023-02-04'),
-	},
-}
+  render: ({ ...args }) => <MonthPicker {...args} />,
+  args: {
+    label: 'Month Picker',
+    onChange: (val) => console.log(val),
+    defaultValue: parseDate('2023-02-04'),
+  },
+};
 
 export const DisabledDates: StoryRange = {
-	...Range,
-	args: {
-		label: 'Date Picker',
-		minValue: today(getLocalTimeZone()),
-		defaultValue: {
-			start: parseDate('2022-02-04'),
-			end: parseDate('2022-05-03'),
-		},
-		errorMessage: 'Date must be in the future',
-	},
-}
+  ...Range,
+  args: {
+    label: 'Date Picker',
+    minValue: today(getLocalTimeZone()),
+    defaultValue: {
+      start: parseDate('2022-02-04'),
+      end: parseDate('2022-05-03'),
+    },
+    errorMessage: 'Date must be in the future',
+  },
+};

packages/opub-ui/src/components/DatePicker/MonthPicker.tsx

@@ -28,6 +28,8 @@ export type DatePickerProps = {
   requiredIndicator?: boolean;
   /** Additional text to aide in use */
   helpText?: React.ReactNode;
+  /** Default Value  */
+  defaultValue?: DateValue | null;
 } & (DatePickerState | AriaDatePickerProps<DateValue>);
 
 const MonthPicker = React.forwardRef(

packages/opub-ui/src/components/Form/Form.module.scss

@@ -15,6 +15,7 @@ import {
   DateRangePicker,
   DropZone,
   Input,
+  MonthPicker,
   RadioGroup,
   RadioItem,
   RangeSlider,
@@ -75,6 +76,7 @@ const defaultValBase = {
     end: '2020-02-10',
   },
   time: '04:45',
+  month: '2020-02-06',
   combobox: 'Apple',
   comboboxMulti: [
     {
@@ -171,8 +173,8 @@ export const FormBase = ({ ...args }) => {
           <FormLayout.Group>
             <DateField name="date" label="Choose Date" />
             <DatePicker name="date-picker" label="Choose Birthday" />
-
             <TimeField name="time" label="Choose Time" />
+            <MonthPicker name="month" label="Choose Month" />
           </FormLayout.Group>
           <DateRangePicker name="date-range" label="Choose Range" />
           <FormLayout.Group>

packages/opub-ui/src/components/Form/Form.stories.tsx

@@ -1,15 +1,16 @@
 'use client';
 
+import { parseDate } from '@internationalized/date';
+import { DateValue } from '@react-types/datepicker';
+import { RangeValue } from '@react-types/shared';
+import { Controller, useFormContext } from 'react-hook-form';
+
 import {
   DatePicker as DatePickerBase,
   DatePickerProps,
   DateRangePicker as DateRangePickerBase,
   RangePickerProps,
 } from '../../DatePicker';
-import { parseDate } from '@internationalized/date';
-import { DateValue } from '@react-types/datepicker';
-import { RangeValue } from '@react-types/shared';
-import { Controller, useFormContext } from 'react-hook-form';
 
 type PickerProps = {
   name: string;

packages/opub-ui/src/components/Form/components/DatePicker.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { parseDate } from '@internationalized/date';
+import { DateValue } from '@react-types/datepicker';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import {
+  MonthPicker as MonthBase,
+  type DatePickerProps,
+} from '../../DatePicker/MonthPicker';
+
+type FieldProps = {
+  name: string;
+  onChange?: (val: any, name: string) => void;
+  defaultValue?: DateValue;
+  required?: boolean;
+} & DatePickerProps;
+
+const MonthPicker = ({ required, error, ...props }: FieldProps) => {
+  const method = useFormContext();
+
+  if (method) {
+    return (
+      <Controller
+        {...props}
+        control={method.control}
+        rules={{ required: required }}
+        render={({ field }) => (
+          <MonthBase
+            {...field}
+            {...props}
+            value={
+              (field.value && parseDate(field.value)) ||
+              props.value ||
+              props.defaultValue
+            }
+            onChange={(val) => {
+              if (val) {
+                props.onChange && props.onChange(val.toString(), props.name);
+                field.onChange(val.toString());
+              }
+            }}
+          />
+        )}
+      />
+    );
+  }
+
+  return <MonthBase {...props} />;
+};
+
+export { MonthPicker };

packages/opub-ui/src/components/Form/components/MonthPicker.tsx

@@ -1,10 +1,11 @@
-export { Checkbox, CheckboxGroup } from "./Checkbox";
-export { Combobox } from "./Combobox";
-export { DateField } from "./DateField";
-export { DatePicker, DateRangePicker } from "./DatePicker";
-export { DropZone } from "./DropZone";
-export { Input } from "./Input";
-export * from "./RadioGroup";
-export { RangeSlider } from "./RangeSlider";
-export { Select } from "./Select";
-export { TimeField } from "./TimeField";
+export { Checkbox, CheckboxGroup } from './Checkbox';
+export { Combobox } from './Combobox';
+export { DateField } from './DateField';
+export { DatePicker, DateRangePicker } from './DatePicker';
+export { DropZone } from './DropZone';
+export { Input } from './Input';
+export { MonthPicker } from './MonthPicker';
+export * from './RadioGroup';
+export { RangeSlider } from './RangeSlider';
+export { Select } from './Select';
+export { TimeField } from './TimeField';