@sikka/hawa 0.0.167 → 0.0.169

package/package.json

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

package/src/blocks/Misc/Newsletter.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { HawaContainer } from "../../layout"
+import { FaCheck } from "react-icons/fa"
+type TNewsletter = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+  texts: {
+    wantToStayUpdated: string
+    subscribeToNewsletter: string
+  }
+}
+
+// TODO: make it a form and handle email submission
+
+export const Newsletter: React.FunctionComponent<TNewsletter> = ({
+  variant = "contained",
+  texts,
+}) => {
+  return (
+    <HawaContainer variant={variant} centered={true}>
+      <div className="p-4 pt-0">
+        <h1 className="font-bold">{texts.wantToStayUpdated}</h1>
+        <span>{texts.subscribeToNewsletter}</span>
+      </div>
+      <div className="flex flex-row gap-2">
+        <HawaTextField
+          width="full"
+          type="email"
+          placeholder={"example@sikka.io"}
+          margin="none"
+        />
+        <HawaButton size="full" margins="none">
+          Submit
+        </HawaButton>
+      </div>
+    </HawaContainer>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -1,2 +1,3 @@
 export * from "./NotFound"
 export * from "./EmptyState"
+export * from "./Newsletter"

package/src/elements/DragDropImages.tsx

@@ -11,7 +11,6 @@ const thumbsContainer = {
 }
 type DragDropImagesTypes = {
   label?: string
-  texts: any
   files: [File]
   setFiles: any
   setDeletedFiles: any
@@ -20,6 +19,12 @@ type DragDropImagesTypes = {
   onAcceptedFiles: any
   showPreview: any
   onDeleteFile: any
+  texts: {
+    clickHereToUpload: string
+    maxFileSize: string
+    tooManyFiles: string
+    fileTooLarge: string
+  }
   onClearFiles: any
   maxSize: number
   errorMessages: string
@@ -171,10 +176,10 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           className="mb-2 flex flex-col justify-center rounded-xl border border-dashed border-black"
         >
           <input {...getInputProps()} />
+          <div className="p-1 text-center">{texts.clickHereToUpload}</div>
           <div className="p-1 text-center">
-            Click here or drop files here to upload
+            {texts.maxFileSize} {max}
           </div>
-          <div className="p-1 text-center">Max file size is {max}</div>
           <div className="flex justify-center ">
             {acceptedFiles.length > 0 && (
               <HawaButton

package/src/elements/HawaAlert.tsx

@@ -2,15 +2,8 @@ import React from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
-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",
-}
 type AlertTypes = {
-  severity: keyof typeof severities
+  severity: "info" | "warning" | "error" | "success"
   title?: any
   variant?:
     | "normal"
@@ -20,6 +13,7 @@ type AlertTypes = {
     | "right-accent"
     | "bottom-accent"
   text: any
+  direction?: "rtl" | "ltr"
   hideIcon?: any
   actions?: [
     {
@@ -31,6 +25,7 @@ type AlertTypes = {
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
+  direction = "ltr",
   ...props
 }) => {
   let styleVariant = {
@@ -83,10 +78,10 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     <div
       className={clsx(
         "mb-4 flex flex-col rounded-lg p-4 text-sm",
-        // severities[props.severity],
         styleVariant[variant][props.severity]
       )}
       role="alert"
+      dir={direction}
     >
       <span className="font-medium">{props.title}</span>
       <span>{" " + props.text}</span>

package/src/elements/HawaButton.tsx

@@ -1,24 +1,31 @@
-import * as React from "react"
+import React, { useEffect } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
+import { HawaTooltip } from "./HawaTooltip"
+import useHover from "../hooks/useHover"
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
+  buttonID?: any
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
-  size?: "small" | "medium" | "large" | "noPadding"
+  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
   margins?: "none" | "1" | "2" | "3" | "4"
   tooltip?: string
+  tooltipSize?: "normal" | "small" | "large"
+  tooltipPosition?: "right" | "left" | "bottom" | "top"
   isLoading?: boolean
 }
 
-const baseStyles = "font-medium rounded-lg transition-all"
+const baseStyles = "cursor-pointer font-medium rounded-lg  transition-all"
 
 const sizeStyles = {
+  xs: "px-1 py-1",
   small: "text-xs px-2.5 py-1.5",
   medium: "text-sm leading-4 px-3 py-2",
   large: "text-sm px-4 py-2",
   noPadding: "p-0",
+  full: "h-full max-h-full p-2",
 }
 
 const widthStyles = {
@@ -28,7 +35,7 @@ const widthStyles = {
   half: "w-1/2",
 }
 const variantStyles = {
-  contained: "border border-transparent",
+  contained: "border-transparent",
   outlined: "bg-transparent border",
 }
 
@@ -63,31 +70,23 @@ export function HawaButton({
   width = "normal",
   disabled = false,
   isLoading = false,
+  tooltipSize = "normal",
+  tooltipPosition = "top",
   margins = "2",
   tooltip,
   children,
+  buttonID,
   ...props
 }: ButtonProps) {
-  const [isHovered, setIsHovered] = React.useState(false)
   return (
     <div
-      className={clsx(
-        "relative",
-        margins !== "none" ? `my-${margins}` : "my-0"
-      )}
+      className={clsx("relative", margins !== "none" ? `my-${margins}` : "m-0")}
     >
-      {/* <div className="bg-buttonPrimary-default h-32">test</div> */}
       <button
-        onMouseEnter={() => {
-          setIsHovered(true)
-        }}
-        onMouseLeave={() => {
-          setIsHovered(false)
-        }}
+        id={buttonID}
         className={
           disabled
             ? clsx(
-                // "brightne",
                 className,
                 baseStyles,
                 variantStyles[variant],
@@ -109,25 +108,15 @@ export function HawaButton({
         type={props.type}
         {...props}
       >
-        {!isLoading ? (
-          children
-        ) : (
-          // <div className="flex flex-row gap-x-3">
-          //   <div className="h-5 w-5 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
-          // </div>
-          <HawaSpinner />
-        )}
+        {!isLoading ? children : <HawaSpinner />}
       </button>
       {tooltip && (
-        <div
-          className={
-            isHovered
-              ? "absolute top-10 left-0 z-10 inline-block w-fit min-w-max max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
-              : "absolute top-10 left-0 z-10 inline-block w-fit min-w-max max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
-          }
-        >
-          {tooltip}
-        </div>
+        <HawaTooltip
+          position={tooltipPosition}
+          size={tooltipSize}
+          buttonID={buttonID}
+          content={tooltip}
+        />
       )}
     </div>
   )

package/src/elements/HawaCardInput.tsx

@@ -84,6 +84,7 @@ export const HawaCardInput = ({
   }
 
   // TODO: We can improve the regex check with a better approach like in the card component.
+
   const onCardNumberChange = (event) => {
     let { value, name } = event.target
     let cardNumber = value

package/src/elements/HawaTable.tsx

@@ -6,16 +6,18 @@ import clsx from "clsx"
 type TableTypes = {
   lang?: any
   columns: any[string]
-  actions?: any
+  actions?: [{ type: "view" | "update" | "delete"; onClick: (e) => void }]
   rows?: any[any]
   noDataText?: any
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
+  customColor?: string
 }
 
 export const HawaTable: React.FunctionComponent<TableTypes> = ({
   size = "normal",
+  customColor = "white",
   ...props
 }) => {
   let isArabic = props.lang === "ar"
@@ -25,193 +27,87 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     small: "px-3 py-1",
   }
   return (
-    <>
-      <div>
-        <div className="relative overflow-x-auto rounded-xl">
-          <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-            <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-              <tr>
-                {props.columns.map((col: any, i: any) => (
-                  <th key={i} scope="col" className={clsx(sizeStyles[size])}>
-                    {col}
-                  </th>
-                ))}
+    <div className="relative overflow-x-visible rounded-xl">
+      <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+        <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            {props.columns.map((col: any, i: any) => (
+              <th key={i} scope="col" className={clsx(sizeStyles[size])}>
+                {col}
+              </th>
+            ))}
+            {props.actions && size !== "small" ? (
+              <th scope="col" className={clsx(sizeStyles[size])}>
+                actions
+              </th>
+            ) : null}
+          </tr>
+        </thead>
+        <tbody>
+          {props.rows ? (
+            props.rows.map((singleRow: any, j: any) => (
+              <tr
+                key={j}
+                className={clsx(
+                  "border-b dark:border-gray-700 dark:bg-gray-800",
+                  "bg-" + customColor
+                )}
+              >
+                {singleRow.map((r: any, i: any) => {
+                  if (i === 0) {
+                    return (
+                      <th
+                        key={i}
+                        scope="row"
+                        className={clsx(
+                          sizeStyles[size],
+                          "whitespace-nowrap font-medium text-gray-900 dark:text-white"
+                        )}
+                      >
+                        {r}{" "}
+                      </th>
+                    )
+                  } else {
+                    return (
+                      <td key={i} className={clsx(sizeStyles[size])}>
+                        {r}
+                      </td>
+                    )
+                  }
+                })}
                 {props.actions && size !== "small" ? (
-                  <th scope="col" className={clsx(sizeStyles[size])}>
-                    actions
-                  </th>
-                ) : null}
-              </tr>
-            </thead>
-            <tbody>
-              {props.rows ? (
-                props.rows.map((singleRow: any, j: any) => (
-                  <tr
-                    key={j}
-                    className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
+                  <td
+                    align={isArabic ? "right" : "left"}
+                    style={{ fontWeight: 700 }}
+                    className="flex flex-row gap-1"
+                    // variant={isArabic ? "borderedRight" : "borderedLeft"}
                   >
-                    {singleRow.map((r: any, i: any) => {
-                      if (i === 0) {
-                        return (
-                          <th
-                            key={i}
-                            scope="row"
-                            className={clsx(
-                              sizeStyles[size],
-                              "whitespace-nowrap font-medium text-gray-900 dark:text-white"
-                            )}
-                          >
-                            {r}{" "}
-                          </th>
-                        )
-                      } else {
-                        return (
-                          <td key={i} className={clsx(sizeStyles[size])}>
-                            {r}
-                          </td>
-                        )
-                      }
+                    {props.actions.map((act: any, s: any) => {
+                      return (
+                        <TableActionButton
+                          key={s}
+                          row={j}
+                          action={act.type}
+                          handleActionClick={act.onClick}
+                        />
+                      )
                     })}
-                    {props.actions && size !== "small" ? (
-                      <td
-                        align={isArabic ? "right" : "left"}
-                        style={{ fontWeight: 700 }}
-                        className="flex flex-row gap-1"
-                        // variant={isArabic ? "borderedRight" : "borderedLeft"}
-                      >
-                        {props.actions.map((act: any, s: any) => {
-                          return (
-                            <TableActionButton
-                              key={s}
-                              action={act.type}
-                              handleActionClick={act.onClick}
-                            />
-                          )
-                        })}
-                      </td>
-                    ) : null}
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td colSpan={props.columns.length}>
-                    <div className="w-full bg-white p-5 text-center">
-                      {props.noDataText}
-                    </div>
                   </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* <TableContainer style={{ direction: isArabic ? "rtl" : "ltr" }}>
-        <Table aria-label="a dense table">
-          <TableHead>
-            <TableRow>
-              {props.columns.map((col, i) => (
-                <TableCell
-                  align={isArabic ? "right" : "left"}
-                  key={i}
-                  style={{ fontWeight: 700 }}
-                  variant={
-                    i > 0
-                      ? isArabic
-                        ? "borderedRight"
-                        : "borderedLeft"
-                      : "body"
-                  }
-                >
-                  {col}
-                </TableCell>
-              ))}
-              {props.actions && (
-                <TableCell
-                  align={isArabic ? "right" : "left"}
-                  style={{ fontWeight: 700 }}
-                  variant={isArabic ? "borderedRight" : "borderedLeft"}
-                >
-                  Actions
-                </TableCell>
-              )}
-            </TableRow>
-          </TableHead>
-
-          <TableBody>
-            {props.rows ? (
-              props.rows.map((singleRow, j) => (
-                <TableRow key={j}>
-                  {singleRow.map((r, i) => (
-                    <TableCell
-                      align={isArabic ? "right" : "left"}
-                      key={i}
-                      component="th"
-                      scope="row"
-                      variant={
-                        i > 0
-                          ? isArabic
-                            ? "borderedRight"
-                            : "borderedLeft"
-                          : "body"
-                      }
-                    >
-                      {r}
-                    </TableCell>
-                  ))}
-                  {props.actions && (
-                    <TableCell
-                      align={isArabic ? "right" : "left"}
-                      style={{ fontWeight: 700 }}
-                      variant={isArabic ? "borderedRight" : "borderedLeft"}
-                    >
-                      {props.actions.map((act) => (
-                        <Button
-                          style={{ margin: 2 }}
-                          variant="outlined"
-                          size="small"
-                          onClick={() => props.handleActionClick(singleRow)}
-                        >
-                          {act}
-                        </Button>
-                      ))}
-                    </TableCell>
-                  )}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow align="center">
-                <TableCell align={"center"} component="th" colSpan={6}>
+                ) : null}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={props.columns.length}>
+                <div className="w-full bg-white p-5 text-center">
                   {props.noDataText}
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-          {props.end && (
-            <TableRow>
-              {props.end.map((e, k) => (
-                <TableCell
-                  align={isArabic ? "right" : "left"}
-                  style={{ fontWeight: 700 }}
-                  key={k}
-                  component="th"
-                  scope="row"
-                  variant={
-                    k > 0
-                      ? isArabic
-                        ? "borderedRight"
-                        : "borderedLeft"
-                      : "body"
-                  }
-                >
-                  {e}
-                </TableCell>
-              ))}
-            </TableRow>
+                </div>
+              </td>
+            </tr>
           )}
-        </Table>
-      </TableContainer> */}
-    </>
+        </tbody>
+      </table>
+    </div>
   )
 }
 
@@ -219,22 +115,22 @@ const TableActionButton = (props) => {
   let smallAct = props.action.toLowerCase()
   return (
     <HawaButton
-      size="noPadding"
-      variant="outlined"
+      tooltipSize="small"
+      buttonID={props.action + props.row}
+      size="xs"
+      variant="contained"
       tooltip={props.action}
       onClick={() => props.handleActionClick(smallAct)}
     >
-      <div className="w-full rounded-lg p-1.5">
-        {smallAct === "delete" ? (
-          <FaTrash />
-        ) : smallAct === "view" ? (
-          <FaExclamationCircle />
-        ) : smallAct === "edit" ? (
-          <FaPen />
-        ) : (
-          props.action
-        )}
-      </div>
+      {smallAct === "delete" ? (
+        <FaTrash />
+      ) : smallAct === "view" ? (
+        <FaExclamationCircle />
+      ) : smallAct === "edit" ? (
+        <FaPen />
+      ) : (
+        props.action
+      )}
     </HawaButton>
   )
 }