@sikka/hawa 0.0.265 → 0.0.266

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HiMenu } from "react-icons/hi"
-import { FaChevronRight } from "react-icons/fa"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { HawaButton, HawaMenu } from "../elements"
-
-// TODO: when no pagetitle, navbar gets messy
+import { HawaMenu } from "../elements"
 
 type HawaAppLayoutTypes = {
+  /** The pages of the side drawer */
   drawerItems: {
     label: string
     icon: any
@@ -16,7 +14,9 @@ type HawaAppLayoutTypes = {
     action: () => void
     subItems?: any
   }[][]
+  // The direction of the layout
   direction?: "rtl" | "ltr"
+  // The title of the current selected page, make sure it's the same as the drawerItem slug
   currentPage: string
   pageTitle?: string
   logoSymbol?: any
@@ -29,6 +29,7 @@ type HawaAppLayoutTypes = {
   drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItems[][]
   onSettingsClick?: () => void
+  DrawerFooterActions: any
 }
 
 type MenuItems = {
@@ -39,7 +40,13 @@ type MenuItems = {
 }
 export const HawaAppLayoutSimplified: React.FunctionComponent<
   HawaAppLayoutTypes
-> = ({ direction = "rtl", drawerSize = "md", onSettingsClick, ...props }) => {
+> = ({
+  direction = "rtl",
+  drawerSize = "md",
+  onSettingsClick,
+  DrawerFooterActions,
+  ...props
+}) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
   const [openSubItem, setOpenSubitem] = useState("")
   const { isOpen, onClose, onOpen } = useDiscloser(false)
@@ -92,35 +99,32 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         >
           {/* Nav Side Of Navbar */}
           {size > 600 ? (
-            props.pageTitle ? (
-              // Title of the page
-              <div
-                className={clsx(
-                  isRTL
-                    ? [size > 600 ? "mr-14" : "mr-2", keepOpen ? "mr-40" : ""]
-                    : [size > 600 ? "ml-14" : "ml-2", keepOpen ? "ml-40" : ""]
-                )}
-                style={
-                  isRTL
-                    ? {
-                        marginRight: `${
-                          drawerSizeStyle[keepOpen ? "opened" : "closed"][
-                            drawerSize
-                          ]
-                        }px`,
-                      }
-                    : {
-                        marginLeft: `${
-                          drawerSizeStyle[keepOpen ? "opened" : "closed"][
-                            drawerSize
-                          ]
-                        }px`,
-                      }
-                }
-              >
-                {props.pageTitle}
-              </div>
-            ) : null
+            <div
+              className={clsx(
+                isRTL
+                  ? [size > 600 ? "mr-14" : "mr-2", keepOpen ? "mr-40" : ""]
+                  : [size > 600 ? "ml-14" : "ml-2", keepOpen ? "ml-40" : ""]
+              )}
+              style={
+                isRTL
+                  ? {
+                      marginRight: `${
+                        drawerSizeStyle[keepOpen ? "opened" : "closed"][
+                          drawerSize
+                        ]
+                      }px`,
+                    }
+                  : {
+                      marginLeft: `${
+                        drawerSizeStyle[keepOpen ? "opened" : "closed"][
+                          drawerSize
+                        ]
+                      }px`,
+                    }
+              }
+            >
+              {props.pageTitle}
+            </div>
           ) : (
             // Mobile Drawer Menu Button
             <div
@@ -147,14 +151,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               "flex gap-2",
               isRTL ? "flex-row-reverse" : "flex-row"
             )}
-            // dir={direction}
           >
             {/* User Info */}
             {size > 600 ? (
               <div
-                className={clsx(
-                  isRTL ? "text-left text-xs" : "text-right text-xs"
-                )}
+                className={isRTL ? "text-left text-xs" : "text-right text-xs"}
               >
                 <div className="font-bold">{props.username}</div>{" "}
                 <div>{props.email}</div>
@@ -187,9 +188,6 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
       <div
         className={clsx(
           "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip  transition-all",
-          // drawerDefaultStyle,
-          // "bg-green-400",
-          // drawerSizeStyle[drawerSize],
           isRTL ? "right-0" : "left-0"
         )}
         style={{
@@ -298,8 +296,9 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           )
                           ? "bg-buttonPrimary-500 text-white"
                           : "hover:bg-layoutPrimary-300",
-                        "m-2 my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
-                        isRTL ? "flex-row-reverse pr-3" : ""
+                        "my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
+                        isRTL ? "flex-row-reverse pr-3" : "",
+                        openSideMenu ? "m-2" : "m-2"
                       )}
                     >
                       <div className="flex flex-row" dir={direction}>
@@ -316,22 +315,20 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                         </div>
                       </div>
                       {dItem.subItems && (
-                        <div
-                          className={clsx(
+                        <ArrowIcon
+                          pointing={
                             openSubItem && dItem.slug === openSubItem
-                              ? "-rotate-90"
-                              : "rotate-90"
-                          )}
-                        >
-                          {/* <FaChevronRight fontSize={11} /> */}
-                        </div>
+                              ? "up"
+                              : "down"
+                          }
+                        />
                       )}
                     </div>
 
                     {dItem.subItems && (
                       <div
                         className={clsx(
-                          "m-1 flex cursor-pointer flex-col gap-0 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
+                          "m-1 mx-2 flex cursor-pointer flex-col gap-0 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
                           openSubItem == dItem.slug && openSideMenu
                             ? ""
                             : "my-0 py-0",
@@ -348,7 +345,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           <div
                             key={s}
                             className={clsx(
-                              "flex flex-row gap-2 overflow-x-clip  rounded p-2 px-2 text-xs",
+                              "flex flex-row gap-2 overflow-x-clip  rounded-inner p-2 px-2 text-xs",
                               isRTL ? "text-right" : "text-left",
                               props.currentPage === subIt.slug
                                 ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
@@ -381,7 +378,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         </div>
         {/* Drawer Footer */}
         <div
-          className="fixed bottom-0 flex h-14 w-full items-center justify-center bg-layoutPrimary-500 transition-all"
+          className={clsx(
+            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 bg-layoutPrimary-500  transition-all",
+
+            direction === "rtl" ? "flex-row-reverse" : "flex-row"
+          )}
           style={{
             width:
               size > 600
@@ -389,19 +390,14 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? 160 : 0}px`,
           }}
         >
-          {onSettingsClick && (
-            <div
-              className=" cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700"
-              onClick={() => onSettingsClick()}
-            >
-              <SettingsIcon />
-            </div>
-          )}
+          {size > 600 && DrawerFooterActions && openSideMenu ? (
+            <>{DrawerFooterActions}</>
+          ) : null}
+
           {/* Expand Button */}
-          {size > 600 ? (
+          {size > 600 && openSideMenu ? (
             <div
               className={clsx("w-fit transition-all")}
-              // style={isRTL ? {} : {left: }}
               style={
                 isRTL
                   ? {
@@ -430,7 +426,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 <div
                   onClick={() => setKeepOpen(!keepOpen)}
                   className={
-                    "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
+                    "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all hover:bg-gray-400"
                   }
                 >
                   <ArrowIcon
@@ -454,7 +450,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
     
       {/* Children Container */}
       <div
-        className="fixed overflow-y-auto p-2"
+        className="fixed overflow-y-auto"
         style={
           isRTL
             ? {
@@ -492,22 +488,42 @@ const AvatarIcon = () => (
   </svg>
 )
 
-const ArrowIcon = ({ pointing }) => (
-  <svg
-    className={clsx(
-      "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
-      pointing === "right" ? "-rotate-90" : "rotate-90"
-    )}
-    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>
-)
+const ArrowIcon = ({ pointing }) => {
+  let directionStyle
+  switch (pointing) {
+    case "right":
+      directionStyle = "-rotate-90"
+      break
+    case "left":
+      directionStyle = "rotate-90"
+      break
+    case "up":
+      directionStyle = "-rotate-180"
+      break
+    case "down":
+      directionStyle = "rotate-0"
+      break
+
+    default:
+      break
+  }
+  return (
+    <svg
+      className={clsx(
+        "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
+        directionStyle
+      )}
+      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>
+  )
+}
 
 const SettingsIcon = () => (
   <svg

package/src/styles.css

@@ -403,6 +403,24 @@ video {
       var(--border-radius) - calc(var(--border-radius) / 3)
     );
   }
+
+  .inline-code {
+    font-size: 0.75rem;
+    /* color: theme("colors.slate.500"); */
+    /* background-color: theme("colors.stone.100"); */
+    border-radius: var(--border-radius);
+    /* padding-left: theme("spacing[1.5]");
+    padding-right: theme("spacing[1.5]");
+    padding-top: theme("spacing.1");
+    padding-bottom: theme("spacing.1"); */
+    padding: 0.25rem 0.375rem;
+    /* margin: theme("spacing.0") theme("spacing.1");  */
+
+    border: #d1d5db 1px solid;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
+  }
+
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -597,6 +615,9 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
+.-left-1\.5 {
+  left: -0.375rem;
+}
 .-right-10 {
   right: -2.5rem;
 }
@@ -769,6 +790,9 @@ video {
 .ml-3 {
   margin-left: 0.75rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .ml-40 {
   margin-left: 10rem;
 }
@@ -820,6 +844,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -1160,6 +1187,10 @@ video {
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-rotate-180 {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-rotate-90 {
   --tw-rotate: -90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1547,6 +1578,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
 .border-green-300 {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
@@ -1607,6 +1642,9 @@ video {
 .bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }
+.bg-buttonSecondary-500 {
+  background-color: var(--button-secondary-500);
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -1659,10 +1697,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1935,6 +1969,10 @@ video {
 .text-\[9px\] {
   font-size: 9px;
 }
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1981,6 +2019,9 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-none {
+  line-height: 1;
+}
 .leading-tight {
   line-height: 1.25;
 }
@@ -2322,6 +2363,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
 .hover\:bg-gray-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -2508,6 +2553,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
+:is(.dark .dark\:bg-gray-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -2572,6 +2621,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:text-gray-800) {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
 :is(.dark .dark\:text-green-800) {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));

package/src/tailwind.css

@@ -22,6 +22,24 @@
       var(--border-radius) - calc(var(--border-radius) / 3)
     );
   }
+
+  .inline-code {
+    font-size: 0.75rem;
+    /* color: theme("colors.slate.500"); */
+    /* background-color: theme("colors.stone.100"); */
+    border-radius: theme("borderRadius.DEFAULT");
+    /* padding-left: theme("spacing[1.5]");
+    padding-right: theme("spacing[1.5]");
+    padding-top: theme("spacing.1");
+    padding-bottom: theme("spacing.1"); */
+    padding: theme("spacing.1") theme("spacing[1.5]");
+    /* margin: theme("spacing.0") theme("spacing.1");  */
+
+    border: theme("colors.gray.300") 1px solid;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
+  }
+
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;