@takaro/lib-components 0.0.1

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

@@ -0,0 +1,200 @@
+import { MouseEvent } from 'react';
+import { SelectField, TextField } from '..';
+import { useForm, SubmitHandler, useFieldArray } from 'react-hook-form';
+import { AiOutlineDelete as RemoveIcon, AiOutlinePlus as AddIcon } from 'react-icons/ai';
+import { z } from 'zod';
+import { 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 { 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>(
+  (
+    {
+      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`}
+                    inPortal
+                    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
+                  text="Apply"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleSubmit(onSubmit)();
+                  }}
+                />
+              </ButtonContainer>
+            </form>
+          </InnerContent>
+        </Popover.Content>
+      </Popover>
+    );
+  }
+);

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';

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

@@ -0,0 +1,42 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div``;
+
+export const DurationContainer = styled.div<{ hasError: boolean; disabled: boolean; readOnly: boolean }>`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  width: 100%;
+  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  cursor: ${({ disabled, readOnly }) => (disabled || readOnly ? 'default' : 'pointer')};
+`;
+
+export const InnerContent = styled.div`
+  padding: ${({ theme }) => theme.spacing['0_75']};
+
+  h2 {
+    margin-bottom: ${({ theme }) => theme.spacing['1']};
+  }
+`;
+
+export const FieldContainer = styled.div<{ hasMultipleFields: boolean }>`
+  display: grid;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_75']};
+  grid-template-columns: 120px 200px 30px ${({ hasMultipleFields }) => (hasMultipleFields ? '30px' : '0px')};
+  margin-bottom: ${({ theme }) => theme.spacing['1']};
+
+  div {
+    margin-bottom: 0;
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;

package/src/components/inputs/EditableField/EditableField.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { styled } from '../../../styled';
+import { Meta, StoryFn } from '@storybook/react';
+import { EditableFieldProps, EditableField } from '.';
+import { z } from 'zod';
+
+export default {
+  title: 'Inputs/EditableField',
+  component: EditableField,
+  args: {
+    disabled: false,
+    isEditing: false,
+    value: 'I am the text, double click me',
+    required: true,
+    label: 'label',
+    validationSchema: z
+      .string()
+      .refine((value) => !value.includes('/'), { message: 'The field must not contain slashes.' }),
+  },
+} as Meta<EditableFieldProps>;
+
+const Container = styled.div`
+  width: 50%;
+  input {
+    width: 100%;
+  }
+`;
+
+export const Default: StoryFn<EditableFieldProps> = (args) => {
+  const [value, setValue] = React.useState(args.value);
+
+  return (
+    <Container>
+      <EditableField
+        name="editableField"
+        isEditing={args.isEditing}
+        disabled={args.disabled}
+        required={args.required}
+        value={args.value}
+        validationSchema={args.validationSchema}
+        onEdited={(value) => setValue(value)}
+      />
+      <div>The value: {value}</div>
+    </Container>
+  );
+};
+
+export const RemoteEditEnable: StoryFn<EditableFieldProps> = (args) => {
+  const [editing, setEditing] = React.useState<boolean>(false);
+
+  return (
+    <Container>
+      This tests if we can change the state to editing from outside the component
+      <EditableField
+        name="editableField"
+        isEditing={editing}
+        disabled={args.disabled}
+        required={args.required}
+        value={args.value}
+      />
+      <button onClick={() => setEditing(!editing)}>toggle editing state</button>
+      <span>current state: {editing ? 'true' : 'false'}</span>
+    </Container>
+  );
+};

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

@@ -0,0 +1,135 @@
+import { FC, KeyboardEvent, MouseEvent, useEffect, useRef, useState } from 'react';
+import { ErrorMessage } from '../layout';
+import { z } from 'zod';
+import { Container } from './style';
+
+export interface EditableFieldProps {
+  isEditing?: boolean;
+  editingChange?: (editing: boolean) => unknown;
+  placeholder?: string;
+
+  // fires when the input value is changed
+  onEdited?: (value: string) => unknown;
+
+  validationSchema?: z.ZodSchema;
+
+  disabled?: boolean;
+  required?: boolean;
+  name: string;
+  loading?: boolean;
+
+  // defaultval
+  value?: string;
+}
+
+export const EditableField: FC<EditableFieldProps> = ({
+  isEditing = false,
+  required = false,
+  value = '',
+  name,
+  disabled = false,
+  onEdited,
+  validationSchema,
+  editingChange = () => {},
+  loading = false,
+}) => {
+  const [editing, setEditing] = useState(isEditing);
+  const [inputValue, setInputValue] = useState<string>(value);
+  const [spanValue, setSpanValue] = useState<string>(value);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef && inputRef.current && editing === true) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing, inputRef]);
+
+  useEffect(() => {
+    if (!editing && inputValue != spanValue && onEdited && !error) {
+      onEdited(inputValue);
+      setSpanValue(inputValue);
+    }
+    editingChange(editing);
+  }, [editing]);
+
+  // change editing state when new isEditing prop is passed
+  useEffect(() => {
+    if (isEditing !== editing) {
+      setEditing(isEditing);
+    }
+  }, [isEditing]);
+
+  // handle focus change
+  const handleKeyDown = ({ key }: KeyboardEvent) => {
+    const keys = ['Escape', 'Tab', 'Enter'];
+
+    if (required && inputRef.current?.value == '') {
+      return;
+    }
+
+    if (keys.indexOf(key) > -1 && inputRef.current && !disabled && !error) {
+      setEditing(false);
+    }
+  };
+
+  const handleOnBlur = () => {
+    if (required && inputRef.current?.value == '') {
+      return;
+    }
+    setEditing(false);
+  };
+
+  const handleOnClick = ({ detail }: MouseEvent<HTMLDivElement>) => {
+    // double click
+    if (detail == 2 && !disabled) {
+      setEditing(true);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.currentTarget.value;
+    setInputValue(newValue);
+    validateInput(newValue);
+  };
+
+  const validateInput = (value: string) => {
+    if (!validationSchema) {
+      return;
+    }
+
+    const validationResult = validationSchema.safeParse(value);
+    if (!validationResult.success) {
+      setError(validationResult.error.errors[0].message);
+    } else {
+      setError(undefined);
+    }
+  };
+
+  if (loading) {
+    return <div>loading</div>;
+  }
+
+  return (
+    <Container>
+      {editing ? (
+        <div onBlur={handleOnBlur} onKeyDown={(e) => handleKeyDown(e)}>
+          <input
+            type="text"
+            ref={inputRef}
+            name={name}
+            value={inputValue}
+            aria-required={required}
+            onChange={handleChange}
+          />
+          {error && <ErrorMessage message={error} />}
+        </div>
+      ) : (
+        <div onClick={handleOnClick}>
+          <span>{spanValue}</span>
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+  input {
+    width: 100%;
+    border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+    padding: ${({ theme }) => `${theme.spacing['0_1']} ${theme.spacing['0_5']}`};
+  }
+`;

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

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