Enable Date edition on People view (#105)

* Enable Date edition on People view

* Fix linter

front/src/components/form/DatePicker.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+import { forwardRef, useState } from 'react';
+import ReactDatePicker from 'react-datepicker';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+export type DatePickerProps = {
+  isOpen?: boolean;
+  date: Date;
+  onChangeHandler: (date: Date) => void;
+};
+
+const StyledContainer = styled.div`
+  & .react-datepicker {
+    border-color: ${(props) => props.theme.primaryBorder};
+    font-family: 'Inter';
+  }
+
+  & .react-datepicker__triangle::after {
+    display: none;
+  }
+
+  & .react-datepicker__triangle::before {
+    display: none;
+  }
+
+  & .react-datepicker__header {
+    background-color: ${(props) => props.theme.primaryBackground};
+    border-bottom-color: ${(props) => props.theme.primaryBorder};
+  }
+
+  & .react-datepicker__day--selected {
+    background-color: ${(props) => props.theme.blue};
+  }
+`;
+
+function DatePicker({ date, onChangeHandler, isOpen }: DatePickerProps) {
+  const [startDate, setStartDate] = useState(date);
+
+  type DivProps = React.HTMLProps<HTMLDivElement>;
+  const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+    ({ value, onClick }, ref) => (
+      <div onClick={onClick} ref={ref}>
+        {value &&
+          new Intl.DateTimeFormat(undefined, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }).format(new Date(value as string))}
+      </div>
+    ),
+  );
+
+  return (
+    <StyledContainer>
+      <ReactDatePicker
+        open={isOpen}
+        selected={startDate}
+        onChange={(date: Date) => {
+          setStartDate(date);
+          onChangeHandler(date);
+        }}
+        popperPlacement="bottom"
+        popperModifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [55, 0],
+            },
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              rootBoundary: 'viewport',
+              tether: false,
+              altAxis: true,
+            },
+          },
+        ]}
+        customInput={<DateDisplay />}
+      />
+    </StyledContainer>
+  );
+}
+
+export default DatePicker;

front/src/components/form/__stories__/Datepicker.stories.tsx

@@ -0,0 +1,36 @@
+import DatePicker, { DatePickerProps } from '../DatePicker';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+import { StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+
+const component = {
+  title: 'DatePicker',
+  component: DatePicker,
+};
+
+export default component;
+
+const StyledContainer = styled.div`
+  height: 300px;
+  width: 200px;
+}`;
+
+const Template: StoryFn<typeof DatePicker> = (args: DatePickerProps) => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <StyledContainer>
+        <DatePicker {...args} />
+      </StyledContainer>
+    </ThemeProvider>
+  );
+};
+
+export const DatePickerStory = Template.bind({});
+DatePickerStory.args = {
+  isOpen: true,
+  date: new Date(),
+  onChangeHandler: () => {
+    console.log('changed');
+  },
+};

front/src/components/form/__tests__/Datepicker.test.tsx

@@ -0,0 +1,22 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { DatePickerStory } from '../__stories__/Datepicker.stories';
+import { act } from 'react-dom/test-utils';
+
+it('Checks the datepicker renders', () => {
+  const changeHandler = jest.fn();
+  const { getByText } = render(
+    <DatePickerStory
+      date={new Date('2021-03-03')}
+      onChangeHandler={changeHandler}
+    />,
+  );
+  act(() => {
+    fireEvent.click(getByText('Mar 3, 2021'));
+  });
+  expect(getByText('March 2021')).toBeInTheDocument();
+  act(() => {
+    fireEvent.click(getByText('5'));
+  });
+  expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
+});