@sikka/hawa 0.1.2 → 0.1.3-next

package/src/elements/HawaModal.tsx

@@ -1,89 +0,0 @@
-import React, { ReactElement, useEffect, FC } from "react"
-import clsx from "clsx"
-
-type ModalTypes = {
-  /**   * The boolean to open and close the modal   */
-  open: boolean
-  /**   * The title of the modal, it will appear in the header of the modal   */
-  title: string
-  /**
-   * a function that's triggered when the modal is closed either by the clicking the close button or outside the modal.
-   * @returns void
-   */
-  onClose: () => void
-  /**   * Boolean to enable/disable closing the modal upon clicking outside the modal   */
-  closeOnClickOutside?: boolean
-  /**   * The id of the modal   */
-  modalID?: string
-  children: ReactElement
-  /**   * The array of actions for the modal, it will appear in the footer of the modal   */
-  actions: any
-}
-export const HawaModal: FC<ModalTypes> = ({
-  open,
-  title,
-  onClose,
-  closeOnClickOutside = true,
-  ...props
-}) => {
-  let defaultStyle =
-    "absolute top-1/2 left-1/2 w-full h-screen flex flex-col justify-center items-center -translate-x-1/2 -translate-y-1/2 transition-all"
-  useEffect((): any => {
-    if (closeOnClickOutside && open) {
-      window.onclick = (e) => {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    return () => (window.onclick = null)
-  }, [open])
-  return (
-    <div
-      className={clsx(
-        defaultStyle,
-        open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
-      )}
-    >
-      <div
-        className={clsx(
-          "absolute h-screen w-full bg-gray-500 opacity-50",
-          open ? "opacity-50" : "opacity-0"
-        )}
-      ></div>
-
-      <div className="relative w-1/2 max-w-md rounded bg-white p-1 shadow-lg dark:bg-gray-700">
-        <div className="flex items-start justify-between rounded-t p-3 dark:border-gray-600">
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-            {title}
-          </h3>
-          <button
-            type="button"
-            className="inline-flex items-center rounded bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-            data-modal-toggle="defaultModal"
-            onClick={(e) => {
-              onClose()
-            }}
-          >
-            <svg
-              aria-hidden="true"
-              className="h-5 w-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                fillRule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-            <span className="sr-only">Close modal</span>
-          </button>
-        </div>
-        <div className="space-y-6 p-3">{props.children}</div>
-        <div className="mx-2 flex items-center justify-end space-x-1  p-0  dark:border-gray-600">
-          {props.actions}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaPanelTabs.tsx

@@ -1,57 +0,0 @@
-import React, { useState, FC } from "react"
-
-type PanelTabsTypes = {
-  defaultValue: any
-  options: [{ label: string; value: string }]
-  lang: any
-  handleChange: any
-  location: any
-}
-export const HawaPanelTabs: FC<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="-mb-px flex flex-wrap text-center text-sm font-medium"
-          id="myTab"
-          data-tabs-toggle="#myTabContent"
-          role="tablist"
-        >
-          {props.options.map((option: any, o) => {
-            return (
-              <li key={o} className="mr-2" role="presentation">
-                <button
-                  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"
-                  role="tab"
-                  aria-controls={option.value}
-                  aria-selected="true"
-                >
-                  {option.label}
-                </button>
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-      <div id="myTabContent">
-        {props.options.map((option: any, indx) => {
-          return (
-            <div
-              key={indx}
-              className="rounded bg-gray-50 p-4 dark:bg-gray-800"
-              id={`${option.value}`}
-              role="tabpanel"
-              aria-labelledby={`${option.value}-tab`}
-            >
-              {option.content}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaPhoneInput.tsx

@@ -1,171 +0,0 @@
-import React, { useState, FC } from "react"
-import Countries from "../countries"
-import Select from "react-select"
-type MenuTypes = {
-  cx: any
-  children: any
-  getStyles: any
-  innerProps: any
-  innerRef: any
-}
-const Menu: FC<MenuTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  ...props
-}) => {
-  return (
-    <div
-      // width: 190,
-      // borderRadius: "0.5rem",
-      className="absolute z-50 w-[190px] rounded border bg-background"
-      // "absolute z-10 mt-2 flex  w-full flex-col  justify-start  rounded bg-white p-1 px-1.5 ring-1 ring-blue-200"
-      ref={innerRef}
-      {...innerProps}
-      // {...props}
-    >
-      {children}
-    </div>
-  )
-}
-type OptionTypes = {
-  cx: any
-  data: any
-  children: any
-  getStyles: any
-  innerProps: any
-  innerRef: any
-}
-const Option: FC<OptionTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  ...props
-}) => (
-  <div
-    ref={innerRef}
-    className="m-2 flex cursor-pointer flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/30 dark:text-white dark:hover:bg-buttonPrimary-500/60"
-    {...innerProps}
-  >
-    <div className="flex flex-row items-center justify-center gap-1">
-      <img className="h-8 w-8" src={props.data.image}></img>
-      <span className="text-[10px]">{props.data.country_label}</span>
-    </div>
-    {children}
-  </div>
-)
-
-type HawaPhoneInputTypes = {
-  preferredCountry?: any
-  helperText?: any
-  label?: string
-  value?: any
-  country?: any
-  handleChange?: any
-}
-export const HawaPhoneInput: FC<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">{props.label}</label>
-      )}
-      <div dir="ltr" className="flex flex-row ">
-        <Select
-          classNames={{
-            // container: () => "cursor-pointer z-10 border rounded-l bg-background",
-            control: () =>
-              "w-[64px] text-right pr-2 cursor-pointer z-10 border rounded-l bg-background",
-            placeholder: (state) => "text-muted-foreground text-right ",
-            input: (state) =>
-              "bg-transparent cursor-pointer dark:text-white p-2 rounded-l text-[0.875rem] ",
-            valueContainer: () => "rounded-l h-auto text-[0.875rem]",
-            // container: () => "bg-orange-400 border-none",
-            // control: () => "bg-blue-500",
-            // menu: () => "bg-red-900",
-          }}
-          styles={{
-            // input: (base) => ({
-            //   ...base,
-            //   fontSize: "0.875rem",
-            //   "input:focus": {
-            //     boxShadow: "none",
-            //   },
-            //   lineHeight: "1.25rem",
-            //   padding: "0.37rem",
-            //   paddingLeft: 0,
-            //   textAlign: "right",
-            //   direction: "ltr",
-            // }),
-            // singleValue: (base) => ({
-            //   ...base,
-            //   fontSize: "0.875rem",
-            //   // textAlign: "right",
-            // }),
-            placeholder: (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,
-            Menu,
-            // SelectContainer,
-            DropdownIndicator: () => null,
-            IndicatorSeparator: () => null,
-            // Placeholder: () => <div className="bg-red-400">test</div>,
-            // SelectContainer:
-            //   () =>
-            //   ({ innerProps, innerRef }) =>
-            //     <div ref={innerRef} {...innerProps} />,
-          }}
-          // className="bg-red-500"
-
-          options={Countries}
-          isMulti={false}
-          isSearchable={true}
-          isClearable={false}
-          placeholder="+966"
-          unstyled
-          defaultValue={props.preferredCountry}
-          value={selectedCountry}
-          onChange={(newValue, action) => setSelectedCountry(newValue)}
-        />
-        <input
-          onChange={props.handleChange}
-          type="number"
-          placeholder="531045453"
-          // text-gray-900 dark:text-gray-300
-          // 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
-          className="block w-full rounded-r  border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
-
-          // className="block  w-full  appearance-none rounded rounded-l-none border border-l-0
-          //   bg-background p-2 text-[0.875rem] text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white "
-        />
-        {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/HawaPinInput.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-
-type PinInputTypes = {
-  label?: string
-  icon?: JSX.Element
-  digits: number
-  width?: "normal" | "full"
-  getPins?: any
-}
-export const HawaPinInput: FC<PinInputTypes> = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  ...props
-}) => {
-  const [pin, setPin] = useState(Array.from(Array(digits)))
-
-  const handleKeyDown = (e, index) => {
-    let backTo = 0
-    if (e.key === "Backspace") {
-      e.target.value.length === 0 ? (backTo = index - 1) : (backTo = index)
-      const previousInput = document.getElementById(`input-${backTo}`)
-      previousInput?.focus()
-    }
-  }
-  useEffect(() => {
-    let unfilled = pin.includes(undefined)
-    if (!unfilled) {
-      getPins(pin)
-    }
-  })
-  const handleChange = (e, index) => {
-    if (!/^\d*$/.test(e.target.value)) {
-      const newPin = [...pin]
-      newPin[index] = ""
-      setPin(newPin)
-      return
-    } else {
-      const newPin = [...pin]
-      newPin[index] = e.target.value
-      setPin(newPin)
-
-      if (e.target.value.length === 1) {
-        const nextInput = document.getElementById(`input-${index + 1}`)
-        nextInput?.focus()
-      } else if (e.target.value.length === 0) {
-        const previousInput = document.getElementById(`input-${index - 1}`)
-        previousInput?.focus()
-      }
-    }
-  }
-
-  return (
-    <div className="flex w-full flex-row justify-center gap-2">
-      {pin.map((value, index) => (
-        <input
-          key={index}
-          type="text"
-          maxLength={1}
-          value={value}
-          id={`input-${index}`}
-          pattern="[0-9]*"
-          className={clsx(
-            "h-10 rounded border bg-background text-center",
-            width === "full" ? "w-full" : "w-10"
-          )}
-          onChange={(e) => handleChange(e, index)}
-          onKeyDown={(e) => handleKeyDown(e, index)}
-          onFocus={(e) => e.target.select()}
-          {...props}
-        />
-      ))}
-    </div>
-  )
-}

package/src/elements/HawaPricingCard.tsx

@@ -1,107 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-import { HawaButton } from "./HawaButton"
-
-// TODO: if feature.excluded is false, show gray and x
-// TODO: add badge to feature if soon
-// TODO: add a discount element
-
-type PricingCardTypes = {
-  direction?: "rtl" | "ltr"
-  features: [{ included: boolean; text: string }]
-  price: number
-  texts: {
-    title: string
-    subtitle: string
-    buttonText: string
-    cycleText: string
-    currencyText: string
-  }
-  onPlanClicked?: () => void
-  currentPlan?: boolean
-  size: "small" | "medium" | "large"
-}
-
-export const HawaPricingCard: FC<PricingCardTypes> = ({
-  size = "medium",
-  direction = "ltr",
-  currentPlan = false,
-  ...props
-}) => {
-  let isArabic = direction === "rtl"
-  let cardSizes = {
-    small:
-      "mx-1 w-full  max-w-sm rounded border dark:border-gray-700 dark:bg-gray-800 ",
-    medium:
-      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 ",
-    large:
-      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
-  }
-  return (
-    <div
-      dir={isArabic ? "rtl" : "ltr"}
-      className={clsx(
-        currentPlan
-          ? "border-buttonPrimary-500 bg-layoutPrimary-500"
-          : "bg-white",
-        cardSizes[size],
-        "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.texts.title}
-      </h5>
-      <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">
-            {props.texts.currencyText}
-          </span>
-        </>
-        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
-          / {props.texts.cycleText}
-        </span>
-      </div>
-      <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"
-                >
-                  <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>
-      )}
-      <HawaButton
-        onClick={props.onPlanClicked}
-        margins="none"
-        disabled={currentPlan}
-        width="full"
-      >
-        {props.texts.buttonText}
-      </HawaButton>
-    </div>
-  )
-}

package/src/elements/HawaRadio.tsx

@@ -1,180 +0,0 @@
-import React, { useState, FC } from "react"
-import clsx from "clsx"
-
-type RadioTypes = {
-  orientation?: "vertical" | "horizontal"
-  design?: "default" | "tabs" | "cards" | "bordered"
-  options?: {
-    value: any
-    label: any
-    disabled?: any
-    sublabel?: any
-    icon?: any
-  }[]
-
-  onChangeTab?: any
-  defaultValue?: any
-}
-export const HawaRadio: FC<RadioTypes> = ({
-  design = "default",
-  orientation = "horizontal",
-  ...props
-}) => {
-  const [selectedOption, setSelectedOption] = useState(props.defaultValue)
-  let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-primary rounded active"
-  let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
-  let orientationStyle = {
-    horizontal: "flex flex-row",
-    vertical: "flex flex-col",
-  }
-  switch (design) {
-    case "tabs":
-      return (
-        <div>
-          <ul
-            className={clsx(
-              props.options?.length > 2
-                ? "flex-wrap xs:max-w-full xs:flex-nowrap"
-                : "",
-              " max-w-fit  whitespace-nowrap rounded bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
-              orientationStyle[orientation]
-            )}
-          >
-            {props.options?.map((opt: any, o) => (
-              <li className="w-full" key={o}>
-                <button
-                  aria-current="page"
-                  onClick={() => {
-                    setSelectedOption(opt.value)
-                    props.onChangeTab(opt.value)
-                  }}
-                  className={clsx(
-                    "flex flex-row items-center justify-center gap-2",
-                    selectedOption === opt.value
-                      ? activeTabStyle
-                      : inactiveTabStyle
-                  )}
-                >
-                  {opt.icon && opt.icon}
-                  {opt.label}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )
-    case "bordered":
-      return (
-        <div className={clsx(orientationStyle[orientation], "gap-4")}>
-          {props.options.map((opt, i) => (
-            <div className="rounded border border-gray-200   ">
-              <div
-                className="radio-item radio-item-bordered flex items-center    transition-all"
-                key={i + 1}
-              >
-                <input
-                  disabled={opt.disabled}
-                  id={opt.value.toString()}
-                  type="radio"
-                  value={opt.value}
-                  name="bordered-radio"
-                  // className="h-4 w-4 border-gray-300 "
-                />
-                <label
-                  htmlFor={opt.value.toString()}
-                  className={clsx(
-                    "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
-                    opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
-                  )}
-                >
-                  {opt.label}
-                </label>
-              </div>
-            </div>
-          ))}
-        </div>
-      )
-    case "cards":
-      return (
-        <ul className={clsx(orientationStyle[orientation], "gap-4")}>
-          {props.options?.map((opt: any, o) => (
-            <li>
-              <input
-                type="radio"
-                id={opt.value.toString()}
-                name="cards-radio"
-                value={opt.value.toString()}
-                className="peer hidden"
-                required
-                disabled={opt.disabled}
-              />
-              <label
-                htmlFor={opt.value.toString()}
-                className={clsx(
-                  "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500",
-                  opt.disabled
-                    ? "opacity-50"
-                    : "cursor-pointer hover:bg-gray-100 hover:text-gray-600"
-                )}
-              >
-                <div className="block  h-full w-full">
-                  <div className="w-full text-lg font-semibold">
-                    {opt.label}
-                  </div>
-                  <div className="w-full">{opt.sublabel}</div>
-                </div>
-                {/* <svg
-                  className="ml-3 h-5 w-5 "
-                  aria-hidden="true"
-                  fill="none"
-                  viewBox="0 0 14 10"
-                >
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M1 5h12m0 0L9 1m4 4L9 9"
-                  />
-                </svg> */}
-              </label>
-            </li>
-          ))}
-        </ul>
-      )
-
-    default:
-      return (
-        <div className={orientationStyle[orientation]}>
-          {props.options.map((opt, i) => (
-            <div
-              className="radio-item radio-item-default mb-4 flex items-center transition-all"
-              key={i + 1}
-            >
-              <input
-                disabled={opt.disabled}
-                id={opt.value.toString()}
-                type="radio"
-                value={opt.value}
-                name="default-radio"
-                // className="h-4 w-4 border-gray-300 "
-              />
-              <label
-                htmlFor={opt.value.toString()}
-                className={clsx(
-                  "ml-2 text-sm font-medium dark:text-white",
-                  opt.disabled
-                    ? "text-gray-400"
-                    : "cursor-pointer text-gray-900"
-                )}
-              >
-                {opt.label}
-              </label>
-            </div>
-          ))}
-        </div>
-      )
-  }
-}