@rovula/ui 0.1.6 → 0.1.8

package/src/components/Form/ValidationHintList.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { cn } from "@/utils/cn";
+
+export type ValidationHintState = "pending" | "valid" | "invalid";
+export type ValidationHintMode = ValidationHintState[];
+
+export type ValidationHintRule<TValues> = {
+  id: string;
+  label: string;
+  validate: (values: TValues) => boolean;
+  when?: (values: TValues) => boolean;
+};
+
+export type ValidationHintListProps<TValues> = {
+  values: TValues;
+  rules: ValidationHintRule<TValues>[];
+  mode?: ValidationHintMode;
+  className?: string;
+  itemClassName?: string;
+};
+
+const resolveHintState = <TValues,>(
+  values: TValues,
+  rule: ValidationHintRule<TValues>,
+): ValidationHintState => {
+  const shouldEvaluate = rule.when ? rule.when(values) : true;
+  if (!shouldEvaluate) return "pending";
+
+  return rule.validate(values) ? "valid" : "invalid";
+};
+
+const hintTextStateClass: Record<ValidationHintState, string> = {
+  valid: "text-success",
+  invalid: "text-input-error",
+  pending: "text-text-g-contrast-medium",
+};
+
+const hintIconStateClass: Record<ValidationHintState, string> = {
+  valid: "opacity-100",
+  invalid: "opacity-100",
+  pending: "opacity-40",
+};
+
+export const ValidationHintList = <TValues,>({
+  values,
+  rules,
+  mode = ["pending", "valid", "invalid"],
+  className,
+  itemClassName,
+}: ValidationHintListProps<TValues>) => {
+  const enabledStates = new Set<ValidationHintState>(mode);
+
+  return (
+    <ul className={cn("mt-2 flex flex-col gap-3", className)}>
+      {rules.map((rule) => {
+        const state = resolveHintState(values, rule);
+        const normalizedState: ValidationHintState = enabledStates.has(state)
+          ? state
+          : "pending";
+
+        return (
+          <li
+            key={rule.id}
+            className={cn(
+              "flex items-center gap-2 typography-small2",
+              hintTextStateClass[normalizedState],
+              itemClassName,
+            )}
+          >
+            <CheckCircleIcon
+              className={cn("size-4", hintIconStateClass[normalizedState])}
+            />
+            <span>{rule.label}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default ValidationHintList;

package/src/components/Form/index.ts

@@ -0,0 +1,28 @@
+export {
+  Form,
+  createControlledForm,
+  createYupResolver,
+  useControlledForm,
+} from "./Form";
+export type {
+  ControlledFormFactoryOptions,
+  FormController,
+  FormProps,
+  UseControlledFormOptions,
+} from "./Form";
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";
+export { FieldMessage } from "./FieldMessage";
+export type { FieldMessageProps } from "./FieldMessage";
+export { ValidationHintList } from "./ValidationHintList";
+export type {
+  ValidationHintListProps,
+  ValidationHintMode,
+  ValidationHintRule,
+  ValidationHintState,
+} from "./ValidationHintList";
+export { useOptionBridge } from "./useOptionBridge";
+export type {
+  OptionLike,
+  UseOptionBridgeOptions,
+} from "./useOptionBridge";

package/src/components/Form/useOptionBridge.ts

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+
+type OptionValue = string | number;
+
+export type OptionLike<TValue extends OptionValue = string> = {
+  value: TValue;
+  label?: string;
+};
+
+export type UseOptionBridgeOptions<
+  TValue extends OptionValue,
+  TOption extends OptionLike<TValue>,
+> = {
+  options: TOption[];
+  loading?: boolean;
+  buildFallbackOption?: (value: TValue, loading: boolean) => TOption;
+};
+
+export const useOptionBridge = <
+  TValue extends OptionValue = string,
+  TOption extends OptionLike<TValue> = OptionLike<TValue>,
+>({
+  options,
+  loading = false,
+  buildFallbackOption,
+}: UseOptionBridgeOptions<TValue, TOption>) => {
+  const optionsByValue = useMemo(() => {
+    return new Map<TValue, TOption>(
+      options.map((option) => [option.value as TValue, option])
+    );
+  }, [options]);
+
+  const toOption = (value: TValue | null | undefined) => {
+    if (value === null || value === undefined) return undefined;
+    return optionsByValue.get(value);
+  };
+
+  const toValue = (option: TOption | null | undefined) => {
+    return option?.value;
+  };
+
+  const toOptionWithFallback = (value: TValue | null | undefined) => {
+    if (value === null || value === undefined) return undefined;
+    return toOption(value) ?? buildFallbackOption?.(value, loading);
+  };
+
+  return {
+    toOption,
+    toOptionWithFallback,
+    toValue,
+    optionsByValue,
+  };
+};
+
+export default useOptionBridge;

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

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

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

@@ -30,7 +30,7 @@ export const filterIconVariant = cva(
       },
       rounded: {
         none: "rounded-r-none",
-        normal: "rounded-r-xl",
+        normal: "",
         full: "rounded-r-full",
       },
       error: {
@@ -56,12 +56,25 @@ export const filterIconVariant = cva(
       },
       disabled: {
         true: [
+          "cursor-default pointer-events-none",
           "border-l-input-disable-stroke",
           "fill-input-disable-stroke",
           "stroke-input-disable-stroke",
         ],
       },
     },
+    compoundVariants: [
+      {
+        rounded: "normal",
+        size: "sm",
+        className: "rounded-r-sm",
+      },
+      {
+        rounded: "normal",
+        size: ["md", "lg"],
+        className: "rounded-r-md",
+      },
+    ],
     defaultVariants: {
       size: "md",
       rounded: "normal",

package/src/components/InputFilter/InputFilter.tsx

@@ -78,7 +78,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
       optionContainerClassName,
       ...props
     },
-    ref
+    ref,
   ) => {
     const _id = id || `${label}-select`;
 
@@ -117,19 +117,19 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
           clearMismatchValues(event as any);
         }
       },
-      [onChangeText]
+      [onChangeText],
     );
 
     const handleOptionClick = useCallback(
       (option: Options) => {
         const isSelected = selectedOptions.some(
-          (selected) => selected.value === option.value
+          (selected) => selected.value === option.value,
         );
         let newSelectedOptions = [...selectedOptions];
 
         if (isSelected) {
           newSelectedOptions = newSelectedOptions.filter(
-            (selected) => selected.value !== option.value
+            (selected) => selected.value !== option.value,
           );
         } else {
           newSelectedOptions.push(option);
@@ -137,11 +137,11 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
 
         setSelectedOptions(newSelectedOptions);
         setTextValue(
-          newSelectedOptions.map((option) => option.label).join(", ")
+          newSelectedOptions.map((option) => option.label).join(", "),
         );
         onSelect?.(newSelectedOptions);
       },
-      [selectedOptions, onSelect]
+      [selectedOptions, onSelect],
     );
 
     const optionsFiltered = useMemo(() => {
@@ -151,7 +151,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
       return options.filter(
         (option) =>
           !filterMode ||
-          option.label?.toLowerCase().includes(filterText?.toLowerCase())
+          option.label?.toLowerCase().includes(filterText?.toLowerCase()),
       );
     }, [options, filterMode, textValue]);
 
@@ -167,8 +167,8 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
       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
+            "absolute text-text-g-contrast-high mt-1 w-full bg-modal-surface border border-modal-surface text-text-contrast-low rounded-md shadow-md z-10 max-h-60 overflow-y-auto",
+            optionContainerClassName,
           )}
         >
           {optionsFiltered.map((option) => {
@@ -179,12 +179,13 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
                     value: option.value,
                     label: option.label,
                     handleOnClick: () => handleOptionClick(option),
-                    className: `p-4 typography-subtitle4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
-                      (selected) => selected.value === option.value
-                    )
-                      ? "bg-gray-200"
-                      : ""
-                      }`,
+                    className: `p-4 typography-subtitle4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${
+                      selectedOptions.some(
+                        (selected) => selected.value === option.value,
+                      )
+                        ? "bg-gray-200"
+                        : ""
+                    }`,
                   })}
                 </Fragment>
               );
@@ -193,16 +194,17 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
               <li
                 key={option.value}
                 onMouseDown={() => handleOptionClick(option)}
-                className={`p-4 typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
-                  (selected) => selected.value === option.value
-                )
-                  ? "bg-base-popup-highlight"
-                  : ""
-                  }`}
+                className={`p-4 text-text-g-contrast-high typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${
+                  selectedOptions.some(
+                    (selected) => selected.value === option.value,
+                  )
+                    ? "bg-modal-highlight"
+                    : ""
+                }`}
               >
                 <Checkbox
                   checked={selectedOptions.some(
-                    (selected) => selected.value === option.value
+                    (selected) => selected.value === option.value,
                   )}
                 />
                 {option.label}
@@ -223,14 +225,14 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
         setIsFocused(true);
         props?.onFocus?.(e);
       },
-      [props?.onFocus]
+      [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
+            opt.value === e.target?.value || opt.label === e.target?.value,
         );
 
         if (keyCode.current === "Enter") {
@@ -239,11 +241,11 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
 
         setSelectedOptions(matchSelectedValues);
         setTextValue(
-          matchSelectedValues.map((option) => option.label).join(", ")
+          matchSelectedValues.map((option) => option.label).join(", "),
         );
         onSelect?.(matchSelectedValues);
       },
-      [optionsFiltered, textValue]
+      [optionsFiltered, textValue],
     );
 
     const handleOnKeyDown = useCallback(
@@ -251,7 +253,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
         keyCode.current = e.code;
         props?.onKeyDown?.(e);
       },
-      [props?.onKeyDown]
+      [props?.onKeyDown],
     );
 
     const filterIconClassName = filterIconVariant({
@@ -261,6 +263,8 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
       active: !!values.length,
       disabled,
     });
+    const filterIconSizeClassName =
+      size === "lg" ? "size-8" : size === "md" ? "size-[22px]" : "size-[18px]";
 
     return (
       <div
@@ -277,6 +281,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
               color="inherit"
               stroke="inherit"
               fill="transparent"
+              className={filterIconSizeClassName}
             />
           }
           classes={{ endIconWrapper: filterIconClassName }}
@@ -305,7 +310,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
         {isFocused && renderOptions()}
       </div>
     );
-  }
+  },
 );
 
 export { InputFilter };

package/src/components/Label/Label.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const labelVariant = cva(
   [
-    "block cursor-pointer duration-450 transition-all px-[2px] text-foreground peer-focus:text-input-text-active",
+    "block cursor-pointer duration-450 transition-all px-[2px] text-input-default-text peer-focus:text-input-text-active",
   ],
   {
     variants: {
@@ -57,5 +57,5 @@ export const labelVariant = cva(
       error: false,
       isFloatable: false,
     },
-  }
+  },
 );

package/src/components/Label/Label.tsx

@@ -21,7 +21,7 @@ const Label = React.forwardRef<
         error: props.error,
         isFloatable: props.isFloatable,
       }),
-      className
+      className,
     )}
     {...props}
   />

package/src/components/Menu/Menu.tsx

@@ -56,15 +56,15 @@ export type MenuProps = {
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(
   (
     { items, selectedValues = [], onSelect, className, style, isAbove = false },
-    ref
+    ref,
   ) => {
     return (
       <div
         ref={ref}
         className={cn(
-          "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground",
-          "border border-base-popup",
-          className
+          "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-g-contrast-high",
+          "border border-modal-surface",
+          className,
         )}
         style={{
           boxShadow: "var(--dropdown-menu-shadow)",
@@ -115,7 +115,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         })}
       </div>
     );
-  }
+  },
 );
 
 Menu.displayName = "Menu";
@@ -169,7 +169,7 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
             "pointer-events-none opacity-50": option.disabled,
             "text-red-500": option.danger,
           },
-          className
+          className,
         )}
         onMouseDown={option.disabled ? undefined : onSelect}
       >
@@ -178,7 +178,7 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
         {option.label}
       </div>
     );
-  }
+  },
 );
 
 MenuItem.displayName = "MenuItem";
@@ -196,11 +196,11 @@ export const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(
         ref={ref}
         className={cn(
           "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
-          className
+          className,
         )}
       />
     );
-  }
+  },
 );
 
 MenuSeparator.displayName = "MenuSeparator";
@@ -218,14 +218,14 @@ export const MenuLabel = forwardRef<HTMLDivElement, MenuLabelProps>(
       <div
         ref={ref}
         className={cn(
-          "px-3 py-2 typography-small4 text-text-grey-medium",
-          className
+          "px-3 py-2 typography-small4 text-text-g-contrast-medium",
+          className,
         )}
       >
         {children}
       </div>
     );
-  }
+  },
 );
 
 MenuLabel.displayName = "MenuLabel";

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof NumberInput> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="p-5 flex h-screen w-full bg-base-bg2">
+      <div className="p-5 flex h-screen w-full bg-bg-bg2">
         <Story />
       </div>
     ),

package/src/components/OtpInput/OtpInput.stories.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import { Field } from "@/components/Form/Field";
+import { Form } from "@/components/Form/Form";
+import OtpInput from "./OtpInput";
+import { OtpInputGroup } from "./OtpInputGroup";
+
+const meta: Meta = {
+  title: "Components/OtpInput",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Basic = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const [completed, setCompleted] = useState("-");
+
+    return (
+      <div className="w-[420px] max-w-full rounded-md bg-bg-bg2 p-4">
+        <div className="flex flex-col gap-3">
+          <OtpInput
+            value={value}
+            onChange={setValue}
+            onComplete={(code) => setCompleted(code)}
+          />
+          <div className="text-xs text-text-g-contrast-medium">
+            Value: {value || "-"}
+          </div>
+          <div className="text-xs text-text-g-contrast-medium">
+            Last completed: {completed}
+          </div>
+        </div>
+      </div>
+    );
+  },
+} satisfies Story;
+
+type OtpFormValues = {
+  otp: string;
+};
+
+const otpSchema = yup.object({
+  otp: yup
+    .string()
+    .required("OTP is required")
+    .length(6, "OTP must be 6 digits"),
+});
+
+export const WithFormField = {
+  render: () => {
+    return (
+      <div className="w-[420px] max-w-full rounded-md bg-bg-bg2 p-4">
+        <Form<OtpFormValues>
+          defaultValues={{ otp: "" }}
+          validationSchema={otpSchema}
+          mode="onTouched"
+          className="flex flex-col gap-3"
+          onSubmit={(values) => {
+            // eslint-disable-next-line no-console
+            console.log("OTP submit:", values);
+          }}
+        >
+          {({ formState }) => (
+            <>
+              <Field<
+                OtpFormValues,
+                "otp",
+                React.ComponentProps<typeof OtpInput>
+              >
+                name="otp"
+                component={OtpInput}
+                componentProps={{
+                  autoFocus: true,
+                }}
+                invalidPropName="invalid"
+              />
+              <Button
+                type="submit"
+                disabled={!formState.isValid || formState.isSubmitting}
+                isLoading={formState.isSubmitting}
+              >
+                Verify OTP
+              </Button>
+            </>
+          )}
+        </Form>
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const GroupWithLabelAndError = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const isInvalid = value.length > 0 && value.length < 6;
+
+    return (
+      <div className="w-[420px] max-w-full rounded-md bg-bg-bg2 p-4">
+        <OtpInputGroup
+          id="otp-group"
+          label="Verification code"
+          required
+          value={value}
+          onChange={setValue}
+          helperText="Enter the 6-digit code from your authenticator app"
+          error={isInvalid}
+          errorMessage={isInvalid ? "OTP must be 6 digits" : undefined}
+          autoFocus
+        />
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const GroupWithFormField = {
+  render: () => {
+    return (
+      <div className="w-[420px] max-w-full rounded-md bg-bg-bg2 p-4">
+        <Form<OtpFormValues>
+          defaultValues={{ otp: "" }}
+          validationSchema={otpSchema}
+          mode="onTouched"
+          className="flex flex-col gap-3"
+          onSubmit={(values) => {
+            // eslint-disable-next-line no-console
+            console.log("OTP group submit:", values);
+          }}
+        >
+          {({ formState }) => (
+            <>
+              <Field<
+                OtpFormValues,
+                "otp",
+                React.ComponentProps<typeof OtpInputGroup>
+              >
+                name="otp"
+                component={OtpInputGroup}
+                componentProps={{
+                  id: "otp-field-group",
+                  label: "Verification code",
+                  helperText: "Paste is supported",
+                  required: true,
+                  autoFocus: true,
+                }}
+                invalidPropName="error"
+              />
+              <Button
+                type="submit"
+                disabled={!formState.isValid || formState.isSubmitting}
+                isLoading={formState.isSubmitting}
+              >
+                Verify OTP
+              </Button>
+            </>
+          )}
+        </Form>
+      </div>
+    );
+  },
+} satisfies Story;