@rovula/ui 0.0.30 → 0.0.32

package/src/components/Dropdown/Dropdown.tsx

@@ -17,6 +17,7 @@ import {
 } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
 
 type RenderLabelCallbackArg = {
   value: string;
@@ -45,11 +46,16 @@ export type DropdownProps = {
   error?: boolean;
   required?: boolean;
   className?: string;
+  optionContainerClassName?: string;
   options: Options[];
   value?: Options;
   onChangeText?: InputProps["onChange"];
   onSelect?: (value: Options) => void;
-  renderOptions?: (optionsFiltered: Options[]) => ReactNode;
+  renderOptions?: (value: {
+    optionsFiltered: Options[];
+    selectedOption: Options | null | undefined;
+    onClick: (option: Options) => void;
+  }) => ReactNode;
 } & Omit<InputProps, "value">;
 
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
@@ -72,6 +78,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
+      optionContainerClassName,
       ...props
     },
     ref
@@ -86,11 +93,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     const keyCode = useRef("");
 
     useEffect(() => {
-      if (value && !selectedOption) {
-        setSelectedOption(value);
-        setTextValue(value.label);
-      }
-    }, [value, selectedOption]);
+      setSelectedOption(value);
+      setTextValue(value?.label ?? "");
+    }, [value]);
 
     const handleOnChangeText = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,11 +128,20 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
 
     const renderOptions = () => {
       if (customRenderOptions) {
-        return customRenderOptions(optionsFiltered);
+        return customRenderOptions({
+          optionsFiltered,
+          selectedOption,
+          onClick: handleOptionClick,
+        });
       }
 
       return (
-        <ul className="absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
+        <ul
+          className={cn(
+            "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto",
+            optionContainerClassName
+          )}
+        >
           {optionsFiltered.map((option) => {
             if (option.renderLabel) {
               return (

package/src/components/InputFilter/InputFilter.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { InputFilter } from "./InputFilter";
-import { Options } from "../Dropdown/Dropdown";
+import { InputFilter, Options } from "./InputFilter";
 
 const meta = {
   title: "Components/InputFilter",
@@ -30,13 +29,14 @@ export const Default = {
   args: {
     label: "Choose an option:",
     fullwidth: true,
+    disabled: true,
     options,
   },
   render: (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState<Options[] | undefined>([]);
 
-    const handleOnSelect = (e: any) => {
-      setValue(e);
+    const handleOnSelect = (values: Options[]) => {
+      setValue(values);
     };
 
     return (
@@ -45,15 +45,16 @@ export const Default = {
           id="1"
           size="lg"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
+          optionContainerClassName="h-[400px]"
           {...args}
         />
         <InputFilter
           id="2"
           size="md"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
           {...args}
         />
@@ -61,7 +62,7 @@ export const Default = {
           id="3"
           size="sm"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
           {...args}
         />

package/src/components/InputFilter/InputFilter.styles.ts

@@ -4,19 +4,17 @@ import { cva } from "class-variance-authority";
 export const filterIconVariant = cva(
   [
     // Base styles
-    "absolute flex items-center justify-center cursor-pointer",
+    "absolute contents items-center justify-center cursor-pointer",
 
     // Border styles
     "border-l border-l-input-default-stroke",
     "peer-hover:border-l-input-active-stroke",
     "peer-focus:border-l-input-active-stroke",
-    "peer-disabled:border-l-input-disable-stroke",
 
     // Fill styles
     "fill-primary",
     "peer-hover:fill-input-filled-text",
     "peer-focus:fill-input-filled-text",
-    "peer-disabled:fill-input-disable-stroke",
 
     // Stroke styles
     "stroke-input-default-stroke",
@@ -49,7 +47,6 @@ export const filterIconVariant = cva(
           "fill-primary-default",
           "peer-hover:fill-primary-default", // TODO wait for refactor color after change function button colors
           "peer-focus:fill-primary-hover", // TODO wait for refactor color after change function button colors
-          // "peer-disabled:fill-input-disable-stroke",
 
           // Stroke styles
           "stroke-primary-default",
@@ -57,6 +54,13 @@ export const filterIconVariant = cva(
           "peer-focus:stroke-primary-hover",
         ],
       },
+      disabled: {
+        true: [
+          "border-l-input-disable-stroke",
+          "fill-input-disable-stroke",
+          "stroke-input-disable-stroke",
+        ],
+      },
     },
     defaultVariants: {
       size: "md",
@@ -64,6 +68,7 @@ export const filterIconVariant = cva(
       error: false,
       position: "end",
       active: false,
+      disabled: false,
     },
   }
 );

package/src/components/InputFilter/InputFilter.tsx

@@ -1,53 +1,312 @@
-import React, { forwardRef } from "react";
-import Dropdown, { DropdownProps } from "../Dropdown/Dropdown";
+import React, {
+  Fragment,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import TextInput, { InputProps } from "../TextInput/TextInput";
+import { cn } from "@/utils/cn";
+import { customInputVariant } from "../Dropdown/Dropdown.styles";
 import Icon from "../Icon/Icon";
 import { filterIconVariant } from "./InputFilter.styles";
-import { AdjustmentsHorizontalIcon } from "@heroicons/react/16/solid";
-
-export type InputFilterProps = Omit<
-  DropdownProps,
-  | "isFloatingLabel"
-  | "keepCloseIconOnValue"
-  | "hasClearIcon"
-  | "hasSearchIcon"
-  | "endIcon"
-  | "filterMode"
-  | "isFloatingLabel"
->;
+import { Checkbox } from "../Checkbox/Checkbox";
+
+type RenderLabelCallbackArg = {
+  value: string;
+  label: string;
+  handleOnClick: () => void;
+  className: string;
+};
+
+export type Options = {
+  value: string;
+  label: string;
+  renderLabel?: (config: RenderLabelCallbackArg) => ReactNode;
+};
+
+export type InputFilterProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  helperText?: string;
+  errorMessage?: string;
+  filterMode?: boolean;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  className?: string;
+  optionContainerClassName?: string;
+  options: Options[];
+  values?: Options[];
+  onChangeText?: InputProps["onChange"];
+  onSelect?: (values: Options[]) => void;
+  renderOptions?: (value: {
+    optionsFiltered: Options[];
+    selectedOptions: Options[];
+    onClick: (option: Options) => void;
+  }) => ReactNode;
+} & Omit<InputProps, "value" | "onSelect">;
 
 const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
-  (props, ref) => {
+  (
+    {
+      id,
+      options = [],
+      values = [],
+      label,
+      size = "md",
+      rounded = "normal",
+      variant = "outline",
+      helperText,
+      errorMessage,
+      fullwidth = true,
+      disabled = false,
+      error = false,
+      filterMode = false,
+      required = true,
+      onChangeText,
+      onSelect,
+      renderOptions: customRenderOptions,
+      optionContainerClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const _id = id || `${label}-select`;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState<Options[]>(values);
+    const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      setSelectedOptions(values ?? []);
+      setTextValue(values?.map((option) => option.label).join(", ") ?? "");
+    }, [values]);
+
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(event.target as Node)
+        ) {
+          setIsFocused(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const handleOnChangeText = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChangeText?.(event);
+        setTextValue(event.target.value);
+
+        if (!event.target.value) {
+          clearMismatchValues(event as any);
+        }
+      },
+      [onChangeText]
+    );
+
+    const handleOptionClick = useCallback(
+      (option: Options) => {
+        const isSelected = selectedOptions.some(
+          (selected) => selected.value === option.value
+        );
+        let newSelectedOptions = [...selectedOptions];
+
+        if (isSelected) {
+          newSelectedOptions = newSelectedOptions.filter(
+            (selected) => selected.value !== option.value
+          );
+        } else {
+          newSelectedOptions.push(option);
+        }
+
+        setSelectedOptions(newSelectedOptions);
+        setTextValue(
+          newSelectedOptions.map((option) => option.label).join(", ")
+        );
+        onSelect?.(newSelectedOptions);
+      },
+      [selectedOptions, onSelect]
+    );
+
+    const optionsFiltered = useMemo(() => {
+      const lastText = textValue?.split(",").pop();
+      const filterText = lastText ?? "";
+
+      return options.filter(
+        (option) =>
+          !filterMode ||
+          option.label?.toLowerCase().includes(filterText?.toLowerCase())
+      );
+    }, [options, filterMode, textValue]);
+
+    const renderOptions = () => {
+      if (customRenderOptions) {
+        return customRenderOptions({
+          optionsFiltered,
+          selectedOptions,
+          onClick: handleOptionClick,
+        });
+      }
+
+      return (
+        <ul
+          className={cn(
+            "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto",
+            optionContainerClassName
+          )}
+        >
+          {optionsFiltered.map((option) => {
+            if (option.renderLabel) {
+              return (
+                <Fragment key={option.value}>
+                  {option.renderLabel({
+                    value: option.value,
+                    label: option.label,
+                    handleOnClick: () => handleOptionClick(option),
+                    className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${
+                      selectedOptions.some(
+                        (selected) => selected.value === option.value
+                      )
+                        ? "bg-gray-200"
+                        : ""
+                    }`,
+                  })}
+                </Fragment>
+              );
+            }
+            return (
+              <li
+                key={option.value}
+                onMouseDown={() => handleOptionClick(option)}
+                className={`p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${
+                  selectedOptions.some(
+                    (selected) => selected.value === option.value
+                  )
+                    ? "bg-base-popup-highlight"
+                    : ""
+                }`}
+              >
+                <Checkbox
+                  checked={selectedOptions.some(
+                    (selected) => selected.value === option.value
+                  )}
+                />
+                {option.label}
+              </li>
+            );
+          })}
+          {optionsFiltered.length === 0 && (
+            <li className="px-4 py-14 text-center text-input-text">
+              Not found
+            </li>
+          )}
+        </ul>
+      );
+    };
+
+    const handleOnFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(true);
+        props?.onFocus?.(e);
+      },
+      [props?.onFocus]
+    );
+
+    const clearMismatchValues = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        const matchSelectedValues = optionsFiltered.filter(
+          (opt) =>
+            opt.value === e.target?.value || opt.label === e.target?.value
+        );
+
+        if (keyCode.current === "Enter") {
+          return;
+        }
+
+        setSelectedOptions(matchSelectedValues);
+        setTextValue(
+          matchSelectedValues.map((option) => option.label).join(", ")
+        );
+        onSelect?.(matchSelectedValues);
+      },
+      [optionsFiltered, textValue]
+    );
+
+    const handleOnKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        keyCode.current = e.code;
+        props?.onKeyDown?.(e);
+      },
+      [props?.onKeyDown]
+    );
+
     const filterIconClassName = filterIconVariant({
-      size: props.size,
-      rounded: props.rounded,
-      error: props.error,
-      active: !!props.value?.value,
+      size: size,
+      rounded: rounded,
+      error: error,
+      active: !!values.length,
+      disabled,
     });
 
     return (
-      <Dropdown
-        label="Placeholder Text"
-        required={false}
-        {...props}
-        ref={ref}
-        renderEndIcon={() => (
-          <div className={filterIconClassName}>
-            <Icon
-              type="heroicons"
-              name="adjustments-horizontal"
-              variant="outline"
-              color="inherit"
-              stroke="inherit"
-              fill="transparent"
-            />
-          </div>
-        )}
-        renderOptions={(optionsFiltered) => {
-          return "";
-        }}
-        filterMode
-        isFloatingLabel={false}
-      />
+      <div
+        ref={containerRef}
+        className={`relative ${fullwidth ? "w-full" : ""}`}
+      >
+        <TextInput
+          hasClearIcon={false}
+          endIcon={
+            <div className={filterIconClassName}>
+              <Icon
+                type="heroicons"
+                name="adjustments-horizontal"
+                variant="outline"
+                color="inherit"
+                stroke="inherit"
+                fill="transparent"
+              />
+            </div>
+          }
+          {...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}
+          size={size}
+          className={customInputVariant({ size })}
+          onFocus={handleOnFocus}
+          onKeyDown={handleOnKeyDown}
+        />
+        {isFocused && renderOptions()}
+      </div>
     );
   }
 );

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

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,8 +1,5 @@
-"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<
@@ -27,18 +24,19 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square box-border  size-4 rounded-full border border-primary text-primary",
-        "hover:border-primary-hover",
+        "aspect-square box-border size-4 rounded-full border border-function-default-solid text-function-default-solid",
+        "hover:border-function-default-hover",
         "focus:outline-none",
-        "data-[state=checked]:border-secondary data-[state=checked]:text-secondary",
-        "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:text-secondary-hover",
-        "data-[disabled]:border-state-disable-solid data-[disabled]:fill-state-disable-solid data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:text-state-disable-solid",
+        // Disabled state styles
+        "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid",
+        // Checked state styles
+        "data-[state=checked]:border-function-active-solid data-[state=checked]:text-function-active-solid",
+        "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:text-function-active-hover",
         className
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        {/* <div className="bg-primary size-2.5 rounded-full" /> */}
         <svg
           width="10"
           height="10"

package/src/components/Search/Search.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),
@@ -30,6 +30,7 @@ export const Default = {
   args: {
     label: "Choose an option:",
     fullwidth: true,
+    size: "md",
     options,
   },
   render: (args) => {

package/src/components/Text/Text.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full  bg-base-bg2">
         <Story />
       </div>
     ),
@@ -45,6 +45,10 @@ const variant: any = [
   "small3",
   "small4",
   "small5",
+  "small6",
+  "small7",
+  "small8",
+  "small9",
   "label1",
   "label2",
   "buttonL",

package/src/components/TextInput/TextInput.styles.ts

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const inputVariant = cva(
   [
+    "truncate",
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
     "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
@@ -76,47 +77,47 @@ export const inputVariant = cva(
       {
         hasSearchIcon: true,
         size: "sm",
-        class: "ps-6",
+        class: "!ps-6",
       },
       {
         hasSearchIcon: true,
         size: "md",
-        class: "ps-9",
+        class: "!ps-9",
       },
       {
         hasSearchIcon: true,
         size: "lg",
-        class: "ps-11",
+        class: "!ps-11",
       },
       {
         leftSectionIcon: true,
         size: "sm",
-        class: "ps-[38px]",
+        class: "!ps-[38px]",
       },
       {
         leftSectionIcon: true,
         size: "md",
-        class: "ps-[46px]",
+        class: "!ps-[46px]",
       },
       {
         leftSectionIcon: true,
         size: "lg",
-        class: "ps-[72px]",
+        class: "!ps-[72px]",
       },
       {
         rightSectionIcon: true,
         size: "sm",
-        class: "pe-[38px]",
+        class: "!pe-[38px]",
       },
       {
         rightSectionIcon: true,
         size: "md",
-        class: "pe-[46px]",
+        class: "!pe-[46px]",
       },
       {
         rightSectionIcon: true,
         size: "lg",
-        class: "pe-[72px]",
+        class: "!pe-[72px]",
       },
     ],
     defaultVariants: {