@sikka/hawa 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "UI Kit",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/rollup.config.js

@@ -9,21 +9,11 @@ export default [
   {
     input: "src/index.js",
     output: [
-      {
-        file: "dist/index.js",
-        format: "cjs"
-      },
-      {
-        file: "dist/index.es.js",
-        format: "es",
-        exports: "named"
-      }
+      { file: "dist/index.js", format: "cjs" },
+      { file: "dist/index.es.js", format: "es", exports: "named" }
     ],
     plugins: [
-      postcss({
-        plugins: [],
-        minimize: true
-      }),
+      postcss({ plugins: [], minimize: true }),
       babel({
         exclude: "node_modules/**",
         presets: [

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

@@ -3,11 +3,13 @@ import Button from "@material-ui/core/Button";
 import Tooltip from "@material-ui/core/Tooltip";
 import { motion } from "framer-motion";
 import { ThemeProvider } from "../HawaProvider";
+import { StyledTooltip } from "../StyledTooltip";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../util";
 
 const AdaptiveButton = (props) => {
-  const { showText, buttonColor, borderRadius, textColor } = props;
+  const { showText } = props;
   const theme = useContext(ThemeProvider);
-
   const screenSize = {
     width: 1500,
     height: 200
@@ -19,51 +21,35 @@ const AdaptiveButton = (props) => {
     return (
       <motion.div
         transition={{ duration: 0.2 }}
-        initial={{
-          // direction: "rtl",
-          backgroundColor: buttonColor,
-          color: textColor,
-          borderRadius: theme.borderRadius,
-          width: "fit-content"
-        }}
+        whileTap={{ scale: 1.2 }}
         whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: borderRadius
+          // backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius,
+          color: "red"
         }}
-        whileTap={{ scale: 1.2 }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
+        onMouseDown={() => setHovered(true)}
+        onMouseUp={() => setHovered(false)}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
       >
         <Button
-          disabled={props.disabled}
           disableRipple
+          disabled={props.disabled}
           aria-label={props.buttonLabel}
           color={props.danger ? "secondary" : "primary"}
           onClick={props.handleClick}
           style={{
-            borderRadius: borderRadius,
-            padding: 10,
-            color: hovered
-              ? "#ffffff"
-              : props.danger
-              ? "#f50057"
-              : "var(--blue)"
+            backgroundColor: theme.primaryColor,
+            borderRadius: theme.borderRadius,
+            padding: theme.paddings,
+            color: getTextColor(theme.primaryColor)
+            // color: hovered
+            //   ? "#ffffff"
+            //   : props.danger
+            //   ? "#f50057"
+            //   : "var(--blue)"
           }}
         >
           {props.icon}
@@ -78,18 +64,16 @@ const AdaptiveButton = (props) => {
   } else if (props.buttonLabelOnly) {
     return (
       <motion.div
-        transition={{
-          duration: 0.2
-        }}
+        transition={{ duration: 0.2 }}
         initial={{
           width: "fit-content",
           backgroundColor: props.buttonColor,
-          borderRadius: borderRadius
+          borderRadius: theme.borderRadius
         }}
         whileTap={{ scale: 1.2 }}
         whileHover={{
           backgroundColor: props.hoverColor,
-          borderRadius: borderRadius
+          borderRadius: theme.borderRadius
         }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
@@ -152,7 +136,6 @@ const AdaptiveButton = (props) => {
             color={props.danger ? "secondary" : "primary"}
             style={{
               padding: 10,
-
               color: hovered
                 ? "#ffffff"
                 : props.danger
@@ -173,14 +156,14 @@ const AdaptiveButton = (props) => {
         initial={{
           width: "fit-content",
           backgroundColor: props.buttonColor,
-          borderRadius: borderRadius,
+          borderRadius: theme.borderRadius,
           // padding: 5,
           margin: 5
         }}
         whileTap={{ scale: 1.2 }}
         whileHover={{
           backgroundColor: props.hoverColor,
-          borderRadius: borderRadius
+          borderRadius: theme.borderRadius
         }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
@@ -201,7 +184,27 @@ const AdaptiveButton = (props) => {
           // setTooltip(true);
         }}
       >
-        <Tooltip
+        <StyledTooltip hintTitle="Example" hintContent="More explaination here">
+          <Button
+            disabled={props.disabled}
+            size="small"
+            disableRipple
+            aria-label={props.buttonLabel}
+            onClick={props.handleClick}
+            color={props.danger ? "secondary" : "primary"}
+            style={{
+              padding: 10,
+              color: hovered
+                ? "#ffffff"
+                : props.danger
+                ? "#f50057"
+                : "var(--blue)"
+            }}
+          >
+            {props.icon}
+          </Button>
+        </StyledTooltip>
+        {/* <Tooltip
           placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
           enterTouchDelay={100}
           title={
@@ -234,28 +237,18 @@ const AdaptiveButton = (props) => {
             )
           }
         >
-          <Button
-            disabled={props.disabled}
-            size="small"
-            disableRipple
-            aria-label={props.buttonLabel}
-            onClick={props.handleClick}
-            color={props.danger ? "secondary" : "primary"}
-            style={{
-              padding: 10,
-              color: hovered
-                ? "#ffffff"
-                : props.danger
-                ? "#f50057"
-                : "var(--blue)"
-            }}
-          >
-            {props.icon}
-          </Button>
-        </Tooltip>
+
+        </Tooltip> */}
       </motion.div>
     );
   }
 };
 
+AdaptiveButton.propTypes = {
+  buttonLabel: PropTypes.string,
+  danger: PropTypes.bool,
+  disabled: PropTypes.bool,
+  showText: PropTypes.bool
+};
+
 export default AdaptiveButton;

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

@@ -1 +1 @@
-export * from "./AdaptiveButton.jsx";
+export * from "./AdaptiveButton.js";

package/src/components/Hawa/AuthForms/NewPasswordForm.js

@@ -0,0 +1,23 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../HawaProvider";
+import { StyledInputLabel } from "../InputLabel";
+import { StyledTextField } from "../TextField";
+export const NewPasswordForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        backgroundColor: theme.paperColors,
+        padding: theme.paddings,
+        borderRadius: theme.borderRadius,
+        margin: theme.margins
+      }}
+    >
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="password" />
+      <StyledInputLabel label="Confirm Password" />
+      <StyledTextField type="password" />
+      {props.children}
+    </div>
+  );
+};

package/src/components/Hawa/AuthForms/ResetPasswordForm.js

@@ -0,0 +1,21 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../HawaProvider";
+import { StyledInputLabel } from "../InputLabel";
+import { StyledTextField } from "../TextField";
+export const ResetPasswordForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        backgroundColor: theme.paperColors,
+        padding: theme.paddings,
+        borderRadius: theme.borderRadius,
+        margin: theme.margins
+      }}
+    >
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      {props.children}
+    </div>
+  );
+};

package/src/components/Hawa/AuthForms/SignInForm.js

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../HawaProvider";
+import { StyledInputLabel } from "../InputLabel";
+import { StyledTextField } from "../TextField";
+
+export const SignInForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        backgroundColor: theme.paperColors,
+        padding: theme.paddings,
+        borderRadius: theme.borderRadius,
+        margin: theme.margins
+      }}
+    >
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="text" />
+
+      {props.children}
+    </div>
+  );
+};

package/src/components/Hawa/AuthForms/SignUpForm.js

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../HawaProvider";
+import { StyledInputLabel } from "../InputLabel";
+import { StyledTextField } from "../TextField";
+
+export const SignUpForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        backgroundColor: theme.paperColors,
+        padding: theme.paddings,
+        borderRadius: theme.borderRadius,
+        margin: theme.margins
+      }}
+    >
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Confirm Password" />
+      <StyledTextField type="text" />
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from "./NewPasswordForm.js";
+export * from "./ResetPasswordForm.js";
+export * from "./SignUpForm.js";
+export * from "./SignInForm.js";

package/src/components/Hawa/AutoCompleteField/AutoCompleteField.jsx

@@ -1,10 +1,10 @@
-import React from "react"
-import { Controller, useFormContext } from "react-hook-form"
+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
+  const { control } = useFormContext();
+  const { name, rules, shouldUnregister } = props;
 
   return (
     <React.Fragment>
@@ -25,9 +25,9 @@ export const AutoCompleteField = (props) => {
             //   {...props}
             //   className={"theme_form_input"}
             // />
-          )
+          );
         }}
       />
     </React.Fragment>
-  )
-}
+  );
+};

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

@@ -1 +1 @@
-export * from "./AutoCompleteField.jsx"
+export * from "./AutoCompleteField.jsx";

package/src/components/Hawa/Box/Box.js

@@ -0,0 +1,18 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../HawaProvider";
+
+export const Box = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        backgroundColor: theme.paperColors,
+        padding: theme.paddings,
+        borderRadius: theme.borderRadius,
+        margin: theme.margins
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

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

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

package/src/components/Hawa/Checkbox/Checkbox.jsx

@@ -1,10 +1,10 @@
-import React from "react"
-import FormControlLabel from "@material-ui/core/FormControlLabel"
-import Checkbox from "@material-ui/core/Checkbox"
-import PropTypes from "prop-types"
+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)
+  console.log("props : ", props);
   return (
     <React.Fragment>
       <FormControlLabel
@@ -16,5 +16,5 @@ export const StyledCheckbox = (props) => {
         }
       />
     </React.Fragment>
-  )
-}
+  );
+};

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import axios from "axios";
+// import axios from "axios";
 import { getToken } from "../token";
 import { useDropzone } from "react-dropzone";
 import useTranslation from "next-translate/useTranslation";
@@ -52,18 +52,18 @@ const DragDropItemImage = ({
         }
       ]);
       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
-          }
-        );
+        // 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);

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

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

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

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

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

@@ -0,0 +1,15 @@
+import InputLabel from "@material-ui/core/InputLabel";
+
+export const StyledInputLabel = (props) => {
+  return (
+    <InputLabel
+      style={{
+        margin: 15,
+        marginRight: 0,
+        marginLeft: 0
+      }}
+    >
+      <div style={{ fontSize: 15, color: "black" }}>{props.label}</div>
+    </InputLabel>
+  );
+};

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

@@ -1 +1 @@
-export * from "./StyledInputLabel.jsx"
+export * from "./StyledInputLabel.js";

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

@@ -26,4 +26,4 @@ export const StyledRadioBox = (props) => {
       />
     </React.Fragment>
   );
-}
+};

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

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

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

@@ -16,19 +16,19 @@ export const StyledRadioSelector = (props) => {
         marginBottom: 10
       }}
     >
-      {props.options.map((o) => {
+      {props.options.map((singleOption) => {
         return (
           <div
-            key={o.label}
+            key={singleOption.label}
             className="radio_option"
             onClick={() => {
-              setValue(o.label);
+              setValue(singleOption.label);
               if (props.handleChange) {
                 props.handleChange();
               }
             }}
             style={
-              value.toLowerCase() === o.label.toLowerCase()
+              value.toLowerCase() === singleOption.label.toLowerCase()
                 ? {
                     borderRadius: theme.borderRadius,
                     padding: theme.paddings,
@@ -42,7 +42,7 @@ export const StyledRadioSelector = (props) => {
                   }
             }
           >
-            {o.text}
+            {singleOption.text}
           </div>
         );
       })}

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

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

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

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

@@ -43,4 +43,4 @@ export const SelectField = (props) => {
       />
     </React.Fragment>
   );
-}
+};

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

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

package/src/components/Hawa/StyledAlert/StyledAlert.js

@@ -0,0 +1,15 @@
+// import * as Alert from "@material-ui/lab/Alert";
+// import styles from "../styles/Theme.module.css";
+
+export const StyledAlert = (props) => {
+  return (
+    <div>{props.text}</div>
+    // <Alert
+    //   {...props}
+    //   // className={styles.styled_alert}
+    //   // style={{ borderRadius: "var(--borderR)" }}
+    // >
+    //   {props.children}
+    // </Alert>
+  );
+};

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

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