@sikka/hawa 0.0.84 → 0.0.86

package/package.json

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

package/src/blocks/AuthForms/AppLanding.js

@@ -1,22 +1,9 @@
 import React from "react";
-import {
-  HawaTextField,
-  HawaLogoButton,
-  HawaAlert,
-  HawaButton
-} from "../../elements";
-import { Controller, useForm } from "react-hook-form";
+import { HawaButton } from "../../elements";
 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"} />
@@ -26,37 +13,9 @@ export const AppLanding = (props) => {
   );
 };
 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
+    signIn: PropTypes.string,
+    signUp: PropTypes.string,
+    language: PropTypes.string
+  })
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -155,9 +155,9 @@ export const SignUpForm = (props) => {
                   isSearchable={false}
                   isClearable={false ?? false}
                   options={[
-                    { value: "chocolate", label: "Chocolate" },
-                    { value: "strawberry", label: "Strawberry" },
-                    { value: "vanilla", label: "Vanilla" }
+                    { value: "friend", label: "From a friend" },
+                    { value: "ad", label: "Advertisement" },
+                    { value: "other", label: "Other" }
                   ]}
                   onChange={(e, o) => console.log("chooo", e)}
                   onInputChange={(e, o) => console.log("changing", e)}

package/src/blocks/AuthForms/index.js

@@ -4,3 +4,4 @@ export * from "./SignUpForm.js";
 export * from "./SignInForm.js";
 export * from "./CodeConfirmation.js";
 export * from "./SignInPhone";
+export * from "./AppLanding";

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/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/styles.css

@@ -565,6 +565,9 @@ video {
 .collapse {
   visibility: collapse;
 }
+.\!collapse {
+  visibility: collapse !important;
+}
 .fixed {
   position: fixed;
 }