@xqmsg/ui-core 0.16.8 → 0.17.0

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