@rebasepro/firebase 0.0.1-canary.2 → 0.0.1-canary.eb08332

package/src/components/RebaseFirebaseApp.tsx

@@ -2,27 +2,34 @@ import React from "react";
 import { GoogleAuthProvider } from "@firebase/auth";
 
 import {
-    AppBar,
-    CircularProgressCenter,
-    Drawer,
     Rebase,
-    RebaseRoute,
     ModeControllerProvider,
-    PropertyConfig,
-    Scaffold,
-    SideDialogs,
     SnackbarProvider,
     useBrowserTitleAndIcon,
     useBuildLocalConfigurationPersistence,
     useBuildModeController,
     useBuildAdminModeController,
     AdminModeControllerProvider,
+    RebaseRoutes
+} from "@rebasepro/app";
+import {
+    AppBar,
+    Drawer,
+    Scaffold,
+    SideDialogs,
     useBuildCollectionRegistryController,
-    useBuildCMSUrlController,
+    useBuildUrlController,
     useBuildNavigationStateController,
-    useValidateAuthenticator
-} from "@rebasepro/core";
-import { Route, Routes, Outlet } from "react-router-dom";
+    CollectionRegistryContext,
+    UrlContext,
+    NavigationStateContext,
+    SidePanelProvider,
+    RebaseRoute
+} from "@rebasepro/admin";
+import { DEFAULT_DATA_SOURCE_KEY, Entity, PropertyConfig, RebaseContext } from "@rebasepro/types";
+import { CenteredView, CircularProgressCenter } from "@rebasepro/ui";
+import { buildRebaseData } from "@rebasepro/common";
+import { Route, Outlet, Navigate } from "react-router-dom";
 
 import { RebaseFirebaseAppProps } from "./RebaseFirebaseAppProps";
 import { FirebaseLoginView } from "./FirebaseLoginView";
@@ -30,10 +37,12 @@ import {
     useAppCheck,
     useFirebaseAuthController,
     useFirebaseStorageSource,
-    useFirestoreDataSource,
+    useFirestoreDriver,
     useInitialiseFirebase,
+    useBuildUserManagement,
+    useFirebaseAccessGate
 } from "../hooks";
-import { CenteredView } from "@rebasepro/ui";
+
 import { FirebaseAuthController } from "../types";
 
 const DEFAULT_SIGN_IN_OPTIONS = [
@@ -61,7 +70,7 @@ export function RebaseFirebaseApp({
     name,
     logo,
     logoDark,
-    authenticator,
+    accessGate,
     collections,
     views,
     adminViews,
@@ -81,8 +90,7 @@ export function RebaseFirebaseApp({
     autoOpenDrawer,
     firestoreIndexesBuilder,
     components,
-    localTextSearchEnabled = false,
-    userManagement
+    localTextSearchEnabled = false
 }: RebaseFirebaseAppProps) {
 
     /**
@@ -94,7 +102,8 @@ export function RebaseFirebaseApp({
         .map(pc => ({
             [pc.key]: pc
         }))
-        .reduce((a, b) => ({ ...a, ...b }), {});
+        .reduce((a, b) => ({ ...a,
+...b }), {});
 
     const {
         firebaseApp,
@@ -133,7 +142,7 @@ export function RebaseFirebaseApp({
      */
     const userConfigPersistence = useBuildLocalConfigurationPersistence();
 
-    const firestoreDelegate = useFirestoreDataSource({
+    const firestoreDelegate = useFirestoreDriver({
         firebaseApp,
         textSearchControllerBuilder: textSearchControllerBuilder,
         firestoreIndexesBuilder: firestoreIndexesBuilder,
@@ -148,16 +157,16 @@ export function RebaseFirebaseApp({
     });
 
     /**
-     * Validate authenticator
+     * Validate access gate
      */
     const {
         authLoading,
         canAccessMainView,
         notAllowedError
-    } = useValidateAuthenticator({
+    } = useFirebaseAccessGate({
         authController,
-        authenticator,
-        dataSource: firestoreDelegate,
+        accessGate,
+        data: buildRebaseData(firestoreDelegate),
         storageSource
     });
 
@@ -165,28 +174,33 @@ export function RebaseFirebaseApp({
         userConfigPersistence
     });
 
-    const cmsUrlController = useBuildCMSUrlController({
+    const urlController = useBuildUrlController({
         basePath: basePath ?? "/",
         baseCollectionPath: baseCollectionPath ?? "/c",
         collectionRegistryController
     });
 
+    const defaultUserManagement = useBuildUserManagement({
+        authController,
+        dataSourceDelegate: firestoreDelegate
+    });
+
+
     const navigationStateController = useBuildNavigationStateController({
         collections,
         views,
         adminViews,
         authController,
-        dataSource: firestoreDelegate,
+        data: buildRebaseData(firestoreDelegate),
         plugins,
         collectionRegistryController,
-        cmsUrlController,
-        adminMode: adminModeController.mode,
-        userManagement: userManagement as any
+        urlController,
+        adminMode: adminModeController.mode
     });
 
     if (firebaseConfigLoading || !firebaseApp || loading) {
         return <>
-            <CircularProgressCenter />
+            <CircularProgressCenter/>
         </>;
     }
 
@@ -199,17 +213,21 @@ export function RebaseFirebaseApp({
             <ModeControllerProvider value={modeController}>
                 <AdminModeControllerProvider value={adminModeController}>
 
-                    <Rebase
-                        authController={authController}
-                        collectionRegistryController={collectionRegistryController}
-                        cmsUrlController={cmsUrlController}
-                        navigationStateController={navigationStateController}
-                        userConfigPersistence={userConfigPersistence}
+                    <CollectionRegistryContext.Provider value={collectionRegistryController}>
+                        <UrlContext.Provider value={urlController}>
+                            <NavigationStateContext.Provider value={navigationStateController}>
+                                <Rebase
+                                    authController={authController}
+                                    userConfigPersistence={userConfigPersistence}
                         dateTimeFormat={dateTimeFormat}
-                        dataSource={firestoreDelegate}
+                        dataSources={[{
+                            key: DEFAULT_DATA_SOURCE_KEY,
+                            engine: "firestore",
+                            transport: "direct",
+                            driver: firestoreDelegate
+                        }]}
                         storageSource={storageSource}
-                        userManagement={userManagement}
-                        entityLinkBuilder={({ entity }) => `https://console.firebase.google.com/project/${firebaseApp.options.projectId}/firestore/data/${entity.path}/${entity.id}`}
+                        entityLinkBuilder={({ entity }: { entity: Entity<any> }) => `https://console.firebase.google.com/project/${firebaseApp.options.projectId}/firestore/data/${entity.path}/${entity.id}`}
                         locale={locale}
                         onAnalyticsEvent={onAnalyticsEvent}
                         plugins={plugins}
@@ -217,11 +235,11 @@ export function RebaseFirebaseApp({
                         {({
                             context,
                             loading
-                        }) => {
+                        }: { context: RebaseContext, loading: boolean }) => {
 
                             let component;
                             if (loading || authLoading) {
-                                component = <CircularProgressCenter size={"large"} />;
+                                component = <CircularProgressCenter size={"large"}/>;
                             } else {
                                 const usedLogo = modeController.mode === "dark" && logoDark ? logoDark : logo;
                                 if (!canAccessMainView) {
@@ -233,32 +251,40 @@ export function RebaseFirebaseApp({
                                             signInOptions={signInOptions ?? DEFAULT_SIGN_IN_OPTIONS}
                                             firebaseApp={firebaseApp}
                                             authController={authController}
-                                            notAllowedError={notAllowedError} />
+                                            notAllowedError={notAllowedError instanceof Error ? notAllowedError : typeof notAllowedError === "string" ? notAllowedError : undefined}/>
                                     );
                                 } else {
+                                    const firstCollectionEntry = navigationStateController.topLevelNavigation?.navigationEntries.find(e => e.type === "collection");
+                                    const fallbackRoute = firstCollectionEntry ? <Navigate to={urlController.buildUrlCollectionPath(firstCollectionEntry.id)} replace /> : <CenteredView>No home page or collections provided.</CenteredView>;
+
                                     component = (
-                                        <Routes>
-                                            <Route element={
-                                                <Scaffold
-                                                    logo={usedLogo}
-                                                    autoOpenDrawer={autoOpenDrawer}>
-                                                    <AppBar title={name} logo={usedLogo} />
-                                                    <Drawer />
-                                                    <Outlet />
-                                                    <SideDialogs />
-                                                </Scaffold>
-                                            }>
-                                                {components?.HomePage && <Route path="/" element={<components.HomePage />} />}
-                                                <Route path="/c/*" element={<RebaseRoute />} />
-                                            </Route>
-                                        </Routes>
+                                        <SidePanelProvider>
+                                            <RebaseRoutes>
+                                                <Route element={
+                                                    <Scaffold
+                                                        logo={usedLogo}
+                                                        autoOpenDrawer={autoOpenDrawer}>
+                                                        <AppBar title={name} logo={usedLogo}/>
+                                                        <Drawer/>
+                                                        <Outlet/>
+                                                        <SideDialogs/>
+                                                    </Scaffold>
+                                                }>
+                                                    <Route path="/" element={components?.HomePage ? <components.HomePage/> : fallbackRoute}/>
+                                                    <Route path="/c/*" element={<RebaseRoute/>}/>
+                                                </Route>
+                                            </RebaseRoutes>
+                                        </SidePanelProvider>
                                     );
                                 }
                             }
 
                             return component;
                         }}
-                    </Rebase>
+                                </Rebase>
+                            </NavigationStateContext.Provider>
+                        </UrlContext.Provider>
+                    </CollectionRegistryContext.Provider>
                 </AdminModeControllerProvider>
             </ModeControllerProvider>
         </SnackbarProvider>

package/src/components/RebaseFirebaseAppProps.tsx

@@ -1,17 +1,8 @@
 import React from "react";
 
-import {
-    Authenticator,
-    CMSAnalyticsEvent,
-    CMSView,
-    CMSViewsBuilder,
-    EntityCollection,
-    EntityCollectionsBuilder,
-    RebasePlugin,
-    Locale,
-    PropertyConfig
-} from "@rebasepro/core";
-import { UserManagementDelegate } from "@rebasepro/types";
+import { AnalyticsEvent, AppView, AppViewsBuilder, CollectionConfig, CollectionConfigsBuilder, RebasePlugin, Locale, PropertyConfig } from "@rebasepro/types";
+import { FirebaseAccessGate } from "../hooks/useFirebaseAccessGate";
+
 import { FirebaseApp } from "@firebase/app";
 import { FirebaseLoginViewProps } from "./FirebaseLoginView";
 import {
@@ -51,19 +42,19 @@ export type RebaseFirebaseAppProps = {
      * Each of the navigation entries in this field
      * generates an entry in the main menu.
      */
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: CollectionConfig[] | CollectionConfigsBuilder;
 
     /**
      * Custom additional views created by the developer, added to the main
      * navigation
      */
-    views?: CMSView[] | CMSViewsBuilder;
+    views?: AppView[] | AppViewsBuilder;
 
     /**
      * Custom additional views created by the developer, added to the admin
      * navigation
      */
-    adminViews?: CMSView[] | CMSViewsBuilder;
+    adminViews?: AppView[] | AppViewsBuilder;
 
     /**
      * Record of custom form fields to be used in the CMS.
@@ -74,12 +65,12 @@ export type RebaseFirebaseAppProps = {
 
     /**
      * Do the users need to log in to access the CMS.
-     * You can specify an Authenticator function to discriminate which users can
-     * access the CMS or not.
+     * You can specify a {@link FirebaseAccessGate} function to discriminate
+     * which users can access the CMS or not.
      * If not specified, authentication is enabled but no user restrictions
      * apply
      */
-    authenticator?: boolean | Authenticator<FirebaseUserWrapper>;
+    accessGate?: boolean | FirebaseAccessGate<FirebaseUserWrapper>;
 
     /**
      * List of sign in options that will be displayed in the login
@@ -146,7 +137,7 @@ export type RebaseFirebaseAppProps = {
     /**
      * Callback used to get analytics events from the CMS
      */
-    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
+    onAnalyticsEvent?: (event: AnalyticsEvent, data?: object) => void;
 
     /**
      * Use plugins to modify the behaviour of the CMS.
@@ -170,11 +161,6 @@ export type RebaseFirebaseAppProps = {
 
     components?: ComponentsRegistry;
 
-    /**
-     * Delegate for user and role management. Provides the admin views if specified.
-     */
-    userManagement?: UserManagementDelegate;
-
 };
 
 export type ComponentsRegistry = {

package/src/components/social_icons.tsx

@@ -2,8 +2,8 @@ export const googleIcon = (mode: "light" | "dark") => <>
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 64 64"
-        width={32}
-        height={32}
+        width={24}
+        height={24}
     >
         <linearGradient
             id="95yY7w43Oj6n2vH63j6HJb"
@@ -80,7 +80,7 @@ export const googleIcon = (mode: "light" | "dark") => <>
     </svg>
 </>;
 
-export const appleIcon = (mode: "light" | "dark") => <svg width={32} height={32}
+export const appleIcon = (mode: "light" | "dark") => <svg width={24} height={24}
                                                           viewBox="0 0 56 56"
                                                           style={{ transform: "scale(2.8)" }}
                                                           version="1.1"
@@ -97,8 +97,8 @@ export const githubIcon = (mode: "light" | "dark") => <svg
     fill={mode === "light" ? "#1c1e21" : "white"}
     role="img"
     viewBox="0 0 24 24"
-    width={28}
-    height={28}
+    width={24}
+    height={24}
     xmlns="http://www.w3.org/2000/svg">
     <path
         d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
@@ -107,7 +107,7 @@ export const githubIcon = (mode: "light" | "dark") => <svg
 
 export const facebookIcon = (mode: "light" | "dark") => <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={28} height={28}
+    width={24} height={24}
     viewBox="0 0 90 90">
     <g>
         <path
@@ -117,7 +117,7 @@ export const facebookIcon = (mode: "light" | "dark") => <svg
 </svg>;
 
 export const microsoftIcon = (mode: "light" | "dark") => <svg
-    xmlns="http://www.w3.org/2000/svg" width={28} height={28}
+    xmlns="http://www.w3.org/2000/svg" width={24} height={24}
     viewBox="0 0 480 480">
     <g>
         <path
@@ -127,7 +127,7 @@ export const microsoftIcon = (mode: "light" | "dark") => <svg
 </svg>;
 
 export const twitterIcon = (mode: "light" | "dark") => <svg
-    xmlns="http://www.w3.org/2000/svg" width={28} height={28}
+    xmlns="http://www.w3.org/2000/svg" width={24} height={24}
     viewBox="0 0 24 24">
     <path fill={mode === "light" ? "#00acee" : "white"}
           d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>

package/src/hooks/index.ts

@@ -2,6 +2,8 @@ export * from "./useFirebaseAuthController";
 export * from "./useFirebaseStorageSource";
 export * from "./useInitialiseFirebase";
 export * from "./useAppCheck";
-export * from "./useFirestoreDataSource";
+export * from "./useFirestoreDriver";
 export * from "./useFirebaseRealTimeDBDelegate";
 export * from "./useRecaptcha";
+export * from "./useBuildUserManagement";
+export * from "./useFirebaseAccessGate";

package/src/hooks/useAppCheck.ts

@@ -15,7 +15,7 @@ export interface InitializeAppCheckProps {
 export interface InitializeAppCheckResult {
     loading: boolean;
     appCheckVerified?: boolean;
-    error?: any;
+    error?: unknown;
 }
 
 /**
@@ -25,7 +25,7 @@ export interface InitializeAppCheckResult {
  */
 export function useAppCheck({
                                 firebaseApp,
-                                options,
+                                options
                             }: InitializeAppCheckProps): InitializeAppCheckResult {
     if (options?.debugToken) {
         Object.assign(window, {
@@ -35,7 +35,7 @@ export function useAppCheck({
 
     const [appCheckLoading, setAppCheckLoading] = React.useState<boolean>(false);
     const [appCheckVerified, setAppCheckVerified] = React.useState<boolean | undefined>(undefined);
-    const [error, setError] = React.useState<any>();
+    const [error, setError] = React.useState<unknown>();
 
     const initialCheck = useRef<boolean>(false);
 
@@ -51,9 +51,9 @@ export function useAppCheck({
                 setAppCheckVerified(true);
                 console.debug("App Check success.");
             }
-        } catch (e: any) {
+        } catch (e: unknown) {
             console.error("App Check error:", e);
-            setError(e.message);
+            setError(e instanceof Error ? e.message : String(e));
         }
     }, [options?.forceRefresh]);