@sikka/hawa 0.0.145 → 0.0.146

package/lib/layout/HawaContainer.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 type ContainerTypes = {
     maxWidth?: "full" | "small" | "normal";
     children: React.ReactNode;
-    variant?: "contained" | "outlined";
+    variant?: "contained" | "outlined" | "neobrutalism";
     centered?: boolean;
 };
 export declare const HawaContainer: React.FunctionComponent<ContainerTypes>;

package/lib/util.d.ts

@@ -1,4 +1,8 @@
-declare const hexToRgb: (hex: any) => number[];
-declare const getTextColor: (backColor: any) => "#000000" | "#ffffff";
-declare const replaceAt: (string: any, index: any, replacement: any) => any;
-export { hexToRgb, getTextColor, replaceAt };
+type Palette = {
+    name: string;
+    colors: {
+        [key: number]: string;
+    };
+};
+declare function getPallette(baseColor: string): Palette;
+export { getPallette };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -37,6 +37,7 @@
     "@types/react-dom": "^18.0.9",
     "babel-loader": "^8.2.2",
     "clsx": "^1.2.1",
+    "color": "^4.2.3",
     "crypto-js": "^4.1.1",
     "framer-motion": "^4.1.7",
     "html-webpack-plugin": "^5.5.0",
@@ -60,8 +61,8 @@
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-swc": "^0.2.1",
+    "rollup-plugin-terser": "^7.0.2",
     "tailwindcss": "^3.2.1",
     "tinycolor2": "^1.4.2",
     "tslib": "^2.4.1",

package/src/blocks/Misc/EmptyState.tsx

@@ -2,19 +2,21 @@ import React from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 import { FaCheck } from "react-icons/fa"
-type TEmptyState = {}
+type TEmptyState = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+}
 
-export const EmptyState: React.FunctionComponent<TEmptyState> = (props) => {
+export const EmptyState: React.FunctionComponent<TEmptyState> = ({
+  variant = "contained",
+}) => {
   return (
-    <HawaContainer variant="outlined" centered={true}>
-      <div className="flex h-20 w-20 flex-col items-center justify-center rounded-3xl bg-primary-400 text-6xl font-bold">
-        <FaCheck size={30} />
-      </div>
-      <div className="m-2 text-center text-xl font-bold">
-        You're all caught up
-      </div>
-      <div className="text-center">
-        If you're lost please contact us help@sikka.io{" "}
+    <HawaContainer variant={variant} centered={true}>
+      <div className="flex flex-col items-center justify-center text-center dark:text-white">
+        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary-400 text-6xl font-bold">
+          <FaCheck size={20} />
+        </div>
+        <div className="m-2 text-xl font-bold">You're all caught up</div>
+        <div>If you're lost, please contact us help@sikka.io </div>
       </div>
       <HawaButton color="primary" width="full">
         Action

package/src/blocks/Misc/NotFound.tsx

@@ -2,29 +2,24 @@ import React from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
-type NotFoundTypes = {}
+type NotFoundTypes = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+}
 
-export const NotFound: React.FunctionComponent<NotFoundTypes> = (props) => {
+export const NotFound: React.FunctionComponent<NotFoundTypes> = ({
+  variant,
+}) => {
   return (
-    <HawaContainer variant="outlined">
-      <div
-        // style={{
-        //   display: "flex",
-        //   flexDirection: "column",
-        //   alignItems: "center",
-        // }}
-        className="flex flex-col items-center"
-      >
-        <div className="text-center text-6xl font-bold">404</div>
-        <div className="m-2 text-center text-xl font-bold">Page Not Found</div>
-        <div className="text-center">
+    <HawaContainer variant={variant}>
+      <div className="flex flex-col items-center dark:text-white">
+        <div className="text-center text-6xl font-bold ">404</div>
+        <div className="m-2 text-center text-xl font-bold ">Page Not Found</div>
+        <div className="text-center ">
           If you're lost please contact us help@sikka.io{" "}
         </div>
-        {/* <div className="flex flex-col content-center items-stretch bg-red-200"> */}
         <HawaButton color="primary" width="full">
           Home
         </HawaButton>
-        {/* </div> */}
       </div>
     </HawaContainer>
   )

package/src/blocks/Payment/SelectPayment.tsx

@@ -31,7 +31,6 @@ export const SelectPayment: React.FunctionComponent<SelectPaymentTypes> = (
 ) => {
   return (
     <HawaContainer>
-      {/* // <div className="flex flex-col w-1/3 bg-blue-300 rounded-xl p-4"> */}
       <HawaTypography>Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton

package/src/elements/DraggableCard.tsx

@@ -7,7 +7,7 @@ export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
   props
 ) => {
   return (
-    <div className="flex flex-row rounded-xl bg-blue-300 p-4">
+    <div className="bg-layoutPrimary-default flex flex-row rounded-xl p-4">
       <button
         className="inline-flex items-center rounded-lg 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/HawaButton.tsx

@@ -24,7 +24,7 @@ const sizeStyles = {
 const widthStyles = {
   full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
   normal:
-    "w-fit dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800",
+    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-dark dark:hover:brightness-90 dark:focus:ring-primary-800",
   half: "w-1/2",
 }
 const variantStyles = {
@@ -34,11 +34,11 @@ const variantStyles = {
 
 const colorStyles = {
   contained: {
-    default: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+    default: "text-neutral-900 hover:bg-gray-300 bg-buttonPrimary-default text-white",
     primary:
-      "text-white bg-primary-default hover:bg-primary-700 hover:text-white",
+      "text-white bg-buttonPrimary-default hover:bg-buttonPrimary-darker transition-all",
     secondary:
-      "text-neutral-900 bg-secondary-default hover:text-white hover:bg-secondary-700",
+      "text-neutral-900 bg-buttonPrimary-default hover:text-white hover:bg-secondary-700",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
@@ -67,7 +67,6 @@ export function HawaButton({
   ...props
 }: ButtonProps) {
   const [isHovered, setIsHovered] = React.useState(false)
-
   return (
     <div
       className={clsx(
@@ -75,6 +74,7 @@ export function HawaButton({
         margins !== "none" ? `my-${margins}` : "my-0"
       )}
     >
+      {/* <div className="bg-buttonPrimary-default h-32">test</div> */}
       <button
         onMouseEnter={() => {
           setIsHovered(true)
@@ -85,6 +85,7 @@ export function HawaButton({
         className={
           disabled
             ? clsx(
+                // "brightne",
                 className,
                 baseStyles,
                 variantStyles[variant],

package/src/elements/HawaLogoButton.tsx

@@ -150,7 +150,7 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white align-middle"
+      className="my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaMenu.tsx

@@ -93,7 +93,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
           return (
             <ul
               key={o}
-              className="py-1  text-sm text-gray-700 dark:text-gray-200"
+              className="py-1 bg-layout-1200  text-sm text-gray-700 dark:text-gray-200"
             >
               {group?.map((item) => {
                 return (

package/src/layout/HawaAppLayout.tsx

@@ -4,6 +4,7 @@ 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 HawaAppLayoutTypes = {
   drawerItems: {
     label: string
@@ -33,6 +34,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
 ) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
+  const [openSubItem, setOpenSubItem] = useState(false)
   const { isOpen, onClose, onOpen } = useDiscloser(false)
   const ref = useRef(null)
 
@@ -42,10 +44,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   } else {
     size = 1200
   }
+  const [keepOpen, setKeepOpen] = useState(size > 600 ? true : false)
   console.log("size is ", size)
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
+      if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         // onClickOutside && onClickOutside()
         setOpenSideMenu(false)
       }
@@ -54,7 +57,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
     return () => {
       document.removeEventListener("click", handleClickOutside, true)
     }
-  }, [])
+  }, [keepOpen])
 
   //States of the side menu
   //larger than 600
@@ -62,25 +65,41 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   //less than 600
   //as nothing and expands as button is clicked
   return (
-    <>
+    <div className="fixed left-0 h-full bg-green-400">
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-40 flex h-14 flex-row items-center justify-between bg-primary-400",
-            size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
-            "p-2",
-            "pr-5"
+            "fixed top-0 z-40 flex h-14 flex-row items-center justify-between bg-layoutPrimary-default",
+            // size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
+            "w-full",
+            "p-2"
+            // "pr-5"
           )}
         >
-          {size > 600 ? null : (
-            <div
-              onClick={() => setOpenSideMenu(true)}
-              className=" cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
-            >
-              <HiMenu size={30} />
+          {size > 600 ? (
+            props.pageTitle ? (
+              <div
+                className={clsx(
+                  size > 600 ? "ml-14" : "ml-2",
+                  "bg-red-300",
+                  keepOpen ? "ml-40" : ""
+                )}
+              >
+                {props.pageTitle}
+              </div>
+            ) : null
+          ) : (
+            <div className="flex items-center justify-center">
+              <div
+                onClick={() => setOpenSideMenu(true)}
+                className=" cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
+              >
+                <HiMenu size={25} />
+              </div>
+              {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
             </div>
           )}
-          {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
+
           <HawaMenu
             buttonPosition="top-right"
             menuItems={props.profileMenuItems}
@@ -107,102 +126,125 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
       )}
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
-        onMouseLeave={() => setOpenSideMenu(false)}
+        onMouseLeave={() =>
+          keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false)
+        }
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-x-clip bg-primary-400 transition-all  hover:overflow-auto",
-          size > 600 ? "w-12 hover:w-40" : "w-0",
-          openSideMenu ? "w-40" : "w-0"
+          "fixed top-0 left-0 z-50 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all  hover:overflow-auto",
+          size > 600 ? "w-14 hover:w-40" : "w-0",
+          openSideMenu ? "w-40" : "w-14"
         )}
       >
-        <div className="mb-9 h-12 w-12 p-2">
-          <img
-            className={clsx(
-              "fixed top-2 h-9",
-              !openSideMenu ? "invisible" : "visible"
-            )}
-            height={10}
-            src={props.logoLink}
-            // src={"https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"}
-          />
-
-          <img
-            className={clsx(
-              // " bg-green-500",
-              "fixed top-2 h-9",
-              openSideMenu ? "invisible" : "visible"
-            )}
-            src={props.logoSymbol}
-            // src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
-          />
-
-          {/* {openSideMenu ? (
+        <div>
+          <div className="mb-9 h-12 w-12 p-2">
             <img
-              className={clsx("h-10", !openSideMenu ? "invisible" : "visible")}
-              src="https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+              className={clsx(
+                "fixed top-2 h-9",
+                !openSideMenu ? "invisible" : "visible"
+              )}
+              height={10}
+              src={props.logoLink}
+              // src={"https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"}
             />
-          ) : (
-            <img
-              className={clsx("h-10", openSideMenu ? "invisible" : "visible")}
-              src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
-            />
-          )} */}
-        </div>
 
-        {props.drawerItems.map((dSection, j) => (
-          <div
-            key={j}
-            className={clsx(
-              "flex flex-col items-stretch justify-center"
-              // !openSideMenu ? "invisible" : "visible"
-            )}
-          >
-            {dSection.map((dItem, i) => {
-              return (
-                <div
-                  key={i}
-                  onClick={() => dItem.action(dItem.slug)}
-                  className={clsx(
-                    "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-primary-500",
-                    props.currentPage === dItem.slug
-                      ? "bg-primary-600 text-white hover:bg-primary-600"
-                      : ""
-                    // !openSideMenu ? " h-0 w-0" : ""
-                  )}
-                >
-                  <div className="flex items-center justify-center">
-                    {dItem.icon}
-                  </div>
-                  <div
-                    className={clsx(
-                      "mx-2 whitespace-nowrap text-sm transition-all",
-                      openSideMenu ? "opacity-100" : "opacity-0"
-                    )}
-                  >
-                    {dItem.label}
-                  </div>
-                </div>
-              )
-            })}
-            {j !== props.drawerItems.length - 1 && (
-              <div className="my-2 h-[1px] w-10/12 self-center bg-primary-600 text-center "></div>
-            )}{" "}
+            {size > 600 ? (
+              <img
+                className={clsx(
+                  // " bg-green-500",
+                  "fixed top-2 h-9",
+                  openSideMenu ? "invisible" : "visible"
+                )}
+                src={props.logoSymbol}
+                // src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
+              />
+            ) : null}
           </div>
-        ))}
+
+          {props.drawerItems.map((dSection, j) => (
+            <div
+              key={j}
+              className={clsx(
+                "flex flex-col items-stretch justify-center"
+                // !openSideMenu ? "invisible" : "visible"
+              )}
+            >
+              {dSection.map((dItem, i) => {
+                return (
+                  <div className="flex flex-col">
+                    <div
+                      key={i}
+                      onClick={() => {
+                        // if()
+                        dItem.action(dItem.slug)
+                      }}
+                      className={clsx(
+                        props.currentPage === dItem.slug
+                          ? "bg-buttonPrimary-default text-white"
+                          : "hover:bg-buttonPrimary-lighter",
+                        // !openSideMenu ? " h-0 w-0" : ""
+                        "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all "
+                      )}
+                    >
+                      <div className="flex items-center justify-center">
+                        {dItem.icon}
+                      </div>
+                      <div
+                        className={clsx(
+                          "mx-2 whitespace-nowrap text-sm transition-all",
+                          openSideMenu ? "opacity-100" : "opacity-0"
+                        )}
+                      >
+                        {dItem.label}
+                      </div>
+                    </div>
+                    {dItem.subItems && (openSideMenu || isOpen) ? (
+                      <div className="flex flex-col gap-2">
+                        {dItem.subItems.map((subIt) => (
+                          <div className="bg-red-100 p-2 px-4">subItems</div>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                )
+              })}
+              {j !== props.drawerItems.length - 1 && (
+                <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-default text-center "></div>
+              )}{" "}
+            </div>
+          ))}
+        </div>
+        <div className={clsx("flex items-center justify-end")}>
+          {openSideMenu && !keepOpen ? (
+            <div
+              onClick={() => setKeepOpen(true)}
+              className="m-2 w-fit cursor-pointer rounded-lg bg-gray-300 p-2"
+            >
+              <FaChevronRight />
+            </div>
+          ) : null}
+          {keepOpen && (
+            <div
+              onClick={() => setKeepOpen(false)}
+              className="m-2 w-fit rotate-180 cursor-pointer rounded-lg bg-gray-300 p-2"
+            >
+              <FaChevronRight />
+            </div>
+          )}
+        </div>
       </div>
+
       <div
         className={clsx(
-          // "overflow-scroll",
-          "w-[calc(100%-3rem)]",
-          "translate-x-[3rem]",
-          // "bg-red-900 text-white",
-          "m-0",
-          props.topBar ? "mt-14" : ""
+          size > 600 ? "w-[calc(100%-3rem)] translate-x-[3.54rem]" : "",
+          props.topBar ? "mt-[3.6rem]" : "mt-0 ",
+          " fixed top-0 h-full overflow-auto p-4",
+          keepOpen ? "w-[calc(100%-10rem)] translate-x-[10.54rem]" : ""
         )}
       >
         {props.children}
       </div>
       {/* <div className="top-0 w-[calc(100%-1rem)] -translate-y-[1rem] translate-x-8 overflow-scroll bg-yellow-300 "> */}
-    </>
+    </div>
   )
 }

package/src/layout/HawaContainer.tsx

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