@sikka/hawa 0.0.243 → 0.0.244

package/src/elements/HawaAccordion.tsx

@@ -1,24 +1,16 @@
-import React from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 
 type AccordionTypes = {
-  /**
-   * The title of the clickable accordion bar
-   */
+  /** The title of the clickable accordion bar   */
   title: string
-  /**
-   * The content inside the accordion to be visible once the bar is clicked
-   */
+  /** The content inside the accordion to be visible once the bar is clicked   */
   content: any
-  /**
-   * The index of each accordion, must be unique for each usage of this component
-   */
+  /** The index of each accordion, must be unique for each usage of this component   */
   index: any
 }
-export const HawaAccordion: React.FunctionComponent<AccordionTypes> = (
-  props
-) => {
-  const [collapse, setCollapse] = React.useState(false)
+export const HawaAccordion: FC<AccordionTypes> = (props) => {
+  const [collapse, setCollapse] = useState(false)
 
   return (
     <div className="h-fit w-full">

package/src/elements/HawaAdCard.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type AdCardTypes = {
   orientation: "vertical" | "horizontal"
@@ -7,10 +7,7 @@ type AdCardTypes = {
   imageURL: string
   handleHide: any
 }
-export const HawaAdCard: React.FunctionComponent<AdCardTypes> = ({
-  orientation,
-  ...props
-}) => {
+export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
   let cardStyles = {
     horizontal:
       "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",

package/src/elements/HawaCardInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 const CARDS = {

package/src/elements/HawaCheckbox.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 
 type TCheckBoxTypes = {
   centered?: boolean
@@ -10,9 +10,7 @@ type TCheckBoxTypes = {
   val?: boolean
 }
 
-export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
-  props
-) => {
+export const HawaCheckbox: FC<TCheckBoxTypes> = (props) => {
   const [isChecked, setVal] = useState(props.val)
 
   useEffect(() => {

package/src/elements/HawaChip.tsx

@@ -1,18 +1,24 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type TChipTypes = {
+  /** The text inside the chip */
   label: string
-  size?: "small" | "normal" | "large"
+  /** The small icon before the chip label  */
   icon?: JSX.Element
+  /** The color of the chip, must be a tailwind color */
   color?: string
+  /** The size of the chip */
+  size?: "small" | "normal" | "large"
+  /** Enable/Disable the dot before the label of the chip */
   dot?: boolean
+  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
   dotType?: "available" | "unavailable"
 }
 
-export const HawaChip: React.FunctionComponent<TChipTypes> = ({
-  size = "normal",
+export const HawaChip: FC<TChipTypes> = ({
   label,
+  size = "normal",
   icon,
   color,
   dot,

package/src/elements/HawaColorPicker.tsx

@@ -1,19 +1,19 @@
-import React, { useState } from "react"
+import { useState, FC, ChangeEvent } from "react"
 
 type ColorPickerTypes = {
+  /** The hex code for the color */
   color?: any
-  handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  /** Fires everytime the color changes */
+  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
-export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
-  props
-) => {
+export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
   const [selectedColor, setSelectedColor] = useState(props.color)
   return (
     <div className={`flex w-fit flex-row rounded border-2 border-gray-200 p-0`}>
       <div
         style={{ backgroundColor: selectedColor }}
-        className="rounded-tl-lg rounded-bl-lg"
+        className="rounded-bl-lg rounded-tl-lg"
       >
         <input
           type="color"
@@ -29,7 +29,7 @@ export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
       <input
         type="text"
         value={selectedColor}
-        className="w-24  rounded-tr-lg rounded-br-lg pr-2 pl-2"
+        className="w-24  rounded-br-lg rounded-tr-lg pl-2 pr-2"
       />
     </div>
   )

package/src/elements/HawaCopyrights.tsx

@@ -1,17 +1,19 @@
-import React from "react"
+import { FC } from "react"
 
 type CopyRightsTypes = {
-  withLogo?: boolean
-  lang?: any
+  /** A text used as the version of the app, for example: v1.0.0 */
   version?: string
+  /** Credit to the creator of the app, for example: Sikka Software */
   credits?: string
+  /** The URL of the logo in the copyrights */
   logoURL?: string
+  /** Enable/Disable the existance of the logo */
+  withLogo?: boolean
+  /** Fires when the logo is clicked, usually goes to the website of the creator of the app */
   onLogoClicked?: any
 }
 
-export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
-  props
-) => {
+export const HawaCopyrights: FC<CopyRightsTypes> = (props) => {
   return (
     <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
       {props.withLogo ? (

package/src/elements/HawaDatepicker.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import { FC, useState } from "react"
 
 type DatepickerTypes = {}
 

package/src/elements/HawaDrawer.tsx

@@ -1,7 +1,7 @@
-import React, { FC, ReactElement, ReactNode } from "react"
+import { FC, ReactElement, ReactNode } from "react"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
-
+// TODO: This element should either be removed or improved
 type TDrawerTypes = {
   open: boolean
   setOpen: any
@@ -13,7 +13,7 @@ type TDrawerTypes = {
   drawerFooter?: any
 }
 
-export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
+export const HawaDrawer: FC<TDrawerTypes> = ({
   open,
   setOpen,
   position,

package/src/elements/HawaIconCount.tsx

@@ -1,13 +1,13 @@
-import React from "react"
+import { FC } from "react"
 
 type IconCountTypes = {
-  icon: any
+  /** The icon of the counter */
+  icon: JSX.Element
+  /** The text next to the icon */
   count?: string
 }
 
-export const HawaIconCount: React.FunctionComponent<IconCountTypes> = (
-  props
-) => {
+export const HawaIconCount: FC<IconCountTypes> = (props) => {
   return (
     <div className="flex h-fit  flex-row items-center  gap-2 px-2">
       <div>{props.icon}</div>

package/src/elements/HawaItemCard.tsx

@@ -1,18 +1,21 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import { HawaButton } from "./HawaButton"
-import { FaReply } from "react-icons/fa"
 
 interface ItemCardTypes {
-  actions?: any
-  content?: any
   headerActions?: THeaderActions[][]
   header?: any
-  lang?: string
+  content?: any
+  /** a URL for the image of the card */
   cardImage?: string
+  /** a function that fires when the card is clicked anywhere */
   onCardClick?: any
-  counts?: any
+  /** a React node with HawaIconCount children to have counters at the bottom of the card */
+  counts?: JSX.Element
+  /** The action buttons on the bottom right of the card */
+  actions?: JSX.Element
+  /** The orientation of the card */
   orientation?: "horizontal" | "vertical"
   /** Enabling this blurs the image on hover and shows an action button */
   clickableImage?: boolean
@@ -30,7 +33,7 @@ type THeaderActions = {
   action?: (e: any) => void
   isButton?: boolean
 }
-export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
+export const HawaItemCard: FC<ItemCardTypes> = ({
   actions,
   counts,
   content,
@@ -147,9 +150,6 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
             {actions}
           </div>
         ) : null}
-        {/* {counts && (
-          <div className="flex justify-end rounded-b-lg">{counts}</div>
-        )} */}
       </div>
     </div>
   )

package/src/elements/HawaLandingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 
 type LandingCardTypes = {
   orientation: "vertical" | "horizontal"
@@ -15,7 +15,7 @@ type LandingCardTypes = {
   }
   buttonLink?: string
 }
-export const HawaLandingCard: React.FunctionComponent<LandingCardTypes> = ({
+export const HawaLandingCard: FC<LandingCardTypes> = ({
   orientation,
   ...props
 }) => {
@@ -54,7 +54,7 @@ export const HawaLandingCard: React.FunctionComponent<LandingCardTypes> = ({
         <div className="mt-2 text-lg font-medium">{props.texts.title} </div>
       )}
       {props.texts.description && (
-        <div className="mt-4 text-sm z-10">{props.texts.description}</div>
+        <div className="z-10 mt-4 text-sm">{props.texts.description}</div>
       )}
       {props.texts.linkText && (
         <div className="z-10 mt-6 text-sm underline underline-offset-8">

package/src/elements/HawaLogoButton.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type LogoButtonTypes = {
   lang?: any
@@ -16,9 +16,7 @@ type LogoButtonTypes = {
   onClick?: any
   buttonText?: any
 }
-export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
-  props
-) => {
+export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
   let isArabic = props.lang === "ar"
   let logoElement: any = ""
   switch (props.logo?.toLowerCase()) {

package/src/elements/HawaMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react"
+import { ReactNode, useEffect, useRef, useState, FC } from "react"
 import clsx from "clsx"
 
 // TODO: add width to decrease width
@@ -34,7 +34,7 @@ type MenuItems = {
   element?: any
 }
 
-export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
+export const HawaMenu: FC<TMenuTypes> = ({
   menuItems,
   withHeader,
   direction = "ltr",
@@ -165,7 +165,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
         )}
       >
         {withHeader && (
-          <div className="py-3 px-4 text-xs text-gray-900 dark:text-white">
+          <div className="px-4 py-3 text-xs text-gray-900 dark:text-white">
             <div>{headerTitle}</div>
             <div className="truncate font-medium">{headerSubtitle}</div>
           </div>
@@ -196,7 +196,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     }}
                     className={clsx(
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
+                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
                         : " flex  flex-row items-center rounded  rtl:flex-row-reverse ",
                       sizeStyles[size],
                       item.disabled

package/src/elements/HawaModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from "react"
+import { ReactElement, useEffect, FC } from "react"
 import clsx from "clsx"
 
 type ModalTypes = {
@@ -29,7 +29,7 @@ type ModalTypes = {
    */
   actions: any
 }
-export const HawaModal: React.FunctionComponent<ModalTypes> = ({
+export const HawaModal: FC<ModalTypes> = ({
   open,
   title,
   onClose,

package/src/elements/HawaPanelTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 
 type PanelTabsTypes = {
   defaultValue: any
@@ -7,9 +7,7 @@ type PanelTabsTypes = {
   handleChange: any
   location: any
 }
-export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
-  props
-) => {
+export const HawaPanelTabs: FC<PanelTabsTypes> = (props) => {
   const [value, setValue] = useState(props.defaultValue)
   return (
     <div>

package/src/elements/HawaPhoneInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import Countries from "../countries"
 import Select from "react-select"
 
@@ -10,7 +10,7 @@ type OptionTypes = {
   innerProps: any
   innerRef: any
 }
-const Option: React.FunctionComponent<OptionTypes> = ({
+const Option: FC<OptionTypes> = ({
   cx,
   children,
   getStyles,
@@ -39,9 +39,7 @@ type HawaPhoneInputTypes = {
   country?: any
   handleChange?: any
 }
-export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
-  props
-) => {
+export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
   const [selectedCountry, setSelectedCountry] = useState("+966")
 
   return (

package/src/elements/HawaPinInput.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 
 type PinInputTypes = {
   label?: string
@@ -8,7 +8,7 @@ type PinInputTypes = {
   width?: "normal" | "full"
   getPins?: any
 }
-export const HawaPinInput: React.FunctionComponent<PinInputTypes> = ({
+export const HawaPinInput: FC<PinInputTypes> = ({
   label,
   icon,
   digits,

package/src/elements/HawaPricingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "./HawaButton"
 
 // TODO: if feature.excluded is false, show gray and x
@@ -22,7 +22,7 @@ type PricingCardTypes = {
   size: "small" | "medium" | "large"
 }
 
-export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
+export const HawaPricingCard: FC<PricingCardTypes> = ({
   size = "medium",
   direction = "ltr",
   currentPlan = false,

package/src/elements/HawaRadio.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 
 type RadioTypes = {
@@ -11,7 +11,7 @@ type RadioTypes = {
   onChangeTab?: any
   defaultValue?: any
 }
-export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
+export const HawaRadio: FC<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
     "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 rounded active"

package/src/elements/HawaRange.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, useState } from "react"
 
 type RangeTypes = {
   value?: any
@@ -10,7 +10,7 @@ type RangeTypes = {
   max?: any
 }
 
-export const HawaRange: React.FunctionComponent<RangeTypes> = ({
+export const HawaRange: FC<RangeTypes> = ({
   value,
   handleChange,
   startElement,
@@ -18,7 +18,7 @@ export const HawaRange: React.FunctionComponent<RangeTypes> = ({
   label,
   ...props
 }) => {
-  const [rangeValue, setRangeValue] = React.useState(value)
+  const [rangeValue, setRangeValue] = useState(value)
 
   return (
     <div {...props}>

package/src/elements/HawaSearchBar.tsx

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

package/src/elements/HawaSelect.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
 
@@ -12,7 +12,7 @@ type ControlTypes = {
   innerRef: any
   size?: "small" | "normal" | "large"
 }
-const Control: React.FunctionComponent<ControlTypes> = ({
+const Control: FC<ControlTypes> = ({
   cx,
   children,
   getStyles,
@@ -48,7 +48,7 @@ type MenuTypes = {
   innerProps: any
   innerRef: any
 }
-const Menu: React.FunctionComponent<MenuTypes> = ({
+const Menu: FC<MenuTypes> = ({
   cx,
   children,
   getStyles,
@@ -76,7 +76,7 @@ type OptionTypes = {
   innerRef: any
   size?: "small" | "normal" | "large"
 }
-const Option: React.FunctionComponent<OptionTypes> = ({
+const Option: FC<OptionTypes> = ({
   cx,
   children,
   getStyles,
@@ -114,7 +114,7 @@ type SelectTypes = {
   getOptionLabel?: any
   disabled?: boolean
 }
-export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
+export const HawaSelect: FC<SelectTypes> = (props) => {
   return (
     <div>
       {props.label && (

package/src/elements/HawaSettingsRow.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
 import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"
@@ -45,7 +45,7 @@ type SettingsRowTypes = {
   }
 }
 
-export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
+export const HawaSettingsRow: FC<SettingsRowTypes> = ({
   settingsLabel,
   settingsType,
   settingsDescription,

package/src/elements/HawaSnackbar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from "react"
+import { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
@@ -86,7 +86,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           closed ? "opacity-0" : "opacity-100"
         )}
       >
-        <div className="w-full p-3  flex flex-col gap-2">
+        <div className="flex w-full  flex-col gap-2 p-3">
           <div className="text-sm font-bold">{title}</div>
           <div className="text-sm font-normal">{description}</div>
           {actions && (

package/src/elements/HawaSpinner.tsx

@@ -1,14 +1,11 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type SpinnerTypes = {
   size?: "button" | "sm" | "normal" | "lg" | "xl"
 }
 
-export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = ({
-  size = "sm",
-  ...props
-}) => {
+export const HawaSpinner: FC<SpinnerTypes> = ({ size = "sm", ...props }) => {
   let sizeStyles = {
     button: "h-4 w-4",
     sm: "h-6 w-6",

package/src/elements/HawaStats.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 
@@ -12,7 +12,7 @@ type StatTypes = {
   isLoading?: boolean
   handleClick?: () => void
 }
-export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
+export const HawaStats: FC<StatTypes> = (props) => {
   let defaultStyle = "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",

package/src/elements/HawaStepper.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 import { FaCheck } from "react-icons/fa"
 
@@ -8,7 +8,7 @@ type THawaTimeline = {
   orientation: "vertical" | "horizontal"
 }
 
-export const HawaStepper: React.FunctionComponent<THawaTimeline> = ({
+export const HawaStepper: FC<THawaTimeline> = ({
   orientation = "horizontal",
   ...props
 }) => {

package/src/elements/HawaStoreButtons.tsx

@@ -1,12 +1,10 @@
-import React from "react"
+import { FC } from "react"
 
 type StoreButtonsTypes = {
   store: "apple" | "google"
   mode: "dark" | "light"
 }
-export const HawaStoreButtons: React.FunctionComponent<StoreButtonsTypes> = (
-  props
-) => {
+export const HawaStoreButtons: FC<StoreButtonsTypes> = (props) => {
   return (
     <div className="flex justify-center">
       <div>
@@ -77,7 +75,7 @@ export const HawaStoreButtons: React.FunctionComponent<StoreButtonsTypes> = (
             </div>
           </div>
         ) : (
-          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-white border border-black text-black">
+          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-white text-black">
             <div className="mr-3">
               <svg viewBox="30 336.7 120.9 129.2" width="30">
                 <path

package/src/elements/HawaSwitch.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type SwitchTypes = {
@@ -6,10 +6,7 @@ type SwitchTypes = {
   size?: "small" | "normal" | "large"
 }
 
-export const HawaSwitch: React.FunctionComponent<SwitchTypes> = ({
-  size = "normal",
-  ...props
-}) => {
+export const HawaSwitch: FC<SwitchTypes> = ({ size = "normal", ...props }) => {
   let sizeStyles = {
     small: "",
     normal: