@sikka/hawa 0.0.1 → 0.0.4

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 "@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;

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

@@ -1,3 +1,3 @@
-export const Hawa = (props) => {
-  return <div>test</div>;
-};
+export const Hawa = (props) => {
+  return <div>test</div>;
+};

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

@@ -1,29 +1,29 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-
-export const StyledRadioBox = (props) => {
-  const { control } = useFormContext();
-  const { name, defaultValue, rules, shouldUnregister } = props;
-
-  return (
-    <React.Fragment>
-      <Controller
-        render={({ field }) => (
-          <FormControlLabel
-            control={<Checkbox />}
-            {...props}
-            {...field}
-            checked={field.value}
-          />
-        )}
-        name={name}
-        rules={rules}
-        control={control}
-        defaultValue={defaultValue}
-        shouldUnregister={shouldUnregister}
-      />
-    </React.Fragment>
-  );
-}
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+
+export const StyledRadioBox = (props) => {
+  const { control } = useFormContext();
+  const { name, defaultValue, rules, shouldUnregister } = props;
+
+  return (
+    <React.Fragment>
+      <Controller
+        render={({ field }) => (
+          <FormControlLabel
+            control={<Checkbox />}
+            {...props}
+            {...field}
+            checked={field.value}
+          />
+        )}
+        name={name}
+        rules={rules}
+        control={control}
+        defaultValue={defaultValue}
+        shouldUnregister={shouldUnregister}
+      />
+    </React.Fragment>
+  );
+};

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

@@ -1,51 +1,51 @@
-import React, { useState, useContext } from "react";
-import { ThemeProvider } from "../HawaProvider";
-
-export const StyledRadioSelector = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
-
-  return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
-      {props.options.map((o) => {
-        return (
-          <div
-            key={o.label}
-            className="radio_option"
-            onClick={() => {
-              setValue(o.label);
-              if (props.handleChange) {
-                props.handleChange();
-              }
-            }}
-            style={
-              value.toLowerCase() === o.label.toLowerCase()
-                ? {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings,
-                    backgroundColor:
-                      theme.primaryColor || props.bgSelectedColor || "blue",
-                    color: props.textSelectedColor || "lightgray"
-                  }
-                : {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings
-                  }
-            }
-          >
-            {o.text}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import React, { useState, useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const StyledRadioSelector = (props) => {
+  const [value, setValue] = useState(props.defaultValue);
+  const theme = useContext(ThemeProvider);
+
+  return (
+    <div
+      style={{
+        backgroundColor: "white",
+        display: "flex",
+        flexDirection: "row",
+        margin: theme.margins,
+        padding: theme.paddings,
+        marginBottom: 10
+      }}
+    >
+      {props.options.map((singleOption) => {
+        return (
+          <div
+            key={singleOption.label}
+            className="radio_option"
+            onClick={() => {
+              setValue(singleOption.label);
+              if (props.handleChange) {
+                props.handleChange();
+              }
+            }}
+            style={
+              value.toLowerCase() === singleOption.label.toLowerCase()
+                ? {
+                    borderRadius: theme.borderRadius,
+                    padding: theme.paddings,
+                    backgroundColor:
+                      theme.primaryColor || props.bgSelectedColor || "blue",
+                    color: props.textSelectedColor || "lightgray"
+                  }
+                : {
+                    borderRadius: theme.borderRadius,
+                    padding: theme.paddings
+                  }
+            }
+          >
+            {singleOption.text}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/ui/Row.js

@@ -0,0 +1,21 @@
+export const Row = (props) => {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--light)",
+        borderRadius: "var(--borderR)",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        height: 50,
+        padding: 10,
+        marginBottom: 20,
+        width: "100%"
+      }}
+    >
+      <div style={{ fontWeight: 800 }}>{props.title}</div>
+      {props.actionComponent}
+    </div>
+  );
+};

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

@@ -1,46 +1,46 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import FormControl from "@material-ui/core/FormControl";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-
-const MuiSelect = (props) => {
-  const { name, options, required, error } = props;
-  let isError = false;
-  let errorMessage = "";
-  if (error && error.hasOwnProperty(name)) {
-    isError = true;
-    errorMessage = error[name].message;
-  }
-
-  return (
-    <FormControl fullWidth={true} error={isError}>
-      {label} {required ? <span className="req-label">*</span> : null}
-      <Select id={name} {...props}>
-        <MenuItem value="">
-          <em>None</em>
-        </MenuItem>
-        {options.map((item) => (
-          <MenuItem key={item.id} value={item.id}>
-            {item.label}
-          </MenuItem>
-        ))}
-      </Select>
-      <FormHelperText>{errorMessage}</FormHelperText>
-    </FormControl>
-  );
-};
-
-export const SelectField = (props) => {
-  const { control } = useFormContext();
-  return (
-    <React.Fragment>
-      <Controller
-        control={control}
-        render={(field) => <MuiSelect {...props} {...field} />}
-        {...props}
-      />
-    </React.Fragment>
-  );
-}
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+
+const MuiSelect = (props) => {
+  const { name, options, required, error } = props;
+  let isError = false;
+  let errorMessage = "";
+  if (error && error.hasOwnProperty(name)) {
+    isError = true;
+    errorMessage = error[name].message;
+  }
+
+  return (
+    <FormControl fullWidth={true} error={isError}>
+      {label} {required ? <span className="req-label">*</span> : null}
+      <Select id={name} {...props}>
+        <MenuItem value="">
+          <em>None</em>
+        </MenuItem>
+        {options.map((item) => (
+          <MenuItem key={item.id} value={item.id}>
+            {item.label}
+          </MenuItem>
+        ))}
+      </Select>
+      <FormHelperText>{errorMessage}</FormHelperText>
+    </FormControl>
+  );
+};
+
+export const SelectField = (props) => {
+  const { control } = useFormContext();
+  return (
+    <React.Fragment>
+      <Controller
+        control={control}
+        render={(field) => <MuiSelect {...props} {...field} />}
+        {...props}
+      />
+    </React.Fragment>
+  );
+};

package/src/ui/StyledAlert.js

@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const StyledAlert = (props) => {
+  const theme = useContext(ThemeProvider);
+
+  let alertStyle = {
+    backgroundColor: "green",
+    padding: 10,
+    marginTop: 10,
+    marginBottom: 10,
+    borderRadius: theme.borderRadius
+  };
+  switch (props.type) {
+    case "warning":
+      alertStyle.backgroundColor = "yellow";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    case "danger":
+      alertStyle.backgroundColor = "red";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    case "notification":
+      alertStyle.backgroundColor = "blue";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    default:
+      return <div style={alertStyle}>{props.text}</div>;
+  }
+};