@sikka/hawa 0.0.205 → 0.0.206

package/package.json

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

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -31,7 +31,6 @@ export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (
   } = methods
 
   const handleSubmission = (e: any) => {
-    console.log("handling subb", e)
     if (e.password === e.confirmPassword) {
       props.handleNewPassword()
     } else {

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -40,16 +40,8 @@ export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
             <HawaPhoneInput
               country={props.country ?? ""}
               label={props.label ?? ""}
-              handleChange={(e: any) => {
-                console.log("test")
-                setUserPhone(e.target.value)
-              }}
+              handleChange={(e: any) => setUserPhone(e.target.value)}
               {...field}
-              // handleChange={(e: any) => {
-              //   // props.handlePhoneChange(e.target.value)
-              //   setUserPhone(e.target.value)
-              // }}
-              // value={props.value ?? props.value}
             />
           )}
           rules={{
@@ -57,11 +49,7 @@ export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
           }}
         />
         <div className="mt-2"></div>
-        <HawaButton
-          color="primary"
-          width="full"
-          // type="submit"
-        >
+        <HawaButton color="primary" width="full">
           {props.SignInButtonText}
         </HawaButton>
       </form>

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -243,10 +243,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                   <HawaCheckbox
                     id="terms_accepted"
                     helperText={errors.terms_accepted?.message}
-                    onChange={(e) => {
-                      console.log("changing ", e)
-                      field.onChange(e)
-                    }}
+                    onChange={(e) => field.onChange(e)}
                     label={
                       <span>
                         {props.texts.iAcceptText}{" "}
@@ -280,7 +277,6 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
               isLoading={props.isLoading}
               color="primary"
               width="full"
-              // type="submit"
             >
               {props.texts.signUpText}
             </HawaButton>

package/src/elements/Breadcrumb.tsx

@@ -22,7 +22,11 @@ const Breadcrumb: FC<TBreadcrumb> = ({
         <div className="flex flex-row items-center justify-center gap-2">
           <a
             href={singleBreadcrumbLink.href}
-            className="hover:underline hover:decoration-2"
+            className={
+              index + 1 === breadcrumbLink.length
+                ? "pointer-events-none"
+                : "underline-offset-4 transition-all hover:text-buttonPrimary-500 hover:underline hover:decoration-2"
+            }
           >
             {singleBreadcrumbLink.label}
           </a>

package/src/elements/HawaButton.tsx

@@ -23,46 +23,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | "top-left"
     | "bottom-right"
     | "bottom-left"
+  startIcon?: any
+  endIcon?: any
   isLoading?: boolean
-}
-
-const baseStyles = "cursor-pointer font-medium rounded h-full  transition-all"
-
-const sizeStyles = {
-  xs: "px-1 py-1",
-  small: "text-xs px-2.5 py-1.5",
-  medium: "text-sm leading-4 px-3 py-2",
-  large: "text-sm px-4 py-2",
-  noPadding: "p-0",
-  full: "h-full max-h-full p-2",
-}
-
-const widthStyles = {
-  full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
-  normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
-  half: "w-1/2",
-}
-const variantStyles = {
-  contained: "border-transparent",
-  outlined: "bg-transparent border",
-}
-
-const colorStyles = {
-  contained: {
-    default:
-      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
-    primary:
-      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
-    secondary:
-      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
-  },
-  outlined: {
-    default: "text-gray-600 border-gray-600 hover:bg-gray-200",
-    primary: "text-black hover:bg-gray-50",
-    secondary:
-      "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
-  },
+  badge?: any
 }
 
 const disabledSyles = "cursor-default pointer-events-none"
@@ -71,7 +35,7 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 
-export function HawaButton({
+export const HawaButton: React.FunctionComponent<ButtonProps> = ({
   className,
   variant = "contained",
   color = "default",
@@ -86,11 +50,60 @@ export function HawaButton({
   margins = "2",
   children,
   buttonID,
+  badge,
   ...props
-}: ButtonProps) {
+}) => {
+  const baseStyles = "cursor-pointer font-medium rounded h-full  transition-all"
+
+  const sizeStyles = {
+    xs: "px-1 py-1",
+    small: "text-xs px-2.5 py-1.5",
+    medium: "text-sm leading-4 px-3 py-2",
+    large: "text-sm px-4 py-2",
+    noPadding: "p-0",
+    full: "h-full max-h-full p-2",
+  }
+
+  const widthStyles = {
+    full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
+    half: "w-full text-center flex items-center justify-center h-full",
+    normal:
+      "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
+  }
+  const containerWidthStyles = {
+    full: "w-full flex justify-center text-center inline-flex items-center",
+    half: "w-1/2",
+    normal: "w-fit",
+  }
+  const variantStyles = {
+    contained: "border-transparent",
+    outlined: "bg-transparent border",
+  }
+
+  const colorStyles = {
+    contained: {
+      default:
+        "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
+      primary:
+        "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
+      secondary:
+        "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
+    },
+    outlined: {
+      default: "text-gray-600 border-gray-600 hover:bg-gray-200",
+      primary: "text-black hover:bg-gray-50",
+      secondary:
+        "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
+    },
+  }
+
   return (
     <div
-      className={clsx("relative", margins !== "none" ? `my-${margins}` : "m-0")}
+      className={clsx(
+        "relative",
+        margins !== "none" ? `my-${margins}` : "m-0",
+        containerWidthStyles[width]
+      )}
     >
       {tooltip ? (
         <HawaTooltip
@@ -153,11 +166,23 @@ export function HawaButton({
           }
           disabled={disabled}
           onClick={props.onClick}
-          // {...props}
         >
-          {!isLoading ? children : <HawaSpinner size="button" />}
+          {!isLoading ? (
+            <div className="flex flex-row items-center gap-2 whitespace-nowrap">
+              {props.startIcon && props.startIcon}
+              {children}
+              {props.endIcon && props.endIcon}
+            </div>
+          ) : (
+            <HawaSpinner size="button" />
+          )}
         </button>
       )}
+      {badge && (
+        <div className="absolute -top-3 -right-3 inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-red-500 text-xs font-bold text-white dark:border-gray-900">
+          {badge}
+        </div>
+      )}
     </div>
   )
 }

package/src/elements/HawaChip.tsx

@@ -5,21 +5,48 @@ type TChipTypes = {
   label: string
   size?: "small" | "normal" | "large"
   icon?: JSX.Element
+  color?: string
+  dot?: boolean
+  dotType?: "available" | "unavailable"
 }
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({
   size = "normal",
   label,
   icon,
+  color,
+  dot,
+  dotType = "available",
 }) => {
   let defaultStyles =
-    "flex flex-row w-fit gap-1 items-center rounded bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+    "flex flex-row w-fit gap-1 items-center rounded  px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
   let sizeStyles = {
-    small: "h-fit text-xs",
-    normal: "h-full leading-4 px-3 py-2 text-xs ",
+    small: "h-full leading-4 px-1 py-0 text-[9px] gap-0.5 ",
+    normal: "h-fit text-xs",
     large: "",
   }
+
+  let dotStyles = {
+    small: "flex h-1 w-1 rounded-full",
+    normal: "flex h-2 w-2 rounded-full",
+    large: "flex h-3 w-3 rounded-full",
+  }
+  let dotTypeStyles = {
+    available: "bg-green-500",
+    unavailable: "bg-red-500",
+  }
   return (
-    <span className={clsx(defaultStyles, sizeStyles[size])}>
+    <span
+      className={clsx(
+        defaultStyles,
+        sizeStyles[size],
+        color ? `bg-${color}-100 text-${color}-500` : "bg-layoutPrimary-500"
+        // `bg-[${color}]`
+        // `bg-[#c92424]`
+      )}
+    >
+      {dot && (
+        <span className={clsx(dotStyles[size], dotTypeStyles[dotType])}></span>
+      )}
       {icon && icon}
       {label}
     </span>

package/src/elements/HawaDrawer.tsx

@@ -68,10 +68,7 @@ const DrawerHeader: FC<TDrawerHeader> = (props) => {
       {props.children}
       <div
         className="justify-self-end rounded border p-1 hover:cursor-pointer"
-        onClick={() => {
-          console.log("running")
-          props.setOpen(false)
-        }}
+        onClick={() => props.setOpen(false)}
       >
         {props.direction == "left" ? (
           <FaChevronLeft size={20} strokeWidth={2} />

package/src/elements/HawaItemCard.tsx

@@ -64,7 +64,6 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
 
   useEffect((): any => {
     window.onclick = () => {
-      console.log("clicking, state = ", openActionHeader)
       if (openActionHeader) {
         setOpenActionHeader(false)
       }

package/src/elements/HawaMenu.tsx

@@ -69,7 +69,6 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
         setMenuOpened(false)
       }
     }
-    console.log("ref is", menuRef.current?.getBoundingClientRect())
     document.addEventListener("click", handleClickOutside, true)
     return () => {
       document.removeEventListener("click", handleClickOutside, true)
@@ -88,7 +87,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     closed: "h-0 invisible opacity-0 hidden",
   }
   let sizeStyles = {
-    small: "text-[11px] p-1 m-0",
+    small: "text-[11px] p-1 px-4 m-0",
     normal: "py-2 px-4",
     large: "",
   }

package/src/elements/HawaModal.tsx

@@ -23,8 +23,6 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
     if (closeOnClickOutside && open) {
       window.onclick = (e) => {
         e.stopPropagation()
-        console.log("open : ", open)
-        console.log("Im clicing")
         onClose()
       }
     }

package/src/elements/HawaPhoneInput.tsx

@@ -91,10 +91,7 @@ export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
           placeholder="+966"
           defaultValue={props.preferredCountry}
           value={selectedCountry}
-          onChange={(newValue, action) => {
-            console.log("test n", newValue)
-            setSelectedCountry(newValue)
-          }}
+          onChange={(newValue, action) => setSelectedCountry(newValue)}
         />
         <input
           onChange={props.handleChange}

package/src/elements/HawaSelect.tsx

@@ -175,14 +175,10 @@ export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
           isMulti={props.isMulti}
           isSearchable={props.isSearchable}
           onCreateOption={() => console.log("im changing")}
-          onChange={(newValue, action) => {
-            console.log("this is onChange", newValue)
-            props.onChange(newValue, action)
-          }}
-          onInputChange={(newValue, action) => {
-            console.log("onInputChange====", newValue)
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+          onInputChange={(newValue, action) =>
             props.onInputChange(newValue, action)
-          }}
+          }
         />
       )}
       {props.helperText && (

package/src/elements/HawaStepper.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+import clsx from "clsx"
+import { FaCheck } from "react-icons/fa"
+
+type THawaTimeline = {
+  steps: any[any]
+  currentStep: any
+  orientation: "vertical" | "horizontal"
+}
+
+export const HawaStepper: React.FunctionComponent<THawaTimeline> = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  let orientationStyles = {
+    vertical: "flex flex-col items-start w-fit",
+    horizontal: "flex flex-row",
+  }
+  let lineStyles = {
+    vertical: "w-1 h-32 rounded bg-red-200 ml-6 my-2",
+    horizontal: "h-0.5 flex w-full rounded bg-red-200",
+  }
+  return (
+    <div
+      className={clsx(
+        orientationStyles[orientation],
+        " flex-wrap justify-start gap-4"
+      )}
+    >
+      {props.steps.map((step: any, i: number) => {
+        return (
+          <div className="my-2 flex w-auto flex-row flex-wrap justify-start  ">
+            <div
+              className={
+                orientation === "vertical"
+                  ? "flex w-full flex-row items-center"
+                  : i + 1 === props.steps.length
+                  ? "flex w-full flex-row items-center justify-start gap-2"
+                  : "flex  flex-row items-center justify-start gap-2 after:mx-2 after:hidden  after:h-1 after:w-10 after:border-b  after:border-gray-200   dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10"
+              }
+            >
+              <div className="flex flex-row gap-2  ">
+                {/* Icon */}
+                <div
+                  className={clsx(
+                    "ring-buttonPrimary-200 flex h-6 w-6 min-w-[24px] items-center  justify-center rounded  ring-2 ring-offset-2",
+                    i + 1 <= props.currentStep
+                      ? "bg-buttonPrimary-500 text-white"
+                      : "bg-buttonPrimary-200"
+                  )}
+                >
+                  {i + 1 <= props.currentStep ? (
+                    <FaCheck fontSize={11} />
+                  ) : (
+                    i + 1
+                  )}
+                </div>
+                {/* Text */}
+                <div className="whitespace-nowrap">{step}</div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const TimelineStep = (props) => {
+  let defaultStyles = {
+    vertical: "",
+    horizontal: "",
+  }
+  return (
+    <div
+      className={
+        props.orientation === "vertical"
+          ? "flex w-full flex-row items-center"
+          : props.stepNumber === props.steps
+          ? "flex items-center"
+          : "after:border-1 flex items-center after:mx-6 after:hidden after:h-1 after:w-10 after:border-b after:border-gray-200  dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10"
+      }
+    >
+      <div
+        className={clsx(
+          "ring-buttonPrimary-200 m-2 mr-4 flex h-6 w-6 items-center justify-center rounded ring-2 ring-offset-2",
+          props.current
+            ? "bg-buttonPrimary-500 text-white"
+            : "bg-buttonPrimary-200"
+        )}
+      >
+        {props.current ? <FaCheck fontSize={11} /> : props.stepNumber}
+      </div>
+      <div className="whitespace-nowrap">{props.stepName}</div>
+    </div>
+  )
+}