Implement Date Range Picker component

packages/react-material-ui/__tests__/DateRangePicker.spec.tsx

@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, fireEvent, getByRole } from '@testing-library/react';
+import {
+  LocalizationProvider,
+  MuiPickersAdapter,
+  MuiPickersAdapterContext,
+} from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import DateRangePicker from '../src/components/DateRangePicker';
+
+describe('DateRangePicker Component', () => {
+  test('should render correctly', () => {
+    const { getByRole } = render(<DateRangePicker />);
+    const field = getByRole('group');
+
+    expect(field).toBeInTheDocument();
+  });
+
+  test('should render correctly with label', () => {
+    const { getByText, getByRole } = render(
+      <DateRangePicker label="Date Range" />,
+    );
+    const field = getByRole('group');
+    const legend = getByText('Date Range');
+
+    expect(field).toBeInTheDocument();
+    expect(legend).toBeInTheDocument();
+  });
+
+  test('should render correctly with label and display two inputs', () => {
+    const { getByText, getByRole, getByTestId } = render(
+      <DateRangePicker label="Date Range" />,
+    );
+    const field = getByRole('group');
+    const legend = getByText('Date Range');
+    const startDateInput = getByTestId('start-date-input');
+    const endDateInput = getByTestId('end-date-input');
+
+    expect(field).toBeInTheDocument();
+    expect(legend).toBeInTheDocument();
+    expect(startDateInput).toBeInTheDocument();
+    expect(endDateInput).toBeInTheDocument();
+  });
+});

packages/react-material-ui/package.json

@@ -40,6 +40,7 @@
     "@rjsf/mui": "^5.0.0-beta.13",
     "@rjsf/utils": "^5.0.0-beta.13",
     "@rjsf/validator-ajv6": "^5.0.0-beta.13",
+    "date-fns": "^4.1.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {

packages/react-material-ui/src/components/DateRangePicker/DateInput/Styles.ts

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles';
+
+export const CustomInput = styled('input')({
+  border: 'none',
+  textAlign: 'center',
+  textTransform: 'uppercase',
+  outline: 'none',
+  fontFamily: 'inherit',
+  fontSize: '1rem',
+  width: '112px',
+  '&::-webkit-calendar-picker-indicator': {
+    display: 'none',
+  },
+  '&::-moz-calendar-picker-indicator': {
+    display: 'none',
+  },
+});

packages/react-material-ui/src/components/DateRangePicker/DateInput/index.tsx

@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+import { CustomInput } from './Styles';
+
+type Props = InputHTMLAttributes<HTMLInputElement>;
+
+const DateInput = forwardRef((props: Props, ref: any) => {
+  return <CustomInput ref={ref} type="date" {...props} />;
+});
+
+export default DateInput;

packages/react-material-ui/src/components/DateRangePicker/Styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+
+export const CustomCalendarHeaderRoot = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 16px',
+  alignItems: 'center',
+});