@takaro/lib-components 0.0.1

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

@@ -0,0 +1,96 @@
+import { forwardRef, useRef } from 'react';
+import { BackgroundContainer, CheckboxContainer, CheckMarkContainer } from './style';
+
+import { AiOutlineCheck as Icon } from 'react-icons/ai';
+
+import { defaultInputPropsFactory, defaultInputProps, GenericInputProps } from '../InputProps';
+import { setAriaDescribedBy } from '../layout';
+
+const variants = {
+  unchecked: { scale: 0, opacity: 0 },
+  checked: { scale: 1, opacity: 1 },
+};
+
+export type GenericCheckBoxProps = GenericInputProps<boolean, HTMLInputElement>;
+
+const defaultsApplier = defaultInputPropsFactory<GenericCheckBoxProps>(defaultInputProps);
+
+// TODO: write a test that checks if the value is being processed as a boolean.
+export const GenericCheckBox = forwardRef<HTMLButtonElement, GenericCheckBoxProps>((props, ref) => {
+  const {
+    readOnly,
+    disabled,
+    value = false,
+    hasError,
+    onChange,
+    id,
+    name,
+    hasDescription,
+    size,
+    required,
+  } = defaultsApplier(props);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleOnClick(): void {
+    if (readOnly || disabled) return;
+    inputRef.current?.click();
+  }
+
+  function getIconSize() {
+    switch (size) {
+      case 'tiny':
+        return 16;
+      case 'small':
+        return 14;
+      case 'medium':
+        return 16;
+      case 'large':
+        return 18;
+      case 'huge':
+        return 20;
+    }
+  }
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        aria-required={required}
+        aria-hidden="true"
+        style={{ position: 'absolute', pointerEvents: 'none', opacity: 0, margin: 0 }}
+        checked={value}
+        tabIndex={-1}
+        id={`${id}-hidden-input`}
+        onChange={(e) => {
+          onChange(e);
+        }}
+        ref={inputRef}
+      />
+      <CheckboxContainer
+        role="checkbox"
+        id={id}
+        isChecked={value}
+        readOnly={readOnly}
+        disabled={disabled}
+        onClick={handleOnClick}
+        aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        aria-checked={value}
+        hasError={hasError}
+        ref={ref}
+        tabIndex={readOnly || disabled ? -1 : 0}
+        type="button"
+      >
+        <BackgroundContainer
+          $size={size}
+          initial={value ? 'checked' : 'unchecked'}
+          animate={value ? 'checked' : 'unchecked'}
+          variants={variants}
+        >
+          <CheckMarkContainer isChecked={value}>
+            <Icon size={getIconSize()} />
+          </CheckMarkContainer>
+        </BackgroundContainer>
+      </CheckboxContainer>
+    </>
+  );
+});

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

@@ -0,0 +1,4 @@
+export { GenericCheckBox } from './Generic';
+
+export { ControlledCheckBox } from './Controlled';
+export type { ControlledCheckBoxProps } from './Controlled';

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

@@ -0,0 +1,113 @@
+import { Size, styled } from '../../../styled';
+import { motion } from 'framer-motion';
+import { shade } from 'polished';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export const Input = styled.input`
+  position: absolute;
+  visibility: hidden;
+`;
+
+export const BackgroundContainer = styled(motion.div)<{ $size: Size }>`
+  background-color: ${({ theme }) => shade(0.5, theme.colors.primary)};
+
+  ${({ $size }): string => {
+    switch ($size) {
+      case 'tiny':
+        return `
+          width: 1.2rem;
+          height: 1.2rem;
+        `;
+      case 'small':
+        return `
+          width: 1.6rem;
+          height: 1.6rem;
+        `;
+      case 'medium':
+        return `
+          width: 2rem;
+          height: 2rem;
+        `;
+      case 'large':
+        return `
+          width: 2.4rem;
+          height: 2.4rem;
+        `;
+      case 'huge':
+        return `
+          width: 2.8rem;
+          height: 2.8rem;
+        `;
+    }
+  }}
+`;
+
+export const CheckboxContainer = styled.button<{
+  isChecked?: boolean;
+  readOnly: boolean;
+  hasError: boolean;
+  disabled: boolean;
+}>`
+  display: flex;
+  padding: 0;
+  background-color: transparent;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  border: 0.1rem solid
+    ${({ theme, isChecked, hasError, disabled }): string => {
+      if (disabled) {
+        return theme.colors.disabled;
+      }
+      if (isChecked) {
+        return theme.colors.primary;
+      }
+      if (hasError) {
+        return theme.colors.error;
+      }
+      return theme.colors.backgroundAccent;
+    }};
+
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  transition: box-shadow 100ms linear, border-color 100ms linear;
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) {
+      return 'not-allowed';
+    }
+    if (readOnly) {
+      return 'inherit';
+    }
+    return 'pointer';
+  }};
+  overflow: visible;
+  &.placeholder {
+    border: none; /* Otherwise the border does not have the animation */
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    width: 2.4rem;
+    height: 2.4rem;
+    cursor: default;
+  }
+`;
+
+export const CheckMarkContainer = styled.div<{ isChecked: boolean }>`
+  display: flex;
+  visibility: ${({ isChecked }): string => (isChecked ? 'visible' : 'hidden')};
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ isChecked }): number => (isChecked ? 1 : 0)};
+  transition: 0.2s opacity ease-in-out cubic-bezier(0.215, 0.61, 0.355, 1);
+
+  svg {
+    fill: white;
+    stroke: white;
+  }
+`;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useState, useMemo } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { CodeField, CodeFieldProps } from '../../../components';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { Button } from '../../actions';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export default {
+  title: 'Inputs/CodeField',
+  component: CodeField,
+  args: {
+    required: true,
+    disabled: false,
+    loading: false,
+    readOnly: false,
+    fields: 6,
+    label: 'Code field',
+    size: 'medium',
+  },
+} as Meta<CodeFieldProps>;
+
+type FormFields = { code: string };
+
+export const onSubmit: StoryFn<CodeFieldProps> = (args) => {
+  const [result, setResult] = useState<string>();
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        code: z.string().min(args.fields).max(args.fields).nonempty('Code is a required field.'),
+      }),
+    [args.fields]
+  );
+
+  const { handleSubmit, control } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = async ({ code }) => {
+    setResult(code);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CodeField
+          control={control}
+          fields={args.fields}
+          name="code"
+          loading={args.loading}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+          label={args.label}
+          size={args.size}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const AutoSubmit: StoryFn<CodeFieldProps> = () => {
+  const [result, setResult] = useState<string>();
+  const { control, handleSubmit } = useForm<FormFields>();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ code }) => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setResult(code);
+    }, 2000);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CodeField autoSubmit={handleSubmit(onSubmit)} control={control} fields={6} loading={loading} name="code" />
+      </form>
+      <div>Result: {result}</div>
+    </>
+  );
+};

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

@@ -0,0 +1,173 @@
+import React, { KeyboardEvent, FC, useRef, useEffect, ChangeEvent, useState } from 'react';
+import { Container, InputContainer, Input, LoadingField } from './style';
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../InputProps';
+import { useController } from 'react-hook-form';
+import { Label, ErrorMessage, Description, setAriaDescribedBy } from '../layout';
+
+export type CodeFieldProps = Omit<ControlledInputProps, 'hasError'> & {
+  name: string;
+  fields: number;
+  allowedCharacters?: RegExp;
+  autoSubmit?: () => unknown;
+};
+
+const defaultsApplier = defaultInputPropsFactory<CodeFieldProps>(defaultInputProps);
+
+export const CodeField: FC<CodeFieldProps> = (props) => {
+  const {
+    loading,
+    name,
+    fields,
+    autoSubmit,
+    allowedCharacters = /[0-9]/,
+    hint,
+    size,
+    disabled,
+    control,
+    required,
+    description,
+    readOnly,
+    label,
+  } = defaultsApplier(props);
+
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control });
+
+  const fieldRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    if (fieldRefs.current.length) {
+      fieldRefs.current[0].focus();
+    }
+  }, []);
+
+  const sendResult = () => {
+    const res = fieldRefs.current.map((field) => field.value).join('');
+    field.onChange(res);
+
+    if (res.length === fields) {
+      if (autoSubmit) autoSubmit();
+    }
+  };
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    const {
+      target: { value, nextElementSibling },
+    } = e;
+
+    if (value.match(allowedCharacters)) {
+      if (nextElementSibling !== null) {
+        (nextElementSibling as HTMLInputElement).focus();
+      }
+    } else {
+      e.target.value = '';
+    }
+    sendResult();
+  };
+
+  const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    setShowError(true);
+    e.target.select();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+
+    if (e.key === 'Backspace') {
+      if (target.value === '' && target.previousElementSibling !== null) {
+        if (target.previousElementSibling !== null) {
+          (target.previousElementSibling as HTMLInputElement).focus();
+          e.preventDefault();
+        }
+      } else {
+        target.value = '';
+      }
+      sendResult();
+    }
+  };
+
+  const handleOnBlur = () => {
+    if (disabled) return;
+    field.onBlur();
+    setShowError(false);
+  };
+
+  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const value = e.clipboardData.getData('Text');
+    if (value.match(allowedCharacters)) {
+      for (let i = 0; i < fields && i < value.length; i++) {
+        fieldRefs.current[i].value = value.charAt(i);
+        if (fieldRefs.current[i].nextElementSibling !== null) {
+          (fieldRefs.current[i].nextElementSibling as HTMLInputElement).focus();
+        }
+      }
+      sendResult();
+    }
+    e.preventDefault();
+  };
+
+  if (loading) {
+    return (
+      <Container>
+        <InputContainer fields={fields}>
+          {Array.from(Array(fields).keys()).map((_, idx) => (
+            <LoadingField key={`loading-field-array-${idx}`} className="placeholder" />
+          ))}
+        </InputContainer>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      {label && (
+        <Label
+          required={required}
+          disabled={disabled}
+          size={size}
+          hint={hint}
+          text={label}
+          position="top"
+          error={!!error}
+          htmlFor={`${name}-0`}
+        />
+      )}
+      <InputContainer fields={fields} aria-describedby={setAriaDescribedBy(name, !!description)}>
+        {Array.from(Array(fields).keys()).map((_, i) => (
+          <Input
+            autoCapitalize="off"
+            autoComplete="off"
+            hasError={!!error}
+            isDisabled={disabled}
+            disabled={disabled}
+            id={`${name}-${i}`}
+            maxLength={1}
+            name={`${name}-${i}`}
+            aria-required={required}
+            onChange={handleOnChange}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            onKeyDown={handleKeyDown}
+            onPaste={handleOnPaste}
+            readOnly={readOnly}
+            ref={(el) => {
+              if (el) {
+                fieldRefs.current[i] = el;
+              }
+            }}
+            type="text"
+          />
+        ))}
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+        {description && <Description description={description} inputName={name} />}
+      </InputContainer>
+    </Container>
+  );
+};

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,101 @@
+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,
+    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}
+          />
+        )}
+        {showError && error?.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};