@sikka/hawa 0.0.243 → 0.0.244

package/src/elements/HawaTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
@@ -43,7 +43,7 @@ type ActionItems = {
   element?: any
 }
 
-export const HawaTable: React.FunctionComponent<TableTypes> = ({
+export const HawaTable: FC<TableTypes> = ({
   size = "normal",
   bodyColor = "white",
   headerColor = "gray-200",
@@ -265,7 +265,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       ) : (
                         <div className="flex flex-row  items-center justify-center gap-2 p-1">
                           {props.actions[0].map((act) => (
-                            <div className=" p-1 hover:bg-gray-100 transition-all">{act.icon}</div>
+                            <div className=" p-1 transition-all hover:bg-gray-100">
+                              {act.icon}
+                            </div>
                           ))}
                         </div>
                       )

package/src/elements/HawaTabs.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import { useState, FC } from "react"
 
 // TODO: fix wrapping issue when small screen
 
@@ -13,7 +13,7 @@ type TabsTypes = {
   width?: "full" | "normal"
   pill?: boolean
 }
-export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
+export const HawaTabs: FC<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
   width = "normal",
@@ -115,8 +115,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                 pill
                   ? "rounded"
                   : orientation === "vertical"
-                  ? "rounded rounded-tl-none rounded-bl-none"
-                  : "rounded rounded-br-none rounded-bl-none"
+                  ? "rounded rounded-bl-none rounded-tl-none"
+                  : "rounded rounded-bl-none rounded-br-none"
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/elements/HawaTextField.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, PropsWithRef } from "react"
 import clsx from "clsx"
 
 // TODO: make icon based on direction
@@ -15,7 +15,7 @@ type TextFieldTypes = {
   helperText?: any
   /** The value of the input field */
   value?: any
-  props?: React.PropsWithRef<"input">
+  props?: PropsWithRef<"input">
   /** The type of input field. Same as the types of <input/> component   */
   type?: any
   /** The placeholder of the input field  */
@@ -31,7 +31,7 @@ type TextFieldTypes = {
   preview?: boolean
 }
 
-export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
+export const HawaTextField: FC<TextFieldTypes> = ({
   margin = "normal",
   width = "full",
   preview = false,

package/src/elements/HawaTooltip.tsx

@@ -1,8 +1,8 @@
+import { useEffect, useRef, useState, ReactElement, FC } from "react"
 import clsx from "clsx"
-import React, { useEffect, useRef, useState } from "react"
 
 type THawaToolTip = {
-  children?: React.ReactElement
+  children?: ReactElement
   content?: string
   btnHovered?: any
   buttonRef?: any
@@ -19,7 +19,7 @@ type THawaToolTip = {
     | "bottom-left"
 }
 
-export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
+export const HawaTooltip: FC<THawaToolTip> = ({
   children,
   content,
   size = "normal",

package/src/elements/HawaTypography.tsx

@@ -1,11 +1,9 @@
-import React from "react"
+import { FC } from "react"
 
 type TypographyTypes = {
   children: any
   align?: any
 }
-export const HawaTypography: React.FunctionComponent<TypographyTypes> = (
-  props
-) => {
+export const HawaTypography: FC<TypographyTypes> = (props) => {
   return <div>{props.children}</div>
 }

package/src/elements/InvoiceAccordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 import { HiChevronRight } from "react-icons/hi"
 import { BsThreeDotsVertical } from "react-icons/bs"
@@ -33,9 +33,7 @@ type InvoiceAccordionTypes = {
   direction?: "rtl" | "ltr"
   status?: "paid" | "pending" | "overdue"
 }
-export const InvoiceAccordion: React.FunctionComponent<
-  InvoiceAccordionTypes
-> = ({
+export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
   direction = "ltr",
   texts = {
     total: "Total",

package/src/elements/SubsectionList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { HawaChip } from "./HawaChip"
 
 type SubsectionListTypes = {
@@ -18,9 +18,7 @@ type SubsectionListTypes = {
     }
   ]
 }
-export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
-  subsections,
-}) => {
+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 ">
@@ -52,7 +50,7 @@ type TSubsectionItem = {
   selected?: any
   onItemClick?: () => void
 }
-const SubsectionItem: React.FunctionComponent<TSubsectionItem> = ({
+const SubsectionItem: FC<TSubsectionItem> = ({
   title,
   value,
   icon,

package/src/elements/TabPanel.tsx

@@ -1,11 +1,11 @@
-import React from "react"
+import { FC } from "react"
 
 type TabPanelTypes = {
   children: any
   value: any
   index: any
 }
-export const TabPanel: React.FunctionComponent<TabPanelTypes> = (props) => {
+export const TabPanel: FC<TabPanelTypes> = (props) => {
   const { children, value, index, ...other } = props
   return (
     <div

package/src/elements/UsageCard.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTooltip } from "./HawaTooltip"
 import { BsExclamationCircleFill } from "react-icons/bs"
 
@@ -8,7 +8,7 @@ type UsageCardTypes = {
   percent: any
   currentUsage: any
 }
-export const UsageCard: React.FunctionComponent<UsageCardTypes> = (props) => {
+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">

package/src/elements/UserFeedback.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type ComponentTypes = {
   title?: string
@@ -10,9 +10,7 @@ type ComponentTypes = {
   }
   onOptionClicked?: (option) => void
 }
-export const UserFeedback: React.FunctionComponent<ComponentTypes> = ({
-  ...props
-}) => {
+export const UserFeedback: FC<ComponentTypes> = ({ ...props }) => {
   return (
     <div className="relative flex w-full max-w-sm flex-col gap-2 rounded bg-white p-4 shadow-md">
       <div className="absolute left-2 top-2 p-1.5 text-sm">{props.title}</div>