polpo 0.1.13 → 0.1.16

package/src/components/form/form.types.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { UseControllerProps } from 'react-hook-form';
+
+export type Props = { [key: string]: unknown };
+
+export type SharedProps = {
+  name: string;
+  className?: string;
+  style?: React.CSSProperties;
+  autoComplete?: string;
+  autoFocus?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  onBlur?: (e: React.FocusEvent<unknown>) => void;
+  onFocus?: (e: React.FocusEvent<unknown>) => void;
+};
+
+export type UnControlledProps<V> = {
+  value: V;
+  setValue: (value: V) => void;
+  invalid?: boolean;
+  isTouched?: boolean;
+  isDirty?: boolean;
+  error?: string;
+};
+
+export type ControlledProps<V> = {
+  defaultValue?: V;
+};
+
+export type UnControlledComponentProps<T extends Props, V> = T & SharedProps & UnControlledProps<V>;
+
+export type ControlledComponentProps<T extends Props, V> = T & SharedProps & ControlledProps<V>;
+
+export type ControllerGeneratorProps<T extends Props, V> = ControlledComponentProps<T, V> &
+  Partial<Pick<UseControllerProps, 'rules'>>;

package/src/components/form/index.ts

@@ -0,0 +1,14 @@
+export * from './checkbox';
+export * from './date-picker';
+export * from './field';
+export * from './input';
+export * from './input-password';
+export * from './input-color';
+export * from './input-file';
+export * from './input-number';
+export * from './field';
+export * from './radio';
+export * from './select';
+export * from './slider';
+export * from './textarea';
+export * from './switch';

package/src/components/form/input/index.ts

@@ -0,0 +1 @@
+export * from './input.component';

package/src/components/form/input/input.component.tsx

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+
+import { useInputHandlers } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+type IProps = InputFieldProps<{
+  pattern?: string;
+  type?: 'email' | 'search' | 'text' | 'url';
+  min?: number;
+  max?: number;
+}>;
+
+export const Input = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  pattern,
+  type = 'text',
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  min,
+  max,
+  ...fieldProps
+}: UnControlledComponentProps<IProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: e => setValue(e.target.value),
+    onBlur: onBlur,
+    onFocus: onFocus,
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <input
+        id={id}
+        type={type}
+        name={name}
+        className={className}
+        style={style}
+        value={value}
+        pattern={pattern}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        min={min}
+        max={max}
+        {...handlers}
+      />
+    </Field>
+  );
+};
+
+const InputController = ({ rules, ...props }: ControllerGeneratorProps<IProps, string>) => {
+  return <Controller Component={Input} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+Input.Controller = InputController;

package/src/components/form/input-color/index.ts

@@ -0,0 +1 @@
+export * from './input-color.component';

package/src/components/form/input-color/input-color.component.tsx

@@ -0,0 +1,170 @@
+import Color from 'color';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
+import { FaEyeDropper } from 'react-icons/fa6';
+import useEyeDropper from 'use-eye-dropper';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { Modal } from '../../modals';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './input-color.styles.css';
+
+type ColorProps = InputFieldProps<{
+  showValueText?: boolean;
+}>;
+
+export const InputColor = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  showValueText = false,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}: UnControlledComponentProps<ColorProps, string>) => {
+  const { open, isSupported } = useEyeDropper();
+  const [inputValue, setInputValue] = useState<string>(value);
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const containerRef = useRef<HTMLElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: e => setInputValue(e.target.value),
+    onBlur: e => {
+      setInputColor();
+
+      if (onBlur) onBlur(e as React.FocusEvent<HTMLInputElement>);
+    },
+    onFocus: e => {
+      setInputColor();
+
+      if (onFocus) onFocus(e as React.FocusEvent<HTMLInputElement>);
+    },
+  });
+
+  const borderColor = useMemo(() => {
+    const color = Color(value === '' ? '#000000' : value);
+
+    if (color.isLight() || color.alpha() < 0.5) {
+      return '#000000';
+    }
+
+    return '#FFFFFF';
+  }, [value]);
+
+  const openEyeDropper = async () => {
+    const { sRGBHex } = await open();
+    setValue(sRGBHex);
+  };
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  const setInputColor = useCallback(() => {
+    if (inputValue.match(/^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i)) {
+      setValue(inputValue);
+    } else {
+      setInputValue(value);
+    }
+  }, [inputValue, setValue, value]);
+
+  const inputBoxClassName = useClassNames({
+    'input-color-box': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <section
+        className='input-color'
+        onClick={e => {
+          e.stopPropagation();
+          setIsOpen(true);
+        }}
+        ref={containerRef}
+      >
+        <section
+          className={inputBoxClassName}
+          style={{
+            borderColor,
+            background: value,
+            color: value,
+            ...style,
+          }}
+        />
+        {showValueText ? (
+          <input
+            id={id}
+            name={name}
+            value={inputValue}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            autoComplete={autoComplete}
+            className='color-input'
+            {...handlers}
+          />
+        ) : null}
+      </section>
+
+      <Modal
+        id='input-color'
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        position='bottom right'
+        offset={5}
+        backdrop='transparent'
+        containerRef={containerRef}
+        className='input-color-selector'
+      >
+        <HexAlphaColorPicker id={id} color={value} onChange={setValue} />
+        <section className='color-input-container'>
+          {isSupported() ? (
+            <FaEyeDropper
+              onClick={() => {
+                void openEyeDropper();
+              }}
+            />
+          ) : (
+            <span />
+          )}
+          <HexColorInput
+            className='color-input'
+            id={id}
+            name={name}
+            color={value}
+            placeholder='Type a color'
+            prefixed
+            alpha
+            onChange={setValue}
+          />
+          <span />
+        </section>
+      </Modal>
+    </Field>
+  );
+};
+
+const InputColorController = ({ rules, ...props }: ControllerGeneratorProps<ColorProps, string>) => {
+  return <Controller Component={InputColor} defaultValue='#147EFB' inputProps={props} rules={rules} />;
+};
+
+InputColor.Controller = InputColorController;

package/src/components/form/input-color/input-color.styles.css

@@ -0,0 +1,92 @@
+@reference "polpo-tailwind-config/styles";
+
+.input-color {
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5em;
+
+    .input-color-value {
+        margin-left: 10px;
+    }
+
+    .color-input {
+        padding-right: 1em;
+        border-radius: inherit;
+        width: 100%;
+        @apply text-label;
+        font-family: var(--font-main) sans-serif;
+    }
+}
+
+.input-color-box {
+    background: white;
+    border-radius: 5px;
+    border: 2px solid;
+    width: 25px;
+    height: 25px;
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+        content: '';
+        position: absolute;
+        border-radius: inherit;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: repeating-conic-gradient(#cccccc 0% 25%, white 0% 50%) 50% / 8px 8px;
+        z-index: -1;
+    }
+}
+
+.input-color-selector {
+    display: grid;
+    gap: 10px;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    padding: 10px;
+    border-radius: 0 18px 18px 18px;
+    border: 1px solid;
+    box-shadow: 0 5px 30px -5px var(--color-gray-900);
+
+    .react-colorful__pointer {
+        width: 1em;
+        height: 1em;
+        border-radius: 50%;
+    }
+
+    .react-colorful__hue-pointer,
+    .react-colorful__alpha-pointer {
+        width: 8px;
+        height: 100%;
+        border-radius: 4px;
+        border-width: 2px;
+    }
+
+    .color-input-container {
+        display: grid;
+        grid-template-columns: 16px 1fr 16px;
+        align-items: center;
+        gap: 10px;
+        border: 1px solid;
+        border-radius: 8px;
+        padding: 0.5em;
+        width: 100%;
+        max-width: 200px;
+    }
+
+    .color-input {
+        padding: 0;
+        border-radius: inherit;
+        background: var(--color-background);
+        color: var(--color-foreground);
+        width: 100%;
+        @apply text-label;
+        font-family: var(--font-main) sans-serif;
+        letter-spacing: 2px;
+        text-align: center;
+    }
+}

package/src/components/form/input-file/index.ts

@@ -0,0 +1 @@
+export * from './input-file.component';

package/src/components/form/input-file/input-file.component.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { IconType } from 'react-icons';
+import { FaMagnifyingGlass, FaRegTrashCan } from 'react-icons/fa6';
+import { IoIosWarning } from 'react-icons/io';
+import { PiFilePdfFill, PiFilePngFill } from 'react-icons/pi';
+
+import { formatBytes } from '../../../helpers';
+import { FileTypeEnum, useInputHandlers } from '../../../hooks';
+import { Grid } from '../../../layouts';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './input-file.styles.css';
+
+type InputFileProps = {
+  label?: string;
+  accept?: string;
+  multiple?: boolean;
+  limitSize?: number;
+  errorTimeout?: number;
+};
+
+type InputFileValue = { [key: string]: File };
+
+export const InputFile = ({
+  name,
+  value = {},
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = 'Click to upload or drag and drop',
+  autoComplete = 'off',
+  accept,
+  multiple = false,
+  limitSize = 5000000,
+  errorTimeout = 3000,
+  label,
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}: UnControlledComponentProps<InputFileProps, InputFileValue>) => {
+  const [error, setError] = useState<string | null>(null);
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers<HTMLInputElement>({
+    onBlur,
+    onFocus,
+    onChange: e => {
+      const { files } = e.target;
+
+      if (files) saveFiles(files);
+    },
+  });
+
+  useEffect(() => {
+    let intervalId: ReturnType<typeof setTimeout> | null = null;
+
+    if (error !== null) {
+      intervalId = setTimeout(() => {
+        setError(null);
+      }, errorTimeout);
+    }
+
+    return () => {
+      if (intervalId !== null) {
+        clearTimeout(intervalId);
+      }
+    };
+  }, [error, errorTimeout]);
+
+  const saveFiles = (files: FileList) => {
+    const finalFiles = multiple ? { ...value } : {};
+
+    const filesToCheck = multiple ? files.length : 1;
+
+    for (let i = 0; i < filesToCheck; i++) {
+      const file = files.item(i);
+
+      if (!file) {
+        continue;
+      }
+
+      if (file.size < limitSize) {
+        finalFiles[file.name] = file;
+      } else {
+        setError(`File '${file.name}' size is larger than ${formatBytes(limitSize)}`);
+      }
+    }
+
+    setValue(finalFiles);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length) {
+      saveFiles(e.dataTransfer.files);
+    }
+  };
+
+  const getIconType = useCallback((type: FileTypeEnum): IconType => {
+    const iconTypes: Record<FileTypeEnum, IconType> = {
+      [FileTypeEnum.PNG]: PiFilePngFill,
+      [FileTypeEnum.PDF]: PiFilePdfFill,
+    };
+
+    return iconTypes[type] ?? IoIosWarning;
+  }, []);
+
+  const deleteFile = (file: File) => {
+    const prevValue = { ...value };
+    delete prevValue[file.name];
+    setValue(prevValue);
+  };
+
+  const deleteAll = () => {
+    setValue({});
+  };
+
+  const totalSize = useMemo(() => Object.values(value).reduce((prev, { size }) => prev + size, 0), [value]);
+
+  const renderFileToCard = (file: File, key: number) => {
+    const Icon = getIconType(file.type as FileTypeEnum);
+
+    return (
+      <section className='input-file-card' key={key}>
+        <section className='file-card--image'>
+          <Icon />
+        </section>
+        <Grid>
+          <Typography variant='label' noPadding nowrap>
+            {file.name}
+          </Typography>
+          <Typography noPadding variant='small'>
+            {formatBytes(file.size)}
+          </Typography>
+        </Grid>
+        <section className='file-card--delete' onClick={() => deleteFile(file)}>
+          <FaRegTrashCan />
+        </section>
+      </section>
+    );
+  };
+
+  return (
+    <section className='input-file-container'>
+      {Boolean(label) && (
+        <Typography variant='label-form' htmlFor={id} noPadding>
+          {label}
+        </Typography>
+      )}
+      <section className='input-file--box' onDrop={handleDrop}>
+        <section className='input-file--box--icon'>
+          <FaMagnifyingGlass />
+        </section>
+        <Grid>
+          <Typography variant='label-form' htmlFor={id} noPadding weight='bold'>
+            {placeholder}
+          </Typography>
+          <Typography variant='small' noPadding>
+            Max size ({formatBytes(limitSize)})
+          </Typography>
+        </Grid>
+        <input
+          id={id}
+          type='file'
+          name={name}
+          value=''
+          placeholder={placeholder}
+          readOnly={readOnly}
+          autoFocus={autoFocus}
+          disabled={disabled}
+          autoComplete={autoComplete}
+          className={className}
+          style={style}
+          accept={accept}
+          multiple={multiple}
+          title=''
+          {...handlers}
+        />
+      </section>
+      {error !== null && (
+        <Typography variant='small' noPadding className='error'>
+          {error}
+        </Typography>
+      )}
+      {Object.keys(value).length > 0 && (
+        <>
+          {multiple && (
+            <span className='total-info'>
+              <Typography variant='small' noPadding>
+                {Object.keys(value).length} files - {formatBytes(totalSize)}
+              </Typography>
+              <span className='total-info--delete' onClick={deleteAll}>
+                <FaRegTrashCan />
+              </span>
+            </span>
+          )}
+          <section className='input-file--files'>
+            <section className='input-file--files--content'>{Object.values(value).map(renderFileToCard)}</section>
+          </section>
+        </>
+      )}
+    </section>
+  );
+};
+
+const InputFileController = ({ rules, ...props }: ControllerGeneratorProps<InputFileProps, InputFileValue>) => {
+  return <Controller Component={InputFile} defaultValue={{}} inputProps={props} rules={rules} />;
+};
+
+InputFile.Controller = InputFileController;