@xqmsg/ui-core 0.18.7 → 0.19.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.7",
+  "version": "0.19.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -99,11 +99,13 @@
     "@emotion/react": "~11.9.0",
     "@emotion/styled": "~11.6.0",
     "@hookform/resolvers": "^2.9.7",
+    "@types/react-router-dom": "^5.3.3",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
     "react-hook-form": "^7.34.0",
     "react-icons": "^4.4.0",
     "react-is": "^18.2.0",
+    "react-router-dom": "^5.3.3",
     "react-select": "^5.4.0",
     "yup": "^0.32.11"
   },

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/navigation/components/items/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Box, Flex, Link } from '@chakra-ui/react';
+import { Link as RouterLink } from 'react-router-dom';
 import colors from '../../../../theme/foundations/colors';
 
 export interface NavigationMenuItemProps {
   leftIcon: JSX.Element;
   label: string;
+  to?: string;
   href?: string;
   isSelected: boolean;
   onClick: () => void;
@@ -19,6 +21,7 @@ export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
   label,
   leftIcon,
   href,
+  to,
   rightIcon,
   isExternal,
   isSelected,
@@ -26,17 +29,28 @@ export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
 }) => {
   let additionalProps = {};
 
+  let reactRouterLinkProps = {};
+
+  if (to) {
+    reactRouterLinkProps = {
+      to,
+      as: RouterLink,
+    };
+  }
+
   if (isExternal) {
     additionalProps = {
       ...additionalProps,
       referrerPolicy: 'no-referrer',
       target: '_blank',
+      href,
+      isExternal: true,
     };
   }
 
   return (
     <Link
-      href={href}
+      {...reactRouterLinkProps}
       {...additionalProps}
       onClick={onClick}
       display="flex"

package/src/components/navigation/index.tsx

@@ -7,6 +7,7 @@ export type GroupMenuItems = {
   leftIcon: JSX.Element;
   label: string;
   href?: string;
+  to?: string;
   rightIcon?: JSX.Element;
   isExternal?: boolean;
 };

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/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';
 
 /**