@sikka/hawa 0.0.1

package/src/components/Hawa/DragDropImages/DragDropImages.jsx

@@ -0,0 +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;

package/src/components/Hawa/DragDropImages/index.js

@@ -0,0 +1 @@
+export * from "./Checkbox.jsx";

package/src/components/Hawa/Hawa.jsx

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

package/src/components/Hawa/HawaProvider/HawaProvider.js

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+
+const defaultValue = {
+  borderRadius: "10px",
+  primaryColor: "blue",
+  secondaryColor: "grey",
+  margins: "10px",
+  paddings: "5px"
+};
+
+export const ThemeProvider = createContext(defaultValue);
+
+export const HawaProvider = ({theme, ...props}) => {
+  return (
+    <ThemeProvider.Provider value={theme || defaultValue}>
+      {props.children}
+    </ThemeProvider.Provider>
+  );
+};

package/src/components/Hawa/HawaProvider/index.js

@@ -0,0 +1 @@
+export * from "./HawaProvider.js";

package/src/components/Hawa/InputLabel/StyledInputLabel.jsx

@@ -0,0 +1,36 @@
+import InputLabel from "@material-ui/core/InputLabel";
+
+export const  StyledInputLabel = (props) => {
+  return (
+    <InputLabel
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "space-between",
+        alignItems: "center",
+        margin: 15,
+        marginRight: 0,
+        marginLeft: 0
+      }}
+    >
+      <div style={{ fontSize: 15, color: "black" }}>{props.label}</div>
+
+      {props.multiLang ? (
+        <div
+          style={{
+            backgroundColor: "var(--light)",
+            fontSize: 10,
+            padding: 10,
+            borderRadius: "var(--borderR)",
+            width: "auto"
+          }}
+        >
+          <span style={{ padding: 5 }}>EN</span>
+          <span style={{ padding: 5 }}>AR</span>
+        </div>
+      ) : null}
+    </InputLabel>
+  );
+};
+

package/src/components/Hawa/InputLabel/index.js

@@ -0,0 +1 @@
+export * from "./StyledInputLabel.jsx"

package/src/components/Hawa/RadioBox/RadioBox.jsx

@@ -0,0 +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>
+  );
+}

package/src/components/Hawa/RadioBox/index.js

@@ -0,0 +1 @@
+export * from "./RadioBox.jsx"

package/src/components/Hawa/RadioSelector/RadioSelector.jsx

@@ -0,0 +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>
+  );
+};

package/src/components/Hawa/RadioSelector/index.js

@@ -0,0 +1 @@
+export * from "./RadioSelector.jsx"

package/src/components/Hawa/Row/Row.jsx

@@ -0,0 +1,23 @@
+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/Row/index.js

@@ -0,0 +1 @@
+export * from "./Row.jsx";

package/src/components/Hawa/SelectedField/SelectedField.jsx

@@ -0,0 +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>
+  );
+}

package/src/components/Hawa/SelectedField/index.js

@@ -0,0 +1 @@
+export * from "./SelectedField.jsx"

package/src/components/Hawa/TabPanel/TabPanel.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  panelsContainer: {
+    height: "100%",
+    width: "100%"
+  },
+  panel: {
+    backgroundColor: "var(--lightGrey)",
+    borderRadius: "var(--borderR)",
+    height: "100%",
+    width: "100%",
+    padding: 10
+  }
+}));
+
+export const TabPanel = (props) => {
+  const classes = useStyles();
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      className={classes.panelsContainer}
+      hidden={value !== index}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <div className={classes.panel}>
+          <span>{children}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/Hawa/TabPanel/index.js

@@ -0,0 +1 @@
+export * from "./TabPanel.jsx";

package/src/components/Hawa/TextArea/TextArea.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import {StyledInputLabel} from "../InputLabel";
+
+export const StyledTextArea = (props) => {
+  const { control } = useFormContext();
+  const { name, rules, shouldUnregister, inputLabel, helperText } = props;
+
+  return (
+    <Controller
+      render={({ field }) => (
+        <label>
+          {inputLabel ? <StyledInputLabel label={inputLabel} /> : null}
+          <textarea
+            style={{
+              color : "black",
+              backgroundColor : props.bgColor || "white",
+              borderRadius : props.bdRadius || 10,
+              borderBottom : "none",
+              border : "none",
+              width : "100%",
+              padding : 0,
+              margin : 0,
+              marginBottom : 0,
+              resize : props.resize || "vertical"
+            }}
+            value={field.value ?? ""}
+            {...field}
+          />
+        </label>
+      )}
+      name={name}
+      rules={rules}
+      control={control}
+      shouldUnregister={shouldUnregister}
+    />
+  );
+};
+

package/src/components/Hawa/TextArea/index.js

@@ -0,0 +1 @@
+export * from "./TextArea.jsx";

package/src/components/Hawa/TextField/TextField.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+import TextField from "@material-ui/core/TextField"
+import { StyledInputLabel } from "../InputLabel"
+
+export const StyledTextField = (props) => {
+  return (
+    <div>
+      {props.inputLabel ? <StyledInputLabel label={props.inputLabel} /> : null}
+      <TextField
+        fullWidth={true}
+        style={{
+          color: "white",
+          backgroundColor: props.bgColor || "white",
+          borderRadius: props.bdRadius || 10,
+          borderBottom: "none",
+          padding : props.padding || 5,
+          border: "none",
+          width: "100%",
+        }}
+        helperText={props.helperText}
+        type={props.type ? props.type : "text"}
+        placeholder={props.placeholder}
+        inputProps={
+          props.type === "number"
+            ? {
+                inputMode: "numeric",
+                min: "0",
+                max: "9999999",
+                step: "0.01",
+              }
+            : {}
+        }
+        InputProps={{
+          disableUnderline: true,
+          onWheelCapture: (e) => e.target.blur(),
+        }}
+        value={props.value ? props.value : null}
+      />
+    </div>
+  )
+}

package/src/components/Hawa/TextField/index.js

@@ -0,0 +1 @@
+export * from "./TextField.jsx";

package/src/components/Hawa/index.js

@@ -0,0 +1,11 @@
+export * from "./AdaptiveButton";
+export * from "./Checkbox";
+export * from "./InputLabel";
+export * from "./RadioBox";
+export * from "./RadioSelector";
+export * from "./Row";
+export * from "./SelectedField";
+export * from "./TabPanel";
+export * from "./TextArea";
+export * from "./TextField";
+ 

package/src/index.js

@@ -0,0 +1 @@
+export * from "./components/Hawa";

package/src/stories/AdaptiveButton.stories.js

@@ -0,0 +1,84 @@
+import React from "react";
+import AdaptiveButton from "../components/Hawa/AdaptiveButton/AdaptiveButton";
+import CastIcon from "@material-ui/icons/Cast";
+import { HawaProvider } from "../components/Hawa/HawaProvider";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 20,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paddings: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <AdaptiveButton {...args} />{" "}
+    </HawaProvider>
+  );
+};
+export default {
+  title: "Components/AdaptiveButton",
+  component: AdaptiveButton,
+  argsTypes: {
+    buttonLabel: { control: "text" },
+    borderRadius: { control: "number" },
+    buttonColor: { control: "color" },
+    padding: { control: "number" },
+    hintTitle: { control: "text" },
+    hintContent: { control: "text" }
+  },
+  args: {
+    // type: "text",
+    // buttonLabel: "Test"
+    // borderRadius: 15,
+    hintTitle: "test",
+    hintContent: "more test",
+    buttonColor: "#f9f9f9"
+  }
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  icon: <CastIcon />,
+  textColor: "#000000",
+
+  buttonColor: "#f9f9f9"
+
+  // placeholder: "Example ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#878787",
+  textColor: "#ffffff",
+  icon: <CastIcon />
+
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#c0c0c0",
+  danger: true,
+  icon: <CastIcon />
+
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};

package/src/stories/CheckBox.stories.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { StyledCheckbox } from "../components/Hawa/Checkbox/Checkbox";
+import "../styles.css";
+
+const Template = (args) => {
+  return <StyledCheckbox {...args} />;
+};
+
+export default {
+  title: "Components/Checkbox",
+  component: Light,
+  argsTypes: {
+    defaultValue: {
+      options: [true, false],
+      control: { type: "radio" }
+    }
+  },
+  args: {
+    defaultValue: true
+  }
+};
+
+export const Light = Template.bind({});
+export const Dark = Template.bind({});
+
+Light.args = {
+  color: "gray",
+  defaultValue: false
+};
+Dark.args = {
+  color: "gray",
+  defaultValue: false
+};