polpo 0.1.0

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

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Input } from './input';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Form/Input',
+  component: Input,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    type: { control: 'select', options: ['email', 'number', 'search', 'tel', 'text', 'url'] },
+    min: { control: { type: 'range' }, if: { arg: 'type', eq: 'number' } },
+    max: { control: { type: 'range' }, if: { arg: 'type', eq: 'number' } },
+  },
+  args: {
+    label: 'Input',
+    type: 'text',
+    min: 0,
+    max: 0,
+    placeholder: 'Input',
+    ...FieldSharedArgs,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState('');
+
+    return <Input {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { useInputHandlers } from '@polpo/hooks';
+
+type IProps = InputFieldProps<{
+  type?: 'email' | 'number' | 'search' | 'tel' | 'text' | 'url';
+  min?: number;
+  max?: number;
+}>;
+
+export const Input = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  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}
+        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';

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

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { InputColor } from './input-color';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputColor> = {
+  title: 'Form/InputColor',
+  component: InputColor,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    showValueText: { control: 'boolean' },
+  },
+  args: {
+    label: 'Input Color',
+    showValueText: true,
+    rightIcon: undefined,
+    leftIcon: undefined,
+    ...FieldSharedArgs,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState('#147EFB');
+
+    return <InputColor {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputColor>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Box: Story = {
+  args: {
+    label: '',
+    showValueText: false,
+    variant: undefined,
+  },
+};

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

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+
+export const InputColorStyle = styled.section`
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: start;
+
+  .input-color-value {
+    margin-left: 10px;
+  }
+
+  .color-input {
+    padding: 0 1em;
+    border-radius: inherit;
+    width: 100%;
+    font-size: ${props => props.theme.constants.typography.label.fontSize};
+    font-family: ${props => props.theme.constants.fontFamily};
+  }
+`;
+
+export const InputColorBoxStyle = styled.section`
+  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;
+  }
+`;
+
+export const InputColorSelectorStyle = styled.section`
+  position: fixed;
+  z-index: 1;
+  display: grid;
+  gap: 10px;
+  background: ${props => props.theme.colors.background.main};
+  color: ${props => props.theme.colors.text.main};
+  padding: 10px;
+  border-radius: 0 18px 18px 18px;
+  border: 1px solid;
+  box-shadow: 0 5px 30px -5px ${props => props.theme.colors.gray1};
+
+  .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: ${props => props.theme.colors.background.main};
+    color: ${props => props.theme.colors.text.main};
+    width: 100%;
+    font-size: ${props => props.theme.constants.typography.label.fontSize};
+    font-family: ${props => props.theme.constants.fontFamily};
+    letter-spacing: 2px;
+    text-align: center;
+  }
+`;

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

@@ -0,0 +1,159 @@
+import Color from 'color';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
+import useEyeDropper from 'use-eye-dropper';
+
+import { Icon } from '../../icon';
+import { Modal } from '../../modals';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { InputColorBoxStyle, InputColorSelectorStyle, InputColorStyle } from './input-color.style';
+
+import { useInputHandlers, useModalInContainer } from '@polpo/hooks';
+
+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 { handlers, isFocus } = useInputHandlers({
+    onChange: e => setInputValue(e.target.value),
+    onBlur: e => {
+      setInputColor();
+      onBlur && onBlur(e);
+    },
+    onFocus: e => {
+      setInputColor();
+      onFocus && onFocus(e);
+    },
+  });
+  const { modalRef, isVisible, setIsVisible, modalStyle, containerRef } = useModalInContainer({
+    position: 'bottom',
+    distancePercentage: 0,
+  });
+
+  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]);
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <InputColorStyle
+        onClick={e => {
+          e.stopPropagation();
+          setIsVisible(true);
+        }}
+        ref={containerRef}
+      >
+        <InputColorBoxStyle
+          className={className}
+          style={{
+            borderColor,
+            background: value,
+            color: value,
+            ...style,
+          }}
+        >
+          <Modal id='input-color' isOpen={isVisible}>
+            <InputColorSelectorStyle ref={modalRef} style={modalStyle}>
+              <HexAlphaColorPicker id={id} color={value} onChange={setValue} />
+              <section className='color-input-container'>
+                {isSupported() ? (
+                  <Icon
+                    name='dropper'
+                    onClick={() => {
+                      void openEyeDropper();
+                    }}
+                  />
+                ) : (
+                  <span />
+                )}
+                <HexColorInput
+                  className='color-input'
+                  id={id}
+                  name={name}
+                  color={value}
+                  placeholder='Type a color'
+                  prefixed
+                  alpha
+                  onChange={setValue}
+                />
+                <span />
+              </section>
+            </InputColorSelectorStyle>
+          </Modal>
+        </InputColorBoxStyle>
+        {showValueText ? (
+          <input
+            id={id}
+            name={name}
+            value={inputValue}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            autoComplete={autoComplete}
+            className='color-input'
+            {...handlers}
+          />
+        ) : null}
+      </InputColorStyle>
+    </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-file/index.ts

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

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

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { InputFile } from './input-file';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputFile> = {
+  title: 'Form/InputFile',
+  component: InputFile,
+  argTypes: {
+    ...UnControlledComponentArgTypes,
+    label: { control: 'text' },
+    accept: { control: 'text' },
+    multiple: { control: 'boolean' },
+    limitSize: { control: 'number' },
+    errorTimeout: { control: 'number' },
+  },
+  args: {
+    label: 'Input File',
+    accept: 'image/*',
+    multiple: false,
+    limitSize: 5000000,
+    errorTimeout: 3000,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState<{ [key: string]: File }>({});
+
+    return <InputFile {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputFile>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,143 @@
+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};
+    }
+  }
+`;