@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/layout/HawaSiteLayout.tsx

@@ -1,159 +0,0 @@
-import React, { useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-import useDiscloser from "../hooks/useDiscloser"
-import useBreakpoint from "../hooks/useBreakpoint"
-
-type HawaSiteLayoutTypes = {
-  navItems: {
-    label: string
-    icon: any
-    slug: string
-    action: () => void
-    subItems?: any
-  }[]
-  direction?: "rtl" | "ltr"
-  currentPage: string
-  pageTitle?: string
-  logoSymbol?: any
-  logoLink?: string
-  logoText?: any
-  children?: any
-  stickyNav?: boolean
-  topBar?: boolean
-  navigationSize?: "sm" | "md" | "lg"
-  floating?: boolean
-}
-
-export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
-  direction = "rtl",
-  navigationSize = "md",
-  ...props
-}) => {
-  const [openSideMenu, setOpenSideMenu] = useState(false)
-  const [openSubItem, setOpenSubItem] = useState(false)
-  const { isOpen, onClose, onOpen } = useDiscloser(false)
-  const ref = useRef(null)
-  const drawerItemRef = useRef(null)
-
-  let size
-  if (typeof window !== "undefined") {
-    size = useBreakpoint()
-  } else {
-    size = 1200
-  }
-  const [keepOpen, setKeepOpen] = useState(false)
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
-        // onClickOutside && onClickOutside()
-
-        setOpenSideMenu(false)
-      }
-    }
-    document.addEventListener("click", handleClickOutside, true)
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true)
-    }
-  }, [keepOpen])
-
-  //States of the side menu
-  //larger than 600
-  //as a bar and expands when hover
-  //less than 600
-  //as nothing and expands as button is clicked
-  let ltrDrawerStyle = [
-    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
-    size > 600 ? "w-14 hover:w-40" : "w-0",
-    openSideMenu ? "w-40" : "w-14",
-  ]
-  let rtlDrawerStyle = [
-    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
-    size > 600 ? "w-14 hover:w-40" : "w-0",
-    openSideMenu ? "w-40" : "w-14",
-  ]
-
-  let navigationSizeStyles = {
-    sm: "h-10",
-    md: "",
-    lg: "h-24",
-  }
-  let ltrChildrenStyle = [
-    // "w-full overflow-y-auto",
-    // "top-14 h-[calc(100%-3.5rem)]",
-  ]
-  let rtlChildrenStyle = [
-    // "overflow-y-auto",
-    // "w-full",
-    // "top-14 h-[calc(100%-3.5rem)]",
-  ]
-  return (
-    <div className="h-full w-full">
-      <div
-        className={clsx(
-          "z-30 flex w-auto select-none flex-row items-start justify-between bg-layoutPrimary-500  transition-all",
-          navigationSizeStyles[navigationSize],
-          "rounded p-3 ",
-          openSideMenu ? "h-44" : "h-14",
-          // props.floating ? "rounded-[30px]" : "rounded",
-          props.stickyNav ? "fixed left-4 right-4 top-4" : "",
-          direction === "rtl" ? "flex-row" : "flex-row-reverse"
-        )}
-      >
-        {size > 600 ? (
-          <div className="flex  flex-row h-8    items-center  gap-4 px-3">
-            {props.navItems?.map(({ label }, i) => (
-              <div
-                onClick={() => setOpenSideMenu(!openSideMenu)}
-                key={i}
-                className="cursor-pointer rounded bg-none text-gray-600 transition-all hover:text-black"
-              >
-                {label}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="flex items-center justify-center">
-            <div
-              onClick={() => setOpenSideMenu(!openSideMenu)}
-              className="cursor-pointer  rounded p-1  transition-all hover:bg-gray-100"
-            >
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                strokeWidth="0"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-                height="1.6em"
-                width="1.6em"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>{" "}
-            </div>
-            {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
-          </div>
-        )}
-        <div className="h-full">
-          <img
-            className="h-full max-h-8 "
-            src={`https://sikka-images.s3.ap-southeast-1.amazonaws.com/seera/seera-horizontal-wordmark-${
-              direction === "rtl" ? "ar" : "en"
-            }-white.svg`}
-          />
-        </div>
-      </div>
-
-      <div
-        className={clsx(" relative top-14")}
-        // className={clsx(
-        //   direction === "rtl" ? rtlChildrenStyle : ltrChildrenStyle
-        // )}
-      >
-        {props.children}
-      </div>
-    </div>
-  )
-}

package/src/layout/Sidebar.tsx

@@ -1,257 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { cn } from "../util"
-
-const Accordion = AccordionPrimitive.Root
-
-let triggerStyles =
-  "flex flex-1 items-center select-none cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90"
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} />
-))
-AccordionItem.displayName = "AccordionItem"
-
-type AccordionTriggerProps = React.ComponentPropsWithoutRef<
-  typeof AccordionPrimitive.Trigger
-> & {
-  showArrow?: any
-}
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  AccordionTriggerProps
->(({ className, showArrow, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(triggerStyles, className)}
-      {...props}
-    >
-      {children}
-      {showArrow && (
-        <svg
-          aria-label="Chevron Right Icon"
-          stroke="currentColor"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          height="1em"
-          width="1em"
-          className="h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"
-        >
-          <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
-        </svg>
-      )}
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-type Item = {
-  value: string
-  label: string
-  icon?: any
-  subitems?: SubItem[]
-  onClick?: () => void
-}
-type SubItem = {
-  value: string
-  label: string
-  icon?: any
-  onClick?: () => void
-}
-interface SidebarGroupProps {
-  title?: string
-  items: Item[]
-  openedItem?: any
-  setOpenedItem?: any
-  selectedItem?: any
-  isOpen?: boolean
-  onItemClick?: (value: string[]) => void
-  onSubItemClick?: (values: string[]) => void
-  direction?: "rtl" | "ltr"
-}
-
-const SidebarGroup: React.FC<SidebarGroupProps> = ({
-  title,
-  items,
-  selectedItem,
-  openedItem,
-  setOpenedItem,
-  onItemClick,
-  onSubItemClick,
-  direction,
-  isOpen,
-}) => {
-  // console.log("selected item is ", selectedItem)
-  return (
-    <div>
-      {title && <h3 className="mb-1 font-bold">{title}</h3>}
-      <ul className="flex flex-col gap-2">
-        <Accordion
-          value={openedItem}
-          type="single"
-          onValueChange={(e) => {
-            setOpenedItem(e)
-          }}
-          collapsible
-          className="flex flex-col gap-1"
-        >
-          {items.map((item, idx) => (
-            <SidebarItem
-              isOpen={isOpen}
-              selectedItem={selectedItem}
-              key={idx}
-              direction={direction}
-              item={item}
-              onItemClick={onItemClick}
-              onSubItemClick={onSubItemClick}
-            />
-          ))}
-        </Accordion>
-      </ul>
-    </div>
-  )
-}
-const SidebarItem: React.FC<{
-  item: Item
-  selectedItem?: any
-  direction?: "rtl" | "ltr"
-  onItemClick?: (value: string[]) => void
-  onSubItemClick?: (values: string[]) => void
-  isOpen?: boolean
-}> = ({
-  item,
-  onItemClick,
-  onSubItemClick,
-  direction,
-  isOpen = true,
-  ...props
-}) => {
-  const getSelectedStyle = (value: string) => {
-    return props.selectedItem === value
-      ? "bg-primary text-primary-foreground  cursor-default"
-      : "hover:bg-primary/10"
-  }
-  if (item.subitems) {
-    return (
-      <AccordionItem
-        value={item.value}
-        className="overflow-x-clip"
-        dir={direction}
-      >
-        <AccordionTrigger
-          className={cn(
-            "overflow-x-clip",
-            props.selectedItem === item.value
-              ? "cursor-default bg-primary  text-primary-foreground"
-              : "hover:bg-primary/10",
-            item.subitems &&
-              item.subitems.some(
-                (subitem) => props.selectedItem === subitem.value
-              )
-              ? "bg-primary text-primary-foreground hover:bg-primary"
-              : ""
-          )}
-          showArrow={isOpen}
-        >
-          <div
-            className={cn(
-              !isOpen && "py-1",
-              "flex w-fit flex-row items-center  gap-2"
-            )}
-          >
-            {item.icon}
-            {isOpen && (
-              <span
-                className={cn(
-                  "transition-all ",
-                  isOpen ? "opacity-100" : "opacity-0"
-                )}
-              >
-                {item.label}
-              </span>
-            )}
-          </div>
-        </AccordionTrigger>
-        {item.subitems && (
-          <AccordionContent className=" mt-1 h-full rounded  ">
-            <div
-              className={cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")}
-            >
-              {item.subitems.map((subitem, idx) => (
-                <li
-                  key={idx}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    subitem.onClick()
-                    if (onSubItemClick) {
-                      onSubItemClick([item.value, subitem.value])
-                    }
-                  }}
-                  className={cn(
-                    "flex h-full cursor-pointer flex-row items-center gap-2 rounded  p-2 transition-all",
-                    // bg-foreground/10
-                    getSelectedStyle(subitem.value)
-                  )}
-                >
-                  {subitem.icon}
-                  {subitem.label}
-                </li>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    )
-  } else {
-    return (
-      <div
-        dir={direction}
-        onClick={() => {
-          item.onClick()
-          if (onItemClick) {
-            onItemClick([item.value])
-          }
-        }}
-        className={cn(
-          triggerStyles,
-          getSelectedStyle(item.value),
-          "overflow-x-clip "
-        )}
-      >
-        <div className={"flex flex-row items-center gap-2 "}>
-          {item.icon}
-          <span
-            className={cn(
-              "whitespace-nowrap transition-all",
-              isOpen ? "opacity-100" : "opacity-0"
-            )}
-          >
-            {item.label}
-          </span>
-        </div>
-      </div>
-    )
-  }
-}
-export { SidebarGroup, SidebarItem }

package/src/layout/Sidebar2.tsx

@@ -1,77 +0,0 @@
-import {
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  Accordion,
-} from "@radix-ui/react-accordion"
-import React from "react"
-import { cn } from "../util"
-
-type Item = {
-  value: string
-  label: string
-  icon?: any
-  subitems?: Item[]
-}
-
-interface SidebarGroupProps {
-  title: string
-  items: Item[]
-}
-interface SidebarRootProps {
-  children: any
-}
-
-const SidebarRoot: React.FC<SidebarRootProps> = ({ children }) => (
-  <div className="flex flex-col gap-2 rounded bg-red-200 p-2">{children}</div>
-)
-
-const SidebarGroup: React.FC<SidebarGroupProps> = ({ title, items }) => (
-  <div>
-    <h3 className="mb-1 font-bold">{title}</h3>
-    <ul className="flex flex-col gap-2">
-      {items.map((item, idx) => (
-        <SidebarItem key={idx} item={item} />
-      ))}
-    </ul>
-  </div>
-)
-
-const SidebarItem: React.FC<{ item: Item }> = ({ item }) => (
-  // <li className="rounded bg-red-400 p-2">
-  <Accordion
-    // className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
-    type="single"
-    defaultValue="item-1"
-    collapsible
-  >
-    <AccordionItem value={item.value}>
-      <AccordionTrigger
-        className={cn()
-        // "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        // className
-        }
-      >
-        <div className="flex flex-row items-center gap-2">
-          {item.icon}
-          {item.label}
-        </div>
-      </AccordionTrigger>
-
-      {item.subitems && (
-        <AccordionContent
-        //  className="flex flex-col gap-1 bg-blue-400"
-        >
-          {item.subitems.map((subitem, idx) => (
-            <li className="rounded bg-yellow-300 p-1" key={idx}>
-              {subitem.label}
-            </li>
-          ))}
-        </AccordionContent>
-      )}
-    </AccordionItem>
-  </Accordion>
-  // </li>
-)
-
-export { SidebarRoot, SidebarGroup, SidebarItem }

package/src/layout/index.ts

@@ -1,13 +0,0 @@
-export * from "./Box"
-export * from "./HawaBottomAppBar"
-export * from "./HawaSiteLayout"
-export * from "./AppLayout"
-export * from "./HawaAppLayout"
-export * from "./HawaAppLayoutSimplified"
-export * from "./HawaContainer"
-export * from "./HawaGrid"
-export * from "./AppSidebar"
-export * from "./Footer"
-export * from "./Banner"
-// export * from "./Sidebar2"
-export * from "./Sidebar"