@takaro/lib-components 0.0.1

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

@@ -0,0 +1,234 @@
+import React from 'react';
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../../styled';
+import { Button, DatePicker, DatePickerProps } from '../../../../components';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DateTime } from 'luxon';
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100vh;
+  width: 50%;
+  margin: 0 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default {
+  title: 'Inputs/DatePicker',
+  component: DatePicker,
+  args: {
+    label: 'date',
+    name: 'date',
+    required: false,
+    description: 'This is a description',
+    popOverPlacement: 'bottom',
+    readOnly: false,
+    allowPastDates: true,
+    allowFutureDates: true,
+    loading: false,
+    timePickerOptions: {
+      interval: 30,
+    },
+    relativePickerOptions: {
+      showFriendlyName: true,
+      timeDirection: 'future',
+    },
+  },
+} as Meta<DatePickerProps>;
+
+const validationSchema = z.object({
+  date: z.string().datetime({ offset: true }),
+});
+type FormFields = { date: string };
+
+export const OnDateSubmit: StoryFn<DatePickerProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <Wrapper>
+      Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label={args.label}
+          name={args.name}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          description={args.description}
+          popOverPlacement={args.popOverPlacement}
+          allowFutureDates={args.allowFutureDates}
+          allowPastDates={args.allowPastDates}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const CustomDateFilter: StoryFn<DatePickerProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <Wrapper>
+      Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'}
+      <strong>Custom datefilter that only allows weekends</strong>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label={args.label}
+          name={args.name}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          description={args.description}
+          popOverPlacement={args.popOverPlacement}
+          customDateFilter={(date) => date.weekday == 6 || date.weekday == 7}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const OnDateAndTimeSubmit: StoryFn<DatePickerProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <Wrapper>
+      Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label={args.label}
+          name={args.name}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          format={DateTime.DATETIME_SHORT}
+          timePickerOptions={args.timePickerOptions}
+          description={args.description}
+          popOverPlacement={args.popOverPlacement}
+          allowPastDates={args.allowPastDates}
+          allowFutureDates={args.allowFutureDates}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const onTimeSubmit: StoryFn<DatePickerProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <Wrapper>
+      Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label={args.label}
+          name={args.name}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          format={DateTime.TIME_SIMPLE}
+          timePickerOptions={args.timePickerOptions}
+          description={args.description}
+          popOverPlacement={args.popOverPlacement}
+          allowPastDates={args.allowPastDates}
+          allowFutureDates={args.allowFutureDates}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const RelativeSubmit: StoryFn<DatePickerProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <Wrapper>
+      Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="relative"
+          control={control}
+          label={args.label}
+          name={args.name}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          format={DateTime.DATETIME_MED_WITH_SECONDS}
+          timePickerOptions={args.timePickerOptions}
+          relativePickerOptions={args.relativePickerOptions}
+          description={args.description}
+          popOverPlacement={args.popOverPlacement}
+          allowPastDates={args.allowPastDates}
+          allowFutureDates={args.allowFutureDates}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,253 @@
+import { FC, useLayoutEffect, useMemo, useState } from 'react';
+import { Button, Popover } from '../../../../components';
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+import { dateFormats, timeFormats } from './formats';
+import { GenericInputProps } from '../../InputProps';
+import { ResultContainer, ContentContainer, InnerContainer, ButtonContainer } from './style';
+import { TimePicker } from '../subcomponents/TimePicker';
+import { Calendar } from '../subcomponents/Calendar';
+import { RelativePicker, timeDirection } from '../subcomponents/RelativePicker';
+import { Placement } from '@floating-ui/react';
+
+interface TimePickerOptions {
+  /// Determines the interval between time options
+  /// Default: 30
+  interval?: number;
+}
+
+interface RelativePickerOptions {
+  /// Determines if the relative picker should be able to show filters to the past, future, or pastAndFuture
+  // Default: pastAndFuture
+  timeDirection?: timeDirection;
+  showFriendlyName?: boolean;
+}
+
+export interface DatePickerProps {
+  /// Determines if the date picker is in absolute or relative mode
+  /// Absolute mode is a calendar and time picker
+  /// Relative mode is a relative picker
+  mode: 'relative' | 'absolute';
+
+  popOverPlacement?: Placement;
+
+  customDateFilter?: (date: DateTime) => boolean;
+
+  /// Allow date selection in the past
+  allowPastDates?: boolean;
+
+  /// Allow date selection in the future
+  allowFutureDates?: boolean;
+
+  /// Determines the format of the selected date/time
+  format?: DateTimeFormatOptions;
+
+  /// Options specific for the time picker
+  timePickerOptions?: TimePickerOptions;
+
+  /// Options specific for the relative picker
+  relativePickerOptions?: RelativePickerOptions;
+
+  /// Placeholder text for the input
+  placeholder?: string;
+}
+
+export type GenericDatePickerProps = GenericInputProps<string, HTMLInputElement> & DatePickerProps;
+
+export const GenericDatePicker: FC<GenericDatePickerProps> = ({
+  value,
+  id,
+  readOnly = false,
+  hasError,
+  onChange,
+  name,
+  onFocus,
+  onBlur,
+  timePickerOptions,
+  relativePickerOptions = { showFriendlyName: true, timeDirection: 'future' },
+  placeholder,
+  popOverPlacement = 'bottom',
+  format = DateTime.DATE_SHORT,
+  allowPastDates = true,
+  allowFutureDates = true,
+  customDateFilter,
+  mode,
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Function to determine if a date is allowed
+  const isDateAllowed = (date: DateTime) => {
+    const isPastAllowed = allowPastDates ? true : date >= DateTime.local().startOf('day');
+    const isFutureAllowed = allowFutureDates ? true : date <= DateTime.local().startOf('day');
+    const isCustomFilterPassed = customDateFilter ? customDateFilter(date) : true;
+    return isPastAllowed && isFutureAllowed && isCustomFilterPassed;
+  };
+
+  // Function to find the first allowed date
+  const findFirstAllowedDate = () => {
+    let dateToCheck = DateTime.local().startOf('day');
+    while (!isDateAllowed(dateToCheck)) {
+      dateToCheck = dateToCheck.plus({ days: 1 });
+    }
+    return dateToCheck;
+  };
+
+  // Initialize the selectedDateTime with either today's date or the first allowed date
+  const initialSelectedDateTime = value
+    ? DateTime.fromISO(value)
+    : isDateAllowed(DateTime.local().startOf('day'))
+    ? DateTime.local().startOf('day')
+    : findFirstAllowedDate();
+
+  const [selectedDateTime, setSelectedDateTime] = useState<DateTime>(initialSelectedDateTime);
+  const [friendlyName, setFriendlyName] = useState<string | undefined>(undefined);
+
+  const isDateOnly = !timeFormats.includes(format);
+  const isTimeOnly = !dateFormats.includes(format);
+  const isDateTime = !isDateOnly && !isTimeOnly;
+
+  const isAbsolute = mode === 'absolute';
+  const isRelative = mode === 'relative';
+
+  const handleOnChange = (dateTime: DateTime) => {
+    const dateTimeString = dateTime.toISO();
+    if (dateTimeString == null) {
+      throw new Error('Could not convert DateTime to ISO');
+    }
+
+    // Create an object that mimics the structure of a React ChangeEvent
+    const event = {
+      target: { value: dateTimeString, name },
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange(event);
+    setOpen(false);
+  };
+
+  const renderPlaceholder = () => {
+    if (placeholder) {
+      return placeholder;
+    }
+
+    if (isTimeOnly) {
+      return 'Select a time';
+    }
+    return 'Select a date';
+  };
+
+  const event = useMemo(() => {
+    return {
+      // value does not matter I think
+      target: { value: '' },
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    } as unknown as React.FocusEvent<HTMLInputElement>;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (onFocus && onBlur) {
+      // consider open to be a focus event
+      open ? onFocus(event) : onBlur(event);
+    }
+  }, [open]);
+
+  const renderResult = () => {
+    if (friendlyName) {
+      return (
+        <>
+          {DateTime.fromISO(value).toLocaleString(format)} <span>({friendlyName})</span>
+        </>
+      );
+    }
+    if (value) {
+      return DateTime.fromISO(value).toLocaleString(format);
+    }
+    return renderPlaceholder();
+  };
+
+  return (
+    <Popover placement={popOverPlacement} open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <ResultContainer readOnly={readOnly} hasError={hasError} onClick={() => setOpen(!open)}>
+          {renderResult()}
+        </ResultContainer>
+      </Popover.Trigger>
+      <Popover.Content>
+        <ContentContainer>
+          {isAbsolute && (
+            <InnerContainer>
+              {dateFormats.includes(format) && (
+                <Calendar
+                  id={`calendar-${id}`}
+                  // should be start of day to not update the time when only selecting a date
+                  selectedDate={selectedDateTime}
+                  allowedFutureDates={allowFutureDates}
+                  allowedPastDates={allowPastDates}
+                  customDateFilter={customDateFilter}
+                  onDateClick={(date) => {
+                    setSelectedDateTime(date);
+                    relativePickerOptions?.showFriendlyName && setFriendlyName(undefined);
+                    if (isDateOnly) {
+                      handleOnChange(date);
+                    }
+                  }}
+                />
+              )}
+              {timeFormats.includes(format) && (
+                <TimePicker
+                  selectedDate={selectedDateTime}
+                  interval={timePickerOptions?.interval}
+                  onChange={(newTime) => {
+                    setSelectedDateTime(newTime);
+                    relativePickerOptions?.showFriendlyName && setFriendlyName(undefined);
+
+                    // see notes above
+                    if (isTimeOnly) {
+                      handleOnChange(newTime);
+                    }
+                  }}
+                />
+              )}
+            </InnerContainer>
+          )}
+
+          {isRelative && (
+            <InnerContainer>
+              <RelativePicker
+                id={id}
+                timeDirection={relativePickerOptions?.timeDirection}
+                onChange={(newDate, friendlyName) => {
+                  relativePickerOptions?.showFriendlyName && setFriendlyName(friendlyName);
+                  setSelectedDateTime(newDate);
+                  handleOnChange(newDate);
+                }}
+              />
+            </InnerContainer>
+          )}
+
+          {isAbsolute && isDateTime && (
+            <ButtonContainer>
+              <Button
+                onClick={() => {
+                  setOpen(false);
+                }}
+                fullWidth
+                variant="default"
+                color="secondary"
+                text="Cancel"
+              />
+              <Button
+                fullWidth
+                onClick={() => {
+                  handleOnChange(selectedDateTime!);
+                  setOpen(false);
+                }}
+                text="Select"
+              />
+            </ButtonContainer>
+          )}
+        </ContentContainer>
+      </Popover.Content>
+    </Popover>
+  );
+};

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,
+];
+
+export const dateFormats = [
+  DateTime.DATE_SHORT,
+  DateTime.DATE_MED,
+  DateTime.DATE_FULL,
+  DateTime.DATE_HUGE,
+  ...DateAndTimeFormats,
+];

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

@@ -0,0 +1,43 @@
+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};
+  box-shadow: ${({ theme }) => theme.elevation[4]};
+  text-transform: capitalize;
+  z-index: ${({ theme }) => theme.zIndex.dropdown};
+  cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'pointer')};
+  user-select: none;
+
+  span {
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+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,112 @@
+import { DateTime } from 'luxon';
+import { createContext, Dispatch, useContext } from 'react';
+import { Tense, Unit } from './QuickSelect';
+
+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;
+}
+
+export function reducer(state: DateRangePickerState, action: Action): DateRangePickerState {
+  switch (action.type) {
+    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 } };
+
+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/DateRangePicker.stories.tsx

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