@sikka/hawa 0.0.202 → 0.0.204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.202",
+  "version": "0.0.204",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/DragDropImages.tsx

@@ -3,12 +3,6 @@ import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
 
-const thumbsContainer = {
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  marginTop: 10,
-}
 type DragDropImagesTypes = {
   label?: string
   files: [File]
@@ -79,17 +73,14 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       },
       [files]
     )
-
     useEffect(() => {
       setFiles(acceptedFiles)
     }, [acceptedFiles, cmp])
-
     onClearFiles = () => {
       acceptedFiles.length = 0
       acceptedFiles.splice(0, acceptedFiles.length)
       setFiles([])
     }
-
     useEffect(() => {
       if (maxSize > 0) {
         const k = 1024
@@ -111,7 +102,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )
     })
     const thumbs = files?.map((file: any, index: any) => (
-      <div className="relative m-3 rounded">
+      <div className="relative m-3 rounded ">
         <button
           onClick={(e) => {
             e.stopPropagation()
@@ -158,8 +149,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       </div>
     ))
 
-    console.log("error", fileRejections)
-
     return (
       <div>
         {label && (
@@ -168,22 +157,17 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           </div>
         )}
         <div
-          // variant="drop-area"
-          {...getRootProps({
-            style: { backgroundColor: isDragActive ? "white" : "inherit" },
-          })}
-          // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
-          className="mb-2 flex flex-col justify-center rounded border border-dashed border-black"
+          {...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="p-1 text-center">{texts.clickHereToUpload}</div>
-          <div className="p-1 text-center">
+          <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
-                // style={{ color: "black" }}
                 onClick={(e) => {
                   e.stopPropagation()
                   onClearFiles(acceptedFiles)

package/src/elements/HawaAccordion.tsx

@@ -21,49 +21,46 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
     "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
 
   return (
-    <div className="rounded">
-      <h2 id={"accordion-collapse-heading-" + props.count}>
-        <button
-          type="button"
-          className={clsx(
-            // props.count === 0 ? roundedTop : noRounding,
-            "flex w-full items-center justify-between border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800",
-            !collapse ? "rounded-t-lg" : "rounded"
-          )}
-          onClick={() => setCollapse(!collapse)}
-          data-accordion-target={"#accordion-collapse-body-" + props.count}
-          aria-expanded="true"
-          aria-controls={"accordion-collapse-body-" + props.count}
+    <div>
+      <button
+        id={"accordion-collapse-heading-" + props.count}
+        type="button"
+        className={clsx(
+          // props.count === 0 ? roundedTop : noRounding,
+          collapse ? "rounded" : "rounded-t",
+          "flex w-full items-center justify-between  border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800"
+        )}
+        onClick={() => setCollapse(!collapse)}
+        data-accordion-target={"#accordion-collapse-body-" + props.count}
+        aria-expanded="true"
+        aria-controls={"accordion-collapse-body-" + props.count}
+      >
+        <span>{props.title}</span>
+        <svg
+          data-accordion-icon=""
+          className={`h-6 w-6 ${
+            collapse ? "" : "rotate-180"
+          }  shrink-0 transition-all`}
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <span>{props.title}</span>
-          <svg
-            data-accordion-icon=""
-            className={`h-6 w-6 ${
-              collapse ? "" : "rotate-180"
-            }  shrink-0 transition-all`}
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
-      </h2>
+          <path
+            fillRule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
       <div
         id={"accordion-collapse-body-" + props.count}
+        aria-labelledby={"accordion-collapse-heading-" + props.count}
         className={clsx(
-          collapse ? "invisible hidden" : "visible",
-          "border-b-xl rounded-b-xl border border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
+          collapse ? "invisible hidden h-0 p-0" : " visible h-full",
+          "rounded-b border border-t-0 border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
         )}
-        aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
-        {/* <div className={props.count === -1 ? accPaperRounded : accPaper}> */}
         <p className="mb-2 text-gray-500 dark:text-gray-400">{props.content}</p>
-        {/* </div> */}
       </div>
     </div>
   )

package/src/elements/HawaSelect.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
@@ -7,6 +8,7 @@ type OptionTypes = {
   getStyles: any
   innerProps: any
   innerRef: any
+  size?: "small" | "normal" | "large"
 }
 const Option: React.FunctionComponent<OptionTypes> = ({
   cx,
@@ -14,11 +16,12 @@ const Option: React.FunctionComponent<OptionTypes> = ({
   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"
+    className="m-2 flex flex-row items-center justify-between rounded  p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
     {...innerProps}
   >
     {children}
@@ -31,6 +34,7 @@ type ControlTypes = {
   getStyles: any
   innerProps: any
   innerRef: any
+  size?: "small" | "normal" | "large"
 }
 const Control: React.FunctionComponent<ControlTypes> = ({
   cx,
@@ -38,12 +42,21 @@ const Control: React.FunctionComponent<ControlTypes> = ({
   getStyles,
   innerProps,
   innerRef,
+  size = "normal",
   ...props
 }) => {
+  let sizeStyles = {
+    small: "h-7 text-xs",
+    normal: "h-10  text-sm",
+    large: "",
+  }
   return (
     <div
       ref={innerRef}
-      className="flex h-10 w-full rounded border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 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={clsx(
+        sizeStyles[size],
+        "flex  w-full rounded border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 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"
+      )}
       {...innerProps}
       // {...props}
     >
@@ -93,10 +106,11 @@ type SelectTypes = {
   value?: any
   children?: any
   getOptionLabel?: any
+  // size?
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
-    <div className="mb-3">
+    <div className="">
       {props.label && (
         <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}

package/src/elements/HawaTable.tsx

@@ -1,7 +1,8 @@
-import React from "react"
-import { BsThreeDotsVertical } from "react-icons/bs"
+import React, { useEffect, useState } from "react"
+import { BsChevronRight, BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
+import useTable from "../hooks/useTable"
 
 type TableTypes = {
   columns: any[string]
@@ -37,6 +38,20 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   bordersWidth = "1",
   ...props
 }) => {
+  const [perPage, setPerPage] = useState(10)
+  const [enteredPage, setEnteredPage] = useState(null)
+  const [page, setPage] = useState(1)
+
+  const { slice, range } = useTable(props.rows ?? [], page, perPage)
+  useEffect(() => {
+    if (slice?.length < 1 && page !== 1) {
+      setPage(page - 1)
+    }
+    if (enteredPage) {
+      setPage(enteredPage)
+    }
+  }, [slice, page])
+
   let isRTL = direction === "rtl"
 
   let sizeStyles = {
@@ -91,9 +106,8 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
         >
           {/* Table Rows */}
           {props.rows ? (
-            props.rows.map((singleRow: any, rowIndex: any) => {
-              console.log("single row is ", singleRow)
-              let lastRow = rowIndex == props.rows.length - 1
+            slice?.map((singleRow: any, rowIndex: any) => {
+              let lastRow = rowIndex == slice?.length - 1
 
               return (
                 <tr
@@ -109,9 +123,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       : ""
                   )}
                 >
-                  {singleRow.map((r: any, i: any) => {
+                  {singleRow?.map((r: any, i: any) => {
                     let firstCell = i === 0
-                    let lastCell = i === singleRow.length - 1
+                    let lastCell = i === singleRow?.length - 1
                     let isRTLLastCell =
                       isRTL && lastRow && lastCell && !props.actions
                     let isRTLFirstCell = isRTL && lastRow && firstCell
@@ -192,7 +206,6 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             })
           ) : (
             <tr className="bg-transparent">
-              {/* {console.log('props', props.columns.length)} */}
               <td colSpan={20}>
                 <div
                   className={clsx(
@@ -206,7 +219,176 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             </tr>
           )}
         </tbody>
+        <div></div>
       </table>
+      <div className="mt-2 flex flex-row items-center justify-between ">
+        {/* Pagination Pages  */}
+        {range.length > 1 ? (
+          <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
+            {/* Previous Page Button */}
+            <div
+              className={clsx(
+                "flex h-6 w-6 rotate-180 items-center justify-center rounded bg-gray-100 p-1  text-xs hover:bg-layoutPrimary-700 "
+              )}
+              onClick={() =>
+                page <= 1 ? setPage(range.length) : setPage(page - 1)
+              }
+            >
+              <BsChevronRight />
+            </div>
+            {/* Numbered Pagination */}
+            <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
+              {/* The first page */}
+              {range.length > 6 &&
+                range.map((el, index) => {
+                  if (index <= 0) {
+                    return (
+                      <button
+                        key={index}
+                        className={clsx(
+                          "w-10 p-1 text-xs hover:bg-gray-200",
+                          page === el
+                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                            : "bg-gray-100"
+                        )}
+                        onClick={() => setPage(el)}
+                      >
+                        {el}
+                      </button>
+                    )
+                  }
+                })}
+              {/* The Current Page / Input  */}
+              {range?.length > 6 && (
+                <input
+                  type={"text"}
+                  className=" w-10  bg-gray-100 p-1 text-center text-xs"
+                  defaultValue={
+                    page !== 0 || page !== range.length - 1 ? page : "..."
+                  }
+                  value={
+                    page == 1 || page == range.length
+                      ? "..."
+                      : enteredPage
+                      ? enteredPage
+                      : page
+                  }
+                  onChange={(e) => setEnteredPage(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      setPage(enteredPage)
+                      setEnteredPage(null)
+                    }
+                  }}
+                />
+              )}
+              {/* The last page */}
+              {range?.length > 6 &&
+                range.map((el, index) => {
+                  if (index >= range.length - 1) {
+                    return (
+                      <button
+                        key={index}
+                        className={clsx(
+                          "w-10 p-1 text-xs hover:bg-gray-200",
+                          page === el
+                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                            : "bg-gray-100"
+                        )}
+                        onClick={() => setPage(el)}
+                      >
+                        {el}
+                      </button>
+                    )
+                  }
+                })}
+
+              {/* All Pages if less than 6 pages */}
+              {range?.length <= 6 &&
+                range.map((el, index) => {
+                  return (
+                    <button
+                      key={index}
+                      className={clsx(
+                        "w-10 p-1 text-xs hover:bg-gray-200",
+                        page === el
+                          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                          : "bg-gray-100"
+                      )}
+                      onClick={() => setPage(el)}
+                    >
+                      {el}
+                    </button>
+                  )
+                })}
+            </div>
+            {/* Next Page Button */}
+            <div
+              onClick={() =>
+                page >= range.length ? setPage(1) : setPage(page + 1)
+              }
+              className={clsx(
+                "flex h-6 w-6 items-center  justify-center rounded bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700 "
+              )}
+            >
+              <BsChevronRight />
+            </div>
+          </div>
+        ) : (
+          <div></div>
+        )}
+        {/* Pagination Settings */}
+        <div className="w-fit ">
+          <select
+            value={perPage}
+            className="h-6 rounded text-xs"
+            onChange={(e) => {
+              setPerPage(parseInt(e.target.value))
+            }}
+          >
+            <option value={10} style={{ fontSize: 10 }}>
+              10 Items
+            </option>
+            <option value={20} style={{ fontSize: 10 }}>
+              20 Items
+            </option>
+            <option value={30} style={{ fontSize: 10 }}>
+              30 Items
+            </option>
+            <option value={50} style={{ fontSize: 10 }}>
+              50 Items
+            </option>
+            <option value={100} style={{ fontSize: 10 }}>
+              100 Items
+            </option>
+          </select>
+          {/* <HawaSelect
+            // label="Per Page"
+            isCreatable={false}
+            isMulti={false}
+            isSearchable={false}
+            isClearable={false}
+            options={[
+              { value: 2, label: "2" },
+              { value: 7, label: "7" },
+              { value: 10, label: "10" },
+              { value: 20, label: "20" },
+            ]}
+            onChange={(e: any) => {
+              // field.onChange(e.value)
+              console.log("changing to ", e.value)
+              setPage(1)
+              setPerPage(e.value)
+            }}
+            onInputChange={(e: any) => {
+              // field.onChange(e.value)
+              console.log("changing to ", e.value)
+              setPage(1)
+              setPerPage(e.value)
+            }}
+          /> */}
+        </div>
+      </div>
     </div>
   )
 }

package/src/elements/HawaTooltip.tsx

@@ -76,7 +76,7 @@ export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
       tooltipCoordinates =
         direction === "rtl"
           ? `${tooltipWidth - childrenWidth}px, ${spacing}px`
-          : `-${childrenWidth - tooltipWidth}px, ${spacing}px`
+          : `-${0}px, ${spacing}px`
       break
     case "bottom-left":
       tooltipCoordinates =

package/src/hooks/useTable.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+const calculateRange = (data, rowsPerPage) => {
+  const range = []
+  const num = Math.ceil(data?.length / rowsPerPage)
+  let i = 1
+  for (let i = 1; i <= num; i++) {
+    range.push(i)
+  }
+  return range
+}
+
+const sliceData = (data, page, rowsPerPage) => {
+  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+}
+
+const useTable = (data, page, rowsPerPage) => {
+  const [tableRange, setTableRange] = useState([])
+  const [slice, setSlice] = useState([])
+
+  useEffect(() => {
+    const range = calculateRange(data, rowsPerPage)
+    setTableRange([...range])
+
+    const slice = sliceData(data, page, rowsPerPage)
+    setSlice([...slice])
+  }, [data, setTableRange, page, setSlice, rowsPerPage])
+
+  return { slice, range: tableRange }
+}
+
+export default useTable