@ssa-ui-kit/core 1.0.2 → 1.0.3

package/src/components/Typeahead/Typeahead.stories.tsx

@@ -0,0 +1,372 @@
+import React, { useState } from 'react';
+import {
+  FieldError,
+  FieldValues,
+  SubmitHandler,
+  useForm,
+} from 'react-hook-form';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
+import type { Meta, StoryObj } from '@storybook/react';
+import Icon from '@components/Icon';
+import { IconProps } from '@components/Icon/types';
+import Button from '@components/Button';
+import Wrapper from '@components/Wrapper';
+import { Typeahead } from '.';
+import { TypeaheadProps } from './types';
+import { highlightInputMatch } from './utils';
+import { TypeaheadItemIcon, TypeaheadOption } from './components';
+
+const items = [
+  { id: 1, value: 'First' },
+  { id: 2, value: 'Second' },
+  { id: 3, value: 'Third' },
+  { id: 4, label: 'Fourth', value: 4 },
+  { id: 5, value: 'Fifth' },
+  { id: 6, value: 'Sixth' },
+];
+
+export default {
+  title: 'Components/Typeahead',
+  component: Typeahead,
+  argTypes: {
+    onChange: {
+      control: {
+        disable: true,
+      },
+    },
+    className: {
+      description: 'Used in order to overwrite the default style',
+      table: {
+        type: {
+          summary: 'StyledComponent',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      return <div style={{ paddingBottom: 200 }}>{Story({ ...args })}</div>;
+    },
+  ],
+} as Meta<typeof Typeahead>;
+
+export const Basic: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { handleSubmit, register, setValue } = useFormResult;
+  const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Typeahead
+        initialSelectedItems={[items[2].id]}
+        isDisabled={args.isDisabled}
+        name={'typeahead-dropdown'}
+        label="Label"
+        helperText="Helper Text"
+        register={register}
+        setValue={setValue}
+        renderOption={({ label, input }) => highlightInputMatch(label, input)}>
+        {items.map(({ label, value, id }) => (
+          <TypeaheadOption key={id} value={id} label={label || value}>
+            {label || value}
+          </TypeaheadOption>
+        ))}
+      </Typeahead>
+      <Button type="submit" css={{ marginTop: 5 }}>
+        Submit
+      </Button>
+    </form>
+  );
+};
+
+Basic.args = { isDisabled: false };
+
+export const Multiple: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { handleSubmit, register, setValue } = useFormResult;
+  const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Typeahead
+        initialSelectedItems={[items[2].id, items[1].id]}
+        isMultiple
+        isDisabled={args.isDisabled}
+        label="Label"
+        helperText="Helper Text"
+        register={register}
+        setValue={setValue}
+        name={'typeahead-dropdown'}
+        renderOption={({ label, input }) => highlightInputMatch(label, input)}>
+        {items.map(({ label, value, id }) => (
+          <TypeaheadOption key={id} value={id} label={label || value}>
+            {label || value}
+          </TypeaheadOption>
+        ))}
+      </Typeahead>
+      <Button type="submit" css={{ marginTop: 5 }}>
+        Submit
+      </Button>
+    </form>
+  );
+};
+
+Multiple.args = { isDisabled: false };
+
+const imageItems = [
+  { id: 1, label: 'First', value: 1, iconName: 'cogwheel' },
+  { id: 2, label: 'Second', value: 2, iconName: 'information' },
+  { id: 3, label: 'Third', value: 3, iconName: 'notification' },
+  { id: 4, label: 'Fourth', value: 4, iconName: 'roles' },
+  { id: 5, label: 'Fifth', value: 5, iconName: 'settings' },
+  { id: 6, label: 'Sixth', value: 6, iconName: 'user' },
+];
+
+const getIconNameByValue = (value: number) =>
+  (imageItems.find((item) => item.value === value)?.iconName ||
+    'user') as IconProps['name'];
+
+export const WithImageAndStartIcon: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      initialSelectedItems={[imageItems[2].id, imageItems[1].id]}
+      isMultiple
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      startIcon={<Icon name="user" size={16} />}
+      startIconClassName={css`
+        position: absolute;
+        left: 14px;
+      `}
+      css={{
+        width: 500,
+        paddingLeft: 38,
+      }}
+      register={register}
+      setValue={setValue}
+      renderOption={({ label, input, value }) => (
+        <React.Fragment>
+          <TypeaheadItemIcon
+            name={getIconNameByValue(Number(value))}
+            size={18}
+          />
+          {highlightInputMatch(label, input)}
+        </React.Fragment>
+      )}>
+      {imageItems.map(({ label, value, id, iconName }) => (
+        <TypeaheadOption key={id} value={id} label={label || value}>
+          <TypeaheadItemIcon name={iconName as IconProps['name']} size={18} />
+          {label || value}
+        </TypeaheadOption>
+      ))}
+    </Typeahead>
+  );
+};
+
+WithImageAndStartIcon.args = { isDisabled: false };
+
+const mockError: FieldError = {
+  type: 'required',
+  message: 'Required field',
+};
+
+export const WithError: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      initialSelectedItems={[]}
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      register={register}
+      setValue={setValue}
+      validationSchema={{
+        required: 'Required',
+      }}
+      errors={mockError}
+      renderOption={({ label, input }) => highlightInputMatch(label, input)}>
+      {items.map(({ label, value, id }) => (
+        <TypeaheadOption key={id} value={id} label={label || value}>
+          {label || value}
+        </TypeaheadOption>
+      ))}
+    </Typeahead>
+  );
+};
+
+WithError.args = { isDisabled: false };
+
+export const WithSuccess: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      initialSelectedItems={[items[2].id]}
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      register={register}
+      setValue={setValue}
+      validationSchema={{
+        required: 'Required',
+      }}
+      success
+      helperText="Helper text"
+      renderOption={({ label, input }) => highlightInputMatch(label, input)}>
+      {items.map(({ label, value, id }) => (
+        <TypeaheadOption key={id} value={id} label={label || value}>
+          {label || value}
+        </TypeaheadOption>
+      ))}
+    </Typeahead>
+  );
+};
+
+WithSuccess.args = { isDisabled: false };
+
+export const Opened: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      isOpen
+      register={register}
+      setValue={setValue}
+      renderOption={({ label, input }) => highlightInputMatch(label, input)}>
+      {items.map(({ label, value, id }) => (
+        <TypeaheadOption key={id} value={id} label={label || value}>
+          {label || value}
+        </TypeaheadOption>
+      ))}
+    </Typeahead>
+  );
+};
+
+Opened.args = { isDisabled: false };
+
+export const DynamicallyChangedItems = (args: TypeaheadProps) => {
+  const [localItems, setLocalItems] = useState(items);
+
+  const handleUpdate = () => {
+    setLocalItems((state) => [
+      ...state,
+      {
+        id: state[state.length - 1].id + 1,
+        label: `New item #${state[state.length - 1].id + 1}`,
+        value: state[state.length - 1].id + 1,
+      },
+    ]);
+  };
+
+  const useFormResult = useForm<FieldValues>();
+  const { handleSubmit, register, setValue } = useFormResult;
+  const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Wrapper
+        css={{ flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
+        <Typeahead
+          initialSelectedItems={[localItems[2].id]}
+          isMultiple
+          name={'typeahead-dropdown'}
+          label="Label"
+          register={register}
+          setValue={setValue}
+          validationSchema={{
+            required: 'Required',
+          }}
+          renderOption={({ label, input }) => highlightInputMatch(label, input)}
+          {...args}>
+          {localItems.map(({ label, value, id }) => (
+            <TypeaheadOption key={id} value={id} label={label || value}>
+              {label || value}
+            </TypeaheadOption>
+          ))}
+        </Typeahead>
+        <Button variant="primary" onClick={handleUpdate}>
+          Update items
+        </Button>
+        <Button type="submit" variant="info">
+          Submit
+        </Button>
+      </Wrapper>
+    </form>
+  );
+};
+
+DynamicallyChangedItems.args = { isDisabled: false };
+
+export const Disabled: StoryObj = (args: TypeaheadProps) => {
+  const theme = useTheme();
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      initialSelectedItems={[items[2].id, items[1].id]}
+      isMultiple
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      startIcon={<Icon name="user" size={16} color={theme.colors.grey} />}
+      css={{
+        width: 500,
+      }}
+      register={register}
+      setValue={setValue}
+      helperText="Helper text"
+      renderOption={({ label, input, value }) => (
+        <React.Fragment>
+          <TypeaheadItemIcon
+            name={getIconNameByValue(Number(value))}
+            color={args.isDisabled ? theme.colors.grey : '#000'}
+            size={18}
+          />
+          {highlightInputMatch(label, input)}
+        </React.Fragment>
+      )}>
+      {imageItems.map(({ label, value, id, iconName }) => (
+        <TypeaheadOption key={id} value={id} label={label || value}>
+          <TypeaheadItemIcon
+            name={iconName as IconProps['name']}
+            size={18}
+            color={args.isDisabled ? theme.colors.grey : '#000'}
+          />
+          {label || value}
+        </TypeaheadOption>
+      ))}
+    </Typeahead>
+  );
+};
+
+Disabled.args = { isDisabled: true };
+
+export const NoItems: StoryObj = (args: TypeaheadProps) => {
+  const useFormResult = useForm<FieldValues>();
+  const { register, setValue } = useFormResult;
+  return (
+    <Typeahead
+      isMultiple
+      isDisabled={args.isDisabled}
+      name={'typeahead-dropdown'}
+      label="Label"
+      css={{
+        width: 500,
+      }}
+      register={register}
+      setValue={setValue}
+      helperText="Helper text">
+      {null}
+    </Typeahead>
+  );
+};
+
+NoItems.args = { isDisabled: false };

package/src/components/Typeahead/Typeahead.tsx

@@ -0,0 +1,120 @@
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+} from '@components/Popover';
+import FormHelperText from '@components/FormHelperText';
+import Wrapper from '@components/Wrapper';
+import Label from '@components/Label';
+import { TypeaheadContext } from './Typeahead.context';
+import { useTypeahead } from './useTypeahead';
+import { TypeaheadOptions, TypeaheadTrigger } from './components';
+import { TypeaheadProps } from './types';
+
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ **/
+export const Typeahead = ({
+  name = 'typeahead-search',
+  label,
+  initialSelectedItems,
+  isOpen,
+  isDisabled,
+  isMultiple,
+  children,
+  className,
+  startIcon,
+  endIcon,
+  errors,
+  success,
+  helperText,
+  validationSchema,
+  placeholder = 'Select something',
+  startIconClassName,
+  endIconClassName,
+  optionsClassName,
+  setValue,
+  register,
+  onChange,
+  renderOption,
+}: TypeaheadProps) => {
+  const theme = useTheme();
+  const hookResult = useTypeahead({
+    name,
+    initialSelectedItems,
+    isOpen,
+    isDisabled,
+    isMultiple,
+    children,
+    className,
+    startIcon,
+    endIcon,
+    startIconClassName,
+    endIconClassName,
+    errors,
+    success,
+    validationSchema,
+    placeholder,
+    setValue,
+    register,
+    onChange,
+    renderOption,
+  });
+
+  return (
+    <TypeaheadContext.Provider value={hookResult}>
+      <Wrapper
+        css={{
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+        }}
+        data-testid="typeahead">
+        {label && (
+          <Label
+            htmlFor={hookResult.inputName}
+            isDisabled={isDisabled}
+            data-testid="typeahead-label">
+            {label}
+          </Label>
+        )}
+        <Popover
+          floatingOptions={{
+            onOpenChange: hookResult.handleOpenChange,
+            open: hookResult.isOpen,
+          }}>
+          <TypeaheadTrigger />
+          <PopoverContent
+            css={{
+              width: hookResult.triggerRef.current?.clientWidth,
+              boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
+            }}
+            isFocusManagerDisabled>
+            <PopoverDescription css={{ width: '100%' }}>
+              {hookResult.isOpen ? (
+                <TypeaheadOptions className={optionsClassName}>
+                  {children}
+                </TypeaheadOptions>
+              ) : null}
+            </PopoverDescription>
+          </PopoverContent>
+        </Popover>
+        {(errors?.message || helperText) && (
+          <FormHelperText
+            role="status"
+            status={hookResult.status}
+            disabled={isDisabled}
+            data-testid="helper-text">
+            {errors ? errors?.message : helperText}
+          </FormHelperText>
+        )}
+      </Wrapper>
+    </TypeaheadContext.Provider>
+  );
+};

package/src/components/Typeahead/components/MultipleTrigger.tsx

@@ -0,0 +1,116 @@
+import React, { InputHTMLAttributes } from 'react';
+import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
+import Input from '@components/Input';
+import Button from '@components/Button';
+import * as S from '../styles';
+import { useTypeaheadContext } from '../Typeahead.context';
+
+export const MultipleTrigger = () => {
+  const theme = useTheme();
+  const context = useTypeaheadContext();
+  const typeaheadInputAdditionalProps: InputHTMLAttributes<HTMLInputElement> =
+    {};
+  if (!context.selectedItems.length && !!context.placeholder) {
+    typeaheadInputAdditionalProps.placeholder = context.placeholder;
+  }
+  return (
+    <React.Fragment>
+      {Object.values(context.optionsWithKey).length > 0 &&
+        context.selectedItems.map((selectedItem, index) => {
+          const currentOption = context.optionsWithKey[selectedItem];
+          const optionText = currentOption
+            ? currentOption.children ||
+              currentOption.label ||
+              currentOption.value
+            : '';
+
+          return (
+            <S.TypeaheadItem
+              key={`typeahead-selected-selectedItem-${index}`}
+              onClick={context.handleSelectedClick}
+              isDisabled={context.isDisabled}>
+              <S.TypeaheadItemLabel isDisabled={context.isDisabled}>
+                {optionText}
+              </S.TypeaheadItemLabel>
+              <S.TypeaheadItemCross
+                isDisabled={context.isDisabled}
+                endIcon={
+                  <Icon
+                    name="cross"
+                    tooltip="Remove"
+                    size={14}
+                    color={
+                      context.isDisabled
+                        ? theme.colors.grey
+                        : theme.colors.greyDarker
+                    }
+                    css={{
+                      '& path': {
+                        strokeWidth: 1,
+                      },
+                    }}
+                  />
+                }
+                onClick={context.handleRemoveSelectedClick(selectedItem)}
+              />
+            </S.TypeaheadItem>
+          );
+        })}
+      <S.TypeaheadInputsGroupWrapper isOpen={context.isOpen}>
+        {!context.isDisabled && (
+          <Input
+            name={context.inputName}
+            status={'custom'}
+            disabled={context.isDisabled}
+            inputProps={{
+              onClick: context.handleInputClick,
+              onKeyDown: context.handleInputKeyDown,
+              onChange: context.handleInputChange,
+              value: context.inputValue,
+              autoComplete: 'off',
+              className: ['typeahead-input', S.TypeaheadInput].join(' '),
+            }}
+            wrapperClassName={S.TypeaheadInputWrapper}
+            ref={context.inputRef}
+          />
+        )}
+        <input
+          type="text"
+          data-testid="typeahead-input"
+          aria-hidden
+          readOnly
+          value={context.firstSuggestion}
+          disabled={context.isDisabled}
+          className={[
+            'typeahead-input',
+            S.TypeaheadInput,
+            S.TypeaheadInputPlaceholder,
+          ].join(' ')}
+          {...typeaheadInputAdditionalProps}
+        />
+        <input
+          type="hidden"
+          aria-hidden
+          readOnly
+          value={context.selectedItems as string[]}
+          {...context.register?.(context.name, context.validationSchema)}
+        />
+      </S.TypeaheadInputsGroupWrapper>
+      {!context.isDisabled && context.selectedItems.length ? (
+        <Button
+          variant="tertiary"
+          data-testid="remove-all-button"
+          endIcon={<Icon name="cross" size={8} tooltip="Remove all" />}
+          css={{
+            padding: '0 14px 0 10px',
+            position: 'absolute',
+            right: 0,
+            zIndex: 10,
+          }}
+          onClick={context.handleClearAll}
+        />
+      ) : null}
+    </React.Fragment>
+  );
+};

package/src/components/Typeahead/components/NoOptions.tsx

@@ -0,0 +1,7 @@
+import * as S from '../styles';
+
+export const NoOptions = ({ children, ...rest }: React.PropsWithChildren) => (
+  <S.TypeaheadOption {...rest} role="option">
+    {children}
+  </S.TypeaheadOption>
+);

package/src/components/Typeahead/components/SingleTrigger.tsx

@@ -0,0 +1,71 @@
+import { InputHTMLAttributes } from 'react';
+import Input from '@components/Input';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import { useTypeaheadContext } from '../Typeahead.context';
+import * as S from '../styles';
+
+export const SingleTrigger = () => {
+  const context = useTypeaheadContext();
+  const typeaheadInputAdditionalProps: InputHTMLAttributes<HTMLInputElement> =
+    {};
+  if (!context.selectedItems.length && !!context.placeholder) {
+    typeaheadInputAdditionalProps.placeholder = context.placeholder;
+  }
+
+  return (
+    <S.TypeaheadInputsGroupWrapper isOpen={context.isOpen}>
+      {!context.isDisabled && (
+        <Input
+          name={context.inputName}
+          status={'custom'}
+          disabled={context.isDisabled}
+          inputProps={{
+            onClick: context.handleInputClick,
+            onKeyDown: context.handleInputKeyDown,
+            onChange: context.handleInputChange,
+            value: context.inputValue,
+            autoComplete: 'off',
+            className: ['typeahead-input', S.TypeaheadInput].join(' '),
+          }}
+          wrapperClassName={S.TypeaheadInputWrapper}
+          ref={context.inputRef}
+        />
+      )}
+      <input
+        type="text"
+        data-testid="typeahead-input"
+        aria-hidden
+        readOnly
+        value={context.firstSuggestion}
+        className={[
+          'typeahead-input',
+          S.TypeaheadInput,
+          S.TypeaheadInputPlaceholder,
+        ].join(' ')}
+        {...typeaheadInputAdditionalProps}
+      />
+      <input
+        type="hidden"
+        aria-hidden
+        readOnly
+        value={(context.selectedItems[0] || '') as string | undefined}
+        {...context.register?.(context.name, context.validationSchema)}
+      />
+      {!context.isDisabled && context.selectedItems.length ? (
+        <Button
+          variant="tertiary"
+          data-testid="remove-all-button"
+          endIcon={<Icon name="cross" size={8} tooltip="Remove" />}
+          css={{
+            padding: '0 14px 0 10px',
+            position: 'absolute',
+            right: -28,
+            zIndex: 10,
+          }}
+          onClick={context.handleClearAll}
+        />
+      ) : null}
+    </S.TypeaheadInputsGroupWrapper>
+  );
+};

package/src/components/Typeahead/components/TypeaheadItem.ts

@@ -0,0 +1,14 @@
+import Icon from '@components/Icon';
+import styled from '@emotion/styled';
+
+export const TypeaheadItemImage = styled.img`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+`;
+
+export const TypeaheadItemIcon = styled(Icon)`
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+`;