@sikka/hawa 0.0.94 → 0.0.96

package/src/elements/{HawaPanelTabs.js → HawaPanelTabs.tsx}

@@ -1,23 +1,36 @@
-import React, { useState } from "react";
+import React, { useState } from "react"
 
-import PropTypes from "prop-types";
-
-export const HawaPanelTabs = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
+type PanelTabsTypes = {
+  defaultValue: any
+  options: any
+  //   options: PropTypes.arrayOf(
+  //     PropTypes.shape({
+  //       label: PropTypes.string,
+  //       value: PropTypes.string,
+  //     })
+  //   ),
+  lang: any
+  handleChange: any
+  location: any
+}
+export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
+  props
+) => {
+  const [value, setValue] = useState(props.defaultValue)
   return (
     <div>
       <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
         <ul
-          className="flex flex-wrap -mb-px text-sm font-medium text-center"
+          className="-mb-px flex flex-wrap text-center text-sm font-medium"
           id="myTab"
           data-tabs-toggle="#myTabContent"
           role="tablist"
         >
-          {props.options.map((option) => {
+          {props.options.map((option: any) => {
             return (
               <li className="mr-2" role="presentation">
                 <button
-                  className="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  className="inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 hover:text-blue-600 dark:border-blue-500 dark:text-blue-500 dark:hover:text-blue-500"
                   id={`${option.value}-tab`}
                   data-tabs-target={`#${option.value}`}
                   type="button"
@@ -28,37 +41,24 @@ export const HawaPanelTabs = (props) => {
                   {option.label}
                 </button>
               </li>
-            );
+            )
           })}
         </ul>
       </div>
       <div id="myTabContent">
-        {props.options.map((option) => {
+        {props.options.map((option: any) => {
           return (
             <div
-              className="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+              className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
               id={option.value}
               role="tabpanel"
               aria-labelledby={`${option.value}-tab`}
             >
               {option.content}
             </div>
-          );
+          )
         })}
       </div>
     </div>
-  );
-};
-
-HawaPanelTabs.propTypes = {
-  lang: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.string
-    })
-  ),
-  defaultValue: PropTypes.string,
-  handleChange: PropTypes.func,
-  location: PropTypes.string
-};
+  )
+}

package/src/elements/HawaPhoneInput.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react"
+import Countries from "../countries"
+import Select from "react-select"
+
+type OptionTypes = {
+  cx: any
+  data: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+}
+const Option: React.FunctionComponent<OptionTypes> = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => (
+  <div
+    ref={innerRef}
+    className="m-2 flex flex-row items-center justify-between rounded-lg p-1 px-3 hover:bg-blue-200"
+    {...innerProps}
+  >
+    <img className="h-8 w-8" src={props.data.image}></img>
+    {children}
+  </div>
+)
+
+type HawaPhoneInputTypes = {
+  preferredCountry?: any
+  helperText?: any
+  label?: string
+  value?: any
+  country?: any
+  handleChange?: any
+}
+export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
+  props
+) => {
+  const [selectedCountry, setSelectedCountry] = useState("+966")
+
+  return (
+    <div className="mb-3 flex flex-col">
+      {props.label && (
+        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.label}
+        </label>
+      )}
+      <div className="flex flex-row">
+        <Select
+          styles={{
+            input: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              "input:focus": {
+                boxShadow: "none",
+              },
+              lineHeight: "1.25rem",
+              padding: "0.37rem",
+            }),
+            singleValue: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              textAlign: "right",
+            }),
+            control: (base) => ({
+              ...base,
+              width: 64,
+              borderRadius: "0.5rem",
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            }),
+            menu: (base) => ({
+              ...base,
+              width: 190,
+              borderRadius: "0.5rem",
+            }),
+          }}
+          components={{
+            Option,
+            DropdownIndicator: () => null,
+            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)
+          }}
+        />
+        <input
+          onChange={props.handleChange}
+          type="number"
+          className="block w-full appearance-none rounded-lg rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        />
+        {props.helperText && (
+          <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">
+            {props.helperText}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/elements/{HawaPricingCard.js → HawaPricingCard.tsx}

@@ -1,53 +1,106 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from "react"
 
-export const HawaPricingCard = (props) => {
-  let isArabic = props.lang === "ar";
-  let cycleTextsArabic = {
+type PricingCardTypes = {
+  lang: "ar" | "en"
+  features: [any]
+  features_ar: [any]
+  title: string
+  title_ar: string
+  price: number
+  currency: string
+  buttonText: string
+  cycleText: string
+  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> = (
+  props
+) => {
+  let isArabic = props.lang === "ar"
+  let cycleTextsArabic: CycleTextTypes = {
     monthly: "شهرياً",
     "3-months": "كل 3 أشهر",
     "6-months": "كل 6 أشهر",
-    annually: "سنوياً"
-  };
-  let cycleTextsEnglish = {
+    annually: "سنوياً",
+  }
+  let cycleTextsEnglish: CycleTextTypes = {
     monthly: "Monthly",
     "3-months": "3 Months",
     "6-months": "6 Months",
-    annually: "Annually"
-  };
-  let currencyMapping = {
+    annually: "Annually",
+  }
+  let currencyMapping: CurrencyTextTypes = {
     usd: isArabic ? "دولار" : "$",
-    sar: isArabic ? "ريال" : "SAR"
-  };
-  let featuresMapping = isArabic ? props.features_ar : props.features;
-  let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
+    sar: isArabic ? "ريال" : "SAR",
+  }
+  let featuresMapping = isArabic ? props.features_ar : props.features
+  let chipSpacing = isArabic ? { left: 10 } : { right: 10 }
+  let cardSizes = {
+    small:
+      "mx-1 w-full max-w-fit rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+    medium:
+      "mx-1 w-full max-w-md rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+    large:
+      "mx-1 w-full max-w-lg rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+  }
   return (
-    <div className="mx-1 p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+    <div dir={isArabic ? "rtl" : "ltr"} className={cardSizes[props.size]}>
       <h5 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
         {isArabic ? props.title_ar : props.title}
       </h5>
       <div className="flex items-baseline text-gray-900 dark:text-white">
-        <span className="font-semibold text-sm">
-          {" "}
-          {currencyMapping[props.currency?.toLowerCase()]}
-        </span>
-        <span className="text-5xl font-extrabold tracking-tight">
-          {props.price}
-        </span>
+        {isArabic ? (
+          <>
+            <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
+                ]
+              }
+            </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">
           /{" "}
           {isArabic
-            ? cycleTextsArabic[props.cycleText]
-            : cycleTextsEnglish[props.cycleText]}
+            ? cycleTextsArabic[props.cycleText as keyof CycleTextTypes]
+            : cycleTextsEnglish[props.cycleText as keyof CycleTextTypes]}
         </span>
       </div>
-      <ul role="list" className="my-7 space-y-5">
+      <ul role="list" className="my-7 space-y-0">
         {featuresMapping?.map((feature) => {
           return (
-            <li className="flex space-x-3">
+            <li className="flex ">
               <svg
                 aria-hidden="true"
-                className="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
+                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"
@@ -59,11 +112,11 @@ export const HawaPricingCard = (props) => {
                   clip-rule="evenodd"
                 ></path>
               </svg>
-              <span className="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
+              <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
                 {feature}
               </span>
             </li>
-          );
+          )
         })}
 
         {/* <li className="flex space-x-3 line-through decoration-gray-500">
@@ -88,7 +141,7 @@ export const HawaPricingCard = (props) => {
       </ul>
       <button
         type="button"
-        className="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
+        className="inline-flex w-full justify-center rounded-lg 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.buttonText}
       </button>
@@ -126,19 +179,5 @@ export const HawaPricingCard = (props) => {
     //     {props.buttonText}
     //   </button>
     // </Container>
-  );
-};
-
-HawaPricingCard.propTypes = {
-  lang: PropTypes.string,
-  buttonText: PropTypes.string,
-  selectedPlan: PropTypes.string,
-  title: PropTypes.string,
-  title_ar: PropTypes.string,
-  subtitle: PropTypes.string,
-  subtitle_ar: PropTypes.string,
-  features: PropTypes.array,
-  features_ar: PropTypes.array,
-  currency: PropTypes.oneOf(["sar", "usd"]),
-  cycleText: PropTypes.oneOf(["monthly", "3-months", "6-months", "annually"])
-};
+  )
+}

package/src/elements/HawaRadio.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+
+type RadioTypes = {
+  options: any
+}
+export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
+  return (
+    <div>
+      <ul className="w-full items-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:flex">
+        {props.options.map((option: any) => {
+          return (
+            <li className="w-full border-b border-gray-200 dark:border-gray-600 sm:border-b-0 sm:border-r">
+              <div className="flex items-center pl-3">
+                <input
+                  id="horizontal-list-radio-license"
+                  type="radio"
+                  value=""
+                  name="list-radio"
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600"
+                />
+                <label
+                  htmlFor="horizontal-list-radio-license"
+                  className="ml-2 w-full py-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                >
+                  {option.label}
+                </label>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}

package/src/elements/HawaRange.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+
+type RangeTypes = {
+  value?: any
+  handleChange?: any
+  startElement?: any
+  endElement?: any
+  label?: any
+}
+
+export const HawaRange: React.FunctionComponent<RangeTypes> = ({
+  value,
+  handleChange,
+  startElement,
+  endElement,
+  label,
+  ...props
+}) => {
+  const [rangeValue, setRangeValue] = React.useState(value)
+
+  return (
+    <div {...props}>
+      {label && (
+        <label
+          htmlFor="default-range"
+          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex w-fit flex-row items-center justify-center">
+        <div className="mr-2">{startElement}</div>{" "}
+        <input
+          id="default-range"
+          type="range"
+          value={rangeValue}
+          onChange={(e) => {
+            setRangeValue(e.target.value)
+            handleChange(e)
+          }}
+          className="h-2 w-fit cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+        />
+        <div className="ml-2">{endElement}</div>{" "}
+      </div>
+    </div>
+  )
+}

package/src/elements/HawaSearchBar.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+import { HawaTextField } from "./HawaTextField"
+
+type SearchBarTypes = {}
+export const HawaSearchBar: React.FunctionComponent<SearchBarTypes> = (
+  props
+) => {
+  return <HawaTextField {...props} />
+}

package/src/elements/{HawaSelect.js → HawaSelect.tsx}

@@ -1,7 +1,14 @@
-import Select from "react-select";
-import CreatableSelect from "react-select/creatable";
-
-const Option = ({
+import React from "react"
+import Select from "react-select"
+import CreatableSelect from "react-select/creatable"
+type OptionTypes = {
+  cx: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+}
+const Option: React.FunctionComponent<OptionTypes> = ({
   cx,
   children,
   getStyles,
@@ -11,14 +18,21 @@ const Option = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 p-1 px-3 rounded-lg flex flex-row items-center justify-between hover:bg-blue-200"
+    className="m-2 flex flex-row items-center justify-between rounded-lg p-1 px-3 hover:bg-blue-200"
     {...innerProps}
   >
     {children}
   </div>
-);
+)
 
-const Control = ({
+type ControlTypes = {
+  cx: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+}
+const Control: React.FunctionComponent<ControlTypes> = ({
   cx,
   children,
   getStyles,
@@ -29,32 +43,61 @@ const Control = ({
   return (
     <div
       ref={innerRef}
-      className="h-10 flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      className="flex h-10 w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
       {...innerProps}
       // {...props}
     >
       {children}
     </div>
-  );
-};
-const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
+  )
+}
+type MenuTypes = {
+  cx: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+}
+const Menu: React.FunctionComponent<MenuTypes> = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => {
   return (
     <div
-      className="bg-white rounded-lg absolute w-full mt-2"
+      className="absolute mt-2 w-full rounded-lg bg-white"
       ref={innerRef}
       {...innerProps}
       // {...props}
     >
       {children}
     </div>
-  );
-};
+  )
+}
 
-export const HawaSelect = (props) => {
+type SelectTypes = {
+  label?: any
+  isCreatable?: any
+  options?: any
+  isClearable?: any
+  isMulti?: any
+  isSearchable?: any
+  onChange?: any
+  helperText?: any
+  onInputChange?: any
+  native?: any
+  fullWidth?: any
+  value?: any
+  children?: any
+}
+export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
     <div className="mb-3">
       {props.label && (
-        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
         </label>
       )}
@@ -64,13 +107,13 @@ export const HawaSelect = (props) => {
           isClearable={props.isClearable}
           isMulti={props.isMulti}
           isSearchable={props.isSearchable}
-          onChange={(newValue, action) =>
+          onChange={(newValue: any, action) =>
             props.onChange(newValue.label, action)
           }
           components={{
             Control,
             Option,
-            Menu
+            Menu,
           }}
         />
       )}
@@ -80,20 +123,20 @@ export const HawaSelect = (props) => {
             input: (base) => ({
               ...base,
               "input:focus": {
-                boxShadow: "none"
-              }
+                boxShadow: "none",
+              },
             }),
 
             control: (base) => ({
               ...base,
-              borderRadius: "0.75rem"
+              borderRadius: "0.75rem",
             }),
             menu: (base) => ({
               ...base,
               borderRadius: "0.75rem",
               padding: 0,
               display: "flex",
-              justifyContent: "center"
+              justifyContent: "center",
             }),
             menuList: (base) => ({
               ...base,
@@ -101,14 +144,14 @@ export const HawaSelect = (props) => {
               flexDirection: "column",
               justifyContent: "center",
               alignItems: "center",
-              width: "100%"
+              width: "100%",
             }),
             option: (base) => ({
               ...base,
               borderRadius: "0.75rem",
               margin: 3,
-              width: "98%"
-            })
+              width: "98%",
+            }),
           }}
           options={props.options}
           isClearable={props.isClearable}
@@ -116,12 +159,12 @@ export const HawaSelect = (props) => {
           isSearchable={props.isSearchable}
           onCreateOption={() => console.log("im changing")}
           onChange={(newValue, action) => {
-            console.log("this is onChange", newValue);
-            props.onChange(newValue, action);
+            console.log("this is onChange", newValue)
+            props.onChange(newValue, action)
           }}
           onInputChange={(newValue, action) => {
-            console.log("onInputChange====", newValue);
-            props.onInputChange(newValue, action);
+            console.log("onInputChange====", newValue)
+            props.onInputChange(newValue, action)
           }}
         />
       )}
@@ -131,5 +174,5 @@ export const HawaSelect = (props) => {
         </p>
       )}
     </div>
-  );
-};
+  )
+}