@xqmsg/ui-core 0.9.2 → 0.10.0

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>
   );
 });
 

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -1,31 +1,74 @@
-import React from 'react';
-import { InputGroup, Select } from '@chakra-ui/react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
+import React, { useRef, useState } from 'react';
+import {
+  Box,
+  Image,
+  Input,
+  InputGroup,
+  InputRightElement,
+  useOutsideClick,
+} from '@chakra-ui/react';
+import { FieldOptions } from '../InputTypes';
+import { StackedInputProps } from '../StackedInput/StackedInput';
+import colors from 'src/theme/foundations/colors';
+import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
+import SubtractIcon from './assets/svg/subtract.svg';
+import { Dropdown } from '../components/dropdown';
 
-export interface StackedSelectProps extends SelectFieldProps {
+export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
+  setValue: UseFormSetValue<FieldValues>;
+  control: Control<FieldValues, any>;
 }
 
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
-const StackedSelect = React.forwardRef<HTMLSelectElement, StackedSelectProps>(
-  ({ isRequired, options, onChange, ...props }, _ref) => {
+const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
+  ({ isRequired, options, name, setValue, onChange, ...props }, _ref) => {
+    const dropdownRef = useRef(null);
+    const [isFocussed, setIsFocussed] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('');
+
+    useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
+
+    const handleOnSelectItem = (option: {
+      label: string;
+      value: string;
+      sortValue: number;
+    }) => {
+      setValue(name as string, option.value);
+      setSelectedOption(option.label);
+      setIsFocussed(false);
+    };
+
     return (
-      <InputGroup>
-        <Select
-          ref={_ref}
-          isRequired={isRequired}
-          onChange={onChange}
-          {...props}
-        >
-          {options.map(option => (
-            <option value={option.value} key={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </Select>
-      </InputGroup>
+      <Box ref={dropdownRef} position="relative">
+        <InputGroup>
+          <Input
+            isRequired={isRequired}
+            {...props}
+            ref={_ref}
+            onClick={() => setIsFocussed(!isFocussed)}
+            cursor="pointer"
+            color="transparent"
+            fontSize="13px"
+            textShadow={`0 0 0 ${colors.label.primary.light}`}
+            value={selectedOption}
+          />
+          <InputRightElement
+            cursor="pointer"
+            onClick={() => setIsFocussed(!isFocussed)}
+          >
+            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+          </InputRightElement>
+        </InputGroup>
+        {isFocussed && (
+          <Dropdown
+            onSelectItem={(option) => handleOnSelectItem(option)}
+            options={options}
+          />
+        )}
+      </Box>
     );
   }
 );

package/src/components/input/StackedSelect/assets/svg/subtract.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z" fill="#0082FF"/>
+</svg>

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

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import colors from 'src/theme/foundations/colors';
+import { FieldOption, FieldOptions } from '../../InputTypes';
+
+export interface DropdownProps {
+  onSelectItem: (option: FieldOption) => void;
+  options: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  onSelectItem,
+  options,
+}) => {
+  const DropdownContent = useMemo(() => {
+    return options.map((option, idx) => (
+      <>
+        {option.value === 'section_header' &&
+          options[idx + 1] &&
+          options[idx + 1].value !== 'section_header' && (
+            <Box
+              color={colors.label.secondary.light}
+              fontSize="13px"
+              fontWeight="bold"
+              px="8px"
+            >
+              {idx > 0 && (
+                <Box
+                  my="3px"
+                  borderTop="2px solid"
+                  borderColor={colors.border.default}
+                />
+              )}
+              {option.label}
+            </Box>
+          )}
+        {option.value !== 'section_header' && (
+          <Box
+            cursor="pointer"
+            borderRadius="inherit"
+            onClick={() => onSelectItem(option)}
+            key={option.value}
+            fontSize="13px"
+            px="8px"
+            py="4px"
+            color={colors.label.primary.light}
+            _hover={{
+              color: colors.label.primary.dark,
+              bg: colors.fill.blue,
+              borderRadius: '4px',
+            }}
+          >
+            {option.label}
+          </Box>
+        )}
+      </>
+    ));
+  }, [onSelectItem, options]);
+
+  return (
+    <Box
+      bg={colors.fill.light}
+      backdropFilter="blur(64px)"
+      borderRadius="4px"
+      mt="3px"
+      maxH="320px"
+      overflowY="auto"
+      px="8px"
+      py="4px"
+      position="absolute"
+      width="100%"
+    >
+      {DropdownContent}
+    </Box>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Box, FormLabel } from '@chakra-ui/react';
+import colors from 'src/theme/foundations/colors';
+
+export interface LabelProps {
+  label: string;
+  isRequired?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `Label` component
+ */
+export const Label: React.FC<LabelProps> = ({ isRequired, label }) => {
+  return (
+    <FormLabel>
+      {label}
+      {isRequired && (
+        <Box ml={1} color={colors.label.error}>
+          *
+        </Box>
+      )}
+    </FormLabel>
+  );
+};

package/src/components/input/components/token/Token.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import Token, { TokenProps } from '.';
+
+const meta: Meta<TokenProps> = {
+  title: 'Token example',
+  component: Token,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+const Template: Story<TokenProps> = (args) => (
+  <Token {...args} onDelete={() => null} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label',
+};

package/src/components/input/components/token/assets/svg/close.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z" fill="#3C3C43" fill-opacity="0.6"/>
+</svg>

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

@@ -0,0 +1,37 @@
+import { Flex, Image, Text } from '@chakra-ui/react';
+import React from 'react';
+import colors from 'src/theme/foundations/colors';
+import CloseIcon from './assets/svg/close.svg';
+
+export interface TokenProps {
+  label: any;
+  onDelete: any;
+}
+
+const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
+  return (
+    <Flex
+      key={label}
+      borderRadius="full"
+      backgroundColor="#7676801F"
+      alignItems="center"
+      width="fit-content"
+      pl="8px"
+      pr="4px"
+      py="2px"
+    >
+      <Text color={colors.label.primary.light} fontSize="13px">
+        {label}
+      </Text>
+      <Image
+        pl="4px"
+        boxSize="16px"
+        src={CloseIcon}
+        onClick={onDelete}
+        cursor="pointer"
+      />
+    </Flex>
+  );
+};
+
+export default Token;

package/src/components/input/index.tsx

@@ -6,11 +6,9 @@ import StackedSelect from './StackedSelect/StackedSelect';
 import StackedTextarea from './StackedTextarea/StackedTextarea';
 import { FieldOptions, ValidationProps, InputType } from './InputTypes';
 import {
-  Box,
   FormControl,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
 } from '@chakra-ui/react';
 import {
   Control,
@@ -24,6 +22,7 @@ import {
 import StackedMultiSelect from './StackedMultiSelect';
 import StackedPilledInput from './StackedPilledInput';
 import StackedSwitch from './StackedSwitch';
+import { Label } from './components/label';
 
 export interface InputProps<T extends FieldValues> extends ValidationProps {
   inputType: InputType;
@@ -36,8 +35,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   options?: FieldOptions;
   maxLength?: number;
   helperText?: React.ReactNode;
-  leftElement?: React.ReactNode;
-  rightElement?: React.ReactNode;
+
   control?: Control<T, any>;
   onChange?: (args?: any) => void;
   disabled?: boolean;
@@ -56,8 +54,7 @@ export function Input<T extends FieldValues>({
   placeholder,
   name,
   helperText,
-  leftElement,
-  rightElement,
+
   options,
   isInvalid,
   errorText,
@@ -87,8 +84,6 @@ export function Input<T extends FieldValues>({
               placeholder={placeholder}
               maxLength={maxLength}
               isRequired={isRequired}
-              leftElement={leftElement}
-              rightElement={rightElement}
               isInvalid={isInvalid}
               onChange={onChange}
               onBlur={onBlur}
@@ -124,9 +119,12 @@ export function Input<T extends FieldValues>({
               options={options as FieldOptions}
               onChange={onChange}
               onBlur={onBlur}
+              setValue={setValue as UseFormSetValue<FieldValues>}
+              control={control as Control<FieldValues, any>}
               ref={ref}
               disabled={disabled}
               value={value}
+              placeholder={placeholder}
             />
           );
         case 'textarea':
@@ -176,6 +174,7 @@ export function Input<T extends FieldValues>({
               value={value}
               setValue={setValue as UseFormSetValue<FieldValues>}
               control={control as Control<FieldValues, any>}
+              placeholder={placeholder}
             />
           );
         case 'pilled-text':
@@ -220,12 +219,10 @@ export function Input<T extends FieldValues>({
       inputType,
       isInvalid,
       isRequired,
-      leftElement,
       maxLength,
       name,
       options,
       placeholder,
-      rightElement,
       setValue,
     ]
   );
@@ -243,16 +240,7 @@ export function Input<T extends FieldValues>({
           position="relative"
           py={label ? 6 : 0}
         >
-          {label && (
-            <FormLabel position="absolute" top={0} display="flex">
-              {label}
-              {isRequired && (
-                <Box ml={1} color="red.500">
-                  *
-                </Box>
-              )}
-            </FormLabel>
-          )}
+          {label && <Label label={label} isRequired={isRequired} />}
           {selectedInputField(
             onChange ? onChange : fieldOnChange,
             onBlur,

package/src/theme/components/alert.ts

@@ -19,25 +19,25 @@ const baseStyle = {
 
 function variantPositive() {
   return {
-    container: { bg: '#d8f1b8' },
+    container: { bg: colors.fill.positive },
   };
 }
 
 function variantWarning() {
   return {
-    container: { bg: '#ffefb4' },
+    container: { bg: colors.fill.warning },
   };
 }
 
 function variantError() {
   return {
-    container: { bg: '#ffbdb9' },
+    container: { bg: colors.fill.error },
   };
 }
 
 function variantNeutral() {
   return {
-    container: { bg: '#7474800D' },
+    container: { bg: colors.fill.light },
   };
 }