Merge branch 'v2.0.0' into lensauth

# Conflicts: # package-lock.json # package.json # yarn.lock
WatchItDev · Aug 15, 2024 · 847bc39 · 847bc39
2 parents b633c82 + 853389d
commit 847bc39
Show file tree

Hide file tree

Showing 22 changed files with 306 additions and 200 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,35 @@
+name: CI
+
+on:
+ workflow_call:
+ # https://github.com/marketplace/actions/jest-coverage-report#forks-with-no-write-permission
+ pull_request:
+
+jobs:
+ ci:
+ name: Static Analysis and Test | Node ${{matrix.node}}
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node: ["18", "20"]
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js v${{matrix.node}}
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node }}
+ cache: "npm"
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Run static analysis
+ run: make lint
+
+ - name: Test 
+ run: make test
+
+ - name: Generate report
+ run: make testcov
diff --git a/Makefile b/Makefile
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
  "@mui/x-data-grid": "^6.10.0",
  "@mui/x-date-pickers": "^6.10.0",
  "@react-pdf/renderer": "^3.1.12",
+ "@tabler/icons-react": "^3.11.0",
  "@tanstack/react-query": "^5.51.11",
  "@wagmi/connectors": "^3.1.4",
  "apexcharts": "^3.41.0",

diff --git a/public/assets/icons/navbar/ic_watchit.svg b/public/assets/icons/navbar/ic_watchit.svg
diff --git a/src/components/nav-section/horizontal/nav-list.tsx b/src/components/nav-section/horizontal/nav-list.tsx
@@ -24,9 +24,9 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr
 
  const pathname = usePathname();
 
- const active = useActiveLink(data.path, hasChild);
+ const active = useActiveLink(data?.path ?? '', hasChild);
 
- const externalLink = data.path.includes('http');
+ const externalLink = data?.path?.includes('http');
 
  const [open, setOpen] = useState(false);
 

diff --git a/src/components/nav-section/mini/nav-item.tsx b/src/components/nav-section/mini/nav-item.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 // @mui
 import { useTheme } from '@mui/material/styles';
 import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 import ListItemText from '@mui/material/ListItemText';
 // routes
@@ -10,7 +11,7 @@ import { RouterLink } from 'src/routes/components';
 import Iconify from '../../iconify';
 //
 import { NavItemProps, NavConfigProps } from '../types';
-import { StyledItem, StyledIcon } from './styles';
+import { StyledItem, StyledIcon, StyledNavContent } from './styles';
 
 // ----------------------------------------------------------------------
 
@@ -37,73 +38,68 @@ const NavItem = forwardRef<HTMLDivElement, Props>(
  config={config}
  {...other}
  >
- {icon && (
- <StyledIcon
- size={config.iconSize}
- sx={{
- ...(subItem && { mr: 1.5 }),
- }}
- >
- {icon}
- </StyledIcon>
- )}
+ <Box className='menu-pill'
+ sx={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '4px',
+ height: '100%',
+ display: 'flex',
+ overflow: 'hidden',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ transition: 'all 0.2s ease-in-out'
+ }}
+ >
+ <Box className='pill' sx={{
+ width: active ? '4px' : 0 ,
+ height: active ? '60%' : 0,
+ borderRadius: 0,
+ borderTopRightRadius: '1rem',
+ borderBottomRightRadius: '1rem',
+ backgroundColor: '#fff',
+ transition: 'all 0.3s ease-in-out'
+ }} />
+ </Box>
 
- {!(config.hiddenLabel && !subItem) && (
- <ListItemText
- sx={{
- width: 1,
- flex: 'unset',
- ...(!subItem && {
- px: 0.5,
- mt: 0.5,
- }),
- }}
- primary={title}
- primaryTypographyProps={{
- noWrap: true,
- fontSize: 10,
- lineHeight: '16px',
- textAlign: 'center',
- textTransform: 'capitalize',
- fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
- ...(subItem && {
- textAlign: 'unset',
- fontSize: theme.typography.body2.fontSize,
- lineHeight: theme.typography.body2.lineHeight,
- fontWeight: active ? 'fontWeightSemiBold' : 'fontWeightMedium',
- }),
- }}
- />
- )}
+ <StyledNavContent
+ active={active}
+ >
+ {icon && (
+ <StyledIcon
+ size={config.iconSize}
+ sx={{
+ width: '1.7rem',
+ height: '1.7rem',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ ...(subItem && { mr: 1.5 }),
+ }}
+ >
+ {icon}
+ </StyledIcon>
+ )}
 
- {caption && (
- <Tooltip title={caption} arrow placement="right">
- <Iconify
- width={16}
- icon="eva:info-outline"
+ {!icon && title && (
+ <ListItemText
  sx={{
- color: 'text.disabled',
- ...(!subItem && {
- top: 11,
- left: 6,
- position: 'absolute',
- }),
+ width: 1,
+ flex: 'unset'
+ }}
+ primary={title.slice(0,4)}
+ primaryTypographyProps={{
+ noWrap: true,
+ fontSize: 14,
+ lineHeight: 1,
+ textAlign: 'center',
+ textTransform: 'capitalize',
+ fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
  }}
  />
- </Tooltip>
- )}
-
- {!!children && (
- <Iconify
- width={16}
- icon="eva:arrow-ios-forward-fill"
- sx={{
- top: 11,
- right: 6,
- position: 'absolute',
- }}
- />
- )}
+ )}
+ </StyledNavContent>
  </StyledItem>
  );
 

diff --git a/src/components/nav-section/mini/nav-list.tsx b/src/components/nav-section/mini/nav-list.tsx
@@ -14,20 +14,17 @@ import NavItem from './nav-item';
 
 type NavListRootProps = {
  data: NavListProps;
+ active?: boolean;
  depth: number;
- hasChild: boolean;
  config: NavConfigProps;
+ onClick?: () => void
 };
 
-export default function NavList({ data, depth, hasChild, config }: NavListRootProps) {
+export default function NavList({ data, active, depth, config, onClick }: NavListRootProps) {
  const navRef = useRef(null);
 
  const pathname = usePathname();
 
- const active = useActiveLink(data.path, hasChild);
-
- const externalLink = data.path.includes('http');
-
  const [open, setOpen] = useState(false);
 
  useEffect(() => {
@@ -74,63 +71,37 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr
  item={data}
  depth={depth}
  open={open}
- active={active}
- externalLink={externalLink}
+ active={active || open}
  onMouseEnter={handleOpen}
  onMouseLeave={handleClose}
  config={config}
+ onClick={onClick}
  />
 
- {hasChild && (
- <Popover
- open={open}
- anchorEl={navRef.current}
- anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
- transformOrigin={{ vertical: 'center', horizontal: 'left' }}
- slotProps={{
- paper: {
- onMouseEnter: handleOpen,
- onMouseLeave: handleClose,
- sx: {
- mt: 0.5,
- width: 160,
- ...(open && {
- pointerEvents: 'auto',
- }),
- },
+ <Popover
+ open={open}
+ anchorEl={navRef.current}
+ anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'center', horizontal: 'left' }}
+ slotProps={{
+ paper: {
+ onMouseEnter: handleOpen,
+ onMouseLeave: handleClose,
+ sx: {
+ backgroundColor: 'rgba(0,0,0,0.6)',
+ padding: '8px 20px',
+ ...(open && {
+ pointerEvents: 'auto',
+ }),
  },
- }}
-  sx={{
-  pointerEvents: 'none',
- }}
- >
-  <NavSubList data={data.children} depth={depth} config={config} />
- </Popover>
- )}
+ },
+ }}
+ sx={{
+ pointerEvents: 'none'
+ }}
+ >
+ { data.title }
+ </Popover>
  </>
  );
 }
-
-// ----------------------------------------------------------------------
-
-type NavListSubProps = {
- data: NavListProps[];
- depth: number;
- config: NavConfigProps;
-};
-
-function NavSubList({ data, depth, config }: NavListSubProps) {
- return (
- <Stack spacing={0.5}>
- {data.map((list) => (
- <NavList
- key={list.title + list.path}
- data={list}
- depth={depth + 1}
- hasChild={!!list.children}
- config={config}
- />
- ))}
- </Stack>
- );
-}
diff --git a/src/components/nav-section/mini/nav-section-mini.tsx b/src/components/nav-section/mini/nav-section-mini.tsx
@@ -1,43 +1,32 @@
 import { memo } from 'react';
-import Stack from '@mui/material/Stack';
 //
-import { NavSectionProps, NavListProps, NavConfigProps } from '../types';
-import { navMiniConfig } from '../config';
+import { NavListProps, NavConfigProps } from '../types';
 import NavList from './nav-list';
 
 // ----------------------------------------------------------------------
 
-function NavSectionMini({ data, config, sx, ...other }: NavSectionProps) {
- return (
- <Stack sx={sx} {...other}>
- {data.map((group, index) => (
- <Group key={index} items={group.items} config={navMiniConfig(config)} />
- ))}
- </Stack>
- );
-}
-
-export default memo(NavSectionMini);
-
-// ----------------------------------------------------------------------
-
 type GroupProps = {
  items: NavListProps[];
+ activeId?: string;
  config: NavConfigProps;
+ onClick?: (id: string) => void
 };
 
-function Group({ items, config }: GroupProps) {
+function NavSectionMini({ items, activeId, config, onClick }: GroupProps) {
  return (
  <>
  {items.map((list) => (
  <NavList
  key={list.title + list.path}
+ active={activeId === list.id}
  data={list}
  depth={1}
- hasChild={!!list.children}
  config={config}
+ onClick={() => { onClick?.(list.id ?? '') }}
  />
  ))}
  </>
  );
 }
+
+export default memo(NavSectionMini);