Implement Date Range Picker component

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

@@ -0,0 +1,60 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+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();
+  });
+
+  test('should set input values when prop is passed', () => {
+    const { getByTestId } = render(
+      <DateRangePicker
+        label="Date Range"
+        value={{
+          startDate: new Date('2024-12-10T18:34:37.172Z'),
+          endDate: new Date('2025-01-08T18:34:37.172Z'),
+        }}
+      />,
+    );
+    const startDateInput = getByTestId('start-date-input');
+    const endDateInput = getByTestId('end-date-input');
+
+    expect(startDateInput).toHaveValue('2024-12-10');
+    expect(endDateInput).toHaveValue('2025-01-08');
+  });
+});

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/README.md

@@ -0,0 +1,29 @@
+# DateRangePicker
+
+The DateRangePicker is a custom set of inputs that deal with a range of dates. It is composed by a fieldset with two inputs with type date inside, each one handling half of the date range.
+
+## Example
+
+The following example describes the full composition that mounts the Filter component:
+
+```tsx
+import { DateRangePicker } from '@concepta/react-material-ui';
+
+<DateRangePicker
+  label="Date range"
+  error="Error message"
+  sx={{ margin: '16px' }}
+  onRangeUpdate={(range) => setDateRangeOnState(range)}
+/>;
+```
+
+## Props
+
+| Name | Type | Description | Optional |
+| --- | --- | --- | --- |
+| label | `string` | The label of the field, similar to MUI's `Input` | No
+| error | `string` | Error message displayed on the bottom of the field | No
+| sx | `object` | Custom styles to be applied to the fieldset container | No
+| onRangeUpdate | `function` | Handler for updates in the date range. Returns an object containing `startDate` and `endDate` | No
+
+> The rest of the DateRangePicker props extend from [HTML `fieldset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).

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',
+});