@sikka/hawa 0.2.14-beta → 0.2.17-beta

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-primary hover:text-primary-foreground"
-    {...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,104 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-import { Button } from "./Button"
-
-// 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 bg-background ",
-    medium:
-      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 bg-background ",
-    large:
-      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 bg-background ",
-  }
-  return (
-    <div
-      dir={isArabic ? "rtl" : "ltr"}
-      className={clsx(
-        currentPlan ? "border-primary" : "bg-background",
-        cardSizes[size],
-        "flex flex-col gap-4 rounded border-2 p-4"
-      )}
-    >
-      <h5 className="text-md 0 font-bold text-primary/70">
-        {props.texts.title}
-      </h5>
-      <div className=" text-primary/ flex  items-baseline">
-        <>
-          <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-primary/70">
-          / {props.texts.cycleText}
-        </span>
-      </div>
-      <h5 className="text-md  font-normal text-primary/70">
-        {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-label="Check Icon"
-                  aria-hidden="true"
-                  className="m-2 h-5 w-5 flex-shrink-0 text-primary"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <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-primary/70 ">
-                  {feature.text}
-                </span>
-              </li>
-            )
-          })}
-        </ul>
-      )}
-      <Button
-        onClick={props.onPlanClicked}
-        disabled={currentPlan}
-        className="w-full"
-      >
-        {props.texts.buttonText}
-      </Button>
-    </div>
-  )
-}

package/src/elements/HawaRadio.tsx

@@ -1,203 +0,0 @@
-import React, { useState, FC, useRef, useEffect } from "react"
-import { cn } from "../util"
-
-type RadioTypes = {
-  orientation?: "vertical" | "horizontal"
-  design?: "default" | "tabs" | "cards" | "bordered"
-  options?: {
-    value: any
-    label: any
-    disabled?: any
-    sublabel?: any
-    icon?: any
-  }[]
-  width?: "default" | "full"
-  onChangeTab?: any
-  defaultValue?: any
-}
-export const HawaRadio: FC<RadioTypes> = ({
-  design = "default",
-  width = "default",
-  orientation = "horizontal",
-  ...props
-}) => {
-  const [selectedOption, setSelectedOption] = useState(props.defaultValue)
-  let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-primary-foreground bg-primary  active dark:bg-primary "
-  let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full transition-all hover:bg-primary/10 dark:bg-background bg-primary/5  hover:text-gray-900  dark:hover:bg-primary/10 dark:hover:text-white dark:bg-primary/5"
-  let orientationStyle = {
-    horizontal: "flex flex-row",
-    vertical: "flex flex-col",
-  }
-  let widthStyle = {
-    default: "max-w-fit",
-    full: "w-full",
-  }
-  const [parentDirection, setParentDirection] = useState(null)
-  const ref = useRef(null)
-
-  useEffect(() => {
-    if (ref.current && ref.current.parentNode) {
-      const dir = window.getComputedStyle(ref.current.parentNode).direction
-      setParentDirection(dir)
-    }
-  })
-
-  switch (design) {
-    case "tabs":
-      return (
-        <ul
-          ref={ref}
-          className={cn(
-            props.options?.length > 2
-              ? "flex-wrap xs:max-w-full xs:flex-nowrap"
-              : "",
-            "select-none whitespace-nowrap rounded  border text-center text-sm font-medium",
-            widthStyle[width],
-            orientationStyle[orientation]
-          )}
-        >
-          {props.options?.map((opt: any, o) => (
-            <li
-              aria-current="page"
-              onClick={() => {
-                setSelectedOption(opt.value)
-                props.onChangeTab(opt.value)
-              }}
-              className={cn(
-                "w-full cursor-pointer ",
-                orientation === "horizontal" &&
-                  parentDirection === "ltr" &&
-                  "rounded-none first:rounded-l last:rounded-r",
-                orientation === "horizontal" &&
-                  parentDirection === "rtl" &&
-                  "rounded-none first:rounded-r last:rounded-l",
-                orientation === "vertical" &&
-                  "rounded-none first:rounded-t last:rounded-b",
-
-                "last flex flex-row items-center justify-center gap-2 ",
-                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                // "bg-red-500"
-              )}
-              key={o}
-            >
-              {opt.icon && opt.icon}
-              {opt.label}
-            </li>
-          ))}
-        </ul>
-      )
-    case "bordered":
-      return (
-        <div className={cn(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={cn(
-                    "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={cn(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={cn(
-                  "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:peer-checked:text-primary",
-                  opt.disabled
-                    ? "opacity-50"
-                    : "cursor-pointer hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                )}
-              >
-                <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"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M1 5h12m0 0L9 1m4 4L9 9"
-                  />
-                </svg> */}
-              </label>
-            </li>
-          ))}
-        </ul>
-      )
-
-    default:
-      return (
-        <div className={cn(orientationStyle[orientation], "gap-2")}>
-          {props.options.map((opt, i) => (
-            <div
-              className="radio-item radio-item-default  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={cn(
-                  "text-sm font-medium dark:text-white",
-                  opt.disabled
-                    ? "text-gray-400"
-                    : "cursor-pointer text-gray-900"
-                )}
-              >
-                {opt.label}
-              </label>
-            </div>
-          ))}
-        </div>
-      )
-  }
-}

package/src/elements/HawaRange.tsx

@@ -1,49 +0,0 @@
-import React, { FC, useState } from "react"
-
-type RangeTypes = {
-  value?: any
-  handleChange?: any
-  startElement?: any
-  endElement?: any
-  label?: string
-  min?: any
-  max?: any
-}
-
-export const HawaRange: FC<RangeTypes> = ({
-  value,
-  handleChange,
-  startElement,
-  endElement,
-  label,
-  ...props
-}) => {
-  const [rangeValue, setRangeValue] = 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 bg-gray-200 dark:bg-gray-700"
-        />
-        <div className="ml-2">{endElement}</div>{" "}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaSearchBar.tsx

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