@popsure/dirty-swan 0.45.0-alpha → 0.47.0

package/src/lib/components/dateSelector/index.tsx

@@ -1,56 +1,21 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, ChangeEvent, useRef, KeyboardEvent } from 'react';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import { CalendarDate } from '@popsure/public-models';
-import DayPicker from 'react-day-picker';
 
 import {
   calendarDateToISODate,
   isoStringtoCalendarDate,
 } from '../../util/calendarDate';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
-import { CalendarIcon } from '../icon/icons';
 
 import styles from './style.module.scss';
-import './datepicker.scss';
+import { Input } from '../input';
+import classNames from 'classnames';
+import { Calendar } from './components/Calendar';
 
 dayjs.extend(localeData);
 const COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
-
-/*
-  Fill an array with an increment from a number to another number.
-  i.e. fillArray from 1 to 4 will return the following: [1, 2, 3, 4]
-  
-  You can fill descending by flipping the to value
-  i.e. fillArray from 4 to 1 will return the following: [4, 3, 2, 1]
-*/
-export const fillArray = (from: number, to: number): number[] => {
-  const ascending = from > to;
-  const arraySize = Math.abs(from - to) + 1;
-  const toReturn = new Array(arraySize).fill(0).map((_, index) => {
-    return ascending ? to + index : from + index;
-  });
-
-  if (ascending) {
-    return toReturn.reverse();
-  }
-
-  return toReturn;
-};
-
-/*
-  Return the maximum number of days given a month and a year.
-*/
-export const daysInMonthOfYear = ({
-  month,
-  year,
-}: {
-  month: number;
-  year: number;
-}) => {
-  return dayjs(`${year}-${month}`).daysInMonth();
-};
-
+type FormatPlaceholder = 'dayFormat' | 'monthFormat' | 'yearFormat';
 export interface DateSelectorProps {
   value?: string;
   onChange: (date: string) => void;
@@ -59,229 +24,233 @@ export interface DateSelectorProps {
   dayjsLocale?: ILocale;
   placeholders?: {
     day?: string;
+    dayFormat?: string;
     month?: string;
+    monthFormat?: string;
     year?: string;
+    yearFormat?: string;
+    error?: string;
   };
   firstDayOfWeek?: number;
 }
 
+const defaultPlaceholders: DateSelectorProps["placeholders"] = {
+  day: "Day",
+  dayFormat: "DD",
+  month: "Month",
+  monthFormat: "MM",
+  year: "Year",
+  yearFormat: "YYYY",
+  error: "Please enter a valid date"
+}
+
+type ErrorField = 'all' | 'day' | 'month' | 'year' | undefined;
+
+const isDateValid = (
+  date: string | undefined,
+  yearBoundaries: DateSelectorProps["yearBoundaries"]
+): {
+  isValid: boolean;
+  field?: ErrorField;
+} => {
+  const { min = 0, max = 0 } = yearBoundaries;
+
+  if (!date) {
+    return { isValid: false, field: 'all' };
+  }
+
+  if (max && dayjs(date).isAfter(`${max}-01-01`, 'year')) { 
+    return { isValid: false, field: 'year' };
+  }
+  
+  if (min && dayjs(date).isBefore(`${min}-01-01`, 'year')) {  
+    return { isValid: false, field: 'year' };
+  }
+  
+  const isDateValid = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
+
+  return {
+    isValid: isDateValid,
+    field: isDateValid ? undefined : 'all',
+  };
+}
+
 export const DateSelector = ({
   value,
   onChange,
+  placeholders: placeholdersProps,
   yearBoundaries,
   displayCalendar,
-  placeholders,
   dayjsLocale,
   firstDayOfWeek = 0,
 }: DateSelectorProps) => {
-  const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
-  const daysInSelectedDate = calendarDateValue
-    ? daysInMonthOfYear({
-        month: calendarDateValue.month,
-        year: calendarDateValue.year,
-      })
-    : 31;
-
-  const localeDate = dayjsLocale
-    ? dayjs().locale(dayjsLocale).localeData()
-    : dayjs().locale('en').localeData();
+  const placeholders = {
+    ...defaultPlaceholders,
+    ...placeholdersProps
+  }
 
-  const localizedWeekdays = localeDate.weekdays();
-  const localizedWeekdaysShort = localeDate.weekdaysShort();
-  const localizedMonths = localeDate.months();
-  const localizedMonthsShort = localeDate.monthsShort();
+  const itemsRef = useRef<HTMLInputElement[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [hasError, setHasError] = useState<ErrorField>();
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<Partial<CalendarDate>>({});
 
-  const availableDays = fillArray(1, daysInSelectedDate);
-  const availableYears = fillArray(yearBoundaries.max, yearBoundaries.min);
-  const availableMonths = localizedMonthsShort;
+  useEffect(() => {
+    const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
 
-  const [date, setDate] = useState<Partial<CalendarDate>>(
-    calendarDateValue ?? {}
-  );
-  const [openCalendar, setOpenCalendar] = useState(false);
+    if(value !== calendarDateValue && calendarDateValue?.day && calendarDateValue?.month && calendarDateValue?.year) {
+      const { isValid, field } = isDateValid(value, yearBoundaries)
+      setInternalValue(calendarDateValue)
+      setHasError(isValid ? undefined : field);
+      setIsDirty(true);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]); 
 
-  const calendarContainerRef = useRef<HTMLDivElement | null>(null);
 
-  const calendarDefaultDate =
-    dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
-      ? dayjs().toDate()
-      : dayjs().set('year', yearBoundaries.max).toDate();
-  const selectedDateInDateType = value
-    ? dayjs(value).toDate()
-    : calendarDefaultDate;
-  const dateCalendarFromMonth = dayjs(String(yearBoundaries.min))
-    .startOf('year')
-    .toDate();
-  const dateCalendarToMonth = dayjs(String(yearBoundaries.max))
-    .endOf('year')
-    .toDate();
+  const handleOnChange = (key: keyof CalendarDate, v?: string) => {
+    const tempValue = { ...internalValue, [key]: v || undefined };
+    setInternalValue(tempValue);
 
-  useOnClickOutside(calendarContainerRef, () => setOpenCalendar(false));
+    const formattedDate =  calendarDateToISODate({
+      day: tempValue.day || 0,
+      month: tempValue.month || 0,
+      year: tempValue.year || 0,
+    })
+    
+    const { isValid, field } = isDateValid(formattedDate, yearBoundaries);
 
-  useEffect(() => {
-    if (calendarDateValue) {
-      setDate(calendarDateValue);
+    if (dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid()) {
+      setIsDirty(true);
     }
-  }, [value]); //eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
+    setHasError(isValid ? undefined : field);
+    onChange(isValid ? formattedDate : "");
+    setIsCalendarOpen(false);
+  };
+
+  const handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>, index: number) => {
+    const currentInput = itemsRef.current?.[index];
+    const inputSelectionStart = currentInput?.selectionStart;
+    const inputSelectionEnd = currentInput?.selectionEnd;
+
     if (
-      date.year !== undefined &&
-      date.month !== undefined &&
-      date.day !== undefined
+      // is not day input
+      index > 0 &&
+      // has clicked backspace or arrow left
+      ['Backspace', "ArrowLeft"].includes(event.key) && 
+      // is focused at the first character of the input
+      inputSelectionStart === 0 && inputSelectionEnd === 0
     ) {
-      if (
-        calendarDateValue === undefined ||
-        date.day !== calendarDateValue.day ||
-        date.month !== calendarDateValue.month ||
-        date.year !== calendarDateValue.year
+      const prevInput = itemsRef.current?.[index - 1];
+
+      event.preventDefault();
+      prevInput?.focus();
+      prevInput?.setSelectionRange(0, 3);
+    }
+
+    if (
+        // is not year input
+        index < 2
+        // has clicked arrow right
+        && event.key === "ArrowRight"
+        // is focused at the last character of the input value
+        && inputSelectionStart === currentInput.value.length
       ) {
-        onChange(
-          calendarDateToISODate({
-            day: date.day,
-            month: date.month,
-            year: date.year,
-          })
-        );
-      }
+      const nextInput = itemsRef.current?.[index + 1];
+      
+      event.preventDefault();
+      nextInput?.focus();
+      nextInput?.setSelectionRange(0, index === 1 ? 4 : 3);
     }
-  }, [date]); //eslint-disable-line react-hooks/exhaustive-deps
+  }
+
+  const handleOnKeyUp = (event: KeyboardEvent<HTMLInputElement>, index: number) => {
+    const currentInput = itemsRef.current?.[index];
+    const inputSelectionStart = currentInput?.selectionStart;
 
-  const handleOnChange = (key: keyof CalendarDate, v: number) => {
-    const newValue = { ...date, [key]: v };
     if (
-      key !== 'day' &&
-      newValue.month !== undefined &&
-      newValue.year !== undefined &&
-      newValue.day !== undefined
-    ) {
-      const cappedDays = Math.min(
-        daysInMonthOfYear({ month: newValue.month, year: newValue.year }),
-        newValue.day
-      );
-      setDate({ ...newValue, day: cappedDays });
-    } else {
-      setDate(newValue);
+        // is not year input
+        index < 2
+        // is a number key
+        && /^\d+$/.test(event.key)
+        && (
+          // is focused at the last character of the input value
+          inputSelectionStart === currentInput.maxLength 
+          // or month value is over 1 or day value is over 3
+          || Number(currentInput.value) > (index === 1 ? 1 : 3)
+        )
+      ) {
+      const nextInput = itemsRef.current?.[index + 1];
+      
+      event.preventDefault();
+      event.stopPropagation();
+      
+      nextInput?.focus();
+      nextInput?.setSelectionRange(0, index === 1 ? 4 : 3);
     }
+  }
 
-    setOpenCalendar(false);
-  };
+  const getInputProps = (key: keyof CalendarDate, index: number) => ({
+    'data-cy': `date-selector-${key}`,
+    'data-testid': `date-selector-${key}`,
+    className: styles[`${key}Input`],
+    id: key,
+    name: key,
+    maxLength: 2,
+    required: true,
+    label: placeholders?.[key],
+    placeholder: placeholders?.[`${key}Format` as FormatPlaceholder] ?? "",
+    labelInsideInput: true,
+    value: internalValue[key] ?? '',
+    error: (hasError && [key, 'all'].includes(hasError)) && isDirty,
+    type: "text", 
+    ref: (el: HTMLInputElement) => { itemsRef.current[index] = el },
+    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => handleOnKeyUp(event, index),
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => handleOnKeyDown(event, index),
+    onChange: ({ target }: ChangeEvent<HTMLInputElement>) => handleOnChange(key, target.value),
+  });
 
   return (
-    <div className={styles.container}>
-      <div className={styles['date-selector-container']}>
-        <div className={styles['row-container']}>
-          <select
-            data-cy="date-selector-day"
-            className={`p-select ${styles['day-select']}`}
-            id="day"
-            name="day"
-            required={true}
-            value={date.day ?? ''}
-            onChange={(e) => {
-              handleOnChange('day', parseInt(e.target.value, 10));
-            }}
-          >
-            <option value="" disabled={true}>
-              {placeholders?.day || 'Day'}
-            </option>
-            {availableDays.map((day) => (
-              <option key={day} value={day}>
-                {day}
-              </option>
-            ))}
-          </select>
-          <select
-            data-cy="date-selector-month"
-            className={`p-select ${styles['month-select']}`}
-            id="month"
-            name="month"
-            required={true}
-            value={date.month ?? ''}
-            onChange={(e) => {
-              handleOnChange('month', parseInt(e.target.value, 10));
-            }}
-          >
-            <option value="" disabled={true}>
-              {placeholders?.month || 'Month'}
-            </option>
-            {availableMonths.map((month, i) => (
-              <option key={month} value={i + 1}>
-                {month}
-              </option>
-            ))}
-          </select>
-        </div>
-        <select
-          data-cy="date-selector-year"
-          className={`p-select ${styles['year-select']}`}
-          id="year"
-          name="year"
-          required={true}
-          value={date.year ?? ''}
-          onChange={(e) => {
-            handleOnChange('year', parseInt(e.target.value, 10));
-          }}
-        >
-          <option value="" disabled={true}>
-            {placeholders?.year || 'Year'}
-          </option>
-          {availableYears.map((year) => (
-            <option key={year} value={year}>
-              {year}
-            </option>
-          ))}
-        </select>
-      </div>
-      {displayCalendar && (
-        <div
-          className={styles['date-calendar-container']}
-          ref={calendarContainerRef}
-        >
-          <button
-            type="button"
-            onClick={() => setOpenCalendar(!openCalendar)}
-            className={styles.calendarButton}
-            data-testid="calendar-button"
-          >
-            <CalendarIcon
-              color={'purple-500'}
-              size={24}
-              className={`${styles.calendarIcon}`}
+    <div>
+      <div className="d-flex ai-center">
+        <div className={classNames(styles.container, "d-flex gap8")}>
+          <div className={"d-flex gap8 jc-between"}>
+            <Input
+              {...getInputProps('day', 0)}
+              inputMode='numeric'
             />
-          </button>
-          {openCalendar && (
-            <DayPicker
-              month={selectedDateInDateType}
-              showOutsideDays={true}
-              fromMonth={dateCalendarFromMonth}
-              toMonth={dateCalendarToMonth}
-              selectedDays={selectedDateInDateType}
-              onDayClick={(date: Date) => {
-                if (
-                  dayjs(date).isAfter(dateCalendarFromMonth) ||
-                  dayjs(date).isBefore(dateCalendarToMonth)
-                ) {
-                  const selectedDate = dayjs(date).format(
-                    COLLECTABLE_DATE_FORMAT
-                  );
-                  onChange(selectedDate);
-                  setOpenCalendar(false);
-                }
-              }}
-              pagedNavigation={true}
-              disabledDays={{
-                before: dateCalendarFromMonth,
-                after: dateCalendarToMonth,
-              }}
-              firstDayOfWeek={firstDayOfWeek}
-              locale={dayjsLocale?.name || 'en'}
-              months={localizedMonths}
-              weekdaysLong={localizedWeekdays}
-              weekdaysShort={localizedWeekdaysShort}
+
+            <Input
+              {...getInputProps('month', 1)}
+              inputMode='numeric'
             />
-          )}
+          </div>
+
+          <Input
+            {...getInputProps('year', 2)}
+            inputMode='numeric'
+            maxLength={4}
+          />
         </div>
+
+        <Calendar
+          dateFormat={COLLECTABLE_DATE_FORMAT}
+          yearBoundaries={yearBoundaries}
+          displayCalendar={displayCalendar}
+          dayjsLocale={dayjsLocale}
+          firstDayOfWeek={firstDayOfWeek}
+          isOpen={isCalendarOpen}
+          setCalendarOpen={setIsCalendarOpen}
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+
+      {hasError && isDirty && (
+        <p className="p-p--small tc-red-500 w100 mt8">
+          {placeholders.error}
+        </p>
       )}
     </div>
   );

package/src/lib/components/dateSelector/style.module.scss

@@ -2,95 +2,22 @@
 
 .container {
   display: flex;
-  align-items: center;
-}
-
-.date-selector-container {
-  margin-left: -8px;
-
-  display: flex;
-
-  > select {
-    margin-left: 8px;
-
-    @include p-size-mobile {
-      margin-left: 0;
-    }
-  }
 
   @include p-size-mobile {
-    margin-left: 0;
-    display: unset;
+    flex-direction: column;
   }
 }
 
-.row-container {
-  > select {
-    margin-left: 8px;
-
-    @include p-size-mobile {
-      margin-left: 0;
-    }
-  }
-
-  @include p-size-mobile {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.day-select {
+.dayInput, 
+.monthInput {
   width: 88px;
-
-  @include p-size-mobile {
-    flex: 1;
-    margin-right: 8px;
-  }
+  flex: 1;
 }
 
-.month-select {
+.yearInput {
   width: 104px;
 
   @include p-size-mobile {
-    flex: 1;
-  }
-}
-
-.year-select {
-  width: 104px;
-
-  @include p-size-mobile {
-    display: block;
-
-    margin-top: 8px;
     width: 100%;
   }
-}
-
-.date-calendar-container {
-  position: relative;
-  margin-left: 24px;
-
-  @include p-size-mobile {
-    margin-left: 16px;
-  }
-}
-
-.calendarButton {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-  text-align: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  cursor: pointer;
-}
-
-.calendarIcon {
-  margin: 0px;
-}
+}

package/src/lib/components/input/iban/index.tsx

@@ -12,7 +12,7 @@ const IbanInput = ({
 } & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (
   <Input
     value={formatIban(value)}
-    onChange={(e) => onChange(formatIban(e.target.value))}
+    onChange={(e) => onChange?.(formatIban(e.target.value))}
     {...props}
   />
 );

package/src/lib/components/input/index.tsx

@@ -7,11 +7,12 @@ import styles from './style.module.scss';
 // Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
 export type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
-  error?: string;
+  error?: string | boolean;
   prefix?: string;
   label?: string;
   id?: string;
   hideLabel?: boolean;
+  labelInsideInput?: boolean;
 };
 
 export const Input = React.forwardRef(
@@ -25,14 +26,16 @@ export const Input = React.forwardRef(
       error,
       disabled,
       hideLabel = false,
+      labelInsideInput = false,
       ...props
     }: InputProps,
     ref?: React.ForwardedRef<HTMLInputElement>
   ) => {
     const [uniqueId] = useState(id ?? generateId());
+
     return (
       <div className={`${styles.container} ${className ?? ''}`}>
-        {label && (
+        {label && !labelInsideInput && (
           <label
             htmlFor={uniqueId}
             className={classnames('p-p', styles.label, {
@@ -51,12 +54,15 @@ export const Input = React.forwardRef(
             ref={ref}
             className={classnames(
               error ? 'p-input--error' : 'p-input',
-              !label && placeholder && placeholder.length > 0
+              (!label || labelInsideInput) && placeholder && placeholder.length > 0
                 ? styles.input
                 : styles['input--no-placeholder'],
-              { [styles['input--with-prefix']]: prefix }
+              {
+                [styles['input--with-prefix']]: prefix, 
+                [styles['input--with-inside-label']]: labelInsideInput
+              }
             )}
-            placeholder={label ? placeholder : ' '}
+            placeholder={label || labelInsideInput ? placeholder : ' '}
             disabled={disabled}
             {...props}
           />
@@ -71,7 +77,7 @@ export const Input = React.forwardRef(
               {prefix}
             </span>
           )}
-          {!label && (
+          {(!label || labelInsideInput) && (
             <label
               htmlFor={uniqueId}
               className={classnames(
@@ -80,7 +86,7 @@ export const Input = React.forwardRef(
                 { [styles['placeholder--with-error']]: error }
               )}
             >
-              {placeholder}
+              {labelInsideInput ? label : placeholder}
             </label>
           )}
         </div>

package/src/lib/components/input/input.stories.tsx

@@ -19,6 +19,7 @@ export const InputStory = ({
   value,
   label,
   hideLabel,
+  labelInsideInput,
   prefix,
   error
 }: InputProps) => {
@@ -37,6 +38,7 @@ export const InputStory = ({
       placeholder={placeholder}
       label={label}
       hideLabel={hideLabel}
+      labelInsideInput={labelInsideInput}
       prefix={prefix}
       error={error}
     />

package/src/lib/components/input/stories/config.ts

@@ -20,7 +20,12 @@ const sharedConfig = {
     control: { type: 'text' }
   },
   hideLabel: {
-    description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',
+    description: 'Whether or not a label should be hidden. This is needed for accessibility purposes and a label should always be provided',
+    defaultValue: false,
+    control: { type: 'boolean' }
+  },
+  labelInsideInput: {
+    description: 'Whether or not a label should be visually displayed inside the input borders.',
     defaultValue: false,
     control: { type: 'boolean' }
   },