@sikka/hawa 0.1.2 → 0.1.3-next

package/src/elements/InvoiceAccordion.tsx

@@ -1,155 +0,0 @@
-import React, { useState, FC } from "react"
-import clsx from "clsx"
-import { HawaChip } from "./HawaChip"
-import { HawaMenu } from "./HawaMenu"
-
-type InvoiceAccordionTypes = {
-  products: {
-    usage?: string
-    price?: string
-    amount?: string
-    plan?: string
-  }[]
-  texts: {
-    total: string
-    plan: string
-    usage: string
-    amount: string
-    price: string
-  }
-  invoiceTitle: string
-  invoiceSubtitle: string
-  invoiceDescription?: string
-  invoiceActions?: {
-    icon?: JSX.Element
-    label: string
-    action?: (e: any) => void
-    isButton?: boolean
-    element?: any
-  }[][]
-  total: any
-  direction?: "rtl" | "ltr"
-  status?: "paid" | "pending" | "overdue"
-}
-export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
-  direction = "ltr",
-  texts = {
-    total: "Total",
-    plan: "Plan",
-    usage: "Usage",
-    amount: "Amount",
-    price: "Price",
-  },
-  ...props
-}) => {
-  const InvoiceItemProp = (props) => (
-    <div
-      className={clsx(
-        props.start ? "items-start" : "items-end",
-        "flex w-full flex-col"
-      )}
-    >
-      <div className=" text-sm text-gray-500">{props.label}</div>
-      <div className=" whitespace-nowrap">{props.text}</div>
-    </div>
-  )
-  const [expanded, setExpanded] = useState(false)
-  return (
-    <div className="flex w-full flex-col">
-      <div className="flex w-full flex-row items-center gap-2 border p-4 ">
-        {props.invoiceActions && (
-          <div
-            className={clsx(
-              "transition-all hover:cursor-pointer ",
-              direction === "rtl" ? "rotate-180" : "",
-              expanded ? "rotate-90" : ""
-            )}
-            onClick={() => setExpanded(!expanded)}
-          >
-            <svg
-              stroke="currentColor"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 20 20"
-              aria-hidden="true"
-              height="2em"
-              width="2em"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </div>
-        )}
-        <div
-          className="flex w-full cursor-pointer flex-col gap-0"
-          onClick={() => setExpanded(!expanded)}
-        >
-          <div className="flex flex-row items-center gap-2">
-            <span className="bg-white-200">{props.invoiceTitle}</span>
-            {props.status && <HawaChip size="small" label={props.status} />}
-          </div>
-          <div className="font-sm text-gray-400">{props.invoiceSubtitle}</div>
-        </div>
-        <div className="flex flex-row items-center gap-2">
-          <div className="whitespace-nowrap">{props.total}</div>
-          <HawaMenu
-            direction={direction}
-            position={direction === "rtl" ? "bottom-right" : "bottom-left"}
-            menuItems={props.invoiceActions}
-          >
-            <div className=" p-2">
-              {/* <BsThreeDotsVertical /> */}
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                stroke-width="0"
-                viewBox="0 0 16 16"
-                height="1em"
-                width="1em"
-              >
-                <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
-              </svg>
-            </div>
-          </HawaMenu>
-        </div>
-      </div>
-      {expanded && (
-        <div
-          className={clsx(
-            expanded ? "h-full" : "h-0 border-none p-0 px-4",
-            "flex h-auto flex-col gap-4 overflow-clip border border-t-0 bg-gray-50 p-4 transition-all"
-          )}
-        >
-          <div className="border-b pb-2">{props.invoiceDescription}</div>
-          {props.products?.map((product, i) => (
-            <div key={i} className="flex flex-row border-b  pb-4">
-              <div className="w-full">
-                <InvoiceItemProp start label={texts.plan} text={product.plan} />
-              </div>
-              <div className="flex w-full flex-row gap-20 ">
-                <InvoiceItemProp
-                  label={texts.usage}
-                  text={`${product.usage} SAR`}
-                />
-                <InvoiceItemProp
-                  label={texts.price}
-                  text={`${product.price} SAR`}
-                />
-                <InvoiceItemProp
-                  label={texts.amount}
-                  text={`${product.amount} SAR`}
-                />
-              </div>
-            </div>
-          ))}
-          <div className="flex flex-row justify-between">
-            <div>{texts.total}</div> <div>{props.total}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/Label.tsx

@@ -1,26 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../util"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

package/src/elements/SubsectionList.tsx

@@ -1,77 +0,0 @@
-import React, { useState, FC } from "react"
-import clsx from "clsx"
-import { HawaChip } from "./HawaChip"
-
-type SubsectionListTypes = {
-  align?: any
-  subsections: [
-    {
-      title: string
-      sections: [
-        {
-          label: string
-          action: () => void
-          icon?: any
-          value?: any
-        }
-      ]
-    }
-  ]
-}
-export const SubsectionList: FC<SubsectionListTypes> = ({ subsections }) => {
-  const [selectedSection, setSelectedSection] = useState(null)
-  return (
-    <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
-      {subsections.map((ss, i) => (
-        <div key={i} className="my-0">
-          {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
-          {ss.sections.map((s, i) => (
-            <SubsectionItem
-              key={i}
-              onItemClick={() => setSelectedSection(s.value)}
-              selected={selectedSection}
-              value={s.value}
-              icon={s.icon}
-              title={s.label}
-              chip="Upgrade"
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-type TSubsectionItem = {
-  chip?: string
-  title: string
-  value: string
-  icon?: any
-  selected?: any
-  onItemClick?: () => void
-}
-const SubsectionItem: FC<TSubsectionItem> = ({
-  title,
-  value,
-  icon,
-  chip,
-  selected,
-  onItemClick,
-}) => {
-  return (
-    <div
-      onClick={onItemClick}
-      className={clsx(
-        "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
-        selected === value
-          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-          : "hover:bg-layoutPrimary-300"
-      )}
-    >
-      <div className="flex w-full flex-row items-center justify-start  gap-2">
-        {icon} <span>{title}</span>
-      </div>
-      {chip && <HawaChip label="Upgrade" size="normal" />}{" "}
-    </div>
-  )
-}

package/src/elements/TabPanel.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from "react"
-
-type TabPanelTypes = {
-  children: any
-  value: any
-  index: any
-}
-export const TabPanel: FC<TabPanelTypes> = (props) => {
-  const { children, value, index, ...other } = props
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`vertical-tabpanel-${index}`}
-      aria-labelledby={`vertical-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <div>
-          <span>{children}</span>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/Timeline.tsx

@@ -1,35 +0,0 @@
-import React, { FC } from "react"
-
-type TimelineTypes = {
-  title: any
-  steps: StepTypes[]
-}
-type StepTypes = {
-  date: string
-  title: string
-  description?: string
-  actions?: any
-}
-export const Timeline: FC<TimelineTypes> = (props) => {
-  return (
-    <div>
-      <ol className="relative border-l border-gray-200 dark:border-gray-700">
-        {props.steps.map((step) => (
-          <li className="mb-10 ml-4">
-            <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"></div>
-            <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
-              {step.date}
-            </time>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              {step.title}
-            </h3>
-            <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-              {step.description}
-            </p>
-            {step.actions}
-          </li>
-        ))}
-      </ol>
-    </div>
-  )
-}

package/src/elements/UsageCard.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from "react"
-import { HawaTooltip } from "./HawaTooltip"
-
-type UsageCardTypes = {
-  tooltip?: any
-  title: any
-  percent: any
-  currentUsage: any
-}
-export const UsageCard: FC<UsageCardTypes> = (props) => {
-  return (
-    <div className="flex w-full flex-col gap-0 border p-4">
-      <div className="flex flex-row items-center gap-2">
-        <span className="bg-white-200">{props.title}</span>
-        {props.tooltip && (
-          <HawaTooltip content={props.tooltip} position="right-top">
-            <svg
-              stroke="currentColor"
-              aria-label="Exclamation Circle"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 16 16"
-              height="1em"
-              width="1em"
-            >
-              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
-            </svg>
-          </HawaTooltip>
-        )}
-      </div>
-      <div className="bg-white-100 flex flex-row">
-        <div>{props.currentUsage}</div>
-        <div> ({props.percent}%)</div>
-      </div>
-      <div className="mt-2 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-        <div
-          className="h-2.5 rounded-full bg-buttonPrimary-500"
-          style={{
-            width: `${props.percent ?? 0}%`,
-          }}
-        ></div>
-      </div>
-    </div>
-  )
-}

package/src/elements/UserFeedback.tsx

@@ -1,126 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-import { HawaButton } from "./HawaButton"
-
-type ComponentTypes = {
-  title?: string
-  question: string
-  options?: []
-  texts?: {
-    least: string
-    most: string
-  }
-  position?: "bottom-right" | "bottom-left"
-  onOptionClicked?: (option) => void
-}
-export const UserFeedback: FC<ComponentTypes> = ({
-  position = "bottom-right",
-  ...props
-}) => {
-  const [closed, setClosed] = useState(false)
-  const [answered, setAnswered] = useState(false)
-  const [clickedOption, setClickedOption] = useState(null)
-  const [closingTimer, setClosingTimer] = useState(5)
-  const popUpRef = useRef(null)
-
-  const boxPosition = {
-    "bottom-right": "right-4",
-    "bottom-left": "left-4",
-  }
-  useEffect(() => {
-    //To change opacity and hide the component
-    const timeoutHide = setTimeout(() => {
-      setClosingTimer(closingTimer - 1)
-    }, 1000)
-
-    return () => {
-      clearTimeout(timeoutHide)
-    }
-  }, [closingTimer])
-
-  const slowClose = () => {
-    setClosed(true)
-    setTimeout(() => {
-      popUpRef.current.removeChild(popUpRef.current.children[0])
-    }, 200)
-  }
-  return (
-    <div
-      ref={popUpRef}
-      className={clsx("fixed bottom-4 ", boxPosition[position])}
-    >
-      <div
-        className={clsx(
-          "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
-          closed ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="absolute left-2 top-2 p-1.5 text-sm">{props.title}</div>
-        <button
-          type="button"
-          className="absolute right-2 top-2 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 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"
-          data-dismiss-target="#toast-default"
-          aria-label="Close"
-          onClick={() => slowClose()}
-        >
-          <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 className="mt-8">{props.question}</div>
-        <div className="flex w-full flex-row gap-1 rounded">
-          {props.options.map((op) => (
-            <span
-              onClick={() => {
-                props.onOptionClicked(op)
-                setClickedOption(op)
-                setAnswered(true)
-                const timeoutDestroy = setTimeout(() => {
-                  setClosed(true)
-                }, 4800)
-                setTimeout(() => {
-                  popUpRef.current.removeChild(popUpRef.current.children[0])
-                  clearTimeout(timeoutDestroy)
-                }, 5300)
-              }}
-              className={clsx(
-                "w-full cursor-pointer rounded border  p-4 text-center transition-all ",
-                clickedOption === op
-                  ? "bg-gray-500 text-white"
-                  : "border bg-background hover:bg-gray-300 dark:hover:bg-gray-700"
-              )}
-            >
-              {op}
-            </span>
-          ))}
-        </div>
-        {props.texts && (
-          <div className=" flex flex-row justify-between text-xs">
-            <span>{props.texts.least}</span>
-            <span>{props.texts.most}</span>
-          </div>
-        )}
-        {answered && (
-          <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-80 p-4 text-center transition-all">
-            <span className="font-bold text-white">
-              Thank you for your answer. This box will disappear in
-              {" " + closingTimer} seconds
-            </span>
-            <div className="flex flex-row gap-2">
-              <HawaButton onClick={() => slowClose()}>Close</HawaButton>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/elements/index.ts

@@ -1,55 +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"

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;