@sikka/hawa 0.0.207 → 0.0.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.207",
+  "version": "0.0.208",
   "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,23 +1,23 @@
 import React, { useState } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
-
+// TODO: make lang into direction rtl | ltr
+// TODO: shape the type of plans
 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,
-  //   })
-  // ),
+  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"
+    }
+  ]
   lang: any
 }
 export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
@@ -62,13 +62,13 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
             <HawaPricingCard
               // size="large"
               // features={plan.features}
-              lang={props.lang}
+              // lang={props.lang}
               {...plan}
-              texts={{
-                buttonText: "Upgrade",
-                currencyText: currentCurrency,
-                cycleText: currentCycle,
-              }}
+              // texts={{
+              //   buttonText: "Upgrade",
+              //   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

@@ -4,11 +4,11 @@ import React from "react"
 // TODO: if feature.included is false, show gray and x
 
 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
@@ -28,9 +28,10 @@ type CurrencyTextTypes = {
 }
 export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
   size = "medium",
+  direction = "ltr",
   ...props
 }) => {
-  let isArabic = props.lang === "ar"
+  let isArabic = direction === "rtl"
   let cycleTextsArabic: CycleTextTypes = {
     monthly: "شهرياً",
     "3-months": "كل 3 أشهر",
@@ -64,7 +65,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
       )}
     >
       <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">
         <>

package/src/elements/HawaTabs.tsx

@@ -105,7 +105,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                     ]
                   : inactiveTabStyle[orientation],
                 "w-full  transition-all",
-                pill ? "rounded bg-green-400" : ""
+                pill ? "rounded" : ""
                 // 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));