@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.81

package/src/hooks/useLargeLayout.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+
+type LayoutListener = (isLargeLayout: boolean) => void;
+
+const breakpoints = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+    "3xl": 1920
+}
+
+// Global state and listeners array
+let isLargeLayoutGlobal = checkLargeLayout("lg"); // Default value
+const listeners: LayoutListener[] = [];
+
+// Utility to notify all listeners
+const notifyListeners = () => {
+    listeners.forEach(listener => listener(isLargeLayoutGlobal));
+};
+
+// Listen to resize events once, at a global level
+window.addEventListener("resize", () => {
+    const newIsLargeLayout = checkLargeLayout("lg");
+    if (newIsLargeLayout !== isLargeLayoutGlobal) {
+        isLargeLayoutGlobal = newIsLargeLayout;
+        notifyListeners();
+    }
+});
+
+export const useLargeLayout = () => {
+    const [isLargeLayout, setIsLargeLayout] = useState(isLargeLayoutGlobal);
+
+    useEffect(() => {
+        // Listener function to update component state
+        const listener: LayoutListener = (newIsLargeLayout) => {
+            setIsLargeLayout(newIsLargeLayout);
+        };
+
+        // Register listener
+        listeners.push(listener);
+
+        // Initial state
+        setIsLargeLayout(isLargeLayoutGlobal);
+
+        // Clean up by removing the listener
+        return () => {
+            const index = listeners.indexOf(listener);
+            if (index > -1) {
+                listeners.splice(index, 1);
+            }
+        };
+    }, []);
+
+    return isLargeLayout;
+};
+
+function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean {
+    return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
+}
+
+// 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);

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.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.tsx

@@ -0,0 +1,160 @@
+import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
+import { useEffect, useState } from "react";
+import { getNavigationEntriesFromPathInternal } from "../util/navigation_from_path";
+import { useFireCMSContext } from "./useFireCMSContext";
+
+/**
+ * @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 function resolveNavigationFrom<M extends Record<string, any>, UserType extends User>({
+                                                                                                path,
+                                                                                                context
+                                                                                            }: {
+    path: string,
+    context: FireCMSContext<UserType>
+}): Promise<ResolvedNavigationEntry<M>[]> {
+
+    const dataSource = context.dataSource;
+    const navigation = context.navigation;
+
+    if (!navigation) {
+        throw Error("Calling getNavigationFrom, but main navigation has not yet been initialised");
+    }
+
+    const navigationEntries = getNavigationEntriesFromPathInternal({
+        path,
+        collections: navigation.collections ?? []
+    });
+
+    const resultPromises: Promise<ResolvedNavigationEntry<any>>[] = navigationEntries
+        .map((entry) => {
+            if (entry.type === "collection") {
+                return Promise.resolve(entry);
+            } else if (entry.type === "entity") {
+                const collection = navigation.getCollection(entry.path, entry.entityId);
+                if (!collection) {
+                    throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
+                }
+                return dataSource.fetchEntity({
+                    path: entry.path,
+                    entityId: entry.entityId,
+                    collection
+                })
+                    .then((entity) => {
+                        if (!entity) return undefined;
+                        return { ...entry, entity };
+                    });
+            } else if (entry.type === "custom_view") {
+                return Promise.resolve(entry);
+            } else {
+                throw Error("Unmapped element in useEntitiesFromPath");
+            }
+        })
+        .filter(v => Boolean(v)) as Promise<ResolvedNavigationEntry<any>>[];
+
+    return Promise.all(resultPromises);
+}
+
+/**
+ * @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 function useResolvedNavigationFrom<M extends Record<string, any>, UserType extends User>(
+    {
+        path
+    }: NavigationFromProps): NavigationFrom<M> {
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [data, setData] = useState<ResolvedNavigationEntry<M>[] | undefined>();
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+
+    useEffect(() => {
+        const navigation = context.navigation;
+        if (navigation) {
+            setDataLoading(true);
+            setDataLoadingError(undefined);
+            resolveNavigationFrom<M, UserType>({ path, context })
+                .then((res) => {
+                    setData(res);
+                })
+                .catch((e) => setDataLoadingError(e))
+                .finally(() => setDataLoading(false));
+        }
+
+    }, [path, context]);
+
+    if (!context.navigation) {
+        return { dataLoading: true };
+    }
+
+    return { data, dataLoading, dataLoadingError };
+}

package/src/hooks/useSideDialogsController.tsx

@@ -0,0 +1,21 @@
+import { SideDialogsController } from "../types";
+import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
+import { useContext } from "react";
+
+/**
+ * Hook to retrieve the side dialogs' controller.
+ *
+ * This hook allows you to open and close side dialogs. This is the mechanism
+ * used when open a side entity dialog, or when selecting a reference.
+ *
+ * If you want to open a side entity dialog, you can use the {@link useSideEntityController}
+ * hook.
+ *
+ * If you want to select a reference, you can use the {@link useReferenceDialog}
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @group Hooks and utilities
+ */
+export const useSideDialogsController = (): SideDialogsController => useContext(SideDialogsControllerContext);

package/src/hooks/useSideEntityController.tsx

@@ -0,0 +1,15 @@
+import { SideEntityController } from "../types";
+import { useContext } from "react";
+import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
+
+/**
+ * Use this hook to retrieve an entity controller that allows you to open
+ * a side dialog to edit an entity.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see SideEntityController
+ * @group Hooks and utilities
+ */
+export const useSideEntityController = (): SideEntityController => useContext(SideEntityControllerContext);

package/src/hooks/useSnackbarController.tsx

@@ -0,0 +1,76 @@
+import { useSnackbar } from "notistack";
+import { useCallback, useMemo } from "react";
+
+/**
+ * Possible snackbar types
+ * @group Hooks and utilities
+ */
+export type SnackbarMessageType = "success" | "info" | "warning" | "error";
+
+/**
+ * Controller to display snackbars
+ * @group Hooks and utilities
+ */
+export interface SnackbarController {
+
+    /**
+     * Close the currently open snackbar
+     */
+    close: () => void;
+
+    /**
+     * Display a new snackbar. You need to specify the type and message.
+     * You can optionally specify a title
+     */
+    open: (props: {
+        type: SnackbarMessageType;
+        message: React.ReactNode;
+        autoHideDuration?: number;
+    }) => void;
+
+}
+
+/**
+ * Hook to retrieve the SnackbarContext.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see SnackbarController
+ * @group Hooks and utilities
+ */
+export const useSnackbarController = () => {
+
+    const {
+        enqueueSnackbar,
+        closeSnackbar
+    } = useSnackbar();
+
+    const open = useCallback((props: {
+        type: SnackbarMessageType;
+        // title?: string;
+        message: React.ReactNode;
+        autoHideDuration?: number;
+    }) => {
+        const {
+            type,
+            message,
+            autoHideDuration
+        } = props;
+        enqueueSnackbar({
+            message,
+            variant: type,
+            autoHideDuration
+        })
+    }, []);
+
+    const close = useCallback(() => {
+        closeSnackbar();
+    }, []);
+
+    return useMemo(() => ({
+        open,
+        close
+    }), [open, close]);
+
+};

package/src/hooks/useStorageSource.tsx

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

package/src/hooks/useUserConfigurationPersistence.tsx

@@ -0,0 +1,11 @@
+import { UserConfigurationPersistence } from "../types";
+import { useContext } from "react";
+import { UserConfigurationPersistenceContext } from "../contexts/UserConfigurationPersistenceContext";
+
+/**
+ * Use this controller to access the configuration that is stored externally,
+ * and not defined in code
+ *
+ * @group Hooks and utilities
+ */
+export const useUserConfigurationPersistence = (): UserConfigurationPersistence | undefined => useContext(UserConfigurationPersistenceContext);

package/src/hooks/useVerifyLicense.tsx

@@ -0,0 +1 @@
+// export

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./core";
+export * from "./types";
+export * from "./form";
+export * from "./preview";
+export * from "./hooks";
+export * from "./components";
+export * from "./util";
+export * from "./contexts";