@sikka/hawa 0.0.104 → 0.0.106

package/src/elements/HawaTable.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { HawaButton } from "./HawaButton"
-
+import { FaTrash, FaExclamationCircle, FaPen } from "react-icons/fa"
+import clsx from "clsx"
+// import { HiOutlineEye } from "react-icons/hi2"
 type TableTypes = {
   lang?: any
   columns: any[string]
@@ -9,10 +11,19 @@ type TableTypes = {
   noDataText?: any
   handleActionClick?: any
   end?: any
+  size?: "normal" | "small"
 }
 
-export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
+export const HawaTable: React.FunctionComponent<TableTypes> = ({
+  size = "normal",
+  ...props
+}) => {
   let isArabic = props.lang === "ar"
+
+  let sizeStyles = {
+    normal: "py-3 px-6",
+    small: "px-3 py-1",
+  }
   return (
     <>
       <div>
@@ -21,15 +32,15 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
             <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="py-3 px-6">
+                  <th key={i} scope="col" className={clsx(sizeStyles[size])}>
                     {col}
                   </th>
                 ))}
-                {props.actions && (
-                  <th scope="col" className="py-3 px-6">
+                {props.actions && size !== "small" ? (
+                  <th scope="col" className={clsx(sizeStyles[size])}>
                     actions
                   </th>
-                )}
+                ) : null}
               </tr>
             </thead>
             <tbody>
@@ -44,30 +55,30 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
                         return (
                           <th
                             scope="row"
-                            className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
+                            className={clsx(
+                              sizeStyles[size],
+                              "whitespace-nowrap font-medium text-gray-900 dark:text-white"
+                            )}
                           >
                             {r}{" "}
                           </th>
                         )
                       } else {
-                        return <td className="py-4 px-6">{r}</td>
+                        return <td className={clsx(sizeStyles[size])}>{r}</td>
                       }
                     })}
-                    {props.actions && (
+                    {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) => (
-                          <HawaButton
-                            onClick={() => props.handleActionClick(singleRow)}
-                          >
-                            {act}
-                          </HawaButton>
-                        ))}
+                        {props.actions.map((act: any) => {
+                          return <TableActionButton action={act} />
+                        })}
                       </td>
-                    )}
+                    ) : null}
                   </tr>
                 ))
               ) : (
@@ -192,3 +203,27 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
     </>
   )
 }
+
+const TableActionButton = (props) => {
+  let smallAct = props.action.toLowerCase()
+  return (
+    <HawaButton
+      size="noPadding"
+      variant="outlined"
+      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>
+    </HawaButton>
+  )
+}

package/src/elements/HawaTimeline.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import clsx from "clsx"
+
+type THawaTimeline = {
+  steps: any[any]
+  currentStep: any
+  orientation: "vertical" | "horizontal"
+}
+
+export const HawaTimeline: React.FunctionComponent<THawaTimeline> = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  let orientationStyles = {
+    vertical: "flex flex-col items-start w-fit",
+    horizontal: "flex flex-row items-baseline",
+  }
+  let lineStyles = {
+    vertical: {
+      default: "w-1 h-32 rounded-lg bg-primary-200 ml-6 my-2",
+      selected: "w-1  h-32 rounded-lg bg-primary-400 ml-6 my-2",
+    },
+    horizontal: {
+      default: "h-0.5 w-full rounded-lg bg-primary-200",
+      selected: "h-0.5 w-full rounded-lg bg-primary-400",
+    },
+  }
+  return (
+    <div className={clsx(orientationStyles[orientation])}>
+      {props.steps.map((step: any, i: number) => {
+        if (i == 0) {
+          return (
+            <TimelineStep
+              orientation={orientation}
+              current={i + 1 <= props.currentStep}
+              stepName={step}
+              stepNumber={i + 1}
+            />
+          )
+        } else {
+          return (
+            <>
+              <div
+                className={clsx(
+                  i == props.currentStep
+                    ? lineStyles[orientation].default
+                    : lineStyles[orientation].selected
+                )}
+              ></div>
+              <TimelineStep
+                orientation={orientation}
+                current={i + 1 <= props.currentStep}
+                stepName={step}
+                stepNumber={i + 1}
+              />
+            </>
+          )
+        }
+      })}
+    </div>
+  )
+}
+
+const TimelineStep = (props) => (
+  <div
+    className={
+      props.orientation === "vertical"
+        ? "flex w-full flex-row items-center"
+        : "flex w-fit flex-col items-center justify-center p-2"
+    }
+  >
+    <div
+      className={clsx(
+        "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded-xl ring-2 ring-primary-200 ring-offset-2",
+        props.current ? "bg-primary-500 text-white" : "bg-primary-200"
+      )}
+    >
+      {props.stepNumber}
+    </div>
+    <div className="whitespace-nowrap">{props.stepName}</div>
+  </div>
+)

package/src/elements/index.ts

@@ -1,32 +1,35 @@
-export * from "./HawaSnackbar";
-export * from "./HawaSwitch";
-export * from "./HawaCheckbox";
-export * from "./HawaPanelTabs";
-export * from "./HawaChip";
-export * from "./HawaSettingsRow";
-export * from "./HawaSelect";
-export * from "./HawaRange";
-export * from "./HawaTextField";
-export * from "./HawaTypography";
-export * from "./HawaAlert";
-export * from "./HawaTable";
-export * from "./HawaColorPicker";
-export * from "./HawaSearchBar";
-export * from "./HawaAccordian";
-export * from "./DragDropImages";
-export * from "./DraggableCard";
-export * from "./HawaPhoneInput";
-export * from "./HawaDrawerItem";
-export * from "./HawaTooltip";
-export * from "./HawaTabs";
-export * from "./HawaModal";
-export * from "./HawaMenu";
-export * from "./HawaDrawer";
-export * from "./HawaCopyrights";
+export * from "./HawaSnackbar"
+export * from "./HawaSwitch"
+export * from "./HawaCheckbox"
+export * from "./HawaPanelTabs"
+export * from "./HawaChip"
+export * from "./HawaSettingsRow"
+export * from "./HawaSelect"
+export * from "./HawaRange"
+export * from "./HawaTypography"
+export * from "./HawaAlert"
+export * from "./HawaTable"
+export * from "./HawaColorPicker"
+export * from "./HawaSearchBar"
+export * from "./HawaAccordian"
+export * from "./DragDropImages"
+export * from "./DraggableCard"
+export * from "./HawaPhoneInput"
+export * from "./HawaDrawerItem"
+export * from "./HawaTooltip"
+export * from "./HawaTabs"
+export * from "./HawaModal"
+export * from "./HawaMenu"
+export * from "./HawaDrawer"
+export * from "./HawaCopyrights"
+export * from "./HawaTimeline"
+// Inputs
+export * from "./HawaTextField"
+export * from "./HawaCardInput"
 // Cards
-export * from "./HawaItemCard";
-export * from "./HawaPricingCard";
-export * from "./HawaAdCard";
+export * from "./HawaItemCard"
+export * from "./HawaPricingCard"
+export * from "./HawaAdCard"
 //Buttons
-export * from "./HawaButton";
-export * from "./HawaLogoButton";
+export * from "./HawaButton"
+export * from "./HawaLogoButton"

package/src/layout/HawaContainer.tsx

@@ -4,20 +4,36 @@ import clsx from "clsx"
 type ContainerTypes = {
   maxWidth?: "full" | "small" | "normal"
   children: React.ReactNode
+  variant?: "contained" | "outlined"
+  centered?: boolean
 }
 export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   maxWidth = "normal",
+  variant = "contained",
+  centered = false,
   ...props
 }) => {
   let defaultStyle =
-    "flex w-full max-w-sm flex-col rounded-xl bg-primary-300 p-4 dark:bg-gray-600"
+    "flex w-full max-w-sm flex-col rounded-xl p-4 dark:bg-gray-600"
   let maxWidthStyles: any = {
     full: "md:max-w-xl",
     small: "md:max-w-sm w-1/3 min-w-min",
     normal: "md:max-w-md",
   }
+  let variantStyles = {
+    contained: "bg-primary-300",
+    outlined: "bg-transparent border-2 border-primary-200 w-fit",
+  }
+
   return (
-    <div className={clsx(defaultStyle, maxWidthStyles[maxWidth], "")}>
+    <div
+      className={clsx(
+        defaultStyle,
+        maxWidthStyles[maxWidth],
+        variantStyles[variant],
+        centered ? "flex items-center text-center" : ""
+      )}
+    >
       {props.children}
     </div>
   )