@sikka/hawa 0.0.206 → 0.0.207

package/package.json

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

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"
@@ -49,7 +47,6 @@ export const HawaButton: React.FunctionComponent<ButtonProps> = ({
   tooltipDirection = "ltr",
   margins = "2",
   children,
-  buttonID,
   badge,
   ...props
 }) => {
@@ -113,7 +110,6 @@ export const HawaButton: React.FunctionComponent<ButtonProps> = ({
           content={tooltip}
         >
           <button
-            // type={props.type}
             className={
               disabled
                 ? clsx(
@@ -136,14 +132,12 @@ export const HawaButton: React.FunctionComponent<ButtonProps> = ({
             }
             disabled={disabled}
             onClick={props.onClick}
-            // {...props}
           >
             {!isLoading ? children : <HawaSpinner size="button" />}
           </button>
         </HawaTooltip>
       ) : (
         <button
-          // type={props.type}
           className={
             disabled
               ? clsx(

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

@@ -40,8 +40,6 @@ export const HawaChip: React.FunctionComponent<TChipTypes> = ({
         defaultStyles,
         sizeStyles[size],
         color ? `bg-${color}-100 text-${color}-500` : "bg-layoutPrimary-500"
-        // `bg-[${color}]`
-        // `bg-[#c92424]`
       )}
     >
       {dot && (

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"
 

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)

package/src/elements/HawaPhoneInput.tsx

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

package/src/elements/HawaPricingCard.tsx

@@ -8,10 +8,12 @@ type PricingCardTypes = {
   features: [{ included: boolean; text: string }]
   title: string
   price: number
-  // currency: string
-  // buttonText: string
-  // cycleText: string
-  texts: { buttonText: string; cycleText: string; currencyText: string }
+  texts: {
+    subtitle: string
+    buttonText: string
+    cycleText: string
+    currencyText: string
+  }
   size: "small" | "medium" | "large"
 }
 type CycleTextTypes = {
@@ -24,9 +26,10 @@ type CurrencyTextTypes = {
   usd: string
   sar: string
 }
-export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
-  props
-) => {
+export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
+  size = "medium",
+  ...props
+}) => {
   let isArabic = props.lang === "ar"
   let cycleTextsArabic: CycleTextTypes = {
     monthly: "شهرياً",
@@ -46,83 +49,67 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
   }
   let cardSizes = {
     small:
-      "mx-1 w-full max-w-fit rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full  max-w-sm rounded border shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     medium:
-      "mx-1 w-full max-w-md rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full rounded min-w-fit border bg-white  dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     large:
-      "mx-1 w-full max-w-lg rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full max-w-lg rounded border  p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
   }
   return (
     <div
       dir={isArabic ? "rtl" : "ltr"}
-      className={clsx(cardSizes[props.size], "bg-white")}
+      className={clsx(
+        cardSizes[size],
+        "flex flex-col gap-4 border-2 bg-white p-4"
+      )}
     >
-      <h5 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
+      <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
         {props.title}
       </h5>
-      <div className="flex items-baseline text-gray-900 dark:text-white">
-        {/* {isArabic ? ( */}
+      <div className=" flex items-baseline  text-gray-900 dark:text-white">
         <>
           <span className="text-5xl font-extrabold tracking-tight">
             {props.price}
           </span>
           <span className="mx-1 text-sm font-semibold">
-            {" "}
-            {/* {
-              currencyMapping[
-                props.currency?.toLowerCase() as keyof CurrencyTextTypes
-              ]
-            } */}
             {props.texts.currencyText}
           </span>
         </>
-        {/* // ) : (
-        //   <>
-        //     <span className="text-sm font-semibold">
-        //       {" "}
-        //       {
-        //         currencyMapping[
-        //           props.currency?.toLowerCase() as keyof CurrencyTextTypes
-        //         ]
-        //       }
-        //     </span>
-        //     <span className="mx-1 text-5xl font-extrabold tracking-tight">
-        //       {props.price}
-        //     </span>
-        //   </>
-        // )} */}
-        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+        {/* <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
           / {props.texts.cycleText}
-          {/* {isArabic
-            ? cycleTextsArabic[props.cycleText as keyof CycleTextTypes]
-            : cycleTextsEnglish[props.cycleText as keyof CycleTextTypes]} */}
-        </span>
+        </span> */}
       </div>
-      <ul role="list" className="my-7 space-y-0">
-        {props.features?.map((feature, o) => {
-          return (
-            <li key={o} className="flex ">
-              <svg
-                aria-hidden="true"
-                className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Check icon</title>
-                <path
-                  fillRule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
-                {feature.text}
-              </span>
-            </li>
-          )
-        })}
-      </ul>
+      <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
+        {props.texts.subtitle}
+      </h5>
+
+      {props.features && (
+        <ul role="list" className="space-y-0 ">
+          {props.features?.map((feature, o) => {
+            return (
+              <li key={o} className="flex ">
+                <svg
+                  aria-hidden="true"
+                  className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Check icon</title>
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
+                  {feature.text}
+                </span>
+              </li>
+            )
+          })}
+        </ul>
+      )}
       <button
         type="button"
         className="inline-flex w-full justify-center rounded bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
@@ -130,36 +117,5 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         {props.texts.buttonText}
       </button>
     </div>
-
-    // <Container
-    //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-    //   style={{ direction: isArabic ? "rtl" : "ltr" }}
-    // >
-    //     {props.discount && (
-    //       <Chip
-    //         label={props.discount}
-    //         variant="standard"
-    //         style={{
-    //           position: "absolute",
-    //           bottom: 10,
-    //           ...chipSpacing
-    //         }}
-    //         color="success"
-    //       />
-    //     )}
-
-    //   <div
-    //     style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
-    //   >
-    //
-    //   </div>
-    //   <button
-    //     onClick={props.selectPlan}
-    //     variant={props.selectedPlan ? "outlined" : "contained"}
-    //     style={{ margin: 20 }}
-    //   >
-    //     {props.buttonText}
-    //   </button>
-    // </Container>
   )
 }

package/src/elements/HawaTable.tsx

@@ -251,9 +251,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
               </tr>
             )}
           </tbody>
-          <div></div>
         </table>
       </div>
+
       <div className="flex flex-row items-center justify-between ">
         {/* Pagination Pages  */}
         {range.length > 1 ? (

package/src/elements/HawaTabs.tsx

@@ -1,21 +1,22 @@
 import clsx from "clsx"
 import React, { useState } from "react"
-
+// TODO: fix wrapping issue when small screen
 type TabsTypes = {
   options?: any
   onChangeTab?: any
   defaultValue?: any
-  contents?: any
   orientation?: "horizontal" | "vertical"
   direction?: "rtl" | "ltr"
   marginBetween?: any
   width?: "full" | "normal"
+  pill?: boolean
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
   width = "normal",
   marginBetween = 0,
+  pill = true,
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
@@ -66,7 +67,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     >
       <ul
         className={clsx(
-          // "mb-2",
           marginBetween
             ? orientation === "vertical"
               ? "mb-0"
@@ -77,31 +77,24 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
             : "mr-" + marginBetween,
           tabsStyle[orientation],
           "border-buttonPrimary-500",
+
           orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
             : "border-b-2",
-          widthStyles[width]
+          widthStyles[width],
+          // "bg-red-400",
+          pill ? "overflow-clip rounded border-none" : ""
         )}
       >
-        {/* 
-        if selected option
-          if vertical
-            if rtl
-              border left
-            else
-              border right
-          else
-            border bottom
-        */}
         {props.options?.map((opt: any, o) => (
           <li key={o}>
             <button
               aria-current="page"
               onClick={() => {
                 setSelectedOption(opt.value)
-                // props.onChangeTab(opt.value)
+                props.onChangeTab(opt)
               }}
               className={clsx(
                 opt.value === selectedOption
@@ -111,7 +104,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                       direction === "rtl" ? "rounded-r" : "rounded-l",
                     ]
                   : inactiveTabStyle[orientation],
-                "w-full transition-all"
+                "w-full  transition-all",
+                pill ? "rounded bg-green-400" : ""
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/elements/HawaTextField.tsx

@@ -44,7 +44,6 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
 
   return (
     <div
-      // ref={props.ref}
       className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
     >
       {props.label && (
@@ -84,7 +83,6 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
 
       {props.helperText && (
         <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/elements/HawaTooltip.tsx

@@ -8,7 +8,6 @@ type THawaToolTip = {
   content?: string
   btnHovered?: any
   buttonRef?: any
-  buttonID?: any
   direction?: "rtl" | "ltr"
   size?: "normal" | "small" | "large"
   position?:

package/src/elements/InvoiceAccordion.tsx

@@ -25,9 +25,7 @@ type InvoiceAccordionTypes = {
   invoiceActions?: {
     icon?: JSX.Element
     label: string
-    action?: (
-      e: any
-    ) => void
+    action?: (e: any) => void
     isButton?: boolean
     element?: any
   }[][]
@@ -78,9 +76,7 @@ export const InvoiceAccordion: React.FunctionComponent<
         <div className="flex w-full flex-col gap-0 ">
           <div className="flex flex-row items-center gap-2">
             <span className="bg-white-200">{props.invoiceTitle}</span>
-            {props.status && (
-              <HawaChip size="small" label={props.status} />
-            )}{" "}
+            {props.status && <HawaChip size="small" label={props.status} />}
           </div>
           <div className="font-sm text-gray-400">{props.invoiceSubtitle}</div>
         </div>
@@ -89,7 +85,6 @@ export const InvoiceAccordion: React.FunctionComponent<
           <HawaMenu
             direction={direction}
             position={direction === "rtl" ? "bottom-right" : "bottom-left"}
-            // menuItems={[[{ label: "Download PDF" }]]}
             menuItems={props.invoiceActions}
           >
             <div className=" p-2">

package/src/elements/TabPanel.tsx

@@ -1,18 +1,5 @@
 import React from "react"
 
-// const useStyles = makeStyles((theme) => ({
-//   panelsContainer: {
-//     height: "100%",
-//     width: "100%"
-//   },
-//   panel: {
-//     backgroundColor: "var(--lightGrey)",
-//     height: "100%",
-//     width: "100%",
-//     padding: 10
-//   }
-// }));
-
 type TabPanelTypes = {
   children: any
   value: any

package/src/styles.css

@@ -693,10 +693,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.my-7 {
-  margin-top: 1.75rem;
-  margin-bottom: 1.75rem;
-}
 .-mb-px {
   margin-bottom: -1px;
 }
@@ -808,9 +804,6 @@ video {
 .grid {
   display: grid;
 }
-.contents {
-  display: contents;
-}
 .hidden {
   display: none;
 }
@@ -983,6 +976,10 @@ video {
 .min-w-\[24px\] {
   min-width: 24px;
 }
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
 .min-w-full {
   min-width: 100%;
 }
@@ -1427,10 +1424,6 @@ video {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.bg-\[\#c92424\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(201 36 36 / var(--tw-bg-opacity));
-}
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -1485,6 +1478,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));