@sikka/hawa 0.0.205 → 0.0.207

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/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>
+  )
+}