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

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

@@ -0,0 +1,170 @@
+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';
+import { Tense, Unit } from '../../types';
+
+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
+              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
+              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">Apply</Button>
+        </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,34 @@
+import { shade } from 'polished';
+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 ? shade(0.5, theme.colors.primary) : '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 ? shade(0.5, theme.colors.primary) : theme.colors.background};
+  }
+`;

package/src/components/inputs/Date/types.ts

@@ -0,0 +1,14 @@
+export enum Tense {
+  Last = 'Last',
+  Next = 'Next',
+}
+
+export enum Unit {
+  Seconds = 'Seconds',
+  Minutes = 'Minutes',
+  Hours = 'Hours',
+  Days = 'Days',
+  Weeks = 'Weeks',
+  Months = 'Months',
+  Years = 'Years',
+}

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,57 @@
+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';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+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>>({
+    resolver: zodResolver(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>
+    </>
+  );
+};

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

@@ -0,0 +1,197 @@
+import { SelectField, TextField } from '..';
+import { useForm, SubmitHandler, useFieldArray } from 'react-hook-form';
+import { z } from 'zod';
+import { MouseEvent, useState, forwardRef, useEffect } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DurationContainer, FieldContainer, InnerContent, ButtonContainer } from './style';
+import { Button, IconButton, Popover, Tooltip } from '../../../components';
+import { Duration } from 'luxon';
+import { GenericInputPropsFunctionHandlers } from '../InputProps';
+import {
+  AiOutlineDelete as RemoveIcon,
+  AiOutlinePlus as AddIcon,
+  AiOutlineClose as ResetIcon,
+  AiOutlineDown as ArrowIcon,
+} from 'react-icons/ai';
+
+const durationObjectToUnitAndValue = (millis: number): { unit: LuxonUnit; value: number }[] => {
+  // fallback, otherwise there is is no option to set a new duration.
+  if (millis === 0) {
+    return [{ unit: 'milliseconds', value: 0 }];
+  }
+
+  const obj = Duration.fromMillis(millis).rescale().toObject();
+  return Object.entries(obj).map(([unit, value]) => {
+    return { unit: unit as LuxonUnit, value: value || 0 };
+  });
+};
+
+export interface DurationProps {
+  placeholder?: string;
+  canClear?: boolean;
+}
+
+type LuxonUnit = 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+const luxonUnits = ['milliseconds', 'seconds', 'minutes', 'hours', 'days', 'weeks', 'months', 'years'] as const;
+
+const validationSchema = z.object({
+  durations: z.array(
+    z.object({
+      value: z.number().positive(),
+      unit: z.enum(luxonUnits), // Use updated units array
+    }),
+  ),
+});
+
+export type GenericDurationFieldProps = DurationProps & GenericInputPropsFunctionHandlers<number, HTMLDivElement>;
+export const GenericDurationField = forwardRef<HTMLDivElement, GenericDurationFieldProps>(function GenericDurationField(
+  {
+    onChange,
+    hasError,
+    value,
+    name,
+    disabled = false,
+    readOnly = false,
+    canClear = false,
+    placeholder = 'Select a duration',
+    onBlur,
+    onFocus,
+  },
+  ref,
+) {
+  const { control, handleSubmit, setValue } = useForm<z.infer<typeof validationSchema>>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+    defaultValues: {
+      durations: value || value === 0 ? durationObjectToUnitAndValue(value) : [],
+    },
+  });
+
+  const { fields, remove: removeField, append: addField } = useFieldArray({ control, name: 'durations' });
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (open && value == undefined && fields.length === 0) {
+      addField({ value: 0, unit: 'seconds' });
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (value || value == 0) {
+      setValue('durations', durationObjectToUnitAndValue(value));
+    }
+  }, [value]);
+
+  const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = ({ durations }) => {
+    const totalDuration = durations.reduce((accumulator, { value, unit }) => {
+      const duration = Duration.fromObject({ [unit]: value });
+      return accumulator.plus(duration);
+    }, Duration.fromMillis(0));
+    onChange(totalDuration.toMillis());
+    setOpen(false);
+  };
+
+  const handleReset = (e: MouseEvent) => {
+    e.stopPropagation();
+    onChange(undefined as unknown as number);
+  };
+
+  const formId = `${name}-form`;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <DurationContainer
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-disabled={disabled}
+          aria-readonly={readOnly}
+          ref={ref}
+          hasError={hasError}
+          aria-labelledby={name}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={() => !readOnly && !disabled && setOpen(!open)}
+        >
+          {value ? Duration.fromMillis(value).rescale().toHuman({ listStyle: 'long' }) : placeholder}
+
+          {canClear && !readOnly && !disabled && value && !open ? (
+            <IconButton icon={<ResetIcon />} ariaLabel="Reset duration" onClick={handleReset} />
+          ) : (
+            <ArrowIcon size={16} />
+          )}
+        </DurationContainer>
+      </Popover.Trigger>
+      <Popover.Content>
+        <InnerContent>
+          <form id={formId}>
+            <h2>Select a duration</h2>
+            {fields.map((field, index) => (
+              <FieldContainer hasMultipleFields={fields.length > 1} key={`${name}-${field.id}-${index}`} id={field.id}>
+                <TextField
+                  key={`${name}-${index}-value`}
+                  name={`durations.${index}.value`}
+                  control={control}
+                  type="number"
+                />
+                <SelectField
+                  key={`${name}-${index}-unit`}
+                  control={control}
+                  name={`durations.${index}.unit`}
+                  multiple={false}
+                  render={(selectedItems) => {
+                    if (selectedItems.length === 0) {
+                      return <div>Select...</div>;
+                    }
+                    return <div>{selectedItems[0].label}</div>;
+                  }}
+                >
+                  <SelectField.OptionGroup key={`${name}-${index}-option-group`}>
+                    {luxonUnits.map((unit) => (
+                      <SelectField.Option key={`${name}-${index}-option-${unit}`} value={unit} label={unit}>
+                        {unit}
+                      </SelectField.Option>
+                    ))}
+                  </SelectField.OptionGroup>
+                </SelectField>
+                {fields.length !== 1 && (
+                  <Tooltip key={`${name}-${index}-remove-field`}>
+                    <Tooltip.Trigger>
+                      <IconButton ariaLabel="Remove field" icon={<RemoveIcon />} onClick={() => removeField(index)} />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Remove field</Tooltip.Content>
+                  </Tooltip>
+                )}
+                {index === fields.length - 1 && fields.length < luxonUnits.length && (
+                  <Tooltip key={`${name}-${index}-add-field`}>
+                    <Tooltip.Trigger>
+                      <IconButton
+                        icon={<AddIcon />}
+                        ariaLabel="Add field"
+                        onClick={() => addField({ value: 0, unit: 'seconds' })}
+                      />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Add field</Tooltip.Content>
+                  </Tooltip>
+                )}
+              </FieldContainer>
+            ))}
+            <ButtonContainer>
+              <Button
+                form={formId}
+                type="submit"
+                fullWidth
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleSubmit(onSubmit)();
+                }}
+              >
+                Apply
+              </Button>
+            </ButtonContainer>
+          </form>
+        </InnerContent>
+      </Popover.Content>
+    </Popover>
+  );
+});

package/src/components/inputs/DurationField/__tests__/Generic.test.tsx

@@ -0,0 +1,12 @@
+import { Duration } from 'luxon';
+import { describe, it, expect } from 'vitest';
+
+describe('DurationField - Luxon year conversion bug', () => {
+  it('should correctly round-trip 20 years through milliseconds without rescale drift', () => {
+    const originalYears = 20;
+    const millis = Duration.fromObject({ years: originalYears }).toMillis();
+    const rescaled = Duration.fromMillis(millis).rescale().toObject();
+
+    expect(rescaled).toEqual({ years: originalYears });
+  });
+});

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

@@ -0,0 +1,5 @@
+export { GenericDurationField } from './Generic';
+export type { GenericDurationFieldProps } from './Generic';
+
+export { ControlledDurationField } from './Controlled';
+export type { ControlledDurationFieldProps } from './Controlled';