@takaro/lib-components 0.0.0-next.0da151e

package/src/components/inputs/Date/DatePicker/formats.tsx

@@ -0,0 +1,32 @@
+import { DateTime } from 'luxon';
+
+const DateAndTimeFormats = [
+  DateTime.DATETIME_SHORT,
+  DateTime.DATETIME_MED,
+  DateTime.DATETIME_FULL,
+  DateTime.DATETIME_HUGE,
+  DateTime.DATETIME_SHORT_WITH_SECONDS,
+  DateTime.DATETIME_MED_WITH_SECONDS,
+  DateTime.DATETIME_FULL_WITH_SECONDS,
+  DateTime.DATETIME_HUGE_WITH_SECONDS,
+];
+
+export const timeFormats = [
+  DateTime.TIME_SIMPLE,
+  DateTime.TIME_WITH_SECONDS,
+  DateTime.TIME_WITH_SHORT_OFFSET,
+  DateTime.TIME_WITH_LONG_OFFSET,
+  DateTime.TIME_24_SIMPLE,
+  DateTime.TIME_24_WITH_SECONDS,
+  DateTime.TIME_24_WITH_SHORT_OFFSET,
+  DateTime.TIME_24_WITH_LONG_OFFSET,
+  ...DateAndTimeFormats,
+].map((format) => JSON.stringify(format));
+
+export const dateFormats = [
+  DateTime.DATE_SHORT,
+  DateTime.DATE_MED,
+  DateTime.DATE_FULL,
+  DateTime.DATE_HUGE,
+  ...DateAndTimeFormats,
+].map((format) => JSON.stringify(format));

package/src/components/inputs/Date/DatePicker/style.ts

@@ -0,0 +1,41 @@
+import { styled } from '../../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const ResultContainer = styled.div<{ readOnly: boolean; hasError: boolean }>`
+  list-style-type: none;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  outline: 0;
+  border: 0.1rem solid ${({ theme }) => theme.colors.secondary};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  text-transform: capitalize;
+  z-index: ${({ theme }) => theme.zIndex.dropdown};
+  cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'pointer')};
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const ContentContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing['0_75']};
+`;
+
+export const InnerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.spacing['1']};
+  margin-top: ${({ theme }) => theme.spacing['1']};
+`;

package/src/components/inputs/Date/DateRangePicker/Context.tsx

@@ -0,0 +1,123 @@
+import { DateTime } from 'luxon';
+import { createContext, Dispatch, useContext } from 'react';
+import { Tense, Unit } from '../types';
+
+export interface DateRangePickerState {
+  start: DateTime;
+  end: DateTime;
+  quickSelect: {
+    show: boolean;
+    tense: Tense;
+    step: number;
+    unit: Unit;
+  };
+  showStartDate: boolean;
+  showEndDate: boolean;
+  friendlyStartDate?: string;
+  friendlyEndDate?: string;
+  friendlyRange?: string;
+  disabledOrReadOnly: boolean;
+}
+
+export function reducer(state: DateRangePickerState, action: Action): DateRangePickerState {
+  if (state.disabledOrReadOnly && action.type !== 'toggle_disable_or_readonly') {
+    return state;
+  }
+
+  switch (action.type) {
+    case 'toggle_disable_or_readonly':
+      return {
+        ...state,
+        disabledOrReadOnly: action.payload.disabledOrReadOnly,
+      };
+    case 'toggle_quick_select_popover':
+      return {
+        ...state,
+        quickSelect: { ...state.quickSelect, show: action.payload.toggleQuickSelect },
+      };
+    case 'toggle_start_date_popover':
+      return {
+        ...state,
+        friendlyRange: undefined,
+        showStartDate: action.payload.toggleStartDate,
+      };
+    case 'toggle_end_date_popover':
+      return {
+        ...state,
+        friendlyRange: undefined,
+        showEndDate: action.payload.toggleEndDate,
+      };
+
+    case 'set_absolute_start_date':
+      return {
+        ...state,
+        start: action.payload.startDate,
+        // If endDate is before new startDate, set endDate to new startDate
+        end: state.end < action.payload.startDate ? action.payload.startDate : state.end,
+        friendlyStartDate: undefined,
+        friendlyRange: undefined,
+      };
+    case 'set_relative_start_date':
+      return {
+        ...state,
+        start: action.payload.startDate,
+        friendlyStartDate: action.payload.friendlyStartDate,
+        friendlyRange: undefined,
+      };
+
+    case 'set_quick_select':
+      return {
+        ...state,
+        quickSelect: { ...state.quickSelect, ...action.payload.quickSelect },
+      };
+
+    case 'set_absolute_end_date':
+      return {
+        ...state,
+        end: action.payload.endDate,
+        friendlyEndDate: undefined,
+        friendlyRange: undefined,
+      };
+
+    case 'set_relative_end_date':
+      return {
+        ...state,
+        end: action.payload.endDate,
+        friendlyEndDate: action.payload.friendlyEndDate,
+        friendlyRange: undefined,
+      };
+    case 'set_range':
+      return {
+        ...state,
+        end: action.payload.endDate,
+        start: action.payload.startDate,
+        friendlyRange: action.payload.friendlyRange,
+        friendlyEndDate: undefined,
+        friendlyStartDate: undefined,
+        quickSelect: { ...state.quickSelect, show: false },
+      };
+  }
+}
+
+export type Action =
+  | { type: 'toggle_quick_select_popover'; payload: { toggleQuickSelect: boolean } }
+  | { type: 'toggle_start_date_popover'; payload: { toggleStartDate: boolean } }
+  | { type: 'toggle_end_date_popover'; payload: { toggleEndDate: boolean } }
+  | { type: 'set_quick_select'; payload: { quickSelect: DateRangePickerState['quickSelect'] } }
+  | { type: 'set_relative_start_date'; payload: { startDate: DateTime; friendlyStartDate?: string } }
+  | { type: 'set_absolute_start_date'; payload: { startDate: DateTime } }
+  | { type: 'set_relative_end_date'; payload: { endDate: DateTime; friendlyEndDate?: string } }
+  | { type: 'set_absolute_end_date'; payload: { endDate: DateTime } }
+  | { type: 'set_range'; payload: { startDate: DateTime; endDate: DateTime; friendlyRange?: string } }
+  | { type: 'toggle_disable_or_readonly'; payload: { disabledOrReadOnly: boolean } };
+
+export const DateRangePickerContext = createContext<DateRangePickerState | null>(null);
+export const DateRangePickerDispatchContext = createContext<Dispatch<Action> | null>(null);
+
+export function useDateRangePickerContext() {
+  return useContext(DateRangePickerContext);
+}
+
+export function useDateRangePickerDispatchContext() {
+  return useContext(DateRangePickerDispatchContext);
+}

package/src/components/inputs/Date/DateRangePicker/Controlled.tsx

@@ -0,0 +1,74 @@
+import { FC, useState } from 'react';
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../../InputProps';
+import { useController } from 'react-hook-form';
+import { GenericDateRangePicker, DateRangePickerProps } from './Generic';
+import { Label, ErrorMessage, InputWrapper, Description } from '../../layout';
+import { Container } from './style';
+import { Skeleton } from '../../../../components';
+
+export type ControlledDateRangePickerProps = ControlledInputProps & DateRangePickerProps;
+const defaultsApplier = defaultInputPropsFactory<ControlledDateRangePickerProps>(defaultInputProps);
+
+export const ControlledDateRangePicker: FC<ControlledDateRangePickerProps> = (props) => {
+  const { label, name, size, hint, control, disabled, readOnly, required, loading, id, description, defaultValue } =
+    defaultsApplier(props);
+
+  const [showError, setShowError] = useState<boolean>(true);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const handleOnFocus = () => {
+    setShowError(false);
+  };
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(true);
+  };
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            hint={hint}
+            htmlFor={name}
+            error={!!error}
+            size={size}
+            text={label}
+            disabled={disabled}
+            position="top"
+          />
+        )}
+        {loading ? (
+          <Skeleton variant="text" width="100%" height="38px" />
+        ) : (
+          <GenericDateRangePicker
+            onChange={field.onChange}
+            onBlur={handleOnBlur}
+            onFocus={handleOnFocus}
+            id={id}
+            name={name}
+            readOnly={readOnly}
+            disabled={disabled}
+            defaultValue={defaultValue}
+            required={required}
+            size={size}
+            hasError={!!error}
+            value={field.value}
+            hasDescription={!!description}
+          />
+        )}
+        {showError && error?.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/DateRangePicker.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { GenericDateRangePicker, GenericDateRangePickerProps } from './Generic';
+import { styled } from '../../../../styled';
+
+const Wrapper = styled.div`
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+export default {
+  title: 'Inputs/DateRangePicker',
+  component: GenericDateRangePicker,
+  args: {
+    readOnly: false,
+    hasDescription: false,
+    hasError: false,
+  },
+} as Meta<GenericDateRangePickerProps>;
+
+export const Default: StoryFn<GenericDateRangePickerProps> = (args) => {
+  const handleOnChange = () => {};
+
+  return (
+    <Wrapper>
+      <GenericDateRangePicker
+        hasDescription={args.hasDescription}
+        hasError={args.hasError}
+        name="daterangepicker"
+        readOnly={args.readOnly}
+        id="date"
+        onChange={handleOnChange}
+        value="2021-01-01"
+      />
+    </Wrapper>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/DateSelector/Absolute.tsx

@@ -0,0 +1,98 @@
+import { FC, useEffect, useMemo } from 'react';
+import { Calendar } from '../../subcomponents/Calendar';
+import { TimePicker } from '../../subcomponents/TimePicker';
+import { useDateRangePickerContext, useDateRangePickerDispatchContext } from '../Context';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DateTime } from 'luxon';
+import { TextField, Divider } from '../../../../../components';
+import { styled } from '../../../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledForm = styled.form<{ hasError: boolean }>`
+  margin-top: ${({ theme }) => theme.spacing['0_5']};
+  padding-bottom: ${({ theme, hasError }) => (hasError ? theme.spacing['2_5'] : 0)};
+`;
+
+interface AbsoluteProps {
+  isStart: boolean;
+}
+
+export const Absolute: FC<AbsoluteProps> = ({ isStart }) => {
+  const dispatch = useDateRangePickerDispatchContext();
+  const state = useDateRangePickerContext();
+
+  if (!dispatch || !state) {
+    throw new Error(
+      'useDateRangePickerDispatchContext and useDateRangePickerContext must be used within a DateRangePickerProvider',
+    );
+  }
+
+  interface IFormInputs {
+    date: string;
+  }
+
+  const validationSchema = useMemo(() => {
+    return z.object({
+      date: z.string().refine(
+        (dateStr: string) => {
+          const dateTime = DateTime.fromFormat(dateStr, 'MMM d, yyyy @ HH:mm:ss.SSS', { locale: 'en' });
+          return dateTime.isValid;
+        },
+        {
+          message: 'Invalid date format, it should be "MMM D, YYYY @ HH:mm:ss.SSS"',
+        },
+      ),
+    });
+  }, []);
+
+  const { control, handleSubmit, setValue, formState, clearErrors } = useForm<IFormInputs>({
+    mode: 'onChange',
+    resolver: zodResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    clearErrors('date');
+    setValue(
+      'date',
+      isStart ? state.start.toFormat('MMM d, yyyy @ HH:mm:ss.SSS') : state.end.toFormat('MMM d, yyyy @ HH:mm:ss.SSS'),
+    );
+  }, [isStart ? state.start : state.end]);
+
+  const onSubmit: SubmitHandler<IFormInputs> = ({ date }) => {
+    const dateTime = DateTime.fromFormat(date, 'MMM d, yyyy @ HH:mm:ss.SSS', { locale: 'en' });
+    if (isStart) dispatch({ type: 'set_absolute_start_date', payload: { startDate: dateTime } });
+    else dispatch({ type: 'set_absolute_end_date', payload: { endDate: dateTime } });
+  };
+
+  return (
+    <>
+      <Container>
+        <Calendar
+          onDateClick={(date) => {
+            if (isStart) dispatch({ type: 'set_absolute_start_date', payload: { startDate: date } });
+            else dispatch({ type: 'set_absolute_end_date', payload: { endDate: date } });
+          }}
+          id={isStart ? 'start' : 'end'}
+          selectedDate={isStart ? state.start : state.end}
+        />
+        <TimePicker
+          selectedDate={isStart ? state.start : state.end}
+          onChange={(date) => {
+            if (isStart) dispatch({ type: 'set_absolute_start_date', payload: { startDate: date } });
+            else dispatch({ type: 'set_absolute_end_date', payload: { endDate: date } });
+          }}
+        />
+      </Container>
+      <Divider fullWidth />
+      <StyledForm hasError={formState.errors.date?.message ? true : false} onChange={handleSubmit(onSubmit)}>
+        <TextField prefix={isStart ? 'Start date' : 'End date'} control={control} name="date" type="text" />
+      </StyledForm>
+    </>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/DateSelector/Relative.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import { Divider } from '../../../../../components';
+import { DateTime } from 'luxon';
+import { useDateRangePickerContext, useDateRangePickerDispatchContext } from '../Context';
+import { RelativePicker } from '../../subcomponents/RelativePicker';
+import { GenericTextField } from '../../../TextField';
+
+interface RelativeProps {
+  isStart: boolean;
+}
+
+export const Relative: FC<RelativeProps> = ({ isStart }) => {
+  const dispatch = useDateRangePickerDispatchContext();
+  const state = useDateRangePickerContext();
+
+  if (!dispatch || !state) {
+    throw new Error(
+      'useDateRangePickerDispatchContext and useDateRangePickerContext must be used within a DateRangePickerProvider',
+    );
+  }
+
+  const handleOnChange = (selectedDate: DateTime, friendlyName?: string) => {
+    if (selectedDate) {
+      if (isStart)
+        dispatch({
+          type: 'set_relative_start_date',
+          payload: { startDate: selectedDate, friendlyStartDate: friendlyName },
+        });
+      else
+        dispatch({ type: 'set_relative_end_date', payload: { endDate: selectedDate, friendlyEndDate: friendlyName } });
+    }
+  };
+
+  return (
+    <>
+      <RelativePicker id={`${isStart ? 'start' : 'end'}`} onChange={handleOnChange} />
+      <Divider fullWidth />
+      <GenericTextField
+        hasDescription={false}
+        hasError={false}
+        name={`date-preview-${isStart}`}
+        id={`date-preview-${isStart}`}
+        onChange={() => {}}
+        readOnly={true}
+        prefix={isStart ? 'Start date' : 'End date'}
+        value={
+          isStart
+            ? state.start.toFormat('LLL d, yyyy @ HH:mm:ss.SSS')
+            : state.end.toFormat('LLL d, yyyy @ HH:mm:ss.SSS')
+        }
+      />
+    </>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/DateSelector/index.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { Tabs } from '../../../../../components';
+import { useDateRangePickerDispatchContext, useDateRangePickerContext } from '../Context';
+import { styled } from '../../../../../styled';
+import { Absolute } from './Absolute';
+import { Relative } from './Relative';
+
+const Wrapper = styled.div`
+  width: 400px;
+  padding: ${({ theme }) => `${theme.spacing[1]} ${theme.spacing[1]} 0 ${theme.spacing[1]}`};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface DateSelectorProps {
+  isStart: boolean;
+}
+
+export const DateSelector: FC<DateSelectorProps> = ({ isStart }) => {
+  const dispatch = useDateRangePickerDispatchContext();
+  const state = useDateRangePickerContext();
+
+  if (!dispatch || !state) {
+    throw new Error(
+      'useDateRangePickerDispatchContext and useDateRangePickerContext must be used within a DateRangePickerProvider',
+    );
+  }
+
+  return (
+    <Tabs defaultValue="relative">
+      <Tabs.List>
+        <Tabs.Trigger value="absolute">Absolute</Tabs.Trigger>
+        <Tabs.Trigger value="relative">Relative</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="absolute">
+        <Wrapper>
+          <Absolute isStart={isStart} />
+        </Wrapper>
+      </Tabs.Content>
+      <Tabs.Content value="relative">
+        <Wrapper>
+          <Relative isStart={isStart} />
+        </Wrapper>
+      </Tabs.Content>
+    </Tabs>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/Generic.tsx

@@ -0,0 +1,167 @@
+import { FC, useEffect, useReducer, useState } from 'react';
+import { DateTime } from 'luxon';
+import {
+  AiOutlineCalendar as CalendarIcon,
+  AiOutlineDown as DownIcon,
+  AiOutlineArrowRight as ArrowRightIcon,
+} from 'react-icons/ai';
+import { Popover } from '../../../../components';
+import { QuickSelect } from './QuickSelect';
+import { Tense, Unit } from '../types';
+import { DateRangePickerContainer, QuickSelectContainer, ItemContainer } from './style';
+import { DateSelector } from './DateSelector';
+import { DateRangePickerDispatchContext, DateRangePickerContext, reducer } from './Context';
+import { useTheme } from '../../../../hooks';
+import { GenericInputProps } from '../../InputProps';
+
+export type DateRange = { start: DateTime<true>; end: DateTime<true> };
+
+export interface DateRangePickerProps {
+  defaultValue?: DateRange;
+  readOnly?: boolean;
+  disabled?: boolean;
+  id: string;
+}
+
+export type GenericDateRangePickerProps = GenericInputProps<string, HTMLInputElement> & DateRangePickerProps;
+export const GenericDateRangePicker: FC<GenericDateRangePickerProps> = ({
+  readOnly = false,
+  disabled = false,
+  id,
+  onChange,
+  defaultValue = {
+    start: DateTime.local().startOf('day'),
+    end: DateTime.local().endOf('day'),
+  },
+}) => {
+  const [state, dispatch] = useReducer(reducer, {
+    quickSelect: {
+      show: false,
+      tense: Tense.Last,
+      step: 15,
+      unit: Unit.Minutes,
+    },
+    showStartDate: false,
+    showEndDate: false,
+    start: defaultValue.start,
+    end: defaultValue.end,
+    friendlyRange: undefined,
+    disabledOrReadOnly: disabled || readOnly,
+  });
+
+  useEffect(() => {
+    if (disabled || readOnly) {
+      dispatch({ type: 'toggle_disable_or_readonly', payload: { disabledOrReadOnly: true } });
+    } else {
+      dispatch({ type: 'toggle_disable_or_readonly', payload: { disabledOrReadOnly: false } });
+    }
+  }, [disabled, readOnly]);
+
+  const theme = useTheme();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const iconColor = disabled ? theme.colors.backgroundAccent : theme.colors.white;
+
+  useEffect(() => {
+    if (state.start > state.end) {
+      setHasError(true);
+    } else {
+      setHasError(false);
+    }
+
+    if (onChange) {
+      const event = {
+        target: { value: { start: state.start.toISO(), end: state.end.toISO() }, name },
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      } as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+    }
+  }, [state.start, state.end]);
+
+  return (
+    <DateRangePickerContext.Provider value={state}>
+      <DateRangePickerDispatchContext.Provider value={dispatch}>
+        <DateRangePickerContainer
+          hasError={hasError}
+          isOpen={state.quickSelect.show || state.showStartDate || state.showEndDate}
+        >
+          <Popover
+            open={state.quickSelect.show}
+            onOpenChange={(open) =>
+              dispatch({ type: 'toggle_quick_select_popover', payload: { toggleQuickSelect: open } })
+            }
+          >
+            <Popover.Trigger asChild>
+              <QuickSelectContainer
+                readOnly={readOnly}
+                disabled={disabled}
+                onClick={() =>
+                  dispatch({
+                    type: 'toggle_quick_select_popover',
+                    payload: { toggleQuickSelect: !state.quickSelect.show },
+                  })
+                }
+              >
+                <CalendarIcon fill={iconColor} size={18} />
+                <DownIcon fill={iconColor} size={18} />
+              </QuickSelectContainer>
+            </Popover.Trigger>
+            <Popover.Content>
+              <QuickSelect id={`quick-select-${id}`} />
+            </Popover.Content>
+          </Popover>
+          <Popover
+            open={state.showStartDate}
+            onOpenChange={(open) => {
+              dispatch({ type: 'toggle_start_date_popover', payload: { toggleStartDate: open } });
+            }}
+          >
+            <Popover.Trigger asChild>
+              <ItemContainer
+                disabled={disabled}
+                readOnly={readOnly}
+                onClick={() => {
+                  dispatch({ type: 'toggle_start_date_popover', payload: { toggleStartDate: !state.showStartDate } });
+                }}
+              >
+                {state.friendlyStartDate ??
+                  state.friendlyRange ??
+                  // e.g. Aug 2, 2023 @ 00:00:00.000
+                  state.start.toFormat('LLL d, yyyy @ HH:mm:ss.SSS')}
+              </ItemContainer>
+            </Popover.Trigger>
+            <Popover.Content>
+              <DateSelector isStart />
+            </Popover.Content>
+          </Popover>
+          {!state.friendlyRange && (
+            <>
+              <ArrowRightIcon fill={iconColor} size={18} style={{ marginLeft: '10px', marginRight: '10px' }} />
+              <Popover
+                open={state.showEndDate}
+                onOpenChange={(open) => {
+                  dispatch({ type: 'toggle_end_date_popover', payload: { toggleEndDate: open } });
+                }}
+              >
+                <Popover.Trigger asChild>
+                  <ItemContainer
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    onClick={() => {
+                      dispatch({ type: 'toggle_end_date_popover', payload: { toggleEndDate: !state.showEndDate } });
+                    }}
+                  >
+                    {state.friendlyEndDate ?? state.end.toFormat('LLL d, yyyy @ HH:mm:ss.SSS')}
+                  </ItemContainer>
+                </Popover.Trigger>
+                <Popover.Content>
+                  <DateSelector isStart={false} />
+                </Popover.Content>
+              </Popover>
+            </>
+          )}
+        </DateRangePickerContainer>
+      </DateRangePickerDispatchContext.Provider>
+    </DateRangePickerContext.Provider>
+  );
+};