polpo 0.1.0

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

@@ -0,0 +1,214 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Grid } from '../../../layouts';
+import { Icon, IconNameT } from '../../icon';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { FileCardStyle, InputFileContainerStyle } from './input-file.style';
+
+import { formatBytes } from '@polpo/helpers';
+import { FileTypeEnum, useInputHandlers } from '@polpo/hooks';
+
+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;
+      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 = (type: FileTypeEnum): IconNameT => {
+    const iconTypes: Record<FileTypeEnum, IconNameT> = {
+      [FileTypeEnum.PNG]: 'download',
+      [FileTypeEnum.PDF]: 'download',
+    };
+
+    return iconTypes[type] ?? 'warning';
+  };
+
+  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) => (
+    <FileCardStyle key={key}>
+      <section className='file-card--image'>
+        <Icon name={getIconType(file.type as FileTypeEnum)} />
+      </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)}>
+        <Icon name='trash-can' />
+      </section>
+    </FileCardStyle>
+  );
+
+  return (
+    <InputFileContainerStyle>
+      {Boolean(label) && (
+        <Typography variant='label-form' htmlFor={id} noPadding>
+          {label}
+        </Typography>
+      )}
+      <section className='input-file--box' onDrop={handleDrop}>
+        <section className='input-file--box--icon'>
+          <Icon name='magnifying-glass' />
+        </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}>
+                <Icon name='trash-can' />
+              </span>
+            </span>
+          )}
+          <section className='input-file--files'>
+            <section className='input-file--files--content'>{Object.values(value).map(renderFileToCard)}</section>
+          </section>
+        </>
+      )}
+    </InputFileContainerStyle>
+  );
+};
+
+const InputFileController = ({ rules, ...props }: ControllerGeneratorProps<InputFileProps, InputFileValue>) => {
+  return <Controller Component={InputFile} defaultValue={{}} inputProps={props} rules={rules} />;
+};
+
+InputFile.Controller = InputFileController;

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

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

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

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { InputPassword } from './input-password';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputPassword> = {
+  title: 'Form/InputPassword',
+  component: InputPassword,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    rightIcon: { table: { disable: true } },
+  },
+  args: {
+    label: 'Password',
+    placeholder: 'Password',
+    ...FieldSharedArgs,
+    rightIcon: undefined,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState('');
+
+    return <InputPassword {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputPassword>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+
+import { Controller, InputFieldProps } from '..';
+import { IconNameT } from '../../icon';
+import { Field } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { useInputHandlers, useToggleValues } from '@polpo/hooks';
+
+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 iconName = useMemo<IconNameT>(() => {
+    if (type === 'password') return 'eye' as IconNameT;
+
+    if (type === 'text') return 'eye-hidden' as IconNameT;
+
+    return 'warning' as IconNameT;
+  }, [type]);
+
+  return (
+    <Field
+      id={id}
+      error={error}
+      isFocus={isFocus}
+      {...fieldProps}
+      rightIcon={iconName}
+      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';

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

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Grid } from '../../../layouts';
+import { UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Radio } from './radio';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Form/Radio',
+  component: Radio,
+  argTypes: {
+    ...UnControlledComponentArgTypes,
+    label: { control: 'text' },
+    radioValue: { control: false },
+    placeholder: { table: { disable: true } },
+  },
+  args: {
+    label: 'Option A',
+    placeholder: undefined,
+  },
+  render: args => {
+    const [value, setValue] = useState('A');
+
+    return (
+      <Grid gap='0.4em'>
+        <Radio {...args} name='radio' value={value} radioValue='A' setValue={setValue} />
+        <Radio name='radio' value={value} label='Option B' radioValue='B' setValue={setValue} />
+        <Radio name='radio' value={value} label='Option C' radioValue='C' setValue={setValue} />
+        <Radio name='radio' value={value} label='Option D' radioValue='D' setValue={setValue} />
+        <Radio name='radio' value={value} label='Option E' radioValue='E' setValue={setValue} />
+      </Grid>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const RadioStyle = styled.section`
+  border-radius: 50%;
+  background: ${props => props.theme.colors.gray9};
+  color: ${props => props.theme.colors.gray6};
+  border: 2px solid;
+  transition: all 300ms ease;
+  position: relative;
+  padding: 2px;
+
+  .radio-dot {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    display: block;
+    opacity: 0;
+    transition: opacity 300ms ease;
+    background: ${props => props.theme.colors.primary.main};
+  }
+
+  &.is-checked {
+    background: ${props => props.theme.colors.primary.contrast};
+    color: ${props => props.theme.colors.primary.main};
+
+    .radio-dot {
+      opacity: 1;
+    }
+  }
+
+  .radio-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+  }
+`;
+
+export const RadioContainerStyle = styled.section`
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  width: fit-content;
+
+  .radio-label {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  ${RadioStyle}:hover,
+  &:has(.radio-label:hover) ${RadioStyle} {
+    box-shadow: 0 0 0 0.4em ${props => props.theme.colors.primary.main}88;
+  }
+`;

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

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { RadioContainerStyle, RadioStyle } from './radio.style';
+
+import { useInputHandlers } from '@polpo/hooks';
+
+type RadioProps = {
+  label?: string;
+  radioValue: string;
+  placeholder?: never;
+};
+
+export const Radio = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = 'off',
+  radioValue,
+  label,
+  /*
+   * 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,
+  });
+
+  return (
+    <RadioContainerStyle className={className} style={style}>
+      <RadioStyle className={radioValue === value ? 'is-checked' : ''}>
+        <span className='radio-dot' />
+        <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}
+        />
+      </RadioStyle>
+      {label ? (
+        <Typography variant='label-form' htmlFor={id} className='radio-label'>
+          {label}
+        </Typography>
+      ) : null}
+    </RadioContainerStyle>
+  );
+};
+
+const RadioController = ({ rules, ...props }: ControllerGeneratorProps<RadioProps, string>) => {
+  return <Controller Component={Radio} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+Radio.Controller = RadioController;

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

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

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

@@ -0,0 +1,140 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+
+import { InfinityScroll } from '../../infinity-scroll';
+import { Modal } from '../../modals';
+import { Typography } from '../../typography';
+
+import { SelectOption } from './select-option';
+import { OptionsHeaderStyle, OptionsStyle } from './select.style';
+import { OptionsProps, SelectItem } from './select.types';
+
+import { useEventListener, useMediaQuery } from '@polpo/hooks';
+
+export const Options = <T extends SelectItem>({
+  onSearchQuery,
+  searchQueryValue,
+  value,
+  compareValueOrValuesAreEqual,
+  searchQueryPlaceholder = 'Search option',
+  multiselect = false,
+  selectOption,
+  unselectOption,
+  isOpen,
+  style,
+  options,
+  loadMore = () => null,
+  isLoading = false,
+  hasNextPage = false,
+  modalRef,
+  Component,
+  variant,
+}: OptionsProps<T>) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(`(min-width: ${theme.constants.breakpoints.mobileL})`);
+  const [internalSearchQuery, setInternalSearchQuery] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearchQuery = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = e.target;
+      onSearchQuery && onSearchQuery(value);
+      setInternalSearchQuery(value);
+    },
+    [onSearchQuery],
+  );
+
+  useEventListener('keydown', e => {
+    if (['ArrowDown', 'ArrowUp'].includes(e.code)) {
+      e.preventDefault();
+      const focusedItem = document.activeElement;
+      const isListItem = focusedItem?.tagName === 'LI';
+
+      if (isOpen && isListItem) {
+        switch (e.code) {
+          case 'ArrowDown':
+            (focusedItem?.nextSibling as HTMLElement)?.focus();
+
+            break;
+          case 'ArrowUp':
+            (focusedItem?.previousElementSibling as HTMLElement)?.focus();
+
+            break;
+        }
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      } else {
+        modalRef.current?.focus();
+      }
+    }
+  }, [isOpen, modalRef]);
+
+  const renderInternalOption = useCallback(
+    (option: T, key: number) => (
+      <SelectOption
+        key={key}
+        id={`${key}`}
+        selected={!!value && value !== '' && compareValueOrValuesAreEqual(option, value)}
+        data={option}
+        multiselect={multiselect}
+        unselectOption={unselectOption}
+        selectOption={selectOption}
+        Component={Component}
+        variant={variant}
+      />
+    ),
+    [value, compareValueOrValuesAreEqual, multiselect, unselectOption, selectOption, Component, variant],
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      id='form-select'
+      backdrop={isMobile ? 'transparent' : 'blur'}
+      opacity={isMobile ? 0 : 0.8}
+      zIndex={150}
+    >
+      <OptionsStyle ref={modalRef} style={{ ...style, zIndex: 150 }} tabIndex={-1}>
+        {onSearchQuery && (
+          <OptionsHeaderStyle>
+            <input
+              name='query'
+              className='input-search'
+              value={searchQueryValue ?? internalSearchQuery}
+              onChange={handleSearchQuery}
+              placeholder={searchQueryPlaceholder}
+              onClick={e => e.stopPropagation()}
+              ref={searchInputRef}
+              autoFocus
+            />
+          </OptionsHeaderStyle>
+        )}
+        <section className='options-list-container' tabIndex={-1}>
+          <ul className='options-list' role='listbox'>
+            {options.length === 0 ? (
+              <li className='option option-empty' tabIndex={-1}>
+                <Typography noPadding variant='label'>
+                  No options to select
+                </Typography>
+              </li>
+            ) : (
+              <InfinityScroll
+                isLoading={isLoading}
+                hasNextPage={hasNextPage}
+                loadMore={loadMore}
+                data={options}
+                renderItem={renderInternalOption}
+              />
+            )}
+          </ul>
+        </section>
+      </OptionsStyle>
+    </Modal>
+  );
+};