@rovula/ui 0.0.9 → 0.0.11

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/Input/Input.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+export const Default = {
+  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">
+        <Input type="email" placeholder="Email" />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Input/Input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/utils/cn";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Label } from "./Label";
+
+const meta = {
+  title: "Components/Label",
+  component: Label,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+export const Default = {
+  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">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms">Accept terms and conditions</Label>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Label/Label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/utils/cn";
+
+const labelVariants = cva(
+  "typography-label1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup, RadioGroupItem } from "./RadioGroup";
+import { Label } from "../Label/Label";
+const meta = {
+  title: "Components/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    disabled: false,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <RadioGroup defaultValue="option-one" {...props}>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-one" id="option-one" />
+            <Label htmlFor="option-one">Option One</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-two" id="option-two" />
+            <Label htmlFor="option-two">Option Two</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Diabled = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex items-center space-x-2">
+        <RadioGroup defaultValue="option-one" disabled>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-one" id="option-one" />
+            <Label htmlFor="option-one">Option One</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-two" id="option-two" />
+            <Label htmlFor="option-two">Option Two</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+import { cn } from "@/utils/cn";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-secondary-110 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-secondary-110",
+        {
+          "border-primary-30 data-[state=checked]:border-primary":
+            !props.disabled,
+          "border-secondary-110 data-disabled:border-secondary-110 text-secondary-110 fill-secondary-110":
+            props.disabled,
+        },
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        {/* <div className="bg-primary size-2.5 rounded-full" /> */}
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="fill-current text-current"
+        >
+          <circle cx="5" cy="5" r="5" fill="current" />
+        </svg>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/components/Table/Datagrid.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface Column {
+  header: string;
+  accessor: string;
+}
+
+interface TableProps {
+  columns: Column[];
+  data: Record<string, any>[];
+}
+
+const Table: React.FC<TableProps> = ({ columns, data }) => {
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          {columns.map((column, index) => (
+            <th key={index}>{column.header}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, rowIndex) => (
+          <tr key={rowIndex}>
+            {columns.map((column, colIndex) => (
+              <td key={colIndex}>{row[column.accessor]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./Table";
+
+const meta = {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Table>
+          <TableCaption>A list of your recent invoices.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+} satisfies StoryObj;