feat(ui): loading states (#351)

* feat(ui): add loading states for number, select, tags, dates and text inputs * chore: add changeset --------- Co-authored-by: luzzifoss <[email protected]>
carrot-kpi · Aug 28, 2023 · 3b3fc94 · 3b3fc94
1 parent 2379264
commit 3b3fc94
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 6 deletions.
diff --git a/.changeset/sweet-rockets-play.md b/.changeset/sweet-rockets-play.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/ui": minor
+---
+
+Add loading states for number, select, tags, dates and text inputs
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
@@ -94,7 +94,7 @@ export type CheckboxProps = Omit<
     "type" | "className" | "id" | keyof BaseCheckboxProps
 > &
     BaseCheckboxProps &
-    Omit<BaseInputWrapperProps, "id">;
+    Omit<BaseInputWrapperProps, "id" | "loading">;
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     function Checkbox(

diff --git a/packages/ui/src/components/commons/input.tsx b/packages/ui/src/components/commons/input.tsx
@@ -17,6 +17,7 @@ export interface PartialBaseInputProps<V> {
     errorText?: string;
     variant?: "xs" | "sm" | "base" | "xl" | "2xl";
     placeholder?: string;
+    loading?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     value?: V | null;
     border?: boolean;
@@ -120,6 +121,11 @@ export const inputStyles = mergedCva(
             hasLeftIcon: {
                 true: ["cui-pl-12"],
             },
+            loading: {
+                true: [
+                    "cui-bg-gray-200 dark:cui-bg-gray-600 cui-animate-pulse",
+                ],
+            },
         },
         compoundVariants: [
             {

diff --git a/packages/ui/src/components/date-input/index.tsx b/packages/ui/src/components/date-input/index.tsx
@@ -37,6 +37,8 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
             onChange,
             min,
             max,
+            loading,
+            disabled,
             ...rest
         },
         ref,
@@ -68,8 +70,9 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
         });
 
         const handlePickerOpen = useCallback(() => {
+            if (!open && (disabled || loading)) return;
             setOpen(true);
-        }, []);
+        }, [disabled, loading, open]);
 
         const handlePickerClose = useCallback(() => {
             setOpen(false);
@@ -102,6 +105,8 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
                     errorText={errorText}
                     info={info}
                     icon={Calendar}
+                    disabled={disabled}
+                    loading={loading}
                     className={{
                         ...className,
                         input: `cui-cursor-pointer ${className?.input}`,

diff --git a/packages/ui/src/components/date-time-input/index.tsx b/packages/ui/src/components/date-time-input/index.tsx
@@ -37,6 +37,8 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
             onChange,
             min,
             max,
+            loading,
+            disabled,
             ...rest
         },
         ref,
@@ -68,8 +70,9 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
         }, []);
 
         const handlePickerOpen = useCallback(() => {
+            if (!open && (disabled || loading)) return;
             setOpen(true);
-        }, []);
+        }, [disabled, loading, open]);
 
         const handlePickerClose = useCallback(() => {
             setOpen(false);
@@ -94,6 +97,8 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
                     errorText={errorText}
                     info={info}
                     icon={Calendar}
+                    disabled={disabled}
+                    loading={loading}
                     className={{
                         ...className,
                         input: `cui-cursor-pointer ${className?.input}`,

diff --git a/packages/ui/src/components/number-input.tsx b/packages/ui/src/components/number-input.tsx
@@ -29,6 +29,8 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             actionPlacement,
             error = false,
             className,
+            loading,
+            disabled,
             ...rest
         },
         ref,
@@ -56,6 +58,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                     thousandSeparator=","
                     decimalSeparator="."
                     value={value}
+                    disabled={disabled || loading}
                     placeholder={placeholder}
                     getInputRef={ref}
                     id={resolvedId}
@@ -64,6 +67,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                         error,
                         variant,
                         border,
+                        loading,
                         hasLeftIcon: !!icon && iconPlacement === "left",
                         className: className?.input,
                     })}

diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
@@ -4,7 +4,7 @@ import { Typography } from "./typography";
 import { mergedCva } from "../utils/components";
 
 export interface RadioGroupProps
-    extends Omit<BaseInputWrapperProps, "className" | "id"> {
+    extends Omit<BaseInputWrapperProps, "className" | "id" | "loading"> {
     id?: string;
     className?: BaseInputWrapperProps["className"] & {
         radioInputsWrapper?: string;

diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
@@ -83,6 +83,7 @@ export type SelectProps<T extends SelectOption<ValueType>> = {
     value: T | null;
     onChange: (value: T) => void;
     renderOption?: (value: T) => ReactElement;
+    loading?: boolean;
     className?: BaseInputProps<unknown>["className"] & {
         inputRoot?: string;
         wrapper?: string;
@@ -101,6 +102,8 @@ function Component<T extends SelectOption<ValueType>>(
         onChange,
         className,
         renderOption,
+        disabled,
+        loading,
         ...rest
     }: SelectProps<T>,
     ref: ForwardedRef<HTMLInputElement>,
@@ -117,8 +120,9 @@ function Component<T extends SelectOption<ValueType>>(
     });
 
     const handleClick = useCallback(() => {
+        if (!open && (disabled || loading)) return;
         setOpen(!open);
-    }, [open]);
+    }, [disabled, loading, open]);
 
     const getPickHandler = useCallback(
         (option: T) => () => {
@@ -142,6 +146,8 @@ function Component<T extends SelectOption<ValueType>>(
                 readOnly
                 icon={open ? ChevronUp : ChevronDown}
                 value={value?.label || ""}
+                disabled={disabled}
+                loading={loading}
                 {...rest}
                 className={{
                     ...className,

diff --git a/packages/ui/src/components/tags-input.tsx b/packages/ui/src/components/tags-input.tsx
@@ -73,7 +73,17 @@ export type TagsInputProps = Omit<
 
 export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
     function TagsInput(
-        { id, className, value, variant, messages, onChange, ...rest },
+        {
+            id,
+            className,
+            value,
+            variant,
+            messages,
+            onChange,
+            disabled,
+            loading,
+            ...rest
+        },
         ref,
     ): ReactElement {
         const generatedId = useId();
@@ -125,6 +135,8 @@ export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
                         <Button
                             onClick={handleOnClick}
                             size="xsmall"
+                            loading={loading}
+                            disabled={disabled}
                             className={{
                                 root: buttonStyles({
                                     className: className?.button,
@@ -137,6 +149,8 @@ export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
                     value={inputValue}
                     onChange={handleOnChange}
                     onKeyDown={handleKeyDown}
+                    disabled={disabled}
+                    loading={loading}
                     className={{
                         ...className,
                         input: `cui-pr-16 ${className?.input}`,

diff --git a/packages/ui/src/components/text-input.tsx b/packages/ui/src/components/text-input.tsx
@@ -23,6 +23,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             error = false,
             className,
             value,
+            loading,
+            disabled,
             ...rest
         },
         ref,
@@ -49,10 +51,12 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                     type="text"
                     ref={ref}
                     value={value || ""}
+                    disabled={loading || disabled}
                     {...rest}
                     className={inputStyles({
                         error,
                         variant,
+                        loading,
                         border,
                         hasLeftIcon: !!icon && iconPlacement === "left",
                         className: className?.input,