@xqmsg/ui-core 0.16.7 → 0.17.0

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

@@ -64,11 +64,10 @@ const StackedPilledInput = React.forwardRef<
 
   const onHandleKeyDown = (e: React.KeyboardEvent) => {
     if (
-      (e.key === ' ' ||
-        e.key === 'Enter' ||
-        e.key === ',' ||
-        e.key === 'Tab') &&
-      localValue.length
+      e.key === ' ' ||
+      e.key === 'Enter' ||
+      e.key === ',' ||
+      e.key === 'Tab'
     ) {
       if (
         e.key === 'Enter' &&
@@ -221,7 +220,13 @@ const StackedPilledInput = React.forwardRef<
     setIsFocussed(false);
   };
 
-  useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+  useOutsideClick({
+    ref: inputWrapperRef,
+    handler: () => {
+      onBlur();
+      console.log('hi');
+    },
+  });
 
   return (
     <Box position="relative">
@@ -234,6 +239,10 @@ const StackedPilledInput = React.forwardRef<
         alignItems="center"
         justifyContent="space-between"
         onClick={() => {
+          if (isFocussed && tokenIndex !== null) {
+            setTokenIndex(null);
+          }
+
           if (!disabled) {
             inputRef.current?.focus();
           }
@@ -270,7 +279,7 @@ const StackedPilledInput = React.forwardRef<
                       : 'none'
                   }
                   borderRadius="full"
-                  onClick={() => isFocussed && setTokenIndex(index)}
+                  onClick={() => setTokenIndex(index)}
                   width="100%"
                   id={`${name}_token_${index}`}
                 >
@@ -313,7 +322,10 @@ const StackedPilledInput = React.forwardRef<
             }
             ref={inputRef}
             onFocus={() => setIsFocussed(true)}
-            onBlur={() => setIsFocussed(false)}
+            onBlur={() => {
+              setIsFocussed(false);
+              return setTokenIndex(null);
+            }}
           />
         </Flex>
       </Flex>

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

@@ -5,21 +5,15 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import {
-  Box,
-  Image,
-  Input,
-  InputGroup,
-  InputRightElement,
-} from '@chakra-ui/react';
+import { Box, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
 import colors from '../../../theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
-import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import useDidMountEffect from '../../../hooks/useDidMountEffect';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
+import { Dropdown as DropdownIcon } from '../../icons/dropdown';
 import { debounce } from 'lodash';
 
 export interface StackedSelectProps extends StackedInputProps {
@@ -216,7 +210,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             cursor={disabled ? 'not-allowed' : 'pointer'}
             onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
-            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+            <DropdownIcon boxSize="16px" />
           </InputRightElement>
         </InputGroup>
         {isFocussed && (

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

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { truncate } from 'lodash';
 import React from 'react';
+import { Close } from 'src/components/icons/close';
 import colors from '../../../../../src/theme/foundations/colors';
-import { ReactComponent as CloseIcon } from './assets/svg/close.svg';
 
 export interface TokenProps {
   label: any;
@@ -36,12 +36,7 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
           omission: '...',
         })}
       </Text>
-      <CloseIcon
-        width="11px"
-        height="11px"
-        onClick={onDelete}
-        cursor="pointer"
-      />
+      <Close boxSize="11px" onClick={onDelete} />
     </Flex>
   );
 };

package/src/components/navigation/NavigationMenu.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { NavigationMenu, NavigationMenuProps } from '.';
+import {
+  Clock,
+  GoogleDrive,
+  Group,
+  Home,
+  Link,
+  MicrosoftOneDrive,
+  Settings,
+  Trash,
+} from '../icons';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<NavigationMenuProps> = {
+  title: 'Navigation Menu example',
+  component: NavigationMenu,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<NavigationMenuProps> = args => (
+  <Box bg="white" height="100%">
+    <NavigationMenu {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultSelectedMenuItem: 'Settings',
+  groupedMenuItems: [
+    {
+      sortValue: 0,
+      groupMenuItems: [
+        {
+          leftIcon: <Settings boxSize="18px" />,
+          label: 'Settings',
+        },
+        {
+          leftIcon: <Settings boxSize="18px" />,
+          label: 'Services',
+          rightIcon: <Link boxSize="18px" />,
+        },
+      ],
+    },
+    {
+      sortValue: 1,
+      groupHeader: 'Files',
+      groupMenuItems: [
+        {
+          leftIcon: <Home boxSize="18px" />,
+          label: 'All Files',
+        },
+        {
+          leftIcon: <Clock boxSize="18px" />,
+          label: 'Recent',
+        },
+        {
+          leftIcon: <Group boxSize="18px" />,
+          label: 'Shared With Me',
+        },
+        {
+          leftIcon: <Trash boxSize="18px" />,
+          label: 'Deleted',
+        },
+      ],
+    },
+    {
+      sortValue: 2,
+      groupMenuItems: [
+        {
+          leftIcon: <MicrosoftOneDrive boxSize="18px" />,
+          label: 'Microsoft One Drive',
+        },
+        {
+          leftIcon: <GoogleDrive boxSize="18px" />,
+          label: 'Google Drive',
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+
+export interface NavigationMenuHeaderProps {
+  label: string;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenuHeader` component
+ */
+export const NavigationMenuHeader: React.FC<NavigationMenuHeaderProps> = ({
+  label,
+}) => {
+  return (
+    <Flex
+      alignItems="center"
+      height="26px"
+      width="204px"
+      fontSize="12px"
+      color={colors.label.secondary.light}
+    >
+      {label}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Flex, Link } from '@chakra-ui/react';
+import colors from 'src/theme/foundations/colors';
+
+export interface NavigationMenuItemProps {
+  leftIcon: JSX.Element;
+  label: string;
+  href?: string;
+  isSelected: boolean;
+  onClick: () => void;
+  rightIcon?: JSX.Element;
+  isExternal?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenuItem` component
+ */
+export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
+  label,
+  leftIcon,
+  href,
+  rightIcon,
+  isExternal,
+  isSelected,
+  onClick,
+}) => {
+  let additionalProps = {};
+
+  if (isExternal) {
+    additionalProps = {
+      ...additionalProps,
+      referrerPolicy: 'no-referrer',
+      target: '_blank',
+    };
+  }
+
+  return (
+    <Link
+      href={href}
+      {...additionalProps}
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      py="5px"
+      px="4px"
+      height="26px"
+      width="204px"
+      color={colors.label.primary}
+      bg={isSelected ? colors.fill.light.tertiary : 'transparent'}
+      borderRadius="4px"
+      fontSize="13px"
+      textDecoration="none"
+      _hover={{ textDecoration: 'none' }}
+    >
+      <Flex alignItems="center">
+        <Box mr="4px">{leftIcon}</Box> {label}
+      </Flex>
+      {rightIcon}
+    </Link>
+  );
+};

package/src/components/navigation/index.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo, useState } from 'react';
+import { Box } from '@chakra-ui/react';
+import { NavigationMenuHeader } from './components/header';
+import {
+  NavigationMenuItem,
+  NavigationMenuItemProps,
+} from './components/items';
+
+export interface NavigationMenuProps {
+  groupedMenuItems: {
+    groupSortValue: number;
+    groupHeader?: string;
+    groupMenuItems: NavigationMenuItemProps[];
+  }[];
+  defaultSelectedMenuItem?: string;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenu` component
+ */
+export const NavigationMenu: React.FC<NavigationMenuProps> = ({
+  groupedMenuItems,
+  defaultSelectedMenuItem = '',
+}) => {
+  const sortedGroupedMenuItems = useMemo(
+    () => groupedMenuItems?.sort((a, b) => a.groupSortValue - b.groupSortValue),
+    [groupedMenuItems]
+  );
+
+  const [selectedMenuItem, setSelectedMenuItem] = useState<string>(
+    defaultSelectedMenuItem
+  );
+
+  return (
+    <Box
+      bg="#7474800D"
+      py="32px"
+      px="8px"
+      height="100%"
+      overflowY="auto"
+      width="220px"
+    >
+      {sortedGroupedMenuItems?.map(menuItemGroup => (
+        <Box>
+          {menuItemGroup.groupHeader && (
+            <NavigationMenuHeader label={menuItemGroup.groupHeader} />
+          )}
+          {menuItemGroup.groupMenuItems.map(item => (
+            <NavigationMenuItem
+              {...item}
+              isSelected={selectedMenuItem === item.label}
+              onClick={() => setSelectedMenuItem(item.label)}
+            />
+          ))}
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/index.tsx

@@ -24,6 +24,9 @@ export * from './components/form';
 // Form Section
 export * from './components/form/section';
 
+// Icons
+export * from './components/icons';
+
 // Input
 export * from './components/input';
 
@@ -33,6 +36,9 @@ export * from './components/layout';
 // Loading
 export * from './components/loading';
 
+// Navigation Menu
+export * from './components/navigation';
+
 // Table
 export * from './components/table';