@takaro/lib-components 0.0.1

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,59 @@
+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 ? theme.colors.primaryShade : '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 ? theme.colors.primaryShade : 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']}`};
+`;

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

@@ -0,0 +1,186 @@
+import { FC, useMemo } from 'react';
+import { Button, Divider, SelectField, TextField } from '../../../../../components';
+import { useForm } from 'react-hook-form';
+import { DateTime } from 'luxon';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Container, StyledForm, InputsContainer, QuickSelectGrid, TenseGrid } from './style';
+
+export type timeDirection = 'past' | 'future' | 'pastAndFuture';
+
+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 RelativePickerProps {
+  onChange: (value: DateTime, friendlyName?: string) => void;
+  timeDirection?: timeDirection;
+  id: string;
+}
+
+interface QuickSelectOption {
+  unit: Unit;
+  step: number;
+}
+
+const quickSelectOptions: QuickSelectOption[] = [
+  { unit: Unit.Minutes, step: 5 },
+  { unit: Unit.Minutes, step: 15 },
+  { unit: Unit.Minutes, step: 30 },
+  { unit: Unit.Hours, step: 1 },
+  { unit: Unit.Days, step: 1 },
+  { unit: Unit.Days, step: 7 },
+  { unit: Unit.Days, step: 30 },
+];
+
+export const RelativePicker: FC<RelativePickerProps> = ({ onChange, id, timeDirection = 'pastAndFuture' }) => {
+  interface IFormInputs {
+    step: number;
+    tense: Tense;
+    unit: Unit;
+  }
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        tense: z.nativeEnum(Tense),
+        step: z.number().positive(),
+        unit: z.nativeEnum(Unit),
+      }),
+    []
+  );
+
+  const defaultTense = () => {
+    switch (timeDirection) {
+      case 'past':
+        return Tense.Last;
+      case 'future':
+        return Tense.Next;
+      case 'pastAndFuture':
+        return Tense.Last;
+    }
+  };
+
+  const { control, handleSubmit } = useForm<IFormInputs>({
+    mode: 'onSubmit',
+    defaultValues: {
+      tense: defaultTense(),
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  const handleChange = ({ tense, step, unit }: IFormInputs) => {
+    const isPast = tense === Tense.Last;
+
+    const friendlyTense = tense === Tense.Next ? 'from now' : 'ago';
+    const friendlyRangeName = `${step} ${unit.toLowerCase()} ${friendlyTense}`;
+
+    let selectedDate = DateTime.now();
+    selectedDate = isPast ? selectedDate.minus({ [unit]: step }) : selectedDate.plus({ [unit]: step });
+
+    onChange(selectedDate, friendlyRangeName);
+  };
+
+  return (
+    <>
+      <Container>
+        {/* Relative manual selection */}
+        <StyledForm onSubmit={handleSubmit(handleChange)}>
+          <InputsContainer>
+            <SelectField
+              inPortal
+              control={control}
+              readOnly={timeDirection !== 'pastAndFuture'}
+              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={`relative-tense-${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={`relative-unit-${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>
+        <TenseGrid>
+          {timeDirection !== 'future' && (
+            <div>
+              <h5>Past</h5>
+              <QuickSelectGrid>
+                {quickSelectOptions.map(({ unit, step }) => (
+                  <li
+                    key={`quick-select-${unit}-${step}-${id}-last`}
+                    onClick={() => handleChange({ unit, step, tense: Tense.Last })}
+                  >
+                    {step} {unit.toLowerCase()} ago
+                  </li>
+                ))}
+              </QuickSelectGrid>
+            </div>
+          )}
+
+          {timeDirection !== 'past' && (
+            <div>
+              <h5>Future</h5>
+              <QuickSelectGrid>
+                {quickSelectOptions.map(({ unit, step }) => (
+                  <li
+                    key={`quick-select-${unit}-${step}-${id}-last`}
+                    onClick={() => handleChange({ unit, step, tense: Tense.Next })}
+                  >
+                    {step} {unit.toLowerCase()} from now
+                  </li>
+                ))}
+              </QuickSelectGrid>
+            </div>
+          )}
+        </TenseGrid>
+      </Container>
+      {/* Quick select*/}
+    </>
+  );
+};

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

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

package/src/components/inputs/Date/subcomponents/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { TimePicker, TimePickerProps } from '.';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Inputs/TimePicker',
+  component: TimePicker,
+  args: {
+    readOnly: false,
+    hasDescription: false,
+    hasError: false,
+  },
+} as Meta<TimePickerProps>;
+
+export const Default: StoryFn<TimePickerProps> = () => {
+  const [selectedTime, setSelectedTime] = React.useState<DateTime>(DateTime.local().startOf('day'));
+
+  return (
+    <>
+      timepicker should not be used separately, instead use datepicker and select a time format
+      <TimePicker selectedDate={selectedTime} onChange={(newTime) => setSelectedTime(newTime)} />
+    </>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { FC, useLayoutEffect } from 'react';
+import { DateTime } from 'luxon';
+import { List, Item } from './style';
+
+export interface TimePickerProps {
+  onChange: (date: DateTime) => void;
+  selectedDate: DateTime;
+
+  // Interval in minutes between each time slot
+  // e.g. interval = 30 means each slot is 30 minutes apart
+  // resulting in 48 slots
+  interval?: number;
+}
+
+export const TimePicker: FC<TimePickerProps> = ({ onChange, selectedDate, interval = 30 }) => {
+  let date = selectedDate.startOf('day');
+
+  // calculate number of slots
+  const numberOfSlots = Math.floor((24 * 60) / interval);
+
+  // scroll selected time into view using ref
+  useLayoutEffect(() => {}, [selectedDate]);
+
+  return (
+    <List role="listbox">
+      {Array.from({ length: numberOfSlots }).map(() => {
+        const nextTime = date.plus({ minutes: interval });
+        const formattedTime = date.toFormat('HH:mm');
+        const isSelected = date.hasSame(selectedDate, 'hour') && date.hasSame(selectedDate, 'minute');
+        const returnValue = date;
+        date = nextTime;
+        return (
+          <Item role="option" isSelected={isSelected} key={formattedTime} onClick={() => onChange(returnValue)}>
+            {formattedTime}
+          </Item>
+        );
+      })}
+    </List>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { styled } from '../../../../../styled';
+
+export const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  flex-grow: 1;
+  align-items: center;
+  height: 100%;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  max-height: 300px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: ${({ theme }) => `${theme.spacing[1]} ${theme.spacing['0_75']}`};
+  scrollbar-width: thin;
+  scrollbar-color: #69707d80 #0000;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+`;
+
+export const Item = styled.li<{ isSelected: boolean }>`
+  cursor: pointer;
+  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : 'transparent')};
+  border: 1px solid ${({ theme, isSelected }) => (isSelected ? theme.colors.primary : 'transparent')};
+  padding: ${({ theme }) => theme.spacing['0_5']};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+
+  &:hover {
+    background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : theme.colors.background)};
+  }
+`;

package/src/components/inputs/DurationField/Controlled.tsx

@@ -0,0 +1,69 @@
+import { FC, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { DurationProps, GenericDurationField } from './Generic';
+import { Container } from './style';
+import { InputWrapper, Description, ErrorMessage, Label } from '../layout';
+
+export type ControlledDurationFieldProps = DurationProps & ControlledInputProps;
+const defaultsApplier = defaultInputPropsFactory<ControlledDurationFieldProps>(defaultInputProps);
+
+export const ControlledDurationField: FC<ControlledDurationFieldProps> = (props) => {
+  const { name, required, readOnly, disabled, size, label, placeholder, control, hint, description, canClear } =
+    defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(true);
+  };
+  const handleOnFocus = () => {
+    setShowError(false);
+  };
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            text={label}
+            htmlFor={name}
+            error={false}
+            disabled={disabled}
+            required={required}
+            position="top"
+            size="medium"
+            hint={hint}
+          />
+        )}
+
+        <GenericDurationField
+          readOnly={readOnly}
+          size={size}
+          name={name}
+          id={name}
+          ref={field.ref}
+          onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
+          onChange={field.onChange}
+          placeholder={placeholder}
+          hasError={!!error}
+          hasDescription={!!description}
+          disabled={disabled}
+          value={field.value}
+          canClear={canClear}
+        />
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

package/src/components/inputs/DurationField/Duration.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { DurationField, DurationFieldProps } from '../../../components';
+import { z } from 'zod';
+import { StoryFn, Meta } from '@storybook/react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+export default {
+  title: 'Inputs/DurationField',
+  component: DurationField,
+  args: {
+    label: 'Duration',
+    placeholder: 'this is the placeholder',
+    description: 'This is the description',
+    hint: 'this is the hint',
+    disabled: false,
+    readOnly: false,
+    required: false,
+    size: 'medium',
+  },
+} as Meta<DurationFieldProps>;
+
+export const Default: StoryFn<DurationFieldProps> = (args) => {
+  const [result, setResult] = React.useState<number | undefined>(undefined);
+
+  const validationSchema = z.object({
+    duration: z.number().positive(),
+  });
+
+  const { control, handleSubmit } = useForm<z.infer<typeof validationSchema>>();
+  const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = ({ duration }) => {
+    setResult(duration);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DurationField
+          loading={false}
+          control={control}
+          description={args.description}
+          hint={args.hint}
+          label={args.label}
+          name="duration"
+          placeholder={args.placeholder}
+          required={args.required}
+          size={args.size}
+          disabled={args.disabled}
+          readOnly={args.readOnly}
+        />
+      </form>
+      <p>Result: {result ? result : ''}</p>
+    </>
+  );
+};