@sikka/hawa 0.1.94 → 0.1.96

package/dist/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -1194,6 +1194,9 @@ video {
 .h-\[400px\] {
   height: 400px;
 }
+.h-\[80px\] {
+  height: 80px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2489,6 +2492,9 @@ video {
   font-size: 3.75rem;
   line-height: 1;
 }
+.text-\[0\.70rem\] {
+  font-size: 0.70rem;
+}
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
@@ -3316,6 +3322,9 @@ body {
 .focus\:bg-accent:focus {
   background-color: hsl(var(--accent));
 }
+.focus\:bg-transparent:focus {
+  background-color: transparent;
+}
 .focus\:text-accent-foreground:focus {
   color: hsl(var(--accent-foreground));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.94",
+  "version": "0.1.96",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -48,9 +48,9 @@
     "@storybook/addon-actions": "^6.5.8",
     "@storybook/addon-docs": "^6.5.8",
     "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-info": "^5.3.21",
     "@storybook/addons": "^6.5.8",
     "@storybook/api": "^7.3.2",
     "@storybook/builder-webpack5": "^6.5.13",
@@ -76,6 +76,7 @@
     "react-dom": "^18.2.0",
     "react-phone-input-2": "^2.15.1",
     "react-transition-group": "^4.4.2",
+    "recharts": "^2.8.0",
     "rollup": "^2.38.4",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -92,7 +93,6 @@
     "typescript": "^4.8.4",
     "webpack": "^5.75.0"
   },
-
   "resolutions": {
     "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2",
     "@storybook/react/webpack": "^5",

package/src/blocks/AuthForms/AppLanding.tsx

@@ -6,9 +6,6 @@ import { Icons } from "../../elements/Icons"
 
 type AppLandingTypes = {
   texts?: {
-    signIn: string
-    signUp: string
-    lang: string
     newUserText?: string
     createAccount?: string
     continueWithGoogle?: string
@@ -122,7 +119,7 @@ export const AppLanding: FC<AppLandingTypes> = (props) => {
 
           {!props.withoutSignUp && (
             <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
-              {props.texts.newUserText}{" "}
+              {props.texts.newUserText}
               <span
                 onClick={props.handleRouteToSignUp}
                 className="clickable-link"

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -13,6 +13,8 @@ import { Button } from "../../elements/Button"
 
 type NewPasswordTypes = {
   handleNewPassword: () => void
+  direction?: "rtl" | "ltr"
+
   passwordChanged: any
   texts: {
     passwordPlaceholder: string
@@ -45,7 +47,7 @@ export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
   }
 
   return (
-    <Card>
+    <Card dir={props.direction}>
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}

package/src/elements/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-
+import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../util"
 
 const DropdownMenuRoot = DropdownMenuPrimitive.Root
@@ -19,7 +19,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center justify-between rounded-sm px-2 py-3 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className
     )}
@@ -92,13 +92,13 @@ const DropdownMenuItem = React.forwardRef<
     disabled={props.disabled}
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center justify-between rounded-sm text-sm outline-none transition-colors focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
     {...props}
   >
-    <div className="flex flex-row items-center gap-2">{props.children}</div>
+    <div className="flex flex-row items-center gap-2 ">{props.children}</div>
 
     {props.end && props.end}
   </DropdownMenuPrimitive.Item>
@@ -241,13 +241,13 @@ export type SubItem = {
   highlighted?: boolean
   disabled?: boolean
 }
-
 export type MenuItemType = {
   icon?: any
-  label: string
-  value: string
+  label?: string
+  value?: string
   end?: any
   presist?: boolean
+  type?: "separator" | "label"
   action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
@@ -265,8 +265,29 @@ interface DropdownMenuProps {
   align?: ExtendedDropdownMenuContentProps["align"]
   alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
   width?: "default" | "sm" | "lg" | "parent"
+  size?: "default" | "sm"
   selectCallback?: any
 }
+
+// const dropDownMenuVariants = cva(
+//   "inline-flex items-center justify-center select-none 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: {
+//       width: {
+//         default: "bg-primary text-primary-foreground hover:bg-primary/90",
+//       },
+//       size: {
+//         default: "h-10 px-4 py-2",
+//         sm: "h-9 rounded-md px-3",
+//       },
+//     },
+//     defaultVariants: {
+//       width: "default",
+//       size: "default",
+//     },
+//   }
+// )
+
 export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   trigger,
   items,
@@ -279,6 +300,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   align,
   alignOffset,
   selectCallback,
+  size = "default",
   width = "default",
 }) => {
   const widthStyles = {
@@ -287,6 +309,10 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
     lg: "w-[200px]",
     parent: "ddm-w-parent",
   }
+  const sizeStyles = {
+    default: "px-2 py-3 ",
+    sm: "text-xs px-1.5 py-1.5",
+  }
   return (
     <DropdownMenuRoot dir={direction}>
       <DropdownMenuTrigger className={triggerClassname}>
@@ -301,59 +327,81 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
           alignOffset={alignOffset}
         >
           {items.map((item, index) => {
-            return item.subitems ? (
-              <DropdownMenuSub key={index}>
-                <DropdownMenuSubTrigger dir={direction}>
-                  {item.icon && item.icon}
-                  {item.label}
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    {item.subitems.map((subitem, subIndex) => (
-                      <DropdownMenuItem
-                        disabled={subitem.disabled}
-                        className="flex flex-row gap-2"
-                        onSelect={() => {
-                          subitem.action()
-                          if (selectCallback) {
-                            selectCallback(subitem.value)
-                          }
-                        }}
-                        key={subIndex}
-                      >
-                        {subitem.icon && subitem.icon}
-                        {subitem.label}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            ) : (
-              <DropdownMenuItem
-                disabled={item.disabled}
-                className="flex flex-row gap-2"
-                key={index}
-                onSelect={(e) => {
-                  if (item.presist) {
-                    e.preventDefault()
-                  }
-                  if (item.action) {
-                    item.action()
-                    if (selectCallback) {
-                      selectCallback(item.value)
+            if (item.type === "separator") {
+              return <DropdownMenuSeparator />
+            } else if (item.type === "label") {
+              return <DropdownMenuLabel>{item.label}</DropdownMenuLabel>
+            } else {
+              return item.subitems ? (
+                <DropdownMenuSub key={index}>
+                  <DropdownMenuSubTrigger
+                    className={cn(sizeStyles[size])}
+                    dir={direction}
+                  >
+                    {item.icon && item.icon}
+                    {item.label && item.label}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      {item.subitems.map((subitem, subIndex) => (
+                        <DropdownMenuItem
+                          className={cn(
+                            sizeStyles[size],
+
+                            !item.icon && !item.label
+                              ? "px-0 py-0 focus:bg-transparent"
+                              : "focus:bg-accent"
+                          )}
+                          disabled={subitem.disabled}
+                          // className="flex flex-row gap-2"
+                          onSelect={() => {
+                            subitem.action()
+                            if (selectCallback) {
+                              selectCallback(subitem.value)
+                            }
+                          }}
+                          key={subIndex}
+                        >
+                          {subitem.icon && subitem.icon}
+                          {subitem.label && subitem.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              ) : (
+                <DropdownMenuItem
+                  disabled={item.disabled}
+                  key={index}
+                  onSelect={(e) => {
+                    if (item.presist) {
+                      e.preventDefault()
                     }
-                  } else {
-                    if (selectCallback) {
-                      selectCallback(item.value)
+                    if (item.action) {
+                      item.action()
+                      if (selectCallback) {
+                        selectCallback(item.value)
+                      }
+                    } else {
+                      if (selectCallback) {
+                        selectCallback(item.value)
+                      }
                     }
-                  }
-                }}
-                end={item.end}
-              >
-                {item.icon && item.icon}
-                {item.label}
-              </DropdownMenuItem>
-            )
+                  }}
+                  end={item.end}
+                  className={cn(
+                    sizeStyles[size],
+                    !item.icon && !item.label
+                      ? "px-0 py-0 focus:bg-transparent "
+                      : "focus:bg-accent ",
+                    item.presist && "focus:bg-transparent"
+                  )}
+                >
+                  {item.icon && item.icon}
+                  {item.label && item.label}
+                </DropdownMenuItem>
+              )
+            }
           })}
         </DropdownMenuContent>
       </DropdownMenuPortal>

package/src/elements/FloatingCommentExec.tsx

@@ -1,6 +1,5 @@
-import React, { useRef, useState, useEffect, FC } from "react"
+import React from "react"
 import ReactDOMServer from "react-dom/server"
-import { AiOutlineClose } from "react-icons/ai"
 
 let base64 =
   "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"
@@ -22,7 +21,19 @@ const Image = (props) => {
     <div className="group relative w-fit">
       <img src={`data:image/pngg;charset=utf-8;base64,${base64}`} />
       <div className="absolute right-0 top-0 text-red-900 opacity-0 transition-all hover:opacity-50 group-hover:opacity-100">
-        <AiOutlineClose />
+        <svg
+          aria-label="Close Icon"
+          aria-hidden="true"
+          className="h-4 w-4"
+          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>
       </div>
     </div>
   )

package/src/elements/HawaRadio.tsx

@@ -66,7 +66,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 props.onChangeTab(opt.value)
               }}
               className={cn(
-                "w-full cursor-pointer",
+                "w-full cursor-pointer ",
                 orientation === "horizontal" &&
                   parentDirection === "ltr" &&
                   "rounded-none first:rounded-l last:rounded-r",
@@ -78,6 +78,7 @@ export const HawaRadio: FC<RadioTypes> = ({
 
                 "last flex flex-row items-center justify-center gap-2 ",
                 selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                // "bg-red-500"
               )}
               key={o}
             >
@@ -138,7 +139,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                   "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400  dark:peer-checked:text-primary",
                   opt.disabled
                     ? "opacity-50"
-                    : "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 hover:text-gray-600"
+                    : "cursor-pointer hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                 )}
               >
                 <div className="block  h-full w-full">

package/src/elements/HawaSelect.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx"
 import React, { FC } from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
+import { Label } from "./Label"
 
-// The select bar
 type ControlTypes = {
   cx: any
   children: any
@@ -87,13 +87,13 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:text-primary-foreground hover:bg-primary"
+    className="flex cursor-pointer select-none flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-primary hover:text-primary-foreground"
     {...innerProps}
   >
     {children}
   </div>
 )
-// The main element
+
 type SelectTypes = {
   label?: string
   options?: {
@@ -116,12 +116,14 @@ type SelectTypes = {
 }
 export const HawaSelect: FC<SelectTypes> = (props) => {
   return (
-    <div className=" w-full">
-      {props.label && (
+    <div className=" flex w-full flex-col gap-2">
+      {props.label && <Label>{props.label}</Label>}
+
+      {/* {props.label && (
         <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
         </div>
-      )}
+      )} */}
       {!props.isCreatable && (
         <Select
           classNames={{

package/src/elements/HawaStats.tsx

@@ -7,6 +7,7 @@ type StatTypes = {
   color?: string
   number?: string
   helperText?: string
+  chart?: any
   icon?: any
   variant?:
     | "default"
@@ -39,6 +40,11 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
             <p className="text-xs text-muted-foreground">{props.helperText}</p>
           )
         )}
+        {props.isLoading && props.chart ? (
+          <Skeleton className="mt-2 h-4 w-1/2" />
+        ) : (
+          props.chart
+        )}
       </CardContent>
     </Card>
   )

package/src/elements/HawaTable.tsx

@@ -23,6 +23,7 @@ type TableTypes = {
   pagination?: boolean
   columns: ColTypes[]
   actions?: MenuItemType[]
+  actionsWidth?: "default" | "sm" | "lg" | "parent"
   direction?: "rtl" | "ltr"
   rows?: RowTypes[][]
   handleActionClick?: any
@@ -110,58 +111,11 @@ export const HawaTable: FC<TableTypes> = ({
   }, [slice, page])
 
   return (
-    <div className="relative flex flex-col gap-2 ">
+    <div className="relative flex flex-col gap-2 bg-background ">
       <div className={`overflow-x-auto rounded  bg-${headerColor}`}>
         {props.headerTools && (
-          <div className="flex flex-row items-center justify-between gap-2 border bg-background px-4  py-2">
-            <HawaTextField
-              icon={
-                <svg
-                  aria-label="Search Icon"
-                  stroke="currentColor"
-                  fill="gray"
-                  strokeWidth="0"
-                  viewBox="0 0 512 512"
-                  height="1em"
-                  width="1em"
-                >
-                  <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
-                </svg>
-              }
-              placeholder={"Search"}
-              width="full"
-              margin="none"
-            />
-            <div className="flex flex-row items-center justify-between gap-2">
-              <Button className="flex flex-row gap-2">
-                <svg
-                  aria-label="Filter Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  strokeWidth="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
-                </svg>
-                {props.texts?.filter ?? "Filter"}
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  strokeWidth="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
-              </Button>
-            </div>
+          <div className="flex flex-row items-center justify-between gap-2 border bg-background px-2  py-2">
+            {props.headerTools}
           </div>
         )}
         <table
@@ -312,7 +266,7 @@ export const HawaTable: FC<TableTypes> = ({
                       >
                         <div className="flex items-center justify-center">
                           <DropdownMenu
-                            width="sm"
+                            width={props.actionsWidth}
                             direction={direction}
                             side="right"
                             items={props.actions}

package/src/elements/HawaTextField.tsx

@@ -91,7 +91,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
           </div>
         )}
         {props.helpertext ? (
-          <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
+          <p className="mb-0 mt-0 text-xs text-red-600 dark:text-red-500">
             {props.helpertext}
           </p>
         ) : null}

package/src/elements/Icons.tsx

@@ -74,7 +74,10 @@ export const Icons = {
   ),
   microsoft: (props: IconProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...props}>
-      <path d="M7.462 0H0v7.19h7.462V0zM16 0H8.538v7.19H16V0zM7.462 8.211H0V16h7.462V8.211zm8.538 0H8.538V16H16V8.211z"></path>
+      <path
+        fill="currentColor"
+        d="M7.462 0H0v7.19h7.462V0zM16 0H8.538v7.19H16V0zM7.462 8.211H0V16h7.462V8.211zm8.538 0H8.538V16H16V8.211z"
+      ></path>
     </svg>
   ),
   gitHub: (props: IconProps) => (

package/src/layout/AppLayout.tsx

@@ -24,6 +24,7 @@ type AppLayoutTypes = {
   avatarImage?: any
   drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItemType[]
+  profileMenuWidth: "default" | "sm" | "lg" | "parent"
   onSettingsClick?: () => void
   DrawerFooterActions?: any
   clickedItem?: any
@@ -203,7 +204,10 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
               alignOffset={8}
               side={"bottom"}
               sideOffset={5}
+              width={props.profileMenuWidth}
               direction={isRTL ? "rtl" : "ltr"}
+              items={props.profileMenuItems}
+              onItemSelect={(e) => console.log("selecting item ", e)}
               trigger={
                 <div className="relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600">
                   {props.avatarImage ? (
@@ -224,8 +228,6 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
                   )}
                 </div>
               }
-              items={props.profileMenuItems}
-              onItemSelect={(e) => console.log("selecting item ", e)}
             />
           </div>
         </div>

package/src/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -1194,6 +1194,9 @@ video {
 .h-\[400px\] {
   height: 400px;
 }
+.h-\[80px\] {
+  height: 80px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2489,6 +2492,9 @@ video {
   font-size: 3.75rem;
   line-height: 1;
 }
+.text-\[0\.70rem\] {
+  font-size: 0.70rem;
+}
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
@@ -3316,6 +3322,9 @@ body {
 .focus\:bg-accent:focus {
   background-color: hsl(var(--accent));
 }
+.focus\:bg-transparent:focus {
+  background-color: transparent;
+}
 .focus\:text-accent-foreground:focus {
   color: hsl(var(--accent-foreground));
 }