@sikka/hawa 0.1.7 → 0.1.8-beta

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/Skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from "../util"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

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-primary text-white hover:bg-primary"
-          : "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/Tooltip.tsx

@@ -1,179 +0,0 @@
-// "use client"
-
-// import * as React from "react"
-// import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "../util"
-
-// const TooltipProvider = TooltipPrimitive.Provider
-
-// const TooltipRoot = TooltipPrimitive.Root
-
-// const TooltipTrigger = TooltipPrimitive.Trigger
-
-// const TooltipContent = React.forwardRef<
-//   React.ElementRef<typeof TooltipPrimitive.Content>,
-//   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
-// >(({ className, sideOffset = 4, ...props }, ref) => (
-//   <TooltipPrimitive.Content
-//     ref={ref}
-//     sideOffset={sideOffset}
-//     className={cn(
-//       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-//       className
-//     )}
-//     {...props}
-//   />
-// ))
-// TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-// interface TooltipProps {
-//   // TooltipProvider props
-//   delayDurationProvider?: number
-//   skipDelayDuration?: number
-//   disableHoverableContentProvider?: boolean
-
-//   // TooltipRoot props
-//   defaultOpen?: boolean
-//   open?: boolean
-//   onOpenChange?: (open: boolean) => void
-//   delayDurationRoot?: number
-//   disableHoverableContentRoot?: boolean
-
-//   // TooltipContent props
-//   content: React.ReactNode
-//   asChild?: boolean
-//   ariaLabel?: string
-//   onEscapeKeyDown?: () => void
-//   onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void
-//   forceMount?: boolean
-//   side?: "top" | "right" | "bottom" | "left"
-//   sideOffset?: number
-//   align?: "start" | "center" | "end"
-//   alignOffset?: number
-//   avoidCollisions?: boolean
-//   collisionBoundary?: Element | Element[];
-//   collisionPadding?: number
-//   arrowPadding?: number
-//   sticky?: "partial" | "always";
-//   hideWhenDetached?: boolean
-
-//   children: React.ReactNode
-// }
-
-// const Tooltip: React.FC<TooltipProps> = (props) => {
-//   const { content, children, ...rest } = props
-//   return (
-//     <TooltipProvider
-//       delayDuration={props.delayDurationProvider}
-//       skipDelayDuration={props.skipDelayDuration}
-//       disableHoverableContent={props.disableHoverableContentProvider}
-//     >
-//       <TooltipRoot
-//         defaultOpen={props.defaultOpen}
-//         open={props.open}
-//         onOpenChange={props.onOpenChange}
-//         delayDuration={props.delayDurationRoot}
-//         disableHoverableContent={props.disableHoverableContentRoot}
-//       >
-//         <TooltipTrigger asChild>{children}</TooltipTrigger>
-//         <TooltipContent
-//           asChild={props.asChild}
-//           aria-label={props.ariaLabel}
-//           onEscapeKeyDown={props.onEscapeKeyDown}
-//           onPointerDownOutside={props.onPointerDownOutside}
-//         //   forceMount={props.forceMount}
-//           side={props.side}
-
-//           sideOffset={props.sideOffset}
-//           align={props.align}
-//           alignOffset={props.alignOffset}
-//           avoidCollisions={props.avoidCollisions}
-//           collisionBoundary={props.collisionBoundary}
-//           collisionPadding={props.collisionPadding}
-//           arrowPadding={props.arrowPadding}
-//           sticky={props.sticky}
-//           hideWhenDetached={props.hideWhenDetached}
-//           {...rest}
-//         >
-//           {content}
-//         </TooltipContent>
-//       </TooltipRoot>
-//     </TooltipProvider>
-//   )
-// }
-
-// your-tooltip.jsx
-import React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-const TooltipArrow = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Arrow>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
->(({ className, ...props }, ref) => (
-  <TooltipPrimitive.Arrow
-    ref={ref}
-    className={cn(
-      //   "bg-popover",
-      "bg-red-500 text-blue-500 ",
-      //   "z-50 overflow-hidden rounded-md border bg-popover  text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
-
-type TooltipTypes = {
-  side?: "top" | "right" | "bottom" | "left"
-  children?: any
-  content?: any
-  open?: any
-  defaultOpen?: any
-  onOpenChange?: any
-  delayDuration?: any
-}
-
-export const Tooltip: React.FunctionComponent<TooltipTypes> = ({
-  children,
-  content,
-  open,
-  defaultOpen,
-  onOpenChange,
-  delayDuration = 300,
-  side,
-  ...props
-}) => {
-  return (
-    <TooltipPrimitive.TooltipProvider delayDuration={delayDuration}>
-      <TooltipPrimitive.Root
-        open={open}
-        defaultOpen={defaultOpen}
-        onOpenChange={onOpenChange}
-      >
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipContent side={side} align="center" {...props}>
-          {content}
-          {/* <TooltipArrow width={21} height={5} /> */}
-        </TooltipContent>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.TooltipProvider>
-  )
-}
-// export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/elements/UsageCard.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from "react"
-import { Tooltip } from "./Tooltip"
-
-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 && (
-          <Tooltip content={props.tooltip} side="right">
-            <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>
-          </Tooltip>
-        )}
-      </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-primary"
-          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>
-  )
-}