@rovula/ui 0.0.10 → 0.0.12

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  Fragment,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 import TextInput, { InputProps } from "../TextInput/TextInput";
 import {
@@ -9,12 +17,20 @@ import {
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 
-type Options = {
+type RenderLabelCallbackArg = {
   value: string;
   label: string;
+  handleOnClick: () => void;
+  className: string;
 };
 
-type DropdownProps = {
+export type Options = {
+  value: string;
+  label: string;
+  renderLabel?: (config: RenderLabelCallbackArg) => ReactNode;
+};
+
+export type DropdownProps = {
   id?: string;
   label?: string;
   size?: "sm" | "md" | "lg";
@@ -34,118 +50,140 @@ type DropdownProps = {
   onSelect?: (value: Options) => void;
 } & Omit<InputProps, "value">;
 
-const Dropdown = ({
-  id,
-  options,
-  value,
-  label,
-  size = "md",
-  rounded = "normal",
-  variant = "outline",
-  helperText,
-  errorMessage,
-  fullwidth = true,
-  disabled = false,
-  error = false,
-  filterMode = false,
-  required = true,
-  onChangeText,
-  onSelect,
-  ...props
-}: DropdownProps) => {
-  const _id = id || `${label}-select`;
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<
-    Options | null | undefined
-  >(null);
-  const [textValue, setTextValue] = useState("");
+const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
+  (
+    {
+      id,
+      options,
+      value,
+      label,
+      size = "md",
+      rounded = "normal",
+      variant = "outline",
+      helperText,
+      errorMessage,
+      fullwidth = true,
+      disabled = false,
+      error = false,
+      filterMode = false,
+      required = true,
+      onChangeText,
+      onSelect,
+      ...props
+    },
+    ref
+  ) => {
+    const _id = id || `${label}-select`;
 
-  useEffect(() => {
-    if (value && !selectedOption) {
-      setSelectedOption(value);
-    }
-  }, [value, selectedOption]);
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOption, setSelectedOption] = useState<
+      Options | null | undefined
+    >(null);
+    const [textValue, setTextValue] = useState("");
 
-  const handleOnChangeText = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onChangeText?.(event);
-      setTextValue(event.target.value);
-    },
-    [onChangeText]
-  );
+    useEffect(() => {
+      if (value && !selectedOption) {
+        setSelectedOption(value);
+      }
+    }, [value, selectedOption]);
 
-  const handleOptionClick = useCallback(
-    (option: Options) => {
-      setSelectedOption(option);
-      setTextValue(option.label);
-      onSelect?.(option);
-    },
-    [onSelect]
-  );
+    const handleOnChangeText = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChangeText?.(event);
+        setTextValue(event.target.value);
+      },
+      [onChangeText]
+    );
 
-  const optionsFiltered = useMemo(() => {
-    return options.filter(
-      (option) =>
-        !filterMode ||
-        option.label?.toLowerCase().includes(textValue?.toLowerCase())
+    const handleOptionClick = useCallback(
+      (option: Options) => {
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect?.(option);
+      },
+      [onSelect]
     );
-  }, [options, filterMode, textValue]);
 
-  const renderOptions = () => (
-    <ul className="absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
-      {optionsFiltered.map((option) => (
-        <li
-          key={option.value}
-          onMouseDown={() => handleOptionClick(option)}
-          className={`px-4 py-2 hover:bg-gray-100 cursor-pointer ${
-            selectedOption?.value === option.value ? " bg-gray-200" : ""
-          }`}
-        >
-          {option.label}
-        </li>
-      ))}
-      {optionsFiltered.length === 0 && (
-        <li className="px-4 py-14 text-center text-input-text">Not found</li>
-      )}
-    </ul>
-  );
+    const optionsFiltered = useMemo(() => {
+      return options.filter(
+        (option) =>
+          !filterMode ||
+          option.label?.toLowerCase().includes(textValue?.toLowerCase())
+      );
+    }, [options, filterMode, textValue]);
 
-  return (
-    <div className={`relative ${fullwidth ? "w-full" : ""}`}>
-      <TextInput
-        {...props}
-        readOnly={!filterMode}
-        value={textValue}
-        onChange={handleOnChangeText}
-        label={label}
-        placeholder=" "
-        type="text"
-        rounded={rounded}
-        variant={variant}
-        helperText={helperText}
-        errorMessage={errorMessage}
-        fullwidth={fullwidth}
-        error={error}
-        required={required}
-        id={_id}
-        disabled={disabled}
-        hasClearIcon={false}
-        size={size}
-        className={customInputVariant({ size })}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        endIcon={
-          <div className={iconWrapperVariant({ size })}>
-            <ChevronDownIcon
-              className={dropdownIconVariant({ size, isFocus: isFocused })}
-            />
-          </div>
-        }
-      />
-      {isFocused && renderOptions()}
-    </div>
-  );
-};
+    const renderOptions = () => (
+      <ul className="absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
+        {optionsFiltered.map((option) => {
+          if (option.renderLabel) {
+            return (
+              <Fragment key={option.value}>
+                {option.renderLabel({
+                  value: option.value,
+                  label: option.label,
+                  handleOnClick: () => handleOptionClick(option),
+                  className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
+                    selectedOption?.value === option.value ? " bg-gray-200" : ""
+                  }`,
+                })}
+              </Fragment>
+            );
+          }
+          return (
+            <li
+              key={option.value}
+              onMouseDown={() => handleOptionClick(option)}
+              className={`px-4 py-2 hover:bg-gray-100 cursor-pointer ${
+                selectedOption?.value === option.value ? " bg-gray-200" : ""
+              }`}
+            >
+              {option.label}
+            </li>
+          );
+        })}
+        {optionsFiltered.length === 0 && (
+          <li className="px-4 py-14 text-center text-input-text">Not found</li>
+        )}
+      </ul>
+    );
+
+    return (
+      <div className={`relative ${fullwidth ? "w-full" : ""}`}>
+        <TextInput
+          {...props}
+          ref={ref}
+          readOnly={!filterMode}
+          value={textValue}
+          onChange={handleOnChangeText}
+          label={label}
+          placeholder=" "
+          type="text"
+          rounded={rounded}
+          variant={variant}
+          helperText={helperText}
+          errorMessage={errorMessage}
+          fullwidth={fullwidth}
+          error={error}
+          required={required}
+          id={_id}
+          disabled={disabled}
+          hasClearIcon={false}
+          size={size}
+          className={customInputVariant({ size })}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          endIcon={
+            <div className={iconWrapperVariant({ size })}>
+              <ChevronDownIcon
+                className={dropdownIconVariant({ size, isFocus: isFocused })}
+              />
+            </div>
+          }
+        />
+        {isFocused && renderOptions()}
+      </div>
+    );
+  }
+);
 
 export default Dropdown;

package/src/components/Table/Table.tsx

@@ -4,12 +4,14 @@ import { cn } from "@/utils/cn";
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  {
+    rootRef?: React.LegacyRef<HTMLDivElement>;
+  } & React.HTMLAttributes<HTMLTableElement>
+>(({ className, rootRef, ...props }, ref) => (
+  <div className="relative h-full w-full overflow-auto" ref={rootRef}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm border-collapse", className)}
       {...props}
     />
   </div>
@@ -20,7 +22,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b bg-secondary-80", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -58,7 +64,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20",
       className
     )}
     {...props}
@@ -73,7 +79,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      " h-12 py-3 px-6 text-left align-middle typography-body2 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}
@@ -87,7 +93,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      " py-3 px-6 text-left align-middle  typography-body3 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      className
+    )}
     {...props}
   />
 ));

package/src/components/Text/Text.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
+import React, { FC, forwardRef } from "react";
 
-type TextProps = {
+export type TextProps = {
   variant?:
     | "h1"
     | "h2"
@@ -38,22 +38,24 @@ type TextProps = {
   id?: string;
 };
 
-const Text: FC<TextProps> = ({
-  variant = "body1",
-  tag: Tag = "p",
-  children,
-  className,
-  color,
-  style,
-}) => {
-  return (
-    <Tag
-      className={`typography-${variant} text-${color} ${className}`}
-      style={style}
-    >
-      {children}
-    </Tag>
-  );
-};
+const Text = forwardRef<TextProps["tag"], TextProps>(
+  ({
+    variant = "body1",
+    tag: Tag = "p",
+    children,
+    className,
+    color,
+    style,
+  }) => {
+    return (
+      <Tag
+        className={`typography-${variant} text-${color} ${className}`}
+        style={style}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
 
 export default Text;

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
 
@@ -42,3 +42,48 @@ export const Default = {
     );
   },
 } satisfies StoryObj;
+
+const InputWithRef = (props: any) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <TextInput
+      id="1"
+      size="lg"
+      {...props}
+      ref={inputRef}
+      labelClassName="peer-focus:bg-red-500"
+      onKeyDown={(e) => {
+        if (e.code === "Enter") {
+          inputRef.current?.blur?.();
+        }
+      }}
+    />
+  );
+};
+
+export const CustomLabel = {
+  args: {
+    label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          labelClassName="peer-focus:bg-red-500"
+        />
+        <InputWithRef id="2" size="md" {...args} />
+        <TextInput id="3" size="sm" {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.tsx

@@ -12,8 +12,8 @@ import {
   inputVariant,
   labelVariant,
 } from "./TextInput.styles";
-import { twMerge } from "tailwind-merge";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
 
 export type InputProps = {
   id?: string;
@@ -31,9 +31,10 @@ export type InputProps = {
   hasClearIcon?: boolean;
   endIcon?: ReactNode;
   className?: string;
+  labelClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
-const TextInput: FC<InputProps> = forwardRef(
+export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       id,
@@ -50,6 +51,7 @@ const TextInput: FC<InputProps> = forwardRef(
       required = true,
       hasClearIcon = true,
       endIcon,
+      labelClassName,
       ...props
     },
     ref
@@ -74,9 +76,7 @@ const TextInput: FC<InputProps> = forwardRef(
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
 
-    useImperativeHandle(ref, () => ({
-      clearInput: handleClearInput,
-    }));
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
     const handleClearInput = () => {
       if (inputRef.current) {
@@ -94,7 +94,7 @@ const TextInput: FC<InputProps> = forwardRef(
             type={type}
             id={_id}
             disabled={disabled}
-            className={twMerge(inputClassname, props.className)}
+            className={cn(inputClassname, props.className)}
           />
           {hasClearIcon && (
             <div className={iconWrapperClassname}>
@@ -106,7 +106,7 @@ const TextInput: FC<InputProps> = forwardRef(
             </div>
           )}
           {endIcon}
-          <label htmlFor={_id} className={labelClassname}>
+          <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
             {label} {required && <span className="text-error">*</span>}
           </label>
         </div>

package/src/index.ts

@@ -10,9 +10,15 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 
+// Export component types
+export type { ButtonProps } from "./components/Button/Button";
+export type { InputProps } from "./components/TextInput/TextInput";
+export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
+
 // UTILS
 export {
   resloveTimestamp,