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

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

@@ -0,0 +1,254 @@
+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';
+import { Tense, Unit } from '../../types';
+
+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
+            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
+            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">Apply</Button>
+      </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/style.ts

@@ -0,0 +1,65 @@
+import { styled } from '../../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const DateRangePickerContainer = 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; disabled: boolean }>`
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) return 'not-allowed';
+    if (readOnly) return 'default';
+    return 'pointer';
+  }};
+  padding: ${({ theme }) => `${theme.spacing['0_75']}`};
+  color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAccent : theme.colors.text)};
+`;
+
+export const QuickSelectContainer = styled.div<{ readOnly: boolean; disabled: boolean }>`
+  border-radius: ${({ theme }) => `${theme.borderRadius.medium} 0 0 ${theme.borderRadius.medium};`};
+  height: 100%;
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) return 'not-allowed';
+    if (readOnly) return 'default';
+    return '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;
+`;

package/src/components/inputs/Date/subcomponents/Calendar/index.tsx

@@ -0,0 +1,150 @@
+import { DateTime, Interval } from 'luxon';
+import { FC, useCallback, useState } from 'react';
+import { Header, Wrapper, DaysGrid, DayButton, DayWrapper, DayOfWeekGrid } from './style';
+import { IconButton, Tooltip } from '../../../../../components';
+import {
+  MdOutlineKeyboardArrowRight as ChevronRightIcon,
+  MdOutlineKeyboardArrowLeft as ChevronLeftIcon,
+  MdOutlineKeyboardDoubleArrowLeft as DoubleChevronLeftIcon,
+  MdOutlineKeyboardDoubleArrowRight as DoubleChevronRightIcon,
+} from 'react-icons/md';
+
+interface CalendarProps {
+  onDateClick: (date: DateTime) => void;
+  selectedDate: DateTime;
+  id: string;
+  allowedPastDates?: boolean;
+  allowedFutureDates?: boolean;
+  customDateFilter?: (date: DateTime) => boolean;
+}
+
+export const Calendar: FC<CalendarProps> = ({
+  onDateClick,
+  selectedDate,
+  id,
+  allowedPastDates = true,
+  allowedFutureDates = true,
+  customDateFilter,
+}) => {
+  const today = DateTime.local().startOf('day');
+  const [currentMonth, setCurrentMonth] = useState<DateTime>(selectedDate.startOf('month'));
+
+  // days of month
+  const days = Interval.fromDateTimes(currentMonth, currentMonth.endOf('month'))
+    .splitBy({ days: 1 })
+    .map((day) => day.start!);
+
+  const isDateSelectable = useCallback(
+    (date: DateTime) => {
+      // If past dates are allowed, then all dates up to today are acceptable.
+      // If not, then only dates from today onwards are acceptable.
+      const isPastAllowed = allowedPastDates ? true : date >= today;
+
+      // If future dates are allowed, then all dates from today onwards are acceptable.
+      // If not, then only dates up to today are acceptable.
+      const isFutureAllowed = allowedFutureDates ? true : date <= today;
+
+      // Check if the date passes the custom filter, if provided.
+      const isCustomFilterPassed = customDateFilter ? customDateFilter(date) : true;
+
+      return isPastAllowed && isFutureAllowed && isCustomFilterPassed;
+    },
+    [allowedPastDates, allowedFutureDates, customDateFilter, today],
+  );
+
+  const previousMonth = useCallback(() => {
+    const firstDayPreviousMonth = currentMonth.minus({ months: 1 });
+    setCurrentMonth(firstDayPreviousMonth);
+  }, [currentMonth]);
+
+  const nextMonth = useCallback(() => {
+    const firstDayNextMonth = currentMonth.plus({ months: 1 });
+    setCurrentMonth(firstDayNextMonth);
+  }, [currentMonth]);
+
+  const nextYear = useCallback(() => {
+    const firstDayNextMonth = currentMonth.plus({ year: 1 });
+    setCurrentMonth(firstDayNextMonth);
+  }, [currentMonth]);
+
+  const previousYear = useCallback(() => {
+    const firstDayPreviousMonth = currentMonth.minus({ year: 1 });
+    setCurrentMonth(firstDayPreviousMonth);
+  }, [currentMonth]);
+
+  return (
+    <Wrapper>
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
+        <Tooltip>
+          <Tooltip.Trigger>
+            <IconButton onClick={previousYear} icon={<DoubleChevronLeftIcon />} ariaLabel="Previous year" />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Previous year</Tooltip.Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Tooltip.Trigger>
+            <IconButton onClick={previousMonth} icon={<ChevronLeftIcon />} ariaLabel="Previous month" />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Previous month</Tooltip.Content>
+        </Tooltip>
+
+        <h2 style={{ flex: '1 1 auto', textAlign: 'center' }}>{currentMonth.toFormat('MMMM yyyy')}</h2>
+
+        <Tooltip>
+          <Tooltip.Trigger>
+            <IconButton onClick={nextMonth} icon={<ChevronRightIcon />} ariaLabel="Next month" />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Next month</Tooltip.Content>
+        </Tooltip>
+        <Tooltip>
+          <Tooltip.Trigger>
+            <IconButton onClick={nextYear} icon={<DoubleChevronRightIcon />} ariaLabel="Next year" />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Next year</Tooltip.Content>
+        </Tooltip>
+      </Header>
+      <DayOfWeekGrid>
+        <div>M</div>
+        <div>T</div>
+        <div>W</div>
+        <div>T</div>
+        <div>F</div>
+        <div>S</div>
+        <div>S</div>
+      </DayOfWeekGrid>
+      <DaysGrid>
+        {days.map((day, dayIdx) => {
+          const isSelectable = isDateSelectable(day);
+          return (
+            <DayWrapper key={`${id}-${day?.toString()}`} isFirstDay={dayIdx === 0} dayNumber={day.weekday}>
+              <DayButton
+                key={`${id}-day-button`}
+                type="button"
+                disabled={!isSelectable}
+                onClick={() => {
+                  if (isSelectable) {
+                    const newDate = day.set({
+                      hour: selectedDate.hour,
+                      minute: selectedDate.minute,
+                      second: selectedDate.second,
+                      millisecond: selectedDate.millisecond,
+                    });
+                    onDateClick(newDate);
+                  }
+                }}
+                isSelected={day.hasSame(selectedDate, 'day') ?? false}
+                isToday={day.hasSame(today, 'day') ?? false}
+                isSameMonth={day.hasSame(currentMonth, 'month') ?? false}
+              >
+                <time key={`${id}-time`} dateTime={day?.toFormat('yyyy-MM-dd')}>
+                  {day?.toFormat('d')}
+                </time>
+              </DayButton>
+            </DayWrapper>
+          );
+        })}
+      </DaysGrid>
+    </Wrapper>
+  );
+};

package/src/components/inputs/Date/subcomponents/Calendar/style.ts

@@ -0,0 +1,61 @@
+import { shade } from 'polished';
+import { styled } from '../../../../../styled';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  min-width: 300px;
+  padding: ${({ theme }) => `0 ${theme.spacing[2]}`};
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const DayButton = styled.button<{ isSelected: boolean; isToday: boolean; isSameMonth?: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  height: 2rem;
+  width: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: ${({ theme, isSelected }) => (isSelected ? shade(0.5, theme.colors.primary) : 'transparent')};
+  border: 1px solid ${({ theme, isSelected }) => (isSelected ? theme.colors.primary : 'transparent')};
+  color: white;
+  padding: ${({ theme }) => theme.spacing['1_5']};
+  margin: 0;
+
+  &:hover {
+    background-color: ${({ theme, isSelected }) =>
+      isSelected ? shade(0.5, theme.colors.primary) : theme.colors.secondary};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.textAlt};
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+`;
+
+export const DayOfWeekGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  text-align: center;
+  margin-top: ${({ theme }) => theme.spacing['1_5']};
+  color: ${({ theme }) => theme.colors.textAlt};
+`;
+
+export const DaysGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  line-height: 1.5;
+`;
+
+export const DayWrapper = styled.div<{ dayNumber: number; isFirstDay: boolean }>`
+  ${({ dayNumber, isFirstDay }) => isFirstDay && `grid-column-start: ${dayNumber};`}
+  padding: ${({ theme }) => `${theme.spacing['0_75']}`};
+`;