@takaro/lib-components 0.0.1

package/src/components/inputs/selects/SelectQueryField/Controlled.tsx

@@ -0,0 +1,100 @@
+import { FC, PropsWithChildren, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { ControlledInputProps, defaultInputPropsFactory, defaultInputProps } from '../../InputProps';
+import { GenericSelectQueryField, SelectQueryFieldProps } from './Generic';
+import { Option, OptionGroup, SubComponentTypes } from '../SubComponents';
+import { ErrorMessage, Label, InputWrapper, Description } from '../../layout';
+import { Container } from '../sharedStyle';
+
+export type ControlledSelectQueryFieldProps = PropsWithChildren<SelectQueryFieldProps & ControlledInputProps>;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledSelectQueryFieldProps>(defaultInputProps);
+
+export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & SubComponentTypes = (props) => {
+  const {
+    required,
+    size: componentSize,
+    label,
+    children,
+    placeholder,
+    readOnly,
+    render,
+    disabled,
+    hint,
+    description,
+    canClear,
+    name,
+    multiple,
+    control,
+    inPortal,
+    debounce,
+    isLoadingData,
+    handleInputValueChange,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const [showError, setShowError] = useState<boolean>(true);
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(true);
+  };
+
+  const handleOnFocus = () => {
+    setShowError(false);
+  };
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            error={!!error}
+            text={label}
+            required={required}
+            position="top"
+            size={componentSize}
+            disabled={disabled}
+            hint={hint}
+          />
+        )}
+        <GenericSelectQueryField
+          name={name}
+          id={name}
+          isLoadingData={isLoadingData}
+          hasError={!!error}
+          placeholder={placeholder}
+          hasDescription={!!description}
+          readOnly={readOnly}
+          render={render}
+          disabled={disabled}
+          multiple={multiple}
+          required={required}
+          size={componentSize}
+          inPortal={inPortal}
+          onChange={field.onChange}
+          onBlur={handleOnBlur}
+          canClear={canClear}
+          onFocus={handleOnFocus}
+          value={field.value}
+          debounce={debounce}
+          handleInputValueChange={handleInputValueChange}
+        >
+          {children}
+        </GenericSelectQueryField>
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};
+
+ControlledSelectQueryField.OptionGroup = OptionGroup;
+ControlledSelectQueryField.Option = Option;

package/src/components/inputs/selects/SelectQueryField/Generic/index.tsx

@@ -0,0 +1,300 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  Children,
+  PropsWithChildren,
+  isValidElement,
+  cloneElement,
+  useMemo,
+  MouseEvent,
+} from 'react';
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  FloatingPortal,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+  offset,
+  useClick,
+} from '@floating-ui/react';
+import { AiOutlineSearch as SearchIcon, AiOutlineClose as ClearIcon } from 'react-icons/ai';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputPropsFunctionHandlers } from '../../../InputProps';
+import { useDebounce } from '../../../../../hooks';
+import { setAriaDescribedBy } from '../../../layout';
+import { FeedBackContainer } from '../style';
+import { SelectItem, SelectContext, getLabelFromChildren } from '../../';
+
+/* The SearchField depends on a few things of <Select/> */
+import { GroupLabel } from '../../SelectField/style';
+import { SelectContainer, SelectButton, StyledArrowIcon, StyledFloatingOverlay } from '../../sharedStyle';
+import { IconButton, Spinner } from '../../../../../components';
+import { GenericTextField } from '../../../TextField/Generic';
+
+interface SharedSelectQueryFieldProps {
+  // Enables loading data feedback for user
+  isLoadingData?: boolean;
+  /// The placeholder text to show when the input is empty
+  placeholder?: string;
+  /// Debounce time in milliseconds (when clientside data it should be 0)
+  debounce?: number;
+  /// Triggered whenever the input value changes, debounced by 0.5 seconds.
+  /// This is used to trigger the API call to get the new options
+  handleInputValueChange: (value: string) => void;
+  /// render inPortal
+  inPortal?: boolean;
+
+  /// When true, The select icon will be replaced by a cross icon to clear the selected value.
+  canClear?: boolean;
+
+  /// The selected items shown in the select field
+  render?: (selectedItems: SelectItem[]) => React.ReactNode;
+}
+
+interface SingleSelectQueryFieldProps extends SharedSelectQueryFieldProps {
+  multiple?: false;
+}
+interface MultiSelectQueryFieldProps extends SharedSelectQueryFieldProps {
+  multiple: true;
+}
+
+interface SingleSelectQueryFieldHandlers extends GenericInputPropsFunctionHandlers<string, HTMLDivElement> {
+  onChange: (val: string) => void;
+}
+
+interface MultiSelectQueryFieldHandlers extends GenericInputPropsFunctionHandlers<string[], HTMLDivElement> {
+  onChange: (val: string[]) => void;
+}
+
+export type SelectQueryFieldProps = SingleSelectQueryFieldProps | MultiSelectQueryFieldProps;
+export type GenericSelectQueryFieldProps = PropsWithChildren<
+  | (SingleSelectQueryFieldProps & SingleSelectQueryFieldHandlers)
+  | (MultiSelectQueryFieldProps & MultiSelectQueryFieldHandlers)
+>;
+const defaultsApplier = defaultInputPropsFactory<GenericSelectQueryFieldProps>(defaultInputProps);
+
+export interface InputValue {
+  value: string;
+  label: string;
+  /// When the user selects an option from the list, there is no need to do another API call
+  shouldUpdate: boolean;
+}
+
+export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelectQueryFieldProps>((props, ref) => {
+  const {
+    onBlur = () => {},
+    onFocus = () => {},
+    onChange,
+    name,
+    disabled,
+    value,
+    id,
+    placeholder = 'Search field',
+    hasDescription,
+    inPortal = false,
+    hasError,
+    children,
+    readOnly,
+    render,
+    multiple = false,
+    canClear = false,
+    debounce = 250,
+    isLoadingData: isLoading = false,
+    handleInputValueChange,
+  } = defaultsApplier(props);
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<InputValue>({ value: '', shouldUpdate: false, label: '' });
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selectedItems, setSelectedItems] = useState<SelectItem[]>([]);
+
+  const debouncedValue = useDebounce(inputValue.value, debounce);
+  const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
+
+  useEffect(() => {
+    if (debouncedValue && inputValue.shouldUpdate) handleInputValueChange(debouncedValue);
+  }, [debouncedValue]);
+
+  const { refs, strategy, x, y, context } = useFloating<HTMLInputElement>({
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: readOnly || disabled ? () => {} : setOpen,
+    middleware: [
+      offset(5),
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            maxHeight: '255px',
+          });
+        },
+        padding: 10,
+      }),
+    ],
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useClick(context),
+    useRole(context, { role: 'listbox' }),
+    useDismiss(context),
+  ]);
+
+  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value;
+    setInputValue({ value, shouldUpdate: true, label: value });
+    if (value) {
+      setActiveIndex(0);
+    }
+  }
+
+  const handleClear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedItems([]);
+
+    // the undefined is an expection
+    if (onChange) onChange(multiple ? ([] as string[]) : (undefined as any));
+  };
+
+  /* This handles the case where the value is changed externally (e.g. from a parent component) */
+  /* onChange propagates the value to the parent component, but since the value prop is not a required prop, the parent might not reflect the change
+   * which ends up not running this useEffect. Meaning we still need to update the selectedIndex when clicked on an option.
+   */
+  useEffect(() => {
+    // Function to create an item with a value and label
+    const createItem = (v: string) => ({ value: v, label: getLabelFromChildren(children, v) as unknown as string });
+
+    if (Array.isArray(value)) {
+      const items = value.map(createItem);
+      setSelectedItems(items);
+    } else if (typeof value === 'string' && value !== '') {
+      setSelectedItems([createItem(value)]);
+    }
+  }, [value, children]);
+
+  const renderSelect = () => {
+    const hasOptions = options && Children.count(options[0].props.children) > 1;
+
+    // initialFocus=-1 is used to prevent the first item from being focused when the list opens
+    return (
+      <FloatingFocusManager context={context} visuallyHiddenDismiss initialFocus={-1}>
+        <SelectContainer
+          {...getFloatingProps({
+            ref: refs.setFloating,
+            style: {
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              overflow: 'auto',
+              borderBottom: '10px solid transparent',
+            },
+          })}
+        >
+          <GenericTextField
+            id={`${name}-input`}
+            name={`${name}-input`}
+            hasDescription={false}
+            icon={<SearchIcon />}
+            hasError={hasError}
+            value={inputValue.value}
+            onChange={onInputChange}
+            placeholder={placeholder}
+            ref={ref}
+          />
+          {/* it will always contain 1 because of the group label */}
+          {isLoading && (
+            <FeedBackContainer>
+              <Spinner size="small" />
+              <span style={{ marginLeft: '10px' }}>loading results</span>
+            </FeedBackContainer>
+          )}
+          {hasOptions && options}
+          {/* Basically first interaction */}
+          {!hasOptions && inputValue.value === '' && <FeedBackContainer>Start typing to search</FeedBackContainer>}
+          {/* When there is no result */}
+          {!hasOptions && !isLoading && inputValue.value !== '' && (
+            <FeedBackContainer>No results found</FeedBackContainer>
+          )}
+        </SelectContainer>
+      </FloatingFocusManager>
+    );
+  };
+
+  const options = useMemo(() => {
+    return [
+      ...(Children.map(
+        children,
+        (child) =>
+          isValidElement(child) && (
+            <ul key={child.props.label} role="group" aria-labelledby={`select-${child.props.label}`}>
+              {child.props.label && (
+                <GroupLabel role="presentation" id={`select-${child.props.label}`} aria-hidden="true">
+                  {child.props.label}
+                </GroupLabel>
+              )}
+              {Children.map(child.props.children, (option) => {
+                return cloneElement(option, {
+                  onChange: onChange,
+                });
+              })}
+            </ul>
+          )
+      ) ?? []),
+    ];
+  }, [children]);
+
+  return (
+    <SelectContext.Provider
+      value={{
+        listRef: listItemsRef,
+        setOpen,
+        getItemProps,
+        setActiveIndex,
+        activeIndex,
+        dataRef: context.dataRef,
+        multiple,
+        selectedItems,
+        setSelectedItems,
+        name,
+      }}
+    >
+      <SelectButton
+        id={id}
+        ref={refs.setReference}
+        disabled={disabled}
+        readOnly={readOnly}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        isOpen={open}
+        tabIndex={disabled ? -1 : 0}
+        hasError={hasError}
+        aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        {...getReferenceProps()}
+      >
+        {render ? (
+          render(selectedItems)
+        ) : (
+          <div>{selectedItems.length === 0 ? 'Select' : selectedItems.map((item) => item.label).join(', ')}</div>
+        )}
+
+        {!readOnly && canClear && selectedItems.length > 0 && !open ? (
+          <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={(e) => handleClear(e)} />
+        ) : (
+          <StyledArrowIcon size={16} />
+        )}
+      </SelectButton>
+      {open &&
+        (!inPortal ? (
+          <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
+            {renderSelect()}
+          </StyledFloatingOverlay>
+        ) : (
+          <FloatingPortal>{renderSelect()}</FloatingPortal>
+        ))}
+    </SelectContext.Provider>
+  );
+});

package/src/components/inputs/selects/SelectQueryField/SelectQueryField.stories.tsx

@@ -0,0 +1,260 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button, SelectQueryField, SelectQueryFieldProps } from '../../../../components';
+import { films } from '../data';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GenericSelectQueryField } from './Generic';
+
+interface Film {
+  name: string;
+  decade: string;
+  icon: string;
+}
+
+export default {
+  title: 'Inputs/SelectQueryField',
+  args: {
+    placeholder: 'Search for a film',
+    label: 'Film',
+    debounce: 250,
+    readOnly: false,
+    canClear: false,
+  },
+} as Meta<SelectQueryFieldProps>;
+
+export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    film: string;
+  }
+
+  const { control, handleSubmit } = useForm<FormValues>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string>('');
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const mockAPICall = (debouncedValue: string) => {
+    // Start loading
+    setLoading(true);
+
+    setTimeout(() => {
+      const filteredOptions = films.filter((film) =>
+        film.name.toLowerCase().trim().includes(debouncedValue.toLowerCase())
+      );
+      setOptions(filteredOptions);
+      setLoading(false);
+    }, 1000);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ film }) => {
+    setResult(film);
+  };
+
+  return (
+    <>
+      it is important to note that it is required for the user to select an option from the list. If the user types
+      something, but does not select an item from the list, the input will be reset.
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          debounce={args.debounce}
+          control={control}
+          loading={loading}
+          canClear={args.canClear}
+          placeholder={args.placeholder}
+          label={args.placeholder}
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={mockAPICall}
+          isLoadingData={loading}
+          required={false}
+          name="film"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon }) => (
+              <SelectQueryField.Option key={name} value={name} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit" text="Submit form" />
+      </form>
+      This is the submitted value:
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const ClientSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    film: string;
+  }
+
+  const { control, handleSubmit } = useForm<FormValues>();
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string>('');
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ film }) => {
+    setResult(film);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          control={control}
+          placeholder="Search for a film"
+          label="Film"
+          canClear={args.canClear}
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={handleInputChange}
+          required={false}
+          debounce={0}
+          name="film"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon, decade }) => (
+              <SelectQueryField.Option key={name} value={decade} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit" text="Submit form" />
+      </form>
+      The result returns the decade of the film:
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const ClientSideMultiSelectSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    films: string[];
+  }
+
+  const validationSchema = z.object({
+    films: z.array(z.string()).nonempty(),
+  });
+
+  const { control, handleSubmit } = useForm<FormValues>({
+    resolver: zodResolver(validationSchema),
+  });
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string[]>([]);
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ films }) => {
+    if (films && films.length === 0) return;
+    setResult(films);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          control={control}
+          placeholder="Search for a film"
+          label="Film"
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={handleInputChange}
+          required={false}
+          canClear={args.canClear}
+          debounce={0}
+          multiple
+          name="films"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon }) => (
+              <SelectQueryField.Option key={name} value={name} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit" text="Submit form" />
+      </form>
+      Selected films:
+      <div>{result && result.join(',')}</div>
+    </>
+  );
+};
+
+export const Generic: StoryFn<SelectQueryFieldProps> = () => {
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string[]>([]);
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onChange = (values: string[]) => {
+    setResult(values);
+  };
+
+  return (
+    <>
+      <GenericSelectQueryField
+        id="films"
+        onChange={onChange}
+        placeholder="Search for a film"
+        /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+        handleInputValueChange={handleInputChange}
+        required={false}
+        debounce={0}
+        multiple
+        hasError={false}
+        hasDescription={false}
+        value={result}
+        name="film"
+      >
+        {/* In this case the label is the same as the value but ofcourse that can differ*/}
+        <SelectQueryField.OptionGroup>
+          {options?.map(({ name, icon }) => (
+            <SelectQueryField.Option key={name} value={name} label={name}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                <span>{name}</span>
+              </div>
+            </SelectQueryField.Option>
+          ))}
+        </SelectQueryField.OptionGroup>
+      </GenericSelectQueryField>
+      Selected films:
+      <div>{result.map((film) => film).join(',')}</div>
+    </>
+  );
+};

package/src/components/inputs/selects/SelectQueryField/index.tsx

@@ -0,0 +1,5 @@
+export { GenericSelectQueryField } from '../SelectQueryField/Generic';
+export type { SelectQueryFieldProps, GenericSelectQueryFieldProps } from '../SelectQueryField/Generic';
+
+export { ControlledSelectQueryField } from './Controlled';
+export type { ControlledSelectQueryFieldProps } from './Controlled';

package/src/components/inputs/selects/SelectQueryField/style.ts

@@ -0,0 +1,14 @@
+import { styled } from '../../../../styled';
+
+export const FeedBackContainer = styled.div`
+  display: flex;
+  flex-direciton: row;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${({ theme }) => theme.spacing['1']};
+
+  // loading
+  span {
+    margin-left: ${({ theme }) => theme.spacing['1']};
+  }
+`;