@sikka/hawa 0.0.207 → 0.0.209

package/package.json

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

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements"
 
 const CheckMark = () => (
   <svg

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,58 +1,65 @@
 import React, { useState } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
+// TODO: make lang into direction rtl | ltr
 
 type PricingPlansTypes = {
-  plans: any
-  // plans: PropTypes.arrayOf(
-  //   PropTypes.shape({
-  //     title: PropTypes.string,
-  //     title_ar: PropTypes.string,
-  //     subtitle: PropTypes.string,
-  //     subtitle_ar: PropTypes.string,
-  //     price: PropTypes.number,
-  //     currency: PropTypes.string,
-  //     cycleText: PropTypes.string,
-  //     buttonText: PropTypes.string,
-  //     features: PropTypes.array,
-  //     features_ar: PropTypes.array,
-  //     selectedPlan: PropTypes.bool,
-  //   })
-  // ),
-  lang: any
+  plans: [
+    {
+      direction: "rtl" | "ltr"
+      features: [{ included: boolean; text: string }]
+      price: number
+      texts: {
+        title: string
+        subtitle: string
+        buttonText: string
+        cycleText: string
+        currencyText: string
+      }
+      size: "small" | "medium" | "large"
+    }
+  ]
+  currencies: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  billingCycles: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  onCycleChange?: (e) => void
+  onCurrencyChange?: (e) => void
+  direction?: "rtl" | "ltr"
 }
 export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
   props
 ) => {
   const [currentCurrency, setCurrentCurrency] = useState("SAR")
   const [currentCycle, setCurrentCycle] = useState("month")
-  let cycleOptions = [
-    { label: `Monthly`, value: `month` },
-    // { label: `3 Months`, value: `3-months` },
-    // { label: `6 Months`, value: `6-months` },
-    { label: `Annually`, value: `annually` },
-  ]
-  let currencyOptions = [
-    { label: `USD`, value: `usd` },
-    { label: `SAR`, value: `sar` },
-  ]
-  let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
-  let inactiveTabStyle =
-    "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">
         <HawaTabs
           pill
           defaultValue={currentCycle}
-          options={cycleOptions}
-          onChangeTab={(e: any) => setCurrentCycle(e.label)}
+          options={props.billingCycles}
+          onChangeTab={(e: any) => {
+            setCurrentCycle(e.label)
+            props.onCycleChange(e)
+          }}
         />
         <HawaTabs
           pill
           defaultValue={currentCurrency}
-          options={currencyOptions}
-          onChangeTab={(e: any) => setCurrentCurrency(e.label)}
+          options={props.currencies}
+          onChangeTab={(e: any) => {
+            setCurrentCurrency(e.label)
+            props.onCurrencyChange(e)
+          }}
         />
       </div>
 
@@ -60,12 +67,9 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
         {props.plans.map((plan: any) => {
           return (
             <HawaPricingCard
-              // size="large"
-              // features={plan.features}
-              lang={props.lang}
               {...plan}
               texts={{
-                buttonText: "Upgrade",
+                ...plan.texts,
                 currencyText: currentCurrency,
                 cycleText: currentCycle,
               }}

package/src/elements/HawaMenu.tsx

@@ -47,17 +47,13 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   position = "top-right",
 }) => {
   const [menuOpened, setMenuOpened] = useState(false)
-
   const childrenRef = useRef(null)
   const [childrenHeight, setChildrenHeight] = useState(null)
   const [childrenWidth, setChildrenWidth] = useState(null)
-
   const menuRef = useRef(null)
   const [menuWidth, setMenuWidth] = useState(null)
   const [menuHeight, setMenuHeight] = useState(null)
 
-  const ref = useRef(null)
-
   useEffect(() => {
     setMenuHeight(menuRef.current?.getBoundingClientRect().height)
     setMenuWidth(menuRef.current?.getBoundingClientRect().width)
@@ -74,18 +70,9 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
       document.removeEventListener("click", handleClickOutside, true)
     }
   }, [onClickOutside])
+  
   let defaultStyles =
     "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
-  let positionStyles = {
-    "top-right": "top-8 right-0",
-    "top-left": "top-8 left-0",
-    "bottom-right": "bottom-8 right-0",
-    "bottom-left": "bottom-8 left-0",
-  }
-  let animationStyles = {
-    opened: "max-h-fit h-max visible opacity-100 block",
-    closed: "h-0 invisible opacity-0 hidden",
-  }
   let sizeStyles = {
     small: "text-[11px] p-1 px-4 m-0",
     normal: "py-2 px-4",
@@ -191,7 +178,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
             >
               {group?.map((item) => {
                 return item.element ? (
-                  <li className="mx-1 cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
+                  <li className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
                     {item.element}
                   </li>
                 ) : (

package/src/elements/HawaPricingCard.tsx

@@ -1,57 +1,37 @@
 import clsx from "clsx"
 import React from "react"
+import { HawaButton } from "./HawaButton"
 
-// TODO: if feature.included is false, show gray and x
+// TODO: if feature.excluded is false, show gray and x
+// TODO: add badge to feature if soon
 
 type PricingCardTypes = {
-  lang: "ar" | "en"
+  direction?: "rtl" | "ltr"
   features: [{ included: boolean; text: string }]
-  title: string
   price: number
   texts: {
+    title: string
     subtitle: string
     buttonText: string
     cycleText: string
     currencyText: string
   }
+  currentPlan?: boolean
   size: "small" | "medium" | "large"
 }
-type CycleTextTypes = {
-  monthly: string
-  "3-months": string
-  "6-months": string
-  annually: string
-}
-type CurrencyTextTypes = {
-  usd: string
-  sar: string
-}
+
 export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
   size = "medium",
+  direction = "ltr",
+  currentPlan = true,
   ...props
 }) => {
-  let isArabic = props.lang === "ar"
-  let cycleTextsArabic: CycleTextTypes = {
-    monthly: "شهرياً",
-    "3-months": "كل 3 أشهر",
-    "6-months": "كل 6 أشهر",
-    annually: "سنوياً",
-  }
-  let cycleTextsEnglish: CycleTextTypes = {
-    monthly: "Monthly",
-    "3-months": "3 Months",
-    "6-months": "6 Months",
-    annually: "Annually",
-  }
-  let currencyMapping: CurrencyTextTypes = {
-    usd: isArabic ? "دولار" : "$",
-    sar: isArabic ? "ريال" : "SAR",
-  }
+  let isArabic = direction === "rtl"
   let cardSizes = {
     small:
       "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 rounded min-w-fit border bg-white  dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full rounded min-w-fit border  dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     large:
       "mx-1 w-full max-w-lg rounded border  p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
   }
@@ -59,12 +39,15 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
     <div
       dir={isArabic ? "rtl" : "ltr"}
       className={clsx(
+        currentPlan
+          ? "border-buttonPrimary-500 bg-layoutPrimary-500 p-0"
+          : "bg-white",
         cardSizes[size],
-        "flex flex-col gap-4 border-2 bg-white p-4"
+        "flex flex-col gap-4 rounded border-2  p-4"
       )}
     >
       <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
-        {props.title}
+        {props.texts.title}
       </h5>
       <div className=" flex items-baseline  text-gray-900 dark:text-white">
         <>
@@ -75,9 +58,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
             {props.texts.currencyText}
           </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}
-        </span> */}
+        </span>
       </div>
       <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
         {props.texts.subtitle}
@@ -110,12 +93,16 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
           })}
         </ul>
       )}
-      <button
+      {/* <button
+        disabled={currentPlan}
         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"
       >
         {props.texts.buttonText}
-      </button>
+      </button> */}
+      <HawaButton disabled={currentPlan} width="full">
+        {props.texts.buttonText}
+      </HawaButton>
     </div>
   )
 }

package/src/elements/HawaTabs.tsx

@@ -16,22 +16,23 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   direction = "ltr",
   width = "normal",
   marginBetween = 0,
-  pill = true,
+  pill = false,
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
 
   let activeTabStyle = {
     vertical: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
-    horizontal:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 rounded rounded-br-none rounded-bl-none active",
+    horizontal: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
   }
+  // rounded rounded-br-none rounded-bl-none
   let inactiveTabStyle = {
     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",
+      "inline-block py-2 px-4 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
     horizontal:
-      "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",
+      "bg-gray-100 inline-block py-2 px-4  hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
   }
+  // rounded rounded-br-none rounded-bl-none
   let widthStyles = {
     full: "w-full min-w-full",
     normal: "w-fit",
@@ -54,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  text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit  flex-wrap border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -62,7 +63,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
-        // "bg-red-400"
       )}
     >
       <ul
@@ -78,14 +78,19 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
           tabsStyle[orientation],
           "border-buttonPrimary-500",
 
-          orientation === "vertical"
+          // orientation === "vertical"
+          //   ? direction === "rtl"
+          //     ? "rounded-none rounded-r border-l-2"
+          //     : "rounded-none rounded-l border-r-2"
+          //   : "border-b-2",
+          widthStyles[width],
+          pill
+            ? "gap-0.5 rounded border-none bg-gray-100 p-0.5"
+            : orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
-            : "border-b-2",
-          widthStyles[width],
-          // "bg-red-400",
-          pill ? "overflow-clip rounded border-none" : ""
+            : "border-b-2"
         )}
       >
         {props.options?.map((opt: any, o) => (
@@ -105,7 +110,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                     ]
                   : inactiveTabStyle[orientation],
                 "w-full  transition-all",
-                pill ? "rounded bg-green-400" : ""
+                pill
+                  ? "rounded"
+                  : orientation === "vertical"
+                  ? "rounded rounded-tl-none rounded-bl-none"
+                  : "rounded rounded-br-none rounded-bl-none"
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/styles.css

@@ -584,9 +584,6 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
-.bottom-8 {
-  bottom: 2rem;
-}
 .left-0 {
   left: 0px;
 }
@@ -632,9 +629,6 @@ video {
 .top-4 {
   top: 1rem;
 }
-.top-8 {
-  top: 2rem;
-}
 .top-auto {
   top: auto;
 }
@@ -883,10 +877,6 @@ video {
 .h-full {
   height: 100%;
 }
-.h-max {
-  height: -moz-max-content;
-  height: max-content;
-}
 .h-screen {
   height: 100vh;
 }
@@ -1478,10 +1468,6 @@ 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));
@@ -1553,6 +1539,9 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }