@sikka/hawa 0.1.6 → 0.1.7-beta

package/src/elements/index.ts

@@ -1,62 +0,0 @@
-export * from "./HawaSnackbar"
-export * from "./HawaSwitch"
-export * from "./HawaCheckbox"
-export * from "./HawaPanelTabs"
-export * from "./HawaChip"
-export * from "./HawaIconCount"
-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 "./HawaAccordion"
-export * from "./HawaPhoneInput"
-export * from "./HawaTooltip"
-export * from "./HawaTabs"
-export * from "./HawaModal"
-export * from "./HawaMenu"
-export * from "./HawaDropdownMenu"
-export * from "./HawaCopyrights"
-export * from "./HawaStepper"
-export * from "./HawaStats"
-export * from "./HawaCodeBlock"
-export * from "./HawaLoading"
-export * from "./HawaRadio"
-export * from "./HawaDatepicker"
-export * from "./DragDropImages"
-export * from "./DraggableCard"
-export * from "./Breadcrumb"
-export * from "./SubsectionList"
-export * from "./UsageCard"
-export * from "./InvoiceAccordion"
-export * from "./UserFeedback"
-export * from "./ArrowCarousel"
-export * from "./FloatingComment"
-export * from "./FloatingCommentSlate"
-export * from "./FloatingCommentExec"
-export * from "./BackToTop"
-export * from "./HawaInlineCode"
-export * from "./Timeline"
-// Inputs
-export * from "./HawaTextField"
-export * from "./HawaCardInput"
-export * from "./HawaPinInput"
-// Cards
-export * from "./HawaItemCard"
-export * from "./HawaPricingCard"
-export * from "./HawaAdCard"
-export * from "./HawaLandingCard"
-//Buttons
-export * from "./HawaButton"
-export * from "./HawaStoreButtons"
-export * from "./HawaLogoButton"
-
-// v0.1
-export * from "./Button"
-export * from "./Label"
-export * from "./Input"
-export * from "./Tooltip"
-export * from "./Card"

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from "./useDiscloser"
-export * from "./useHover"

package/src/hooks/useBreakpoint.ts

@@ -1,24 +0,0 @@
-import React, { useState, useEffect } from "react"
-
-const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(window?.innerWidth)
-  const resize = () => {
-    setBreakpoint(window?.innerWidth)
-  }
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      // Client-side-only code
-
-      window?.addEventListener("resize", resize)
-
-      return () => {
-        window?.removeEventListener("resize", resize)
-      }
-    }
-  }, [])
-
-  return breakpoint
-}
-
-export default useBreakpoint

package/src/hooks/useDiscloser.ts

@@ -1,21 +0,0 @@
-import React, { useState } from "react"
-
-type TUseDiscloser = {
-  isOpen: boolean
-  onOpen: () => void
-  onClose: () => void
-}
-
-const useDiscloser = (value: boolean = false): TUseDiscloser => {
-  const [open, setOpen] = useState<boolean>(value)
-  const onOpen = () => setOpen(true)
-  const onClose = () => setOpen(false)
-
-  return {
-    isOpen: open,
-    onOpen: onOpen,
-    onClose: onClose,
-  }
-}
-
-export default useDiscloser

package/src/hooks/useHover.ts

@@ -1,25 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-function useHover() {
-  const [value, setValue] = useState(false);
-  const ref = useRef(null);
-  const handleMouseOver = () => setValue(true);
-  const handleMouseOut = () => setValue(false);
-  useEffect(
-    () => {
-      const node = ref.current;
-      if (node) {
-        node.addEventListener("mouseover", handleMouseOver);
-        node.addEventListener("mouseout", handleMouseOut);
-        return () => {
-          node.removeEventListener("mouseover", handleMouseOver);
-          node.removeEventListener("mouseout", handleMouseOut);
-        };
-      }
-    },
-    [ref.current] // Recall only if ref changes
-  );
-  return [ref, value];
-}
-
-export default useHover;

package/src/hooks/useScrollPosition.ts

@@ -1,30 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-
-function useScrollPosition(ref) {
-  const [scrollPosition, setScrollPosition] = useState(0);
-  // const savedRef = useRef();
-
-  // useEffect(() => {
-  //   savedRef.current = ref;
-  // }, [ref]);
-
-  useEffect(() => {
-    function handleScroll() {
-      setScrollPosition(ref.current.scrollTop);
-    }
-
-    if (ref.current) {
-      ref.current.addEventListener("scroll", handleScroll);
-    }
-
-    return () => {
-      if (ref.current) {
-        ref.current.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, [ref]);
-
-  return scrollPosition;
-}
-
-export default useScrollPosition;

package/src/hooks/useTable.ts

@@ -1,159 +0,0 @@
-// useTable.js
-import React, { useState, useEffect } from "react"
-
-const calculateRange = (data, rowsPerPage) => {
-  const range = []
-  const num = Math.ceil(data?.length / rowsPerPage)
-  let i = 1
-  for (let i = 1; i <= num; i++) {
-    range.push(i)
-  }
-  return range
-}
-
-const sliceData = (data, page, rowsPerPage) => {
-  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-}
-
-// useTable.js
-const sortData = (data, sortColumn, sortDirection) => {
-  if (sortColumn !== null) {
-    return data?.sort((a, b) => {
-      const aValue = a[sortColumn].value
-      const bValue = b[sortColumn].value
-
-      // Handle non-string values by using simple comparison
-      if (typeof aValue === "string" && typeof bValue === "string") {
-        if (sortDirection === "asc") {
-          return aValue.localeCompare(bValue)
-        } else {
-          return bValue.localeCompare(aValue)
-        }
-      } else {
-        if (sortDirection === "asc") {
-          return aValue - bValue
-        } else {
-          return bValue - aValue
-        }
-      }
-    })
-  }
-  return data
-}
-
-const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
-  const [tableRange, setTableRange] = useState([])
-  const [slice, setSlice] = useState([])
-
-  useEffect(() => {
-    if (data) {
-      const range = calculateRange(data, rowsPerPage)
-      setTableRange([...range])
-
-      const sortedData = sortData(data, sortColumn, sortDirection)
-      const slicedData = sliceData(sortedData, page, rowsPerPage)
-      setSlice([...slicedData])
-    }
-  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
-
-  return { slice, range: tableRange }
-}
-
-export default useTable
-
-// import React, { useState, useEffect } from "react"
-
-// const calculateRange = (data, rowsPerPage) => {
-//   const range = []
-//   const num = Math.ceil(data?.length / rowsPerPage)
-//   let i = 1
-//   for (let i = 1; i <= num; i++) {
-//     range.push(i)
-//   }
-//   return range
-// }
-
-// const sliceData = (data, page, rowsPerPage) => {
-//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-// }
-
-// const sortData = (data, sortColumn, sortDirection) => {
-//   if (sortColumn !== null) {
-//     return data?.sort((a, b) => {
-//       const aValue = a[sortColumn].value
-//       const bValue = b[sortColumn].value
-
-//       if (sortDirection === "asc") {
-//         return aValue.localeCompare(bValue)
-//       } else {
-//         return bValue.localeCompare(aValue)
-//       }
-//     })
-//   }
-//   return data
-// }
-
-// const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
-//   const [tableRange, setTableRange] = useState([])
-//   const [slice, setSlice] = useState([])
-
-//   useEffect(() => {
-//     if (data) {
-//       const range = calculateRange(data, rowsPerPage)
-//       setTableRange([...range])
-
-//       const sortedData = sortData(data, sortColumn, sortDirection)
-//       const slicedData = sliceData(sortedData, page, rowsPerPage)
-//       setSlice([...slicedData])
-//     }
-//   }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
-
-//   return { slice, range: tableRange }
-// }
-
-// export default useTable
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-// import React, { useState, useEffect } from "react"
-
-// const calculateRange = (data, rowsPerPage) => {
-//   const range = []
-//   const num = Math.ceil(data?.length / rowsPerPage)
-//   let i = 1
-//   for (let i = 1; i <= num; i++) {
-//     range.push(i)
-//   }
-//   return range
-// }
-
-// const sliceData = (data, page, rowsPerPage) => {
-//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-// }
-
-// const useTable = (data, page, rowsPerPage) => {
-//   const [tableRange, setTableRange] = useState([])
-//   const [slice, setSlice] = useState([])
-
-//   useEffect(() => {
-//     if (data) {
-//       const range = calculateRange(data, rowsPerPage)
-//       setTableRange([...range])
-
-//       const slice = sliceData(data, page, rowsPerPage)
-//       setSlice([...slice])
-//     }
-//   }, [data, setTableRange, page, setSlice, rowsPerPage])
-
-//   return { slice, range: tableRange }
-// }
-
-// export default useTable

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from "./elements"
-export * from "./layout"
-export * from "./blocks"
-export * from "./hooks"

package/src/layout/AppSidebar.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-
-interface Props {
-  isOpen: boolean
-  onClose: () => void
-  items: { label: string; onClick: () => void }[]
-}
-
-export const AppSidebar: React.FC<Props> = ({ isOpen, onClose, items }) => {
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <div className="fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75">
-      <div className="w-1/3 rounded-l-lg bg-gray-800 shadow-2xl">
-        <button
-          onClick={onClose}
-          className="p-4 text-gray-400 hover:text-white focus:text-white focus:outline-none"
-        >
-          Close
-        </button>
-        <nav>
-          {items.map((item, i) => (
-            <a
-              key={i}
-              href="#"
-              onClick={item.onClick}
-              className="block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"
-            >
-              {item.label}
-            </a>
-          ))}
-        </nav>
-      </div>
-      <div className="w-2/3 bg-gray-50"></div>
-    </div>
-  )
-}

package/src/layout/Banner.tsx

@@ -1,122 +0,0 @@
-import React, { useEffect, FC, useRef, useState } from "react"
-import clsx from "clsx"
-import { HawaButton } from "../elements"
-
-type BannerTypes = {
-  showBanner?: boolean
-  direction?: "rtl" | "ltr"
-  logoURL?: string
-  title?: string
-  text?: string
-  actionText?: string
-  onActionClick?: () => void
-  position?: "top" | "bottom"
-  design: "default" | "floating"
-}
-
-export const HawaBanner: FC<BannerTypes> = ({
-  design = "floating",
-  ...props
-}) => {
-  const bannerRef = useRef(null)
-  const [closed, setClosed] = useState(false)
-  let bannerStyle = {
-    floating:
-      "left-1/2  z-50  w-[calc(100%-2rem)] -translate-x-1/2 lg:max-w-7xl p-4 rounded",
-    default: "w-[calc(100%)] left-0 z-50 right-0 rounded-none p-2",
-  }
-  return (
-    <div ref={bannerRef}>
-      <div
-        dir={props.direction}
-        className={clsx(
-          bannerStyle[design],
-          "fixed flex  flex-col justify-between  border  border-gray-100 bg-white  shadow-sm transition-all dark:border-gray-600 dark:bg-gray-700 md:flex-row md:gap-4 ",
-          props.position === "top"
-            ? design === "floating"
-              ? "top-6"
-              : "top-0"
-            : design === "floating"
-            ? "bottom-6"
-            : "bottom-0",
-          closed ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="mb-3 flex w-full flex-col items-center  justify-start   md:mb-0 md:flex-row md:items-center">
-          <div
-            className={clsx(
-              props.direction === "rtl"
-                ? "md:ml-4 md:border-l  md:pl-4"
-                : "md:mr-4 md:border-r  md:pr-4",
-              "mb-2 flex items-center  border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4  md:pr-4"
-            )}
-          >
-            {props.logoURL && (
-              <img
-                src={props.logoURL}
-                className="mr-2 h-6"
-                alt="Flowbite Logo"
-              />
-            )}
-            {props.title && (
-              <span className="self-center whitespace-nowrap text-lg font-semibold dark:text-white">
-                {props.title}
-              </span>
-            )}
-          </div>
-          {props.text && (
-            <p
-              className={clsx(
-                "m-0 flex items-center text-center text-sm  font-normal  text-gray-500 dark:text-gray-400 ",
-                props.direction === "rtl" ? "md:text-right" : "md:text-left"
-              )}
-            >
-              {props.text}
-            </p>
-          )}
-        </div>
-        {props.actionText && (
-          <div
-            className={clsx(
-              "flex flex-shrink-0 items-center justify-center ",
-              props.direction === "rtl" ? "ml-0 md:ml-10" : "mr-0 md:mr-10"
-            )}
-          >
-            <HawaButton onClick={props.onActionClick}>
-              {props.actionText}
-            </HawaButton>
-          </div>
-        )}
-        <button
-          type="button"
-          className={clsx(
-            "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
-            props.direction === "rtl" ? "left-2" : "right-2"
-          )}
-          data-dismiss-target="#alert-default"
-          aria-label="Close"
-          onClick={() => {
-            setClosed(true)
-            setTimeout(() => {
-              bannerRef.current.removeChild(bannerRef.current.children[0])
-            }, 200)
-          }}
-        >
-          <span className="sr-only">Close</span>
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              fillRule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  )
-}

package/src/layout/Box.tsx

@@ -1,5 +0,0 @@
-import React from "react"
-
-export const Box = (props: any) => {
-  return <div>{props.children}</div>
-}

package/src/layout/Footer.tsx

@@ -1,71 +0,0 @@
-import { BsInstagram, BsTwitter } from "react-icons/bs"
-import { FaSnapchatGhost, FaTiktok } from "react-icons/fa"
-
-type FooterTypes = {
-  logoText?: string
-  logoURL?: string
-  socialLinks?: {
-    twitter?: string
-    instagram?: string
-    tiktok?: string
-    snapchat?: string
-  }
-  footerLinks?: {
-    title: string
-    pages: {
-      label: string
-      link: string
-    }[]
-  }[]
-}
-
-export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
-  return (
-    <div className="sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
-      {props.logoText && (
-        <div>
-          <div className="text-2xl font-bold">{props.logoText}</div>
-        </div>
-      )}
-      {props.footerLinks?.map((pagesSection) => (
-        <div className="flex w-32 flex-col gap-2">
-          <div className="text-lg font-bold">{pagesSection.title}</div>
-          <div className="flex flex-col gap-1">
-            {pagesSection.pages.map((singlePage) => (
-              <a
-                className="transition-all hover:font-bold"
-                href={singlePage.link}
-              >
-                {singlePage.label}
-              </a>
-            ))}
-          </div>
-        </div>
-      ))}
-      {props.socialLinks && (
-        <div className="flex flex-row gap-2">
-          {props.socialLinks.twitter && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
-              <BsTwitter />
-            </div>
-          )}
-          {props.socialLinks.instagram && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
-              <BsInstagram />
-            </div>
-          )}
-          {props.socialLinks.tiktok && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
-              <FaTiktok />
-            </div>
-          )}
-          {props.socialLinks.snapchat && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
-              <FaSnapchatGhost />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}