@xqmsg/ui-core 0.18.8 → 0.19.1

package/package.json

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

package/src/components/breadcrumbs/index.tsx

@@ -34,6 +34,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
     <Flex flexDir={orientation === 'horizontal' ? 'row' : 'column'}>
       {steps.map((step, idx) => (
         <Flex
+          key={idx}
           alignItems="center"
           pr={orientation === 'horizontal' ? '16px' : 0}
           py="4px"

package/src/components/form/section/index.tsx

@@ -62,6 +62,7 @@ export function FormSection<
           defaultValue,
         }: FormInput) => (
           <Input<U>
+            key={name}
             control={form.control}
             label={label}
             inputType={inputType}

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

@@ -3,11 +3,12 @@ import { ReactComponent as NeutralIcon } from './neutral.svg';
 
 export interface NeutralProps {
   boxSize: number | string;
+  color?: string;
 }
 
 /**
  * A functional React component utilized to render the `Neutral` icon component
  */
-export const Neutral: React.FC<NeutralProps> = ({ boxSize }) => {
-  return <NeutralIcon boxSize={boxSize} />;
+export const Neutral: React.FC<NeutralProps> = ({ color, boxSize }) => {
+  return <NeutralIcon boxSize={boxSize} fill={color || '#3C3C43'} />;
 };

package/src/components/icons/neutral/neutral.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 4.5V4C6.72386 4 6.5 4.22386 6.5 4.5H7ZM7.005 4.5H7.505C7.505 4.22386 7.28114 4 7.005 4V4.5ZM7.005 4.505V5.005C7.28114 5.005 7.505 4.78114 7.505 4.505H7.005ZM7 4.505H6.5C6.5 4.78114 6.72386 5.005 7 5.005V4.505ZM6.27639 6.05279C6.0294 6.17628 5.92929 6.47662 6.05279 6.72361C6.17628 6.9706 6.47662 7.07071 6.72361 6.94721L6.27639 6.05279ZM6.52766 6.48617L6.30405 6.03896L6.52766 6.48617ZM7.23634 7.05465L7.72141 7.17592L7.23634 7.05465ZM6.76366 8.94535L6.27859 8.82408L6.76366 8.94535ZM7.47234 9.51383L7.69595 9.96104L7.69595 9.96104L7.47234 9.51383ZM7.72361 9.94721C7.9706 9.82371 8.07071 9.52337 7.94721 9.27639C7.82371 9.0294 7.52337 8.92929 7.27639 9.05279L7.72361 9.94721ZM12.5 7C12.5 10.0376 10.0376 12.5 7 12.5V13.5C10.5899 13.5 13.5 10.5899 13.5 7H12.5ZM7 12.5C3.96243 12.5 1.5 10.0376 1.5 7H0.5C0.5 10.5899 3.41015 13.5 7 13.5V12.5ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5V0.5C3.41015 0.5 0.5 3.41015 0.5 7H1.5ZM7 1.5C10.0376 1.5 12.5 3.96243 12.5 7H13.5C13.5 3.41015 10.5899 0.5 7 0.5V1.5ZM7 5H7.005V4H7V5ZM6.505 4.5V4.505H7.505V4.5H6.505ZM7.005 4.005H7V5.005H7.005V4.005ZM7.5 4.505V4.5H6.5V4.505H7.5ZM6.72361 6.94721L6.75127 6.93338L6.30405 6.03896L6.27639 6.05279L6.72361 6.94721ZM6.75127 6.93338L6.27859 8.82408L7.24873 9.06662L7.72141 7.17592L6.75127 6.93338ZM7.69595 9.96104L7.72361 9.94721L7.27639 9.05279L7.24873 9.06662L7.69595 9.96104ZM6.27859 8.82408C6.07138 9.65293 6.93179 10.3431 7.69595 9.96104L7.24873 9.06662L6.27859 8.82408ZM6.75127 6.93338L7.72141 7.17592C7.92862 6.34708 7.06821 5.65688 6.30405 6.03896L6.75127 6.93338Z" fill="#3C3C43" fill-opacity="0.6"/>
+<path d="M7 4.5V4C6.72386 4 6.5 4.22386 6.5 4.5H7ZM7.005 4.5H7.505C7.505 4.22386 7.28114 4 7.005 4V4.5ZM7.005 4.505V5.005C7.28114 5.005 7.505 4.78114 7.505 4.505H7.005ZM7 4.505H6.5C6.5 4.78114 6.72386 5.005 7 5.005V4.505ZM6.27639 6.05279C6.0294 6.17628 5.92929 6.47662 6.05279 6.72361C6.17628 6.9706 6.47662 7.07071 6.72361 6.94721L6.27639 6.05279ZM6.52766 6.48617L6.30405 6.03896L6.52766 6.48617ZM7.23634 7.05465L7.72141 7.17592L7.23634 7.05465ZM6.76366 8.94535L6.27859 8.82408L6.76366 8.94535ZM7.47234 9.51383L7.69595 9.96104L7.69595 9.96104L7.47234 9.51383ZM7.72361 9.94721C7.9706 9.82371 8.07071 9.52337 7.94721 9.27639C7.82371 9.0294 7.52337 8.92929 7.27639 9.05279L7.72361 9.94721ZM12.5 7C12.5 10.0376 10.0376 12.5 7 12.5V13.5C10.5899 13.5 13.5 10.5899 13.5 7H12.5ZM7 12.5C3.96243 12.5 1.5 10.0376 1.5 7H0.5C0.5 10.5899 3.41015 13.5 7 13.5V12.5ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5V0.5C3.41015 0.5 0.5 3.41015 0.5 7H1.5ZM7 1.5C10.0376 1.5 12.5 3.96243 12.5 7H13.5C13.5 3.41015 10.5899 0.5 7 0.5V1.5ZM7 5H7.005V4H7V5ZM6.505 4.5V4.505H7.505V4.5H6.505ZM7.005 4.005H7V5.005H7.005V4.005ZM7.5 4.505V4.5H6.5V4.505H7.5ZM6.72361 6.94721L6.75127 6.93338L6.30405 6.03896L6.27639 6.05279L6.72361 6.94721ZM6.75127 6.93338L6.27859 8.82408L7.24873 9.06662L7.72141 7.17592L6.75127 6.93338ZM7.69595 9.96104L7.72361 9.94721L7.27639 9.05279L7.24873 9.06662L7.69595 9.96104ZM6.27859 8.82408C6.07138 9.65293 6.93179 10.3431 7.69595 9.96104L7.24873 9.06662L6.27859 8.82408ZM6.75127 6.93338L7.72141 7.17592C7.92862 6.34708 7.06821 5.65688 6.30405 6.03896L6.75127 6.93338Z" fill="current" fill-opacity="0.6"/>
 </svg>

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

@@ -298,8 +298,14 @@ const StackedMultiSelect = React.forwardRef<
           ref={scrollRef}
         >
           {localValues.length ? (
-            localValues.map(option => (
-              <Box mr="4px" width="fit-content" h="16px" borderRadius="full">
+            localValues.map((option, idx) => (
+              <Box
+                key={idx}
+                mr="4px"
+                width="fit-content"
+                h="16px"
+                borderRadius="full"
+              >
                 <Token
                   label={option.label}
                   onDelete={() => handleDelete(option)}

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

@@ -278,6 +278,7 @@ const StackedPilledInput = React.forwardRef<
           {lastestFormValueToArray.length
             ? lastestFormValueToArray.map((label, index) => (
                 <Box
+                  key={index}
                   mr="4px"
                   border={
                     tokenIndex === index

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

@@ -23,14 +23,14 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
-      <>
+      <Box key={idx} width="100%">
         {option.value === 'section_header' &&
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
             <Box
               color={colors.label.secondary.light}
               fontSize="13px"
-              width="fit-content"
+              width="100%"
               fontWeight="bold"
               px="8px"
               bg="inherit"
@@ -75,7 +75,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             {option.label}
           </Box>
         )}
-      </>
+      </Box>
     ));
   }, [onSelectItem, optionIndex, options]);
 

package/src/components/navigation/index.tsx

@@ -48,14 +48,15 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
       overflowY="auto"
       width="220px"
     >
-      {sortedGroupedMenuItems?.map(menuItemGroup => (
-        <Box _notLast={{ paddingBottom: '8px' }}>
+      {sortedGroupedMenuItems?.map((menuItemGroup, idx) => (
+        <Box key={idx} _notLast={{ paddingBottom: '8px' }}>
           {menuItemGroup.groupHeader && (
             <NavigationMenuHeader label={menuItemGroup.groupHeader} />
           )}
-          {menuItemGroup.groupMenuItems.map(item => (
+          {menuItemGroup.groupMenuItems.map((item, idx) => (
             <NavigationMenuItem
               {...item}
+              key={idx}
               isSelected={selectedMenuItem === item.label}
               onClick={() => setSelectedMenuItem(item.label)}
             />

package/src/components/table/empty/index.tsx

@@ -37,7 +37,7 @@ export const EmptyTable: React.FC = () => {
     >
       <Tbody>
         {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
-          <Tr>
+          <Tr key={i}>
             <Td height="26px" opacity={getOpacity(i)}></Td>
           </Tr>
         ))}

package/src/components/table/index.tsx

@@ -55,19 +55,19 @@ export function Table<T extends ReadonlyTableColumns>({
           {headers && (
             <Thead>
               <Tr _odd={{ bg: colors.label.primary.dark }}>
-                {columnsAsConst.map(column => (
+                {columnsAsConst.map((column, idx) => (
                   // @ts-ignore
-                  <Th>{headers[column]}</Th>
+                  <Th key={idx}>{headers[column]}</Th>
                 ))}
               </Tr>
             </Thead>
           )}
           <Tbody>
-            {body.map(row => (
-              <Tr>
-                {columnsAsConst.map(column => (
+            {body.map((row, idx) => (
+              <Tr key={idx}>
+                {columnsAsConst.map((column, idx) => (
                   // @ts-ignore
-                  <Td>{row[column]}</Td>
+                  <Td key={idx}>{row[column]}</Td>
                 ))}
               </Tr>
             ))}

package/src/components/tabs/index.tsx

@@ -29,8 +29,8 @@ export const TabsWrapper: React.FC<TabsWrapperProps> = ({
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
       >
-        {navItems.map(navItem => (
-          <Tab>{navItem}</Tab>
+        {navItems.map((navItem, idx) => (
+          <Tab key={idx}>{navItem}</Tab>
         ))}
       </TabList>
       {children}

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Toast, ToastProps } from '.';
+import alertTheme from '../../theme/components/alert';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<ToastProps> = {
+  title: 'Toast example',
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(alertTheme.variants),
+      description: 'The `variant` of the `Toast` component',
+    },
+    message: {
+      description: 'The `message` of the `Toast` component',
+    },
+    buttonText: {
+      description: "The `buttonText` of the `Toast` component's action button",
+    },
+    onClick: {
+      description:
+        "The `onClick` handler of the `Toast` component's action button",
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ToastProps> = args => (
+  <>
+    <Box mb="20px">
+      <Toast {...args} variant="positive" message="Positive message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="warning" message="Warning message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="error" message="Error message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="neutral" message="Neutral message." />
+    </Box>
+  </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  buttonText: 'Action',
+};

package/src/components/toast/index.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, useMemo } from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { Error } from '../icons/error';
+import { Neutral } from '../icons/neutral';
+import { Positive } from '../icons/positive';
+import { Warning } from '../icons/warning';
+import colors from '../../theme/foundations/colors';
+
+export type ToastVariant = 'positive' | 'warning' | 'error' | 'neutral';
+
+export interface ToastProps {
+  variant: ToastVariant;
+  message: ReactNode;
+  buttonText?: string;
+  onClick?: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+export const Toast: React.FC<ToastProps> = ({
+  variant,
+  message,
+  buttonText,
+  onClick,
+}) => {
+  const Icon = useMemo(() => {
+    switch (variant) {
+      case 'error':
+        return <Error boxSize="16px" />;
+      case 'neutral':
+        return <Neutral boxSize="16px" color="white" />;
+      case 'positive':
+        return <Positive boxSize="16px" />;
+      case 'warning':
+        return <Warning boxSize="16px" />;
+      default:
+        return null;
+    }
+  }, [variant]);
+
+  return (
+    <Flex
+      alignItems="center"
+      width="fit-content"
+      height="32px"
+      p="8px"
+      bg="#151515D9"
+      borderColor="#9999991A"
+      borderRadius="8px"
+    >
+      <Box pr="8px">{Icon}</Box>
+      <Text pr="16px" fontSize="13px" color={colors.label.primary.dark}>
+        {message}
+      </Text>
+      {onClick && buttonText && (
+        <Flex ml="auto" justifyContent="flex-end">
+          <Button
+            color={colors.fill.action}
+            style={{
+              background: 'transparent',
+              border: 'transparent',
+              boxShadow: 'none',
+            }}
+            _hover={{
+              bg: 'transparent',
+              border: 'transparent',
+              boxShadow: 'none',
+            }}
+            onClick={onClick}
+          >
+            {buttonText}
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  );
+};

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

@@ -45,7 +45,7 @@ export const ToolbarBreadcrumbs: React.FC<ToolbarBreadcrumbsProps> = ({
   return (
     <Flex height="26px">
       {filteredPageList.map((page, i) => (
-        <Flex alignItems="center">
+        <Flex alignItems="center" key={i}>
           <ToolbarBreadcrumbItem
             page={getPageType(i)}
             pageLabel={page.label}

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

@@ -26,7 +26,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
-      <>
+      <Box key={idx}>
         {option.value === 'section_header' &&
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
@@ -74,7 +74,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             {option.label}
           </Flex>
         )}
-      </>
+      </Box>
     ));
   }, [onSelectItem, optionIndex, options, setOptionIndex]);
 

package/src/hooks/useToast.tsx

@@ -0,0 +1,13 @@
+import { ToastPosition, useToast as useChakraToast } from '@chakra-ui/react';
+import React from 'react';
+import { Toast, ToastProps } from '../components/toast';
+
+export const useToast = (props: ToastProps & { position: ToastPosition }) => {
+  const toast = useChakraToast();
+
+  return () =>
+    toast({
+      position: props.position,
+      render: () => <Toast {...props} />,
+    });
+};

package/src/index.tsx

@@ -55,6 +55,7 @@ export * from './theme/provider';
 export * from './components/toolbar';
 
 // Hooks
+export * from './hooks/useToast';
 
 //Utils
 export * from './components/form/utils/formErrors';

package/src/theme/provider/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/provider';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
 import customXQChakraTheme from '../customXQChakraTheme';
 
 /**