improve ux in 'usedFor'. began refactoring towards feature sliced design

src/renderer/components/ItemWithTooltip.tsx → src/renderer/components/CompactItem.tsx

@@ -7,7 +7,13 @@ import { iconFromId } from '../icons/icons';
 import { useNavigate } from 'react-router-dom';
 import { useItemContext } from '../contexts/itemsContext';
 
-export const EvoItemRenderer: FC<{ id?: string, onClick?: () => void }> = ({ id, onClick }) => {
+interface Props {
+  id?: string,
+  noTooltip?: boolean,
+  onClick?: () => void,
+}
+
+export const CompactItem: FC<Props> = ({ id, noTooltip, onClick }) => {
   const { items } = useItemContext();
   const navigate = useNavigate();
   if (!id) {
@@ -31,7 +37,11 @@ export const EvoItemRenderer: FC<{ id?: string, onClick?: () => void }> = ({ id,
       sx={{
         boxShadow: 3
       }}
-      title={<ItemCard id={id} item={items[id]} />}
+      title={
+        !noTooltip 
+          ? <ItemCard id={id} item={items[id]} /> 
+          : null
+        }
       placement="right-start"
     >
       <Avatar

src/renderer/components/Stash.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { BoxProps } from '@mui/material';
-import { EvoItemRenderer } from './ItemWithTooltip';
+import { CompactItem } from './CompactItem';
 
 interface EvoStashProps extends BoxProps {
   itemIds: string[];
@@ -12,7 +12,7 @@ export function EvoStash(props: EvoStashProps) {
     <Box {...rest}>
       {itemIds.map((id, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <EvoItemRenderer key={id + index} id={id} />
+        <CompactItem key={id + index} id={id} />
       ))}
     </Box>
   );

src/renderer/feature/item/components/CraftsInto.tsx

@@ -0,0 +1,62 @@
+import { CompactItem } from '../../../components/CompactItem';
+import Box from '@mui/material/Box';
+import { useNavigate } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+import { TItem } from '../../../../types';
+import { useItemContext } from '../../../contexts/itemsContext';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
+
+export function CraftsInto(props: { item: TItem }) {
+    const { item } = props;
+    const { items } = useItemContext();
+
+    const usedForItemsArr = item.partOf.map(id => items[id])
+
+    if (usedForItemsArr.length === 0) return null;
+
+
+    return (
+        <Box sx={{ width: '500px', paddingTop: '5px' }}>
+            <Typography variant="h6">Used for</Typography>
+            {
+                usedForItemsArr.length > 4
+                    ? <TiledItems items={usedForItemsArr} />
+                    : <ListedItems items={usedForItemsArr} />
+            }
+        </Box>
+    )
+}
+
+function TiledItems({ items }: { items: TItem[] }) {
+    if (items.length === 0) return null;
+
+    return (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', paddingTop: '5px' }}>
+            {items.map((item) => (
+                <CompactItem key={`used_for_${item.id}`} id={item.id} />
+            ))}
+        </Box>
+    )
+}
+
+function ListedItems({ items }: { items: TItem[] }) {
+    if (items.length === 0) return null;
+    const navigate = useNavigate();
+
+    return (
+        <Box sx={{ paddingTop: '5px' }}>
+            {items.map((item) => (
+                <ItemIconAndTitle 
+                    sx={{
+                        paddingLeft: '30px',
+                        cursor: 'pointer',
+                        '&:hover': {
+                            background: '#2b2b2b'
+                        }
+                    }}
+                    onClick={() => { navigate(`/item/${item.id}`) }}
+                    item={item}/>
+            ))}
+        </Box>
+    )
+}

src/renderer/feature/item/components/DependencyTree.tsx

@@ -0,0 +1,66 @@
+
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import { TreeView } from '@mui/x-tree-view/TreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
+import { grey, lightBlue } from '@mui/material/colors';
+import { TItem } from '../../../../types';
+import { useItemContext } from '../../../contexts/itemsContext';
+
+
+export function ItemDependenciesTree(props: {item: TItem}) {
+    const { item } = props;
+    if (item.recipe.length === 0) return null;
+    return (
+      <Box sx={{ width: '500px', paddingTop: '15px'}}>
+        <Typography variant="h6">Crafting</Typography>
+        <TreeView sx={{ paddingTop: '10px' }}>
+          {
+            item.recipe.map((craftingId: string) => (
+              <ItemDependency key={craftingId} index={item.id} id={craftingId} />
+            ))
+          }
+        </TreeView>
+      </Box>
+    )
+  }
+
+
+function ItemDependency(props: {id: string; index: string;}) {
+    const { items } = useItemContext();
+    const { id, index } = props;
+    const item = items[id];
+    const newIndex = index + '_' + id;
+
+    if (!item) {
+      return (
+        <TreeItem nodeId={newIndex} label={
+          <Box sx={{display:'flex', flexDirection:'row', alignContent: 'center'}}>
+            <Avatar sx={{ bgcolor: grey[500], marginRight: '10px' }} variant="rounded">
+              {id[0]}
+            </Avatar>
+            <Typography variant="body2">{id}</Typography>
+          </Box>
+        }/>
+      );
+    }
+    return (
+      <TreeItem
+        nodeId={newIndex}
+        label={
+          <Box sx={{display:'flex', flexDirection:'row', alingItems: 'center', justifyContent: 'space-between'}}>
+            <ItemIconAndTitle item={item} />
+            { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300], lineHeight: '40px' }}>{item.sourceShort}</Typography> }
+          </Box>
+        }>
+        {
+          item.recipe.map((id, index) => (
+            <ItemDependency key={newIndex + id + '_' + index} index={newIndex} id={id} />
+          ))
+        }
+      </TreeItem>
+    )
+  }
+

src/renderer/components/GodlyProgress.tsx → src/renderer/feature/item/components/GodlyProgress.tsx

@@ -3,13 +3,13 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
-import { ItemIconAndTitle } from './Item';
 import { lightBlue } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import { useMemo, useState } from 'react';
-import { DependencyObj, getItemArrFlatDependenciesObject } from '../util/crafting';
-import { useItemContext } from '../contexts/itemsContext';
+import { DependencyObj, getItemArrFlatDependenciesObject } from '../../../util/crafting';
+import { useItemContext } from '../../../contexts/itemsContext';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
 
 
 interface ExpandMoreProps extends IconButtonProps {
@@ -110,7 +110,7 @@ function MissingItem(props: {id: string, amount: number}) {
         <Typography sx={{ width: '30px'}}>{amount}  </Typography>
         <ItemIconAndTitle item={item} />
       </Box>
-      { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300] }}>{item.sourceShort}</Typography> }
+      { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300], lineHeight: '40px' }}>{item.sourceShort}</Typography> }
     </Box>
   )
 }

src/renderer/feature/item/components/Item.tsx

@@ -0,0 +1,46 @@
+import Box, { BoxProps } from '@mui/material/Box';
+import { iconFromId } from '../../../icons/icons';
+import Typography from '@mui/material/Typography';
+import { lightBlue } from '@mui/material/colors';
+import { TItem } from '../../../../types';
+import { CraftsInto } from './CraftsInto';
+import { ItemDependenciesTree } from './DependencyTree';
+
+interface EvoItemProps extends BoxProps {
+  item: TItem
+}
+
+export function EvoItem(props: EvoItemProps) {
+  const { item, sx,...rest } = props;
+  const { color } = item.rarity;
+
+  return (
+    <Box {...rest} sx={{ maxWidth: '600px'}}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', paddingBottom: '10px' }}>
+        <img
+          src={iconFromId(item.icon)} width={64} height={64}
+        />
+        <Box sx={{ paddingLeft: '10px' }}>
+          <Typography variant="subtitle1" color={color}>
+            {item.id}
+          </Typography>
+          <Typography variant="subtitle2" color={lightBlue[300]}>
+            {item.restriction}
+          </Typography>
+        </Box>
+      </Box>
+      <Typography variant="body2">{item.description}</Typography>
+      <br />
+      {item.effects.map((effect, index) => (
+        <Typography key={effect + index} variant="body2">
+          {effect}
+        </Typography>
+      ))}
+      <ItemDependenciesTree item={item} />
+      <CraftsInto item={item} />
+    </Box>
+  )
+}
+
+
+