polpo 0.1.7 → 0.1.9

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

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-
-import { ColorVariants, SizeVariants } from '../../../core/variants';
-import { SectionLayout } from '../../../layouts';
-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' },
-    size: { control: 'inline-radio', options: Object.values(SizeVariants) },
-    icon: { options: [undefined, ...IconNames.toSorted()] },
-    color: { control: { type: 'inline-radio', options: Object.values(ColorVariants) } },
-  },
-  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: {},
-};
-
-export const MultipleOptions: Story = {
-  args: {},
-  render: args => {
-    const [option1, setOption1] = useState(false);
-    const [option2, setOption2] = useState(false);
-    const [option3, setOption3] = useState(false);
-    const [option4, setOption4] = useState(false);
-
-    return (
-      <SectionLayout fitHeightContent>
-        <Checkbox {...args} value={option1} setValue={setOption1} label='Option 1' />
-        <Checkbox {...args} value={option2} setValue={setOption2} label='Option 2' />
-        <Checkbox {...args} value={option3} setValue={setOption3} label='Option 3' />
-        <Checkbox {...args} value={option4} setValue={setOption4} label='Option 4' />
-      </SectionLayout>
-    );
-  },
-};
-
-export const Colors: Story = {
-  args: {},
-  argTypes: {
-    color: { control: false },
-  },
-  render: args => {
-    const [option1, setOption1] = useState(false);
-    const [option2, setOption2] = useState(false);
-    const [option3, setOption3] = useState(false);
-    const [option4, setOption4] = useState(false);
-    const [option5, setOption5] = useState(false);
-    const [option6, setOption6] = useState(false);
-    const [option7, setOption7] = useState(false);
-
-    return (
-      <SectionLayout fitHeightContent>
-        <Checkbox {...args} color='primary' value={option1} setValue={setOption1} label='Primary' />
-        <Checkbox {...args} color='secondary' value={option2} setValue={setOption2} label='Secondary' />
-        <Checkbox {...args} color='tertiary' value={option3} setValue={setOption3} label='Tertiary' />
-        <Checkbox {...args} color='info' value={option4} setValue={setOption4} label='Info' />
-        <Checkbox {...args} color='active' value={option5} setValue={setOption5} label='Active' />
-        <Checkbox {...args} color='warning' value={option6} setValue={setOption6} label='Warning' />
-        <Checkbox {...args} color='alert' value={option7} setValue={setOption7} label='Alert' />
-      </SectionLayout>
-    );
-  },
-};

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

@@ -1,109 +0,0 @@
-import styled from 'styled-components';
-
-export const CheckboxFillStyle = styled.section`
-  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;
-  }
-`;
-
-export const CheckboxStyle = styled.section`
-  border-radius: 40%;
-  background: ${props => props.theme.colors.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;
-  }
-`;
-
-type CheckboxContainerStyleProps = {
-  $color: string;
-  $colorIcon: string;
-};
-
-export const CheckboxContainerStyle = styled.section<CheckboxContainerStyleProps>`
-  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%;
-  }
-
-  ${CheckboxStyle} {
-    color: ${props => props.$color};
-
-    &.is-checked {
-      ${CheckboxFillStyle} {
-        width: 100%;
-        height: 100%;
-        background: ${props => props.$color};
-        color: ${props => props.$colorIcon};
-      }
-
-      .checkbox-icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${CheckboxStyle}:hover,
-  &:has(.checkbox-label:hover) ${CheckboxStyle} {
-    box-shadow: 0 0 0 0.3em ${props => props.$color}88;
-
-    ${CheckboxFillStyle} {
-      width: 20%;
-      height: 20%;
-      border-radius: 20%;
-      background: ${props => props.$color}88;
-      color: ${props => props.$colorIcon};
-    }
-
-    &:is(.is-checked) {
-      ${CheckboxFillStyle} {
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-        background: ${props => props.$color};
-      }
-    }
-  }
-
-  ${CheckboxStyle}:focus,
-  &:has(.checkbox-input:focus) ${CheckboxStyle},
-  &:has(.checkbox-label:focus) ${CheckboxStyle} {
-    box-shadow: 0 0 0 0.3em ${props => props.$color}88;
-  }
-`;

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

@@ -1,120 +0,0 @@
-import { useMemo } from 'react';
-import { DefaultTheme, useTheme } from 'styled-components';
-
-import { ColorVariants, SizeVariants } from '../../../core/variants';
-import { Icon, IconNameT } from '../../icon';
-import { Typography } from '../../typography';
-import { Controller } from '../controller';
-import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
-
-import { CheckboxContainerStyle, CheckboxFillStyle, CheckboxStyle } from './checkbox.style';
-
-import { useInputHandlers } from '@polpo/hooks';
-
-type CheckboxColor = {
-  color: string;
-  colorIcon: string;
-};
-
-const getCheckboxColor = (theme: DefaultTheme, color: `${ColorVariants}`): CheckboxColor => {
-  const checkboxColors: Record<ColorVariants, CheckboxColor> = {
-    [ColorVariants.Primary]: { color: theme.colors.primary.main, colorIcon: theme.colors.primary.contrast },
-    [ColorVariants.Secondary]: { color: theme.colors.secondary.main, colorIcon: theme.colors.secondary.contrast },
-    [ColorVariants.Tertiary]: { color: theme.colors.tertiary.main, colorIcon: theme.colors.tertiary.contrast },
-    [ColorVariants.Info]: { color: theme.colors.info.main, colorIcon: theme.colors.info.contrast },
-    [ColorVariants.Active]: { color: theme.colors.active.main, colorIcon: theme.colors.active.contrast },
-    [ColorVariants.Warning]: { color: theme.colors.warning.main, colorIcon: theme.colors.warning.contrast },
-    [ColorVariants.Alert]: { color: theme.colors.alert.main, colorIcon: theme.colors.alert.contrast },
-  };
-
-  return checkboxColors[color] ?? checkboxColors[ColorVariants.Primary];
-};
-
-const CheckboxSizeMap = {
-  [SizeVariants.Small]: 1,
-  [SizeVariants.Medium]: 1.2,
-  [SizeVariants.Large]: 1.4,
-};
-
-type CheckboxProps = {
-  label?: React.ReactNode;
-  placeholder?: never;
-  icon?: IconNameT;
-  color?: `${ColorVariants}`;
-  size?: `${SizeVariants}`;
-};
-
-export const Checkbox = ({
-  name,
-  value,
-  setValue,
-  onBlur,
-  onFocus,
-  className = '',
-  style = {},
-  autoFocus = false,
-  readOnly = false,
-  disabled = false,
-  autoComplete = 'off',
-  icon = 'checkmark',
-  label,
-  color = ColorVariants.Primary,
-  size = SizeVariants.Medium,
-  /*
-   * isDirty = false,
-   * isTouched = false,
-   * invalid = false,
-   * error,
-   */
-}: UnControlledComponentProps<CheckboxProps, boolean>) => {
-  const theme = useTheme();
-  const id = useMemo(() => crypto.randomUUID(), []);
-  const { handlers } = useInputHandlers<HTMLInputElement>({
-    onChange: e => setValue(e.target.checked),
-    onBlur: onBlur,
-    onFocus: onFocus,
-  });
-
-  const checkboxColor = getCheckboxColor(theme, color);
-
-  return (
-    <CheckboxContainerStyle
-      $color={checkboxColor.color}
-      $colorIcon={checkboxColor.colorIcon}
-      className={className}
-      style={style}
-      onClick={e => e.stopPropagation()}
-    >
-      <CheckboxStyle
-        className={value ? 'is-checked' : ''}
-        style={{ fontSize: `${CheckboxSizeMap[size] ?? CheckboxSizeMap[SizeVariants.Medium]}em` }}
-      >
-        <CheckboxFillStyle>
-          <Icon name={icon} className='checkbox-icon' />
-        </CheckboxFillStyle>
-        <input
-          id={id}
-          type='checkbox'
-          name={name}
-          className='checkbox-input'
-          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

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

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

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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-import { IconNames } from '../../icon';
-import { ContainerDecorator } from '../form.stories.types';
-
-import { Field } from './field';
-import { FieldOrientation, FieldVariant } from './field.types';
-
-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()] },
-  fieldOrientation: { control: 'inline-radio', options: Object.values(FieldOrientation) },
-  variant: { control: 'select', options: [undefined, ...Object.values(FieldVariant)] },
-};
-
-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',
-    fieldOrientation: 'vertical',
-  },
-  decorators: [ContainerDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof Field>;
-
-export const Default: Story = {
-  args: {},
-};

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

@@ -1,94 +0,0 @@
-import styled from 'styled-components';
-
-export const FieldStyle = styled.section`
-  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 ${props => props.theme.colors.border.main};
-      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 ${props => props.theme.colors.border.main};
-    border-radius: 4px;
-    padding: 0.5em 0;
-    background: ${props => props.theme.colors.background.main};
-
-    .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: ${props => props.theme.colors.alert.main};
-    border-color: ${props => props.theme.colors.alert.main};
-  }
-
-  &.focus {
-    color: ${props => props.theme.colors.info.main};
-    border-color: ${props => props.theme.colors.info.main};
-  }
-
-  &.error,
-  &.focus {
-    .field-left-icon,
-    .field-right-icon,
-    .field-children {
-      color: ${props => props.theme.colors.text.main};
-      border-color: ${props => props.theme.colors.text.main};
-    }
-  }
-`;