@sikka/hawa 0.1.1 → 0.1.2-next

package/src/elements/ArrowCarousel.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-
-type Item = {
-  label?: string
-  icon?: JSX.Element
-}
-
-type ComponentTypes = {
-  items: Item[]
-  index?: number
-  arrowSize?: number
-  labelSize?: "small" | "medium" | "big"
-}
-
-const Arrow = (props: {
-  icon?: any
-  size?: number
-  onClick?: () => void
-  disabled?: boolean
-  direction?: "right" | "left"
-}) => {
-  return (
-    <svg
-      onClick={props.onClick || (() => {})}
-      className={clsx(
-        "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
-        props.direction === "right" ? "-rotate-90" : "rotate-90",
-        props.disabled ? "text-gray-300" : "cursor-pointer hover:scale-150"
-      )}
-      fill={props.disabled && "grey"}
-      viewBox="0 0 20 20"
-    >
-      <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>
-  )
-}
-
-export const ArrowCarousel: FC<ComponentTypes> = (props) => {
-  const [index, setIndex] = useState(props.index || 0)
-
-  useEffect(() => {
-    console.log(`INDEX CHANGED TO: ${index}`)
-  }, [index])
-
-  const sizes = {
-    small: ["", -8],
-    medium: ["2", -11],
-    big: ["3", -16],
-  }
-
-  return (
-    <div className="align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-layoutPrimary-500 p-4 py-0 pb-2 pt-2 shadow-md">
-      <Arrow
-        direction="left"
-        // size={props.arrowSize || 48}
-        disabled={index == 0}
-        onClick={() => {
-          if (index != 0) setIndex(index - 1)
-        }}
-      />
-
-      <div
-        className={`relative m-5  my-0 box-border flex h-full flex-col items-center justify-center  py-6 pt-0 `}
-      >
-        <div>{props.items[index].icon}</div>
-        <div
-          className={"absolute bottom-1 mb-0 mt-2 select-none"}
-          // {`absolute bottom-0 text-${
-          //   sizes[props.labelSize || "small"][0]
-          // }xl `}
-          // style={{
-          //   marginBottom: sizes[props.labelSize || "small"][1],
-          // }}
-        >
-          {props.items[index].label}
-        </div>
-      </div>
-
-      <Arrow
-        direction="right"
-        // size={props.arrowSize || 48}
-        disabled={index == props.items.length - 1}
-        onClick={() => {
-          if (index != props.items.length - 1) setIndex(index + 1)
-        }}
-      />
-    </div>
-  )
-}

package/src/elements/AutoCompleteField.tsx

@@ -1,37 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useFormContext } from "react-hook-form"
-
-type TAutoCompleteFieldTypes = {
-  name: string
-  rules: any
-  shouldUnregister: boolean
-}
-export const AutoCompleteField: FC<TAutoCompleteFieldTypes> = (props) => {
-  const { control } = useFormContext()
-  const { name, rules, shouldUnregister } = props
-
-  return (
-    <>
-      <Controller
-        // className="theme_form_input"
-        name={name}
-        rules={rules}
-        control={control}
-        shouldUnregister={shouldUnregister}
-        render={({ field: { onChange, value } }) => {
-          return (
-            <input type="text" />
-            // <Autocomplete
-            //   onChange={(e, data) => {
-            //     onChange(data);
-            //   }}
-            //   value={value ?? ""}
-            //   {...props}
-            //   className={"theme_form_input"}
-            // />
-          )
-        }}
-      />
-    </>
-  )
-}

package/src/elements/BackToTop.tsx

@@ -1,129 +0,0 @@
-import React, { FC, RefObject, useState, useEffect, useRef } from "react"
-import { clsx } from "clsx"
-
-type ComponentTypes = {
-  paddingX?: number // Horizontal padding relative to the attached corner
-  paddingY?: number // Vertical padding relative to the attached corner
-  paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
-  corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-  anchor: RefObject<HTMLInputElement>
-}
-
-export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
-  const [visible, setVisible] = useState<boolean>(false)
-  const [rect, _setRect] = useState<DOMRect>(null)
-  const _rect = useRef(rect)
-  const setRect = (data) => {
-    _rect.current = data
-    _setRect(data)
-  }
-
-  const self = useRef(null)
-
-  const getCoords = () => {
-    let anchor = props.anchor.current
-    return [anchor.scrollTop, anchor.scrollLeft]
-  }
-
-  const onScroll = () => {
-    let [scrollTop, scrollLeft] = getCoords()
-
-    let rect = props.anchor.current.getBoundingClientRect()
-
-    setVisible(scrollTop >= rect.height + (props.paddingThreshold || 100))
-  }
-
-  const backToTop = () => {
-    props.anchor.current.scrollTo(0, 0)
-  }
-
-  // FIXME: Observers and listeners run twice
-  useEffect(() => {
-    if (!props.anchor.current) return
-
-    props.anchor.current.addEventListener("scroll", onScroll)
-
-    // Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently
-    let interval = setInterval(() => {
-      if (!props.anchor.current) return
-
-      let newRect = props.anchor.current.getBoundingClientRect()
-      if (_rect.current == null) return setRect(newRect)
-
-      if (
-        !(
-          _rect.current.top == newRect.top &&
-          _rect.current.left == newRect.left &&
-          _rect.current.width == newRect.width &&
-          _rect.current.height == newRect.height
-        )
-      ) {
-        setRect(newRect)
-      }
-    }, 1)
-
-    return () => {
-      props.anchor.current?.removeEventListener("scroll", onScroll)
-      clearInterval(interval)
-    }
-  }, [])
-
-  const getStyles = () => {
-    if (!props.anchor.current) return {}
-
-    let corner = props.corner || "bottom-right"
-    let [vertical, horizontal] = corner.split("-")
-
-    let anchorRect = props.anchor.current.getBoundingClientRect()
-    let selfRect = self.current.getBoundingClientRect()
-
-    let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0
-    let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0
-
-    let style = {
-      top:
-        anchorRect.y +
-        height +
-        (vertical == "bottom" ? -1 : 1) * (props.paddingX || 10),
-      left:
-        anchorRect.x +
-        width +
-        (horizontal == "right" ? -1 : 1) * (props.paddingX || 25),
-    }
-
-    return style
-  }
-
-  return (
-    <div
-      className={clsx(
-        "fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
-        `${
-          visible
-            ? "pointer-events-all opacity-100"
-            : "pointer-events-none opacity-0"
-        }`
-      )}
-      style={{
-        ...getStyles(),
-        transitionProperty: "opacity, background-color",
-      }}
-      onClick={backToTop}
-      ref={self}
-    >
-      {/* Back to top arrow 👇*/}
-      <svg
-        className={clsx(
-          "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
-        )}
-        viewBox="0 0 20 20"
-      >
-        <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>
-    </div>
-  )
-}

package/src/elements/Breadcrumb.tsx

@@ -1,41 +0,0 @@
-import React, { FC, ReactNode } from "react"
-
-type TBreadcrumb = {
-  /** The array of crumbs, each one with a label and a href link */
-  breadcrumbLinks: [{ label: string; href: string }]
-  /** The separator between each crumb, can be character or React Node. The default is ">" */
-  separator?: string | ReactNode
-}
-
-const HawaBreadcrumb: FC<TBreadcrumb> = ({
-  breadcrumbLinks,
-  separator = ">",
-}) => {
-  return (
-    <div className="flex flex-row items-center gap-2 text-sm">
-      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (
-        <div className="flex flex-row items-center justify-center gap-2">
-          <a
-            href={singleBreadcrumbLink.href}
-            className={
-              index + 1 === breadcrumbLinks.length
-                ? "pointer-events-none"
-                : "underline-offset-4 transition-all hover:text-buttonPrimary-500 hover:underline hover:decoration-2"
-            }
-          >
-            {singleBreadcrumbLink.label}
-          </a>
-          {index != breadcrumbLinks.length - 1 ? (
-            typeof separator == "string" ? (
-              <div>{separator}</div>
-            ) : (
-              <div>{separator}</div>
-            )
-          ) : null}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default HawaBreadcrumb

package/src/elements/Button.tsx

@@ -1,77 +0,0 @@
-import * as React from "react"
-// import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../util"
-import { HawaLoading } from "./HawaLoading"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  isLoading?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      isLoading,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    // const Comp = asChild ? Slot : "button"
-    const Comp = "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {isLoading ? (
-          // Replace with your loading icon component
-          <HawaLoading design="dots-pulse"  size="button" />
-          ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/src/elements/Card.tsx

@@ -1,87 +0,0 @@
-import * as React from "react"
-import { cn } from "../util"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-type CardContentProps = {
-  headless?: boolean
-} & React.HTMLAttributes<HTMLDivElement>
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  CardContentProps
-  // React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("p-6", props.headless ? "pt-6" : "pt-0", className)}
-    {...props}
-  />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }