polpo 0.1.0

package/src/components/form/select/select-option.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+
+import { Icon } from '../../icon';
+import { Checkbox } from '../checkbox';
+
+import { OptionStyle } from './select.style';
+import { SelectItem, SelectOptionProps, SelectOptionVariant } from './select.types';
+
+import { useClassNames } from '@polpo/hooks';
+
+export const SelectOption = <T extends SelectItem>({
+  id,
+  selected,
+  selectOption,
+  unselectOption,
+  data,
+  Component,
+  multiselect,
+  variant,
+}: SelectOptionProps<T>) => {
+  const optionClassName = useClassNames({
+    'selected-option': selected,
+    'multiselect-icon': multiselect && variant === SelectOptionVariant.ICON,
+    'multiselect-checkbox': multiselect && variant === SelectOptionVariant.CHECKBOX,
+  });
+
+  const handleKeyDown = useCallback(
+    (option: T) => (e: React.KeyboardEvent<HTMLLIElement>) => {
+      if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+
+        if (selected && multiselect) {
+          unselectOption(option);
+        } else {
+          selectOption(option);
+        }
+      }
+    },
+    [multiselect, selectOption, selected, unselectOption],
+  );
+
+  const handleCheckboxChange = useCallback(
+    (option: T) => (checked: boolean | '') => {
+      if (checked !== '' && checked) selectOption(option);
+      else unselectOption(option);
+    },
+    [selectOption, unselectOption],
+  );
+
+  const handleClick = useCallback(
+    (option: T) => (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (multiselect) {
+        if (selected) unselectOption(option);
+        else selectOption(option);
+      } else {
+        selectOption(option);
+      }
+    },
+    [multiselect, selected, selectOption, unselectOption],
+  );
+
+  return (
+    <OptionStyle
+      id={id}
+      role='option'
+      aria-selected={selected}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown(data)}
+      className={optionClassName}
+      onClick={handleClick(data)}
+    >
+      {multiselect && variant === SelectOptionVariant.CHECKBOX && (
+        <Checkbox name={id} value={selected} setValue={handleCheckboxChange(data)} />
+      )}
+      <section className='option-content'>
+        <Component data={data} isSelected={selected} multiselect={multiselect} />
+      </section>
+      {multiselect && selected && variant === SelectOptionVariant.ICON && <Icon name='checkmark' />}
+      {multiselect && !selected && variant === SelectOptionVariant.ICON && <span />}
+    </OptionStyle>
+  );
+};

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

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+
+import { FieldSharedArgs, FieldSharedArgTypes } from '../field/field.stories';
+import { ContainerDecorator, UnControlledComponentArgTypes } from '../form.stories.types';
+
+import { Select } from './select';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Select> = {
+  title: 'Form/Select',
+  component: Select,
+  argTypes: {
+    ...FieldSharedArgTypes,
+    ...UnControlledComponentArgTypes,
+    options: { control: false },
+    renderOption: { control: false },
+    isEqualComparator: { control: false },
+    searchQueryValue: { control: 'text' },
+    searchQueryPlaceholder: { control: 'text' },
+    onSearchQuery: { control: false },
+    loadMore: { control: false },
+    isLoading: { control: 'boolean' },
+    hasNextPage: { control: 'boolean' },
+    maxOptions: { control: { type: 'number' } },
+    showClearOption: { control: 'boolean' },
+    multiselect: { control: false },
+    optionVariant: {
+      control: 'select',
+      options: [undefined, 'checkbox', 'icon', 'default'],
+      if: { arg: 'multiselect' },
+    },
+  },
+  args: {
+    label: 'Select',
+    searchQueryPlaceholder: 'Search',
+    ...FieldSharedArgs,
+    optionVariant: undefined,
+  },
+  decorators: [ContainerDecorator],
+  render: args => {
+    const [value, setValue] = useState<string | null>(null);
+
+    return (
+      <Select
+        {...args}
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'E',
+          'F',
+          'H',
+          'I',
+          'J',
+          'K',
+          'L',
+          'M',
+          'N',
+          'O',
+          'P',
+          'Q',
+          'R',
+          'S',
+          'T',
+          'U',
+          'V',
+          'W',
+          'X',
+          'Y',
+          'Z',
+        ]}
+        value={value}
+        renderOption={v => v}
+        optionVariant={undefined}
+        multiselect={false}
+        setValue={value => setValue(value)}
+      />
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,164 @@
+import styled from 'styled-components';
+
+export const SelectStyle = styled.section`
+  cursor: pointer;
+
+  .icon-close {
+    display: grid;
+    place-content: center;
+    align-self: center;
+    border-radius: 100%;
+    cursor: pointer;
+    font-size: 0.6em;
+    padding: 0.5em;
+
+    &:hover {
+      background: ${props => props.theme.colors.text.main}55;
+    }
+  }
+
+  .select-container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.5em;
+    align-items: center;
+    grid-auto-rows: auto;
+    position: relative;
+    cursor: pointer;
+
+    &.three-columns {
+      grid-template-columns: 1fr auto auto;
+    }
+  }
+
+  .input-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: grid;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    margin: 0;
+    border-radius: 0;
+    background: transparent;
+    color: currentColor;
+    text-align: left;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0;
+    grid-template-columns: 1fr auto;
+
+    &.placeholder {
+      color: #919191;
+    }
+  }
+`;
+
+export const OptionsStyle = styled.section`
+  position: fixed;
+  border-radius: 4px;
+  border: 1px solid ${props => props.theme.colors.primary.main};
+  box-shadow: 0 3px 7px 0 rgba(145, 145, 145, 0.13);
+  overflow: auto;
+  background: ${props => props.theme.colors.background.main};
+  color: ${props => props.theme.colors.text.main};
+  display: grid;
+  gap: 5px;
+  align-content: start;
+  outline: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80vw;
+  max-height: 80dvh;
+  min-width: fit-content;
+
+  .options-list-container {
+    height: 100%;
+    overflow: auto;
+    outline: 0;
+  }
+
+  .options-list {
+    list-style: none;
+    display: grid;
+    margin: 0;
+    padding: 0;
+    outline: 0;
+  }
+
+  .options-selected {
+    border-bottom: 1px solid #9e9e9e;
+    padding-bottom: 5px;
+  }
+
+  .option-empty {
+    color: #919191;
+  }
+`;
+
+export const OptionStyle = styled.li`
+  padding: 0.5em 1em;
+  font-size: 0.8em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1em;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+
+  &.multiselect-icon {
+    grid-template-columns: 1fr auto;
+  }
+
+  &.multiselect-checkbox {
+    grid-template-columns: auto 1fr;
+  }
+
+  .option-content {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &:hover {
+    background: ${props => props.theme.colors.text.main}11;
+  }
+
+  &:focus {
+    background: ${props => props.theme.colors.text.main}22;
+  }
+
+  &.selected-option,
+  &[aria-selected='true'] {
+    background: ${props => props.theme.colors.primary.main}33;
+
+    &:hover {
+      background: ${props => props.theme.colors.primary.main}22;
+    }
+
+    &:focus {
+      background: ${props => props.theme.colors.primary.main}11;
+    }
+  }
+`;
+
+export const OptionsHeaderStyle = styled.section`
+  display: grid;
+  gap: 5px;
+  padding-bottom: 5px;
+
+  .input-search {
+    padding: 8px 6px;
+    border: 1px solid #b4b4b4;
+    font-size: 0.8em;
+    width: 100%;
+    border-radius: 4px;
+  }
+`;

package/src/components/form/select/select.tsx

@@ -0,0 +1,327 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTheme } from 'styled-components';
+
+import { Icon } from '../../icon';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { Field } from '../field';
+import { ControllerGeneratorProps } from '../form.types';
+
+import { Options } from './options';
+import { SelectStyle } from './select.style';
+import {
+  ControllerGeneratorSelectProps,
+  MultiSelectProps,
+  MultiValue,
+  OptionComponentProps,
+  SelectItem,
+  SelectOptionVariant,
+  SelectValue,
+  SingleSelectProps,
+  SingleValue,
+  UnControlledSelectProps,
+} from './select.types';
+
+import { useMediaQuery, useModalInContainer } from '@polpo/hooks';
+
+/*
+ *type SelectContextState<T extends SelectItem = unknown> = {
+ *value: T;
+ *};
+ *
+ *const SelectContext = createContext<SelectContextState | null>(null);
+ */
+
+export const Select = <T extends SelectItem>({
+  // Select props
+  options,
+  renderOption,
+  isEqualComparator,
+  searchQueryValue,
+  searchQueryPlaceholder,
+  onSearchQuery,
+  loadMore,
+  isLoading,
+  hasNextPage,
+  multiselect,
+  maxOptions,
+  optionVariant = SelectOptionVariant.DEFAULT,
+  // Shared props
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  showClearOption = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  autoFocus = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  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,
+  // Field props
+  ...fieldProps
+}: UnControlledSelectProps<T>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(`(min-width: ${theme.constants.breakpoints.mobileL})`);
+  const { modalRef, isVisible, setIsVisible, modalStyle, containerRef } = useModalInContainer({
+    position: 'bottom',
+    distancePercentage: 50,
+    offset: 5,
+  });
+
+  const openSelect = useCallback(
+    (open: boolean) => {
+      setIsVisible(open && !disabled);
+    },
+    [disabled, setIsVisible],
+  );
+
+  const compareValuesIsEqual = useCallback(
+    (a: T, b: T): boolean => {
+      if (['number', 'string'].includes(typeof a)) {
+        return a === b;
+      }
+
+      return !!isEqualComparator && isEqualComparator(a, b);
+    },
+    [isEqualComparator],
+  );
+
+  const compareValueOrValuesAreEqual = useCallback(
+    (a: T, b: SelectValue<T>): boolean => {
+      if (b === null) {
+        return true;
+      }
+
+      if (!Array.isArray(b)) {
+        return compareValuesIsEqual(a, b);
+      }
+
+      if (['number', 'string'].includes(typeof a)) {
+        return b.includes(a);
+      }
+
+      return b.some(item => !!isEqualComparator && isEqualComparator(a, item));
+    },
+    [compareValuesIsEqual, isEqualComparator],
+  );
+
+  const OptionComponent = useCallback(
+    ({ data }: OptionComponentProps<T>) => (
+      <Typography noPadding variant='label' nowrap>
+        {renderOption(data)}
+      </Typography>
+    ),
+    [renderOption],
+  );
+
+  const renderMultipleValue = useCallback(
+    (values: Array<T>): React.ReactNode => {
+      if (maxOptions) {
+        const limit = Math.min(maxOptions, options.length);
+
+        return `${values.length}/${limit} item${values.length === 1 ? '' : 's'} selected`;
+      }
+
+      return `${values.length} item${values.length === 1 ? '' : 's'} selected`;
+    },
+    [maxOptions, options.length],
+  );
+
+  const renderValue = useCallback(
+    (value: SelectValue<T>): React.ReactNode => {
+      if (value === null) {
+        return null;
+      }
+
+      if (Array.isArray(value)) {
+        return (
+          <Typography noPadding nowrap variant='label'>
+            {renderMultipleValue(value)}
+          </Typography>
+        );
+      }
+
+      return <OptionComponent data={value} isSelected={false} multiselect={!!multiselect} />;
+    },
+    [OptionComponent, multiselect, renderMultipleValue],
+  );
+
+  const unSelectOption = useCallback(
+    (unselectedOption: T) => {
+      if (multiselect) {
+        const filteredValues = value.filter(item => !compareValuesIsEqual(item, unselectedOption));
+        setValue(filteredValues.length === 0 ? [] : filteredValues);
+      } else {
+        setValue(null);
+        setIsVisible(false);
+      }
+    },
+    [compareValuesIsEqual, multiselect, setIsVisible, setValue, value],
+  );
+
+  const selectOption = useCallback(
+    (selectedOption: T) => {
+      if (multiselect) {
+        if (maxOptions && Array.isArray(value) && value.length >= maxOptions) {
+          return;
+        }
+
+        setValue([...(value as Array<T>), selectedOption] as MultiValue<T>);
+      } else {
+        setValue(selectedOption as SingleValue<T>);
+        setIsVisible(false);
+      }
+    },
+    [maxOptions, multiselect, setIsVisible, setValue, value],
+  );
+
+  const clearOption = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (multiselect) {
+        setValue([]);
+      } else {
+        setValue(null);
+      }
+    },
+    [multiselect, setValue],
+  );
+
+  const valueNonEmpty = useMemo(() => {
+    if (multiselect) {
+      return value.length > 0;
+    } else {
+      return Boolean(value);
+    }
+  }, [multiselect, value]);
+
+  return (
+    <Field
+      id={id}
+      error={error}
+      isFocus={isVisible}
+      onClickLeftIcon={() => openSelect(true)}
+      onClickRightIcon={() => openSelect(true)}
+      ref={containerRef}
+      {...fieldProps}
+    >
+      <SelectStyle id={name} style={style} onBlur={onBlur} className={`${disabled ? 'disabled' : ''} ${className}`}>
+        <section
+          className={`select-container ${valueNonEmpty && showClearOption ? 'three-columns' : ''}`}
+          onClick={() => openSelect(true)}
+        >
+          <button
+            type='button'
+            className={`input-button ${(Array.isArray(value) ? value.length > 0 : value) ? '' : 'placeholder'}`}
+            aria-haspopup='listbox'
+            aria-expanded={isVisible}
+            onFocus={e => {
+              openSelect(true);
+              onFocus && onFocus(e);
+            }}
+          >
+            {(valueNonEmpty && renderValue(value)) || (
+              <Typography variant='label' noPadding nowrap>
+                {placeholder}
+              </Typography>
+            )}
+          </button>
+          {valueNonEmpty && showClearOption && (
+            <section className='icon-close' onClick={clearOption}>
+              <Icon name='cross' />
+            </section>
+          )}
+          <Icon name={isVisible ? 'caret-up' : 'caret-down'} />
+        </section>
+        <Options
+          modalRef={modalRef}
+          isOpen={isVisible}
+          value={value}
+          compareValueOrValuesAreEqual={compareValueOrValuesAreEqual}
+          Component={OptionComponent}
+          multiselect={multiselect}
+          isLoading={isLoading}
+          hasNextPage={hasNextPage}
+          loadMore={loadMore}
+          searchQueryValue={searchQueryValue}
+          onSearchQuery={onSearchQuery}
+          style={
+            (isMobile && {
+              width: containerRef.current?.offsetWidth,
+              transform: 'none',
+              maxHeight: '250px',
+              ...modalStyle,
+            }) ||
+            {}
+          }
+          searchQueryPlaceholder={searchQueryPlaceholder}
+          options={options}
+          selectOption={selectOption}
+          unselectOption={unSelectOption}
+          variant={optionVariant}
+        />
+      </SelectStyle>
+    </Field>
+  );
+};
+
+const MultiSelectController = <T extends SelectItem>({
+  rules,
+  ...props
+}: ControllerGeneratorProps<MultiSelectProps<T>, MultiValue<T>>) => {
+  return (
+    <Controller<MultiSelectProps<T>, MultiValue<T>>
+      Component={Select}
+      defaultValue={[]}
+      inputProps={{
+        ...props,
+        multiselect: true,
+      }}
+      rules={rules}
+    />
+  );
+};
+
+const SingleSelectController = <T extends SelectItem>({
+  rules,
+  ...props
+}: ControllerGeneratorProps<SingleSelectProps<T>, SingleValue<T>>) => {
+  return (
+    <Controller<SingleSelectProps<T>, SingleValue<T>>
+      Component={Select}
+      defaultValue={null}
+      inputProps={{
+        ...props,
+        multiselect: false,
+      }}
+      rules={rules}
+    />
+  );
+};
+
+const SelectController = <T extends SelectItem>(props: ControllerGeneratorSelectProps<T>) => {
+  const { multiselect } = props;
+
+  if (multiselect) {
+    return <MultiSelectController<T> {...props} multiselect={true} />;
+  }
+
+  return <SingleSelectController<T> {...props} multiselect={false} />;
+};
+
+Select.Controller = SelectController;