polpo 0.1.13 → 0.1.16

package/src/components/cursor/cursor.styles.css

@@ -0,0 +1,73 @@
+@reference "polpo-tailwind-config/styles";
+
+.cursor-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: none;
+    pointer-events: none;
+}
+
+.cursor {
+    position: fixed;
+    border-radius: 50%;
+    z-index: 99999999;
+    pointer-events: none;
+    transform: translateZ(0);
+
+    @media (any-pointer: coarse) {
+        display: none;
+    }
+
+    &.outer-circle {
+        margin-left: -15px;
+        margin-top: -15px;
+        width: 30px;
+        height: 30px;
+        border: 2px solid var(--color-primary-500);
+        box-sizing: border-box;
+        z-index: 99999999;
+        opacity: 0.5;
+        transition:
+                all 0.08s ease-out,
+                width 0.3s ease-in-out,
+                height 0.3s ease-in-out,
+                margin 0.3s ease-in-out,
+                opacity 0.3s ease-in-out;
+
+        &.cursor-hover {
+            margin-left: -40px;
+            margin-top: -40px;
+            width: 80px;
+            height: 80px;
+            background-color: var(--color-primary-500);
+            opacity: 0.3;
+        }
+
+        &.cursor-text {
+            margin-left: -2px;
+            margin-top: -40px;
+            width: 4px;
+            height: 80px;
+            background-color: var(--color-primary-500);
+            opacity: 0.3;
+        }
+    }
+
+    &.inner-circle {
+        margin-left: -3px;
+        margin-top: -3px;
+        width: 6px;
+        height: 6px;
+        z-index: 99999999;
+        background-color: var(--color-primary-500);
+        transition: opacity 0.3s ease-in-out;
+        opacity: 1;
+
+        &.cursor-hover {
+            opacity: 0;
+        }
+    }
+}

package/src/components/cursor/index.ts

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

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

@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import { IconType } from 'react-icons';
+import { IoCheckmarkOutline } from 'react-icons/io5';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { ColorTypes, SizeTypes } from '../../component.types';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './checkbox.styles.css';
+
+type CheckboxProps = {
+  label?: React.ReactNode;
+  placeholder?: never;
+  icon?: IconType;
+  color?: `${ColorTypes}`;
+  size?: `${SizeTypes}`;
+};
+
+export const Checkbox = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = 'off',
+  icon: Icon = IoCheckmarkOutline,
+  label,
+  color = ColorTypes.PRIMARY,
+  size = SizeTypes.REGULAR,
+  /*
+   * 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,
+  });
+
+  const checkboxContainerClassName = useClassNames({
+    'checkbox-container': true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color),
+  });
+
+  const checkboxClassName = useClassNames({
+    checkbox: true,
+    'is-checked': value,
+    [`size-${size}`]: Boolean(size),
+  });
+
+  return (
+    <section className={checkboxContainerClassName} style={style} onClick={e => e.stopPropagation()}>
+      <section className={checkboxClassName}>
+        <section className='checkbox-fill'>
+          <Icon size='1.3em' className='checkbox-icon' />
+        </section>
+        <input
+          id={id}
+          type='checkbox'
+          name={name}
+          className='checkbox-input'
+          checked={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          disabled={disabled || readOnly}
+          {...handlers}
+        />
+      </section>
+      {label ? (
+        <Typography variant='label-form' htmlFor={id} className='checkbox-label'>
+          {label}
+        </Typography>
+      ) : null}
+    </section>
+  );
+};
+
+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/checkbox.styles.css

@@ -0,0 +1,162 @@
+@reference "polpo-tailwind-config/styles";
+
+.checkbox {
+    border-radius: 40%;
+    background: var(--color-background-paper);
+    transition: all 300ms ease;
+    width: 1em;
+    height: 1em;
+    margin: 2px;
+    outline: 1px solid;
+    display: flex;
+    position: relative;
+
+    .checkbox-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 2;
+    }
+
+    &.size-small {
+        font-size: 1em;
+    }
+
+    &.size-regular {
+        font-size: 1.2em;
+    }
+
+    &.size-large {
+        font-size: 1.4em;
+    }
+}
+
+.checkbox-fill {
+    transition: all 200ms ease-out;
+    border-radius: inherit;
+    margin: auto;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    display: grid;
+    place-content: center;
+    place-items: center;
+
+    .checkbox-icon {
+        font-size: 0.7em;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 300ms ease;
+    }
+}
+
+.checkbox-container {
+    --color: var(--color-gray-800);
+    --color-icon: var(--color-gray-50);
+    --color-hover: hsl(from var(--color-gray-800) h s l / 50%);
+
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: auto 1fr;
+    align-items: center;
+    gap: 0.5em;
+    width: fit-content;
+
+    .checkbox-label {
+        cursor: pointer;
+        user-select: none;
+        width: 100%;
+    }
+
+    .checkbox {
+        color: var(--color);
+
+        &.is-checked {
+            .checkbox-fill {
+                width: 100%;
+                height: 100%;
+                background: var(--color);
+                color: var(--color-icon);
+            }
+
+            .checkbox-icon {
+                opacity: 1;
+            }
+        }
+    }
+
+    .checkbox:hover,
+    &:has(.checkbox-label:hover) .checkbox {
+        box-shadow: 0 0 0 0.3em var(--color-hover);
+
+        .checkbox-fill {
+            width: 20%;
+            height: 20%;
+            border-radius: 20%;
+            background: var(--color-hover);
+            color: var(--color-icon);
+        }
+
+        &:is(.is-checked) {
+            .checkbox-fill {
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                background: var(--color);
+            }
+        }
+    }
+
+    .checkbox:focus,
+    &:has(.checkbox-input:focus) .checkbox,
+    &:has(.checkbox-label:focus) .checkbox {
+        box-shadow: 0 0 0 0.3em var(--color-hover);
+    }
+
+    &.color-primary {
+        --color: var(--color-primary-500);
+        --color-icon: var(--color-primary-50);
+        --color-hover: hsl(from var(--color-primary-500) h s l / 50%);
+    }
+
+    &.color-secondary {
+        --color: var(--color-secondary-500);
+        --color-icon: var(--color-secondary-50);
+        --color-hover: hsl(from var(--color-secondary-500) h s l / 50%);
+    }
+
+    &.color-tertiary {
+        --color: var(--color-tertiary-500);
+        --color-icon: var(--color-tertiary-50);
+        --color-hover: hsl(from var(--color-tertiary-500) h s l / 50%);
+    }
+
+    &.color-active {
+        --color: var(--color-active-500);
+        --color-icon: var(--color-active-50);
+        --color-hover: hsl(from var(--color-active-500) h s l / 50%);
+    }
+
+    &.color-warning {
+        --color: var(--color-warning-500);
+        --color-icon: var(--color-warning-50);
+        --color-hover: hsl(from var(--color-warning-500) h s l / 50%);
+    }
+
+    &.color-alert {
+        --color: var(--color-alert-500);
+        --color-icon: var(--color-alert-50);
+        --color-hover: hsl(from var(--color-alert-500) h s l / 50%);
+    }
+
+    &.color-info {
+        --color: var(--color-info-500);
+        --color-icon: var(--color-info-50);
+        --color-hover: hsl(from var(--color-info-500) h s l / 50%);
+    }
+}

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

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

package/src/components/form/controller/controller.component.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.component';

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

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+
+import { useInputHandlers } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+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.component';

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { IconType } from 'react-icons';
+import { ImCross } from 'react-icons/im';
+
+import { useClassNames } from '../../../hooks';
+import { Typography } from '../../typography';
+
+import './field.styles.css';
+import { FieldOrientation, FieldProps, FieldVariant } from './field.types';
+
+type GetIconParams = {
+  icon?: IconType;
+  onClick: (e: React.MouseEvent) => void;
+  className: string;
+};
+
+const getIcon = ({ icon: Icon, className, onClick }: GetIconParams) =>
+  Icon ? <Icon className={className} onClick={onClick} /> : <span />;
+
+export const Field = ({
+  id,
+  label,
+  leftIcon,
+  rightIcon,
+  errorIcon: ErrorIcon = ImCross,
+  error,
+  onClickLeftIcon,
+  onClickRightIcon,
+  fieldOrientation = FieldOrientation.VERTICAL,
+  children,
+  isFocus = false,
+  variant,
+  ref,
+}: FieldProps) => {
+  const fieldClassName = useClassNames({
+    'form-field': true,
+    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();
+
+    if (callback) callback();
+  };
+
+  return (
+    <section 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',
+          icon: leftIcon,
+          onClick: handleClick(onClickLeftIcon),
+        })}
+        <section className='field-children'>{children}</section>
+        {getIcon({
+          className: 'field-right-icon',
+          icon: rightIcon,
+          onClick: handleClick(onClickRightIcon),
+        })}
+      </section>
+      {Boolean(error) && (
+        <section className='field-message'>
+          {ErrorIcon ? <ErrorIcon size={10} /> : <span />}
+          <Typography noPadding variant='small'>
+            {error}
+          </Typography>
+        </section>
+      )}
+    </section>
+  );
+};

package/src/components/form/field/field.styles.css

@@ -0,0 +1,98 @@
+@reference "polpo-tailwind-config/styles";
+
+.form-field {
+    display: grid;
+    grid-auto-columns: auto;
+    gap: 0.5em;
+    transition: all 200ms ease;
+
+    .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;
+    }
+
+    &.variant-content-border {
+        .field-content {
+            border: 1px solid var(--color-border);
+            border-radius: 4px;
+            padding: 1em;
+            background: var(--color-background);
+        }
+    }
+
+    &.variant-content-line {
+        .field-content {
+            border-bottom: 1px solid;
+            padding: 0.5em 0;
+        }
+    }
+
+    &.variant-full-border {
+        border: 1px solid var(--color-border);
+        border-radius: 4px;
+        padding: 0.5em 0;
+        background: var(--color-background);
+
+        .field-label,
+        .field-content,
+        .field-message {
+            padding: 0 1em;
+        }
+    }
+
+    &.variant-inline {
+        grid-auto-flow: column;
+        padding: 0.5em 0;
+        align-items: center;
+
+        .field-label {
+            width: auto;
+        }
+    }
+
+    &.error {
+        color: var(--color-alert-500);
+        border-color: var(--color-alert-500);
+    }
+
+    &.focus {
+        color: var(--color-info-500);
+        border-color: var(--color-info-500);
+    }
+
+    &.error,
+    &.focus {
+        .field-left-icon,
+        .field-right-icon,
+        .field-children {
+            color: var(--color-foreground);
+            border-color: var(--color-foreground);
+        }
+    }
+
+    .field-children > * {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconType } from 'react-icons';
+
+export enum FieldVariant {
+  FULL_BORDER = 'full-border',
+  CONTENT_BORDER = 'content-border',
+  CONTENT_LINE = 'line',
+}
+
+export enum FieldOrientation {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+type FieldSharedProps = {
+  rightIcon?: IconType;
+  leftIcon?: IconType;
+  errorIcon?: IconType;
+  onClickLeftIcon?: () => void;
+  onClickRightIcon?: () => void;
+  label?: string;
+  variant?: `${FieldVariant}`;
+  ref?: React.RefObject<HTMLElement | null>;
+};
+
+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

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