@xqmsg/ui-core 0.8.0

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

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { FieldOptions, ReactSelectFieldProps } from '../InputTypes';
+import ReactSelect from 'react-select';
+import colors from '../../../theme/foundations/colors';
+import MultiValue from './components/MultiValue';
+import {
+  Control,
+  FieldValues,
+  UseFormSetValue,
+  useWatch,
+} from 'react-hook-form';
+
+export interface StackedMultiSelectProps extends ReactSelectFieldProps {
+  options: FieldOptions;
+  setValue: UseFormSetValue<FieldValues>;
+  control: Control<FieldValues, any>;
+}
+
+/**
+ * A functional React component utilized to render the `StackedMultiSelect` component.
+ */
+const StackedMultiSelect = React.forwardRef<
+  HTMLSelectElement,
+  StackedMultiSelectProps
+>(({ options, setValue, control, name }, _ref) => {
+  const watchedValue = useWatch({ control, name: name as string });
+
+  const [inputValue, setInputValue] = useState('');
+  const [localValue, setLocalValue] = useState([]);
+
+  // gets latest watched form value (common delimited) from RHF state and creates a list
+  useEffect(() => {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLocalValue([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue?.length) {
+      setLocalValue(
+        watchedValue
+          .split(',')
+          .filter(Boolean)
+          .map((value: string) =>
+            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 = (values: any) => {
+    setValue(
+      name as string,
+      values.map(({ value }: { value: string }) => value).join(','),
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+      }
+    );
+  };
+
+  const handleInputChange = (value: string, action: any) => {
+    if (action.action === 'input-change' && action !== 'set-value') {
+      return setInputValue(value);
+    }
+
+    // reset on select of an option
+    return setInputValue('');
+  };
+
+  const formatGroupLabel = (data: any) => {
+    return (
+      <Flex alignItems="center" justifyContent="space-between">
+        <span>{data.label}</span>
+      </Flex>
+    );
+  };
+
+  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' }),
+  };
+
+  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}
+    />
+  );
+});
+
+export default StackedMultiSelect;

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

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Flex, Input } from '@chakra-ui/react';
+import { InputFieldProps } from '../InputTypes';
+import {
+  Control,
+  FieldValues,
+  UseFormSetValue,
+  useWatch,
+} from 'react-hook-form';
+import colors from '../../../theme/foundations/colors';
+import InputTag from '../components/InputTag';
+
+export interface StackedPilledInputProps extends InputFieldProps {
+  setValue: UseFormSetValue<FieldValues>;
+  control: Control<FieldValues, any>;
+}
+
+/**
+ * A functional React component utilized to render the `StackedPilledInput` component.
+ */
+const StackedPilledInput = React.forwardRef<
+  HTMLInputElement,
+  StackedPilledInputProps
+>(({ name, setValue, control }, _ref) => {
+  const watchedValue = useWatch({ control, name: name as string });
+  const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
+    string[]
+  >([]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isInputFocused, setInputFocused] = useState(false);
+
+  const [localValue, setLocalValue] = useState('');
+
+  // gets latest watched form value (common delimited) from RHF state and creates a list
+  useEffect(() => {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLatestFormValueToArray([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue?.length) {
+      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+    }
+  }, [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('');
+
+      const filteredUniqueValues = Array.from(
+        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+      );
+
+      setLocalValue('');
+
+      return setValue(
+        name as string,
+        filteredUniqueValues.toString().replace(/\s/g, ''),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        }
+      );
+    }
+  };
+
+  const onRemoveTag = (index: number) => {
+    const filteredUniqueValues = lastestFormValueToArray.filter(
+      (_, i) => i !== index
+    );
+
+    setLatestFormValueToArray(filteredUniqueValues);
+
+    setValue(
+      name as string,
+      filteredUniqueValues.toString().replace(/\s/g, ''),
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+      }
+    );
+  };
+
+  const onBlur = () => {
+    if (localValue.trim()) {
+      const filteredUniqueValues = Array.from(
+        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+      );
+
+      setValue(
+        name as string,
+        filteredUniqueValues.toString().replace(/\s/g, ''),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        }
+      );
+      setLocalValue('');
+    }
+    setInputFocused(false);
+  };
+
+  return (
+    <Flex position="relative" width="100%">
+      <Box
+        outline={isInputFocused ? '2px solid rgba(0, 122, 255, 255)' : ''}
+        borderRadius={isInputFocused ? 'md' : ''}
+        width="100%"
+      >
+        <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);
+              }}
+            />
+          ))}
+
+          <Input
+            onKeyDown={onHandleKeyDown}
+            type="text"
+            padding={isInputFocused ? '0.5em 0' : '0px'}
+            height={isInputFocused ? '46px' : '0px'}
+            width="100%"
+            border="none"
+            _focus={{ boxShadow: 'none !important' }}
+            value={localValue}
+            onBlur={onBlur}
+            onChange={e => setLocalValue(e.target.value)}
+            ref={inputRef}
+            onFocus={() => setInputFocused(true)}
+          />
+        </Flex>
+      </Box>
+    </Flex>
+  );
+});
+
+export default StackedPilledInput;

package/src/components/input/StackedRadio/StackedRadioGroup.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Flex, InputGroup, Radio, RadioGroup } from '@chakra-ui/react';
+import { FieldOptions, SelectFieldProps } from '../InputTypes';
+
+export interface StackedRadioGroupProps extends SelectFieldProps {
+  flexDirection?: 'row' | 'column';
+
+  options: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `StackedRadio` component.
+ */
+const StackedRadioGroup = React.forwardRef<
+  HTMLInputElement,
+  StackedRadioGroupProps
+>(({ id, flexDirection = 'row', options }, _ref) => {
+  return (
+    <InputGroup>
+      <RadioGroup name={id}>
+        {options.map(option => (
+          <Flex
+            mr="30px"
+            alignItems="center"
+            key={option.value}
+            flexDirection={flexDirection}
+          >
+            <Radio ref={_ref} value={option.value}>
+              {option.label}
+            </Radio>
+          </Flex>
+        ))}
+      </RadioGroup>
+    </InputGroup>
+  );
+});
+
+export default StackedRadioGroup;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { InputGroup, Select } from '@chakra-ui/react';
+import { FieldOptions, SelectFieldProps } from '../InputTypes';
+
+export interface StackedSelectProps extends SelectFieldProps {
+  options: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `StackedSelect` component.
+ */
+const StackedSelect = React.forwardRef<HTMLSelectElement, StackedSelectProps>(
+  ({ isRequired, options, onChange, ...props }, _ref) => {
+    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>
+    );
+  }
+);
+
+export default StackedSelect;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Switch, SwitchProps } from '@chakra-ui/react';
+
+export interface StackedSwitchProps extends SwitchProps {}
+
+/**
+ * A functional React component utilized to render the `StackedSwitch` component.
+ */
+const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
+  ({ isRequired, onChange, value }, _ref) => {
+    if (value === undefined) return null;
+
+    return (
+      <Switch
+        size="lg"
+        ref={_ref}
+        isRequired={isRequired}
+        value={String(value)}
+        defaultChecked={Boolean(value)}
+        onChange={e => {
+          if (onChange) return onChange(e.target.checked as any);
+        }}
+      />
+    );
+  }
+);
+
+export default StackedSwitch;

package/src/components/input/StackedTextarea/StackedTextarea.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Textarea } from '@chakra-ui/react';
+import { TextareaFieldProps } from '../InputTypes';
+
+export interface StackedTextareaProps extends TextareaFieldProps {}
+
+/**
+ * A functional React component utilized to render the `StackedTextarea` component.
+ */
+const StackedTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  StackedTextareaProps
+>(({ ...props }, _ref) => {
+  return <Textarea ref={_ref} {...props} />;
+});
+
+export default StackedTextarea;

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

@@ -0,0 +1,24 @@
+import { Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
+import React from 'react';
+
+interface InputTagProps {
+  value: any;
+  onDelete?: any;
+}
+
+const InputTag: React.FC<InputTagProps> = ({ value, onDelete }) => {
+  return (
+    <Tag
+      size={'md'}
+      key={value}
+      borderRadius="full"
+      variant="solid"
+      backgroundColor="#eeeeee"
+    >
+      <TagLabel color={'gray.700'}>{value}</TagLabel>
+      {onDelete && <TagCloseButton color={'gray.700'} onClick={onDelete} />}
+    </Tag>
+  );
+};
+
+export default InputTag;