@firecms/core 3.0.0-canary.25 → 3.0.0-canary.250

package/dist/util/plurals.d.ts

@@ -1,7 +1,6 @@
 /**
  * Returns the plural of an English word.
  *
- * @export
  * @param {string} word
  * @param {number} [amount]
  * @returns {string}
@@ -10,7 +9,6 @@ export declare function plural(word: string, amount?: number): string;
 /**
  * Returns the singular of an English word.
  *
- * @export
  * @param {string} word
  * @param {number} [amount]
  * @returns {string}

package/dist/util/property_utils.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperty } from "../types";
-export declare function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
+import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
+export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
 export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
-export declare function getIconForProperty(property: PropertyOrBuilder | ResolvedProperty, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
+export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
 export declare function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string;
 /**
  * Get a property in a property tree from a path like
@@ -11,7 +11,7 @@ export declare function getColorForProperty(property: PropertyOrBuilder, fields:
  * @param properties
  * @param path
  */
-export declare function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M>, path: string): PropertyOrBuilder<any, M> | undefined;
+export declare function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M> | ResolvedProperties, path: string): PropertyOrBuilder<any, M> | undefined;
 export declare function getResolvedPropertyInPath(properties: Record<string, ResolvedProperty>, path: string): ResolvedProperty | undefined;
 export declare function getBracketNotation(path: string): string;
 /**

package/dist/util/references.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
-export declare function getEntityPreviewKeys(targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
+import { AuthController, EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
+export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
 export declare function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): string | undefined;
 export declare function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined;

package/dist/util/resolutions.d.ts

@@ -1,58 +1,77 @@
-import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
-export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, fields }: {
+import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields, authController }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
-    entityId?: string | undefined;
-    values?: Partial<M> | undefined;
-    previousValues?: Partial<M> | undefined;
-    userConfigPersistence?: UserConfigurationPersistence | undefined;
-    fields?: Record<string, PropertyConfig> | undefined;
+    entityId?: string;
+    values?: Partial<EntityValues<M>>;
+    previousValues?: Partial<EntityValues<M>>;
+    userConfigPersistence?: UserConfigurationPersistence;
+    propertyConfigs?: Record<string, PropertyConfig>;
+    ignoreMissingFields?: boolean;
+    authController: AuthController;
 }) => ResolvedEntityCollection<M>;
 /**
  * Resolve property builders, enums and arrays.
  * @param propertyOrBuilder
  * @param propertyValue
- * @param values
  */
-export declare function resolveProperty<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyOrBuilder, propertyValue, fromBuilder, ...props }: {
+export declare function resolveProperty<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyOrBuilder, fromBuilder, ignoreMissingFields, ...props }: {
     propertyKey?: string;
     propertyOrBuilder: PropertyOrBuilder<T, M> | ResolvedProperty<T>;
-    propertyValue?: unknown;
     values?: Partial<M>;
     previousValues?: Partial<M>;
     path?: string;
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig<any>>;
+    propertyConfigs?: Record<string, PropertyConfig<any>>;
+    ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperty<T> | null;
-export declare function resolveArrayProperty<T extends any[], M>({ propertyKey, property, propertyValue, ...props }: {
+export declare function getArrayResolvedProperties<M>({ propertyKey, propertyValue, property, ...props }: {
+    propertyValue: any;
+    propertyKey?: string;
+    property: ArrayProperty<any> | ResolvedArrayProperty<any>;
+    ignoreMissingFields: boolean;
+    values?: Partial<M>;
+    previousValues?: Partial<M>;
+    path?: string;
+    entityId?: string;
+    index?: number;
+    fromBuilder?: boolean;
+    propertyConfigs?: Record<string, PropertyConfig>;
+    authController: AuthController;
+}): ResolvedProperty[];
+export declare function resolveArrayProperty<T extends any[], M>({ propertyKey, property, ignoreMissingFields, ...props }: {
     propertyKey?: string;
     property: ArrayProperty<T> | ResolvedArrayProperty<T>;
-    propertyValue: any;
     values?: Partial<M>;
     previousValues?: Partial<M>;
     path?: string;
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
+    ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedArrayProperty;
 /**
  * Resolve enums and arrays for properties
  * @param properties
  * @param value
  */
-export declare function resolveProperties<M extends Record<string, any>>({ properties, propertyValue, ...props }: {
+export declare function resolveProperties<M extends Record<string, any>>({ propertyKey, properties, ignoreMissingFields, ...props }: {
+    propertyKey?: string;
     properties: PropertiesOrBuilders<M>;
-    propertyValue: unknown;
     values?: Partial<M>;
     previousValues?: Partial<M>;
     path?: string;
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
+    ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperties<M>;
 /**
  * Resolve enum aliases for a string or number property
@@ -62,3 +81,8 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
+export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string, canEdit?: boolean): {
+    resolvedEntityViews: EntityCustomView<M>[];
+    selectedEntityView: EntityCustomView<M> | undefined;
+    selectedSecondaryForm: EntityCustomView<M> | undefined;
+};

package/dist/util/storage.d.ts

@@ -1,3 +1,24 @@
 import { EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, UploadedFileContext } from "../types";
-export declare function resolveFilenameString<M extends object>(input: string | ((context: UploadedFileContext) => Promise<string> | string), storage: StorageConfig, values: EntityValues<M>, entityId: string, path: string, property: ResolvedStringProperty | ResolvedArrayProperty<string[]>, file: File, propertyKey: string): Promise<string>;
-export declare function resolveStoragePathString<M extends object>(input: string | ((context: UploadedFileContext) => string), storage: StorageConfig, values: EntityValues<M>, entityId: string, path: string, property: ResolvedStringProperty | ResolvedArrayProperty<string[]>, file: File, propertyKey: string): string;
+interface ResolveFilenameStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => (Promise<string> | string));
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    file: File;
+    propertyKey: string;
+}
+export declare function resolveStorageFilenameString<M extends object>({ input, storage, values, entityId, path, property, file, propertyKey }: ResolveFilenameStringParams<M>): Promise<string>;
+interface ResolveStoragePathStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => string);
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    file: File;
+    propertyKey: string;
+}
+export declare function resolveStoragePathString<M extends object>({ input, storage, values, entityId, path, property, file, propertyKey }: ResolveStoragePathStringParams<M>): string;
+export {};

package/dist/util/useStorageUploadController.d.ts

@@ -1,4 +1,4 @@
-import { EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource } from "../types";
+import { ArrayProperty, EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource, StringProperty } from "../types";
 import { PreviewSize } from "../preview";
 /**
  * Internal representation of an item in the storage
@@ -18,9 +18,9 @@ export declare function useStorageUploadController<M extends object>({ entityId,
     entityId: string;
     entityValues: EntityValues<M>;
     value: string | string[] | null;
-    path: string;
+    path?: string;
     propertyKey: string;
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>;
     storageSource: StorageSource;
     disabled: boolean;
     onChange: (value: string | string[] | null) => void;

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.25",
+  "version": "3.0.0-canary.250",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
   },
   "author": "FireCMS",
   "license": "MIT",
-  "repository": "git@github.com:FireCMSco/firecms.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firecmsco/firecms.git",
+    "directory": "packages/firecms_core"
+  },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -46,77 +50,89 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-canary.25",
-    "@firecms/ui": "^3.0.0-canary.25",
-    "@fontsource/ibm-plex-mono": "^5.0.12",
-    "@fontsource/roboto": "^5.0.12",
-    "@hello-pangea/dnd": "^16.5.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@firecms/editor": "^3.0.0-canary.250",
+    "@firecms/formex": "^3.0.0-canary.250",
+    "@firecms/ui": "^3.0.0-canary.250",
+    "@radix-ui/react-portal": "^1.1.3",
+    "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "fuse.js": "^7.0.0",
     "history": "^5.3.0",
-    "js-search": "^2.0.1",
     "markdown-it": "^14.1.0",
-    "notistack": "^3.0.1",
+    "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
+    "prism-react-renderer": "^2.4.1",
+    "react-dropzone": "^14.3.5",
+    "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
-    "react-markdown-editor-lite": "^1.3.4",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.1",
-    "react-window": "^1.8.10",
-    "typeface-rubik": "^1.1.13",
+    "react-window": "^1.8.11",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "firebase": "^10.5.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.17.14",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.9.0",
+    "eslint-plugin-react-compiler": "beta",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0",
-    "ts-jest": "^29.1.2",
+    "react-router": "^6.28.2",
+    "react-router-dom": "^6.28.2",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tsd": "^0.30.7",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
+    "tsd": "^0.31.2",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "e6b15f289c392d0b006aa459d4f5d06e7ca41544",
+  "gitHead": "946e1f4f5695190e903af3a71dd7111accfc1efa",
   "publishConfig": {
     "access": "public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+    }
   }
 }

package/src/app/AppBar.tsx

@@ -0,0 +1,18 @@
+import { DefaultAppBar, DefaultAppBarProps } from "../core/DefaultAppBar";
+
+/**
+ * This component renders the main app bar of FireCMS.
+ */
+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/app/Drawer.tsx

@@ -0,0 +1,24 @@
+import { DefaultDrawer } from "../core";
+
+/**
+ * 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,
+                           className,
+                           style
+                       }: {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    const usedChildren = children ?? <DefaultDrawer className={className} style={style}/>;
+    return <>{usedChildren}</>;
+}
+
+Drawer.componentType = "Drawer";

package/src/app/Scaffold.tsx

@@ -0,0 +1,253 @@
+import React, { PropsWithChildren, useCallback } from "react";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import equal from "react-fast-compare"
+import { useLargeLayout } from "../hooks";
+import { ErrorBoundary } from "../components";
+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 FireCMS.
+ *
+ * It is in charge of displaying the navigation drawer, top bar and main
+ * collection views.
+ * This component needs a parent {@link FireCMS}
+ *
+ * @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 || Boolean(largeLayout && autoOpenDrawer && onHover);
+
+        const hasAppBar = Boolean(appBarChildren.length > 0);
+        return (
+            <AppContext.Provider value={{
+                logo,
+                hasDrawer: includeDrawer,
+                drawerHovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className={cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", 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={computedDrawerOpen}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawerChildren}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+
+                        {hasAppBar && <DrawerHeader/>}
+
+                        <div
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border 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,
+    setDrawerOpen: (open: boolean) => void,
+    onMouseEnter: () => void,
+    onMouseMove: () => void,
+    onMouseLeave: () => void
+}) {
+
+    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const innerDrawer = <div
+        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        style={{
+            width,
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+        }}
+    >
+
+        {!props.open && props.displayed && (
+            <Tooltip title="Open menu"
+                     side="right"
+                     sideOffset={12}
+                     asChild={true}>
+                <div
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open menu"
+                        onClick={() => props.setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </div>
+            </Tooltip>
+        )}
+
+        <div
+            className={`z-20 absolute right-0 top-4 ${
+                props.open ? "opacity-100" : "opacity-0 invisible"
+            } transition-opacity duration-200 ease-in-out`}>
+            <IconButton
+                aria-label="Close drawer"
+                onClick={() => props.setDrawerOpen(false)}
+            >
+                <ChevronLeftIcon/>
+            </IconButton>
+        </div>
+
+        <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="Open drawer"
+                onClick={() => props.setDrawerOpen(true)}
+                size="large"
+                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={"Navigation drawer"}
+                   overlayClassName={"bg-white bg-opacity-80"}
+            >
+                {innerDrawer}
+            </Sheet>
+        </>;
+    }
+
+    return (
+        <div
+            className="z-20 relative"
+            onMouseEnter={props.onMouseEnter}
+            onMouseMove={props.onMouseMove}
+            onMouseLeave={props.onMouseLeave}
+            style={{
+                width,
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            }}>
+
+            {innerDrawer}
+
+        </div>
+    );
+}

package/src/app/index.ts

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