feat(web): context and list menu progress bars (#166)

* Initial Commit

Adds support for progress bars to items in both context and and list menus.

* Default Color Scheme & Description Weight

Added default color scheming, and made the description for context menues a lighter font weight for separating the title vs description better.

* iconColor to Menu & Small Syntax Changes

* Update Item.tsx

* fix(web/context): syntax error

also reformat with prettier

* chore(web/menu): reformat with prettier

Co-authored-by: Luke <sabolukas03@gmail.com>

web/src/features/dev/debug/context.ts

@@ -17,6 +17,21 @@ export const debugContext = () => {
             metadata: [{ label: 'Value 1', value: 300 }],
             disabled: true,
           },
+          {
+            title: 'Oil Level',
+            description: 'Vehicle oil level',
+            progress: 30,
+            icon: 'oil-can',
+            metadata: [{ label: 'Remaining Oil', value: '30%' }],
+            arrow: true,
+          },
+          {
+            title: 'Durability',
+            progress: 80,
+            icon: 'car-side',
+            metadata: [{ label: 'Durability', value: '80%' }],
+            colorScheme: 'blue'
+          },
           {
             title: 'Menu button',
             icon: 'bars',

web/src/features/dev/debug/menu.ts

@@ -22,6 +22,20 @@ export const debugMenu = () => {
             icon: 'tag',
             description: 'Side scroll general description',
           },
+          {
+            label: 'Oil Level',
+            progress: 30,
+            icon: 'oil-can',
+            description: 'Remaining Oil: 30%',
+          },
+          {
+            label: 'Durability',
+            progress: 80,
+            icon: 'car-side',
+            description: 'Durability: 80%',
+            colorScheme: 'blue',
+            iconColor: '#55778d'
+          },
           { label: 'Option 1' },
           { label: 'Option 2' },
           {

web/src/features/menu/context/Item.tsx

@@ -10,6 +10,7 @@ import {
   Spacer,
   Image,
   HStack,
+  Progress,
 } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Option, ContextMenuProps } from '../../../interfaces/context';
@@ -66,8 +67,8 @@ const Item: React.FC<{
                   }}
                 />
               )}
-              <Box>
-                <Box paddingBottom={button.description ? 1 : 0}>
+              <Box w="100%">
+                <Box>
                   <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
                     {button.title ? button.title : buttonKey}
                   </Text>
@@ -77,6 +78,15 @@ const Item: React.FC<{
                     <Text>{button.description}</Text>
                   </Box>
                 )}
+                {button?.progress && (
+                  <Progress
+                    value={button.progress}
+                    size="sm"
+                    colorScheme={button.colorScheme || 'gray'}
+                    borderRadius="md"
+                    marginRight="5px"
+                  />
+                )}
               </Box>
               {(button.menu || button.arrow) && button.arrow !== false && (
                 <>

web/src/features/menu/list/ListItem.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Text, Progress } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { forwardRef } from 'react';
 import CustomCheckbox from './CustomCheckbox';
@@ -28,10 +28,10 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
           return (ref.current = [...ref.current, element]);
       }}
     >
-      <Flex alignItems="center" height="100%" gap="20px">
+      <Flex alignItems="center" height="100%" gap="15px">
         {item.icon && (
           <Box display="flex" alignItems="center">
-            <FontAwesomeIcon icon={item.icon} fontSize={24} color="#909296" fixedWidth />
+            <FontAwesomeIcon icon={item.icon} fontSize={24} color={item.iconColor || '#909296'} fixedWidth />
           </Box>
         )}
         {Array.isArray(item.values) ? (
@@ -60,6 +60,13 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
             <Text>{item.label}</Text>
             <CustomCheckbox checked={checked}></CustomCheckbox>
           </Flex>
+        ) : item.progress !== undefined ? (
+          <Flex flexDirection="column" w="100%" marginRight="5px">
+            <Text verticalAlign="middle" marginBottom="3px">
+              {item.label}
+            </Text>
+            <Progress value={item.progress} size="sm" colorScheme={item.colorScheme || 'gray'} borderRadius="md" />
+          </Flex>
         ) : (
           <Text>{item.label}</Text>
         )}

web/src/features/menu/list/index.tsx

@@ -11,10 +11,13 @@ import React from 'react';
 
 export interface MenuItem {
   label: string;
+  progress?: number;
+  colorScheme?: string;
   checked?: boolean;
   values?: Array<string | { label: string; description: string }>;
   description?: string;
   icon?: IconProp;
+  iconColor?: string;
   defaultIndex?: number;
   close?: boolean;
 }

web/src/interfaces/context.ts

@@ -8,6 +8,8 @@ export interface Option {
   image?: string;
   icon?: IconProp;
   iconColor?: string;
+  progress?: number;
+  colorScheme?: string;
   metadata?: string[] | { [key: string]: any } | { label: string; value: any }[];
   disabled?: boolean;
   event?: string;