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

package/src/hooks/useAuthController.d.ts

@@ -0,0 +1,11 @@
+import { AuthController, User } from "../types";
+/**
+ * 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 declare const useAuthController: <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>() => AuthControllerType;

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.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal hook to handle the browser title and icon
+ * @param name
+ * @param logo
+ */
+export declare function useBrowserTitleAndIcon(name: string, logo?: string): void;

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.d.ts

@@ -0,0 +1,57 @@
+import { MutableRefObject } 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 declare const useClipboard: (options?: UseClipboardProps) => useClipboardReturnType;

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.d.ts

@@ -0,0 +1,11 @@
+import { DialogsController } from "../types/dialogs_controller";
+/**
+ * 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 declare const useDialogsController: () => DialogsController;

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.d.ts

@@ -0,0 +1,12 @@
+import { AuthController, FireCMSContext, User } from "../types";
+export declare const FireCMSContextInstance: import("react").Context<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 declare const useFireCMSContext: <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>() => FireCMSContext<UserType, AuthControllerType>;

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.d.ts

@@ -0,0 +1 @@
+export declare const useLargeLayout: (breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") => boolean;

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.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 declare const useModeController: () => ModeController;

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);

package/src/hooks/useNavigationController.d.ts

@@ -0,0 +1,9 @@
+import { NavigationController } from "../types";
+/**
+ * Use this hook to get the navigation of the app.
+ * This controller provides the resolved collections for the CMS as well
+ * as utility methods.
+ *
+ * @group Hooks and utilities
+ */
+export declare const useNavigationController: () => NavigationController;

package/src/hooks/useNavigationController.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { NavigationController } from "../types";
+import { NavigationContext } from "../contexts/NavigationContext";
+
+/**
+ * Use this hook to get the navigation of the app.
+ * This controller provides the resolved collections for the CMS as well
+ * as utility methods.
+ *
+ * @group Hooks and utilities
+ */
+export const useNavigationController = (): NavigationController => useContext(NavigationContext);

package/src/hooks/useReferenceDialog.d.ts

@@ -0,0 +1,18 @@
+import { ReferenceSelectionInnerProps } from "../components";
+/**
+ * This hook is used to open a side dialog that allows the selection
+ * of entities under a given path.
+ * You can use it in custom views for selecting entities.
+ * You need to specify the path of the target collection at least.
+ * If your collection is not defined in your  top collection configuration
+ * (in your `FireCMS` component), you need to specify explicitly.
+ * This is the same hook used internally when a reference property is defined.
+ * @group Hooks and utilities
+ */
+export declare function useReferenceDialog<M extends Record<string, any>>(referenceDialogProps: Omit<ReferenceSelectionInnerProps<M>, "path"> & {
+    path?: string | false;
+    onClose?: () => void;
+}): {
+    open: () => void;
+    close: () => void;
+};

package/src/hooks/useReferenceDialog.tsx

@@ -0,0 +1,56 @@
+import { useSideDialogsController } from "./useSideDialogsController";
+import { ReferenceSelectionInner, ReferenceSelectionInnerProps } from "../components";
+import { useCallback } from "react";
+import { useNavigationController } from "./useNavigationController";
+
+/**
+ * This hook is used to open a side dialog that allows the selection
+ * of entities under a given path.
+ * You can use it in custom views for selecting entities.
+ * You need to specify the path of the target collection at least.
+ * If your collection is not defined in your  top collection configuration
+ * (in your `FireCMS` component), you need to specify explicitly.
+ * This is the same hook used internally when a reference property is defined.
+ * @group Hooks and utilities
+ */
+export function useReferenceDialog<M extends Record<string, any>>(referenceDialogProps: Omit<ReferenceSelectionInnerProps<M>, "path"> & {
+    path?: string | false;
+    onClose?: () => void;
+}): { open: () => void; close: () => void } {
+
+    const navigation = useNavigationController();
+    const sideDialogsController = useSideDialogsController();
+
+    const open = useCallback(() => {
+        if (referenceDialogProps.path) {
+            let usedCollection = referenceDialogProps.collection;
+            if (!usedCollection)
+                usedCollection = navigation.getCollection(referenceDialogProps.path);
+            if (!usedCollection)
+                throw Error("Not able to resolve the collection in useReferenceDialog");
+            sideDialogsController.open({
+                key: `reference_${referenceDialogProps.path}`,
+                component:
+                    <ReferenceSelectionInner
+                        collection={usedCollection}
+                        {...referenceDialogProps as ReferenceSelectionInnerProps<M>}/>,
+                width: "90vw",
+                onClose: () => {
+                    referenceDialogProps.onClose?.();
+                }
+            });
+        } else {
+            throw Error("useReferenceDialog: You are trying to open a reference dialog, but have not declared the `path`")
+        }
+    }, [navigation, referenceDialogProps, sideDialogsController]);
+
+    const close = useCallback(() => {
+        sideDialogsController.close();
+    }, [sideDialogsController]);
+
+    return {
+        open,
+        close
+    }
+
+}

package/src/hooks/useResolvedNavigationFrom.d.ts

@@ -0,0 +1,72 @@
+import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
+/**
+ * @see resolveNavigationFrom
+ * @group Hooks and utilities
+ */
+export type ResolvedNavigationEntry<M extends Record<string, any>> = ResolvedNavigationEntity<M> | ResolvedNavigationCollection<M> | ResolvedNavigationEntityCustom<M>;
+/**
+ * @see resolveNavigationFrom
+ * @group Hooks and utilities
+ */
+export interface ResolvedNavigationEntity<M extends Record<string, any>> {
+    type: "entity";
+    entity: Entity<M>;
+    entityId: string;
+    path: string;
+    parentCollection: EntityCollection<M>;
+}
+/**
+ * @see resolveNavigationFrom
+ * @group Hooks and utilities
+ */
+export interface ResolvedNavigationCollection<M extends Record<string, any>> {
+    type: "collection";
+    path: string;
+    collection: EntityCollection<M>;
+}
+/**
+ * @see resolveNavigationFrom
+ * @group Hooks and utilities
+ */
+interface ResolvedNavigationEntityCustom<M extends Record<string, any>> {
+    type: "custom_view";
+    path: string;
+    view: EntityCustomView<M>;
+}
+/**
+ * Use this function to retrieve an array of navigation entries (resolved
+ * collection, entity or entity custom_view) for the given path. You need to pass the app context
+ * that you receive in different callbacks, such as the save hooks.
+ *
+ * It will take into account the `navigation` provided at the `FireCMS` level.
+ *
+ * @param path
+ * @param context
+ * @group Hooks and utilities
+ */
+export declare function resolveNavigationFrom<M extends Record<string, any>, UserType extends User>({ path, context }: {
+    path: string;
+    context: FireCMSContext<UserType>;
+}): Promise<ResolvedNavigationEntry<M>[]>;
+/**
+ * @group Hooks and utilities
+ */
+export interface NavigationFromProps {
+    path: string;
+}
+/**
+ * @group Hooks and utilities
+ */
+export interface NavigationFrom<M extends Record<string, any>> {
+    data?: ResolvedNavigationEntry<M>[];
+    dataLoading: boolean;
+    dataLoadingError?: Error;
+}
+/**
+ * Use this hook to retrieve an array of navigation entries (resolved
+ * collection or entity) for the given path. You can use this hook
+ * in any React component that lives under `FireCMS`
+ * @group Hooks and utilities
+ */
+export declare function useResolvedNavigationFrom<M extends Record<string, any>, UserType extends User>({ path }: NavigationFromProps): NavigationFrom<M>;
+export {};