@sikka/hawa 0.0.2 → 0.0.5

package/src/ui/ApplePayButton.js

@@ -0,0 +1,94 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Button from "@mui/material/Button";
+import { styled, darken } from "@mui/material/styles";
+
+import GitHubIcon from "@mui/icons-material/GitHub";
+
+export const ApplePayButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.margins,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+
+      borderRadius: 4,
+      position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      height: 50,
+      // padding: "10px 12px",
+      ...buttonStyle,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        borderColor: theme.palette.primary.main
+      }
+    };
+  });
+
+  return (
+    <StyledButton
+      //  style={buttonStyle}
+      onClick={props.handleClick}
+    >
+      <img
+        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
+        height={40}
+      />{" "}
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </StyledButton>
+  );
+};

package/src/{components/Hawa/AutoCompleteField/AutoCompleteField.jsx → ui/AutoCompleteField.js}

@@ -1,33 +1,32 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-// import Autocomplete from "@material-ui/lab/Autocomplete";
-
-export const AutoCompleteField = (props) => {
-  const { control } = useFormContext();
-  const { name, rules, shouldUnregister } = props;
-
-  return (
-    <React.Fragment>
-      <Controller
-        name={name}
-        rules={rules}
-        control={control}
-        shouldUnregister={shouldUnregister}
-        className="theme_form_input"
-        render={({ field: { onChange, value } }) => {
-          return (
-            <input type="text" />
-            // <Autocomplete
-            //   onChange={(e, data) => {
-            //     onChange(data);
-            //   }}
-            //   value={value ?? ""}
-            //   {...props}
-            //   className={"theme_form_input"}
-            // />
-          );
-        }}
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+export const AutoCompleteField = (props) => {
+  const { control } = useFormContext();
+  const { name, rules, shouldUnregister } = props;
+
+  return (
+    <React.Fragment>
+      <Controller
+        name={name}
+        rules={rules}
+        control={control}
+        shouldUnregister={shouldUnregister}
+        className="theme_form_input"
+        render={({ field: { onChange, value } }) => {
+          return (
+            <input type="text" />
+            // <Autocomplete
+            //   onChange={(e, data) => {
+            //     onChange(data);
+            //   }}
+            //   value={value ?? ""}
+            //   {...props}
+            //   className={"theme_form_input"}
+            // />
+          );
+        }}
+      />
+    </React.Fragment>
+  );
+};

package/src/{components/Hawa/Checkbox/Checkbox.jsx → ui/Checkbox.js}

@@ -1,20 +1,21 @@
-import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-import PropTypes from "prop-types";
-
-export const StyledCheckbox = (props) => {
-  console.log("props : ", props);
-  return (
-    <React.Fragment>
-      <FormControlLabel
-        control={
-          <Checkbox
-            style={{ color: props.color || null }}
-            defaultChecked={props.defaultValue}
-          />
-        }
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+// import PropTypes from "prop-types";
+
+export const StyledCheckbox = (props) => {
+  console.log("props : ", props);
+  return (
+    <React.Fragment>
+      <FormControlLabel
+        label={props.label}
+        control={
+          <Checkbox
+            style={{ color: props.color || null }}
+            defaultChecked={props.defaultValue}
+          />
+        }
+      />
+    </React.Fragment>
+  );
+};

package/src/{components/Hawa/DragDropImages/DragDropImages.jsx → ui/DragDropImages.js}

@@ -1,180 +1,180 @@
-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 "@material-ui/core/Badge";
-import CloseIcon from "@material-ui/icons/Close";
-import styles from "../styles/Theme.module.css";
-
-const thumbsContainer = {
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  marginTop: 10
-};
-
-const DragDropItemImage = ({
-  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,
-      accept: "image/*",
-      maxSize: 5000000,
-      maxFiles: token.Pack?.image_per_item_limit,
-      onDrop: (acceptedFiles) => {
-        setFiles(
-          acceptedFiles.map((file, index) =>
-            Object.assign(file, {
-              preview: URL.createObjectURL(file)
-            })
-          )
-        );
-      }
-    });
-  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);
-      }
-      console.log("accepted files after delete : ", acceptedFiles);
-      setCmp((old) => old + 1);
-      return;
-    }
-    // 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);
-  };
-  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
-        });
-      });
-      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>
-      </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
-        {...getRootProps({
-          onClick: (e) => {
-            console.log("e : ", e);
-            e.preventDefault(), console.log("khobza");
-          },
-          style: { height: "100%", width: "100%", padding: 10 }
-        })}
-      >
-        <input {...getInputProps()} />
-        <div style={{ fontSize: 13 }}>{t("drag-n-drop")}</div>
-        <div style={{ fontSize: 13, marginTop: 5 }}>{t("max-file-size")}</div>
-        {thumbs ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
-        {errs}
-      </div>
-    </section>
-  );
-};
-
-export default DragDropItemImage;
+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";
+
+const thumbsContainer = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  marginTop: 10
+};
+
+const DragDropItemImage = ({
+  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,
+      accept: "image/*",
+      maxSize: 5000000,
+      maxFiles: token.Pack?.image_per_item_limit,
+      onDrop: (acceptedFiles) => {
+        setFiles(
+          acceptedFiles.map((file, index) =>
+            Object.assign(file, {
+              preview: URL.createObjectURL(file)
+            })
+          )
+        );
+      }
+    });
+  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);
+      }
+      console.log("accepted files after delete : ", acceptedFiles);
+      setCmp((old) => old + 1);
+      return;
+    }
+    // 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);
+  };
+  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
+        });
+      });
+      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>
+      </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
+        {...getRootProps({
+          onClick: (e) => {
+            console.log("e : ", e);
+            e.preventDefault(), console.log("khobza");
+          },
+          style: { height: "100%", width: "100%", padding: 10 }
+        })}
+      >
+        <input {...getInputProps()} />
+        <div style={{ fontSize: 13 }}>{t("drag-n-drop")}</div>
+        <div style={{ fontSize: 13, marginTop: 5 }}>{t("max-file-size")}</div>
+        {thumbs ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
+        {errs}
+      </div>
+    </section>
+  );
+};
+
+export default DragDropItemImage;

package/src/ui/GithubButton.js

@@ -0,0 +1,91 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Button from "@mui/material/Button";
+import { styled, darken } from "@mui/material/styles";
+
+import GitHubIcon from "@mui/icons-material/GitHub";
+
+export const GithubButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.margins,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+
+      borderRadius: 4,
+      position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      height: 50,
+      // padding: "10px 12px",
+      ...buttonStyle,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        borderColor: theme.palette.primary.main
+      }
+    };
+  });
+
+  return (
+    <StyledButton
+      //  style={buttonStyle}
+      onClick={props.handleClick}
+    >
+      <GitHubIcon />
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </StyledButton>
+  );
+};