@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/admin/index.ts

@@ -0,0 +1,3 @@
+export * from "./UsersView";
+export * from "./RolesView";
+export * from "./RoleChip";

package/src/components/app/AppBar.tsx

@@ -0,0 +1,17 @@
+import { DefaultAppBar, DefaultAppBarProps } from "../DefaultAppBar";
+/**
+ * This component renders the main app bar of Rebase.
+ */
+export function AppBar({
+    children,
+    ...props
+}: {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+} & DefaultAppBarProps) {
+    const usedChildren = children ?? <DefaultAppBar {...props}/>;
+    return <>{usedChildren}</>;
+}
+
+AppBar.componentType = "AppBar";

package/src/components/app/Drawer.tsx

@@ -0,0 +1,30 @@
+import { DefaultDrawer } from "../DefaultDrawer";
+
+/**
+ * This component is in charge of rendering the drawer.
+ * If you add this component under your {@link Scaffold}, it will be rendered
+ * as a drawer, and the open and close functionality will be handled automatically.
+ * If you want to customise the drawer, you can create your own component and pass it as a child.
+ * For custom drawers, you can use the {@link useApp} to open and close the drawer.
+ *
+ */
+export function Drawer({
+                           children,
+                           title,
+                           logo,
+                           logoDestination,
+                           className,
+                           style
+                       }: {
+    children?: React.ReactNode,
+    title?: React.ReactNode,
+    logo?: string,
+    logoDestination?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} className={className} style={style}/>;
+    return <>{usedChildren}</>;
+}
+
+Drawer.componentType = "Drawer";

package/src/components/app/Scaffold.tsx

@@ -0,0 +1,242 @@
+import React, { PropsWithChildren, useCallback, useMemo } from "react";
+import { cls, defaultBorderMixin, IconButton, Sheet, Tooltip } from "@rebasepro/ui";
+import { ChevronLeftIcon, MenuIcon } from "lucide-react";
+import { deepEqual as equal } from "fast-equals"
+
+import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { AppContext } from "./useApp";
+
+export const DRAWER_WIDTH = 280;
+
+/**
+ * @group Core
+ */
+export interface ScaffoldProps {
+
+    /**
+     * Open the drawer on hover
+     */
+    autoOpenDrawer?: boolean;
+
+    /**
+     * Logo to be displayed in the top bar and drawer.
+     * Note that this has no effect if you are using a custom AppBar or Drawer.
+     */
+    logo?: string;
+
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+}
+
+/**
+ * This view acts as a scaffold for Rebase.
+ *
+ * It is in charge of displaying the navigation drawer, top bar and main
+ * collection views.
+ * This component needs a parent {@link Rebase}
+ *
+ * @param props
+
+ * @group Core
+ */
+export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
+    function Scaffold(props: PropsWithChildren<ScaffoldProps>) {
+
+        const {
+            children,
+            autoOpenDrawer,
+            logo,
+            className,
+            style,
+            padding = true
+        } = props;
+
+        const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
+        if (drawerChildren.length > 1) {
+            throw Error("Only one Drawer component is allowed in Scaffold");
+        }
+        const appBarChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "AppBar");
+        if (appBarChildren.length > 1) {
+            throw Error("Only one AppBar component is allowed in Scaffold");
+        }
+        const otherChildren = React.Children.toArray(children)
+            .filter((child: any) => child.type.componentType !== "Drawer" && child.type.componentType !== "AppBar");
+        const includeDrawer = drawerChildren.length > 0;
+        const largeLayout = useLargeLayout();
+
+        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [onHover, setOnHover] = React.useState(false);
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
+        const handleDrawerClose = useCallback(() => {
+            setDrawerOpen(false);
+        }, []);
+
+        const computedDrawerOpen: boolean = drawerOpen;
+        const computedDrawerHovered = Boolean(largeLayout && onHover);
+
+        const adminModeController = useAdminModeController();
+        const isStudioDark = adminModeController.mode === "studio";
+
+
+        const hasAppBar = Boolean(appBarChildren.length > 0);
+        const appContextValue = useMemo(() => ({
+            hasDrawer: Boolean(includeDrawer),
+            drawerOpen: computedDrawerOpen,
+            drawerHovered: computedDrawerHovered,
+            openDrawer: handleDrawerOpen,
+            closeDrawer: handleDrawerClose,
+            closeHover: setOnHoverFalse,
+            logo
+        }), [includeDrawer, computedDrawerOpen, computedDrawerHovered, handleDrawerOpen, handleDrawerClose, setOnHoverFalse, logo]);
+
+        return (
+            <AppContext.Provider value={appContextValue}>
+                <div
+                    className={cls("flex h-screen w-screen overflow-hidden",
+                        "bg-surface-50 dark:bg-surface-900",
+                        "text-surface-900 dark:text-white", className)}
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh",
+                        ...style
+                    }}>
+                    {appBarChildren}
+
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={drawerOpen}
+                        hovered={onHover}
+                        isStudioDark={isStudioDark}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawerChildren}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col grow overflow-auto">
+
+                        {hasAppBar && <DrawerHeader/>}
+
+                        <div
+                            className={cls(defaultBorderMixin, "bg-white dark:bg-surface-800", "grow overflow-auto m-0", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-2 lg:mb-2 lg:rounded-lg lg:border-t lg:border-x lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding
+                            })}>
+
+                            <ErrorBoundary>
+                                {otherChildren}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </AppContext.Provider>
+        );
+    },
+    equal
+)
+
+const DrawerHeader = () => {
+    return (
+        <div className="flex flex-col min-h-16"></div>
+    );
+};
+
+function DrawerWrapper(props: {
+    children: React.ReactNode,
+    displayed: boolean,
+    open: boolean,
+    logo?: string,
+    hovered: boolean,
+    isStudioDark: boolean,
+    setDrawerOpen: (open: boolean) => void,
+    onMouseEnter: () => void,
+    onMouseMove: () => void,
+    onMouseLeave: () => void
+}) {
+
+    const layoutWidth = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const visualWidth = !props.displayed ? 0 : ((props.open || props.hovered) ? DRAWER_WIDTH : 72);
+
+    const isFloating = props.hovered && !props.open;
+    const darkBg = "dark:bg-surface-900";
+    const darkBgFloating = "dark:bg-surface-900";
+    const { t } = useTranslation();
+
+    const innerDrawer = <div
+        className={cls("h-full no-scrollbar overflow-y-auto overflow-x-clip", defaultBorderMixin,
+            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-2xl border-r` : `relative bg-surface-50 ${darkBg}`)}
+        style={{
+            width: visualWidth,
+            transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+        }}
+    >
+
+        <div className={"flex flex-col h-full"}>
+            {props.children}
+        </div>
+
+    </div>;
+
+    const largeLayout = useLargeLayout();
+    if (!largeLayout) {
+        if (!props.displayed)
+            return null;
+        return <>
+            <IconButton
+                color="inherit"
+                aria-label={t("open_menu")}
+                onClick={() => props.setDrawerOpen(true)}
+                className="absolute sm:top-2 sm:left-4 top-1 left-2"
+            >
+                <MenuIcon/>
+            </IconButton>
+            <Sheet side={"left"}
+                transparent={true}
+                open={props.open}
+                onOpenChange={props.setDrawerOpen}
+                title={t("navigation_drawer")}
+                overlayClassName={"bg-white/80 dark:bg-surface-900/80"}
+            >
+                {innerDrawer}
+            </Sheet>
+        </>;
+    }
+
+    return (
+        <div
+            className="z-20 relative flex-shrink-0 overflow-visible"
+            onMouseEnter={props.onMouseEnter}
+            onMouseMove={props.onMouseMove}
+            onMouseLeave={props.onMouseLeave}
+            style={{
+                width: layoutWidth,
+                minWidth: layoutWidth,
+                transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            }}>
+
+            {innerDrawer}
+
+        </div>
+    );
+}

package/src/components/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawer";
+export * from "./AppBar";
+export * from "./Scaffold";
+export * from "./useApp";

package/src/components/app/useApp.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * This context represents the state of the app in terms of layout.
+ * @group Core
+ */
+export type AppState = {
+    hasDrawer: boolean,
+    drawerHovered: boolean,
+    drawerOpen: boolean,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    closeHover: () => void,
+    autoOpenDrawer?: boolean,
+    logo?: string
+}
+
+export const AppContext = React.createContext<AppState>({
+    hasDrawer: false,
+    drawerHovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    closeHover: () => {
+        throw new Error("closeHover not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useApp() {
+    return React.useContext(AppContext);
+}

package/src/components/common/default_entity_actions.tsx

@@ -0,0 +1,156 @@
+import { CopyIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { iconSize } from "@rebasepro/ui";
+import type { EntityAction } from "@rebasepro/types";
+;
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { addRecentId } from "../EntityCollectionView/utils";
+import { navigateToEntity } from "../../util/navigation_utils";
+import { resolveDefaultSelectedView } from "@rebasepro/common";
+
+export const editEntityAction: EntityAction = {
+    icon: <PencilIcon size={iconSize.smallest}/>,
+    key: "edit",
+    name: "Edit",
+    collapsed: false,
+    isEnabled: ({ entity }) => Boolean(entity),
+    onClick({
+        entity,
+        collection,
+        path,
+        context,
+        sideEntityController,
+        highlightEntity,
+        unhighlightEntity,
+        openEntityMode
+    }): Promise<void> {
+
+        if (!entity) {
+            throw new Error("INTERNAL: editEntityAction: Entity is undefined");
+        }
+
+        if (!sideEntityController) {
+            throw new Error("INTERNAL: editEntityAction: sideEntityController is undefined");
+        }
+
+        highlightEntity?.(entity);
+
+        context.analyticsController?.onAnalyticsEvent?.("entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+
+        if (collection) {
+            addRecentId(collection.slug, entity.id);
+        }
+
+        const newFullIdPath = path ?? collection?.slug ?? entity.path;
+        const defaultSelectedView = resolveDefaultSelectedView(
+            collection ? collection.defaultSelectedView : undefined,
+            {
+                status: "existing",
+                entityId: entity.id
+            }
+        );
+        navigateToEntity({
+            openEntityMode,
+            collection,
+            entityId: entity.id,
+            path: newFullIdPath,
+            sideEntityController,
+            onClose: () => unhighlightEntity?.(entity),
+            navigation: context.urlController!,
+            selectedTab: defaultSelectedView
+        });
+
+        return Promise.resolve(undefined);
+    }
+}
+
+export const copyEntityAction: EntityAction = {
+    icon: <CopyIcon size={iconSize.smallest}/>,
+    name: "Copy",
+    key: "copy",
+    isEnabled: ({ entity }) => Boolean(entity),
+    onClick({
+        entity,
+        collection,
+        context,
+        path,
+        sideEntityController,
+        highlightEntity,
+        unhighlightEntity,
+        openEntityMode
+    }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
+        }
+        if (!sideEntityController) {
+            throw new Error("INTERNAL: copyEntityAction: sideEntityController is undefined");
+        }
+        highlightEntity?.(entity);
+        context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+
+        const usedPath = path ?? collection?.slug ?? entity.path;
+        navigateToEntity({
+            openEntityMode,
+            collection,
+            entityId: entity.id,
+            path: usedPath,
+            copy: true,
+            sideEntityController,
+            onClose: () => unhighlightEntity?.(entity),
+            navigation: context.urlController!
+        });
+
+        return Promise.resolve(undefined);
+    }
+}
+
+export const deleteEntityAction: EntityAction = {
+    icon: <Trash2Icon size={iconSize.smallest}/>,
+    name: "Delete",
+    key: "delete",
+    isEnabled: ({ entity }) => Boolean(entity),
+    onClick({
+        entity,
+        path,
+        collection,
+        context,
+        selectionController,
+        onCollectionChange,
+        navigateBack
+    }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+        }
+        if (!context.dialogsController) {
+            throw new Error("INTERNAL: deleteEntityAction: context.dialogsController is undefined");
+        }
+        const { closeDialog } = context.dialogsController.open({
+            key: "delete_entity_dialog_" + entity.id,
+            Component: ({ open }) => {
+                if (!collection || !path)
+                    throw new Error("deleteEntityAction: Collection is undefined");
+                return <DeleteEntityDialog
+                    entityOrEntitiesToDelete={entity}
+                    path={path}
+                    collection={collection}
+                    callbacks={collection.callbacks}
+                    open={open}
+                    onEntityDelete={() => {
+                        context.analyticsController?.onAnalyticsEvent?.("single_entity_deleted", {
+                            path
+                        });
+                        selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
+                        onCollectionChange?.();
+                        navigateBack?.();
+                    }}
+                    onClose={closeDialog}/>;
+            }
+        })
+        return Promise.resolve(undefined);
+    }
+}

package/src/components/common/index.ts

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