@sikka/hawa 0.0.205 → 0.0.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.205",
+  "version": "0.0.207",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -35,7 +35,6 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
-    "@paypal/react-paypal-js": "^7.6.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.5.8",

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/blocks/Pricing/PricingPlans.tsx

@@ -23,12 +23,12 @@ type PricingPlansTypes = {
 export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
   props
 ) => {
-  const [currentCurrency, setCurrentCurrency] = useState("sar")
-  const [currentCycle, setCurrentCycle] = useState("monthly")
+  const [currentCurrency, setCurrentCurrency] = useState("SAR")
+  const [currentCycle, setCurrentCycle] = useState("month")
   let cycleOptions = [
-    { label: `Monthly`, value: `monthly` },
-    { label: `3 Months`, value: `3-months` },
-    { label: `6 Months`, value: `6-months` },
+    { label: `Monthly`, value: `month` },
+    // { label: `3 Months`, value: `3-months` },
+    // { label: `6 Months`, value: `6-months` },
     { label: `Annually`, value: `annually` },
   ]
   let currencyOptions = [
@@ -43,14 +43,16 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
     <div>
       <div className="mb-2 flex w-full justify-between">
         <HawaTabs
+          pill
           defaultValue={currentCycle}
           options={cycleOptions}
-          onChangeTab={(e: any) => setCurrentCycle(e)}
+          onChangeTab={(e: any) => setCurrentCycle(e.label)}
         />
         <HawaTabs
+          pill
           defaultValue={currentCurrency}
           options={currencyOptions}
-          onChangeTab={(e: any) => setCurrentCurrency(e)}
+          onChangeTab={(e: any) => setCurrentCurrency(e.label)}
         />
       </div>
 
@@ -58,11 +60,15 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
         {props.plans.map((plan: any) => {
           return (
             <HawaPricingCard
-              size="large"
+              // size="large"
+              // features={plan.features}
               lang={props.lang}
               {...plan}
-              currency={currentCurrency}
-              cycleText={currentCycle}
+              texts={{
+                buttonText: "Upgrade",
+                currencyText: currentCurrency,
+                cycleText: currentCycle,
+              }}
             />
           )
         })}

package/src/blocks/Referral/ReferralAccount.tsx

@@ -19,7 +19,6 @@ export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
         <div className="flex flex-row items-center justify-between rounded bg-white">
           <span className="ml-3 font-bold">{referralCode}</span>
           <HawaButton
-            buttonID={"refCode"}
             tooltip="Copy"
             className="mr-1.5"
             onClick={() => navigator.clipboard.writeText(referralCode)}
@@ -35,7 +34,6 @@ export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
         <div className="flex flex-row items-center justify-between rounded bg-white">
           <span className="ml-3 font-bold">{referralLink}</span>
           <HawaButton
-            buttonID={"refLink"}
             className="mr-1.5"
             onClick={() => navigator.clipboard.writeText(referralLink)}
           >

package/src/elements/Breadcrumb.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from "react"
-import { IconType } from "react-icons"
 
 type TBreadcrumItem = {
   label: string
@@ -22,7 +21,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/HawaAccordion.tsx

@@ -26,7 +26,6 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
         id={"accordion-collapse-heading-" + props.count}
         type="button"
         className={clsx(
-          // props.count === 0 ? roundedTop : noRounding,
           collapse ? "rounded" : "rounded-t",
           "flex w-full items-center justify-between  border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800"
         )}

package/src/elements/HawaButton.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect } from "react"
+import React from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 import { HawaTooltip } from "./HawaTooltip"
-import useHover from "../hooks/useHover"
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
-  buttonID?: any
   tooltipDirection?: "rtl" | "ltr"
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
@@ -23,46 +21,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 +33,7 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 
-export function HawaButton({
+export const HawaButton: React.FunctionComponent<ButtonProps> = ({
   className,
   variant = "contained",
   color = "default",
@@ -85,12 +47,60 @@ export function HawaButton({
   tooltipDirection = "ltr",
   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
@@ -100,7 +110,6 @@ export function HawaButton({
           content={tooltip}
         >
           <button
-            // type={props.type}
             className={
               disabled
                 ? clsx(
@@ -123,14 +132,12 @@ export function HawaButton({
             }
             disabled={disabled}
             onClick={props.onClick}
-            // {...props}
           >
             {!isLoading ? children : <HawaSpinner size="button" />}
           </button>
         </HawaTooltip>
       ) : (
         <button
-          // type={props.type}
           className={
             disabled
               ? clsx(
@@ -153,11 +160,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/HawaCheckbox.tsx

@@ -6,7 +6,6 @@ type TCheckBoxTypes = {
   label?: any
   helperText?: any
   id: string
-  // onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onChange?: (e) => void
 }
 

package/src/elements/HawaChip.tsx

@@ -5,21 +5,46 @@ 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"
+      )}
+    >
+      {dot && (
+        <span className={clsx(dotStyles[size], dotTypeStyles[dotType])}></span>
+      )}
       {icon && icon}
       {label}
     </span>

package/src/elements/HawaCopyrights.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 
 type CopyRightsTypes = {
   withLogo?: boolean
@@ -6,6 +6,7 @@ type CopyRightsTypes = {
   version?: string
   credits?: string
   logoURL?: string
+  onLogoClicked?: any
 }
 
 export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
@@ -14,15 +15,9 @@ export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
   return (
     <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
       {props.withLogo ? (
-        <a href={"https://qawaim.app/" + props.lang}>
-          <div style={{ cursor: "pointer" }}>
-            <image
-              // src={props.logoURL}
-              href={props.logoURL}
-              // alt="Qawaim"
-              width={100}
-              height={50}
-            />
+        <a href={props.onLogoClicked}>
+          <div className="cursor-pointer">
+            <image href={props.logoURL} width={100} height={50} />
           </div>
         </a>
       ) : null}

package/src/elements/HawaDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react"
+import React, { FC, ReactElement, ReactNode } from "react"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
 
@@ -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

@@ -1,7 +1,6 @@
 import clsx from "clsx"
 import React, { useEffect } from "react"
 import { useState } from "react"
-import useDiscloser from "../hooks/useDiscloser"
 import { HawaMenu } from "./HawaMenu"
 
 interface ItemCardTypes {
@@ -46,17 +45,6 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
     "inline-block rounded p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 
   const [openActionHeader, setOpenActionHeader] = useState(false)
-  // const {
-  //   isOpen: isActionOpen,
-  //   onClose: onActionClose,
-  //   onOpen: onActionOpen,
-  // } = useDiscloser()
-  // const {
-  //   isOpen: isDropDownOpen,
-  //   onClose: onDropDownClose,
-  //   onOpen: onDropDownOpen,
-  // } = useDiscloser()
-  // const [openDropDown, setOpenDropDown] = useState(false)
 
   function handleOpenActionHeader() {
     setOpenActionHeader(!openActionHeader)
@@ -64,7 +52,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

@@ -84,17 +84,13 @@ export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
             IndicatorSeparator: () => null,
           }}
           options={Countries}
-          // isCreatable={false}
           isMulti={false}
           isSearchable={true}
           isClearable={false}
           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}