polpo 0.1.7 → 0.1.8

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

@@ -1,143 +0,0 @@
-import styled from 'styled-components';
-
-export const InputFileContainerStyle = styled.section`
-  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: ${props => props.theme.colors.secondary.main};
-    color: ${props => props.theme.colors.secondary.contrast};
-    align-items: center;
-
-    &--icon {
-      width: 32px;
-      height: 32px;
-      border-radius: 5px;
-      background: ${props => props.theme.colors.primary.contrast};
-      color: ${props => props.theme.colors.primary.main};
-      display: grid;
-      place-content: center;
-    }
-
-    input {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: copy;
-      opacity: 0;
-    }
-
-    &:hover {
-      background: ${props => props.theme.colors.primary.contrast};
-      color: ${props => props.theme.colors.primary.main};
-
-      .input-file--box--icon {
-        background: ${props => props.theme.colors.primary.main};
-        color: ${props => props.theme.colors.primary.contrast};
-      }
-    }
-  }
-
-  .input-file--files {
-    max-height: 280px;
-    overflow-y: auto;
-    border: 1px solid;
-    border-radius: 5px;
-
-    &--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;
-
-    &--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: ${props => props.theme.colors.primary.main};
-        color: ${props => props.theme.colors.primary.contrast};
-      }
-    }
-  }
-`;
-
-export const FileCardStyle = styled.section`
-  display: grid;
-  grid-template-columns: 35px 1fr 35px;
-  gap: 1em;
-  align-items: center;
-  padding: 10px;
-  background: ${props => props.theme.colors.background.main};
-
-  &:not(:last-child) {
-    border-bottom: 1px dashed;
-  }
-
-  &:hover {
-    .file-card--delete {
-      color: ${props => props.theme.colors.primary.main};
-    }
-  }
-
-  .file-card--image {
-    background: ${props => props.theme.colors.primary.main};
-    color: ${props => props.theme.colors.primary.contrast};
-    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: ${props => props.theme.colors.primary.main};
-      color: ${props => props.theme.colors.primary.contrast};
-    }
-  }
-`;

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

@@ -1,214 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

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

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

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-
-import { ColorVariants, SizeVariants } from '../../../core/variants';
-import { Grid, SectionLayout } 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 },
-    size: { control: 'inline-radio', options: Object.values(SizeVariants) },
-    placeholder: { table: { disable: true } },
-    color: { control: { type: 'inline-radio', options: Object.values(ColorVariants) } },
-  },
-  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 {...args} name='radio' value={value} label='Option B' radioValue='B' setValue={setValue} />
-        <Radio {...args} name='radio' value={value} label='Option C' radioValue='C' setValue={setValue} />
-        <Radio {...args} name='radio' value={value} label='Option D' radioValue='D' setValue={setValue} />
-        <Radio {...args} 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: {},
-};
-
-export const Colors: Story = {
-  args: {},
-  argTypes: {
-    color: { control: false },
-  },
-  render: args => {
-    const [value, setValue] = useState('Primary');
-
-    return (
-      <SectionLayout>
-        <Radio {...args} color='primary' value={value} setValue={setValue} radioValue='Primary' label='Primary' />
-        <Radio {...args} color='secondary' value={value} setValue={setValue} radioValue='Secondary' label='Secondary' />
-        <Radio {...args} color='tertiary' value={value} setValue={setValue} radioValue='Tertiary' label='Tertiary' />
-        <Radio {...args} color='info' value={value} setValue={setValue} radioValue='Info' label='Info' />
-        <Radio {...args} color='active' value={value} setValue={setValue} radioValue='Active' label='Active' />
-        <Radio {...args} color='warning' value={value} setValue={setValue} radioValue='Warning' label='Warning' />
-        <Radio {...args} color='alert' value={value} setValue={setValue} radioValue='Alert' label='Alert' />
-      </SectionLayout>
-    );
-  },
-};

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

@@ -1,79 +0,0 @@
-import styled from 'styled-components';
-
-export const RadioFillStyle = styled.section`
-  transition: all 200ms ease-out;
-  border-radius: inherit;
-  margin: auto;
-  width: 0;
-  height: 0;
-`;
-
-export const RadioStyle = styled.section`
-  border-radius: 50%;
-  background: ${props => props.theme.colors.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;
-  }
-`;
-
-type RadioContainerStyleProps = {
-  $color: string;
-};
-
-export const RadioContainerStyle = styled.section<RadioContainerStyleProps>`
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  width: fit-content;
-
-  .radio-label {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  ${RadioStyle} {
-    color: ${props => props.$color};
-
-    &.is-checked {
-      ${RadioFillStyle} {
-        width: 100%;
-        height: 100%;
-        background: ${props => props.$color};
-      }
-    }
-  }
-
-  ${RadioStyle}:hover,
-  &:has(.radio-label:hover) ${RadioStyle} {
-    box-shadow: 0 0 0 0.4em ${props => props.$color}88;
-
-    ${RadioFillStyle} {
-      width: 20%;
-      height: 20%;
-      background: ${props => props.$color}88;
-    }
-
-    &:is(.is-checked) {
-      ${RadioFillStyle} {
-        width: 80%;
-        height: 80%;
-        background: ${props => props.$color};
-      }
-    }
-  }
-`;