@takaro/lib-components 0.0.1

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/QuickSelect/index.tsx

@@ -0,0 +1,270 @@
+import { Button, Divider, SelectField, TextField } from '../../../../../components';
+import { FC, useMemo } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useDateRangePickerDispatchContext, useDateRangePickerContext } from '../Context';
+import { DateTime, DateTimeUnit } from 'luxon';
+import { Container, StyledForm, InputsContainer, CommonlyUsedGrid } from './style';
+
+export enum Tense {
+  Last = 'Last',
+  Next = 'Next',
+}
+
+export enum Unit {
+  Seconds = 'Seconds',
+  Minutes = 'Minutes',
+  Hours = 'Hours',
+  Days = 'Days',
+  Weeks = 'Weeks',
+  Months = 'Months',
+  Years = 'Years',
+}
+
+interface FormInputs {
+  tense: string;
+  step: number;
+  unit: string;
+}
+
+interface QuickSelectProps {
+  id: string;
+}
+
+export const QuickSelect: FC<QuickSelectProps> = ({ id }) => {
+  const state = useDateRangePickerContext();
+  const dispatch = useDateRangePickerDispatchContext();
+
+  if (!dispatch) {
+    throw new Error('useDateRangePickerDispatchContext must be used within a DateRangePickerProvider');
+  }
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        tense: z.nativeEnum(Tense),
+        step: z.number().positive(),
+        unit: z.nativeEnum(Unit),
+      }),
+    []
+  );
+
+  const { control, handleSubmit } = useForm<FormInputs>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+    defaultValues: {
+      step: state?.quickSelect.step,
+      tense: state?.quickSelect.tense,
+      unit: state?.quickSelect.unit,
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormInputs> = ({ tense, step, unit }) => {
+    const baseDate =
+      tense === Tense.Last ? DateTime.local() : DateTime.local().startOf(unit.toLowerCase() as DateTimeUnit);
+    const action = tense === Tense.Last ? 'minus' : 'plus';
+    const range = { [unit.toLowerCase()]: step };
+    const otherDate = baseDate[action](range);
+
+    const startDate = tense === Tense.Last ? otherDate : baseDate;
+    const endDate = tense === Tense.Last ? baseDate : otherDate;
+    const friendlyRangeName = `${tense} ${step} ${unit.toLowerCase()}`;
+
+    dispatch({
+      type: 'set_quick_select',
+      payload: {
+        quickSelect: {
+          show: false,
+          tense: tense as Tense,
+          step,
+          unit: unit as Unit,
+        },
+      },
+    });
+
+    dispatch({
+      type: 'set_range',
+      payload: {
+        startDate,
+        endDate,
+        friendlyRange: friendlyRangeName,
+      },
+    });
+  };
+
+  return (
+    <Container>
+      <h4>Quick select</h4>
+      <StyledForm onSubmit={handleSubmit(onSubmit)}>
+        <InputsContainer>
+          <SelectField
+            inPortal
+            control={control}
+            name="tense"
+            render={(selectedItems) => (
+              <div>
+                {selectedItems.length > 0 ? Object.values(Tense).find((v) => v === selectedItems[0].value) : Tense.Last}
+              </div>
+            )}
+          >
+            <SelectField.OptionGroup>
+              {Object.values(Tense).map((val: string) => (
+                <SelectField.Option key={`${val}-${id}`} value={val} label={val}>
+                  <span>{val}</span>
+                </SelectField.Option>
+              ))}
+            </SelectField.OptionGroup>
+          </SelectField>
+
+          <TextField control={control} type="number" name="step" />
+
+          <SelectField
+            inPortal
+            control={control}
+            name="unit"
+            render={(selectedItems) => (
+              <div>
+                {selectedItems.length > 0
+                  ? Object.values(Unit).find((v) => v === selectedItems[0].value)
+                  : Unit.Minutes}
+              </div>
+            )}
+          >
+            <SelectField.OptionGroup>
+              {Object.values(Unit).map((val: string) => (
+                <SelectField.Option key={`${val}-${id}`} value={val} label={val}>
+                  <span>{val}</span>
+                </SelectField.Option>
+              ))}
+            </SelectField.OptionGroup>
+          </SelectField>
+        </InputsContainer>
+        <Button type="submit" text="Apply" />
+      </StyledForm>
+
+      <Divider fullWidth />
+      <h4>Commonly used</h4>
+      <CommonlyUsedGrid>
+        <li
+          onClick={() =>
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().startOf('day'),
+                endDate: DateTime.local().endOf('day'),
+                friendlyRange: 'Today',
+              },
+            })
+          }
+        >
+          Today
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().startOf('week'),
+                endDate: DateTime.local().endOf('week'),
+                friendlyRange: 'This week',
+              },
+            });
+          }}
+        >
+          This week
+        </li>
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ minutes: 15 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last 15 minutes',
+              },
+            });
+          }}
+        >
+          Last 15 minutes
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ minutes: 30 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last 30 minutes',
+              },
+            });
+          }}
+        >
+          Last 30 minutes
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ hours: 1 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last hour',
+              },
+            });
+          }}
+        >
+          Last 1 hour
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ hours: 24 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last 24 hours',
+              },
+            });
+          }}
+        >
+          Last 24 hours
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ days: 7 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last 7 days',
+              },
+            });
+          }}
+        >
+          Last 7 days
+        </li>
+
+        <li
+          onClick={() => {
+            dispatch({
+              type: 'set_range',
+              payload: {
+                startDate: DateTime.local().minus({ days: 30 }),
+                endDate: DateTime.local(),
+                friendlyRange: 'Last 30 days',
+              },
+            });
+          }}
+        >
+          Last 30 days
+        </li>
+      </CommonlyUsedGrid>
+    </Container>
+  );
+};

package/src/components/inputs/Date/DateRangePicker/QuickSelect/style.ts

@@ -0,0 +1,40 @@
+import { styled } from '../../../../../styled';
+
+export const Container = styled.div`
+  padding: ${({ theme }) => theme.spacing[2]};
+  min-width: 400px;
+  h4 {
+    margin-bottom: ${({ theme }) => theme.spacing['1']};
+  }
+`;
+
+export const CommonlyUsedGrid = styled.ul`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(5, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  gap: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing[1]}`};
+  padding: 0 ${({ theme }) => theme.spacing[1]};
+
+  li {
+    text-align: left;
+    cursor: pointer;
+  }
+`;
+
+export const StyledForm = styled.form`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing[1]};
+`;
+
+export const InputsContainer = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.5fr 0.5fr 1fr;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing[1]};
+  div {
+    width: 100%;
+    margin-bottom: 0;
+  }
+`;

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

@@ -0,0 +1,134 @@
+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, Tense, Unit } from './QuickSelect';
+import { Container, QuickSelectContainer, ItemContainer } from './style';
+import { DateSelector } from './DateSelector';
+import { DateRangePickerDispatchContext, DateRangePickerContext, reducer } from './Context';
+
+export interface DateRangePickerProps {
+  defaultValue?: { start: DateTime; end: DateTime };
+  readOnly?: boolean;
+  id: string;
+  onChange: (start: DateTime, end: DateTime) => void;
+}
+
+export const DateRangePicker: FC<DateRangePickerProps> = ({
+  readOnly = 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,
+  });
+
+  const [hasError, setHasError] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (state.start > state.end) {
+      setHasError(true);
+    } else {
+      setHasError(false);
+    }
+
+    onChange(state.start, state.end);
+  }, [state.start, state.end]);
+
+  return (
+    <DateRangePickerContext.Provider value={state}>
+      <DateRangePickerDispatchContext.Provider value={dispatch}>
+        <Container 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}
+                onClick={() =>
+                  dispatch({
+                    type: 'toggle_quick_select_popover',
+                    payload: { toggleQuickSelect: !state.quickSelect.show },
+                  })
+                }
+              >
+                <CalendarIcon size={18} />
+                <DownIcon 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
+                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 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
+                    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>
+            </>
+          )}
+        </Container>
+      </DateRangePickerDispatchContext.Provider>
+    </DateRangePickerContext.Provider>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { styled } from '../../../../styled';
+
+export const Container = styled.div<{
+  isOpen: boolean;
+  hasError: boolean;
+}>`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justyfy-content: flex-start;
+  text-align: left;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  width: fit-content;
+  font-family: inherit;
+  outline: 0;
+  font-weight: 500;
+  text-transform: capitalize;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 0.1rem solid
+    ${({ theme, isOpen, hasError }) => {
+      if (hasError) return theme.colors.error;
+      return isOpen ? theme.colors.primary : theme.colors.backgroundAccent;
+    }};
+
+  &:focus {
+    border-color: ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+
+  flex-shrink: 0;
+`;
+
+export const ItemContainer = styled.div<{ readOnly: boolean }>`
+  cursor: ${({ readOnly }) => (readOnly ? 'default' : 'pointer')};
+  padding: ${({ theme }) => `${theme.spacing['0_75']}`};
+`;
+
+export const QuickSelectContainer = styled.div<{ readOnly: boolean }>`
+  border-radius: ${({ theme }) => `${theme.borderRadius.medium} 0 0 ${theme.borderRadius.medium};`};
+  height: 100%;
+  cursor: ${({ readOnly }) => (readOnly ? 'default' : 'pointer')};
+  gap: ${({ theme }) => theme.spacing['0_25']};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `0 ${theme.spacing['0_75']}`};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-right: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  flex-shrink: 0;
+`;