feat: [M3-8611]- New DatePicker Component

packages/manager/.changeset/pr-11151-added-1731944151381.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+New DatePicker Component ([#11151](https://github.com/linode/manager/pull/11151))

packages/manager/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,42 @@
+import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+
+import { DatePicker } from './DatePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { DateTime } from 'luxon';
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const ControlledExample: Story = {
+  render: () => {
+    const ControlledDatePicker = () => {
+      const [selectedDate, setSelectedDate] = React.useState<DateTime | null>();
+
+      const handleChange = (newDate: DateTime | null) => {
+        setSelectedDate(newDate);
+        action('Controlled date change')(newDate?.toISO());
+      };
+
+      return (
+        <DatePicker
+          format="yyyy-MM-dd"
+          helperText="This is a controlled DatePicker"
+          label="Controlled Date Picker"
+          onChange={handleChange}
+          placeholder="yyyy-MM-dd"
+          value={selectedDate}
+        />
+      );
+    };
+
+    return <ControlledDatePicker />;
+  },
+};
+
+const meta: Meta<typeof DatePicker> = {
+  component: DatePicker,
+  title: 'Components/DatePicker',
+};
+
+export default meta;

packages/manager/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,80 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DateTime } from 'luxon';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DatePicker } from './DatePicker';
+
+import type { DatePickerProps } from './DatePicker';
+
+const props: DatePickerProps = {
+  onChange: vi.fn(),
+  placeholder: 'Pick a date',
+  textFieldProps: { errorText: 'Invalid date', label: 'Select a date' },
+  value: null,
+};
+
+describe('DatePicker', () => {
+  it('should render the DatePicker component', () => {
+    renderWithTheme(<DatePicker {...props} />);
+    const DatePickerField = screen.getByRole('textbox', {
+      name: 'Select a date',
+    });
+
+    expect(DatePickerField).toBeVisible();
+  });
+
+  it('should handle value changes', async () => {
+    renderWithTheme(<DatePicker {...props} />);
+
+    const calendarButton = screen.getByRole('button', { name: 'Choose date' });
+
+    // Click the calendar button to open the date picker
+    await userEvent.click(calendarButton);
+
+    // Find a date button to click (e.g., the 15th of the month)
+    const dateToSelect = screen.getByRole('gridcell', { name: '15' });
+    await userEvent.click(dateToSelect);
+
+    // Check if onChange was called after selecting a date
+    expect(props.onChange).toHaveBeenCalled();
+  });
+
+  it('should display the error text when provided', () => {
+    renderWithTheme(<DatePicker {...props} />);
+    const errorMessage = screen.getByText('Invalid date');
+    expect(errorMessage).toBeVisible();
+  });
+
+  it('should display the helper text when provided', () => {
+    renderWithTheme(<DatePicker {...props} helperText="Choose a valid date" />);
+    const helperText = screen.getByText('Choose a valid date');
+    expect(helperText).toBeVisible();
+  });
+
+  it('should use the default format when no format is specified', () => {
+    renderWithTheme(
+      <DatePicker {...props} value={DateTime.fromISO('2024-10-25')} />
+    );
+    const datePickerField = screen.getByRole('textbox', {
+      name: 'Select a date',
+    });
+    expect(datePickerField).toHaveValue('2024-10-25');
+  });
+
+  it('should handle the custom format correctly', () => {
+    renderWithTheme(
+      <DatePicker
+        {...props}
+        format="dd/MM/yyyy"
+        value={DateTime.fromISO('2024-10-25')}
+      />
+    );
+    const datePickerField = screen.getByRole('textbox', {
+      name: 'Select a date',
+    });
+    expect(datePickerField).toHaveValue('25/10/2024');
+  });
+});

packages/manager/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,93 @@
+import { TextField } from '@linode/ui';
+import { useTheme } from '@mui/material/styles';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import React from 'react';
+
+import type { TextFieldProps } from '@linode/ui';
+import type { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import type { DateTime } from 'luxon';
+
+export interface DatePickerProps
+  extends Omit<MuiDatePickerProps<DateTime>, 'onChange' | 'value'> {
+  /** Error text to display below the input */
+  errorText?: string;
+  /** Format of the date when rendered in the input field. */
+  format?: string;
+  /** Helper text to display below the input */
+  helperText?: string;
+  /** Label to display for the date picker input */
+  label?: string;
+  /** Callback function fired when the value changes */
+  onChange?: (newDate: DateTime | null) => void;
+  /** Placeholder text for the date picker input */
+  placeholder?: string;
+  /** Additional props to pass to the underlying TextField component */
+  textFieldProps?: Omit<TextFieldProps, 'onChange' | 'value'>;
+  /** The currently selected date */
+  value?: DateTime | null;
+}
+
+export const DatePicker = ({
+  format = 'yyyy-MM-dd',
+  helperText = '',
+  label = 'Select a date',
+  onChange,
+  placeholder = 'Pick a date',
+  textFieldProps,
+  value = null,
+  ...props
+}: DatePickerProps) => {
+  const theme = useTheme();
+
+  const onChangeHandler = (newDate: DateTime | null) => {
+    if (onChange) {
+      onChange(newDate);
+    }
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <MuiDatePicker
+        format={format}
+        onChange={onChangeHandler}
+        reduceAnimations // disables the rendering animation
+        value={value}
+        {...props}
+        slotProps={{
+          // TODO: Move styling customization to global theme styles.
+          popper: {
+            sx: {
+              '& .MuiDayCalendar-weekDayLabel': {
+                fontSize: '0.875rem',
+              },
+              '& .MuiPickersCalendarHeader-label': {
+                fontWeight: 'bold',
+              },
+              '& .MuiPickersCalendarHeader-root': {
+                fontSize: '0.875rem',
+              },
+              '& .MuiPickersDay-root': {
+                fontSize: '0.875rem',
+                margin: `${theme.spacing(0.5)}px`,
+              },
+              backgroundColor: theme.bg.main,
+              borderRadius: `${theme.spacing(2)}`,
+              boxShadow: `0px 4px 16px ${theme.color.boxShadowDark}`,
+            },
+          },
+          textField: {
+            ...textFieldProps,
+            helperText,
+            label,
+            placeholder,
+          },
+        }}
+        slots={{
+          textField: TextField,
+        }}
+      />
+    </LocalizationProvider>
+  );
+};

packages/manager/src/components/DatePicker/DateTimePicker.stories.tsx

@@ -0,0 +1,94 @@
+import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+
+import { DateTimePicker } from './DateTimePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { DateTime } from 'luxon';
+
+type Story = StoryObj<typeof DateTimePicker>;
+
+export const ControlledExample: Story = {
+  render: () => {
+    const ControlledDateTimePicker = () => {
+      const [
+        selectedDateTime,
+        setSelectedDateTime,
+      ] = React.useState<DateTime | null>(null); // Start with null
+
+      const handleChange = (newDateTime: DateTime | null) => {
+        setSelectedDateTime(newDateTime);
+        action('Controlled dateTime change')(newDateTime?.toISO());
+      };
+
+      return (
+        <DateTimePicker
+          timeZoneSelectProps={{
+            label: 'Timezone',
+            onChange: action('Timezone changed'),
+          }}
+          label="Controlled Date-Time Picker"
+          onApply={action('Apply clicked')}
+          onCancel={action('Cancel clicked')}
+          onChange={handleChange}
+          placeholder="yyyy-MM-dd HH:mm"
+          showTimeZone={false}
+          timeSelectProps={{ label: 'Select Time' }}
+          value={selectedDateTime}
+        />
+      );
+    };
+
+    return <ControlledDateTimePicker />;
+  },
+};
+
+export const DefaultExample: Story = {
+  args: {
+    label: 'Default Date-Time Picker',
+    onApply: action('Apply clicked'),
+    onCancel: action('Cancel clicked'),
+    onChange: action('Date-Time selected'),
+    placeholder: 'yyyy-MM-dd HH:mm',
+  },
+};
+
+export const WithErrorText: Story = {
+  args: {
+    errorText: 'This field is required',
+    label: 'Date-Time Picker with Error',
+    onApply: action('Apply clicked with error'),
+    onCancel: action('Cancel clicked with error'),
+    onChange: action('Date-Time selected with error'),
+    placeholder: 'yyyy-MM-dd HH:mm',
+  },
+};
+
+const meta: Meta<typeof DateTimePicker> = {
+  argTypes: {
+    errorText: {
+      control: { type: 'text' },
+    },
+    format: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    onApply: { action: 'applyClicked' },
+    onCancel: { action: 'cancelClicked' },
+    onChange: { action: 'dateTimeChanged' },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    format: 'yyyy-MM-dd HH:mm',
+    label: 'Date-Time Picker',
+    placeholder: 'Select a date and time',
+  },
+  component: DateTimePicker,
+  title: 'Components/DateTimePicker',
+};
+
+export default meta;