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

package/src/components/inputs/CodeField/style.ts

@@ -0,0 +1,50 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  margin: ${({ theme }) => `${theme.spacing[0]} auto`};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+export const InputContainer = styled.div<{ fields: number }>`
+  display: grid;
+  position relative;
+  margin: ${({ theme }) => `${theme.spacing['2']} auto`};
+  grid-gap: 1rem;
+  grid-template-columns: repeat(${({ fields }) => fields}, 30px);
+  height: 30px;
+`;
+
+export const LoadingField = styled.div`
+  width: 100%;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  height: 30px;
+`;
+
+export const Input = styled.input<{ hasError: boolean; isDisabled: boolean }>`
+  width: 100%;
+  font-size: ${({ theme }) => theme.fontSize.medium};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  padding: 0;
+  text-align: center;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+
+  /* Disable arrow up and down */
+  -moz-appearance: textfield;
+  &::webkit-inner-spin-button {
+    display: none;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+
+    margin: ${({ theme }) => theme.spacing[0]};
+  }
+
+  &:focus {
+    border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+`;

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

@@ -0,0 +1,103 @@
+import { FC, useState } from 'react';
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../../InputProps';
+import { useController } from 'react-hook-form';
+import { GenericDatePicker, DatePickerProps } from './Generic';
+import { Label, ErrorMessage, InputWrapper, Description } from '../../layout';
+import { Container } from './style';
+import { Skeleton } from '../../../../components';
+
+export type ControlledDatePickerProps = ControlledInputProps & DatePickerProps;
+const defaultsApplier = defaultInputPropsFactory<ControlledDatePickerProps>(defaultInputProps);
+
+export const ControlledDatePicker: FC<ControlledDatePickerProps> = (props) => {
+  const {
+    label,
+    name,
+    size,
+    hint,
+    control,
+    disabled,
+    readOnly,
+    required,
+    format,
+    mode,
+    relativePickerOptions,
+    timePickerOptions,
+    placeholder,
+    popOverPlacement,
+    loading,
+    description,
+    allowFutureDates = true,
+    allowPastDates = true,
+    canClear,
+    customDateFilter,
+  } = defaultsApplier(props);
+
+  const [showError, setShowError] = useState<boolean>(true);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const handleOnFocus = () => {
+    setShowError(false);
+  };
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(true);
+  };
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            hint={hint}
+            htmlFor={name}
+            error={!!error}
+            size={size}
+            text={label}
+            disabled={disabled}
+            position="top"
+          />
+        )}
+        {loading ? (
+          <Skeleton variant="text" width="100%" height="38px" />
+        ) : (
+          <GenericDatePicker
+            onChange={field.onChange}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            value={field.value}
+            disabled={disabled}
+            name={name}
+            id={name}
+            required={required}
+            size={size}
+            readOnly={readOnly}
+            hasError={!!error}
+            customDateFilter={customDateFilter}
+            allowFutureDates={allowFutureDates}
+            allowPastDates={allowPastDates}
+            popOverPlacement={popOverPlacement}
+            hasDescription={!!description}
+            relativePickerOptions={relativePickerOptions}
+            timePickerOptions={timePickerOptions}
+            format={format}
+            placeholder={placeholder}
+            mode={mode}
+            canClear={canClear}
+          />
+        )}
+        {showError && error?.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,267 @@
+import React, { StrictMode, 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">Submit form</Button>
+      </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">Submit form</Button>
+      </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">Submit form</Button>
+      </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">Submit form</Button>
+      </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">Submit form</Button>
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const AbsoluteSubmit = () => {
+  const [result, setResult] = useState<string>();
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <StrictMode>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label="Expiration date"
+          name="date"
+          required={false}
+          loading={false}
+          description={'The role will be automatically removed after this date.'}
+          popOverPlacement={'bottom'}
+          timePickerOptions={{ interval: 30 }}
+          allowPastDates={false}
+          format={DateTime.TIME_SIMPLE}
+        />
+        <Button type="submit">Submit form</Button>
+      </form>
+      <p>result: {result}</p>
+    </StrictMode>
+  );
+};

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

@@ -0,0 +1,283 @@
+import { FC, MouseEvent, useLayoutEffect, useMemo, useState } from 'react';
+import { Button, IconButton, Popover } from '../../../../components';
+import { DateTime, DateTimeFormatOptions, Settings } 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';
+import { AiOutlineClose as ClearIcon } from 'react-icons/ai';
+
+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;
+}
+
+Settings.throwOnInvalid = true;
+
+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;
+
+  /// Can set field back to undefined
+  canClear?: boolean;
+}
+
+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,
+  canClear = false,
+  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 isFormatInTimeFormats = timeFormats.includes(JSON.stringify(format));
+  const isFormatInDateFormats = dateFormats.includes(JSON.stringify(format));
+  const isDateOnly = !isFormatInTimeFormats;
+  const isTimeOnly = !isFormatInDateFormats;
+  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) {
+      if (open) {
+        onFocus(event);
+      } else {
+        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();
+  };
+
+  const handleClear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onChange) {
+      onChange(null as any);
+    }
+  };
+
+  return (
+    <Popover placement={popOverPlacement} open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild readOnly={readOnly}>
+        <ResultContainer readOnly={readOnly} hasError={hasError} onClick={() => setOpen(!open)}>
+          <span>{renderResult()}</span>
+          {!readOnly && canClear && value && !open && (
+            <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={handleClear} />
+          )}
+        </ResultContainer>
+      </Popover.Trigger>
+      <Popover.Content>
+        <ContentContainer>
+          {isAbsolute && (
+            <InnerContainer>
+              {isFormatInDateFormats && (
+                <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);
+                    if (relativePickerOptions?.showFriendlyName) {
+                      setFriendlyName(undefined);
+                    }
+                    if (isDateOnly) {
+                      handleOnChange(date);
+                    }
+                  }}
+                />
+              )}
+              {isFormatInTimeFormats && (
+                <TimePicker
+                  selectedDate={selectedDateTime}
+                  interval={timePickerOptions?.interval}
+                  onChange={(newTime) => {
+                    setSelectedDateTime(newTime);
+                    if (relativePickerOptions?.showFriendlyName) {
+                      setFriendlyName(undefined);
+                    }
+                    // see notes above
+                    if (isTimeOnly) {
+                      handleOnChange(newTime);
+                    }
+                  }}
+                />
+              )}
+            </InnerContainer>
+          )}
+
+          {isRelative && (
+            <InnerContainer>
+              <RelativePicker
+                id={id}
+                timeDirection={relativePickerOptions?.timeDirection}
+                onChange={(newDate, friendlyName) => {
+                  if (relativePickerOptions?.showFriendlyName) {
+                    setFriendlyName(friendlyName);
+                  }
+                  setSelectedDateTime(newDate);
+                  handleOnChange(newDate);
+                }}
+              />
+            </InnerContainer>
+          )}
+
+          {isAbsolute && isDateTime && (
+            <ButtonContainer>
+              <Button
+                onClick={() => {
+                  setOpen(false);
+                }}
+                fullWidth
+                variant="default"
+                color="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                fullWidth
+                onClick={() => {
+                  handleOnChange(selectedDateTime);
+                  setOpen(false);
+                }}
+              >
+                Select
+              </Button>
+            </ButtonContainer>
+          )}
+        </ContentContainer>
+      </Popover.Content>
+    </Popover>
+  );
+};