@xqmsg/ui-core 0.9.3 → 0.11.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.3",
+  "version": "0.11.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,7 +98,6 @@
     "@hookform/resolvers": "^2.9.7",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
-    "ip-regex": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.34.0",

package/src/components/banner/index.tsx

@@ -11,6 +11,7 @@ import ErrorIcon from './assets/svg/error.svg';
 import PositiveIcon from './assets/svg/positive.svg';
 import NeutralIcon from './assets/svg/neutral.svg';
 import WarningIcon from './assets/svg/warning.svg';
+import colors from 'src/theme/foundations/colors';
 
 export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
 
@@ -52,7 +53,12 @@ export const Banner: React.FC<BannerProps> = ({
         {message}
         {onClick && buttonText && (
           <Flex pt="8px" justifyContent="flex-end">
-            <Button size="sm" bg="white" color="blue.500" onClick={onClick}>
+            <Button
+              size="sm"
+              bg="white"
+              color={colors.fill.action}
+              onClick={onClick}
+            >
               {buttonText}
             </Button>
           </Flex>

package/src/components/button/Button.stories.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Button, ButtonProps } from '.';
+import { Box, Flex } from '@chakra-ui/react';
 
 const meta: Meta<ButtonProps> = {
   title: 'Button example',
   component: Button,
   argTypes: {
+    width: {
+      control: null,
+      description:
+        '`variable` adopts 100% of the width of the parent component, whereas `fixed` fits the label content to the button',
+    },
     text: {
       control: {
         type: 'text',
@@ -24,23 +30,29 @@ const meta: Meta<ButtonProps> = {
       control: 'boolean',
       description: 'Disabled state of the button',
     },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'The chakra based size prop for the button',
-    },
   },
   parameters: {
     controls: { expanded: true },
   },
 };
 export default meta;
-const Template: Story<ButtonProps> = args => <Button {...args} />;
+const Template: Story<ButtonProps> = args => (
+  <Flex flexDir="column" height="200px" justifyContent="space-between">
+    <Button {...args} text="Solid Fixed" variant="solid" width="fixed" />
+    <Button {...args} text="Outline Fixed" variant="outline" width="fixed" />
+    <Button {...args} text="Solid Variable" variant="solid" width="variable" />
+    <Button
+      {...args}
+      text="Outline Variable"
+      variant="outline"
+      width="variable"
+    />
+  </Flex>
+);
 
 export const Default = Template.bind({});
 Default.args = {
   onClick: () => alert('This is a button click!'),
-  text: 'Button',
   type: 'button',
   disabled: false,
 };

package/src/components/button/index.tsx

@@ -1,52 +1,40 @@
 import React from 'react';
-import {
-  Button as ChakraButton,
-  ButtonProps as ChakraButtonProps,
-} from '@chakra-ui/react';
+import { Button as ChakraButton } from '@chakra-ui/react';
 import buttonTheme from '../../theme/components/button';
 
 export interface ButtonProps {
   text: string;
   onClick?: () => void;
+  width: 'variable' | 'fixed';
   variant?: keyof typeof buttonTheme.variants;
-  colorScheme?: string;
-  type: 'button' | 'submit' | 'reset' | undefined;
+  type?: 'button' | 'submit' | 'reset';
   ariaLabel: string;
-  size?: 'sm' | 'md' | 'lg' | 'xs';
   disabled?: boolean;
   className?: string;
-  style?: React.CSSProperties;
-  width?: string | number;
 }
 
 /**
  * A functional React component utilized to render the `Button` component
  */
-export const Button: React.FC<ButtonProps & ChakraButtonProps> = ({
+export const Button: React.FC<ButtonProps> = ({
   onClick,
   text,
-  type,
+  type = 'button',
   ariaLabel,
   variant = 'solid',
-  colorScheme = 'primary',
-  style,
-  size = 'md',
   disabled,
   className,
-  ...props
+  width,
 }) => {
   return (
     <ChakraButton
       onClick={onClick}
       type={type}
       variant={variant}
-      colorScheme={colorScheme}
-      size={size}
       disabled={disabled}
       aria-label={ariaLabel}
-      style={style}
       className={className}
-      {...props}
+      width={width === 'variable' ? '100%' : 'fit-content'}
     >
       {text}
     </ChakraButton>

package/src/components/button/spinner/index.tsx

@@ -15,25 +15,20 @@ export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   onClick,
   type,
   ariaLabel,
-  style,
   variant = 'solid',
-  colorScheme = 'primary',
-  size = 'md',
+
   disabled,
   className,
 }) => {
   return (
     <Button
-      spinner={<Spinner size={size} />}
+      spinner={<Spinner size={'md'} />}
       isLoading={isLoading}
       onClick={onClick}
       type={type}
       variant={variant}
-      colorScheme={colorScheme}
-      size={size}
       disabled={disabled}
       aria-label={ariaLabel}
-      style={style}
       className={className}
     >
       {text}

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

@@ -5,8 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
-import ipRegex from 'ip-regex';
-import { useEffect, useMemo } from '@storybook/addons';
+import { useMemo } from '@storybook/addons';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -19,17 +18,6 @@ const meta: Meta<InputProps<StoryFormSchema>> = {
       description: 'The label for the input',
     },
     inputType: {
-      control: 'select',
-      options: [
-        'text',
-        'textarea',
-        'radio',
-        'select',
-        'checkbox',
-        'multi-select',
-        'pilled-text',
-        'switch',
-      ],
       description: 'The type of the input',
     },
     options: {
@@ -70,47 +58,28 @@ const meta: Meta<InputProps<StoryFormSchema>> = {
 
 interface StoryFormSchema {
   prop?: string;
+  prop2?: string;
+  prop3?: string;
+  prop4?: string;
+  prop5?: string;
 }
 
 const onStubbedSubmit = () => null;
 
 const storyFormDefaultValues: StoryFormSchema = {
   prop: '',
+  prop2: '',
+  prop3: '',
+  prop4: '',
+  prop5: '',
 };
 
 const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
-  prop: Yup.string().test(
-    'Valid IP',
-    'Please enter a valid IP address.',
-    (value, testContext) => {
-      if (value) {
-        const ipStringsToArray = value.split(',');
-        const isIPValidArray = ipStringsToArray.map(ip => {
-          return ipRegex({ exact: true }).test(ip as string);
-        });
-
-        if (isIPValidArray && isIPValidArray.includes(false)) {
-          const malformedIPList = isIPValidArray
-            // eslint-disable-next-line
-            .map((testedIP, i) => {
-              if (testedIP === false) {
-                const malformedIP = ipStringsToArray[i];
-
-                return malformedIP.trim();
-              }
-            })
-            .filter(invalidIP => invalidIP !== undefined);
-
-          const errorMessage = `Malformed IPs: ${malformedIPList.join(', ')}`;
-          return testContext.createError({
-            message:
-              errorMessage.length <= 45 ? errorMessage : `${errorMessage}...`,
-          });
-        }
-      }
-      return true;
-    }
-  ),
+  prop: Yup.string(),
+  prop2: Yup.string(),
+  prop3: Yup.string(),
+  prop4: Yup.string(),
+  prop5: Yup.string(),
 });
 
 export default meta;
@@ -125,23 +94,37 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   const { form } = formHandler;
 
-  const valueErrorMessage = useMemo(() => {
-    if (form.formState.errors) return form.formState.errors.prop?.message;
-  }, [form.formState.errors]);
-
-  console.log(form.watch('prop'));
-
-  useEffect(() => {
-    form.resetField('prop');
-  }, [args.inputType]);
-
   return (
     <Form formHandler={formHandler}>
       <Input
         {...args}
+        inputType="multi-select"
+        setValue={form.setValue}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="textarea"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        name="prop"
+        inputType="pilled-text"
         setValue={form.setValue}
-        errorText={valueErrorMessage}
-        isInvalid={!!valueErrorMessage}
       />
     </Form>
   );
@@ -151,19 +134,38 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Input Label',
   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,22 +26,26 @@ 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)
@@ -47,98 +56,85 @@ const StackedMultiSelect = React.forwardRef<
     }
   }, [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.quaternary : '#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>
   );
 });