@sikka/hawa 0.0.94 → 0.0.96

package/src/blocks/Pricing/PricingPlans.js

@@ -1,88 +0,0 @@
-import React, { useState } from "react";
-import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
-import PropTypes from "prop-types";
-
-export const PricingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState("sar");
-  const [currentCycle, setCurrentCycle] = useState("monthly");
-  let cycleOptions = [
-    { label: `Monthly`, value: `monthly` },
-    { label: `3 Months`, value: `3-months` },
-    { label: `6 Months`, value: `6-months` },
-    { label: `Annually`, value: `annually` }
-  ];
-  let currencyOptions = [
-    { label: `USD`, value: `usd` },
-    { label: `SAR`, value: `sar` }
-  ];
-  let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
-  let inactiveTabStyle =
-    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
-  return (
-    <div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          marginBottom: 10
-        }}
-      >
-        <HawaTabs
-          defaultValue={currentCycle}
-          options={[
-            { label: `Monthly`, value: `monthly` },
-            { label: `3 Months`, value: `3-months` },
-            { label: `6 Months`, value: `6-months` },
-            { label: `Annually`, value: `annually` }
-          ]}
-          onChangeTab={(e) => setCurrentCycle(e)}
-        />
-        <HawaTabs
-          defaultValue={currentCurrency}
-          options={[
-            { label: `USD`, value: `usd` },
-            { label: `SAR`, value: `sar` }
-          ]}
-          onChangeTab={(e) => setCurrentCurrency(e)}
-        />
-      </div>
-
-      <div className="flex flex-row">
-        {props.plans.map((plan) => {
-          return (
-            <HawaPricingCard
-              lang={props.lang}
-              {...plan}
-              currency={currentCurrency}
-              cycleText={currentCycle}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-PricingPlans.propTypes = {
-  /**
-   * An array of the pricing plans
-   */
-  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
-    })
-  ),
-  lang: PropTypes.string
-};

package/src/elements/DraggableCard.js

@@ -1,24 +0,0 @@
-import React from "react";
-
-export const DraggableCard = (props) => {
-  return (
-    <div className="flex flex-row bg-blue-300 rounded-xl p-4">
-      <button
-        className="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-        type="button"
-      >
-        <svg
-          className="w-6 h-6"
-          aria-hidden="true"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-        </svg>
-      </button>
-
-      <div className="p-4">{props.children}</div>
-    </div>
-  );
-};

package/src/elements/HawaAlert.js

@@ -1,41 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const HawaAlert = (props) => {
-  let severities = {
-    info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
-    warning:
-      "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
-    error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
-    success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800"
-  };
-
-  return (
-    <div
-      className={
-        "flex flex-col p-4 mb-4 text-sm rounded-lg" +
-        " " +
-        severities[props.severity]
-      }
-      role="alert"
-    >
-      <span className="font-medium">{props.title}</span>
-      <span>{" " + props.text}</span>
-    </div>
-  );
-};
-HawaAlert.propTypes = {
-  /**
-   * The severity of the alert. This defines the color and icon used.
-   */
-  severity: PropTypes.oneOf(["error", "info", "success", "warning"]),
-  /**
-   * The title of the alert in bold. Can be left empty.
-   */
-  title: PropTypes.string,
-  /**
-   * The text of the alert.
-   */
-  text: PropTypes.string,
-  hideIcon: PropTypes.bool
-};

package/src/elements/HawaButton.js

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { HawaTooltip } from "./HawaTooltip";
-import PropTypes from "prop-types";
-
-export const HawaButton = ({
-  tooltip,
-  icon,
-  iconOnly,
-  text,
-  isLoading = false,
-  loadingText,
-  ...props
-}) => {
-  const [loading, setLoading] = useState(isLoading);
-  let iconStyle = "pr-2 flex flex-col justify-center items-center";
-  let styles = `${
-    isLoading ? "cursor-not-allowed" : "cursor-pointer"
-  } m-1 px-2.5 py-2.5 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300       font-medium rounded-lg        text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-  if (props.fullWidth) {
-    styles =
-      "my-1 w-full flex justify-center text-white bg-primary-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  }
-  if (props.normalWidth) {
-    styles =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  }
-  if (iconOnly) {
-    iconStyle = "flex flex-col justify-center items-center";
-  }
-  return (
-    <button
-      data-tooltip-target={tooltip}
-      className={styles}
-      disabled={isLoading}
-      {...props}
-    >
-      {!isLoading ? (
-        <>
-          {tooltip ? (
-            <HawaTooltip tooltipID={tooltip} content={tooltip} />
-          ) : null}
-          {icon ? <div className={iconStyle}>{icon}</div> : null}
-          {!iconOnly && text}
-        </>
-      ) : (
-        <div className="flex flex-row gap-x-3">
-          <div className="border-2 border-gray-400 border-t-white animate-spin  text-white rounded-full h-5 w-5"></div>
-          {/* <div>{loadingText}</div> */}
-        </div>
-      )}
-    </button>
-  );
-};
-
-HawaButton.PropTypes = {
-  tooltip: PropTypes.string,
-  icon: PropTypes.element,
-  iconOnly: PropTypes.bool,
-  text: PropTypes.string,
-  isLoading: PropTypes.bool,
-  loadingText: PropTypes.string
-};

package/src/elements/HawaCheckbox.js

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const HawaCheckbox = (props) => {
-  return (
-    <div className="flex items-top h-full">
-      <input
-        type="checkbox"
-        value=""
-        className="w-4 h-5 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-        {...props}
-      />
-      {(props.label || props.helperText) && (
-        <div className="flex flex-col items-stat">
-          {props.label && (
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-              {props.label}
-            </label>
-          )}
-          {props.helperText && (
-            <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
-              {props.helperText}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/elements/HawaChip.js

@@ -1,9 +0,0 @@
-import React from "react";
-
-export const HawaChip = (props) => {
-  return (
-    <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
-      {props.label}
-    </span>
-  );
-};

package/src/elements/HawaColorPicker.js

@@ -1,57 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-// const ColorInput = styled.input`
-//   -webkit-appearance: none;
-//   -moz-appearance: none;
-//   appearance: none;
-//   border: none;
-//   cursor: pointer;
-//   height: 35px;
-//   border-radius: ${(props) => props.borderRadius}px;
-//   background-color: ${(props) => props.value};
-//   &::-webkit-color-swatch {
-//     border: none;
-//   }
-//   &::-moz-color-swatch {
-//     border: none;
-//   }
-// `;
-// const ColorText = styled.input`
-//   max-width: 70px;
-//   -webkit-appearance: none;
-//   -moz-appearance: none;
-//   appearance: none;
-//   border: none;
-//   //   height: 30px;
-//   padding: 10px;
-//   border-radius: ${(props) => props.borderRadius}px;
-//   &::-webkit-color-swatch {
-//     border: none;
-//   }
-//   &::-moz-color-swatch {
-//     border: none;
-//   }
-// `;
-export const HawaColorPicker = (props) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "row" }}>
-      {/* <ColorText
-        type={"text"}
-        value={props.color}
-        onChange={props.handleChange}
-      />
-      <div style={{ width: 10 }} />
-      <ColorInput
-        type={"color"}
-        value={props.color}
-        onChange={props.handleChange}
-      /> */}
-    </div>
-  );
-};
-
-HawaColorPicker.propTypes = {
-  color: PropTypes.string,
-  handleChange: PropTypes.func
-};

package/src/elements/HawaDrawer.js

@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { AiOutlineClose } from "react-icons/ai";
-import clsx from "clsx";
-
-export const HawaDrawer = ({ open, setOpen, position, heading, children }) => {
-  const [openDrawer, setOpenDrawer] = useState(open);
-
-  const leftDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r";
-  const rightDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 right-0 border-l";
-
-  //   useEffect(() => {
-  //     setOpenDrawer(true);
-  //   }, [open]);
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type.name == "DrawerHeader") {
-      return React.cloneElement(child, {
-        closeButton: setOpenDrawer,
-        children: child.props.children
-      });
-    }
-    if (React.isValidElement(child) && child.type.name == "DrawerBody") {
-      return React.cloneElement(child, { children: child.props.children });
-    }
-    if (React.isValidElement(child) && child.type.name == "DrawerFooter") {
-      return React.cloneElement(child, { children: child.props.children });
-    }
-  });
-
-  const drawerClass =
-    open && position == "left"
-      ? clsx("block", leftDrawer)
-      : open && position == "right"
-      ? clsx("block", rightDrawer)
-      : "hidden";
-
-  return <div className={drawerClass}>{childrenWithProps}</div>;
-};
-
-export const DrawerHeader = ({ children, closeButton }) => {
-  return (
-    <div className="  w-full flex flex-row justify-between items-center py-4 px-1 border-b">
-      {children}
-      <div
-        className="justify-self-end hover:cursor-pointer border p-1 rounded"
-        onClick={() => {
-          closeButton(false);
-        }}
-      >
-        <AiOutlineClose size={20} strokeWidth={2} />
-      </div>
-    </div>
-  );
-};
-
-export const DrawerBody = ({ children }) => {
-  return <div className="p-1">{children}</div>;
-};
-
-export const DrawerFooter = ({ children }) => {
-  return (
-    <div className="absolute w-full py-4 px-1 border-t bottom-0">
-      {children}
-    </div>
-  );
-};

package/src/elements/HawaMenu.js

@@ -1,59 +0,0 @@
-import PropTypes from "prop-types";
-
-export const HawaMenu = ({
-  popMenuID,
-  menuItems,
-  withHeader,
-  withIcons,
-  headerTitle,
-  headerSubtitle
-}) => {
-  return (
-    <div
-      id={popMenuID}
-      className="z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700"
-    >
-      {withHeader && (
-        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
-          <div>{headerTitle}</div>
-          <div class="font-medium truncate">{headerSubtitle}</div>
-        </div>
-      )}
-      {menuItems.map((group) => {
-        return (
-          <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
-            {group.map((item) => {
-              return (
-                <li
-                  onClick={item.action}
-                  className={
-                    item.button
-                      ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
-                      : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-                  }
-                >
-                  {withIcons && (
-                    <div className="mr-2 rtl:ml-2">{item.icon}</div>
-                  )}
-                  {item.label}
-                </li>
-              );
-            })}
-          </ul>
-        );
-      })}
-    </div>
-  );
-};
-
-HawaMenu.propTypes = {
-  anchor: PropTypes.any,
-  handleClose: PropTypes.func,
-  menuItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      icon: PropTypes.element,
-      label: PropTypes.string,
-      action: PropTypes.func
-    })
-  )
-};

package/src/elements/HawaPhoneInput.js

@@ -1,106 +0,0 @@
-import { useState } from "react";
-import Countries from "../../countries";
-import Select from "react-select";
-const Option = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  ...props
-}) => (
-  <div
-    ref={innerRef}
-    className="m-2 p-1 px-3 rounded-lg flex flex-row items-center justify-between hover:bg-blue-200"
-    {...innerProps}
-  >
-    <img className="h-8 w-8" src={props.data.image}></img>
-    {children}
-  </div>
-);
-
-export const HawaPhoneInput = ({ preferredCountry, label }) => {
-  const [code, setCode] = useState(preferredCountry ?? "");
-  const [selectedCountry, setSelectedCountry] = useState("+966");
-  const [tel, setTel] = useState("");
-  const handleChangePhone = (phone) => {
-    if (phone.length == 0) {
-      setTel("");
-      setCode("");
-      return;
-    }
-    if (!phone.startsWith("+")) phone = "+".concat(phone);
-    if (phone.length >= 5) {
-      setTel(phone);
-      return;
-    }
-    let findDialCode = Countries.find((country) => country.dial_code == phone);
-    if (findDialCode != undefined && findDialCode != null) {
-      setCode(findDialCode.code);
-    }
-    setTel(phone);
-  };
-
-  return (
-    <div className="flex flex-col mb-3">
-      {label && (
-        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-          {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={Countries[0]}
-          onInputChange={() => console.log("changed to")}
-          onChange={(newValue, action) => {
-            console.log("test n", newValue);
-            setSelectedCountry(newValue);
-          }}
-        />
-        <input
-          type="number"
-          className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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 border-l-0"
-        />
-      </div>
-    </div>
-  );
-};

package/src/elements/HawaRadio.js

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

package/src/elements/HawaRange.js

@@ -1,54 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const HawaRange = ({
-  value,
-  handleChange,
-  startElement,
-  endElement,
-  label,
-  ...props
-}) => {
-  const [rangeValue, setRangeValue] = React.useState(value);
-
-  return (
-    <div {...props}>
-      {label && (
-        <label
-          htmlFor="default-range"
-          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          {label}
-        </label>
-      )}
-      <div className="flex flex-row justify-center items-center w-fit">
-        <div className="mr-2">{startElement}</div>{" "}
-        <input
-          id="default-range"
-          type="range"
-          value={rangeValue}
-          onChange={(e) => {
-            setRangeValue(e.target.value);
-            handleChange(e);
-          }}
-          className="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-        />
-        <div className="ml-2">{endElement}</div>{" "}
-      </div>
-    </div>
-  );
-};
-HawaRange.propTypes = {
-  /**
-   * The element at the side where the range value is 0
-   * Can be an icon
-   */
-  startElement: PropTypes.element,
-  value: PropTypes.number,
-  /**
-   * The element at the side where the range value is 100
-   */
-  endElement: PropTypes.element,
-  handleChange: PropTypes.func,
-  label : PropTypes.string
-};

package/src/elements/HawaSearchBar.js

@@ -1,15 +0,0 @@
-import React from "react";
-import { HawaTextField } from "./HawaTextField";
-
-export const HawaSearchBar = (props) => {
-  return (
-    <HawaTextField
-      // endAdornment={
-      //   <InputAdornment position="start">
-      //     <Search />
-      //   </InputAdornment>
-      // }
-      {...props}
-    />
-  );
-};

package/src/elements/HawaSettingsRow.js

@@ -1,34 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { HawaTypography } from "./HawaTypography";
-import { HawaTextField } from "./HawaTextField";
-import { HawaSwitch } from "./HawaSwitch";
-import { HawaColorPicker } from "./HawaColorPicker";
-import { HawaRange } from "./HawaRange";
-import { HawaCheckbox } from "./HawaCheckbox";
-import { HawaTabs } from "./HawaTabs";
-
-export const HawaSettingsRow = (props) => {
-  return (
-    <div className="flex flex-row bg-white justify-between align-middle items-center p-2 rounded-xl my-2 h-14">
-      <HawaTypography>{props.settingsLabel}</HawaTypography>
-      {props.settingsType === "checkbox" && <HawaCheckbox {...props} />}
-      {props.settingsType === "text" && <HawaTextField {...props} />}
-      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
-      {props.settingsType === "range" && <HawaRange {...props} />}
-      {props.settingsType === "color" && <HawaColorPicker {...props} />}
-      {props.settingsType === "radio" && <HawaTabs {...props} />}
-    </div>
-  );
-};
-
-HawaSettingsRow.propTypes = {
-  settingsLabel: PropTypes.string,
-  settingsType: PropTypes.oneOf([
-    "checkbox",
-    "text",
-    "radio",
-    "boolean",
-    "color"
-  ])
-};