@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/Dialog.tsx

@@ -1,133 +0,0 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cn } from "../util"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        {/* <X className="h-4 w-4" /> */}
-
-        <svg
-          aria-label="Close Icon"
-          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>
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}

package/src/elements/DragDropImages.tsx

@@ -1,279 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { useDropzone } from "react-dropzone"
-import { HawaAlert } from "./HawaAlert"
-import clsx from "clsx"
-import { Button } from "./Button"
-
-//TODO: This element needs more improvements and testing
-
-type DragDropImagesTypes = {
-  /**  The text label above the component. Consistant with the other form input fields   */
-  label?: string
-  files: [File]
-  setFiles: any
-  setDeletedFiles: any
-  maxFiles: number
-  accept: string
-  onAcceptedFiles: any
-  showPreview: any
-  onDeleteFile: any
-  onClearFiles: any
-  maxSize: number
-  errorMessages: string
-  disclaimer?: boolean
-  termsLink?: string
-  privacyLink?: string
-  /** The translation object, use this to replace the default text with any translated text you want.*/
-  texts: {
-    errorUploading: any
-    clickHereToUpload: any
-    maxFileSize: any
-    tooManyFiles: any
-    fileTooLarge: any
-    acceptedFileTypes: any
-    invalidFileType: any
-    terms?: string
-    privacyPolicy?: string
-    disclaimer?: string
-    and?: string
-  }
-}
-
-export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
-  texts,
-  files,
-  setFiles,
-  setDeletedFiles,
-  onAcceptedFiles,
-  errorMessages,
-  maxFiles,
-  accept,
-  showPreview,
-  onDeleteFile,
-  onClearFiles,
-  disclaimer,
-  maxSize,
-  label,
-  termsLink,
-  privacyLink,
-}) => {
-  const [cmp, setCmp] = useState(0)
-  const [max, setMax] = useState<any>(0)
-
-  const {
-    getRootProps,
-    getInputProps,
-    fileRejections,
-    acceptedFiles,
-    isDragActive,
-  } = useDropzone({
-    multiple: true,
-    accept: accept,
-    maxSize: maxSize,
-    maxFiles: maxFiles,
-    onDrop: (acceptedFiles) => {
-      setFiles(
-        acceptedFiles.map((file, index) =>
-          Object.assign(file, {
-            preview: URL.createObjectURL(file),
-          })
-        )
-      )
-    },
-  })
-  useEffect(
-    () => () => {
-      files?.forEach((file: any) => {
-        URL.revokeObjectURL(file.preview)
-      })
-    },
-    [files]
-  )
-  useEffect(() => {
-    setFiles(acceptedFiles)
-  }, [acceptedFiles, cmp])
-  onClearFiles = () => {
-    acceptedFiles.length = 0
-    acceptedFiles.splice(0, acceptedFiles.length)
-    setFiles([])
-  }
-
-  const clearAllFiles = () => {
-    acceptedFiles.length = 0
-    setFiles([])
-  }
-
-  useEffect(() => {
-    if (maxSize > 0) {
-      const k = 1024
-      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
-      const i = Math.floor(Math.log(maxSize) / Math.log(1024))
-
-      setMax(
-        parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
-      )
-    }
-  }, [maxSize])
-  const errs = fileRejections.map((rej, i) => {
-    switch (rej.errors[0].code) {
-      case "file-too-large":
-        return (
-          <HawaAlert
-            text={rej.file.name}
-            title={texts.fileTooLarge}
-            severity="error"
-          />
-        )
-      case "too-many-files":
-        return (
-          <HawaAlert
-            text={rej.file.name}
-            title={texts.tooManyFiles}
-            severity="error"
-          />
-        )
-      case "file-invalid-type":
-        return (
-          <HawaAlert
-            text={rej.file.name}
-            title={texts.invalidFileType}
-            severity="error"
-          />
-        )
-
-      default:
-        return (
-          <HawaAlert
-            text={rej.file.name}
-            title={rej.errors[0].code}
-            severity="error"
-          />
-        )
-    }
-  })
-  const thumbs = files?.map((file: any, index: any) => (
-    <div className="relative rounded">
-      <button
-        onClick={(e) => {
-          e.stopPropagation()
-          acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
-          setCmp(Math.random)
-          onDeleteFile(file)
-        }}
-        type="button"
-        className="absolute left-0 ml-auto inline-flex items-center rounded-inner rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-        data-modal-toggle="defaultModal"
-      >
-        <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>
-        <span className="sr-only">Close modal</span>
-      </button>
-
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          overflow: "hidden",
-          height: 100,
-          width: 100,
-          backgroundImage: `url(${file.preview})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          border: "1px solid black",
-        }}
-        className="rounded-lg"
-        key={file.name}
-      />
-    </div>
-  ))
-
-  return (
-    <div>
-      {label && (
-        <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
-          {label}
-        </div>
-      )}
-      <div
-        className={clsx(
-          "flex flex-col justify-center rounded border border-dashed bg-gray-50  p-6 transition-all hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-800 ",
-          isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
-        )}
-      >
-        <div {...getRootProps({})}>
-          <p {...getInputProps()} />
-          <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
-            <svg
-              stroke="currentColor"
-              fill="none"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              height="1.5em"
-              width="1.5em"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-              <path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
-              <path d="M13 13l9 3l-4 2l-2 4l-3 -9"></path>
-              <path d="M3 3l0 .01"></path>
-              <path d="M7 3l0 .01"></path>
-              <path d="M11 3l0 .01"></path>
-              <path d="M15 3l0 .01"></path>
-              <path d="M3 7l0 .01"></path>
-              <path d="M3 11l0 .01"></path>
-              <path d="M3 15l0 .01"></path>
-            </svg>
-            {<texts.clickHereToUpload />}
-          </div>
-          <div className="pt-2 text-center text-xs">
-            {texts.acceptedFileTypes} {accept.split(",")}
-          </div>
-          <div className="pb-2 pt-1 text-center text-xs">
-            {texts.maxFileSize} {max}
-          </div>
-        </div>
-        {acceptedFiles.length > 0 && (
-          <div className="flex justify-center rounded-lg  p-2 ">
-            <Button onClick={clearAllFiles}>Clear All</Button>
-          </div>
-        )}
-        {acceptedFiles.length > 0 && thumbs && showPreview ? (
-          <aside className="flex flex-row flex-wrap justify-center  gap-2 rounded-lg  p-2">
-            {thumbs}
-          </aside>
-        ) : null}
-        <div className="px-4">{fileRejections[0]?.errors[0]?.code && errs}</div>
-      </div>
-      {disclaimer && (
-        <div className="mt-2 text-sm text-muted-foreground/50">
-          {texts.disclaimer ?? "By uploading a file you agree to our"}{" "}
-          <a
-            href={termsLink}
-            className="clickable-link text-muted-foreground/50"
-          >
-            {texts.terms ?? "Terms"}
-          </a>{" "}
-          {texts.and ?? "and"}{" "}
-          <a
-            href={privacyLink}
-            className="clickable-link text-muted-foreground/50"
-          >
-            {texts.privacyPolicy ?? "Privacy Policy"}
-          </a>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/DraggableCard.tsx

@@ -1,27 +0,0 @@
-import React, { ReactElement, FC } from "react"
-
-type DraggableCardTypes = {
-  children: ReactElement
-}
-
-export const DraggableCard: FC<DraggableCardTypes> = (props) => {
-  return (
-    <div className="flex flex-row rounded bg-layoutPrimary-500 p-4">
-      <button
-        className="inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-        type="button"
-      >
-        <svg
-          className="h-6 w-6"
-          aria-hidden="true"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-        </svg>
-      </button>
-
-      <div className="p-4">{props.children}</div>
-    </div>
-  )
-}