@sikka/hawa 0.0.211 → 0.0.213

package/src/elements/DragDropImages.tsx

@@ -29,178 +29,176 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   files,
   setFiles,
   setDeletedFiles,
+  onAcceptedFiles,
+  errorMessages,
   maxFiles,
   accept,
-  onAcceptedFiles,
   showPreview,
   onDeleteFile,
   onClearFiles,
   maxSize,
-  errorMessages,
   label,
-}) =>
-  // props
-  {
-    const [cmp, setCmp] = useState(0)
-    const [max, setMax] = useState<any>(0)
-    //const [thumbs, setThumbs] = useState("");
-    const {
-      getRootProps,
-      getInputProps,
-      fileRejections,
-      acceptedFiles,
-      isDragActive,
-    } = useDropzone({
-      multiple: true,
-      accept: accept,
-      maxSize: maxSize,
-      maxFiles: maxFiles,
-      onDrop: (acceptedFiles) => {
-        setFiles(
-          acceptedFiles.map((file, index) =>
-            Object.assign(file, {
-              preview: URL.createObjectURL(file),
-            })
-          )
+}) => {
+  const [cmp, setCmp] = useState(0)
+  const [max, setMax] = useState<any>(0)
+  //const [thumbs, setThumbs] = useState("");
+  const {
+    getRootProps,
+    getInputProps,
+    fileRejections,
+    acceptedFiles,
+    isDragActive,
+  } = useDropzone({
+    multiple: true,
+    accept: accept,
+    maxSize: maxSize,
+    maxFiles: maxFiles,
+    onDrop: (acceptedFiles) => {
+      setFiles(
+        acceptedFiles.map((file, index) =>
+          Object.assign(file, {
+            preview: URL.createObjectURL(file),
+          })
         )
-      },
-    })
-    useEffect(
-      () => () => {
-        files?.forEach((file: any) => {
-          URL.revokeObjectURL(file.preview)
-        })
-      },
-      [files]
-    )
-    useEffect(() => {
-      setFiles(acceptedFiles)
-    }, [acceptedFiles, cmp])
-    onClearFiles = () => {
-      acceptedFiles.length = 0
-      acceptedFiles.splice(0, acceptedFiles.length)
-      setFiles([])
-    }
-    useEffect(() => {
-      if (maxSize > 0) {
-        const k = 1024
-        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
-        const i = Math.floor(Math.log(maxSize) / Math.log(1024))
+      )
+    },
+  })
+  useEffect(
+    () => () => {
+      files?.forEach((file: any) => {
+        URL.revokeObjectURL(file.preview)
+      })
+    },
+    [files]
+  )
+  useEffect(() => {
+    setFiles(acceptedFiles)
+  }, [acceptedFiles, cmp])
+  onClearFiles = () => {
+    acceptedFiles.length = 0
+    acceptedFiles.splice(0, acceptedFiles.length)
+    setFiles([])
+  }
+  useEffect(() => {
+    if (maxSize > 0) {
+      const k = 1024
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+      const i = Math.floor(Math.log(maxSize) / Math.log(1024))
 
-        setMax(
-          parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
-        )
-      }
-    }, [maxSize])
-    const errs = fileRejections.map((rej, i) => {
-      return (
-        <HawaAlert
-          text={rej.file.name}
-          title={rej.errors[0].code}
-          severity="error"
-        />
+      setMax(
+        parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
       )
-    })
-    const thumbs = files?.map((file: any, index: any) => (
-      <div className="relative m-3 rounded ">
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
-            setCmp(Math.random)
-            onDeleteFile(file)
-          }}
-          type="button"
-          className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 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"
+    }
+  }, [maxSize])
+  const errs = fileRejections.map((rej, i) => {
+    return (
+      <HawaAlert
+        text={rej.file.name}
+        title={rej.errors[0].code}
+        severity="error"
+      />
+    )
+  })
+  const thumbs = files?.map((file: any, index: any) => (
+    <div className="relative m-3 rounded ">
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
+          setCmp(Math.random)
+          onDeleteFile(file)
+        }}
+        type="button"
+        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 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"
+      >
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <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>
+          <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
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            overflow: "hidden",
-            height: 100,
-            width: 100,
-            backgroundImage: `url(${file.preview})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            border: "1px solid black",
-          }}
-          className="rounded-lg"
-          key={file.name}
-        />
-      </div>
-    ))
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          height: 100,
+          width: 100,
+          backgroundImage: `url(${file.preview})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          border: "1px solid black",
+        }}
+        className="rounded-lg"
+        key={file.name}
+      />
+    </div>
+  ))
 
-    return (
-      <div>
-        {label && (
-          <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
-            {label}
-          </div>
-        )}
-        <div
-          {...getRootProps({})}
-          className="flex flex-col justify-center rounded border border-dashed border-black bg-white transition-all hover:bg-gray-100 "
-        >
-          <input {...getInputProps()} />
-          <div className="pt-4 text-center">{texts.clickHereToUpload}</div>
-          <div className="pb-4 text-center text-xs">
-            {texts.maxFileSize} {max}
-          </div>
-          <div className="flex justify-center ">
-            {acceptedFiles.length > 0 && (
-              <HawaButton
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onClearFiles(acceptedFiles)
-                }}
-              >
-                Clear All
-              </HawaButton>
-            )}
-          </div>
-          {thumbs && showPreview ? (
-            <aside
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                // marginTop: 10,
+  return (
+    <div>
+      {label && (
+        <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+          {label}
+        </div>
+      )}
+      <div
+        {...getRootProps({})}
+        className="flex flex-col justify-center rounded border border-dashed border-black bg-white transition-all hover:bg-gray-100 "
+      >
+        <input {...getInputProps()} />
+        <div className="pt-4 text-center">{texts.clickHereToUpload}</div>
+        <div className="pb-4 text-center text-xs">
+          {texts.maxFileSize} {max}
+        </div>
+        <div className="flex justify-center ">
+          {acceptedFiles.length > 0 && (
+            <HawaButton
+              onClick={(e) => {
+                e.stopPropagation()
+                onClearFiles(acceptedFiles)
               }}
-              className="rounded-lg border-red-500"
             >
-              {thumbs}
-            </aside>
-          ) : null}
-          <div className="px-2">
-            {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-              <HawaAlert text={texts.tooManyFiles} severity="error" />
-            ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-              <HawaAlert text={texts.fileTooLarge} severity="error" />
-            ) : (
-              errs
-            )}
-          </div>
-          {}
+              Clear All
+            </HawaButton>
+          )}
         </div>
+        {thumbs && showPreview ? (
+          <aside
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              // marginTop: 10,
+            }}
+            className="rounded-lg border-red-500"
+          >
+            {thumbs}
+          </aside>
+        ) : null}
+        <div className="px-2">
+          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+            <HawaAlert text={texts.tooManyFiles} severity="error" />
+          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+            <HawaAlert text={texts.fileTooLarge} severity="error" />
+          ) : (
+            errs
+          )}
+        </div>
+        {}
       </div>
-    )
-  }
+    </div>
+  )
+}

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 = {