@xqmsg/ui-core 0.9.2 → 0.10.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.2",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -79,6 +79,10 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
+    "generate-changelog": "^1.8.0",
+    "yalc": "^1.0.0-pre.53"
+  },
+  "dependencies": {
     "@chakra-ui/icons": "^2.0.0",
     "@chakra-ui/media-query": "^2.0.0",
     "@chakra-ui/progress": "^2.0.0",
@@ -94,7 +98,6 @@
     "@hookform/resolvers": "^2.9.7",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
-    "generate-changelog": "^1.8.0",
     "ip-regex": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -102,7 +105,6 @@
     "react-icons": "^4.4.0",
     "react-is": "^18.2.0",
     "react-select": "^5.4.0",
-    "yalc": "^1.0.0-pre.53",
     "yup": "^0.32.11"
   },
   "resolutions": {

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