@sikka/hawa 0.0.83 → 0.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "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/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/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>;
 };