polpo 0.1.0

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

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+export type SelectItem = string | number | Record<string, unknown> | unknown;
+
+export type MultiValue<T extends SelectItem> = Array<T>;
+
+export type SingleValue<T extends SelectItem> = T | null;
+
+export type SelectValue<T extends SelectItem> = SingleValue<T> | MultiValue<T>;
+
+// SELECT
+
+export type SharedSelectProps<T extends SelectItem> = InputFieldProps<{
+  options: Array<T>;
+  renderOption: (item: T) => React.ReactNode;
+  isEqualComparator?: (a: T, b: T) => boolean;
+  searchQueryValue?: string;
+  searchQueryPlaceholder?: string;
+  onSearchQuery?: (value: string) => void;
+  loadMore?: () => void;
+  isLoading?: boolean;
+  hasNextPage?: boolean;
+  maxOptions?: number;
+  showClearOption?: boolean;
+}>;
+
+export type MultiSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
+  multiselect: true;
+  optionVariant?: `${SelectOptionVariant}`;
+};
+
+export type SingleSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
+  multiselect?: false;
+  optionVariant?: never;
+};
+
+export type UnControlledSelectProps<T extends SelectItem> =
+  | UnControlledComponentProps<MultiSelectProps<T>, MultiValue<T>>
+  | UnControlledComponentProps<SingleSelectProps<T>, SingleValue<T>>;
+
+export type ControllerGeneratorSelectProps<T extends SelectItem> =
+  | ControllerGeneratorProps<MultiSelectProps<T>, MultiValue<T>>
+  | ControllerGeneratorProps<SingleSelectProps<T>, SingleValue<T>>;
+
+// SELECT OPTIONS
+
+export type OptionsProps<T extends SelectItem> = {
+  isOpen: boolean;
+  style?: React.CSSProperties;
+  onSearchQuery?: (value: string) => void;
+  searchQueryValue?: string;
+  searchQueryPlaceholder?: string;
+  compareValueOrValuesAreEqual: (a: T, b: SelectValue<T>) => boolean;
+  loadMore?: () => void;
+  isLoading?: boolean;
+  hasNextPage?: boolean;
+  options: Array<T>;
+  selectOption: (option: T) => void;
+  unselectOption: (option: T) => void;
+  modalRef: React.RefObject<HTMLElement>;
+  Component: React.FC<OptionComponentProps<T>>;
+  multiselect?: boolean;
+  value: SelectValue<T>;
+  variant: `${SelectOptionVariant}`;
+};
+
+// SELECT OPTION
+
+export enum SelectOptionVariant {
+  CHECKBOX = 'checkbox',
+  ICON = 'icon',
+  DEFAULT = 'default',
+}
+
+export type OptionComponentProps<T extends SelectItem> = {
+  data: T;
+  isSelected: boolean;
+  multiselect: boolean;
+};
+
+export type SelectOptionProps<T extends SelectItem> = {
+  id: string;
+  selected: boolean;
+  selectOption: (value: T) => void;
+  unselectOption: (value: T) => void;
+  data: T;
+  multiselect: boolean;
+  Component: React.FC<OptionComponentProps<T>>;
+  variant: `${SelectOptionVariant}`;
+};

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

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

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

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Slider } from './slider';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Form/Slider',
+  component: Slider,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+  },
+  args: {
+    label: 'Slider',
+    min: 0,
+    max: 100,
+    step: 1,
+    ...FieldSharedArgs,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState(0);
+
+    return <Slider {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+
+type SliderStyleProps = {
+  $isFocus: boolean;
+};
+
+export const SliderStyle = styled.section<SliderStyleProps>`
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  align-items: center;
+  gap: 10px;
+
+  .slider {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: grid;
+    align-items: center;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 20px;
+      height: 20px;
+      border-radius: 1em;
+      background: ${props => props.theme.colors.primary.main};
+      box-shadow: 0 0 0 0 ${props => props.theme.colors.gray5};
+      margin-top: -8px;
+      transition: all 300ms ease;
+      cursor: pointer;
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: 4px;
+      border-radius: 1em;
+      background: ${props => props.theme.colors.primary.light}88;
+      transition: all 300ms ease;
+    }
+
+    &:focus,
+    &:hover {
+      &::-webkit-slider-thumb {
+        background: ${props => props.theme.colors.primary.main};
+        box-shadow: 0 0 0 6px ${props => props.theme.colors.primary.main}88;
+      }
+    }
+
+    &:active {
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 12px ${props => props.theme.colors.primary.main}55;
+      }
+    }
+
+    &:focus {
+      &::-webkit-slider-runnable-track {
+        background: ${props => props.theme.colors.primary.light};
+      }
+    }
+  }
+
+  &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
+  &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
+    background: ${props => props.theme.colors.primary.main};
+    box-shadow: 0 0 0 6px ${props => props.theme.colors.primary.main}55;
+  }
+
+  .slider-number {
+    transition: all 300ms ease;
+    border: 1px solid;
+    border-radius: 5px;
+    text-align: center;
+    font-size: ${props => props.theme.constants.typography.label.fontSize};
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
+    padding: 4px 8px;
+    font-weight: bold;
+    color: ${props => (props.$isFocus ? props.theme.colors.primary : 'inherit')};
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+`;

package/src/components/form/slider/slider.tsx

@@ -0,0 +1,108 @@
+import { useMemo } from 'react';
+
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { SliderStyle } from './slider.style';
+
+import { useInputHandlers } from '@polpo/hooks';
+
+type SliderProps = InputFieldProps<{
+  min?: number;
+  max?: number;
+  step?: number;
+}>;
+
+export const Slider = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  min,
+  max,
+  step,
+  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<SliderProps, number>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const onBlurInput = (e: React.FocusEvent<HTMLInputElement>) => {
+    onBlur && onBlur(e);
+    const parsedValue = parseInt(`${value}`);
+
+    if (min !== undefined && parsedValue < min) {
+      setValue(min);
+    }
+
+    if (max !== undefined && parsedValue > max) {
+      setValue(max);
+    }
+
+    setValue(parsedValue);
+  };
+
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur: onBlurInput,
+    onChange: e => setValue(+e.target.value),
+    onFocus: onFocus,
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <SliderStyle $isFocus={isFocus}>
+        <input
+          id={id}
+          type='range'
+          name={name}
+          className={`slider ${className}`}
+          style={style}
+          value={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          min={min}
+          max={max}
+          step={step}
+          {...handlers}
+        />
+        <input
+          id={id}
+          type='number'
+          name={name}
+          className={`slider-number ${className}`}
+          style={style}
+          value={value}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          readOnly={readOnly}
+          min={min}
+          max={max}
+          step={step}
+          {...handlers}
+        />
+      </SliderStyle>
+    </Field>
+  );
+};
+
+const SliderController = ({ rules, ...props }: ControllerGeneratorProps<SliderProps, number>) => {
+  return <Controller Component={Slider} defaultValue={0} inputProps={props} rules={rules} />;
+};
+
+Slider.Controller = SliderController;

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

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

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

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import { IconNames } from '../../icon';
+import { UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Switch } from './switch';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Form/Switch',
+  component: Switch,
+  argTypes: {
+    ...UnControlledComponentArgTypes,
+    label: { control: 'text' },
+    width: { control: { type: 'range', min: 3, max: 5, step: 0.05 } },
+    dotSize: { control: { type: 'range', min: 1, max: 5, step: 0.05 } },
+    dotHoverSize: { control: { type: 'range', min: 1, max: 2, step: 0.05 } },
+    padding: { control: { type: 'range', min: 0, max: 5, step: 0.05 } },
+    leftIcon: { control: 'select', options: [undefined, ...IconNames.toSorted()] },
+    rightIcon: { control: 'select', options: [undefined, ...IconNames.toSorted()] },
+  },
+  args: {
+    label: 'Switch',
+  },
+  render: args => {
+    const [value, setValue] = useState(false);
+
+    return <Switch {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,120 @@
+import styled, { css } from 'styled-components';
+
+type SwitchStyleProps = {
+  $padding: number;
+  $width: number;
+  $dotSize: number;
+};
+
+export const SwitchStyle = styled.section<SwitchStyleProps>(
+  ({ $width, $dotSize, $padding, theme }) => css`
+    width: ${$width}em;
+    border-radius: 100em;
+    background: ${theme.colors.background.paper};
+    padding: ${$padding}em;
+    transition: all 300ms ease;
+    position: relative;
+
+    .switch-dot {
+      width: ${$dotSize}em;
+      height: ${$dotSize}em;
+      border-radius: 100em;
+      background: ${theme.colors.white};
+      display: block;
+      transition: all 300ms ease;
+      margin-left: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .switch-left-icon,
+    .switch-right-icon {
+      width: ${$dotSize}em;
+      height: ${$dotSize}em;
+      position: absolute;
+      top: ${$padding}em;
+      display: grid;
+      place-content: center;
+      color: ${theme.colors.white};
+      transition: all 300ms ease;
+    }
+
+    .switch-left-icon {
+      left: ${$padding}em;
+    }
+
+    .switch-right-icon {
+      right: ${$padding}em;
+    }
+
+    &.is-checked {
+      background: ${theme.colors.primary.main};
+
+      .switch-dot {
+        margin-left: ${$width - $dotSize - $padding * 2}em;
+      }
+    }
+
+    &:not(.is-readonly):has(input:disabled) {
+      background: ${theme.colors.background.disabled};
+
+      .switch-dot {
+        background: ${theme.colors.text.disabled};
+      }
+
+      .switch-left-icon,
+      .switch-right-icon {
+        color: ${theme.colors.text.disabled};
+      }
+
+      &.is-checked {
+        background: ${theme.colors.primary.dark};
+      }
+    }
+
+    .switch-checkbox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 3;
+    }
+  `,
+);
+
+type SwitchContainerStyle = {
+  $padding: number;
+  $width: number;
+  $dotHoverSize: number;
+};
+
+export const SwitchContainerStyle = styled.section<SwitchContainerStyle>(
+  ({ $padding, $width, $dotHoverSize }) => css`
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    width: fit-content;
+
+    .switch-label {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    ${SwitchStyle}:hover .switch-dot {
+      box-shadow: 0 0 0 0.4em ${props => props.theme.colors.primary.main}88;
+    }
+
+    ${SwitchStyle}:active .switch-dot,
+    &:has(.switch-label:active) .switch-dot {
+      width: ${$dotHoverSize}em;
+    }
+
+    ${SwitchStyle}.is-checked:active .switch-dot,
+    &:has(.switch-label:active) ${SwitchStyle}.is-checked .switch-dot {
+      margin-left: ${$width - $dotHoverSize - $padding * 2}em;
+    }
+  `,
+);

package/src/components/form/switch/switch.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+
+import { Icon, IconNameT } from '../../icon';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { SwitchContainerStyle, SwitchStyle } from './switch.style';
+
+import { useClassNames, useInputHandlers } from '@polpo/hooks';
+
+type SwitchProps = {
+  label?: string;
+  width?: number;
+  dotSize?: number;
+  dotHoverSize?: number;
+  padding?: number;
+  leftIcon?: IconNameT;
+  rightIcon?: IconNameT;
+};
+
+export const Switch = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  label,
+  width = 3,
+  dotSize = 1.2,
+  dotHoverSize = 1.2,
+  padding = 0.25,
+  leftIcon,
+  rightIcon,
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}: UnControlledComponentProps<SwitchProps, boolean>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers<HTMLInputElement>({
+    onChange: e => setValue(e.target.checked),
+    onBlur: onBlur,
+    onFocus: onFocus,
+  });
+  const swicthClassName = useClassNames({
+    'is-checked': value,
+    'is-readonly': !disabled && readOnly,
+  });
+
+  const _width = Math.max(width, 3) * dotSize;
+  const _dotHoverSize = Math.min(Math.max(dotHoverSize, 1), 2) * dotSize;
+  const _padding = Math.min(padding, (_width - 0.5 - dotSize * 2) / 2);
+
+  return (
+    <SwitchContainerStyle
+      $width={_width}
+      $padding={_padding}
+      $dotHoverSize={_dotHoverSize}
+      className={className}
+      style={style}
+    >
+      <SwitchStyle $width={_width} $padding={_padding} $dotSize={dotSize} className={swicthClassName}>
+        {leftIcon !== undefined && (
+          <span className='switch-left-icon'>
+            <Icon name={leftIcon} size={`${dotSize * 0.7}em`} />
+          </span>
+        )}
+        {rightIcon !== undefined && (
+          <span className='switch-right-icon'>
+            <Icon name={rightIcon} size={`${dotSize * 0.7}em`} />
+          </span>
+        )}
+        <span className='switch-dot' />
+        <input
+          id={id}
+          type='checkbox'
+          name={name}
+          className={`switch-checkbox ${className}`}
+          style={style}
+          checked={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          disabled={disabled || readOnly}
+          {...handlers}
+        />
+      </SwitchStyle>
+      {label ? (
+        <Typography variant='label-form' className='switch-label' htmlFor={id}>
+          {label}
+        </Typography>
+      ) : null}
+    </SwitchContainerStyle>
+  );
+};
+
+const SwitchController = ({ rules, ...props }: ControllerGeneratorProps<SwitchProps, boolean>) => {
+  return <Controller Component={Switch} defaultValue={false} inputProps={props} rules={rules} />;
+};
+
+Switch.Controller = SwitchController;

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

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

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

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Textarea } from './textarea';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Form/Textarea',
+  component: Textarea,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    rows: { control: 'number' },
+    resize: { control: 'select', options: ['none', 'vertical', 'horizontal', 'both'] },
+    rightIcon: { table: { disable: true } },
+    leftIcon: { table: { disable: true } },
+  },
+  args: {
+    label: 'Textarea',
+    rows: 4,
+    resize: 'vertical',
+    placeholder: 'Textarea',
+    ...FieldSharedArgs,
+    leftIcon: undefined,
+    rightIcon: undefined,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState('');
+
+    return <Textarea {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const TextareaStyle = styled.textarea`
+  border: 0;
+  outline: 0;
+  field-sizing: content;
+`;