Release (#352)

* chore(frontend): add margin to authentication card * Video preview issue, decentralized svg (#350) * fix(frontend): video preview issue, decentralized svg * fix(frontend): new discord link * feat(frontend): add custom poster to video * docs: add changeset * 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]> --------- Co-authored-by: luzzifoss <[email protected]> Co-authored-by: Paolo Guerra <[email protected]>
carrot-kpi · Aug 28, 2023 · 266f6cb · 266f6cb · vercel · Aug 28, 2023
1 parent 89fce7a
commit 266f6cb
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 15 deletions.
diff --git a/.changeset/orange-ducks-smash.md b/.changeset/orange-ducks-smash.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": patch
+---
+
+Add poster to hero video, add new Discord link
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/frontend/craco.config.js b/packages/frontend/craco.config.js
@@ -11,11 +11,12 @@ module.exports = {
     webpack: {
         configure: (config, { env }) => {
             const production = env === "production";
-
             for (const rule of config.module.rules) {
+                if (!rule.oneOf) continue;
                 for (oneOf of rule.oneOf) {
                     if (!oneOf.use) continue;
                     for (const use of oneOf.use) {
+                        if (!use.loader) continue;
                         if (use.loader.includes("postcss-loader")) {
                             use.options.postcssOptions.plugins.push("cssnano");
                         }

diff --git a/packages/frontend/src/components/authenticate/index.tsx b/packages/frontend/src/components/authenticate/index.tsx
@@ -78,7 +78,7 @@ export const Authenticate = ({ onCancel }: AuthenticateProps) => {
 
     return (
         <div className="w-full h-full bg-grid-light flex justify-center">
-            <div className="h-fit flex flex-col gap-4 items-center p-8 max-w-lg rounded-xl border border-black dark:border-white bg-white dark:bg-black">
+            <div className="h-fit flex flex-col gap-4 items-center p-8 max-w-lg rounded-xl border border-black dark:border-white bg-white dark:bg-black mx-4">
                 {address ? (
                     <>
                         <LogoIcon className="w-40 h-40" />

diff --git a/packages/frontend/src/constants/index.ts b/packages/frontend/src/constants/index.ts
@@ -130,7 +130,7 @@ export const FOOTER_LINKS: FooterLink[] = [
         links: [
             {
                 title: "Discord",
-                to: "https://discord.com/invite/zCFXBEQkVa",
+                to: "https://discord.gg/uRer2D4Pdf",
             },
             {
                 title: "Twitter",

diff --git a/packages/frontend/src/icons/marquee/decentralized100.tsx b/packages/frontend/src/icons/marquee/decentralized100.tsx
diff --git a/packages/frontend/src/images/video-poster.png b/packages/frontend/src/images/video-poster.png
diff --git a/packages/frontend/src/pages/home/hero/index.tsx b/packages/frontend/src/pages/home/hero/index.tsx
@@ -59,6 +59,8 @@ export const Hero = () => {
                             <video
                                 ref={videoRef}
                                 controls
+                                preload="metadata"
+                                poster={require("../../../images/video-poster.png")}
                                 className="w-full h-full rounded-xl"
                             >
                                 <source

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,