refactor(date): updated errorMessage story and modified to import props

packages/components/date-input/src/date-input-group.tsx

@@ -1,21 +1,11 @@
 import type {HTMLAttributes, ReactElement, ReactNode} from "react";
-import type {GroupDOMAttributes} from "@react-types/shared";
+import type {GroupDOMAttributes, HelpTextProps, ValidationResult} from "@react-types/shared";
 
 import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {dataAttr} from "@nextui-org/shared-utils";
 
-// TODO: Use HelpTextProps from "@react-types/shared"; once we upgrade react-aria packages to the latest version.
-export interface ValidationResult {
-  /** Whether the input value is invalid. */
-  isInvalid: boolean;
-  /** The current error messages for the input if it is invalid, otherwise an empty array. */
-  validationErrors: string[];
-  /** The native validation details for the input. */
-  validationDetails: ValidityState;
-}
-
-export interface DateInputGroupProps extends ValidationResult {
+export interface DateInputGroupProps extends ValidationResult, HelpTextProps {
   children?: ReactElement | ReactElement[];
   shouldLabelBeOutside?: boolean;
   label?: ReactNode;
@@ -27,10 +17,6 @@ export interface DateInputGroupProps extends ValidationResult {
   labelProps?: HTMLAttributes<HTMLElement>;
   descriptionProps?: HTMLAttributes<HTMLElement>;
   errorMessageProps?: HTMLAttributes<HTMLElement>;
-  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
-  description?: ReactNode;
-  /** An error message for the field. */
-  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
 
 export const DateInputGroup = forwardRef<"div", DateInputGroupProps>((props, ref) => {

packages/components/date-input/stories/date-input.stories.tsx

@@ -13,6 +13,7 @@ import {
 } from "@internationalized/date";
 import {CalendarBoldIcon} from "@nextui-org/shared-icons";
 import {useDateFormatter, I18nProvider} from "@react-aria/i18n";
+import {ValidationResult} from "@react-types/shared";
 
 import {DateInput, DateInputProps} from "../src";
 
@@ -254,10 +255,25 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
+    isInvalid: true,
     errorMessage: "Please enter a valid date",
   },
 };
 
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date";
+      }
+    },
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 

packages/components/date-picker/stories/date-picker.stories.tsx

@@ -17,6 +17,7 @@ import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
 import {Radio, RadioGroup} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {ValidationResult} from "@react-types/shared";
 
 import {DatePicker, DatePickerProps} from "../src";
 
@@ -424,10 +425,25 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
+    isInvalid: true,
     errorMessage: "Please enter a valid date",
   },
 };
 
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date";
+      }
+    },
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 

packages/components/date-picker/stories/date-range-picker.stories.tsx

@@ -13,7 +13,7 @@ import {
   startOfWeek,
   today,
 } from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
+import {RangeValue, ValidationResult} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";
 import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
@@ -499,7 +499,22 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
-    errorMessage: "Please enter your stay duration",
+    isInvalid: true,
+    errorMessage: "Please enter a valid date range",
+  },
+};
+
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date range";
+      }
+    },
   },
 };