@sikka/hawa 0.0.83 → 0.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/AppLanding.js

@@ -0,0 +1,62 @@
+import React from "react";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
+import { Controller, useForm } from "react-hook-form";
+import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout/HawaContainer";
+
+export const AppLanding = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    control
+  } = methods;
+
+  return (
+    <HawaContainer>
+      <HawaButton fullWidth text={"Sign In"} />
+      <HawaButton fullWidth text={"Sign Up"} />
+      <HawaButton fullWidth text={"عربي"} />
+    </HawaContainer>
+  );
+};
+AppLanding.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    usernameLabel: PropTypes.string,
+    usernamePlaceholder: PropTypes.string,
+    usernameRequired: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
+  viaGoogle: PropTypes.bool,
+  viaGithub: PropTypes.bool,
+  viaTwitter: PropTypes.bool,
+  handleSignIn: PropTypes.func,
+  handleRouteToSignUp: PropTypes.func,
+  handleGoogleSignIn: PropTypes.func,
+  handleGithubSignIn: PropTypes.func,
+  handleTwitterSignIn: PropTypes.func,
+  handleForgotPassword: PropTypes.func,
+
+  withoutSignUp: PropTypes.bool
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -90,7 +90,7 @@ export const SignInForm = (props) => {
         />
         {!props.withoutResetPassword && (
           <div
-            className="text-xs cursor-pointer w-fit mb-3"
+            className="dark:text-gray-300 text-xs cursor-pointer w-fit mb-3"
             onClick={props.handleForgotPassword}
           >
             {props.texts.forgotPasswordText}
@@ -98,11 +98,11 @@ export const SignInForm = (props) => {
         )}
         <HawaButton fullWidth type="submit" text={props.texts.signInText} />{" "}
         {!props.withoutSignUp && (
-          <div className="font-semibold p-3 text-center text-sm">
+          <div className="dark:text-gray-300 font-semibold p-3 text-center text-sm">
             {props.texts.newUserText}{" "}
             <span
               onClick={props.handleRouteToSignUp}
-              className="text-blue-600 cursor-pointer"
+              className="dark:text-blue-400 text-blue-600 cursor-pointer"
             >
               {props.texts.signUpText}
             </span>

package/src/elements/HawaAccordian.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const AccordionItem = (props) => {
+  const [collapse, setCollapse] = React.useState(false);
   let noRounding =
     "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
   let roundedTop =
@@ -23,6 +24,7 @@ const AccordionItem = (props) => {
             // ? roundedBottom
             // : noRounding
           }
+          onClick={() => setCollapse(!collapse)}
           data-accordion-target={"#accordion-collapse-body-" + props.count}
           aria-expanded="true"
           aria-controls={"accordion-collapse-body-" + props.count}
@@ -30,7 +32,7 @@ const AccordionItem = (props) => {
           <span>What is Flowbite?</span>
           <svg
             data-accordion-icon=""
-            className="w-6 h-6 rotate-180 shrink-0"
+            className={`w-6 h-6 ${collapse ? "" : "rotate-180"}  shrink-0`}
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -45,7 +47,7 @@ const AccordionItem = (props) => {
       </h2>
       <div
         id={"accordion-collapse-body-" + props.count}
-        className=""
+        className={`${collapse ? "hidden" : "block"}`}
         aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
         <div className={props.count === -1 ? accPaperRounded : accPaper}>

package/src/elements/HawaButton.js

@@ -19,7 +19,7 @@ export const HawaButton = ({
   } m-1 px-2.5 py-2.5 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300       font-medium rounded-lg        text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
   if (props.fullWidth) {
     styles =
-      "my-1 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+      "my-1 w-full flex justify-center text-white bg-primary-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
   }
   if (iconOnly) {
     iconStyle = "flex flex-col justify-center items-center";

package/src/elements/HawaMenu.js

@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+
+export const HawaMenu = ({
+  popMenuID,
+  menuItems,
+  withHeader,
+  withIcons,
+  headerTitle,
+  headerSubtitle
+}) => {
+  return (
+    <div
+      id={popMenuID}
+      className="z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700"
+    >
+      {withHeader && (
+        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+          <div>{headerTitle}</div>
+          <div class="font-medium truncate">{headerSubtitle}</div>
+        </div>
+      )}
+      {menuItems.map((group) => {
+        return (
+          <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+            {group.map((item) => {
+              return (
+                <li
+                  onClick={item.action}
+                  className={
+                    item.button
+                      ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
+                      : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  }
+                >
+                  {withIcons && (
+                    <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                  )}
+                  {item.label}
+                </li>
+              );
+            })}
+          </ul>
+        );
+      })}
+    </div>
+  );
+};
+
+HawaMenu.propTypes = {
+  anchor: PropTypes.any,
+  handleClose: PropTypes.func,
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
+};

package/src/elements/HawaModal.js

@@ -1,23 +1,48 @@
-import React from "react";
+import React, { useEffect } from "react";
 
-export const HawaModal = (props) => {
+export const HawaModal = ({
+  open,
+  title,
+  onClose,
+  closeOnClickOutside,
+  ...props
+}) => {
+  console.log("open : ", open);
+
+  useEffect(() => {
+    if (closeOnClickOutside) {
+      window.onclick = () => {
+        console.log("open : ", open);
+        if (open) {
+          console.log("Im clicing");
+          onClose();
+        }
+      };
+    }
+    return () => (window.onClick = null);
+  }, [open]);
   return (
     <div
       id={props.modalID}
       tabindex="-1"
       aria-hidden="true"
-      className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
+      className={`${
+        open ? "block" : "hidden"
+      } overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center`}
     >
       <div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
         <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
           <div className="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-              Terms of Service
+              {title}
             </h3>
             <button
               type="button"
               className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
               data-modal-toggle="defaultModal"
+              onClick={() => {
+                onClose();
+              }}
             >
               <svg
                 aria-hidden="true"
@@ -70,3 +95,29 @@ export const HawaModal = (props) => {
     </div>
   );
 };
+
+export const ModalContent = ({ children, ...props }) => {
+  return <div className="p-6 space-y-6">{children}</div>;
+};
+
+export const ModalFooter = ({ children, ...props }) => {
+  return (
+    <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+      {/* <button
+        data-modal-toggle="defaultModal"
+        type="button"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
+        I accept
+      </button>
+      <button
+        data-modal-toggle="defaultModal"
+        type="button"
+        className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+      >
+        Decline
+      </button> */}
+      {children}
+    </div>
+  );
+};

package/src/elements/HawaRange.js

@@ -1,27 +1,39 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const HawaRange = (props) => {
+export const HawaRange = ({
+  value,
+  handleChange,
+  startElement,
+  endElement,
+  label,
+  ...props
+}) => {
+  const [rangeValue, setRangeValue] = React.useState(value);
+
   return (
-    <div>
-      {props.label && (
+    <div {...props}>
+      {label && (
         <label
           htmlFor="default-range"
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         >
-          {props.label}
+          {label}
         </label>
       )}
       <div className="flex flex-row justify-center items-center w-fit">
-        <div className="mr-2">{props.startElement}</div>{" "}
+        <div className="mr-2">{startElement}</div>{" "}
         <input
           id="default-range"
           type="range"
-          value={props.value}
-          onChange={props.handleChange}
+          value={rangeValue}
+          onChange={(e) => {
+            setRangeValue(e.target.value);
+            handleChange(e);
+          }}
           className="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
         />
-        <div className="ml-2">{props.endElement}</div>{" "}
+        <div className="ml-2">{endElement}</div>{" "}
       </div>
     </div>
   );
@@ -32,9 +44,11 @@ HawaRange.propTypes = {
    * Can be an icon
    */
   startElement: PropTypes.element,
+  value: PropTypes.number,
   /**
    * The element at the side where the range value is 100
    */
   endElement: PropTypes.element,
-  handleChange: PropTypes.func
+  handleChange: PropTypes.func,
+  label : PropTypes.string
 };

package/src/elements/HawaSnackbar.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 export const HawaSnackbar = (props) => {
+  
   let severities = {
     info: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-blue-700 bg-blue-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
     warning:

package/src/elements/index.js

@@ -24,3 +24,4 @@ export * from "./HawaDrawerItem";
 export * from "./HawaTooltip";
 export * from "./HawaTabs";
 export * from "./HawaModal";
+export * from "./HawaMenu";

package/src/layout/HawaContainer.js

@@ -1,12 +1,8 @@
 import React from "react";
 
 export const HawaContainer = (props) => {
-  let containerStyle = "";
-  if (props.withDividers) {
-    containerStyle =
-      "w-full max-w-sm flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4";
-  } else {
-    containerStyle = "w-full max-w-sm flex flex-col bg-blue-300 rounded-xl p-4";
-  }
+  let containerStyle =
+    "w-full max-w-sm flex flex-col bg-primary-300 dark:bg-gray-600 rounded-xl p-4";
+
   return <div className={containerStyle}>{props.children}</div>;
 };