@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/date-picker/components/custom-calendar.tsx

@@ -0,0 +1,193 @@
+import styled from 'styled-components'
+import { Calendar } from 'react-multi-date-picker'
+
+import { Interactive, Surface, Typography, Text, Padding, Margin, Actions } from '@foundations'
+
+/**
+ * For a reasonable description of the class names etc,
+ * @see https://shahabyazdi.github.io/react-multi-date-picker/classes-&-styles/
+ */
+export const CustomCalendar = styled(Calendar)`
+  .rmdp-week-day {
+    ${Typography.Caption}
+    color: ${Text.Subdued};
+  }
+
+  .rmdp-header {
+    font-size: inherit;
+    line-height: inherit;
+    height: inherit;
+    margin-top: ${Margin.none};
+
+    .rmdp-header-values span {
+      ${Typography.Heading3}
+      color: ${Text.Default};
+    }
+
+    button {
+      background-color: ${Surface.Default.Default};
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  .rmdp-day-picker {
+    padding: ${Padding.none};
+  }
+
+  .rmdp-month-picker {
+    padding: ${Padding.none};
+  }
+
+  .rmdp-year-picker {
+    padding: ${Padding.none};
+  }
+
+  .rmdp-calendar {
+    padding: ${Padding.m};
+  }
+
+  .rmdp-day.rmdp-disabled {
+    border-radius: 6px;
+    background-color: ${Actions.Secondary.Disabled};
+    box-shadow: none;
+    ${Typography.Body}
+    color: ${Text.Light};
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):hover {
+      background-color: ${Actions.Secondary.Hover};
+    }
+
+    &:active {
+      background-color: ${Actions.Secondary.Disabled};
+    }
+
+    span {
+      background-color: unset;
+    }
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
+      background-color: unset;
+      color: ${Text.Default};
+    }
+
+    &.rmdp-today {
+      border-radius: 6px;
+    }
+  }
+
+  .rmdp-day.rmdp-range {
+    border-radius: 0px;
+    background-color: ${Surface.Neutral.Subdued};
+    box-shadow: none;
+    ${Typography.Body}
+
+    margin-bottom: ${'1px'};
+
+    &:first-of-type {
+      border-radius: 6px 0 0 6px;
+    }
+
+    &:last-of-type {
+      border-radius: 0 6px 6px 0;
+    }
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):hover {
+      background-color: ${Actions.Secondary.Hover};
+    }
+
+    &:active {
+      background-color: ${Actions.Secondary.Pressed};
+    }
+
+    span {
+      background-color: unset;
+    }
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
+      background-color: unset;
+      color: ${Text.Default};
+    }
+
+    &.rmdp-today {
+      border-radius: 6px;
+    }
+
+    &.start {
+      border-radius: 18px 0px 0px 18px;
+    }
+
+    &.end {
+      border-radius: 0px 18px 18px 0px;
+    }
+
+    &.start, &.end {
+      background-color: ${Interactive.Subtle.Default};
+      box-shadow: none;
+      ${Typography.Heading4}
+      color: ${Text.OnPrimary};
+
+      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
+        background-color: unset;
+        color: ${Text.OnPrimary};
+      }
+
+      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+        background-color: unset;
+        color: ${Text.OnPrimary};
+      }
+    }
+
+    &.rmdp-selected span:not(.highlight) {
+      background-color: inherit;
+      border-radius: none;
+      box-shadow: none;
+    }
+  }
+
+  .rmdp-day {
+    border-radius: 6px;
+    ${Typography.Body}
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):not(.rmdp-selected):hover {
+      background-color: ${Actions.Secondary.Hover};
+    }
+
+    &:active {
+      background-color: ${Actions.Secondary.Pressed};
+    }
+
+    span {
+      background-color: unset;
+    }
+
+    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
+      background-color: unset;
+      color: ${Text.Default};
+    }
+
+    &.rmdp-selected {
+      background-color: ${Interactive.Subtle.Default};
+      border-radius: 6px;
+      box-shadow: none;
+      ${Typography.Heading4}
+      color: ${Text.OnPrimary};
+
+      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
+        background-color: unset;
+        color: ${Text.OnPrimary};
+      }
+
+      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+        background-color: unset;
+        color: ${Text.OnPrimary};
+      }
+    }
+
+    &.rmdp-selected span:not(.highlight) {
+      background-color: inherit;
+      border-radius: none;
+      box-shadow: none;
+    }
+  }
+`

package/src/lib/components/date-picker/components/index.ts

@@ -0,0 +1 @@
+export * from './custom-calendar'

package/src/lib/components/date-picker/data-picker.test.tsx

@@ -0,0 +1,220 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { isNil } from 'lodash'
+import { DatePicker } from './index'
+
+describe('DatePicker', () => {
+  describe('Controls', () => {
+    it('renders the controls you pass with the role button', () => {
+      render(
+        <DatePicker>
+          <DatePicker.Controls>
+            <div>Hello</div>
+          </DatePicker.Controls>
+        </DatePicker>
+      )
+
+      const controls = screen.getByRole('combobox')
+
+      expect(controls).toBeInTheDocument()
+      expect(within(controls).getByText('Hello')).toBeInTheDocument()
+    })
+
+    it('clicking the controls you pass in opens the Calendar', async () => {
+      render(
+        <DatePicker>
+          <DatePicker.Controls>
+            <div>Hello</div>
+          </DatePicker.Controls>
+        </DatePicker>
+      )
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      await userEvent.click(screen.getByRole('combobox'))
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('calls the onClick you passed in to your controls', async () => {
+      const handleClick = jest.fn()
+
+      render(
+        <DatePicker>
+          <DatePicker.Controls>
+            <div onClick={handleClick}>Hello</div>
+          </DatePicker.Controls>
+        </DatePicker>
+      )
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      await userEvent.click(screen.getByRole('combobox'))
+      expect(handleClick).toHaveBeenCalled()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    it('renders an input by default with the role button', () => {
+      render(<DatePicker label="Start Date" />)
+
+      expect(screen.getByLabelText('Start Date')).toBeInTheDocument()
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    describe('the default controls', () => {
+      it('shows a placeholder when there is no value', () => {
+        render(<DatePicker label="Start Date" />)
+
+        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
+          'placeholder',
+          'YYYY-MM-DD'
+        )
+      })
+
+      it('shows a value when there is a value', () => {
+        render(
+          <DatePicker
+            value="2022-12-03"
+            onChange={() => undefined}
+            label="Start Date"
+          />
+        )
+
+        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
+          'value',
+          expect.stringMatching(/2022-12-(02|03|04)/)
+        )
+      })
+
+      it('formats the value with the given format string', () => {
+        const date = '2022-12-03'
+        const today = new Date(date)
+
+        /** formats dates like D/MM/YYYY */
+        const formatted = `${today.getDate()}/${
+          today.getMonth() + 1
+        }/${today.getFullYear()}`
+
+        render(
+          <DatePicker
+            value={date}
+            format="D/MM/YYYY"
+            onChange={() => undefined}
+            label="Start Date"
+          />
+        )
+
+        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
+          'value',
+          formatted
+        )
+      })
+
+      it('formats the value with the given format function', () => {
+        const date = '2022-12-03'
+        const today = new Date(date)
+
+        /** formats dates like D/MM/YYYY */
+        const formatted = `${today.getDate()}/${
+          today.getMonth() + 1
+        }/${today.getFullYear()}`
+
+        render(
+          <DatePicker
+            value={date}
+            onChange={() => undefined}
+            format={({ date, defaultFormatter }) =>
+              isNil(date)
+                ? 'Next Available'
+                : `Date: ${defaultFormatter(date, 'D/MM/YYYY')}`
+            }
+            label="Start Date"
+          />
+        )
+
+        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
+          'value',
+          `Date: ${formatted}`
+        )
+      })
+
+      test.todo('formats the value with a default')
+
+      it('opens the calendar on click', async () => {
+        render(<DatePicker />)
+
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+        expect(screen.queryByRole('combobox')).toBeInTheDocument()
+        await userEvent.click(screen.getByRole('combobox'))
+        expect(screen.queryByRole('dialog')).toBeInTheDocument()
+      })
+
+      test.todo('renders the given label')
+      test.todo('you can override the placeholder')
+      test.todo('you can mark the input required')
+      test.todo('you can mark the input disabled')
+
+      it('the input respects the required property', async () => {
+        render(
+          <form onSubmit={(e) => e.preventDefault()} data-testid="form">
+            <DatePicker label="Start Date" required />
+            <button type="submit">Click Me</button>
+          </form>
+        )
+
+        // it is initially empty
+        expect(screen.getByLabelText('Start Date*')).toHaveAttribute(
+          'value',
+          ''
+        )
+
+        // try to submit
+        await userEvent.click(screen.getByText('Click Me'))
+
+        // we can't
+        expect(document.querySelectorAll(':invalid').length).not.toBe(0)
+
+        // click to open the dialog
+        await userEvent.click(screen.getByLabelText('Start Date*'))
+
+        // click the date... 12
+        await userEvent.click(screen.getByText('12'))
+
+        // now the inpupt has a value
+        expect(screen.getByLabelText('Start Date*')).toHaveAttribute(
+          'value',
+          expect.stringContaining('12')
+        )
+
+        // try to submit again
+        await userEvent.click(screen.getByText('Click Me'))
+
+        // we can!
+        expect(document.querySelectorAll(':invalid').length).toBe(0)
+      })
+    })
+  })
+
+  it('renders a calendar when open', () => {
+    render(<DatePicker defaultOpen label="Start Date" />)
+
+    expect(screen.queryByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('renders no calendar when closed', () => {
+    render(<DatePicker label="Start Date" />)
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('passes children to the Calendar', () => {
+    render(<DatePicker defaultOpen><div>WHOA</div></DatePicker>)
+
+    const calendar = screen.getByRole('dialog')
+    expect(within(calendar).getByText('WHOA')).toBeInTheDocument()
+  })
+
+  describe('Calendar', () => {
+    test.todo('disables dates in the given min and max range')
+    test.todo('disables dates when isAvailable is false for those dates')
+    test.todo('calls onChange when the selected date changes')
+  })
+})
+

package/src/lib/components/date-picker/date-picker.tsx

@@ -0,0 +1,10 @@
+import { FC, isDefined } from '@helpers'
+import { datePickerFactory, IDatePickerProps as IBaseProps, IDatePickerSlots } from './helpers/date-picker-factory'
+
+export type IDatePickerProps = IBaseProps<string>
+
+export const DatePicker: FC<IDatePickerProps, IDatePickerSlots> = datePickerFactory({
+  toDate: (str) => new Date(str),
+  fromDate: (date) => isDefined(date) ? date.toISOString() : '',
+  empty: (str) => str === '',
+})

package/src/lib/components/date-picker/helpers/date-picker-factory.tsx

@@ -0,0 +1,210 @@
+import { InputHTMLAttributes } from 'react'
+import { DateObject } from 'react-multi-date-picker'
+import styled from 'styled-components'
+
+import { Margin } from '@foundations'
+import { applyProps, FC, getSlot, isNothing, isDefined, Nothing, Slot, getOtherChildren, toArray, PropsWithChildren, first, isNil, isFunction, defaultTo, is, useInputElementState, isString } from '@helpers'
+
+import { InputField as InputFieldBase } from '../../input-field'
+import { IconMinor } from '../../icon'
+import { CustomCalendar } from '../components'
+
+const InputDatePicker = styled.div`
+  position: relative;
+`
+
+const Calendar = styled(CustomCalendar)`
+  position: absolute;
+`
+
+const InputField = styled(InputFieldBase)`
+  margin-bottom: ${Margin.xxs};
+`
+
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
+
+export type DateFormatter<T> = (props: { date: T | undefined, defaultFormatter: (date: T, format?: string) => string}) => string
+
+type HTMLProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'min' | 'max'>
+
+export type IDatePickerProps<T> = PropsWithChildren & HTMLProps & { 
+  value?: T
+  defaultValue?: T
+  onChange?: (change: T) => void
+  onClick?: () => void
+
+  isAvailable?: (props: { date: T, isSameDate: (date: T, other: T) => boolean }) => boolean
+
+  isOpen?: boolean
+  defaultOpen?: boolean
+
+  label?: string
+  format?: string | DateFormatter<T>
+  min?: T
+  max?: T
+}
+
+class ControlsSlot extends Slot {}
+
+export type IDatePickerSlots = {
+  Controls: typeof ControlsSlot
+}
+
+export function datePickerFactory<T>({
+  fromDate,
+  toDate,
+  empty,
+}: {
+  fromDate: (date: Date | undefined) => T,
+  toDate: (obj: T) => Date,
+  empty: (obj: T) => boolean,
+}): FC<IDatePickerProps<T>, IDatePickerSlots> {
+
+  const ConcreteDatePicker: FC<IDatePickerProps<T>, IDatePickerSlots> = (props) => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+      onClick,
+      isAvailable = () => true,
+      isOpen,
+      defaultOpen,
+      label,
+      format,
+      children,
+      min,
+      max,
+      ...HTMLInputProps
+    } = props
+
+    const [value, onChange] = useInputElementState<T>({
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+    })
+    const [open, setOpen] = useInputElementState<boolean>({
+      value: isOpen,
+      defaultValue: defaultOpen,
+      onChange: onClick,
+    })
+
+    const controls = getSlot(ControlsSlot, children)
+    const calendarChildren = getOtherChildren(children)
+
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const handleChange = (selectedDates: DateObject | DateObject[] | null) => {
+      const date = first(toArray(selectedDates))
+      const change = fromDate(date?.toDate())
+
+      onChange(change)
+      
+      if (isNil(props.isOpen)) {
+        // we don't want to override the user's custom open/close behaviour
+        setOpen(false)
+      }
+    }
+
+    return (
+      <InputDatePicker>
+        {!isNothing(controls) ? (
+          applyProps(controls.props.children, (childProps: { onClick: () => void, role: string }) => ({
+            ...childProps,
+            onClick: isDefined(childProps.onClick) ? childProps.onClick : () => setOpen(!is(open)),
+            role: 'combobox',
+          }))
+        ) : (
+          <InputField
+            role={'combobox'}
+            placeholder={isNil(value) || empty(value) ? formatDate(value, props.format) : ''}
+            {...HTMLInputProps}
+            readOnly={isDefined(value) && !empty(value)}
+            value={isNil(value) || empty(value) ? '' : formatDate(value, props.format)}
+            onChange={() => undefined}
+            onClick={() => setOpen(!is(open))}
+            label={props.label}
+          >
+            <InputField.Icon>
+              <IconMinor.Calendar />
+            </InputField.Icon>
+          </InputField>
+        )}
+        {is(open) ? /** temporary fix while we wait for https://github.com/shahabyazdi/react-multi-date-picker/pull/153 */ (
+          <div role='dialog'>
+            <Calendar
+              readOnly={isDefined(props.value) && isNil(props.onChange)}
+              renderButton={renderArrows}
+              mapDays={({ date, isSameDate }) => {
+                return {
+                  ...date,
+                  disabled: !isAvailable({
+                    date: fromDate(date.toDate()),
+                    isSameDate: (a, b) =>
+                      isSameDate(
+                        toDateObject(a),
+                        toDateObject(b)
+                      ),
+                  }),
+                }
+              }}
+              value={
+                (isNil(value) || empty(value)) ? undefined : toDateObject(value)
+              }
+              minDate={isDefined(min) ? toDate(min) : undefined}
+              maxDate={isDefined(max) ? toDate(max) : undefined}
+              children={calendarChildren}
+              onChange={handleChange}
+              numberOfMonths={1}
+            />
+          </div>
+        ) : (
+          <Nothing />
+        )}
+      </InputDatePicker>
+    )
+  }
+
+  ConcreteDatePicker.Controls = ControlsSlot
+  ConcreteDatePicker.displayName = 'DatePicker'
+
+  return ConcreteDatePicker
+
+  function toDateObject(date: T): DateObject {
+    return new DateObject(toDate(date))
+  }
+
+  function defaultFormatter (date: T, format?: string): string {
+    if (isNil(date)) {
+      return ''
+    }
+
+    return toDateObject(date).format(defaultTo(format, DEFAULT_DATE_FORMAT))
+  }
+
+  function formatDate(date: T | undefined, format?: string | DateFormatter<T>): string {
+    if (isFunction(format)) {
+      return format({ date, defaultFormatter })
+    }
+
+    if (isNil(date) || empty(date)) {
+      // same behavior as html input type='date', it shows the format
+      // even though if you open the picker it goes to TODAY
+      return isString(format) ? format : DEFAULT_DATE_FORMAT
+    }
+
+    return toDateObject(date).format(
+      defaultTo(format, DEFAULT_DATE_FORMAT)
+    )
+  }
+}
+
+function renderArrows (direction: string, handleClick: () => void) {
+  return (
+    <button type='button' onClick={handleClick}>
+      {direction === 'right' ? (
+        <IconMinor.ArrowRight />
+      ) : (
+        <IconMinor.ArrowLeft />
+      )}
+    </button>
+  )
+}

package/src/lib/components/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-picker'