polpo 0.1.13 → 0.1.16

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

@@ -0,0 +1,143 @@
+@reference "polpo-tailwind-config/styles";
+
+.input-file-container {
+    display: grid;
+    gap: 10px;
+
+    .input-file--box {
+        border: 1px solid;
+        border-radius: 5px;
+        position: relative;
+        transition: all 0.3s ease;
+        display: grid;
+        grid-template-columns: 32px 1fr;
+        padding: 10px;
+        gap: 10px;
+        background: var(--color-secondary-500);
+        color: var(--color-secondary-50);
+        align-items: center;
+
+        .input-file--box--icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 5px;
+            background: var(--color-primary-50);
+            color: var(--color-primary-500);
+            display: grid;
+            place-content: center;
+        }
+
+        input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: copy;
+            opacity: 0;
+        }
+
+        &:hover {
+            background: var(--color-primary-50);
+            color: var(--color-primary-500);
+
+            .input-file--box--icon {
+                background: var(--color-primary-500);
+                color: var(--color-primary-50);
+            }
+        }
+    }
+
+    .input-file--files {
+        max-height: 280px;
+        overflow-y: auto;
+        border: 1px solid;
+        border-radius: 5px;
+
+        .input-file--files--content {
+            display: grid;
+        }
+    }
+
+    .error {
+        color: tomato;
+    }
+
+    .total-info {
+        font-size: 1em;
+        display: grid;
+        grid-auto-flow: column;
+        justify-content: end;
+        align-items: center;
+        gap: 0.5em;
+
+        .total-info--delete {
+            display: grid;
+            place-content: center;
+            height: 100%;
+            background: transparent;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            aspect-ratio: 1 / 1;
+            border-radius: 50%;
+            width: 2em;
+            font-size: 0.8em;
+
+            &:hover {
+                background: var(--color-primary-500);
+                color: var(--color-primary-50);
+            }
+        }
+    }
+}
+
+.input-file-card {
+    display: grid;
+    grid-template-columns: 35px 1fr 35px;
+    gap: 1em;
+    align-items: center;
+    padding: 10px;
+    background: var(--color-background);
+
+    &:not(:last-child) {
+        border-bottom: 1px dashed;
+    }
+
+    &:hover {
+        .file-card--delete {
+            color: var(--color-primary-500);
+        }
+    }
+
+    .file-card--image {
+        background: var(--color-primary-500);
+        color: var(--color-primary-50);
+        width: 32px;
+        height: 32px;
+        border-radius: 5px;
+        display: grid;
+        place-content: center;
+        border: 1px solid;
+    }
+
+    .file-card--data {
+        display: grid;
+        font-size: 0.7em;
+        justify-content: start;
+    }
+
+    .file-card--delete {
+        border-radius: 5px;
+        display: grid;
+        place-content: center;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+            background: var(--color-primary-500);
+            color: var(--color-primary-50);
+        }
+    }
+}

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

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

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

@@ -0,0 +1,144 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { useInputHandlers } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+type FormatFunction = (value: number) => string;
+
+const RegexDecimal = {
+  comma: /(?!^-)[^0-9,]/g,
+  dot: /(?!^-)[^0-9.]/g,
+} as const;
+
+const getCleanedValue = (input: string, decimalSeparator = '.'): string => {
+  const regex = decimalSeparator === '.' ? RegexDecimal.dot : RegexDecimal.comma;
+  const cleaned = input.replace(regex, '').replace(',', '.');
+
+  if (!cleaned) {
+    return '';
+  }
+
+  return cleaned;
+};
+
+const getFormattedValue = (value: number, format: FormatFunction) => {
+  if (!value || Number.isNaN(value)) {
+    return format(0);
+  }
+
+  return format(value);
+};
+
+type FormatConfig = Intl.NumberFormatOptions & {
+  locales: Intl.LocalesArgument;
+};
+
+type IProps = InputFieldProps<{
+  pattern?: string;
+  min?: number;
+  max?: number;
+  format?: FormatConfig | FormatFunction;
+  decimalSeparator?: string;
+}>;
+
+export const InputNumber = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  pattern,
+  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,
+  decimalSeparator,
+  format = {
+    locales: 'en-US',
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  },
+  ...fieldProps
+}: UnControlledComponentProps<IProps, number>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const formatFunction = useMemo<FormatFunction>(() => {
+    if (typeof format === 'function') return format;
+
+    const { locales, ...formatConfig } = format;
+
+    return Intl.NumberFormat(locales, formatConfig).format;
+  }, [format]);
+  const [formattedValue, setFormattedValue] = useState(getFormattedValue(value, formatFunction));
+
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: e => {
+      const cleaned = getCleanedValue(e.target.value, decimalSeparator);
+
+      if (cleaned.endsWith('.')) {
+        setFormattedValue(e.target.value);
+      } else {
+        setFormattedValue(getFormattedValue(Number(cleaned), formatFunction));
+        setValue(Number(cleaned));
+      }
+    },
+    onBlur: e => {
+      const cleaned = getCleanedValue(e.target.value, decimalSeparator);
+      setFormattedValue(getFormattedValue(Number(cleaned), formatFunction));
+      setValue(Number(cleaned));
+
+      if (onBlur) onBlur(e);
+    },
+    onFocus: onFocus,
+  });
+
+  useEffect(() => {
+    const formatted = getFormattedValue(value, formatFunction);
+
+    if (formattedValue !== formatted) {
+      setFormattedValue(formatted);
+    }
+  }, [formatFunction, formattedValue, value]);
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <input
+        id={id}
+        type='text'
+        name={name}
+        className={className}
+        style={style}
+        value={formattedValue}
+        pattern={pattern}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        min={min}
+        max={max}
+        {...handlers}
+      />
+    </Field>
+  );
+};
+
+const InputController = ({ rules, ...props }: ControllerGeneratorProps<IProps, number>) => {
+  return <Controller Component={InputNumber} defaultValue={0} inputProps={props} rules={rules} />;
+};
+
+InputNumber.Controller = InputController;

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

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

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

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { IconType } from 'react-icons';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
+import { IoIosWarning } from 'react-icons/io';
+
+import { useInputHandlers, useToggleValues } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+type InputPasswordProps = InputFieldProps<{
+  rightIcon?: never;
+}>;
+
+export const InputPassword = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  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<InputPasswordProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const [type, toggle] = useToggleValues<'password' | 'text'>(['password', 'text']);
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur: onBlur,
+    onChange: e => setValue(e.target.value),
+    onFocus: onFocus,
+  });
+
+  const icon = useMemo<IconType>(() => {
+    if (type === 'password') return FiEye;
+
+    if (type === 'text') return FiEyeOff;
+
+    return IoIosWarning;
+  }, [type]);
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps} rightIcon={icon} onClickRightIcon={() => toggle()}>
+      <input
+        id={id}
+        type={type}
+        name={name}
+        className={className}
+        style={style}
+        value={value}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        {...handlers}
+      />
+    </Field>
+  );
+};
+
+const InputPasswordController = ({ rules, ...props }: ControllerGeneratorProps<InputPasswordProps, string>) => {
+  return <Controller Component={InputPassword} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+InputPassword.Controller = InputPasswordController;

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

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

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

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { ColorTypes, SizeTypes } from '../../component.types';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './radio.styles.css';
+
+type RadioProps = {
+  label?: string;
+  radioValue: string;
+  placeholder?: never;
+  color?: `${ColorTypes}`;
+  size?: `${SizeTypes}`;
+};
+
+export const Radio = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = 'off',
+  radioValue,
+  label,
+  color = ColorTypes.PRIMARY,
+  size = SizeTypes.REGULAR,
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}: UnControlledComponentProps<RadioProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers({
+    onChange: e => setValue(e.target.value),
+    onBlur: onBlur,
+    onFocus: onFocus,
+  });
+
+  const radioContainerClassName = useClassNames({
+    'radio-container': true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color),
+  });
+
+  const radioClassName = useClassNames({
+    radio: true,
+    'is-checked': radioValue === value,
+    [`size-${size}`]: Boolean(size),
+  });
+
+  return (
+    <section className={radioContainerClassName} style={style}>
+      <section className={radioClassName}>
+        <section className='radio-fill' />
+        <input
+          id={id}
+          type='radio'
+          name={name}
+          className={`radio-input ${className}`}
+          style={style}
+          value={radioValue}
+          checked={radioValue === value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          disabled={disabled || readOnly}
+          {...handlers}
+        />
+      </section>
+      {label ? (
+        <Typography variant='label-form' htmlFor={id} className='radio-label'>
+          {label}
+        </Typography>
+      ) : null}
+    </section>
+  );
+};
+
+const RadioController = ({ rules, ...props }: ControllerGeneratorProps<RadioProps, string>) => {
+  return <Controller Component={Radio} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+Radio.Controller = RadioController;

package/src/components/form/radio/radio.styles.css

@@ -0,0 +1,117 @@
+@reference "polpo-tailwind-config/styles";
+
+.radio {
+    border-radius: 50%;
+    background: var(--color-background-paper);
+    transition: all 300ms ease;
+    width: 1em;
+    height: 1em;
+    outline: 2px solid;
+    display: flex;
+    position: relative;
+    padding: 2px;
+
+    .radio-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    &.size-small {
+        font-size: 1em;
+    }
+
+    &.size-regular {
+        font-size: 1.2em;
+    }
+
+    &.size-large {
+        font-size: 1.4em;
+    }
+}
+
+.radio-fill {
+    transition: all 200ms ease-out;
+    border-radius: inherit;
+    margin: auto;
+    width: 0;
+    height: 0;
+}
+
+.radio-container {
+    --color: var(--color-gray-800);
+
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    width: fit-content;
+
+    .radio-label {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .radio {
+        color: var(--color);
+
+        &.is-checked {
+            .radio-fill {
+                width: 100%;
+                height: 100%;
+                background: var(--color);
+            }
+        }
+    }
+
+    .radio:hover,
+    &:has(.radio-label:hover) .radio {
+        box-shadow: 0 0 0 0.4em hsl(from var(--color) h s l / 50%);
+
+        .radio-fill {
+            width: 20%;
+            height: 20%;
+            background: hsl(from var(--color) h s l / 50%);
+        }
+
+        &:is(.is-checked) {
+            .radio-fill {
+                width: 80%;
+                height: 80%;
+                background: var(--color);
+            }
+        }
+    }
+
+    &.color-primary {
+        --color: var(--color-primary-500);
+    }
+
+    &.color-secondary {
+        --color: var(--color-secondary-500);
+    }
+
+    &.color-tertiary {
+        --color: var(--color-tertiary-500);
+    }
+
+    &.color-active {
+        --color: var(--color-active-500);
+    }
+
+    &.color-warning {
+        --color: var(--color-warning-500);
+    }
+
+    &.color-alert {
+        --color: var(--color-alert-500);
+    }
+
+    &.color-info {
+        --color: var(--color-info-500);
+    }
+}

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

@@ -0,0 +1 @@
+export { Select } from './select.component';

package/src/components/form/select/option.tsx

@@ -0,0 +1,101 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { Menu } from '../../modals';
+import { Typography } from '../../typography';
+
+import { useSelectContext } from './select.component';
+import { SelectItem } from './select.types';
+
+type OptionProps<T extends SelectItem> = {
+  children: React.ReactNode;
+  value: T;
+};
+
+export const Option = <T extends SelectItem>({ children, value }: OptionProps<T>) => {
+  const { multiselect, isEqualComparator, maxOptions, selectedValue, setValue, setIsOpen } = useSelectContext<T>();
+
+  const compareValuesIsEqual = useCallback(
+    (a: T, b: T): boolean => {
+      if (['number', 'string'].includes(typeof a)) {
+        return a === b;
+      }
+
+      return !!isEqualComparator && isEqualComparator(a, b);
+    },
+    [isEqualComparator],
+  );
+
+  const toggleOption = useCallback(
+    (isSelected: boolean) => {
+      if (isSelected) {
+        if (multiselect) {
+          if (maxOptions && Array.isArray(selectedValue) && selectedValue.length >= maxOptions) {
+            return;
+          }
+
+          setValue([...selectedValue, value]);
+        } else {
+          setValue(value);
+          setIsOpen(false);
+        }
+      } else {
+        if (multiselect) {
+          setValue(selectedValue.filter(item => !compareValuesIsEqual(item, value)));
+        } else {
+          setValue(null);
+          setIsOpen(false);
+        }
+      }
+    },
+    [multiselect, maxOptions, selectedValue, setValue, value, setIsOpen, compareValuesIsEqual],
+  );
+
+  const isSelected = useMemo(() => {
+    if (selectedValue === '' || selectedValue === null) {
+      return false;
+    }
+
+    if (!Array.isArray(selectedValue)) {
+      return compareValuesIsEqual(value, selectedValue);
+    }
+
+    if (['number', 'string'].includes(typeof value)) {
+      return selectedValue.includes(value);
+    }
+
+    return selectedValue.some(item => !!isEqualComparator && isEqualComparator(value, item));
+  }, [compareValuesIsEqual, isEqualComparator, selectedValue, value]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+
+        toggleOption(!(isSelected && multiselect));
+      }
+    },
+    [toggleOption, isSelected, multiselect],
+  );
+
+  const optionLabel = useMemo(() => {
+    if (typeof children === 'string') {
+      return (
+        <Typography data-value={value} variant='label' nowrap>
+          {children}
+        </Typography>
+      );
+    }
+
+    return children;
+  }, [children, value]);
+
+  return (
+    <Menu.Option
+      label={optionLabel}
+      onKeyDown={handleKeyDown}
+      asCheckbox={multiselect}
+      selected={isSelected}
+      onClick={(selected: boolean) => toggleOption(multiselect ? selected : true)}
+    />
+  );
+};