@asaleh37/ui-base 1.0.9 → 1.1.0

package/src/layout/NavigationTree.tsx

@@ -0,0 +1,284 @@
+import * as React from "react";
+import clsx from "clsx";
+import { animated, useSpring } from "@react-spring/web";
+import { styled, alpha } from "@mui/material/styles";
+import { TransitionProps } from "@mui/material/transitions";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import Typography from "@mui/material/Typography";
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
+import { treeItemClasses } from "@mui/x-tree-view/TreeItem";
+import {
+  useTreeItem2,
+  UseTreeItem2Parameters,
+} from "@mui/x-tree-view/useTreeItem2";
+import {
+  TreeItem2Checkbox,
+  TreeItem2Content,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from "@mui/x-tree-view/TreeItem2";
+import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon";
+import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider";
+import { TreeItem2DragAndDropOverlay } from "@mui/x-tree-view/TreeItem2DragAndDropOverlay";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../redux/store";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useIsMobile } from "../hooks/UseMobile";
+import useSession from "../hooks/UseSession";
+import { findNavigationItemById, NavigationItems } from "../navigationItems";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+
+function DotIcon() {
+  return (
+    <Box
+      sx={{
+        width: 6,
+        height: 6,
+        borderRadius: "70%",
+        bgcolor: "warning.main",
+        display: "inline-block",
+        verticalAlign: "middle",
+        zIndex: 1,
+        mx: 1,
+      }}
+    />
+  );
+}
+declare module "react" {
+  interface CSSProperties {
+    "--tree-view-color"?: string;
+    "--tree-view-bg-color"?: string;
+  }
+}
+
+const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+  color: theme.palette.grey[400],
+  position: "relative",
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: theme.spacing(2.5),
+  },
+  ...theme.applyStyles("light", {
+    color: theme.palette.grey[800],
+  }),
+})) as unknown as typeof TreeItem2Root;
+
+const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+  flexDirection: "row-reverse",
+  borderRadius: theme.spacing(0.7),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(0.5),
+  padding: theme.spacing(0.5),
+  paddingRight: theme.spacing(1),
+  [`&.Mui-expanded `]: {
+    "&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon":
+      {
+        color: theme.palette.primary.dark,
+        ...theme.applyStyles("light", {
+          color: theme.palette.primary.main,
+        }),
+      },
+    "&::before": {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      left: "16px",
+      top: "44px",
+      height: "calc(100% - 48px)",
+      width: "1.5px",
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles("light", {
+        backgroundColor: theme.palette.grey[300],
+      }),
+    },
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+    color: "white",
+    ...theme.applyStyles("light", {
+      color: theme.palette.primary.main,
+    }),
+  },
+  [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.primary.main,
+    }),
+  },
+}));
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props: TransitionProps) {
+  const style = useSpring({
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+    },
+  });
+
+  return <AnimatedCollapse style={style} {...props} />;
+}
+
+const StyledTreeItemLabelText = styled(Typography)({
+  color: "inherit",
+  fontWeight: 500,
+}) as unknown as typeof Typography;
+
+interface CustomLabelProps {
+  children: any;
+  icon: IconProp;
+  expandable?: boolean;
+}
+
+function CustomLabel({
+  icon,
+  expandable,
+  children,
+  ...other
+}: CustomLabelProps) {
+  const { t } = useTranslation();
+  const appLayoutState = useSelector((state: RootState) => state.AppLayout);
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        padding: 1,
+      }}
+    >
+      <FontAwesomeIcon
+        style={{
+          marginRight: appLayoutState.appDirection === "ltr" ? 7 : undefined,
+          marginLeft: appLayoutState.appDirection === "rtl" ? 7 : undefined,
+          fontSize: "1.2rem",
+        }}
+        icon={icon}
+      />
+      <StyledTreeItemLabelText variant="body2" sx={{ fontSize: 16 }}>
+        {t(children)}
+      </StyledTreeItemLabelText>
+      {expandable && <DotIcon />}
+    </TreeItem2Label>
+  );
+}
+
+const isExpandable = (reactChildren: React.ReactNode) => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isExpandable);
+  }
+  return Boolean(reactChildren);
+};
+
+interface CustomTreeItemProps
+  extends Omit<UseTreeItem2Parameters, "rootRef">,
+    Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>
+) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    getDragAndDropOverlayProps,
+    status,
+    publicAPI,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+  const item = publicAPI.getItem(itemId);
+  const expandable = isExpandable(children);
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <StyledTreeItemRoot {...getRootProps(other)}>
+        <CustomTreeItemContent
+          {...getContentProps({
+            className: clsx("content", {
+              "Mui-expanded": status.expanded,
+              "Mui-selected": status.selected,
+              "Mui-focused": status.focused,
+              "Mui-disabled": status.disabled,
+            }),
+          })}
+        >
+          <TreeItem2IconContainer {...getIconContainerProps()}>
+            <TreeItem2Icon status={status} />
+          </TreeItem2IconContainer>
+          <TreeItem2Checkbox {...getCheckboxProps()} />
+          <CustomLabel
+            {...getLabelProps({
+              icon: item?.icon || "book",
+              expandable: expandable && status.expanded,
+            })}
+          />
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
+        </CustomTreeItemContent>
+        {children && <TransitionComponent {...getGroupTransitionProps()} />}
+      </StyledTreeItemRoot>
+    </TreeItem2Provider>
+  );
+});
+
+export default function NavigationTree() {
+  const navigate = useNavigate();
+  const appLayoutState = useSelector((state: RootState) => state.AppLayout);
+  const dispatch = useDispatch();
+  const isMobile = useIsMobile();
+  const { isUserAuthorized } = useSession();
+  const filterData = (data) => {
+    return data
+      .filter(
+        (item: any) =>
+          item.authority === undefined ||
+          item.authority == null ||
+          isUserAuthorized(item.authority)
+      )
+      .map((item: any) => {
+        if (item.children) {
+          item.children = filterData(item.children);
+        }
+        return item;
+      });
+  };
+
+  const authoriedNavigationItems = filterData(NavigationItems);
+
+  return (
+    <RichTreeView
+      items={authoriedNavigationItems}
+      onItemClick={(event, itemId) => {
+        const navigationItem = findNavigationItemById(itemId, NavigationItems);
+        if (
+          navigationItem?.action === "NAVIGATION" &&
+          navigationItem?.actionPayload != null &&
+          (navigationItem.children === undefined ||
+            navigationItem.children === null ||
+            navigationItem.children.length == 0)
+        ) {
+          navigate(navigationItem?.actionPayload?.path || "");
+          // dispatch(AppLayoutActions.toggleSideBarState());
+        }
+      }}
+      sx={{
+        height: "fit-content",
+        flexGrow: 1,
+        maxWidth: DRAWER_WIDTH,
+        direction: appLayoutState.appDirection,
+        maxHeight: isMobile ? 300 : undefined,
+        overflowY: "auto",
+        overflowX: "auto",
+      }}
+      slots={{ item: CustomTreeItem }}
+    />
+  );
+}

package/src/layout/SideBar.tsx

@@ -0,0 +1,80 @@
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Drawer from "@mui/material/Drawer";
+import { useDispatch, useSelector } from "react-redux";
+import { DrawerHeader } from "./DrawerHeader";
+import { Box, Typography, useTheme } from "@mui/material";
+import { RootState } from "../redux/store";
+import {
+  AppLayoutActions,
+  DRAWER_WIDTH,
+} from "../redux/features/common/AppLayoutSlice";
+import NavigationTree from "./NavigationTree";
+
+const SideBar: React.FC = () => {
+  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const theme = useTheme();
+  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const dispatch = useDispatch();
+  const toggleSideBar = () => {
+    dispatch(AppLayoutActions.toggleSideBarState());
+  };
+  return (
+    <Drawer
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="persistent"
+      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
+      open={AppLayout.sideBarOpened}
+    >
+      <DrawerHeader>
+        <Box sx={{ width: "100%" }}>
+          <Typography
+            color="primary"
+            sx={{
+              width: "100%",
+              textAlign: "center",
+              fontSize: 18,
+              fontWeight: "bold",
+            }}
+          >
+            System Content
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              marginTop: 1,
+            }}
+          >
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              {AppInfo.appName}
+            </Typography>
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              V.{AppInfo.appVersion}
+            </Typography>
+          </Box>
+        </Box>
+        <IconButton onClick={toggleSideBar}>
+          {theme.direction === "ltr" ? (
+            <FontAwesomeIcon icon="angle-left" />
+          ) : (
+            <FontAwesomeIcon icon="angle-right" />
+          )}
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      <NavigationTree />
+    </Drawer>
+  );
+};
+
+export default SideBar;

package/src/layout/TopBar.tsx

@@ -0,0 +1,142 @@
+import { Avatar, IconButton, styled, Typography } from "@mui/material";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import { useDispatch, useSelector } from "react-redux";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { RootState } from "../redux/store";
+import { useIsMobile } from "../hooks/UseMobile";
+import {
+  AppLayoutActions,
+  DRAWER_WIDTH,
+} from "../redux/features/common/AppLayoutSlice";
+import useAxios from "../hooks/useAxios";
+import { UserSessionActions } from "../redux/features/common/UserSessionSlice";
+import i18n, { changeLanguage } from "../locales/i18n";
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme }) => {
+  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const isMobile = useIsMobile();
+  return {
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    variants: [
+      {
+        props: ({ open }) => open,
+        style: {
+          width: !isMobile ? `calc(100% - ${DRAWER_WIDTH}px)` : undefined,
+          marginLeft:
+            !isMobile && AppLayout.appDirection === "ltr"
+              ? `${DRAWER_WIDTH}px`
+              : undefined,
+          marginRight:
+            !isMobile && AppLayout.appDirection === "rtl"
+              ? `${DRAWER_WIDTH}px`
+              : undefined,
+          transition: theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        },
+      },
+    ],
+  };
+});
+
+const TopBar: React.FC = () => {
+  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const UserSession = useSelector((state: RootState) => state.UserSession);
+  const { handleGetRequest } = useAxios();
+  const isMobile = useIsMobile();
+  const dispatch = useDispatch();
+  const handleLogout = async () => {
+    try {
+      await handleGetRequest({ endPointURI: "api/auth/logout" });
+    } catch (error) {
+      console.log("logout error", error);
+    }
+    dispatch(UserSessionActions.setUnAuthenticated());
+  };
+  const toggleSideBar = () => {
+    dispatch(AppLayoutActions.toggleSideBarState());
+  };
+  return (
+    <AppBar position="fixed" open={AppLayout.sideBarOpened}>
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          onClick={toggleSideBar}
+          edge="start"
+          sx={[
+            {
+              mr: AppLayout.appDirection === "ltr" ? 2 : undefined,
+              ml: AppLayout.appDirection === "rtl" ? 2 : undefined,
+            },
+            AppLayout.sideBarOpened && { display: "none" },
+          ]}
+        >
+          <FontAwesomeIcon icon="bars" />
+        </IconButton>
+        <Avatar src={AppInfo.appLogo} sx={{ marginRight: 1, marginLeft: 1 }} />
+        <Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
+          {isMobile ? "" : AppInfo.appName}
+        </Typography>
+        <IconButton
+          color="inherit"
+          onClick={() => {
+            dispatch(
+              AppLayoutActions.setThemeMode(
+                AppLayout.themeMode === "light" ? "dark" : "light"
+              )
+            );
+            localStorage.setItem(
+              "themeMode",
+              AppLayout.themeMode === "light" ? "dark" : "light"
+            );
+          }}
+        >
+          {AppLayout.themeMode === "light" ? (
+            <FontAwesomeIcon icon="moon" />
+          ) : (
+            <FontAwesomeIcon icon={{ prefix: "far", iconName: "sun" }} />
+          )}
+        </IconButton>
+        <IconButton
+          color="inherit"
+          onClick={() => {
+            let nextLanguage = i18n.language === "ar" ? "en" : "ar";
+            changeLanguage(nextLanguage);
+            dispatch(
+              AppLayoutActions.setAppDirection(
+                nextLanguage === "ar" ? "rtl" : "ltr"
+              )
+            );
+          }}
+        >
+          <FontAwesomeIcon icon="language" />
+        </IconButton>
+        <Avatar />
+        <div style={{ marginLeft: 5, marginRight: 5 }}>
+          {isMobile ? "" : UserSession.value?.userProfile?.username}
+        </div>
+        <IconButton color="inherit" onClick={handleLogout}>
+          <FontAwesomeIcon
+            rotation={AppLayout.appDirection === "rtl" ? 180 : undefined}
+            icon="arrow-right-from-bracket"
+          />
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default TopBar;