polpo 0.1.7 → 0.1.9

package/src/components/form/field/field.tsx

@@ -1,86 +0,0 @@
-import React, { ForwardedRef } from 'react';
-
-import { Icon, IconNameT } from '../../icon';
-import { Typography } from '../../typography';
-
-import { FieldStyle } from './field.style';
-import { FieldOrientation, FieldProps, FieldVariant } from './field.types';
-
-import { useClassNames } from '@polpo/hooks';
-
-type GetIconParams = {
-  iconName?: IconNameT;
-  onClick: (e: React.MouseEvent) => void;
-  className: string;
-};
-
-const getIcon = ({ iconName, className, onClick }: GetIconParams) =>
-  iconName ? <Icon className={className} name={iconName} onClick={onClick} /> : <span />;
-
-const FieldComponent = (
-  {
-    id,
-    label,
-    leftIcon,
-    rightIcon,
-    errorIcon = 'cross',
-    error,
-    onClickLeftIcon,
-    onClickRightIcon,
-    fieldOrientation = FieldOrientation.VERTICAL,
-    children,
-    isFocus = false,
-    variant,
-  }: FieldProps,
-  ref: ForwardedRef<HTMLElement>,
-) => {
-  const fieldClassName = useClassNames({
-    focus: isFocus,
-    error: !!error,
-    'variant-content-border': variant === FieldVariant.CONTENT_BORDER,
-    'variant-content-line': variant === FieldVariant.CONTENT_LINE,
-    'variant-full-border': variant === FieldVariant.FULL_BORDER,
-    'variant-inline': fieldOrientation === FieldOrientation.HORIZONTAL,
-  });
-
-  const handleClick = (callback?: () => void) => (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const input = document.getElementById(id);
-    input?.focus();
-    input?.click();
-    callback && callback();
-  };
-
-  return (
-    <FieldStyle className={fieldClassName} ref={ref}>
-      {label ? (
-        <Typography className='field-label' noPadding variant='label-form' htmlFor={id}>
-          {label}
-        </Typography>
-      ) : null}
-      <section className='field-content'>
-        {getIcon({
-          className: 'field-left-icon',
-          iconName: leftIcon,
-          onClick: handleClick(onClickLeftIcon),
-        })}
-        <section className='field-children'>{children}</section>
-        {getIcon({
-          className: 'field-right-icon',
-          iconName: rightIcon,
-          onClick: handleClick(onClickRightIcon),
-        })}
-      </section>
-      {Boolean(error) && (
-        <section className='field-message'>
-          {errorIcon ? <Icon name={errorIcon} size={10} /> : <span />}
-          <Typography noPadding variant='small'>
-            {error}
-          </Typography>
-        </section>
-      )}
-    </FieldStyle>
-  );
-};
-
-export const Field = React.forwardRef(FieldComponent);

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

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { IconNameT } from '../../icon';
-
-export enum FieldVariant {
-  FULL_BORDER = 'full-border',
-  CONTENT_BORDER = 'content-border',
-  CONTENT_LINE = 'line',
-}
-
-export enum FieldOrientation {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical',
-}
-
-type FieldSharedProps = {
-  rightIcon?: IconNameT;
-  leftIcon?: IconNameT;
-  errorIcon?: IconNameT;
-  onClickLeftIcon?: () => void;
-  onClickRightIcon?: () => void;
-  label?: string;
-  variant?: `${FieldVariant}`;
-};
-
-export type FieldProps = FieldSharedProps & {
-  children: React.ReactNode;
-  id: string;
-  error?: string;
-  isFocus?: boolean;
-  fieldOrientation?: `${FieldOrientation}`;
-};
-
-export type InputFieldProps<T> = T & FieldSharedProps;

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

@@ -1,2 +0,0 @@
-export * from './field';
-export * from './field.types';

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

@@ -1,50 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-
-import { Grid } from '../../layouts';
-
-import {
-  ControlledComponentProps,
-  ControlledProps,
-  SharedProps,
-  UnControlledComponentProps,
-  UnControlledProps,
-} from './form.types';
-
-export const SharedArgTypes: Meta<SharedProps>['argTypes'] = {
-  name: { control: false },
-  className: { control: false },
-  style: { control: false },
-  autoComplete: { control: false },
-  autoFocus: { control: 'boolean' },
-  placeholder: { control: 'text' },
-  disabled: { control: 'boolean' },
-  readOnly: { control: 'boolean' },
-};
-
-export const UnControlledArgTypes: Meta<UnControlledProps<unknown>>['argTypes'] = {
-  value: { control: false },
-  invalid: { control: 'boolean' },
-  isTouched: { control: 'boolean' },
-  isDirty: { control: 'boolean' },
-  error: { control: 'text' },
-};
-
-export const ControlledArgTypes: Meta<ControlledProps<unknown>>['argTypes'] = {
-  defaultValue: { control: false },
-};
-
-export const UnControlledComponentArgTypes: Meta<UnControlledComponentProps<{}, unknown>>['argTypes'] = {
-  ...SharedArgTypes,
-  ...UnControlledArgTypes,
-};
-
-export const ControlledComponentArgTypes: Meta<ControlledComponentProps<{}, unknown>>['argTypes'] = {
-  ...SharedArgTypes,
-  ...ControlledArgTypes,
-};
-
-export const ContainerDecorator = (Story: StoryFn) => (
-  <Grid gtc='300px'>
-    <Story />
-  </Grid>
-);

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

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

@@ -1,14 +0,0 @@
-export * from './checkbox';
-export * from './controller';
-export * from './date-picker';
-export * from './field';
-export * from './input';
-export * from './input-password';
-export * from './input-color';
-export * from './input-file';
-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

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

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

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

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

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

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

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

@@ -1,94 +0,0 @@
-import styled from 'styled-components';
-
-import { Modal } from '../../modals';
-
-export const InputColorStyle = styled.section`
-  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%;
-    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(Modal)`
-  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

@@ -1,162 +0,0 @@
-import Color from 'color';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import useEyeDropper from 'use-eye-dropper';
-
-import { Icon } from '../../icon';
-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 } 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 containerRef = useRef<HTMLElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const { handlers, isFocus } = useInputHandlers({
-    onChange: e => setInputValue(e.target.value),
-    onBlur: e => {
-      setInputColor();
-      onBlur && onBlur(e);
-    },
-    onFocus: e => {
-      setInputColor();
-      onFocus && onFocus(e);
-    },
-  });
-
-  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();
-          setIsOpen(true);
-        }}
-        ref={containerRef}
-      >
-        <InputColorBoxStyle
-          className={className}
-          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}
-      </InputColorStyle>
-
-      <InputColorSelectorStyle
-        id='input-color'
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        position='bottom right'
-        offset={5}
-        backdrop='transparent'
-        containerRef={containerRef}
-      >
-        <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>
-    </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

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

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

@@ -1,40 +0,0 @@
-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: {},
-};