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

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>
+  );
+};

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

@@ -0,0 +1,210 @@
+import React, { useState } from 'react';
+import { Alert, FileField, FileFieldProps } from '../../../components';
+import { styled } from '../../../styled';
+import { Meta, StoryFn } from '@storybook/react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 50%;
+  margin: 0 auto;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default {
+  title: 'Inputs/FileField',
+  component: FileField,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    label: 'Profile Image',
+    loading: false,
+    description: 'This is a description',
+  },
+} as Meta<FileFieldProps>;
+
+export const OnSubmit: StoryFn<FileFieldProps> = (args) => {
+  type FormFields = {
+    profileImage: FileList;
+  };
+
+  const MAX_FILE_SIZE = 500000; // 5MB
+  const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+  const [value, setValue] = useState<string | null>(null);
+
+  const validationSchema = z.object({
+    profileImage: z
+      .any()
+      .refine((files) => files?.length == 1, 'Image is required.')
+      .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, 'Max file size is 5MB.')
+      .refine(
+        (files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type),
+        'Only .jpg, .jpeg, .png and .webp files are accepted.',
+      ),
+  });
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = ({ profileImage }) => {
+    setValue(profileImage[0].name);
+  };
+
+  return (
+    <>
+      <Alert variant="warning">
+        Although the upload could be limited to a single file, the returned type will always be a FileList.
+      </Alert>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FileField
+          name="profileImage"
+          hint={args.hint}
+          label={args.label}
+          loading={args.loading}
+          description={args.description}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+          placeholder={args.placeholder}
+          multiple={false}
+          control={control}
+        />
+        <button type="submit">Submit</button>
+      </form>
+      <p>uploaded filename: {value}</p>
+    </>
+  );
+};
+
+export const MultipleImages: StoryFn<FileFieldProps> = (args) => {
+  type FormFields = {
+    profileImages: FileList;
+  };
+
+  const MAX_FILE_SIZE = 500000; // 5MB
+  const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+  const MAX_FILES = 2;
+  const [fileNames, setFileNames] = useState<string[] | null>(null);
+
+  const validationSchema = z.object({
+    profileImages: z
+      .any()
+      .refine(
+        (obj) => {
+          // Check if obj is a FileList
+          return obj instanceof FileList;
+        },
+        {
+          message: 'You must select at least one file.',
+        },
+      )
+      .refine(
+        (fileList: FileList) => {
+          // Check the number of files
+          return fileList.length > 0 && fileList.length <= MAX_FILES;
+        },
+        {
+          message: `You must select between 1 and ${MAX_FILES} files.`,
+        },
+      )
+      .refine(
+        (fileList: FileList) => {
+          // Check each file's size
+          return Array.from(fileList).every((file) => file.size <= MAX_FILE_SIZE);
+        },
+        {
+          message: 'Each file must be no larger than 5MB.',
+        },
+      )
+      .refine(
+        (fileList: FileList) => {
+          // Check each file's type
+          return Array.from(fileList).every((file) => ACCEPTED_IMAGE_TYPES.includes(file.type));
+        },
+        {
+          message: 'Only .jpg, .jpeg, .png, and .webp files are accepted.',
+        },
+      ),
+  });
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = ({ profileImages }) => {
+    setFileNames(Array.from(profileImages).map((file) => file.name));
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FileField
+          name="profileImages"
+          hint={args.hint}
+          label="Profile images"
+          loading={args.loading}
+          description={args.description}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+          placeholder={args.placeholder}
+          multiple={true}
+          control={control}
+        />
+        <button type="submit">Submit</button>
+      </form>
+      <p>uploaded filenames: {fileNames}</p>
+    </>
+  );
+};
+
+export const JsonValidationExample: StoryFn<FileFieldProps> = (args) => {
+  type FormFields = {
+    configFile: FileList;
+  };
+
+  const MAX_FILE_SIZE = 500000; // 5MB
+  const ACCEPTED_IMAGE_TYPES = ['application/json'];
+  const [file, setFile] = useState<File | null>(null);
+
+  const validationSchema = z.object({
+    configFile: z
+      .any()
+      // Unfortunately we cannot try and parse the file since refine does not allow async functions
+      .refine((files) => files?.length == 1, 'File is required.')
+      .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, 'Max file size is 5MB.')
+      .refine((files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type), 'Only json files are accepted.'),
+  });
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = ({ configFile }) => {
+    setFile(configFile[0]);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FileField
+          name="configFile"
+          hint={args.hint}
+          label="Config file"
+          loading={args.loading}
+          description={args.description}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+          placeholder={args.placeholder}
+          multiple={false}
+          control={control}
+        />
+        <button type="submit">Submit</button>
+      </form>
+      {file && <p>uploaded filename: {file.name}</p>}
+    </>
+  );
+};

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

@@ -0,0 +1,133 @@
+import { forwardRef, useCallback, useRef } from 'react';
+import { InputContainer, ContentContainer } from './style';
+import { Size } from '../../../styled';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+import { setAriaDescribedBy } from '../layout';
+import { IconButton, Tooltip } from '../../../components';
+import { AiOutlineDelete as ClearIcon, AiOutlineUpload as UploadIcon } from 'react-icons/ai';
+
+function getFileNames(files: FileList) {
+  return Array.from(files)
+    .map((file) => file.name)
+    .join(', ');
+}
+
+export interface FileFieldProps {
+  placeholder?: string;
+  size?: Size;
+  // TODO: Add multiple file selection
+  multiple?: boolean;
+}
+
+export type GenericFileFieldProps = GenericInputProps<string, HTMLInputElement> & FileFieldProps;
+
+const defaultsApplier = defaultInputPropsFactory<GenericFileFieldProps>(defaultInputProps);
+
+export const GenericFileField = forwardRef<HTMLInputElement, GenericFileFieldProps>(
+  function GenericFileField(props, ref) {
+    // TODO: clean up this incorrect type cast mess
+    const value = props.value as unknown as FileList;
+
+    const {
+      onChange,
+      onBlur = () => {},
+      onFocus = () => {},
+      name,
+      disabled,
+      required,
+      readOnly,
+      hasError,
+      multiple = false,
+      placeholder = 'Choose file...',
+      id,
+      hasDescription,
+    } = defaultsApplier(props);
+
+    value as unknown as FileList;
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleClear = useCallback(() => {
+      if (inputRef.current) {
+        inputRef.current.value = '';
+        // Manually trigger the onChange handler
+        if (onChange) {
+          const fakeEvent = {
+            currentTarget: {
+              files: new DataTransfer().files,
+            },
+          };
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          onChange(fakeEvent);
+        }
+      }
+    }, [inputRef, multiple]);
+
+    const handleFileChange = useCallback(
+      (e: any) => {
+        onChange(e.currentTarget.files);
+      },
+      [onChange, multiple],
+    );
+
+    return (
+      <InputContainer>
+        <input
+          type="file"
+          aria-hidden="true"
+          style={{ position: 'absolute', pointerEvents: 'none', opacity: 0, margin: 0 }}
+          id={`${id}-hidden-file-field`}
+          multiple={multiple}
+          tabIndex={-1}
+          onChange={handleFileChange}
+          ref={inputRef}
+        />
+
+        <ContentContainer
+          role="button"
+          aria-required={required}
+          aria-describedby={setAriaDescribedBy(name, hasDescription)}
+          hasError={hasError}
+          tabIndex={readOnly || disabled ? -1 : 0}
+          ref={ref}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={() => inputRef.current?.click()}
+        >
+          <span>{value && value.length > 0 ? getFileNames(value) : placeholder}</span>
+          {value && value.length > 0 ? (
+            <Tooltip>
+              <Tooltip.Trigger asChild>
+                <IconButton
+                  icon={<ClearIcon />}
+                  ariaLabel="Remove files"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleClear();
+                  }}
+                />
+              </Tooltip.Trigger>
+              <Tooltip.Content>{`Remove file${value.length > 1 ? 's' : ''}`}</Tooltip.Content>
+            </Tooltip>
+          ) : (
+            <Tooltip>
+              <Tooltip.Trigger asChild>
+                <IconButton
+                  icon={<UploadIcon />}
+                  ariaLabel="Upload files"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    inputRef.current?.click();
+                  }}
+                />
+              </Tooltip.Trigger>
+              <Tooltip.Content>Upload file</Tooltip.Content>
+            </Tooltip>
+          )}
+        </ContentContainer>
+      </InputContainer>
+    );
+  },
+);