@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

package/src/hooks/data/useCollectionFetch.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useState } from "react";
+import { Entity, EntityCollection, FilterValues, FireCMSContext, User } from "../../types";
+import { useDataSource } from "./useDataSource";
+import { useNavigationController } from "../useNavigationController";
+import { useFireCMSContext } from "../useFireCMSContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface CollectionFetchProps<M extends Record<string, any>> {
+
+    /**
+     * Absolute collection path
+     */
+    path: string;
+
+    /**
+     * collection of the entity displayed by this collection
+     */
+    collection: EntityCollection<M>
+
+    /**
+     * Number of entities to fetch
+     */
+    itemCount?: number;
+
+    /**
+     * Filter the fetched data by the property
+     */
+    filterValues?: FilterValues<Extract<keyof M, string>>;
+
+    /**
+     * Sort the results by
+     */
+    sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
+
+    /**
+     * Search string
+     */
+    searchString?: string;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface CollectionFetchResult<M extends Record<string, any>> {
+    data: Entity<M>[];
+    dataLoading: boolean;
+    noMoreToLoad: boolean;
+    dataLoadingError?: Error;
+}
+
+/**
+ * This hook is used to fetch collections using a given collection
+ * @param path
+ * @param collection
+ * @param filterValues
+ * @param sortBy
+ * @param itemCount
+ * @param searchString
+ * @group Hooks and utilities
+ */
+export function useCollectionFetch<M extends Record<string, any>, UserType extends User>(
+    {
+        path: inputPath,
+        collection,
+        filterValues,
+        sortBy,
+        itemCount,
+        searchString
+    }: CollectionFetchProps<M>): CollectionFetchResult<M> {
+
+    const dataSource = useDataSource();
+    const navigationController = useNavigationController();
+
+    const path = navigationController.resolveAliasesFrom(inputPath);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [data, setData] = useState<Entity<M>[]>([]);
+
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
+
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            if (collection.callbacks?.onFetch) {
+                try {
+                    entities = await Promise.all(
+                        entities.map((entity) =>
+                            collection.callbacks!.onFetch!({
+                                collection,
+                                path,
+                                entity,
+                                context
+                            })));
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            setData(entities.map(e => ({
+                ...e,
+                // values: sanitizeData(e.values, resolvedCollection.properties)
+            })));
+            setNoMoreToLoad(!itemCount || entities.length < itemCount);
+        };
+
+        const onError = (error: Error) => {
+            console.error("ERROR", error);
+            setDataLoading(false);
+            setData([]);
+            setDataLoadingError(error);
+        };
+
+        if (dataSource.listenCollection) {
+            return dataSource.listenCollection<M>({
+                path,
+                collection,
+                onUpdate: onEntitiesUpdate,
+                onError,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            });
+        } else {
+            dataSource.fetchCollection<M>({
+                path,
+                collection,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            })
+                .then(onEntitiesUpdate)
+                .catch(onError);
+            return () => {
+            };
+        }
+    }, [path, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+
+    return {
+        data,
+        dataLoading,
+        dataLoadingError,
+        noMoreToLoad
+    };
+
+}

package/src/hooks/data/useDataOrder.ts

@@ -0,0 +1,26 @@
+import { Entity } from "../../types";
+
+export interface DataOrderProps<M extends Record<string, any>> {
+    data: Entity<M>[];
+    entitiesDisplayedFirst?: Entity<M>[];
+}
+
+/**
+ * This hook is used to have some entities at the beginning of data.
+ * @param path
+ * @param entitiesDisplayedFirst
+ * @group Hooks and utilities
+ */
+export function useDataOrder<M extends Record<string, any>>(
+    {
+        data,
+        entitiesDisplayedFirst
+    }: DataOrderProps<M>): Entity<M>[] {
+
+    if (!entitiesDisplayedFirst)
+        return data;
+
+    const displayedFirstId = new Set(entitiesDisplayedFirst.map((e) => e.id));
+    return [...entitiesDisplayedFirst, ...data.filter((e) => !displayedFirstId.has(e.id))];
+
+}

package/src/hooks/data/useDataSource.tsx

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { DataSource } from "../../types";
+import { DataSourceContext } from "../../contexts/DataSourceContext";
+
+/**
+ * Use this hook to get the datasource being used
+ * @group Hooks and utilities
+ */
+export const useDataSource = (): DataSource => useContext(DataSourceContext);

package/src/hooks/data/useEntityFetch.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { Entity, EntityCollection, FireCMSContext, User } from "../../types";
+import { useDataSource } from "./useDataSource";
+import { useNavigationController } from "../useNavigationController";
+import { useFireCMSContext } from "../useFireCMSContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface EntityFetchProps<M extends Record<string, any>> {
+    path: string;
+    entityId?: string;
+    collection: EntityCollection<M>;
+    useCache?: boolean;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface EntityFetchResult<M extends Record<string, any>> {
+    entity?: Entity<M>,
+    dataLoading: boolean,
+    dataLoadingError?: Error
+}
+
+const CACHE: Record<string, Entity<any> | undefined> = {};
+
+/**
+ * This hook is used to fetch an entity.
+ * It gives real time updates if the datasource supports it.
+ * @param path
+ * @param collection
+ * @param entityId
+ * @param useCache
+ * @group Hooks and utilities
+ */
+
+export function useEntityFetch<M extends Record<string, any>, UserType extends User>(
+    {
+        path: inputPath,
+        entityId,
+        collection,
+        useCache = false
+    }: EntityFetchProps<M>): EntityFetchResult<M> {
+
+    const dataSource = useDataSource();
+    const navigationController = useNavigationController();
+
+    const path = navigationController.resolveAliasesFrom(inputPath);
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [entity, setEntity] = useState<Entity<M> | undefined>();
+    const [dataLoading, setDataLoading] = useState<boolean>(true);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntityUpdate = async (updatedEntity: Entity<M> | undefined) => {
+            if (collection.callbacks?.onFetch && updatedEntity) {
+                try {
+                    updatedEntity = await collection.callbacks.onFetch({
+                        collection,
+                        path,
+                        entity: updatedEntity,
+                        context
+                    });
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            CACHE[`${path}/${entityId}`] = updatedEntity;
+            setEntity(updatedEntity);
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+        };
+
+        const onError = (error: Error) => {
+            console.error("ERROR fetching entity", error);
+            setDataLoading(false);
+            setEntity(undefined);
+            setDataLoadingError(error);
+        };
+
+        if (entityId && useCache && CACHE[`${path}/${entityId}`]) {
+            setEntity(CACHE[`${path}/${entityId}`]);
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            return () => {
+            };
+        } else if (entityId && path && collection) {
+            if (dataSource.listenEntity) {
+                return dataSource.listenEntity<M>({
+                    path,
+                    entityId,
+                    collection,
+                    onUpdate: onEntityUpdate,
+                    onError
+                });
+            } else {
+                dataSource.fetchEntity<M>({
+                    path,
+                    entityId,
+                    collection
+                })
+                    .then(onEntityUpdate)
+                    .catch(onError);
+                return () => {
+                };
+            }
+        }
+        // if no entityId is provided we do nothing
+        else {
+            onEntityUpdate(undefined);
+            return () => {
+            };
+        }
+    }, [entityId, path]);
+
+    return {
+        entity,
+        dataLoading,
+        dataLoadingError
+    };
+
+}

package/src/hooks/index.tsx

@@ -0,0 +1,23 @@
+export * from "./data/useDataSource";
+export * from "./data/useCollectionFetch";
+export * from "./data/useEntityFetch";
+export * from "./data/save";
+export * from "./data/delete";
+
+export * from "../form/useClearRestoreValue";
+export * from "./useNavigationController";
+
+export * from "./useResolvedNavigationFrom";
+
+export * from "./useStorageSource";
+export * from "./useAuthController";
+export * from "./useSideDialogsController";
+export * from "./useSideEntityController";
+export * from "./useFireCMSContext";
+export * from "./useSnackbarController";
+export * from "./useModeController";
+export * from "./useClipboard";
+export * from "./useLargeLayout";
+
+export * from "./useReferenceDialog";
+export * from "./useBrowserTitleAndIcon";

package/src/hooks/useAuthController.tsx

@@ -0,0 +1,14 @@
+import { AuthController, User } from "../types";
+import { useContext } from "react";
+import { AuthControllerContext } from "../contexts/AuthControllerContext";
+
+/**
+ * Hook to retrieve the AuthContext.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see AuthController
+ * @group Hooks and utilities
+ */
+export const useAuthController = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;

package/src/hooks/useBrowserTitleAndIcon.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+const fireCMSLogo = "data:image/png;base64,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\n";
+
+/**
+ * Internal hook to handle the browser title and icon
+ * @param name
+ * @param logo
+ */
+export function useBrowserTitleAndIcon(name: string, logo?: string) {
+    useEffect(() => {
+        if (document) {
+            document.title = `${name} - FireCMS`;
+            let link = document.querySelector("link[rel~='icon']");
+            if (!link) {
+                link = document.createElement("link");
+                // @ts-ignore
+                link.rel = "icon";
+                document.getElementsByTagName("head")[0].appendChild(link);
+            }
+            // @ts-ignore
+            link.href = logo ?? fireCMSLogo;
+        }
+    }, [name, logo]);
+}

package/src/hooks/useClipboard.tsx

@@ -0,0 +1,158 @@
+// FORKED FROM https://github.com/fayeed/use-clipboard
+
+import { MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseClipboardProps {
+    /**
+     * It's callback function that is called after the `copy` command
+     * is executed.
+     *
+     * @param text: The selected clipboard text.
+     */
+    onSuccess?: (text: string) => void;
+
+    /**
+     * Triggers when the hook encounters an error.
+     * If passed hook won't throw an error.
+     *
+     * @param error: cause of the error
+     */
+    onError?: (error: string) => void;
+
+    /**
+     * Disables the new clipboard API `navigator.clipboard` even if
+     * it is supported.
+     */
+    disableClipboardAPI?: boolean;
+
+    /**
+     * revert back the isCopied flag to false again if a value is set.
+     */
+    copiedDuration?: number;
+}
+
+export interface useClipboardReturnType {
+    /**
+     * Use ref to pull the text content from.
+     */
+    ref: MutableRefObject<any>;
+
+    /**
+     * Use it to perform the copy operation
+     */
+    copy: (text?: string) => void;
+
+    /**
+     * Use it to perform the cut operation
+     */
+    cut: () => void;
+
+    /**
+     * Indicates wheater the content was successfully copied or not.
+     */
+    isCoppied: boolean;
+
+    /**
+     * Current selected clipboard content.
+     */
+    clipboard: string;
+
+    /**
+     * Clears the user clipboard.
+     */
+    clearClipboard: () => void;
+
+    /**
+     * Check to see if the browser supports the new `navigator.clipboard` API.
+     */
+    isSupported: () => boolean;
+}
+
+export const useClipboard = (
+    options?: UseClipboardProps
+): useClipboardReturnType => {
+    const { onSuccess, onError, disableClipboardAPI = false, copiedDuration } =
+    options || {};
+    const ref = useRef<any>(null);
+    const [isCoppied, setIsCoppied] = useState(false);
+    const [clipboard, setClipbaord] = useState("");
+
+    useEffect(() => {
+        if (copiedDuration) setTimeout(() => setIsCoppied(false), copiedDuration);
+    }, [isCoppied]);
+
+    const isSupported = () => navigator.clipboard !== undefined;
+
+    const handleError = useCallback((error: string) => {
+        if (onError) onError(error);
+        else throw new Error(error);
+    }, [onError]);
+
+    const handleSuccess = useCallback((text: string) => {
+        if (onSuccess) onSuccess(text);
+        setIsCoppied(true);
+        setClipbaord(text);
+    }, [onSuccess]);
+
+    const copyToClipboard = useCallback((text: string) => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => handleSuccess(text))
+            .catch((err) => {
+                handleError(err);
+                setIsCoppied(false);
+            });
+    }, [handleError, handleSuccess]);
+
+    const clearClipboard = () => {
+        if (isSupported()) {
+            navigator.clipboard.writeText("");
+        }
+    };
+
+    const copy = (text?: string) =>
+        action("copy", typeof text === "object" ? undefined : text);
+
+    const cut = () => action("cut");
+
+    const action = useCallback(
+        (operation = "copy", text?: string) => {
+            const element = ref.current as HTMLElement;
+
+            const isInput =
+                element &&
+                (element.tagName === "INPUT" || element.tagName === "TEXTAREA");
+
+            const input = ref.current as HTMLInputElement;
+
+            if (isSupported() && !disableClipboardAPI) {
+                if (text) {
+                    copyToClipboard(text);
+                } else if (element) {
+                    if (isInput) {
+                        copyToClipboard(input.value);
+
+                        if (operation === "cut") {
+                            input.value = "";
+                        }
+                    } else {
+                        copyToClipboard(element.innerText);
+                    }
+                } else {
+                    handleError("Both the ref & text were undefined");
+                }
+            }
+        },
+        [disableClipboardAPI, copyToClipboard, handleError]
+    );
+
+    return {
+        ref,
+        isCoppied,
+        clipboard,
+        clearClipboard,
+        isSupported,
+        copy,
+        cut
+    };
+};

package/src/hooks/useDialogsController.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { DialogsController } from "../types/dialogs_controller";
+import { DialogsControllerContext } from "../contexts/DialogsProvider";
+
+/**
+ * Use this hook to open a dialog imperatively.
+ * Alternatively, you can use dialogs declaratively using the `Dialog` component.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @group Hooks and utilities
+ */
+export const useDialogsController = (): DialogsController => useContext(DialogsControllerContext);

package/src/hooks/useFireCMSContext.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext } from "react";
+import { AuthController, FireCMSContext, User } from "../types";
+import { useAuthController } from "./useAuthController";
+import { useSideDialogsController } from "./useSideDialogsController";
+import { useNavigationController } from "./useNavigationController";
+import { useSideEntityController } from "./useSideEntityController";
+import { useDataSource } from "./data/useDataSource";
+import { useStorageSource } from "./useStorageSource";
+import { useSnackbarController } from "./useSnackbarController";
+import { useUserConfigurationPersistence } from "./useUserConfigurationPersistence";
+import { useDialogsController } from "./useDialogsController";
+
+export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({});
+
+/**
+ * Hook to retrieve the {@link FireCMSContext}.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS` component.
+ *
+ * @see FireCMSContext
+ * @group Hooks and utilities
+ */
+export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+
+    const partialContext = useContext(FireCMSContextInstance) as FireCMSContext<UserType, AuthControllerType>;
+    const authController = useAuthController<UserType, AuthControllerType>();
+    const sideDialogsController = useSideDialogsController();
+    const sideEntityController = useSideEntityController();
+    const navigation = useNavigationController();
+    const dataSource = useDataSource();
+    const storageSource = useStorageSource();
+    const snackbarController = useSnackbarController();
+    const userConfigPersistence = useUserConfigurationPersistence();
+    const dialogsController = useDialogsController();
+
+    return {
+        ...partialContext,
+        authController,
+        sideDialogsController,
+        sideEntityController,
+        navigation,
+        dataSource,
+        storageSource,
+        snackbarController,
+        userConfigPersistence,
+        dialogsController
+    }
+
+};

package/src/hooks/useLargeLayout.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+const breakpoints = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+    "3xl": 1920
+}
+export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
+    const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
+            setIsLargeLayout(matched);
+        };
+
+        // Set initial state
+        handleResize();
+
+        // Set up event listener for resize events
+        window.addEventListener("resize", handleResize);
+
+        // Clean up event listener when component unmounts
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+
+    return isLargeLayout;
+};

package/src/hooks/useModeController.tsx

@@ -0,0 +1,24 @@
+import { ModeControllerContext } from "../contexts/ModeController";
+import { useContext } from "react";
+
+/**
+ * Use this controller to change color mode
+ * @group Hooks and utilities
+ */
+export interface ModeController {
+    mode: "light" | "dark";
+    setMode: (mode: "light" | "dark") => void;
+    toggleMode: () => void;
+}
+
+/**
+ * Hook to retrieve the current mode ("light" | "dark"), and `setMode`
+ * or `toggle` functions to change it.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see ModeController
+ * @group Hooks and utilities
+ */
+export const useModeController = () => useContext(ModeControllerContext);