refactor(admin-ui): various fixes (#4554)

packages/admin-ui/package.json

@@ -41,10 +41,12 @@
     "mobx": "^6.9.0",
     "react": "18.2.0",
     "react-ace": "^13.0.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-virtualized": "^9.22.5",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "timeago-react": "^3.0.6"
   },
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
@@ -55,6 +57,7 @@
     "@storybook/theming": "7.6.20",
     "@svgr/webpack": "^6.1.1",
     "@types/react": "18.2.79",
+    "@types/react-custom-scrollbars": "^4.0.10",
     "@types/react-virtualized": "^9.22.0",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",

packages/admin-ui/src/Accordion/Accordion.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from "react";
-import { makeDecoratable, withStaticProps } from "~/utils";
+import { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from "~/utils";
 import { AccordionRoot } from "./components/AccordionRoot";
 import { AccordionItem, type AccordionItemProps } from "./components/AccordionItem";
-import { cva, type VariantProps } from "class-variance-authority";
 
 const accordionVariants = cva("wby-group w-full", {
     variants: {
@@ -46,7 +45,7 @@ const AccordionBase = ({
     return (
         <AccordionRoot
             {...rootProps}
-            className={accordionVariants({ variant, background, className })}
+            className={cn(accordionVariants({ variant, background }), className)}
         >
             {children}
         </AccordionRoot>

packages/admin-ui/src/Alert/Alert.tsx

@@ -123,59 +123,58 @@ export interface AlertProps
 
 const AlertContext = React.createContext<Pick<AlertProps, "variant">>({});
 
-const AlertActionBase = React.forwardRef<HTMLButtonElement, ButtonProps>(({ ...props }, ref) => {
+const AlertActionBase = (props: ButtonProps) => {
     const { variant: alertVariant } = React.useContext(AlertContext);
     return (
         <Button
             text={"Button"}
             variant={alertVariant === "strong" ? "secondary" : "tertiary"}
             size={"sm"}
-            ref={ref}
             {...props}
         />
     );
-});
-
-AlertActionBase.displayName = "AlertAction";
+};
 
 const AlertAction = makeDecoratable("AlertAction", AlertActionBase);
 
-const AlertBase = React.forwardRef<HTMLDivElement, AlertProps>(
-    ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }, ref) => {
-        const IconComponent = VARIANT_ICON_MAP[type || "info"];
-
-        return (
-            <AlertContext.Provider value={{ variant }}>
-                <div
-                    ref={ref}
-                    role="alert"
-                    className={cn(alertVariants({ type, variant }), className)}
-                    {...props}
-                >
-                    <div className={"wby-py-xs"}>
-                        <IconComponent className={alertIconVariants({ type, variant })} />
-                    </div>
-                    <div className={"wby-flex-grow wby-py-xxs"}>{children}</div>
-                    {actions && <div>{actions}</div>}
-                    {showCloseButton && (
-                        <IconButton
-                            onClick={onClose}
-                            icon={<Icon icon={<XIcon />} label="Close" />}
-                            size={"sm"}
-                            variant={closeButtonVariants({ type, variant })}
-                        />
-                    )}
-                </div>
-            </AlertContext.Provider>
-        );
-    }
-);
+const AlertBase = ({
+    className,
+    type,
+    variant,
+    showCloseButton,
+    onClose,
+    actions,
+    children,
+    ...props
+}: AlertProps) => {
+    const IconComponent = VARIANT_ICON_MAP[type || "info"];
 
-AlertBase.displayName = "Alert";
-
-const DecoratableAvatar = makeDecoratable("AlertBase", AlertBase);
+    return (
+        <AlertContext.Provider value={{ variant }}>
+            <div
+                role="alert"
+                className={cn(alertVariants({ type, variant }), className)}
+                {...props}
+            >
+                <div className={"wby-py-xs"}>
+                    <IconComponent className={alertIconVariants({ type, variant })} />
+                </div>
+                <div className={"wby-flex-grow wby-py-xxs"}>{children}</div>
+                {actions && <div>{actions}</div>}
+                {showCloseButton && (
+                    <IconButton
+                        onClick={onClose}
+                        icon={<Icon icon={<XIcon />} label="Close" />}
+                        size={"sm"}
+                        variant={closeButtonVariants({ type, variant })}
+                    />
+                )}
+            </div>
+        </AlertContext.Provider>
+    );
+};
 
-const Alert = withStaticProps(DecoratableAvatar, {
+const Alert = withStaticProps(makeDecoratable("AlertBase", AlertBase), {
     Action: AlertAction
 });
 

packages/admin-ui/src/AutoComplete/AutoComplete.tsx

@@ -1,9 +1,6 @@
 import React, { useMemo } from "react";
 import { makeDecoratable } from "~/utils";
-import {
-    AutoCompletePrimitive,
-    AutoCompletePrimitiveProps
-} from "./primitives/AutoCompletePrimitive";
+import { AutoCompletePrimitive, AutoCompletePrimitiveProps } from "./primitives";
 import {
     FormComponentDescription,
     FormComponentErrorMessage,

packages/admin-ui/src/AutoComplete/index.ts

@@ -1,2 +1,2 @@
 export * from "./AutoComplete";
-export * from "./primitives/AutoCompletePrimitive";
+export * from "./primitives";

packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx

@@ -1,10 +1,11 @@
 import React, { KeyboardEvent } from "react";
 import { Command } from "~/Command";
-import { Popover } from "~/Popover";
+import { PopoverPrimitive } from "~/Popover";
 import { InputPrimitiveProps } from "~/Input";
 import { useAutoComplete } from "./useAutoComplete";
 import { AutoCompleteInputIcons, AutoCompleteList } from "./components";
 import { AutoCompleteOption } from "./domains";
+import { makeDecoratable } from "~/utils";
 
 type AutoCompletePrimitiveProps = Omit<InputPrimitiveProps, "endIcon"> & {
     /**
@@ -62,7 +63,7 @@ type AutoCompletePrimitiveProps = Omit<InputPrimitiveProps, "endIcon"> & {
     displayResetAction?: boolean;
 };
 
-const AutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
+const DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
     const {
         vm,
         setListOpenState,
@@ -101,9 +102,9 @@ const AutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
     }, [setListOpenState]);
 
     return (
-        <Popover open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>
+        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>
             <Command label={props.label} onKeyDown={handleKeyDown}>
-                <Popover.Trigger asChild>
+                <PopoverPrimitive.Trigger asChild>
                     <span>
                         <Command.Input
                             value={vm.inputVm.value}
@@ -128,8 +129,8 @@ const AutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
                             onFocus={() => setListOpenState(true)}
                         />
                     </span>
-                </Popover.Trigger>
-                <Popover.Content
+                </PopoverPrimitive.Trigger>
+                <PopoverPrimitive.Content
                     style={{ width: "var(--radix-popover-trigger-width)" }}
                     onOpenAutoFocus={e => e.preventDefault()}
                 >
@@ -142,10 +143,15 @@ const AutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
                         emptyMessage={vm.optionsListVm.emptyMessage}
                         optionRenderer={props.optionRenderer}
                     />
-                </Popover.Content>
+                </PopoverPrimitive.Content>
             </Command>
-        </Popover>
+        </PopoverPrimitive>
     );
 };
 
+const AutoCompletePrimitive = makeDecoratable(
+    "AutoCompletePrimitive",
+    DecoratableAutoCompletePrimitive
+);
+
 export { AutoCompletePrimitive, type AutoCompletePrimitiveProps };

packages/admin-ui/src/AutoComplete/primitives/index.ts

@@ -0,0 +1 @@
+export * from "./AutoCompletePrimitive";

packages/admin-ui/src/Avatar/Avatar.tsx

@@ -1,40 +1,12 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { makeDecoratable } from "@webiny/react-composition";
-import { cva, type VariantProps } from "class-variance-authority";
-import { withStaticProps, cn } from "~/utils";
-
-type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
-
-const AvatarImageBase = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Image>,
-    AvatarImageProps
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Image ref={ref} className={cn("wby-aspect-square", className)} {...props} />
-));
-AvatarImageBase.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase);
-
-type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
-
-const AvatarFallbackBase = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Fallback>,
-    AvatarFallbackProps
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback
-        ref={ref}
-        className={cn(
-            "wby-flex wby-h-full wby-w-full wby-items-center wby-justify-center wby-rounded-sm",
-            className
-        )}
-        {...props}
-    />
-));
-
-AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName;
-
-const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase);
+import { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from "~/utils";
+import {
+    AvatarFallback,
+    AvatarImage,
+    type AvatarFallbackProps,
+    type AvatarImageProps
+} from "./components";
 
 interface AvatarProps
     extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
@@ -66,26 +38,19 @@ const avatarVariants = cva("wby-relative wby-flex wby-shrink-0 wby-overflow-hidd
     }
 });
 
-const AvatarBase = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-    ({ image, fallback, className, size, variant, ...props }, ref) => {
-        return (
-            <AvatarPrimitive.Root
-                ref={ref}
-                className={avatarVariants({ variant, size, className })}
-                {...props}
-            >
-                {image}
-                {fallback}
-            </AvatarPrimitive.Root>
-        );
-    }
-);
-
-AvatarBase.displayName = AvatarPrimitive.Root.displayName;
-
-const DecoratableAvatar = makeDecoratable("Avatar", AvatarBase);
-
-const Avatar = withStaticProps(DecoratableAvatar, {
+const AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {
+    return (
+        <AvatarPrimitive.Root
+            className={cn(avatarVariants({ variant, size }), className)}
+            {...props}
+        >
+            {image}
+            {fallback}
+        </AvatarPrimitive.Root>
+    );
+};
+
+const Avatar = withStaticProps(makeDecoratable("Avatar", AvatarBase), {
     Fallback: AvatarFallback,
     Image: AvatarImage
 });

packages/admin-ui/src/Avatar/components/AvatarFallback.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn, makeDecoratable } from "~/utils";
+
+type AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;
+
+const AvatarFallbackBase = ({ className, ...props }: AvatarFallbackProps) => (
+    <AvatarPrimitive.Fallback
+        className={cn(
+            "wby-flex wby-h-full wby-w-full wby-items-center wby-justify-center wby-rounded-sm",
+            className
+        )}
+        {...props}
+    />
+);
+
+const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase);
+
+export { AvatarFallback, type AvatarFallbackProps };

packages/admin-ui/src/Avatar/components/AvatarImage.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn, makeDecoratable } from "~/utils";
+
+type AvatarImageProps = AvatarPrimitive.AvatarImageProps;
+
+const AvatarImageBase = ({ className, ...props }: AvatarImageProps) => (
+    <AvatarPrimitive.Image className={cn("wby-aspect-square", className)} {...props} />
+);
+
+const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase);
+
+export { AvatarImage, type AvatarImageProps };

packages/admin-ui/src/Avatar/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./AvatarFallback";
+export * from "./AvatarImage";