@xqmsg/ui-core 0.27.0 → 0.29.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.27.0",
+  "version": "0.29.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -37,6 +37,7 @@
     "trailingComma": "es5"
   },
   "name": "@xqmsg/ui-core",
+  "packageManager": "pnpm@11.8.0",
   "author": {
     "name": "XQ",
     "email": "ike@xqmsg.com",
@@ -87,8 +88,7 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
     "typescript": "^4.8.2",
-    "yalc": "^1.0.0-pre.53",
-    "yarn-audit-fix": "^9.3.10"
+    "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.19",
@@ -113,10 +113,5 @@
     "react-router-dom": "^5.3.3",
     "react-select": "^5.7.3",
     "yup": "^0.32.11"
-  },
-  "resolutions": {
-    "framer-motion": "6.4.1",
-    "**/@typescript-eslint/eslint-plugin": "^5.59.5",
-    "**/@typescript-eslint/parser": "^5.59.5"
   }
-}
+}

package/src/components/SimpleTable/SimpleTable.tsx

@@ -60,7 +60,7 @@ export function SimpleTable<T extends ReadonlyTableColumns>({
         >
           {(headers || columnsWidths) && (
             <Thead>
-              <Tr _odd={{ bg: colors.label.primary.dark }}>
+              <Tr _odd={{ bg: colors.surface.canvas }}>
                 {columnsAsConst.map((column, idx) => (
                   <Th key={idx} width={columnsWidths?.[column as T[number]]}>
                     {headers && headers[column as T[number]]}

package/src/components/SimpleTable/TableTypes.ts

@@ -9,7 +9,7 @@ export type TableHeaders<K extends ReadonlyTableColumns> = {
 };
 
 export type TableColumnsWidths<K extends ReadonlyTableColumns> = {
-  [k in K[number]]: string | number;
+  [k in K[number]]?: string | number;
 };
 
 export type TableRow<K extends ReadonlyTableColumns> = {

package/src/components/SimpleTable/components/loading/index.tsx

@@ -26,7 +26,7 @@ export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
       borderTopColor={colors.fill.light.quaternary}
     >
       {isLoading ? (
-        <Spinner size="lg" color={colors.fill.action} />
+        <Spinner size="lg" color={colors.action.solid} />
       ) : (
         <IconButton
           aria-label="Fetch more rows"
@@ -34,7 +34,7 @@ export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
           fontSize={typography.fontSizes['3xl']}
           bg="transparent"
           shadow="none"
-          color={colors.fill.action}
+          color={colors.action.solid}
           type="button"
           variant="outline"
           onClick={onLoadMore}

package/src/components/SimpleTable/components/text/index.tsx

@@ -16,8 +16,8 @@ export const TableText: React.FC<TableTextProps> = ({
 }) => {
   return (
     <Box>
-      <Text color={colors.label.primary.light}>{primaryText}</Text>
-      <Text color={colors.label.secondary.light}>{secondaryText}</Text>
+      <Text color={colors.text.primary}>{primaryText}</Text>
+      <Text color={colors.text.secondary}>{secondaryText}</Text>
     </Box>
   );
 };

package/src/components/banner/index.tsx

@@ -14,6 +14,7 @@ export interface BannerProps {
   buttonText?: string;
   onClick?: () => void;
   type?: 'condensed' | 'expanded';
+  centered?: boolean;
 }
 
 /**
@@ -25,6 +26,7 @@ export const Banner: React.FC<BannerProps> = ({
   buttonText,
   onClick,
   type = 'expanded',
+  centered = false,
 }) => {
   const Icon = useMemo(() => {
     switch (variant) {
@@ -42,15 +44,26 @@ export const Banner: React.FC<BannerProps> = ({
   }, [variant]);
 
   return (
-    <Alert variant={variant} borderRadius="4px">
+    <Alert
+      variant={variant}
+      borderRadius="4px"
+      justifyContent={centered ? 'center' : undefined}
+    >
       <AlertDescription>
         <Flex
-          flexDirection={type === 'condensed' ? 'row' : 'column'}
-          alignItems={type === 'condensed' ? 'center' : ''}
+          flexDirection={centered || type === 'condensed' ? 'row' : 'column'}
+          alignItems={centered || type === 'condensed' ? 'center' : ''}
+          justifyContent={centered ? 'center' : undefined}
           minHeight="26px"
         >
-          <Box pr="8px">{Icon}</Box>
-          <Box flexGrow="1" pt={type === 'condensed' ? 0 : '8px'}>
+          <Box pr="8px" pt={!centered && type !== 'condensed' ? '8px' : 0}>
+            {Icon}
+          </Box>
+          <Box
+            flexGrow={centered ? undefined : '1'}
+            pt={!centered && type !== 'condensed' ? '8px' : 0}
+            textAlign={centered ? 'center' : 'left'}
+          >
             {message}
           </Box>
           {onClick && buttonText && (

package/src/components/breadcrumbs/components/icon/index.tsx

@@ -14,11 +14,11 @@ export const Icon: React.FC<IconProps> = ({ step, status }) => {
   const getColors = useMemo(() => {
     switch (status) {
       case 'active':
-        return { bg: '#0082FF', color: colors.label.primary.dark };
+        return { bg: '#0082FF', color: colors.text.onAccent };
       case 'complete':
-        return { bg: '#7474800D', color: colors.label.primary.light };
+        return { bg: '#7474800D', color: colors.text.primary };
       case 'inactive':
-        return { bg: '#7474800D', color: colors.label.primary.light };
+        return { bg: '#7474800D', color: colors.text.primary };
     }
   }, [status]);
 

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

@@ -12,7 +12,7 @@ export interface LabelProps {
 export const Label: React.FC<LabelProps> = ({ label }) => {
   return (
     <Box pl="8px">
-      <Text color={colors.label.primary.light} fontSize="13px">
+      <Text color={colors.text.primary} fontSize="13px">
         {label}
       </Text>
     </Box>

package/src/components/button/index.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button as ChakraButton } from '@chakra-ui/react';
 import buttonTheme from '../../theme/components/button';
 
 export interface ButtonProps {
-  text: string;
+  children?: ReactNode;
+  /** @deprecated use children */
+  text?: string;
   onClick?: () => void;
   width: 'variable' | 'fixed';
   variant?: keyof typeof buttonTheme.variants;
@@ -16,11 +18,9 @@ export interface ButtonProps {
   color?: string;
 }
 
-/**
- * A functional React component utilized to render the `Button` component
- */
 export const Button: React.FC<ButtonProps> = ({
   onClick,
+  children,
   text,
   type = 'button',
   ariaLabel,
@@ -45,7 +45,7 @@ export const Button: React.FC<ButtonProps> = ({
       leftIcon={leftIcon}
       color={color}
     >
-      {text}
+      {children ?? text}
     </ChakraButton>
   );
 };

package/src/components/card/index.tsx

@@ -9,6 +9,7 @@ export interface CardProps {
   leftIcon?: JSX.Element;
   children: ReactNode | null;
   height?: string | number;
+  width?: string | number;
 }
 
 /**
@@ -19,18 +20,19 @@ export const Card: React.FC<CardProps> = ({
   leftIcon,
   children,
   height = 'auto',
+  width = '206px',
 }) => {
   return (
     <Box
       bg={colors.fill.light.quaternary}
       borderRadius="4px"
       border={`.5px solid ${colors.border.default}`}
-      py="8px"
-      px="8px"
+      py={2}
+      px={2}
       height={height}
       overflowY="auto"
-      width="206px"
-      _notLast={{ marginBottom: '8px' }}
+      width={width}
+      _notLast={{ marginBottom: 2 }}
     >
       {title && (
         <Flex
@@ -39,12 +41,12 @@ export const Card: React.FC<CardProps> = ({
           justifyContent="start"
           textDecoration="none"
           _hover={{ textDecoration: 'none' }}
-          mb="8px"
+          mb={2}
         >
           <Flex alignItems="center">
-            <Box mr="4px">{leftIcon}</Box>
+            <Box mr={1}>{leftIcon}</Box>
             <Text
-              color={colors.label.primary.light}
+              color={colors.text.primary}
               fontSize={typography.fontSizes.sm}
               fontWeight={typography.fontWeights.medium}
             >
@@ -61,8 +63,8 @@ export const Card: React.FC<CardProps> = ({
           return (
             <Text
               as="div"
-              _notLast={{ marginBottom: '8px' }}
-              color={colors.label.primary.light}
+              _notLast={{ marginBottom: 2 }}
+              color={colors.text.primary}
               fontSize={typography.fontSizes.xs}
               fontWeight={typography.fontWeights.normal}
             >
@@ -70,7 +72,7 @@ export const Card: React.FC<CardProps> = ({
             </Text>
           );
         } else {
-          return <Box mt="8px">{child}</Box>;
+          return <Box mt={2}>{child}</Box>;
         }
       })}
     </Box>

package/src/components/icons/chevron/down/index.tsx

@@ -14,7 +14,7 @@ export const ChevronDown: React.FC<ChevronDownProps> = ({ boxSize }) => {
     <ChevronDownIcon
       width={boxSize}
       height={boxSize}
-      fill={colors.fill.action}
+      fill={colors.action.solid}
     />
   );
 };

package/src/components/icons/settings/index.tsx

@@ -11,6 +11,6 @@ export interface SettingsProps {
  */
 export const Settings: React.FC<SettingsProps> = ({ boxSize }) => {
   return (
-    <SettingsIcon width={boxSize} height={boxSize} fill={colors.fill.action} />
+    <SettingsIcon width={boxSize} height={boxSize} fill={colors.action.solid} />
   );
 };

package/src/components/input/InputTypes.ts

@@ -22,9 +22,12 @@ export type InputType =
 export type FieldOption = {
   label: string;
   value: string | 'section_header';
-  sortValue: number;
+  sortValue?: number;
 };
 
+/** @deprecated use FieldOption[] directly */
+export type FieldOptions = FieldOption[];
+
 export interface ValidationProps {
   isRequired: boolean;
   isInvalid?: boolean;

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

@@ -45,6 +45,7 @@ const StackedMultiSelect = React.forwardRef<
     const dropdownMenuRef = useRef<HTMLDivElement>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
+    const searchRef = useRef<HTMLInputElement>(null);
 
     const [isInit, setIsInit] = useState(false);
     const [localValues, setLocalValues] = useState<FieldOption[]>([]);
@@ -159,7 +160,9 @@ const StackedMultiSelect = React.forwardRef<
       });
 
       setLocalOptions(prevLocalOptions =>
-        [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+        [...prevLocalOptions, option].sort(
+          (a, b) => (a.sortValue ?? 0) - (b.sortValue ?? 0)
+        )
       );
 
       setLocalValues(prevLocalValues =>
@@ -258,6 +261,10 @@ const StackedMultiSelect = React.forwardRef<
       );
     }, [localOptions, searchValue]);
 
+    useEffect(() => {
+      if (isFocussed) searchRef.current?.focus();
+    }, [isFocussed]);
+
     const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
       const initialOptionIndex =
         filteredOptions[0]?.value === 'section_header' ? 1 : 0;
@@ -323,7 +330,7 @@ const StackedMultiSelect = React.forwardRef<
                 </Box>
               ))
             ) : (
-              <Text color={colors.label.secondary.light} fontSize="13px">
+              <Text color={colors.text.secondary} fontSize="13px">
                 {placeholder}
               </Text>
             )}
@@ -353,7 +360,7 @@ const StackedMultiSelect = React.forwardRef<
             loading={loadingOptions}
           >
             <Input
-              autoFocus
+              ref={searchRef}
               value={searchValue}
               onChange={handleInput}
               disabled={loadingOptions}

package/src/components/input/StackedNumberInput/StackedNumberInput.tsx

@@ -82,7 +82,7 @@ const StackedNumberInput = React.forwardRef<
           max={max}
           step={step}
           precision={precision}
-          onChange={(_: string, valueAsNumber: number) =>
+          onChange={(valueAsString: string, valueAsNumber: number) =>
             onChange?.({
               target: {
                 name,
@@ -90,7 +90,7 @@ const StackedNumberInput = React.forwardRef<
                   ? ''
                   : precision === 0
                     ? String(Math.round(valueAsNumber))
-                    : String(valueAsNumber),
+                    : valueAsString,
               },
             } as React.ChangeEvent<HTMLInputElement>)
           }

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

@@ -402,7 +402,7 @@ const StackedPilledInput = React.forwardRef<
               : null}
             {!lastestFormValueToArray.length && !isFocussed ? (
               <Text
-                color={colors.label.secondary.light}
+                color={colors.text.secondary}
                 fontSize={isMobile ? '17px' : '13px'}
                 pointerEvents="none"
               >
@@ -423,13 +423,17 @@ const StackedPilledInput = React.forwardRef<
                   border="none"
                   height="auto"
                   color={
-                    tokenIndex !== null ? 'transparent' : colors.label.primary
+                    tokenIndex !== null ? 'transparent' : colors.text.primary
                   }
                   _focus={{ boxShadow: 'none !important' }}
                   value={localValue}
                   onChange={handleOnChange}
                   ref={inputRef}
                   onFocus={() => setIsFocussed(true)}
+                  onBlur={() => {
+                    setIsFocussed(false);
+                    setTokenIndex(null);
+                  }}
                   fontSize={isMobile ? '17px' : '13px'}
                   lineHeight={1.5}
                   placeholder={
@@ -454,13 +458,17 @@ const StackedPilledInput = React.forwardRef<
                 border="none"
                 height="auto"
                 color={
-                  tokenIndex !== null ? 'transparent' : colors.label.primary
+                  tokenIndex !== null ? 'transparent' : colors.text.primary
                 }
                 _focus={{ boxShadow: 'none !important' }}
                 value={localValue}
                 onChange={handleOnChange}
                 ref={inputRef}
                 onFocus={() => setIsFocussed(true)}
+                onBlur={() => {
+                  setIsFocussed(false);
+                  setTokenIndex(null);
+                }}
                 placeholder={
                   isMobile && label && lastestFormValueToArray.length === 0
                     ? (label as string)

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

@@ -80,11 +80,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setSearchValue('');
     });
 
-    const handleOnSelectItem = (option: {
-      label: string;
-      value: string;
-      sortValue: number;
-    }) => {
+    const handleOnSelectItem = (option: FieldOption) => {
       if (handleOnChange) {
         handleOnChange(option.value);
       }

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

@@ -34,7 +34,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
           px="8px"
           py="4px"
           width="100%"
-          color={colors.label.primary.light}
+          color={colors.text.primary}
           bg="inherit"
           whiteSpace="nowrap"
         >
@@ -53,7 +53,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
           px="8px"
           py="4px"
           width="100%"
-          color={colors.label.primary.light}
+          color={colors.text.primary}
           bg="inherit"
           whiteSpace="nowrap"
         >
@@ -67,7 +67,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
             <Box
-              color={colors.label.secondary.light}
+              color={colors.text.secondary}
               fontSize="13px"
               width="100%"
               fontWeight="bold"
@@ -98,16 +98,16 @@ export const Dropdown: React.FC<DropdownProps> = ({
             width="100%"
             color={
               optionIndex === idx
-                ? colors.label.primary.dark
-                : colors.label.primary.light
+                ? colors.text.onAccent
+                : colors.text.primary
             }
             _hover={{
-              color: colors.label.primary.dark,
-              bg: colors.fill.action,
+              color: colors.text.onAccent,
+              bg: colors.action.solid,
               borderRadius: '4px',
               width: '100%',
             }}
-            bg={optionIndex === idx ? colors.fill.action : 'inherit'}
+            bg={optionIndex === idx ? colors.action.solid : 'inherit'}
             whiteSpace="nowrap"
             id={option.value}
           >

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

@@ -29,7 +29,7 @@ export const Label: React.FC<LabelProps> = ({
     <FormLabel display="flex" ml="0">
       {label}
       {isRequired && (
-        <Box ml={1} color={colors.label.error}>
+        <Box ml={1} color={colors.text.danger}>
           *
         </Box>
       )}
@@ -37,7 +37,7 @@ export const Label: React.FC<LabelProps> = ({
         <Popover trigger="hover" placement="top">
           <PopoverTrigger>
             <Box as="span">
-              <QuestionIcon boxSize="13px" ml={1} color={colors.fill.action} />
+              <QuestionIcon boxSize="13px" ml={1} color={colors.action.solid} />
             </Box>
           </PopoverTrigger>
           <PopoverContent>

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

@@ -47,7 +47,7 @@ const Token: React.FC<TokenProps> = ({
       <Text
         whiteSpace="nowrap"
         wordBreak="break-word"
-        color={colors.label.primary.light}
+        color={colors.text.primary}
         fontSize={isMobile ? '17px' : '13px'}
         lineHeight="1.5"
         pr="2px"

package/src/components/input/index.tsx

@@ -319,8 +319,7 @@ export function Input<T extends FieldValues>({
             (!nonLabeledInputs.includes(inputType) &&
               variant !== 'mobile' &&
               label) ||
-            helperText ||
-            isInvalid
+            helperText
               ? 5
               : 0
           }

package/src/components/link/index.tsx

@@ -26,7 +26,7 @@ export const Link: React.FC<LinkProps> = ({ variant, text, onClick }) => {
   return (
     <Flex alignItems="flex-start" cursor="pointer" onClick={onClick}>
       {getIcon}
-      <Text variant="description-large" pl="2px" color={colors.fill.action}>
+      <Text variant="description-large" pl="2px" color={colors.action.solid}>
         {text}
       </Text>
     </Flex>

package/src/components/loading/index.tsx

@@ -29,7 +29,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     >
       <Spinner
         size={size}
-        color={colors.fill.action}
+        color={colors.action.solid}
         flex="none"
         thickness={thickness}
         speed={speed}

package/src/components/navigation/components/header/index.tsx

@@ -19,7 +19,7 @@ export const NavigationMenuHeader: React.FC<NavigationMenuHeaderProps> = ({
       height="26px"
       width="204px"
       fontSize="12px"
-      color={colors.label.secondary.light}
+      color={colors.text.secondary}
     >
       {label}
     </Flex>

package/src/components/navigation/components/items/index.tsx

@@ -60,7 +60,7 @@ export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
       px="4px"
       height="26px"
       width="204px"
-      color={colors.label.primary}
+      color={colors.text.primary}
       bg={isSelected ? colors.fill.light.quaternary : 'transparent'}
       borderRadius="4px"
       fontSize="13px"

package/src/components/select/index.tsx

@@ -65,24 +65,6 @@ export function SelectNative<T extends FieldValues = FieldValues>({
   clearErrors,
   ...props
 }: SelectNativeProps<T>): React.ReactElement {
-  // const [selectedOption, setSelectedOption] = useState(
-  //   options ? options[0] ?? '' : ''
-  // );
-
-  const style = {
-    cursor: 'pointer',
-    color: 'var(--chakra-colors-blue-500)',
-    height: '48px',
-    fontSize: '17px',
-    lineHeight: '20px',
-    fontWeight: 400,
-    padding: '12px 16px 12px 0px',
-    borderRadius: 0,
-    border: '0.5px solid rgba(153, 153, 153, 0.1)',
-    borderLeft: 'none',
-    borderRight: 'none',
-  };
-
   const handleOnSelectItem = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedValue = e.target.value;
     const selectedOption = options?.find(
@@ -115,7 +97,6 @@ export function SelectNative<T extends FieldValues = FieldValues>({
             disabled={disabled ?? false}
             onChange={handleOnSelectItem}
             defaultValue={defaultValue}
-            style={style}
           >
             {options &&
               options.map(i => {

package/src/components/toast/index.tsx

@@ -50,13 +50,13 @@ export const Toast: React.FC<ToastProps> = ({
       borderRadius="8px"
     >
       <Box pr="8px">{Icon}</Box>
-      <Text pr="16px" fontSize="13px" color={colors.label.primary.dark}>
+      <Text pr="16px" fontSize="13px" color={colors.text.onAccent}>
         {message}
       </Text>
       {onClick && buttonText && (
         <Flex ml="auto" justifyContent="flex-end">
           <Button
-            color={colors.fill.action}
+            color={colors.action.solid}
             style={{
               background: 'transparent',
               border: 'transparent',

package/src/components/toolbar/components/breadcrumbs/item/index.tsx

@@ -58,8 +58,8 @@ export const ToolbarBreadcrumbItem: React.FC<ToolbarBreadcrumbItemProps> = ({
     <Box
       color={
         page === 'current'
-          ? colors.label.primary.light
-          : colors.label.secondary.light
+          ? colors.text.primary
+          : colors.text.secondary
       }
       fontSize="13px"
       letterSpacing="0.02em"

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

@@ -31,7 +31,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
             <Box
-              color={colors.label.secondary.light}
+              color={colors.text.secondary}
               fontSize="13px"
               width="fit-content"
               fontWeight="bold"
@@ -63,7 +63,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             px="8px"
             py="4px"
             width="100%"
-            color={colors.label.primary.light}
+            color={colors.text.primary}
             whiteSpace="nowrap"
             id={option.value}
           >