@sikka/hawa 0.0.239 → 0.0.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.239",
+  "version": "0.0.240",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/ArrowCarousel.tsx

@@ -1,6 +1,5 @@
-import React from "react"
-
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa"
+import clsx from "clsx"
+import { useEffect, useState, FunctionComponent } from "react"
 
 type Item = {
   label?: string
@@ -15,28 +14,37 @@ type ComponentTypes = {
 }
 
 const Arrow = (props: {
-  icon: any
-  size: number
+  icon?: any
+  size?: number
   onClick?: () => void
   disabled?: boolean
+  direction?: "right" | "left"
 }) => {
   return (
-    <props.icon
-      className={
-        props.disabled || false ? "text-gray-300" : "hover:text-gray-500"
-      }
-      size={props.size}
+    <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"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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: React.FunctionComponent<ComponentTypes> = (
-  props
-) => {
-  const [index, setIndex] = React.useState(props.index || 0)
+export const ArrowCarousel: FunctionComponent<ComponentTypes> = (props) => {
+  const [index, setIndex] = useState(props.index || 0)
 
-  React.useEffect(() => {
+  useEffect(() => {
     console.log(`INDEX CHANGED TO: ${index}`)
   }, [index])
 
@@ -47,10 +55,10 @@ export const ArrowCarousel: React.FunctionComponent<ComponentTypes> = (
   }
 
   return (
-    <div className="align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-white p-4 py-6 shadow-md">
+    <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
-        icon={FaArrowLeft}
-        size={props.arrowSize || 48}
+        direction="left"
+        // size={props.arrowSize || 48}
         disabled={index == 0}
         onClick={() => {
           if (index != 0) setIndex(index - 1)
@@ -58,24 +66,25 @@ export const ArrowCarousel: React.FunctionComponent<ComponentTypes> = (
       />
 
       <div
-        className={`relative box-border flex h-min flex-col items-center justify-center p-5`}
+        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-0 text-${
-            sizes[props.labelSize || "small"][0]
-          }xl `}
-          style={{
-            marginBottom: sizes[props.labelSize || "small"][1],
-          }}
+          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
-        icon={FaArrowRight}
-        size={props.arrowSize || 48}
+        direction="right"
+        // size={props.arrowSize || 48}
         disabled={index == props.items.length - 1}
         onClick={() => {
           if (index != props.items.length - 1) setIndex(index + 1)

package/src/elements/Breadcrumb.tsx

@@ -1,35 +1,34 @@
 import React, { FC, ReactNode } from "react"
 
-type TBreadcrumItem = {
-  label: string
-  href: string
-}
-
 type TBreadcrumb = {
-  breadcrumbLink: TBreadcrumItem[]
+  /**
+   * 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 */
   separator?: string | ReactNode
 }
 
-const Breadcrumb: FC<TBreadcrumb> = ({
-  breadcrumbLink,
-  separator = "/",
+const HawaBreadcrumb: FC<TBreadcrumb> = ({
+  breadcrumbLinks,
+  separator = ">",
   ...props
 }) => {
   return (
     <div className="flex flex-row items-center gap-2 text-sm">
-      {breadcrumbLink.map((singleBreadcrumbLink, index) => (
+      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (
         <div className="flex flex-row items-center justify-center gap-2">
           <a
             href={singleBreadcrumbLink.href}
             className={
-              index + 1 === breadcrumbLink.length
+              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 != breadcrumbLink.length - 1 ? (
+          {index != breadcrumbLinks.length - 1 ? (
             typeof separator == "string" ? (
               <div>{separator}</div>
             ) : (
@@ -42,4 +41,4 @@ const Breadcrumb: FC<TBreadcrumb> = ({
   )
 }
 
-export default Breadcrumb
+export default HawaBreadcrumb

package/src/elements/DragDropImages.tsx

@@ -4,6 +4,9 @@ import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
 
 type DragDropImagesTypes = {
+  /**
+   * The text label above the component. Consistant with the other form input fields
+   */
   label?: string
   files: [File]
   setFiles: any
@@ -13,15 +16,18 @@ type DragDropImagesTypes = {
   onAcceptedFiles: any
   showPreview: any
   onDeleteFile: any
+  onClearFiles: any
+  maxSize: number
+  errorMessages: string
+  /**
+   * The translation object, use this to replace the default text with any translated text you want.
+   */
   texts: {
     clickHereToUpload: string
     maxFileSize: string
     tooManyFiles: string
     fileTooLarge: string
   }
-  onClearFiles: any
-  maxSize: number
-  errorMessages: string
 }
 
 export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
@@ -109,7 +115,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           onDeleteFile(file)
         }}
         type="button"
-        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
         data-modal-toggle="defaultModal"
       >
         <svg

package/src/elements/HawaAccordion.tsx

@@ -1,38 +1,38 @@
 import React from "react"
 import clsx from "clsx"
 
-type AccordionItemTypes = {
-  title: any
-  count: any
+type AccordionTypes = {
+  /**
+   * The title of the clickable accordion bar
+   */
+  title: string
+  /**
+   * The content inside the accordion to be visible once the bar is clicked
+   */
   content: any
+  /**
+   * The index of each accordion, must be unique for each usage of this component
+   */
+  index: any
 }
-
-const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
+export const HawaAccordion: React.FunctionComponent<AccordionTypes> = (
+  props
+) => {
   const [collapse, setCollapse] = React.useState(false)
-  let noRounding =
-    "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
-  let roundedTop =
-    "rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
-  let roundedBottom =
-    "rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
-  let accPaper =
-    "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
-  let accPaperRounded =
-    "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
 
   return (
-    <div>
+    <div className="h-fit w-full">
       <button
-        id={"accordion-collapse-heading-" + props.count}
+        id={"accordion-collapse-heading-" + props.index}
         type="button"
         className={clsx(
           collapse ? "rounded" : "rounded-t",
           "flex w-full items-center justify-between  border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800"
         )}
         onClick={() => setCollapse(!collapse)}
-        data-accordion-target={"#accordion-collapse-body-" + props.count}
+        data-accordion-target={"#accordion-collapse-body-" + props.index}
         aria-expanded="true"
-        aria-controls={"accordion-collapse-body-" + props.count}
+        aria-controls={"accordion-collapse-body-" + props.index}
       >
         <span>{props.title}</span>
         <svg
@@ -52,11 +52,11 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
         </svg>
       </button>
       <div
-        id={"accordion-collapse-body-" + props.count}
-        aria-labelledby={"accordion-collapse-heading-" + props.count}
+        id={"accordion-collapse-body-" + props.index}
+        aria-labelledby={"accordion-collapse-heading-" + props.index}
         className={clsx(
-          collapse ? "invisible hidden h-0 p-0" : " visible h-full",
-          "rounded-b border border-t-0 border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
+          collapse ? "invisible hidden h-0 p-0" : "visible h-full",
+          "w-full rounded-b border border-t-0 border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
         )}
       >
         <p className="mb-2 text-gray-500 dark:text-gray-400">{props.content}</p>
@@ -64,27 +64,3 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
     </div>
   )
 }
-type AccordionTypes = {
-  content: any
-}
-export const HawaAccordion: React.FunctionComponent<AccordionTypes> = (
-  props
-) => {
-  return (
-    <div
-      id="accordion-collapse"
-      data-accordion="collapse"
-      className="flex flex-col gap-3"
-    >
-      {props.content.map((acc: any, i: any) => {
-        return (
-          <AccordionItem
-            title={acc.title}
-            content={acc.content}
-            count={props.content.length - 1 === i ? -1 : i}
-          />
-        )
-      })}
-    </div>
-  )
-}

package/src/elements/HawaAlert.tsx

@@ -4,7 +4,11 @@ import { HawaButton } from "./HawaButton"
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"
+  /** The title of the alert placed above the text of the alert. Can be used alone */
   title?: any
+  /** The text of the alert placed below the title of the alert. Can be used alone */
+  text: any
+  // hideIcon?: any //TODO: an X button to delete the alert
   variant?:
     | "normal"
     | "solid"
@@ -12,9 +16,7 @@ type AlertTypes = {
     | "left-accent"
     | "right-accent"
     | "bottom-accent"
-  text: any
   direction?: "rtl" | "ltr"
-  hideIcon?: any
   actions?: [
     {
       label: string

package/src/elements/HawaTextField.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import clsx from "clsx"
 
 // TODO: make icon based on direction
-// TODO: Preferebly usse context to pass direction rtl | ltr
+// TODO: Preferebly use context to pass direction rtl | ltr
 
 type TextFieldTypes = {
   margin?: "none" | "normal" | "large"
@@ -52,7 +52,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   let defaultInputStyle =
     "block w-full rounded border border-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   let previewInputStyle =
-    "block w-full rounded bg-gray-50  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded bg-gray-50 h-9  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
 
   return (
@@ -61,7 +61,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
     >
       {props.label && (
         <label
-          htmlFor="first_name"
+          // htmlFor="first_name"
           className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
         >
           {props.label}
@@ -89,6 +89,10 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
                   {props.icon}
                 </div>
               )}
+                  {/* <input
+                {...props}
+                className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
+              /> */}
               <div
                 // {...props}
                 className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}

package/src/styles.css

@@ -594,6 +594,9 @@ video {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-1 {
+  bottom: 0.25rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -672,6 +675,9 @@ video {
 .m-3 {
   margin: 0.75rem;
 }
+.m-5 {
+  margin: 1.25rem;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -696,6 +702,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 .-mb-px {
   margin-bottom: -1px;
 }
@@ -1122,6 +1132,11 @@ video {
 .cursor-pointer {
   cursor: pointer;
 }
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 .resize-none {
   resize: none;
 }
@@ -1196,9 +1211,6 @@ video {
 .gap-20 {
   gap: 5rem;
 }
-.gap-3 {
-  gap: 0.75rem;
-}
 .gap-4 {
   gap: 1rem;
 }
@@ -1314,10 +1326,6 @@ video {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
 }
-.rounded-b-xl {
-  border-bottom-right-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
-}
 .rounded-l {
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
@@ -1342,10 +1350,6 @@ video {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
-.rounded-t-xl {
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
-}
 .rounded-bl {
   border-bottom-left-radius: var(--border-radius);
 }
@@ -1766,6 +1770,9 @@ video {
 .pt-0 {
   padding-top: 0px;
 }
+.pt-2 {
+  padding-top: 0.5rem;
+}
 .pt-3 {
   padding-top: 0.75rem;
 }
@@ -2179,6 +2186,12 @@ body {
   width: 10rem;
 }
 
+.hover\:scale-150:hover {
+  --tw-scale-x: 1.5;
+  --tw-scale-y: 1.5;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
@@ -2250,11 +2263,6 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2342,6 +2350,11 @@ body {
   --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
 }
 
+.disabled\:bg-gray-200:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }