@sikka/hawa 0.0.212 → 0.0.213

package/src/elements/DraggableCard.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react"
+
 type DraggableCardTypes = {
   children: ReactElement
 }
@@ -7,7 +8,7 @@ export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
   props
 ) => {
   return (
-    <div className="bg-layoutPrimary-500 flex flex-row rounded p-4">
+    <div className="flex flex-row rounded bg-layoutPrimary-500 p-4">
       <button
         className="inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"

package/src/elements/HawaAccordion.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React from "react"
+import clsx from "clsx"
 
 type AccordionItemTypes = {
   title: any

package/src/elements/HawaChip.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React from "react"
+import clsx from "clsx"
 
 type TChipTypes = {
   label: string
@@ -9,6 +9,7 @@ type TChipTypes = {
   dot?: boolean
   dotType?: "available" | "unavailable"
 }
+
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({
   size = "normal",
   label,

package/src/elements/HawaColorPicker.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 
 type ColorPickerTypes = {
   color?: any
-  handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
+  handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
@@ -10,7 +10,7 @@ export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
 ) => {
   const [selectedColor, setSelectedColor] = useState(props.color)
   return (
-    <div className={`flex w-fit flex-row p-0`}>
+    <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"
@@ -29,10 +29,8 @@ 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-tr-lg rounded-br-lg pr-2 pl-2"
       />
     </div>
   )
 }
-
-

package/src/elements/HawaItemCard.tsx

@@ -1,6 +1,5 @@
+import React, { useEffect, useState } from "react"
 import clsx from "clsx"
-import React, { useEffect } from "react"
-import { useState } from "react"
 import { HawaMenu } from "./HawaMenu"
 
 interface ItemCardTypes {

package/src/elements/HawaMenu.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React, { ReactNode, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
 
 // TODO: add width to decrease width
 
@@ -28,7 +28,6 @@ interface TMenuTypes {
 type MenuItems = {
   icon?: JSX.Element
   label: string
-  // action?: (item: any) => void
   action?: (e: any) => void
   isButton?: boolean
   element?: any
@@ -70,7 +69,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
       document.removeEventListener("click", handleClickOutside, true)
     }
   }, [onClickOutside])
-  
+
   let defaultStyles =
     "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
   let sizeStyles = {

package/src/elements/HawaModal.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React, { ReactElement, useEffect } from "react"
+import clsx from "clsx"
 
 type ModalTypes = {
   open: boolean

package/src/elements/HawaPanelTabs.tsx

@@ -2,13 +2,7 @@ import React, { useState } from "react"
 
 type PanelTabsTypes = {
   defaultValue: any
-  options: any
-  //   options: PropTypes.arrayOf(
-  //     PropTypes.shape({
-  //       label: PropTypes.string,
-  //       value: PropTypes.string,
-  //     })
-  //   ),
+  options: [{ label: string; value: string }]
   lang: any
   handleChange: any
   location: any

package/src/elements/HawaPricingCard.tsx

@@ -4,6 +4,7 @@ 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"
@@ -94,13 +95,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
           })}
         </ul>
       )}
-      {/* <button
-        disabled={currentPlan}
-        type="button"
-        className="inline-flex w-full justify-center rounded 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.texts.buttonText}
-      </button> */}
       <HawaButton
         onClick={props.onPlanClicked}
         margins="none"

package/src/elements/HawaRadio.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React, { useState } from "react"
+import clsx from "clsx"
 
 type RadioTypes = {
   options?: [

package/src/elements/HawaRange.tsx

@@ -5,7 +5,7 @@ type RangeTypes = {
   handleChange?: any
   startElement?: any
   endElement?: any
-  label?: any
+  label?: string
   min?: any
   max?: any
 }

package/src/elements/HawaSelect.tsx

@@ -2,32 +2,8 @@ import clsx from "clsx"
 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
-  size?: "small" | "normal" | "large"
-}
-const Option: React.FunctionComponent<OptionTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  size = "normal",
-  ...props
-}) => (
-  <div
-    ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded  p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
-    {...innerProps}
-  >
-    {children}
-  </div>
-)
 
+// The select bar
 type ControlTypes = {
   cx: any
   children: any
@@ -64,6 +40,7 @@ const Control: React.FunctionComponent<ControlTypes> = ({
     </div>
   )
 }
+// The options container
 type MenuTypes = {
   cx: any
   children: any
@@ -81,7 +58,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 }) => {
   return (
     <div
-      className="absolute z-10 mt-2 w-full rounded bg-white ring-1 ring-blue-200"
+      className="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}
@@ -90,14 +67,40 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
     </div>
   )
 }
-
+// The single options
+type OptionTypes = {
+  cx: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+  size?: "small" | "normal" | "large"
+}
+const Option: React.FunctionComponent<OptionTypes> = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  size = "normal",
+  ...props
+}) => (
+  <div
+    ref={innerRef}
+    className="flex flex-row items-center justify-between rounded p-1 px-2 hover:bg-buttonPrimary-500 hover:text-white"
+    {...innerProps}
+  >
+    {children}
+  </div>
+)
+// The main element
 type SelectTypes = {
-  label?: any
-  isCreatable?: any
+  label?: string
   options?: any[any]
-  isClearable?: any
-  isMulti?: any
-  isSearchable?: any
+  isCreatable?: boolean
+  isClearable?: boolean
+  isMulti?: boolean
+  isSearchable?: boolean
   onChange?: any
   helperText?: any
   onInputChange?: any
@@ -106,15 +109,14 @@ type SelectTypes = {
   value?: any
   children?: any
   getOptionLabel?: any
-  // size?
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
-    <div className="">
+    <div>
       {props.label && (
-        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+        <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
-        </label>
+        </div>
       )}
       {!props.isCreatable && (
         <Select

package/src/elements/HawaSettingsRow.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { HawaTypography } from "./HawaTypography"
 import { HawaTextField } from "./HawaTextField"
 import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"
@@ -7,7 +6,7 @@ import { HawaRange } from "./HawaRange"
 import { HawaRadio } from "./HawaRadio"
 
 type SettingsRowTypes = {
-  settingsLabel: any
+  settingsLabel: string
   settingsType: "text" | "radio" | "boolean" | "color" | "range"
   radioProps: {
     defaultValue: any
@@ -32,10 +31,13 @@ export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
   radioProps,
 }) => {
   return (
-    <div className="my-0.5 flex max-h-fit flex-row items-center justify-between rounded bg-white px-4 py-2 pr-2 align-middle">
-      <HawaTypography>{settingsLabel}</HawaTypography>
+    <div className="my-0.5  flex h-20 max-h-fit flex-row items-center justify-between rounded bg-white p-6 align-middle">
+      <div>
+        <div>{settingsLabel}</div>
+        <div className="text-sm">Text here like a description</div>
+      </div>
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
-      {settingsType === "boolean" && <HawaSwitch />}
+      {settingsType === "boolean" && <HawaSwitch size="large" />}
       {settingsType === "range" && <HawaRange {...rangeProps} />}
       {settingsType === "color" && <HawaColorPicker {...colorProps} />}
       {settingsType === "radio" && <HawaRadio {...radioProps} />}

package/src/elements/HawaSnackbar.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React, { FC, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
 type THawaSnackBar = {

package/src/elements/HawaSpinner.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React from "react"
+import clsx from "clsx"
 
 type SpinnerTypes = {
   size?: "button" | "sm" | "normal" | "lg" | "xl"
@@ -21,7 +21,7 @@ export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = ({
       <div
         className={clsx(
           sizeStyles[size],
-          "animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"
+          "animate-spin rounded-full border-4 border-gray-400 border-t-white text-white"
         )}
       ></div>
     </div>

package/src/elements/HawaSwitch.tsx

@@ -1,10 +1,22 @@
 import React from "react"
+import clsx from "clsx"
 
 type SwitchTypes = {
   text?: any
+  size?: "small" | "normal" | "large"
 }
 
-export const HawaSwitch: React.FunctionComponent<SwitchTypes> = (props) => {
+export const HawaSwitch: React.FunctionComponent<SwitchTypes> = ({
+  size = "normal",
+  ...props
+}) => {
+  let sizeStyles = {
+    small: "",
+    normal:
+      "peer-checked:after:translate-x-full h-6 w-11 after:top-[2px] after:left-[2px] after:h-5 after:w-5 ",
+    large:
+      "peer-checked:after:translate-x-[2.445rem]  h-10 w-20 after:top-[2px] after:left-[2px] after:h-9 after:w-9",
+  }
   return (
     <label
       htmlFor="default-toggle"
@@ -16,7 +28,12 @@ export const HawaSwitch: React.FunctionComponent<SwitchTypes> = (props) => {
         id="default-toggle"
         className="peer sr-only"
       />
-      <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
+      <div
+        className={clsx(
+          sizeStyles[size],
+          "peer rounded-full bg-gray-200 after:absolute  after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-buttonPrimary-500  peer-checked:after:border-white  dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-buttonPrimary-700"
+        )}
+      ></div>
       {props.text && (
         <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.text}

package/src/elements/HawaTable.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from "react"
-import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
 import { HawaTextField } from "./HawaTextField"
 import { HawaButton } from "./HawaButton"
 import { FaSearch } from "react-icons/fa"
+import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
+
 // TODO: translate header tools and make it more customizable
 // TODO: pass the onSearch handler to the parent
+
 type TableTypes = {
   columns: any[string]
   actions?: ActionItems[][]

package/src/elements/HawaTabs.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx"
 import React, { useState } from "react"
+
 // TODO: fix wrapping issue when small screen
+
 type TabsTypes = {
   options?: any
   onChangeTab?: any

package/src/elements/HawaTextField.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import clsx from "clsx"
+
 // TODO: make icon based on direction
 // TODO: Preferebly usse context to pass direction rtl | ltr
 

package/src/elements/HawaTooltip.tsx

@@ -1,8 +1,6 @@
 import clsx from "clsx"
 import React, { useEffect, useRef, useState } from "react"
 
-// TODO: fix it in RTL
-
 type THawaToolTip = {
   children?: React.ReactElement
   content?: string

package/src/elements/InvoiceAccordion.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import clsx from "clsx"
 import { HiChevronRight } from "react-icons/hi"
-import { HawaChip } from "./HawaChip"
 import { BsThreeDotsVertical } from "react-icons/bs"
+import { HawaChip } from "./HawaChip"
 import { HawaMenu } from "./HawaMenu"
 
 type InvoiceAccordionTypes = {
@@ -19,9 +19,9 @@ type InvoiceAccordionTypes = {
     amount: string
     price: string
   }
-  invoiceTitle: any
-  invoiceSubtitle: any
-  invoiceDescription?: any
+  invoiceTitle: string
+  invoiceSubtitle: string
+  invoiceDescription?: string
   invoiceActions?: {
     icon?: JSX.Element
     label: string
@@ -29,7 +29,7 @@ type InvoiceAccordionTypes = {
     isButton?: boolean
     element?: any
   }[][]
-  total: string
+  total: any
   direction?: "rtl" | "ltr"
   status?: "paid" | "pending" | "overdue"
 }

package/src/layout/AppSidebar.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React from "react"
 
 interface Props {
   isOpen: boolean

package/src/layout/HawaAppLayout.tsx

@@ -1,10 +1,11 @@
-import clsx from "clsx"
 import React, { useEffect, useRef, useState } from "react"
-import useDiscloser from "../hooks/useDiscloser"
-import { HawaMenu } from "../elements"
+import clsx from "clsx"
 import { HiMenu } from "react-icons/hi"
-import useBreakpoint from "../hooks/useBreakpoint"
 import { FaChevronRight } from "react-icons/fa"
+import useDiscloser from "../hooks/useDiscloser"
+import useBreakpoint from "../hooks/useBreakpoint"
+import { HawaMenu } from "../elements"
+
 // TODO: when no navbar, the drawer can't be opened
 // TODO: when no pagetitle, navbar gets messy
 

package/src/layout/HawaContainer.tsx

@@ -31,7 +31,6 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
     <div
       className={clsx(
         defaultStyle,
-        // "shadow-3xl",
         maxWidthStyles[maxWidth],
         variantStyles[variant],
         centered ? "flex items-center text-center" : ""

package/src/layout/HawaSiteLayout.tsx

@@ -1,10 +1,9 @@
 import clsx from "clsx"
 import React, { useEffect, useRef, useState } from "react"
 import useDiscloser from "../hooks/useDiscloser"
-import { HawaMenu } from "../elements"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { FaChevronRight } from "react-icons/fa"
+
 type HawaSiteLayoutTypes = {
   navItems: {
     label: string
@@ -29,7 +28,6 @@ type HawaSiteLayoutTypes = {
 export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
   direction = "rtl",
   navigationSize = "md",
-
   ...props
 }) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)

package/src/layout/SimpleGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "@storybook/addons"
-import clsx from "clsx"
 import { FC, ReactNode } from "react"
+import clsx from "clsx"
 
 type TSimpleGrid = {
   columns: number
@@ -23,7 +23,6 @@ const SimpleGrid: FC<TSimpleGrid> = ({
   const grid_spacing_x = "gap-x-" + spacingX
   const grid_spacing_y = "gap-y-" + spacingY
 
-
   return (
     <div
       className={clsx(
@@ -31,7 +30,7 @@ const SimpleGrid: FC<TSimpleGrid> = ({
         cols_num,
         spacing ?? grid_spacing,
         grid_spacing_x,
-       grid_spacing_y
+        grid_spacing_y
       )}
     >
       {children}