@takaro/lib-components 0.0.1

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

@@ -0,0 +1,211 @@
+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"
+        text="Although the upload could be limited to a single file, the returned type will always be a FileList."
+      />
+      <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,131 @@
+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>((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>
+  );
+});

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

@@ -0,0 +1,5 @@
+export { GenericFileField } from './Generic';
+export type { GenericFileFieldProps, FileFieldProps } from './Generic';
+
+export { ControlledFileField } from './Controlled';
+export type { ControlledFileFieldProps } from './Controlled';

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

@@ -0,0 +1,34 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const InputContainer = styled.div``;
+
+export const ContentContainer = styled.div<{ hasError: boolean }>`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  border-width: 0.1rem;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  color: ${({ theme }) => theme.colors.textAlt};
+
+  &:focus {
+    border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;

package/src/components/inputs/InputProps.ts

@@ -0,0 +1,61 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+import { Size } from '../../styled';
+
+// Props that available on all fields (but no default value)
+interface InputProps extends DefaultInputProps {
+  name: string;
+}
+
+// Props for generic input props
+export interface GenericInputProps<V, T> extends InputProps {
+  value: V;
+  // Although name could be used as a unique field identifier, name is not retrievable in JsonSchemaForm/FieldTemplate
+  id: string;
+  hasDescription: boolean;
+  hasError: boolean;
+  onChange: ChangeEventHandler<T>;
+  onBlur?: FocusEventHandler<T>;
+  onFocus?: FocusEventHandler<T>;
+}
+export interface GenericInputPropsFunctionHandlers<V, D> extends InputProps {
+  value: V;
+  id: string;
+  hasError: boolean;
+  hasDescription: boolean;
+  onChange: (val: V) => void;
+  onBlur?: FocusEventHandler<D>;
+  onFocus?: FocusEventHandler<D>;
+}
+
+export interface ControlledInputProps extends InputProps {
+  control: Control<FieldValues> | Control<any>;
+  label?: string;
+  loading?: boolean;
+  hint?: string;
+  description?: string;
+}
+
+// All input components have a set of props in common which all should have the same default values.
+interface DefaultInputProps {
+  required?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  size?: Size;
+  hasMargin?: boolean;
+}
+
+type Required<T> = {
+  [P in keyof T]-?: T[P];
+};
+export const defaultInputProps: Required<DefaultInputProps> = {
+  required: false,
+  readOnly: false,
+  disabled: false,
+  size: 'medium',
+  hasMargin: true,
+};
+
+export function defaultInputPropsFactory<T extends InputProps>(defaultValues: Required<DefaultInputProps>) {
+  return (values: T) => Object.assign({} as Required<DefaultInputProps> & T, defaultValues, values);
+}

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

@@ -0,0 +1,46 @@
+import { FC, PropsWithChildren } from 'react';
+import { useController } from 'react-hook-form';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+
+import { Container } from './style';
+import { RadioItem } from './RadioItem';
+import { InputWrapper, ErrorMessage, Description } from '../layout';
+import { GenericRadioGroup, RadioGroupSubComponents } from './Generic';
+
+export type ControlledRadioGroupProps = PropsWithChildren<ControlledInputProps>;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledRadioGroupProps>(defaultInputProps);
+
+export const ControlledRadioGroup: FC<ControlledRadioGroupProps> & RadioGroupSubComponents = (props) => {
+  const { name, control, description, children, disabled, readOnly, required, hasMargin } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control });
+
+  return (
+    <InputWrapper>
+      <Container>
+        <GenericRadioGroup
+          id={name}
+          name={name}
+          onChange={field.onChange}
+          value={field.value}
+          disabled={disabled}
+          readOnly={readOnly}
+          hasError={!!error}
+          required={required}
+          hasDescription={!!description}
+          hasMargin={hasMargin}
+        >
+          {children}
+        </GenericRadioGroup>
+        {error && error.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};
+
+ControlledRadioGroup.Item = RadioItem;

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

@@ -0,0 +1,34 @@
+import { ChangeEvent, FC, PropsWithChildren } from 'react';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+import { RadioItem } from './RadioItem';
+import { Container } from './style';
+import { setAriaDescribedBy } from '../layout';
+import { RadioGroupContext } from './context';
+
+export interface RadioGroupSubComponents {
+  Item: typeof RadioItem;
+}
+
+export type RadioGroupProps = PropsWithChildren<GenericInputProps<string, HTMLInputElement>>;
+const defaultsApplier = defaultInputPropsFactory<RadioGroupProps>(defaultInputProps);
+
+export const GenericRadioGroup: FC<RadioGroupProps> & RadioGroupSubComponents = (props) => {
+  const { readOnly, value, name, onChange, hasDescription, disabled, children } = defaultsApplier(props);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (readOnly || disabled) return;
+    onChange(e);
+  };
+
+  return (
+    <Container role="radiogroup" aria-describedby={setAriaDescribedBy(name, hasDescription)}>
+      <RadioGroupContext.Provider
+        value={{ name, selectedValue: value, setSelectedValue: handleChange, readOnly, disabled }}
+      >
+        {children}
+      </RadioGroupContext.Provider>
+    </Container>
+  );
+};
+
+GenericRadioGroup.Item = RadioItem;

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

@@ -0,0 +1,116 @@
+import React, { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, RadioGroup, RadioGroupProps } from '../../../components';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GenericRadioGroup } from './Generic';
+
+const options = [
+  { value: 'm', label: 'male' },
+  { value: 'f', label: 'female' },
+];
+
+export default {
+  title: 'Inputs/RadioGroup',
+  component: RadioGroup,
+  args: {
+    readOnly: false,
+    disabled: false,
+    loading: false,
+    hint: 'this is the hint',
+    label: 'Enter your gender',
+    description: 'this is the description',
+    required: true,
+  },
+} as Meta<RadioGroupProps>;
+
+export const OnSubmit: StoryFn<RadioGroupProps> = (args) => {
+  type FormFields = {
+    gender: string;
+  };
+
+  const [result, setResult] = useState<string>('');
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        gender: z.enum(['m', 'f']),
+      }),
+    []
+  );
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ gender }) => {
+    setResult(gender);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <RadioGroup
+          control={control}
+          loading={args.loading}
+          readOnly={args.readOnly}
+          label={args.label}
+          name="gender"
+          hint={args.hint}
+          disabled={args.disabled}
+          required={args.required}
+          description={args.description}
+        >
+          {options.map(({ value, label }) => (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+              <RadioGroup.Item value={value} id={value} />
+              <label htmlFor={value} style={{ cursor: !args.disabled && !args.readOnly ? 'pointer' : 'default' }}>
+                {label}
+              </label>
+            </div>
+          ))}
+        </RadioGroup>
+        <Button text="submit" type="submit" />
+      </form>
+      <div>Result: {result}</div>
+    </>
+  );
+};
+
+export const Generic: StoryFn<RadioGroupProps> = (args) => {
+  const id = 'gender';
+  const [value, setValue] = useState<string>('m');
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return (
+    <div>
+      <GenericRadioGroup
+        id={id}
+        readOnly={args.readOnly}
+        name="gender"
+        required={args.required}
+        disabled={args.disabled}
+        hasDescription={!!args.description}
+        hasError={false}
+        value={value}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onChange={handleOnChange}
+      >
+        {options.map(({ value, label }) => (
+          <div
+            key={`${id}-${value}`}
+            style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}
+          >
+            <GenericRadioGroup.Item value={value} id={value} />
+            <label htmlFor={value}>{label}</label>
+          </div>
+        ))}
+      </GenericRadioGroup>
+      <>{value}</>
+    </div>
+  );
+};