@sikka/hawa 0.0.32 → 0.0.35

package/src/elements/DragDropImages.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 // import axios from "axios";
-import { getToken } from "../token";
 import { useDropzone } from "react-dropzone";
-import useTranslation from "next-translate/useTranslation";
-import Badge from "@mui/material/Badge";
 import CloseIcon from "@mui/icons-material/Close";
-import styles from "../styles/Theme.module.css";
+// import styled from "@emotion/styled";
+import { Container, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/system";
+import { HawaAlert } from "./HawaAlert";
 
 const thumbsContainer = {
   display: "flex",
@@ -14,23 +14,31 @@ const thumbsContainer = {
   marginTop: 10
 };
 
-const DragDropItemImage = ({
+export const DragDropImages = ({
+  texts,
   files,
   setFiles,
   itemId,
   setDeletedFiles,
-  refetchSingleMenu
-}) => {
-  const token = getToken();
-  const [cmp, setCmp] = useState(0);
-  //const [thumbs, setThumbs] = useState("");
-  const { t } = useTranslation("common");
-  const { getRootProps, getInputProps, fileRejections, acceptedFiles } =
-    useDropzone({
-      multiple: token.Pack?.image_per_item_limit > 1,
+  refetchSingleMenu,
+  maxFiles
+}) =>
+  // props
+  {
+    const [cmp, setCmp] = useState(0);
+    //const [thumbs, setThumbs] = useState("");
+    const theme = useTheme();
+    const {
+      getRootProps,
+      getInputProps,
+      fileRejections,
+      acceptedFiles,
+      isDragActive
+    } = useDropzone({
+      multiple: true,
       accept: "image/*",
       maxSize: 5000000,
-      maxFiles: token.Pack?.image_per_item_limit,
+      maxFiles: maxFiles,
       onDrop: (acceptedFiles) => {
         setFiles(
           acceptedFiles.map((file, index) =>
@@ -41,140 +49,141 @@ const DragDropItemImage = ({
         );
       }
     });
-  const handleRemoveFile = async (file) => {
-    console.log("fezafezaf", acceptedFiles[file]);
-    if (acceptedFiles[file]?.isFromDB) {
-      setDeletedFiles((old) => [
-        ...old,
-        {
-          img_url: acceptedFiles[file]?.img_url,
-          _id: acceptedFiles[file]?._id
+    const handleRemoveFile = async (file) => {
+      console.log("fezafezaf", acceptedFiles[file]);
+      if (acceptedFiles[file]?.isFromDB) {
+        setDeletedFiles((old) => [
+          ...old,
+          {
+            img_url: acceptedFiles[file]?.img_url,
+            _id: acceptedFiles[file]?._id
+          }
+        ]);
+        try {
+          // await axios.post(
+          //   `${process.env.NEXT_PUBLIC_QAWAIM_API_URL}/deleteImages`,
+          //   {
+          //     deletedFiles: [
+          //       {
+          //         img_url: acceptedFiles[file]?.img_url,
+          //         _id: acceptedFiles[file]?._id
+          //       }
+          //     ],
+          //     itemId: itemId
+          //   }
+          // );
+          refetchSingleMenu();
+          acceptedFiles.splice(file, 1);
+          setFiles(acceptedFiles);
+        } catch (err) {
+          console.error(err);
         }
-      ]);
-      try {
-        // await axios.post(
-        //   `${process.env.NEXT_PUBLIC_QAWAIM_API_URL}/deleteImages`,
-        //   {
-        //     deletedFiles: [
-        //       {
-        //         img_url: acceptedFiles[file]?.img_url,
-        //         _id: acceptedFiles[file]?._id
-        //       }
-        //     ],
-        //     itemId: itemId
-        //   }
-        // );
-        refetchSingleMenu();
-        acceptedFiles.splice(file, 1);
-        setFiles(acceptedFiles);
-      } catch (err) {
-        console.error(err);
+        console.log("accepted files after delete : ", acceptedFiles);
+        setCmp((old) => old + 1);
+        return;
       }
-      console.log("accepted files after delete : ", acceptedFiles);
-      setCmp((old) => old + 1);
-      return;
-    }
-    // if (file.hasOwnProperty("_id")) {
-    //   console.log("Yes");
-    //   return;
-    // }
-    acceptedFiles.splice(file, 1);
+      // if (file.hasOwnProperty("_id")) {
+      //   console.log("Yes");
+      //   return;
+      // }
+      acceptedFiles.splice(file, 1);
 
-    setFiles(
-      acceptedFiles.map((f) =>
-        Object.assign(f, { preview: URL.createObjectURL(f) })
-      )
+      setFiles(
+        acceptedFiles.map((f) =>
+          Object.assign(f, { preview: URL.createObjectURL(f) })
+        )
+      );
+      // setFiles(acceptedFiles);
+    };
+    useEffect(
+      () => () => {
+        files?.forEach((file) => {
+          URL.revokeObjectURL(file.preview);
+        });
+      },
+      [files]
     );
-    // setFiles(acceptedFiles);
-  };
-  useEffect(
-    () => () => {
-      files.forEach((file) => {
-        URL.revokeObjectURL(file.preview);
-      });
-    },
-
-    [files]
-  );
-  useEffect(() => {
-    if (files[0]?.hasOwnProperty("_id")) {
-      files?.map((file, index) => {
-        acceptedFiles.push({
-          preview: `https://qawaim-images.s3-ap-southeast-1.amazonaws.com/${file.image_url}`,
-          isFromDB: true,
-          _id: file._id,
-          img_url: file.image_url
+    useEffect(() => {
+      if (files[0]?.hasOwnProperty("_id")) {
+        files?.map((file, index) => {
+          acceptedFiles.push({
+            // preview: `https://qawaim-images.s3-ap-southeast-1.amazonaws.com/${file.image_url}`,
+            isFromDB: true,
+            _id: file._id,
+            img_url: file.image_url
+          });
         });
-      });
-      console.log("accepted files : ", acceptedFiles);
-      setFiles(acceptedFiles);
-    }
-    return () => {
-      acceptedFiles.splice(0, acceptedFiles?.length);
-    };
-  }, []);
-  const errs = fileRejections.map((rej, i) => {
-    return (
-      <div key={i} className={styles.upload_error_container}>
-        <div>{rej.file.name}</div>
-        <div>{t(rej.errors[0].code)}</div>
+        console.log("accepted files : ", acceptedFiles);
+        setFiles(acceptedFiles);
+      }
+      return () => {
+        acceptedFiles.splice(0, acceptedFiles?.length);
+      };
+    }, []);
+    const errs = fileRejections.map((rej, i) => {
+      return (
+        <div key={i}>
+          <div>{rej.file.name}</div>
+          <div>{rej.errors[0].code}</div>
+        </div>
+      );
+    });
+    console.log(fileRejections[0]?.errors[0]?.code);
+    const thumbs = files?.map((file, index) => (
+      <div style={{ position: "relative", margin: 10 }}>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            console.log("delete");
+          }}
+          size="small"
+          variant="contained"
+          style={{
+            position: "absolute",
+            top: -10,
+            right: -10,
+            backgroundColor: theme.primaryActionColor,
+            color: "white",
+            padding: 3
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+            height: 100,
+            width: 100,
+            backgroundImage: `url(${file.preview})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            border: "1px solid black"
+          }}
+          key={file.name}
+        />
       </div>
-    );
-  });
-
-  const thumbs = files.map((file, index) => (
-    <Badge
-      key={index}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        console.log("Clicking", index);
-        handleRemoveFile(index);
-      }}
-      badgeContent={<CloseIcon fontSize="small" />}
-      color="primary"
-      style={{
-        margin: 10,
-        width: 100,
-        height: 100
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          overflow: "hidden",
-          height: 100,
-          width: 100,
-          backgroundImage: `url(${file.preview})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center"
-        }}
-        key={file.name}
-      />
-    </Badge>
-  ));
+    ));
 
-  return (
-    <section className={styles.upload_main_container}>
-      <div
+    return (
+      <Container
+        variant="drop-area"
         {...getRootProps({
-          onClick: (e) => {
-            console.log("e : ", e);
-            e.preventDefault(), console.log("khobza");
-          },
-          style: { height: "100%", width: "100%", padding: 10 }
+          style: { backgroundColor: isDragActive && "white" }
         })}
       >
         <input {...getInputProps()} />
-        <div style={{ fontSize: 13 }}>{t("drag-n-drop")}</div>
-        <div style={{ fontSize: 13, marginTop: 5 }}>{t("max-file-size")}</div>
+        <Typography>Click here or drop files here to upload</Typography>
+        <Typography>Max file size is 5MB</Typography>
         {thumbs ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
-        {errs}
-      </div>
-    </section>
-  );
-};
-
-export default DragDropItemImage;
+        {fileRejections[0]?.errors[0]?.code !== "too-many-files" ? (
+          // <Typography variant="">{texts.tooManyFiles}</Typography>
+          <HawaAlert text={texts.tooManyFiles} severity="error" />
+        ) : (
+          errs
+        )}
+      </Container>
+    );
+  };

package/src/elements/DraggableCard.js

@@ -0,0 +1,36 @@
+import { MoreVert } from "@mui/icons-material";
+import { Container, Stack } from "@mui/material";
+import React from "react";
+
+export const DraggableCard = (props) => {
+  return (
+    <Stack
+      variant="card"
+      direction="row"
+      maxWidth={props.maxWidth}
+      style={{ paddingLeft: 5 }}
+    >
+      <div
+        style={{
+        //   backgroundColor: "blue",
+          display: "flex",
+          alignItems: "center",
+          //   paddingRight: 5,
+          borderRight: "1px solid grey",
+          marginRight: 20
+        }}
+      >
+        <MoreVert />
+      </div>
+
+      <div
+        style={{
+          //   backgroundColor: "red",
+          width: "100%"
+        }}
+      >
+        {props.children}
+      </div>
+    </Stack>
+  );
+};

package/src/elements/HawaPopMenu.js

@@ -1,4 +1,7 @@
-import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import PropTypes from "prop-types";
 
 export const HawaPopMenu = (props) => {
@@ -31,7 +34,7 @@ export const HawaPopMenu = (props) => {
       {props.menuItems.map((item) => (
         <MenuItem key={item.label} onClick={item.action}>
           {item.icon && <item.icon />}
-          <div style={{ width: 10 }} />
+          {item.icon && <div style={{ width: 10 }} />}
           <Typography textAlign="center">{item.label}</Typography>
         </MenuItem>
       ))}
@@ -40,6 +43,7 @@ export const HawaPopMenu = (props) => {
 };
 
 HawaPopMenu.propTypes = {
+  anchor: PropTypes.any,
   handleClose: PropTypes.func,
   menuItems: PropTypes.arrayOf(
     PropTypes.shape({

package/src/elements/index.js

@@ -19,3 +19,5 @@ export * from "./HawaTable";
 export * from "./HawaColorPicker";
 export * from "./HawaSearchBar";
 export * from "./HawaAccordian";
+export * from "./DragDropImages";
+export * from "./DraggableCard";

package/src/index.js

@@ -1,5 +1,3 @@
-export * from "./blocks/Account";
-export * from "./blocks/AuthForms";
-export * from "./blocks/Payment";
+export * from "./blocks";
 export * from "./elements";
 export * from "./layout";

package/src/layout/HawaAppBar.js

@@ -3,105 +3,62 @@ import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
 import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
 import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
-
-const pages = ["Products", "Pricing", "Blog"];
-const settings = ["Profile", "Account", "Dashboard", "Logout"];
+import PropTypes from "prop-types";
 
 export const HawaAppBar = (props) => {
   const theme = useTheme();
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
+  const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
+  const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
+  const handleCloseNavMenu = () => setAnchorElNav(null);
+  const handleCloseUserMenu = () => setAnchorElUser(null);
 
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
   console.log("theme is ", theme);
   return (
     <AppBar position="static" variant="appbar">
-      <Container maxWidth="xl" variant="appbar">
+      <Container variant="appbar">
         <Toolbar disableGutters>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
-          >
-            LOGO
-          </Typography>
-
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            {props.logo}
+          </Box>
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
             <IconButton
               size="large"
               aria-label="account of current user"
               aria-controls="menu-appbar"
               aria-haspopup="true"
-              onClick={props.handleOpenSideMenu}
+              onClick={handleOpenNavMenu}
               color="inherit"
             >
               <MenuIcon />
             </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorElNav}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left"
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "left"
-              }}
-              open={Boolean(anchorElNav)}
-              onClose={handleCloseNavMenu}
-              sx={{
-                display: { xs: "block", md: "none" }
-              }}
-            >
-              {pages.map((page) => (
-                <MenuItem key={page} onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center">{page}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
+            <HawaPopMenu
+              anchor={anchorElNav}
+              handleClose={handleCloseNavMenu}
+              menuItems={props.pages}
+            />
+          </Box>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            {props.logo}
           </Box>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
-          >
-            LOGO
-          </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
-            {pages.map((page) => (
+            {props.pages.map((page) => (
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}
                 sx={{ my: 2, display: "block" }}
               >
-                {page}
+                {page.label}
               </Button>
             ))}
           </Box>
@@ -123,3 +80,19 @@ export const HawaAppBar = (props) => {
     </AppBar>
   );
 };
+HawaAppBar.propTypes = {
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  ),
+  accountMenu: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
+};

package/src/layout/HawaAppLayout.js

@@ -16,10 +16,6 @@ import ListItemText from "@mui/material/ListItemText";
 import Avatar from "@mui/material/Avatar";
 import Tooltip from "@mui/material/Tooltip";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
-// use this to detect size and change things accordingly
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { BottomNavigation, BottomNavigationAction } from "@mui/material";
-import { RestoreOutlined } from "@mui/icons-material";
 
 const drawerWidth = 240;
 
@@ -44,10 +40,10 @@ const closedMixin = (theme) => ({
   }
 });
 
-const DrawerHeader = styled("div")(({ theme }) => ({
+const DrawerHeader = styled("div")(({ theme, direction }) => ({
   display: "flex",
   alignItems: "center",
-  justifyContent: "flex-end",
+  justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
   padding: theme.spacing(0, 1),
   // necessary for content to be below app bar
   ...theme.mixins.toolbar
@@ -55,14 +51,16 @@ const DrawerHeader = styled("div")(({ theme }) => ({
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
+})(({ theme, open, direction }) => ({
   zIndex: theme.zIndex.drawer + 1,
   transition: theme.transitions.create(["width", "margin"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
+
   ...(open && {
-    marginLeft: drawerWidth,
+    marginLeft: direction === "rtl" ? 0 : drawerWidth,
+    marginRight: direction === "rtl" ? drawerWidth : 0,
     width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(["width", "margin"], {
       easing: theme.transitions.easing.sharp,
@@ -91,11 +89,10 @@ const Drawer = styled(MuiDrawer, {
 export function HawaAppLayout(props) {
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
-  const matches = useMediaQuery("(max-width:600px)");
-
+  const isArabic = props.lang === "ar";
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
-  console.log("match is ", matches);
+
   const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
   const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
   const handleCloseNavMenu = () => setAnchorElNav(null);
@@ -104,27 +101,23 @@ export function HawaAppLayout(props) {
   const handleDrawerClose = () => setOpen(false);
 
   return (
-    <Box sx={{ display: "flex" }}>
-      {matches && (
-        <BottomNavigation
-          showLabels
-          // value={value}
-          // onChange={(event, newValue) => {
-          //   setValue(newValue);
-          // }}
+    <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
+      <AppBar
+        variant="appbar"
+        position="fixed"
+        open={open}
+        direction={isArabic ? "rtl" : "ltr"}
+      >
+        <Toolbar
+          variant="appbar"
+          sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
         >
-          <BottomNavigationAction label="Recents" icon={<RestoreOutlined />} />
-          <BottomNavigationAction label="Favorites" icon={<RestoreOutlined />} />
-          <BottomNavigationAction label="Nearby" icon={<RestoreOutlined />} />
-        </BottomNavigation>
-      )}{" "}
-      <AppBar variant="appbar" position="fixed" open={open}>
-        <Toolbar variant="appbar">
           <IconButton
             color="inherit"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
+            s
             sx={{
               marginRight: 5,
               ...(open && { display: "none" })
@@ -150,7 +143,11 @@ export function HawaAppLayout(props) {
 
             <Box>
               <Tooltip title="Open settings">
-                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <IconButton
+                  onClick={handleOpenUserMenu}
+                  sx={{ p: 0 }}
+                  size="small"
+                >
                   <Avatar />
                 </IconButton>
               </Tooltip>
@@ -163,8 +160,13 @@ export function HawaAppLayout(props) {
           </div>
         </Toolbar>
       </AppBar>
-      <Drawer variant="permanent" open={open}>
-        <DrawerHeader>
+      <Drawer
+        // anchor="left"
+
+        variant="permanent"
+        open={open}
+      >
+        <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
           {props.logo}
           <IconButton onClick={handleDrawerClose}>
             {theme.direction === "rtl" ? (