DatePicker component

package.json

@@ -86,6 +86,7 @@
     "babel-jest": "^29.7.0",
     "bootstrap": "^5.3.3",
     "classnames": "^2.5.1",
+    "date-fns": "^3.6.0",
     "detect-browser": "^5.3.0",
     "dompurify": "^3.1.1",
     "framer-motion": "^10.16.5",
@@ -102,6 +103,7 @@
     "react-avatar": "^5.0.3",
     "react-bootstrap": "^2.10.2",
     "react-color": "^2.19.3",
+    "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",

src/common/constants.ts

@@ -95,6 +95,9 @@ export const hasMockApi = (url: string) => {
 }
 
 export const getApiUrl = (url: string) => {
+    if (url === '') {
+        return url
+    }
     const parsedUrl = new URL(url)
 
     return hasMockApi(parsedUrl.pathname) && parsedUrl.origin ? `${process.env.REACT_APP_MOCK_BASE_URL}${parsedUrl.pathname}${parsedUrl.search}` : url

src/common/types/WellKnowConfig.types.ts

@@ -0,0 +1,5 @@
+export type DeviceOAuthConfigType = {
+    clientId: string
+    audience: string
+    scopes: string[]
+}

src/components/Atomic/DatePicker/DatePicker.styles.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react'
+
+export const datePicker = css`
+    width: 100%;
+
+    .react-date-picker {
+        display: block;
+    }
+`

src/components/Atomic/DatePicker/DatePicker.tsx

@@ -0,0 +1,44 @@
+import { FC, forwardRef, useEffect, useState } from 'react'
+import { default as ReactDatePicker } from 'react-datepicker'
+import isFunction from 'lodash/isFunction'
+
+import { Props } from './DatePicker.types'
+
+import 'react-datepicker/dist/react-datepicker.css'
+import FormInput from '../FormInput'
+import IconCalendar from '../Icon/components/IconCalendar'
+import * as styles from './DatePicker.styles'
+
+const DatePicker: FC<Props> = (props) => {
+    const { className, dataTestId, defaultValue, id, locale, onChange, value } = props
+    const [startDate, setStartDate] = useState<Date | null>(defaultValue ?? new Date())
+
+    useEffect(() => {
+        if (value) {
+            setStartDate(value)
+        }
+    }, [value])
+
+    const ExampleCustomInput = forwardRef(({ value, onClick }: any, ref) => (
+        <FormInput icon={<IconCalendar onClick={onClick} />} inputRef={ref} onChange={() => {}} onClick={onClick} value={value} />
+    ))
+
+    return (
+        <div className={className} css={styles.datePicker} data-test-id={dataTestId} id={id}>
+            <ReactDatePicker
+                customInput={<ExampleCustomInput />}
+                locale={locale}
+                onChange={(date) => {
+                    setStartDate(date)
+                    isFunction(onChange) && onChange(date)
+                }}
+                selected={startDate}
+                wrapperClassName='react-date-picker'
+            />
+        </div>
+    )
+}
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

src/components/Atomic/DatePicker/DatePicker.types.ts

@@ -0,0 +1,13 @@
+export type Props = {
+    className?: string
+    dataTestId?: string
+    defaultValue?: Date | null
+    id?: string
+    locale?: string
+    onChange?: (date: Date | null) => void
+    value?: Date | null
+}
+
+export const defaultProps: Partial<Props> = {
+    locale: 'en-GB',
+}

src/components/Atomic/DatePicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DatePicker'
+export * from './DatePicker'

src/components/Atomic/FormInput/FormInput.types.ts

@@ -26,6 +26,7 @@ export type Props = {
     name?: string
     onBlur?: (e: any) => void
     onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+    onClick?: (e: any) => void
     onFocus?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
     onKeyPress?: (e: any) => void
     placeholder?: string

src/components/Atomic/Icon/components/IconCalendar.tsx

@@ -0,0 +1,13 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Do not edit directly
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { Ref, forwardRef, memo } from 'react'
+const SvgIconCalendar = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg xmlns='http://www.w3.org/2000/svg' width={props.width || 16} height={props.height || 16} viewBox='0 0 24 24' ref={ref} {...props}>
+        <path fill='currentcolor' d='M6 1v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2v2H8V1zM5 5h14v2H5zm0 4h14v10H5z' />
+    </svg>
+)
+const ForwardRef = forwardRef(SvgIconCalendar)
+const Memo = memo(ForwardRef)
+export default Memo

src/components/Atomic/Icon/components/index.ts

@@ -6,6 +6,7 @@ export { default as IconArrowLeft } from './IconArrowLeft'
 export { default as IconArrowRight } from './IconArrowRight'
 export { default as IconArrowTriangleFullUp } from './IconArrowTriangleFullUp'
 export { default as IconBell } from './IconBell'
+export { default as IconCalendar } from './IconCalendar'
 export { default as IconCertificate } from './IconCertificate'
 export { default as IconChat } from './IconChat'
 export { default as IconCheck } from './IconCheck'
@@ -67,6 +68,7 @@ export const Icons = [
     'IconArrowRight',
     'IconArrowTriangleFullUp',
     'IconBell',
+    'IconCalendar',
     'IconCertificate',
     'IconChat',
     'IconCheck',
@@ -129,6 +131,7 @@ export const IconsRaw = [
     'icon-arrow-right',
     'icon-arrow-triangle-full-up',
     'icon-bell',
+    'icon-calendar',
     'icon-certificate',
     'icon-chat',
     'icon-check',