@sikka/hawa 0.0.185 → 0.0.187

package/package.json

@@ -1,9 +1,27 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.185",
-  "description": "UI Kit",
+  "version": "0.0.187",
+  "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
+  "author": "Sikka Software <contact@sikka.io> (http://sikka.io)",
+  "license": "MIT",
+  "keywords": [
+    "ui",
+    "kit",
+    "saas",
+    "kit",
+    "hawa"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sikka-software/hawa.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sikka-software/hawa/issues",
+    "email": "hawa@sikka.io"
+  },
+  "homepage": "https://hawa.style",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "start-storybook -p 6006 -s public",
@@ -14,8 +32,6 @@
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"
   },
-  "author": "Sikka Software",
-  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -5,6 +5,7 @@ import { HawaContainer } from "../../layout"
 
 type ResetPasswordType = {
   handleResetPassword: () => void
+  handleRouteToSignUp: () => void
   sent: any
   texts: {
     emailLabel: string
@@ -13,6 +14,8 @@ type ResetPasswordType = {
     emailInvalidText: string
     emailSentText: string
     resetPassword: string
+    signUpText: string
+    dontHaveAccount: string
   }
 }
 
@@ -53,6 +56,15 @@ export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
               },
             }}
           />
+          <div className=" pb-2 text-left text-sm dark:text-gray-300">
+            {props.texts.dontHaveAccount ?? "Don't have an account? "}
+            <span
+              onClick={props.handleRouteToSignUp}
+              className="cursor-pointer text-blue-600 dark:text-blue-400"
+            >
+              {props.texts.signUpText ?? "Sign Up"}
+            </span>
+          </div>
           <HawaButton
             color="primary"
             width="full"

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -41,6 +41,7 @@ type SignUpFormTypes = {
     googleButtonLabel: string
     githubButtonLabel: string
     twitterButtonLabel: string
+    refCode: string
   }
   showUserSource: any
   viaGoogle: boolean
@@ -194,13 +195,13 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
             {props.showRefCode && (
               <Controller
                 control={control}
-                name="password"
+                name="refCode"
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
                     type="text"
                     defaultValue={field.value ?? ""}
-                    label={"Ref Code"}
+                    label={props.texts.refCode}
                     placeholder={props.texts.passwordPlaceholder}
                     helperText={errors.password?.message}
                     value={field.value ?? ""}
@@ -235,49 +236,45 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
               </div>
             )}
             {props.showTermsOption && (
-              <div>
-                <Controller
-                  control={control}
-                  name="terms_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="terms_accepted"
-                      helperText={errors.terms_accepted?.message}
-                      onChange={(e) => {
-                        console.log("changing ", e)
-                        field.onChange(e)
-                      }}
-                      label={
-                        <span>
-                          {props.texts.iAcceptText}{" "}
-                          <a
-                            onClick={props.handleRouteToTOS}
-                            className="cursor-pointer text-blue-800"
-                          >
-                            {props.texts.termsText}
-                          </a>
-                        </span>
-                      }
-                    />
-                  )}
-                  rules={{ required: props.texts.termsRequiredText }}
-                />
-              </div>
+              <Controller
+                control={control}
+                name="terms_accepted"
+                render={({ field }) => (
+                  <HawaCheckbox
+                    id="terms_accepted"
+                    helperText={errors.terms_accepted?.message}
+                    onChange={(e) => {
+                      console.log("changing ", e)
+                      field.onChange(e)
+                    }}
+                    label={
+                      <span>
+                        {props.texts.iAcceptText}{" "}
+                        <a
+                          onClick={props.handleRouteToTOS}
+                          className="cursor-pointer text-blue-800"
+                        >
+                          {props.texts.termsText}
+                        </a>
+                      </span>
+                    }
+                  />
+                )}
+                rules={{ required: props.texts.termsRequiredText }}
+              />
             )}
             {props.showNewsletterOption && (
-              <div className="py-2">
-                <Controller
-                  control={control}
-                  name="newsletter_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="newsletter_accepted"
-                      label={props.texts.subscribeToNewsletter}
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-              </div>
+              <Controller
+                control={control}
+                name="newsletter_accepted"
+                render={({ field }) => (
+                  <HawaCheckbox
+                    id="newsletter_accepted"
+                    label={props.texts.subscribeToNewsletter}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
             )}
             <HawaButton
               isLoading={props.isLoading}

package/src/elements/HawaCheckbox.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useEffect, useState } from "react"
 
 type TCheckBoxTypes = {
@@ -19,11 +20,11 @@ export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
   }, [val])
   return (
     <div
-      className={
+      className={clsx(
         props.centered
           ? "flex h-full items-center justify-center"
           : "flex h-full items-start "
-      }
+      )}
     >
       <input
         type="checkbox"

package/src/elements/HawaMenu.tsx

@@ -49,6 +49,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
         handleClose()
       }
     }
+    console.log("ref is", ref.current?.getBoundingClientRect())
     document.addEventListener("click", handleClickOutside, true)
     return () => {
       document.removeEventListener("click", handleClickOutside, true)
@@ -63,8 +64,8 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     "bottom-left": "bottom-12 left-0",
   }
   let animationStyles = {
-    opened: "max-h-fit",
-    closed: "h-0 ",
+    opened: "max-h-fit h-max visible opacity-100 block",
+    closed: "h-0 invisible opacity-0 hidden",
   }
   return (
     <div

package/src/elements/HawaPhoneInput.tsx

@@ -48,7 +48,7 @@ export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
           {props.label}
         </label>
       )}
-      <div className="flex flex-row">
+      <div dir="ltr" className="flex flex-row">
         <Select
           styles={{
             input: (base) => ({

package/src/elements/HawaSelect.tsx

@@ -18,7 +18,7 @@ const Option: React.FunctionComponent<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-blue-200"
+    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
     {...innerProps}
   >
     {children}

package/src/elements/HawaTabs.tsx

@@ -1,8 +1,6 @@
 import clsx from "clsx"
 import React, { useState } from "react"
 
-// TODO: add option to increase space between tabs and content
-// TODO: make the blued border rounded
 type TabsTypes = {
   options?: any
   onChangeTab?: any
@@ -11,10 +9,12 @@ type TabsTypes = {
   orientation?: "horizontal" | "vertical"
   direction?: "rtl" | "ltr"
   marginBetween?: any
+  width?: "full" | "normal"
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
+  width = "normal",
   marginBetween = 0,
   ...props
 }) => {
@@ -29,7 +29,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "inline-block py-2 px-4 rounded-none rounded-br-none rounded-tl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
     horizontal:
-      "inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+      "bg-gray-100 inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+  }
+  let widthStyles = {
+    full: "w-full min-w-full",
+    normal: "w-fit",
   }
   console.log("selected i : ", selectedOption)
   console.log("selected object : ", props.options[selectedOption])
@@ -51,7 +55,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500  text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -59,6 +63,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
+        // "bg-red-400"
       )}
     >
       <ul
@@ -78,7 +83,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
-            : "border-b-2"
+            : "border-b-2",
+          widthStyles[width]
         )}
       >
         {/* 

package/src/elements/HawaTextField.tsx

@@ -17,6 +17,7 @@ type TextFieldTypes = {
   inputProps?: any
   onChange?: any
   ref?: any
+  icon?: any
 }
 
 export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
@@ -36,6 +37,10 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   }
 
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
+  let defaultInputStyle =
+    "block w-full rounded border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+  // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+
   return (
     <div
       // ref={props.ref}
@@ -53,7 +58,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         <textarea
           id="message"
           rows={4}
-          className="block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          className={defaultInputStyle}
           onChange={props.onChange}
           type={props.type}
           aria-label={props.label}
@@ -62,32 +67,22 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           value={props.value}
           {...props}
         />
-      ) : props.type === "search" ? (
+      ) : (
         <div className="relative">
-          <div className="absolute top-1/2 left-3 -translate-y-1/2">
-            <FaSearch color="gray" />
-          </div>
           <input
             {...props}
-            className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-          />
-        </div>
-      ) : (
-        <div>
-          <input
-            onChange={props.onChange}
-            type={props.type}
-            aria-label={props.label}
-            placeholder={props.placeholder}
-            defaultValue={props.defaultValue}
-            value={props.value}
-            className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            className={clsx(defaultInputStyle, props.icon ? "pr-10" : "")}
           />
+          {props.icon && (
+            <div className="absolute top-1/2 right-3 -translate-y-1/2">
+              {props.icon}
+            </div>
+          )}
         </div>
       )}
 
       {props.helperText && (
-        <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">
+        <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
           {/* <span className="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>

package/src/layout/HawaAppLayout.tsx

@@ -5,8 +5,9 @@ import { HawaMenu } from "../elements"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { FaChevronRight } from "react-icons/fa"
-// TODO: add ability to control the width of the drawer
 // TODO: when no navbar, the drawer can't be opened
+// TODO: when no pagetitle, navbar gets messy
+// TODO: the user menu avatar clickable area is exceeding the topbar
 type HawaAppLayoutTypes = {
   drawerItems: {
     label: string
@@ -46,6 +47,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   const [openSideMenu, setOpenSideMenu] = useState(true)
   const [openSubItem, setOpenSubitem] = useState("")
   const { isOpen, onClose, onOpen } = useDiscloser(false)
+  const [keepOpen, setKeepOpen] = useState(true)
   const ref = useRef(null)
   const isRTL = direction === "rtl"
   let size
@@ -54,7 +56,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   } else {
     size = 1200
   }
-  const [keepOpen, setKeepOpen] = useState(false)
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
@@ -165,7 +166,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
               handleOpen={onOpen}
               open={isOpen}
             >
-              <div className="relative h-8 w-8 cursor-pointer overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
+              <div className="relative  h-8 w-8 cursor-pointer overflow-hidden rounded-full dark:bg-gray-600">
                 <svg
                   className="absolute -left-1 h-10 w-10 text-gray-400"
                   fill="currentColor"
@@ -338,12 +339,19 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                         onClick={() => {
                           dItem.subItems
                             ? openSubItem === dItem.slug
-                              ? setOpenSubitem("")
+                              ? // ||
+                                // dItem.subItems.find(
+                                //   (e) => e.slug === props.currentPage
+                                // )
+                                setOpenSubitem("")
                               : setOpenSubitem(dItem.slug)
                             : dItem.action()
                         }}
                         className={clsx(
-                          props.currentPage === dItem.slug
+                          props.currentPage === dItem.slug ||
+                            dItem.subItems?.find(
+                              (e) => e.slug === props.currentPage
+                            )
                             ? "bg-buttonPrimary-500 text-white"
                             : "hover:bg-layoutPrimary-300",
                           "m-2 my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
@@ -367,7 +375,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                           <div
                             className={clsx(
                               openSubItem && dItem.slug === openSubItem
-                                ? "-rotate-90"
+                                ? // ||
+                                  //   dItem.subItems.find(
+                                  //     (e) => e.slug === props.currentPage
+                                  //   )
+                                  "-rotate-90"
                                 : "rotate-90"
                             )}
                           >
@@ -382,6 +394,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                             "flex flex-col gap-0 whitespace-nowrap bg-layoutPrimary-300",
                             "m-1 cursor-pointer rounded p-1",
                             "overflow-clip transition-all",
+                            // dItem.subItems.find(
+                            //   (e) => e.slug === props.currentPage
+                            // ) ||
                             openSubItem == dItem.slug && openSideMenu
                               ? ""
                               : "my-0 py-0",
@@ -389,6 +404,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                           )}
                           style={{
                             height:
+                              // dItem.subItems.find(
+                              //   (e) => e.slug === props.currentPage
+                              // ) ||
                               openSubItem == dItem.slug && openSideMenu
                                 ? 6 + 33 * dItem.subItems?.length
                                 : 0,
@@ -397,11 +415,17 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                           {dItem.subItems?.map((subIt) => (
                             <div
                               className={clsx(
-                                "flex flex-row gap-2 overflow-x-clip  rounded p-2 px-4 text-xs hover:bg-layoutPrimary-500",
-                                isRTL ? "text-right" : "text-left"
+                                "flex flex-row gap-2 overflow-x-clip  rounded p-2 px-2 text-xs",
+                                isRTL ? "text-right" : "text-left",
+                                props.currentPage === subIt.slug
+                                  ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                                  : "hover:bg-layoutPrimary-500"
                               )}
                               dir={direction}
-                              onClick={() => subIt.action()}
+                              onClick={() => {
+                                subIt.action()
+                                // setOpenSubitem(dItem.slug)
+                              }}
                             >
                               <div className="flex items-center justify-center">
                                 {subIt.icon}

package/src/layout/HawaContainer.tsx

@@ -12,7 +12,7 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   maxWidth = "normal",
   variant = "contained",
   centered = false,
-  direction = "rtl",
+  direction = "ltr",
   ...props
 }) => {
   let defaultStyle = "flex w-full flex-col rounded p-4"

package/src/styles.css

@@ -385,7 +385,7 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 13px;
+    --border-radius: 0px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -608,8 +608,8 @@ video {
 .top-2 {
   top: 0.5rem;
 }
-.left-3 {
-  left: 0.75rem;
+.right-3 {
+  right: 0.75rem;
 }
 .-top-10 {
   top: -2.5rem;
@@ -851,6 +851,10 @@ video {
 .h-11 {
   height: 2.75rem;
 }
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
 .h-0 {
   height: 0px;
 }
@@ -961,6 +965,9 @@ video {
 .w-40 {
   width: 10rem;
 }
+.min-w-full {
+  min-width: 100%;
+}
 .min-w-min {
   min-width: -moz-min-content;
   min-width: min-content;
@@ -1611,12 +1618,15 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
-.pl-10 {
-  padding-left: 2.5rem;
+.pr-10 {
+  padding-right: 2.5rem;
 }
 .pl-3 {
   padding-left: 0.75rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }

package/src/tailwind.css

@@ -14,7 +14,7 @@
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 13px;
+    --border-radius: 0px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {