chore: add type overloads

Author: AlanFnz

src/components/experimental/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+// DatePicker.tsx
 import { format as dfFormat } from 'date-fns';
 import React from 'react';
 import styled from 'styled-components';
@@ -82,17 +83,20 @@ type LegacyCompatProps = {
     isInvalid?: boolean;
 };
 
-export type DatePickerProps = (SingleProps | MultipleProps | RangeProps) & LegacyCompatProps;
+type DatePickerProps = (SingleProps | MultipleProps | RangeProps) & LegacyCompatProps;
 
 const StyledPopover = styled(Popover)`
     padding: 1.5rem;
     border-radius: 1.5rem;
 `;
 
-export function DatePicker(props: SingleProps & LegacyCompatProps): JSX.Element;
-export function DatePicker(props: MultipleProps & LegacyCompatProps): JSX.Element;
-export function DatePicker(props: RangeProps & LegacyCompatProps): JSX.Element;
-export function DatePicker(props: DatePickerProps): JSX.Element {
+export interface DatePickerOverloads {
+    (props: SingleProps & LegacyCompatProps): JSX.Element;
+    (props: MultipleProps & LegacyCompatProps): JSX.Element;
+    (props: RangeProps & LegacyCompatProps): JSX.Element;
+}
+
+function DatePickerImpl(props: DatePickerProps): JSX.Element {
     const {
         label,
         description,
@@ -363,7 +367,7 @@ export function DatePicker(props: DatePickerProps): JSX.Element {
                         description={description}
                         errorMessage={errorMessage}
                         isInvalid={isInvalid}
-                        isDisabled={legacyIsDisabled || isDisabled}
+                        isDisabled={legacyIsDisabled}
                         isVisuallyFocused={open}
                         leadingIcon={<CalendarTodayOutlineIcon />}
                         value={inputValue}
@@ -436,7 +440,7 @@ export function DatePicker(props: DatePickerProps): JSX.Element {
                         const key = stripTime(d).getTime(); // stable per day
                         return (
                             <Chip key={key}>
-                                {dfFormat(d, displayFormat, { locale })} {/* ensure same format */}
+                                {dfFormat(d, displayFormat, { locale })}
                                 <ChipRemoveButton
                                     onPress={() =>
                                         (props as MultipleProps).onChange(
@@ -507,3 +511,10 @@ export function DatePicker(props: DatePickerProps): JSX.Element {
         </div>
     );
 }
+
+DatePickerImpl.displayName = 'DatePicker';
+
+export type { DatePickerProps, LegacyCompatProps, SingleProps, MultipleProps, RangeProps };
+
+// exported component with proper overloads at the value level
+export const DatePicker = DatePickerImpl as unknown as DatePickerOverloads;

src/components/experimental/DatePicker/docs/DatePicker.stories.tsx

@@ -1,70 +1,72 @@
 import React from 'react';
 import type { DateRange as RdpRange } from 'react-day-picker';
 import { getLocalTimeZone, today } from '@internationalized/date';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { DatePicker } from '../DatePicker';
+import type {
+    DatePickerProps,
+    SingleProps,
+    MultipleProps,
+    RangeProps,
+    LegacyCompatProps // <-- import
+} from '../DatePicker';
 
-const meta: Meta = {
+const meta = {
     title: 'Experimental/Components/DatePicker',
-    component: DatePicker,
-    parameters: {
-        layout: 'centered'
-    },
-    args: {
-        label: 'Pickup date'
-    }
-};
+    component: DatePicker as unknown as React.ComponentType<DatePickerProps>,
+    parameters: { layout: 'centered' },
+    args: { label: 'Pickup date' }
+} satisfies Meta<DatePickerProps>;
 
 export default meta;
 
-type Story = StoryObj<typeof DatePicker>;
+type SingleStory = StoryObj<SingleProps & LegacyCompatProps>;
+type MultipleStory = StoryObj<MultipleProps & LegacyCompatProps>;
+type RangeStory = StoryObj<RangeProps & LegacyCompatProps>;
 
 const TZ = getLocalTimeZone();
 const TODAY = today(TZ);
 
-export const Default: Story = {};
+// Single mode
+export const Default: SingleStory = { args: { mode: 'single' } };
 
-export const WithDefaultValue: Story = {
-    args: {
-        defaultValue: TODAY
-    }
+export const WithDefaultValue: SingleStory = {
+    args: { mode: 'single', defaultValue: TODAY }
 };
 
-export const WithDescription: Story = {
-    args: {
-        description: 'Enter current date'
-    }
+export const WithDescription: SingleStory = {
+    args: { mode: 'single', description: 'Enter current date' }
 };
 
-export const WithValidation: Story = {
-    args: {
-        label: 'Only from today'
-    },
+export const WithValidation: SingleStory = {
+    args: { mode: 'single', label: 'Only from today' },
     render: args => <DatePicker {...args} minValue={TODAY} />
 };
 
-export const MultipleSelection: Story = {
-    render: args => {
-        const [dates, setDates] = React.useState<Date[]>([]);
-        return <DatePicker {...args} mode="multiple" visibleMonths={2} value={dates} onChange={setDates} />;
-    }
+export const AutoFocus: SingleStory = {
+    args: { mode: 'single', autoFocus: true, defaultValue: TODAY }
 };
 
-export const RangeSelection: Story = {
-    render: args => {
-        const [range, setRange] = React.useState<RdpRange | undefined>(undefined);
-        return <DatePicker {...args} mode="range" visibleMonths={2} value={range} onChange={setRange} />;
-    }
+export const Disabled: SingleStory = {
+    args: { mode: 'single', isDisabled: true }
+};
+
+export const Invalid: SingleStory = {
+    args: { mode: 'single', isInvalid: true, errorMessage: 'Error' }
 };
-export const Disabled: Story = {
-    args: {
-        isDisabled: true
+
+export const MultipleSelection: MultipleStory = {
+    args: { mode: 'multiple', visibleMonths: 2 },
+    render: args => {
+        const [dates, setDates] = React.useState<Date[]>([]);
+        return <DatePicker {...args} value={dates} onChange={setDates} />;
     }
 };
 
-export const Invalid: Story = {
-    args: {
-        isInvalid: true,
-        errorMessage: 'Error'
+export const RangeSelection: RangeStory = {
+    args: { mode: 'range', visibleMonths: 2 },
+    render: args => {
+        const [range, setRange] = React.useState<RdpRange | undefined>();
+        return <DatePicker {...args} value={range} onChange={setRange} />;
     }
 };