polpo 0.1.0

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

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import { IconNames } from '../../icon';
+import { UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Checkbox } from './checkbox';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Form/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    ...UnControlledComponentArgTypes,
+    placeholder: { table: { disable: true } },
+    label: { control: 'text' },
+    icon: { options: [undefined, ...IconNames.toSorted()] },
+  },
+  args: {
+    label: 'Checkbox',
+  },
+  render: args => {
+    const [value, setValue] = useState(false);
+
+    return <Checkbox {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+export const CheckboxStyle = styled.section`
+  border-radius: 42%;
+  background: ${props => props.theme.colors.background.paper};
+  color: ${props => props.theme.colors.primary.main};
+  transition: all 300ms ease;
+  position: relative;
+  padding: 2px;
+  width: 1.4em;
+  height: 1.4em;
+  border: 1px solid;
+
+  .checkbox-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: ${props => props.theme.colors.primary.contrast};
+    font-size: 0.7em;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 300ms ease;
+
+    path {
+      filter: drop-shadow(0px 0 3px rgba(0, 0, 0, 1));
+    }
+  }
+
+  &.is-checked {
+    background: ${props => props.theme.colors.primary.main};
+    color: ${props => props.theme.colors.primary.main};
+
+    .checkbox-icon {
+      opacity: 1;
+    }
+
+    &:hover {
+      background: ${props => props.theme.colors.primary.light};
+    }
+  }
+
+  .checkbox-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+  }
+`;
+
+export const CheckboxContainerStyle = styled.section`
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  width: fit-content;
+
+  .checkbox-label {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  ${CheckboxStyle}:hover,
+  &:has(.checkbox-label:hover) ${CheckboxStyle} {
+    box-shadow: 0 0 0 0.4em ${props => props.theme.colors.primary.main}88;
+  }
+
+  ${CheckboxStyle}:active,
+  &:has(.checkbox-label:active) ${CheckboxStyle} {
+    transform: scale(0.95);
+  }
+`;

package/src/components/form/checkbox/checkbox.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+
+import { Icon, IconNameT } from '../../icon';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import { CheckboxContainerStyle, CheckboxStyle } from './checkbox.style';
+
+import { useInputHandlers } from '@polpo/hooks';
+
+type CheckboxProps = {
+  label?: string;
+  placeholder?: never;
+  icon?: IconNameT;
+};
+
+export const Checkbox = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = 'off',
+  icon = 'checkmark',
+  label,
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}: UnControlledComponentProps<CheckboxProps, boolean>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers<HTMLInputElement>({
+    onChange: e => setValue(e.target.checked),
+    onBlur: onBlur,
+    onFocus: onFocus,
+  });
+
+  return (
+    <CheckboxContainerStyle className={className} style={style}>
+      <CheckboxStyle className={value ? 'is-checked' : ''}>
+        <Icon name={icon} className='checkbox-icon' />
+        <input
+          id={id}
+          type='checkbox'
+          name={name}
+          className={`checkbox-input ${className}`}
+          style={style}
+          checked={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          disabled={disabled || readOnly}
+          {...handlers}
+        />
+      </CheckboxStyle>
+      {label ? (
+        <Typography variant='label-form' htmlFor={id} className='checkbox-label'>
+          {label}
+        </Typography>
+      ) : null}
+    </CheckboxContainerStyle>
+  );
+};
+
+const CheckboxController = ({ rules, ...props }: ControllerGeneratorProps<CheckboxProps, boolean>) => {
+  return <Controller Component={Checkbox} defaultValue={false} inputProps={props} rules={rules} />;
+};
+
+Checkbox.Controller = CheckboxController;

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

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

package/src/components/form/controller/controller.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Controller as RHFController, useFormContext, UseControllerProps } from 'react-hook-form';
+
+import { ControlledComponentProps, Props, UnControlledComponentProps } from '../form.types';
+
+type ControllerProps<T extends Props, V> = {
+  inputProps: ControlledComponentProps<T, V>;
+  Component: React.FC<UnControlledComponentProps<T, V>>;
+  rules?: UseControllerProps['rules'];
+  defaultValue: V;
+};
+
+export const Controller = <T extends Props, V>({
+  Component,
+  inputProps,
+  defaultValue: fieldDefaultValue,
+  rules,
+}: ControllerProps<T, V>) => {
+  const { control, setValue } = useFormContext();
+  const { name, defaultValue } = inputProps;
+
+  return (
+    <RHFController
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue ?? fieldDefaultValue}
+      render={({ field: { onBlur, value }, fieldState }) => (
+        <Component
+          value={value}
+          error={fieldState.error?.message}
+          invalid={fieldState.invalid}
+          isTouched={fieldState.isTouched}
+          isDirty={fieldState.isDirty}
+          setValue={value => setValue(name, value)}
+          onBlur={onBlur}
+          {...inputProps}
+        />
+      )}
+    />
+  );
+};

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

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

package/src/components/form/date-picker/date-picker.stories.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { DatePicker } from './date-picker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    type: { control: 'select', options: ['date', 'datetime-local', 'month', 'time', 'week'] },
+  },
+  args: {
+    type: 'date',
+    label: 'DatePicker',
+    rightIcon: undefined,
+    leftIcon: undefined,
+    ...FieldSharedArgs,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState('');
+
+    return <DatePicker {...args} value={value} setValue={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/form/date-picker/date-picker.tsx

@@ -0,0 +1,67 @@
+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 DatePickerProps = InputFieldProps<{
+  type?: 'date' | 'datetime-local' | 'month' | 'time' | 'week';
+}>;
+
+export const DatePicker = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  type = 'date',
+  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<DatePickerProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur: onBlur,
+    onChange: e => setValue(e.target.value),
+    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}
+        {...handlers}
+      />
+    </Field>
+  );
+};
+
+const DatePickerController = ({ rules, ...props }: ControllerGeneratorProps<DatePickerProps, string>) => {
+  return <Controller Component={DatePicker} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+DatePicker.Controller = DatePickerController;

package/src/components/form/date-picker/index.ts

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

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

@@ -0,0 +1,49 @@
+import { IconNames } from '../../icon';
+import { ContainerDecorator } from '../form.stories.types';
+
+import { Field } from './field';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const FieldSharedArgTypes: Meta<typeof Field>['argTypes'] = {
+  label: { control: 'text' },
+  rightIcon: { options: [undefined, ...IconNames.toSorted()] },
+  leftIcon: { options: [undefined, ...IconNames.toSorted()] },
+  errorIcon: { options: [undefined, ...IconNames.toSorted()] },
+  variant: { control: 'select', options: [undefined, 'full-border', 'content-border', 'line'] },
+};
+
+export const FieldSharedArgs: StoryObj<typeof Field>['args'] = {
+  variant: 'full-border',
+};
+
+const meta: Meta<typeof Field> = {
+  title: 'Form/Field',
+  component: Field,
+  includeStories: ['Default'],
+  excludeStories: /.*Shared*$/,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    id: { control: false },
+    error: { control: 'text' },
+    isFocus: { control: 'boolean' },
+    children: { control: 'text' },
+  },
+  args: {
+    label: 'Field label',
+    children: 'Hello world',
+    isFocus: false,
+    error: '',
+    ...FieldSharedArgs,
+    leftIcon: 'facebook',
+    rightIcon: 'airplane',
+  },
+  decorators: [ContainerDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof Field>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+export const FieldStyle = styled.section`
+  display: grid;
+  gap: 0.5em;
+
+  .field-content {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+  }
+
+  .field-left-icon,
+  .field-right-icon {
+    font-size: 1em;
+  }
+
+  .field-left-icon {
+    margin-right: 1em;
+  }
+
+  .field-right-icon {
+    margin-left: 1em;
+  }
+
+  .field-message {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 5px;
+    align-items: center;
+    justify-content: start;
+  }
+
+  &.error {
+    color: ${props => props.theme.colors.alert.main};
+  }
+
+  &.focus {
+    color: ${props => props.theme.colors.info.main};
+  }
+
+  &.error,
+  &.focus {
+    .field-left-icon,
+    .field-right-icon,
+    .field-children {
+      color: ${props => props.theme.colors.text.main};
+    }
+  }
+
+  &.variant-content-border {
+    .field-content {
+      border: 1px solid;
+      border-radius: 4px;
+      padding: 1em;
+      background: ${props => props.theme.colors.background.main};
+    }
+  }
+
+  &.variant-content-line {
+    .field-content {
+      border-bottom: 1px solid;
+      padding: 0.5em 0;
+    }
+  }
+
+  &.variant-full-border {
+    border: 1px solid;
+    border-radius: 4px;
+    padding: 0.5em 0;
+    background: ${props => props.theme.colors.background.main};
+
+    .field-label,
+    .field-content,
+    .field-message {
+      padding: 0 1em;
+    }
+  }
+`;

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

@@ -0,0 +1,83 @@
+import React, { ForwardedRef } from 'react';
+
+import { Icon, IconNameT } from '../../icon';
+import { Typography } from '../../typography';
+
+import { FieldStyle } from './field.style';
+import { 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,
+    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,
+  });
+
+  const handleClick = (callback?: () => void) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const input = document.getElementById(id);
+    input?.focus();
+    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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { IconNameT } from '../../icon';
+
+export enum FieldVariant {
+  FULL_BORDER = 'full-border',
+  CONTENT_BORDER = 'content-border',
+  CONTENT_LINE = 'line',
+}
+
+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;
+};
+
+export type InputFieldProps<T> = T & FieldSharedProps;

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

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

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

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

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

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

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