@xqmsg/ui-core 0.16.1 → 0.16.2

package/package.json

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

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

@@ -1,17 +1,28 @@
 import React from 'react';
-import { Input } from '@chakra-ui/react';
+import { Input, InputGroup } from '@chakra-ui/react';
 import { InputFieldProps } from '../InputTypes';
 
 export interface StackedInputProps extends InputFieldProps {
   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, ...props }, _ref) => {
-    return <Input ref={_ref} type={type} isRequired={isRequired} {...props} />;
+  (
+    { type = 'text', isRequired, rightElement, leftElement, ...props },
+    _ref
+  ) => {
+    return (
+      <InputGroup>
+        {leftElement && leftElement}
+        <Input type={type} isRequired={isRequired} {...props} ref={_ref} />
+        {rightElement && rightElement}
+      </InputGroup>
+    );
   }
 );
 

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

@@ -261,35 +261,36 @@ const StackedPilledInput = React.forwardRef<
           }}
           ref={scrollRef}
         >
-          {lastestFormValueToArray.length ? (
-            lastestFormValueToArray.map((label, index) => (
-              <Box
-                mr="4px"
-                border={
-                  tokenIndex === index
-                    ? `1px solid ${colors.border.focus}`
-                    : 'none'
-                }
-                borderRadius="full"
-                onClick={() => isFocussed && setTokenIndex(index)}
-                width="100%"
-                id={`${name}_token_${index}`}
-              >
-                <Token
-                  label={label}
-                  onDelete={(e: any) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onRemoveTag(index);
-                  }}
-                />
-              </Box>
-            ))
-          ) : (
+          {lastestFormValueToArray.length
+            ? lastestFormValueToArray.map((label, index) => (
+                <Box
+                  mr="4px"
+                  border={
+                    tokenIndex === index
+                      ? `1px solid ${colors.border.focus}`
+                      : 'none'
+                  }
+                  borderRadius="full"
+                  onClick={() => isFocussed && setTokenIndex(index)}
+                  width="100%"
+                  id={`${name}_token_${index}`}
+                >
+                  <Token
+                    label={label}
+                    onDelete={(e: any) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onRemoveTag(index);
+                    }}
+                  />
+                </Box>
+              ))
+            : null}
+          {!lastestFormValueToArray.length && !isFocussed ? (
             <Text color={colors.label.secondary.light} fontSize="13px">
               {placeholder}
             </Text>
-          )}
+          ) : null}
         </Flex>
         <Flex flex={1} minWidth={isFocussed ? '20%' : 0}>
           <Input

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

@@ -1,24 +1,35 @@
 import React from 'react';
-import { Box, FormLabel } from '@chakra-ui/react';
+import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
 
 export interface LabelProps {
   label: string;
+  tooltipText?: string;
   isRequired?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Label` component
  */
-export const Label: React.FC<LabelProps> = ({ isRequired, label }) => {
+export const Label: React.FC<LabelProps> = ({
+  tooltipText,
+  isRequired,
+  label,
+}) => {
   return (
-    <FormLabel>
+    <FormLabel display="flex" alignItems="center">
       {label}
       {isRequired && (
         <Box ml={1} color={colors.label.error}>
           *
         </Box>
       )}
+      {!!tooltipText && (
+        <Tooltip label={tooltipText} placement="top">
+          <QuestionOutlineIcon boxSize="13px" ml="8px" />
+        </Tooltip>
+      )}
     </FormLabel>
   );
 };

package/src/components/input/index.tsx

@@ -40,9 +40,12 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   control: Control<T, any>;
   onChange?: (value?: string) => void;
   disabled?: boolean;
+  tooltipText?: string;
   setValue: UseFormSetValue<T>;
   setError: UseFormSetError<T>;
   clearErrors: UseFormClearErrors<T>;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
 }
 
 /**
@@ -58,6 +61,7 @@ export function Input<T extends FieldValues>({
   name,
   helperText,
   options,
+  tooltipText,
   isInvalid,
   errorText,
   isRequired,
@@ -65,6 +69,8 @@ export function Input<T extends FieldValues>({
   defaultValue,
   control,
   disabled,
+  rightElement,
+  leftElement,
   onChange,
   setValue,
   setError,
@@ -91,6 +97,8 @@ export function Input<T extends FieldValues>({
             onChange={onChange}
             onBlur={onBlur}
             ref={ref}
+            rightElement={rightElement}
+            leftElement={leftElement}
             disabled={disabled}
             value={value}
           />
@@ -136,6 +144,7 @@ export function Input<T extends FieldValues>({
             className={`input-${inputType} ${className ?? ''}`}
             name={name}
             id={name}
+            placeholder={placeholder}
             maxLength={maxLength}
             isInvalid={isInvalid}
             onChange={onChange}
@@ -194,6 +203,7 @@ export function Input<T extends FieldValues>({
             ref={ref}
             disabled={disabled}
             value={value}
+            placeholder={placeholder}
             setValue={setValue as UseFormSetValue<FieldValues>}
             setError={setError as UseFormSetError<FieldValues>}
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
@@ -234,7 +244,13 @@ export function Input<T extends FieldValues>({
           position="relative"
           py={label || helperText || isInvalid ? 6 : 0}
         >
-          {label && <Label label={label} isRequired={isRequired} />}
+          {label && (
+            <Label
+              tooltipText={tooltipText}
+              label={label}
+              isRequired={isRequired}
+            />
+          )}
           {selectedInputField(
             onChange ? onChange : fieldOnChange,
             onBlur,

package/src/theme/customXQChakraTheme.ts

@@ -12,7 +12,6 @@ import FormError from './components/form-error';
 import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
-import Modal from './components/modal';
 import Select from './components/select';
 import Switch from './components/switch';
 import Table from './components/table';
@@ -36,7 +35,6 @@ const customXQChakraTheme = extendTheme({
     FormLabel,
     Input,
     Link,
-    Modal,
     Select,
     Switch,
     Table,

package/dist/theme/components/modal.d.ts

@@ -1,242 +0,0 @@
-declare const _default: {
-    parts: string[];
-    baseStyle: (props: Record<string, any>) => {
-        overlay: {
-            bg: string;
-            zIndex: string;
-        };
-        dialogContainer: {
-            display: string;
-            zIndex: string;
-            justifyContent: string;
-            alignItems: string;
-            overflow: string;
-            WebkitOverflowScrolling: string;
-        };
-        dialog: {
-            borderRadius: string;
-            bg: string;
-            color: string;
-            mt: string | {
-                base: number;
-                md: string;
-            };
-            mb: string | {
-                base: number;
-                md: string;
-            };
-            mx: number;
-            zIndex: string;
-            maxH: string | undefined;
-            boxShadow: string;
-        };
-        header: {
-            px: number;
-            py: number;
-            minHeight: number;
-            fontSize: string;
-            display: string;
-            alignItems: string;
-            fontWeight: string;
-            bg: string;
-            color: string;
-            userSelect: string;
-        };
-        closeButton: {
-            position: string;
-            top: number;
-            right: number;
-        };
-        body: {
-            px: (number | null)[];
-            py: number;
-            flex: number;
-            overflow: string | undefined;
-        };
-        footer: {
-            px: (number | null)[];
-            pt: number;
-            pb: number;
-        };
-    };
-    sizes: {
-        xs: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        sm: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        md: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        lg: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        xl: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        '2xl': {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        '3xl': {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        '4xl': {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        '5xl': {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        '6xl': {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-        full: {
-            content: {
-                maxW: string;
-                h: string;
-            };
-            body?: undefined;
-            footer?: undefined;
-        } | {
-            content: {
-                maxW: string;
-                h?: undefined;
-            };
-            body: any;
-            footer: any;
-        };
-    };
-    variants: {
-        warning: () => {
-            header: {
-                bg: string;
-                color: string;
-            };
-        };
-    };
-    defaultProps: {
-        size: string;
-        isCentered: boolean;
-    };
-};
-export default _default;

package/src/theme/components/modal.ts

@@ -1,216 +0,0 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-const parts = [
-  'overlay',
-  'dialogContainer',
-  'dialog',
-  'header',
-  'closeButton',
-  'body',
-  'footer',
-];
-
-const baseStyleOverlay = {
-  bg: 'blackAlpha.600',
-  zIndex: 'modal',
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-function baseStyleDialogContainer(props: Dict) {
-  const { scrollBehavior } = props;
-
-  return {
-    display: 'flex',
-    zIndex: 'modal',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
-    WebkitOverflowScrolling: 'touch',
-  };
-}
-
-function baseStyleDialog(props: Dict) {
-  const { isCentered, scrollBehavior } = props;
-
-  return {
-    borderRadius: 'lg',
-    bg: mode('white', 'gray.700')(props),
-    color: 'inherit',
-    mt: isCentered ? { base: 8, md: 'auto' } : '3.75rem',
-    mb: isCentered ? { base: 20, md: 'auto' } : '3.75rem',
-    mx: 4,
-    zIndex: 'modal',
-    maxH: scrollBehavior === 'inside' ? 'calc(100vh - 7.5rem)' : undefined,
-    boxShadow: mode('xl', 'dark-lg')(props),
-  };
-}
-
-const baseStyleHeader = {
-  px: 6,
-  py: 4,
-  minHeight: 20,
-  fontSize: 'xl',
-  display: 'flex',
-  alignItems: 'center',
-  fontWeight: 'bold',
-  bg: 'primary.900',
-  color: 'white',
-  userSelect: 'none',
-};
-
-const baseStyleCloseButton = {
-  position: 'absolute',
-  top: 2,
-  right: 3,
-};
-
-function baseStyleBody(props: Dict) {
-  const { scrollBehavior } = props;
-  return {
-    px: [6, null, 20],
-    py: 10,
-    flex: 1,
-    overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
-  };
-}
-
-const baseStyleFooter = {
-  px: [6, null, 20],
-  pt: 5,
-  pb: 16,
-};
-
-const baseStyle = (props: Dict) => ({
-  overlay: baseStyleOverlay,
-  dialogContainer: baseStyleDialogContainer(props),
-  dialog: baseStyleDialog(props),
-  header: baseStyleHeader,
-  closeButton: baseStyleCloseButton,
-  body: baseStyleBody(props),
-  footer: baseStyleFooter,
-});
-
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-function getSize(value: string) {
-  const commonBodyFooterStyles: Dict = {
-    xs: {
-      px: 8,
-      pb: 8,
-    },
-    sm: {
-      px: 8,
-      pb: 8,
-    },
-    md: {
-      px: 8,
-      pb: 8,
-    },
-    lg: {
-      px: 10,
-      pb: 10,
-    },
-    xl: {
-      px: 12,
-      pb: 10,
-    },
-  };
-
-  const bodyStyles: Dict = {
-    xs: {
-      py: 6,
-    },
-    sm: {
-      py: 6,
-    },
-    md: {
-      py: 6,
-    },
-    lg: {
-      py: 8,
-    },
-    xl: {
-      py: 8,
-    },
-  };
-
-  const footerStyles: Dict = {
-    xs: {
-      pb: 8,
-    },
-    sm: {
-      pb: 8,
-    },
-    md: {
-      pb: 8,
-    },
-    lg: {
-      pb: 10,
-    },
-    xl: {
-      pb: 10,
-    },
-  };
-
-  if (value === 'full') {
-    return { content: { maxW: '100vw', h: '100vh' } };
-  }
-
-  return {
-    content: {
-      maxW: value,
-    },
-    body: {
-      ...commonBodyFooterStyles[value],
-      ...bodyStyles[value],
-    },
-    footer: {
-      ...commonBodyFooterStyles[value],
-      ...footerStyles[value],
-    },
-  };
-}
-
-const sizes = {
-  xs: getSize('xs'),
-  sm: getSize('sm'),
-  md: getSize('md'),
-  lg: getSize('lg'),
-  xl: getSize('xl'),
-  '2xl': getSize('2xl'),
-  '3xl': getSize('3xl'),
-  '4xl': getSize('4xl'),
-  '5xl': getSize('5xl'),
-  '6xl': getSize('6xl'),
-  full: getSize('full'),
-};
-
-const warningVariant = () => {
-  return {
-    header: {
-      bg: 'warning.300',
-      color: 'black',
-    },
-  };
-};
-
-const variants = {
-  warning: warningVariant,
-};
-
-const defaultProps = {
-  size: 'lg',
-  isCentered: true,
-};
-
-export default {
-  parts,
-  baseStyle,
-  sizes,
-  variants,
-  defaultProps,
-};