@xqmsg/ui-core 0.9.3 → 0.10.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.3",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/Input.stories.tsx

@@ -7,6 +7,7 @@ import * as Yup from 'yup';
 import { Form } from '../form';
 import ipRegex from 'ip-regex';
 import { useEffect, useMemo } from '@storybook/addons';
+import { Box } from '@chakra-ui/react';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -85,7 +86,7 @@ const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
     (value, testContext) => {
       if (value) {
         const ipStringsToArray = value.split(',');
-        const isIPValidArray = ipStringsToArray.map(ip => {
+        const isIPValidArray = ipStringsToArray.map((ip) => {
           return ipRegex({ exact: true }).test(ip as string);
         });
 
@@ -99,7 +100,7 @@ const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
                 return malformedIP.trim();
               }
             })
-            .filter(invalidIP => invalidIP !== undefined);
+            .filter((invalidIP) => invalidIP !== undefined);
 
           const errorMessage = `Malformed IPs: ${malformedIPList.join(', ')}`;
           return testContext.createError({
@@ -114,7 +115,7 @@ const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
 });
 
 export default meta;
-const Template: Story<InputProps<StoryFormSchema>> = args => {
+const Template: Story<InputProps<StoryFormSchema>> = (args) => {
   const formHandler = useFormHandler<StoryFormSchema>(
     onStubbedSubmit,
     storyFormDefaultValues,
@@ -129,20 +130,15 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
     if (form.formState.errors) return form.formState.errors.prop?.message;
   }, [form.formState.errors]);
 
-  console.log(form.watch('prop'));
-
   useEffect(() => {
     form.resetField('prop');
-  }, [args.inputType]);
+  }, [args.inputType, form]);
 
   return (
     <Form formHandler={formHandler}>
-      <Input
-        {...args}
-        setValue={form.setValue}
-        errorText={valueErrorMessage}
-        isInvalid={!!valueErrorMessage}
-      />
+      <Input {...args} setValue={form.setValue} errorText={valueErrorMessage} />
+      <Box mb={10}>Hi</Box> <Box mb={10}>there</Box> <Box mb={10}>Hi</Box>{' '}
+      <Box mb={10}>hey</Box> hello
     </Form>
   );
 };
@@ -153,17 +149,37 @@ Default.args = {
   inputType: 'text',
   name: 'prop',
   options: [
+    { value: 'section_header', label: 'Section 1', sortValue: 0 },
     {
       value: 'value1',
       label: 'Value 1',
+      sortValue: 1,
     },
     {
       value: 'value2',
       label: 'Value 2',
+      sortValue: 2,
     },
     {
       value: 'value3',
       label: 'Value 3',
+      sortValue: 3,
+    },
+    {
+      value: 'value4',
+      label: 'Value 4',
+      sortValue: 4,
+    },
+    { value: 'section_header', label: 'Section 2', sortValue: 5 },
+    {
+      value: 'value5',
+      label: 'Value 5',
+      sortValue: 6,
+    },
+    {
+      value: 'value6',
+      label: 'Value 6',
+      sortValue: 7,
     },
   ],
   isRequired: true,

package/src/components/input/InputTypes.ts

@@ -18,7 +18,13 @@ export type InputType =
   | 'checkbox'
   | 'switch';
 
-export type FieldOptions = { label: string; value: string }[];
+export type FieldOption = {
+  label: string;
+  value: string | 'section_header';
+  sortValue: number;
+};
+
+export type FieldOptions = FieldOption[];
 
 export interface ValidationProps {
   isRequired: boolean;

package/src/components/input/StackedInput/StackedInput.tsx

@@ -1,29 +1,17 @@
 import React from 'react';
-import { Input, InputGroup } from '@chakra-ui/react';
+import { Input } from '@chakra-ui/react';
 import { InputFieldProps } from '../InputTypes';
 
 export interface StackedInputProps extends InputFieldProps {
-  label?: string;
   isRequired?: boolean;
-  leftElement?: React.ReactNode;
-  rightElement?: React.ReactNode;
 }
 
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
 const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
-  (
-    { type = 'text', isRequired, leftElement, rightElement, ...props },
-    _ref
-  ) => {
-    return (
-      <InputGroup>
-        {leftElement && leftElement}
-        <Input ref={_ref} type={type} isRequired={isRequired} {...props} />
-        {rightElement && rightElement}
-      </InputGroup>
-    );
+  ({ type = 'text', isRequired, ...props }, _ref) => {
+    return <Input ref={_ref} type={type} isRequired={isRequired} {...props} />;
   }
 );
 

package/src/components/input/StackedMultiSelect/components/MultiValue/index.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import React, { PropsWithChildren } from 'react';
-import InputTag from '../../../components/InputTag';
+import InputTag from '../../../components/token';
 
 interface MultiValueProps extends PropsWithChildren {
   clearValue: () => void;
@@ -13,7 +13,7 @@ interface MultiValueProps extends PropsWithChildren {
 const MultiValue: React.FC<MultiValueProps> = ({ children, clearValue }) => {
   return (
     <Box marginRight="5px">
-      <InputTag value={children} onDelete={clearValue} />
+      <InputTag label={children} onDelete={clearValue} />
     </Box>
   );
 };

package/src/components/input/StackedMultiSelect/index.tsx

@@ -1,15 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import { Flex } from '@chakra-ui/react';
-import { FieldOptions, ReactSelectFieldProps } from '../InputTypes';
-import ReactSelect from 'react-select';
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Flex, Text, Image, useOutsideClick } from '@chakra-ui/react';
+import {
+  FieldOption,
+  FieldOptions,
+  ReactSelectFieldProps,
+} from '../InputTypes';
 import colors from '../../../theme/foundations/colors';
-import MultiValue from './components/MultiValue';
 import {
   Control,
   FieldValues,
   UseFormSetValue,
   useWatch,
 } from 'react-hook-form';
+import SubtractIcon from '../StackedSelect/assets/svg/subtract.svg';
+import { Dropdown } from '../components/dropdown';
+import Token from '../components/token';
 
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   options: FieldOptions;
@@ -21,124 +26,115 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
  * A functional React component utilized to render the `StackedMultiSelect` component.
  */
 const StackedMultiSelect = React.forwardRef<
-  HTMLSelectElement,
+  HTMLInputElement,
   StackedMultiSelectProps
->(({ options, setValue, control, name }, _ref) => {
+>(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
   const watchedValue = useWatch({ control, name: name as string });
+  const dropdownRef = useRef(null);
+
+  const [localValues, setLocalValues] = useState<FieldOptions>([]);
+  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+  const [isFocussed, setIsFocussed] = useState(false);
 
-  const [inputValue, setInputValue] = useState('');
-  const [localValue, setLocalValue] = useState([]);
+  useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
 
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {
     if (watchedValue !== undefined && !watchedValue.length) {
-      setLocalValue([]);
+      setLocalValues([]);
     }
 
     if (watchedValue !== undefined && watchedValue?.length) {
-      setLocalValue(
+      setLocalValues(
         watchedValue
           .split(',')
           .filter(Boolean)
           .map((value: string) =>
-            options.find(option => option.value === value)
+            options.find((option) => option.value === value)
           )
       );
     }
   }, [options, watchedValue]);
 
-  const component = {
-    DropdownIndicator: null,
-    MultiValue: (props: any) => (
-      <MultiValue
-        clearValue={() => {
-          const arrayValue = watchedValue
-            .split(',')
-            .filter((_: string, index: number) => index !== props.index);
-
-          setLocalValue(
-            arrayValue.map((value: string) =>
-              options.find(option => option.value === value)
-            )
-          );
-
-          setValue(name as string, arrayValue.join(','), {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-        }}
-      >
-        {props.children}
-      </MultiValue>
-    ),
-  };
+  const handleChange = (option: FieldOption) => {
+    const newValue = [...localValues, option]
+      .map(({ value }) => value)
+      .join(',');
 
-  const handleChange = (values: any) => {
-    setValue(
-      name as string,
-      values.map(({ value }: { value: string }) => value).join(','),
-      {
-        shouldValidate: true,
-        shouldDirty: true,
-      }
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    setLocalOptions((prevLocalOptions) =>
+      prevLocalOptions.filter((prevLocalOption) => prevLocalOption !== option)
     );
+
+    setLocalValues((prevLocalValues) => [...prevLocalValues, option]);
   };
 
-  const handleInputChange = (value: string, action: any) => {
-    if (action.action === 'input-change' && action !== 'set-value') {
-      return setInputValue(value);
-    }
+  const handleDelete = (option: FieldOption) => {
+    const newValue = localValues
+      .filter((localValue) => localValue !== option)
+      .map(({ value }) => value)
+      .join(',');
 
-    // reset on select of an option
-    return setInputValue('');
-  };
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
-  const formatGroupLabel = (data: any) => {
-    return (
-      <Flex alignItems="center" justifyContent="space-between">
-        <span>{data.label}</span>
-      </Flex>
+    setLocalOptions((prevLocalOptions) =>
+      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
     );
-  };
 
-  const customStyles = {
-    control: () => ({
-      borderRadius: '6px',
-      fontSize: '16px',
-      color: '#202020',
-      backgroundColor: '#FFFFFF',
-      border: '1px solid',
-      borderColor: colors.gray[200],
-      minHeight: '48px',
-      display: 'flex',
-      padding: '2px 6px',
-    }),
-    menu: () => ({
-      boxShadow: '0 5px 5px 0 rgba(16, 27, 79, 0.15)',
-      borderRadius: '6px',
-      backgroundColor: 'white',
-    }),
-    indicatorsContainer: () => ({ display: 'none' }),
-    placeholder: () => ({ color: '#CBCDCF', fontSize: '16px' }),
+    setLocalValues((prevLocalValues) =>
+      prevLocalValues.filter((prevLocalValue) => prevLocalValue !== option)
+    );
   };
 
   return (
-    <ReactSelect
-      components={component}
-      inputValue={inputValue}
-      value={localValue}
-      isClearable
-      isSearchable
-      isMulti
-      menuPortalTarget={document.body}
-      menuPosition={'fixed'}
-      onChange={handleChange}
-      onInputChange={handleInputChange}
-      styles={customStyles}
-      options={options}
-      placeholder={false}
-      formatGroupLabel={formatGroupLabel}
-    />
+    <Box ref={dropdownRef} position="relative">
+      <Flex
+        fontSize="13px"
+        border={isFocussed ? '2px solid' : '1px solid'}
+        borderColor={isFocussed ? colors.border.focus : colors.border.default}
+        py="5px"
+        pl="8px"
+        borderRadius="4px"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => !disabled && setIsFocussed(true)}
+        bg={disabled ? colors.fill.light : '#ffffff'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+      >
+        <Flex height="28px" alignItems="center">
+          {localValues.length ? (
+            localValues.map((option) => (
+              <Box mr="4px">
+                <Token
+                  label={option.label}
+                  onDelete={() => handleDelete(option)}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text color={colors.label.secondary.light} fontSize="13px">
+              {placeholder}
+            </Text>
+          )}
+        </Flex>
+        <Flex width="39px" justifyContent="center" alignItems="center">
+          <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+        </Flex>
+      </Flex>
+      {isFocussed && (
+        <Dropdown
+          onSelectItem={(option) => handleChange(option)}
+          options={localOptions}
+        />
+      )}
+    </Box>
   );
 });
 

package/src/components/input/StackedPilledInput/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Flex, Input } from '@chakra-ui/react';
+import { Box, Flex, Input, Text, useOutsideClick } from '@chakra-ui/react';
 import { InputFieldProps } from '../InputTypes';
 import {
   Control,
@@ -8,7 +8,7 @@ import {
   useWatch,
 } from 'react-hook-form';
 import colors from '../../../theme/foundations/colors';
-import InputTag from '../components/InputTag';
+import Token from '../components/token';
 
 export interface StackedPilledInputProps extends InputFieldProps {
   setValue: UseFormSetValue<FieldValues>;
@@ -21,15 +21,17 @@ export interface StackedPilledInputProps extends InputFieldProps {
 const StackedPilledInput = React.forwardRef<
   HTMLInputElement,
   StackedPilledInputProps
->(({ name, setValue, control }, _ref) => {
+>(({ name, setValue, control, placeholder, disabled }, _ref) => {
   const watchedValue = useWatch({ control, name: name as string });
   const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
     string[]
   >([]);
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const inputWrapperRef = useRef(null);
 
-  const [isInputFocused, setInputFocused] = useState(false);
+  const [tokenIndex, setTokenIndex] = useState<number | null>(null);
+  const [isFocussed, setIsFocussed] = useState(false);
 
   const [localValue, setLocalValue] = useState('');
 
@@ -44,17 +46,34 @@ const StackedPilledInput = React.forwardRef<
     }
   }, [watchedValue]);
 
-  // ensures after value addition that the input field is wiped
-  useEffect(() => {
-    if (localValue === ' ' || localValue.trim() === ',') {
-      setLocalValue('');
-    }
-  }, [localValue]);
-
   const onHandleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
-      if (!localValue.trim() || localValue.trim() === ',')
-        return setLocalValue('');
+      if (
+        e.key === 'Enter' &&
+        !localValue.trim().length &&
+        tokenIndex !== null
+      ) {
+        setLocalValue(lastestFormValueToArray[tokenIndex]);
+
+        const filteredUniqueValues = Array.from(
+          new Set(
+            lastestFormValueToArray.filter(
+              (value) => value !== lastestFormValueToArray[tokenIndex]
+            )
+          )
+        );
+
+        setValue(
+          name as string,
+          filteredUniqueValues.toString().replace(/\s/g, ''),
+          {
+            shouldValidate: true,
+            shouldDirty: true,
+          }
+        );
+
+        return setTokenIndex(null);
+      }
 
       const filteredUniqueValues = Array.from(
         new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
@@ -71,6 +90,59 @@ const StackedPilledInput = React.forwardRef<
         }
       );
     }
+
+    if (!localValue.trim().length && lastestFormValueToArray.length) {
+      if (e.key === 'Backspace' && tokenIndex !== null) {
+        setLocalValue(
+          lastestFormValueToArray[tokenIndex].substring(
+            0,
+            lastestFormValueToArray[tokenIndex].length
+          )
+        );
+
+        const filteredUniqueValues = Array.from(
+          new Set(
+            [...lastestFormValueToArray].filter(
+              (value) => value !== lastestFormValueToArray[tokenIndex]
+            )
+          )
+        );
+
+        setValue(
+          name as string,
+          filteredUniqueValues.toString().replace(/\s/g, ''),
+          {
+            shouldValidate: true,
+            shouldDirty: true,
+          }
+        );
+
+        return setTokenIndex(null);
+      }
+
+      if (e.key === 'ArrowLeft') {
+        if (tokenIndex === 0) return;
+
+        if (!tokenIndex) {
+          return setTokenIndex(lastestFormValueToArray.length - 1);
+        }
+
+        return setTokenIndex(
+          (prevTokenIndex) => (prevTokenIndex as number) - 1
+        );
+      }
+
+      if (e.key === 'ArrowRight') {
+        if (tokenIndex === null) return;
+
+        if (tokenIndex === lastestFormValueToArray.length - 1) {
+          return setTokenIndex(null);
+        }
+        return setTokenIndex(
+          (prevTokenIndex) => (prevTokenIndex as number) + 1
+        );
+      }
+    }
   };
 
   const onRemoveTag = (index: number) => {
@@ -106,63 +178,80 @@ const StackedPilledInput = React.forwardRef<
       );
       setLocalValue('');
     }
-    setInputFocused(false);
+    setIsFocussed(false);
   };
 
+  useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+
   return (
-    <Flex position="relative" width="100%">
-      <Box
-        outline={isInputFocused ? '2px solid rgba(0, 122, 255, 255)' : ''}
-        borderRadius={isInputFocused ? 'md' : ''}
-        width="100%"
+    <Box position="relative">
+      <Flex
+        fontSize="13px"
+        border={isFocussed ? '2px solid' : '1px solid'}
+        borderColor={isFocussed ? colors.border.focus : colors.border.default}
+        py="5px"
+        pl="8px"
+        borderRadius="4px"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        bg={disabled ? colors.fill.light : '#ffffff'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        ref={inputWrapperRef}
       >
-        <Flex
-          background="rgba(255, 255, 255, 0.8)"
-          border="1px solid"
-          borderColor={colors.gray[200]}
-          borderRadius="6px"
-          fontWeight="400"
-          fontSize="12px"
-          lineHeight="12px"
-          minHeight="48px"
-          letterSpacing="0.02em"
-          padding="0 12px"
-          pt={lastestFormValueToArray.length ? '12px' : '0px'}
-          alignItems="center"
-          flexWrap="wrap"
-          gap="0.5em"
-          width="100%"
-          onClick={() => inputRef.current?.focus()}
-        >
-          {lastestFormValueToArray.map((tag, index) => (
-            <InputTag
-              value={tag}
-              key={tag}
-              onDelete={(e: any) => {
-                e.stopPropagation();
-                e.preventDefault();
-                onRemoveTag(index);
-              }}
-            />
-          ))}
-
+        <Flex height="28px" alignItems="center" width="fit-content">
+          {lastestFormValueToArray.length ? (
+            lastestFormValueToArray.map((label, index) => (
+              <Box
+                mr="4px"
+                border={
+                  tokenIndex === index
+                    ? `2px solid ${colors.border.focus}`
+                    : 'none'
+                }
+                borderRadius="full"
+                onClick={() => setTokenIndex(index)}
+              >
+                <Token
+                  label={label}
+                  onDelete={(e: any) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    onRemoveTag(index);
+                  }}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text color={colors.label.secondary.light} fontSize="13px">
+              {placeholder}
+            </Text>
+          )}
+        </Flex>
+        <Flex flex={1}>
           <Input
             onKeyDown={onHandleKeyDown}
             type="text"
-            padding={isInputFocused ? '0.5em 0' : '0px'}
-            height={isInputFocused ? '46px' : '0px'}
+            padding={0}
             width="100%"
             border="none"
+            height="26px"
+            color={tokenIndex !== null ? 'transparent' : colors.label.primary}
             _focus={{ boxShadow: 'none !important' }}
             value={localValue}
-            onBlur={onBlur}
-            onChange={e => setLocalValue(e.target.value)}
+            onChange={(e) =>
+              tokenIndex === null && setLocalValue(e.target.value)
+            }
             ref={inputRef}
-            onFocus={() => setInputFocused(true)}
+            onFocus={() => setIsFocussed(true)}
           />
         </Flex>
-      </Box>
-    </Flex>
+      </Flex>
+    </Box>
   );
 });