@rebasepro/client-firebase 0.0.1-canary.4d4fb3e

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Rebase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+# Rebase Firebase
+
+This library provides a set of utilities to integrate [Rebase](https://rebase.pro) with 
+[Firebase](https://firebase.google.com/).

package/dist/components/FirebaseLoginView.d.ts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from "react";
+import { FirebaseApp } from "@firebase/app";
+import { FirebaseAuthController, FirebaseSignInOption, FirebaseSignInProvider } from "../index";
+/**
+ * @category Firebase
+ */
+export interface FirebaseLoginViewProps {
+    /**
+     * Firebase app this login view is accessing
+     */
+    firebaseApp: FirebaseApp;
+    /**
+     * Delegate holding the auth state
+     */
+    authController: FirebaseAuthController;
+    /**
+     * Path to the logo displayed in the login screen
+     */
+    logo?: string;
+    /**
+     * Enable the skip login button
+     */
+    allowSkipLogin?: boolean;
+    /**
+     * Each of the sign in options that get a custom button
+     */
+    signInOptions: Array<FirebaseSignInProvider | FirebaseSignInOption>;
+    /**
+     * Disable the login buttons
+     */
+    disabled?: boolean;
+    /**
+     * Prevent users from creating new users in when the `signInOptions` value
+     * is `password`. This does not apply to the rest of login providers.
+     */
+    disableSignupScreen?: boolean;
+    /**
+     * Prevent users from resetting their password when the `signInOptions` value
+     * is `password`. This does not apply to the rest of login providers.
+     */
+    disableResetPassword?: boolean;
+    /**
+     * Display this component when no user is found a user tries to log in
+     * when the `signInOptions` value is `password`.
+     */
+    noUserComponent?: ReactNode;
+    /**
+     * Include additional components in the login view, on top of the login buttons.
+     */
+    children?: ReactNode;
+    /**
+     * Display this component bellow the sign-in buttons.
+     * Useful for adding checkboxes for privacy and terms and conditions.
+     * You may want to use it in conjunction with the `disabled` prop.
+     */
+    additionalComponent?: ReactNode;
+    notAllowedError?: any;
+    className?: string;
+}
+/**
+ * Use this component to render a login view, that updates
+ * the state of the {@link FirebaseAuthController} based on the result
+
+ * @category Firebase
+ */
+export declare function FirebaseLoginView({ children, allowSkipLogin, logo, signInOptions, firebaseApp, authController, noUserComponent, disableSignupScreen, disableResetPassword, disabled, additionalComponent, notAllowedError, className }: FirebaseLoginViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginButton({ icon, onClick, text, disabled }: {
+    icon: React.ReactNode;
+    onClick: () => void;
+    text: string;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/RebaseFirebaseApp.d.ts

@@ -0,0 +1,19 @@
+import { RebaseFirebaseAppProps } from "./RebaseFirebaseAppProps";
+/**
+ * This is the default implementation of a Rebase app using the Firebase services
+ * as a backend.
+ * You can use this component as a full app, by specifying collections and
+ * entity collections.
+ *
+ * This component is in charge of initialising Firebase, with the given
+ * configuration object.
+ *
+ * If you are building a larger app and need finer control, you can use
+ * {@link Rebase}, {@link Scaffold}, {@link SideDialogs}
+ * and {@link NavigationRoutes} instead.
+ *
+ * @param props
+
+ * @category Firebase
+ */
+export declare function RebaseFirebaseApp({ name, logo, logoDark, authenticator, collections, views, adminViews, textSearchControllerBuilder, allowSkipLogin, signInOptions, firebaseConfig, onFirebaseInit, appCheckOptions, dateTimeFormat, locale, basePath, baseCollectionPath, onAnalyticsEvent, propertyConfigs: propertyConfigsProp, plugins, autoOpenDrawer, firestoreIndexesBuilder, components, localTextSearchEnabled, userManagement }: RebaseFirebaseAppProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RebaseFirebaseAppProps.d.ts

@@ -0,0 +1,144 @@
+import React from "react";
+import { Authenticator, AnalyticsEvent, AppView, AppViewsBuilder, EntityCollection, EntityCollectionsBuilder, RebasePlugin, Locale, PropertyConfig } from "@rebasepro/types";
+import { UserManagementDelegate } from "@rebasepro/types";
+import { FirebaseApp } from "@firebase/app";
+import { FirebaseLoginViewProps } from "./FirebaseLoginView";
+import { AppCheckOptions, FirebaseSignInOption, FirebaseSignInProvider, FirebaseUserWrapper, FirestoreTextSearchControllerBuilder } from "../types";
+import { FirestoreIndexesBuilder } from "../hooks";
+/**
+ * Main entry point that defines the CMS configuration
+ * @category Firebase
+ */
+export type RebaseFirebaseAppProps = {
+    /**
+     * Name of the app, displayed as the main title and in the tab title
+     */
+    name: string;
+    /**
+     * Logo to be displayed in the drawer of the CMS.
+     * If not specified, the Rebase logo will be used
+     */
+    logo?: string;
+    /**
+     * Logo used in dark mode. If not specified, `logo` will always be used.
+     */
+    logoDark?: string;
+    /**
+     * List of the mapped collections in the CMS.
+     * Each entry relates to a collection in the root database.
+     * Each of the navigation entries in this field
+     * generates an entry in the main menu.
+     */
+    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    /**
+     * Custom additional views created by the developer, added to the main
+     * navigation
+     */
+    views?: AppView[] | AppViewsBuilder;
+    /**
+     * Custom additional views created by the developer, added to the admin
+     * navigation
+     */
+    adminViews?: AppView[] | AppViewsBuilder;
+    /**
+     * Record of custom form fields to be used in the CMS.
+     * You can use the key to reference the custom field in
+     * the `propertyConfig` prop of a property in a collection.
+     */
+    propertyConfigs?: PropertyConfig[];
+    /**
+     * 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.
+     * If not specified, authentication is enabled but no user restrictions
+     * apply
+     */
+    authenticator?: boolean | Authenticator<FirebaseUserWrapper>;
+    /**
+     * List of sign in options that will be displayed in the login
+     * view if `authentication` is enabled. You can pass Firebase providers strings,
+     * such as `firebase.auth.GoogleAuthProvider.PROVIDER_ID` or include additional
+     * config such as scopes or custom parameters
+     * {@link FirebaseSignInOption}
+     * Defaults to Google sign in only.
+     */
+    signInOptions?: Array<FirebaseSignInProvider | FirebaseSignInOption>;
+    /**
+     * If authentication is enabled, allow the user to access the content
+     * without login.
+     */
+    allowSkipLogin?: boolean;
+    /**
+     * Firebase configuration of the project. If you afe deploying the app to
+     * Firebase hosting, you don't need to specify this value
+     */
+    firebaseConfig?: Record<string, unknown>;
+    /**
+     * Optional callback after Firebase has been initialised. Useful for
+     * using the local emulator or retrieving the used configuration.
+     * @param config
+     */
+    onFirebaseInit?: (config: object, app: FirebaseApp) => void;
+    /**
+     * Use this to enable Firebase App Check
+     */
+    appCheckOptions?: AppCheckOptions;
+    /**
+     * Format of the dates in the CMS.
+     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
+     */
+    dateTimeFormat?: string;
+    /**
+     * Locale of the CMS, currently only affecting dates
+     */
+    locale?: Locale;
+    /**
+     * Use this controller to return text search results as document ids, that
+     * get then fetched from Firestore.
+     *
+     */
+    textSearchControllerBuilder?: FirestoreTextSearchControllerBuilder;
+    /**
+     * Default path under the navigation routes of the CMS will be created
+     */
+    basePath?: string;
+    /**
+     * Default path under the collection routes of the CMS will be created
+     */
+    baseCollectionPath?: string;
+    /**
+     * Callback used to get analytics events from the CMS
+     */
+    onAnalyticsEvent?: (event: AnalyticsEvent, data?: object) => void;
+    /**
+     * Use plugins to modify the behaviour of the CMS.
+     * Currently, in ALPHA, and likely subject to change.
+     */
+    plugins?: RebasePlugin[];
+    /**
+     * Open the drawer on hover. Defaults to `false`
+     */
+    autoOpenDrawer?: boolean;
+    /**
+     * Use this builder to indicate which indexes are available in your
+     * Firestore database. This is used to allow filtering and sorting
+     * for multiple fields in the CMS.
+     */
+    firestoreIndexesBuilder?: FirestoreIndexesBuilder;
+    localTextSearchEnabled?: boolean;
+    components?: ComponentsRegistry;
+    /**
+     * Delegate for user and role management. Provides the admin views if specified.
+     */
+    userManagement?: UserManagementDelegate;
+};
+export type ComponentsRegistry = {
+    /**
+     * Component to be used to render the login view
+     */
+    LoginView?: React.ComponentType<FirebaseLoginViewProps>;
+    /**
+     * Component to be used to render the home page
+     */
+    HomePage?: React.ComponentType;
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RebaseFirebaseApp";
+export * from "./RebaseFirebaseAppProps";
+export * from "./FirebaseLoginView";

package/dist/components/social_icons.d.ts

@@ -0,0 +1,6 @@
+export declare const googleIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+export declare const appleIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+export declare const githubIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+export declare const facebookIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+export declare const microsoftIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+export declare const twitterIcon: (mode: "light" | "dark") => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./useFirebaseAuthController";
+export * from "./useFirebaseStorageSource";
+export * from "./useInitialiseFirebase";
+export * from "./useAppCheck";
+export * from "./useFirestoreDriver";
+export * from "./useFirebaseRealTimeDBDelegate";
+export * from "./useRecaptcha";

package/dist/hooks/useAppCheck.d.ts

@@ -0,0 +1,20 @@
+import { FirebaseApp } from "@firebase/app";
+import { AppCheckOptions } from "../types";
+/**
+ * @group Firebase
+ */
+export interface InitializeAppCheckProps {
+    firebaseApp?: FirebaseApp;
+    options?: AppCheckOptions;
+}
+export interface InitializeAppCheckResult {
+    loading: boolean;
+    appCheckVerified?: boolean;
+    error?: any;
+}
+/**
+ * Function used to initialise Firebase App Check.
+ *
+ * @group Firebase
+ */
+export declare function useAppCheck({ firebaseApp, options, }: InitializeAppCheckProps): InitializeAppCheckResult;

package/dist/hooks/useFirebaseAuthController.d.ts

@@ -0,0 +1,15 @@
+import { FirebaseApp } from "@firebase/app";
+import { FirebaseAuthController, FirebaseSignInOption, FirebaseSignInProvider, FirebaseUserWrapper } from "../types";
+import { Role, User } from "@rebasepro/types";
+export interface FirebaseAuthControllerProps {
+    loading?: boolean;
+    firebaseApp?: FirebaseApp;
+    signInOptions?: Array<FirebaseSignInProvider | FirebaseSignInOption>;
+    onSignOut?: () => void;
+    defineRolesFor?: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
+}
+/**
+ * Use this hook to build an {@link AuthController} based on Firebase Auth
+ * @group Firebase
+ */
+export declare const useFirebaseAuthController: <USER extends FirebaseUserWrapper = any, ExtraData = any>({ loading, firebaseApp, signInOptions, onSignOut: onSignOutProp, defineRolesFor }: FirebaseAuthControllerProps) => FirebaseAuthController<USER, ExtraData>;

package/dist/hooks/useFirebaseRealTimeDBDelegate.d.ts

@@ -0,0 +1,5 @@
+import { FirebaseApp } from "@firebase/app";
+import { DataDriver } from "@rebasepro/types";
+export declare function useFirebaseRTDBDelegate({ firebaseApp }: {
+    firebaseApp?: FirebaseApp;
+}): DataDriver;

package/dist/hooks/useFirebaseStorageSource.d.ts

@@ -0,0 +1,14 @@
+import { FirebaseApp } from "@firebase/app";
+import { StorageSource } from "@rebasepro/types";
+/**
+ * @group Firebase
+ */
+export interface FirebaseStorageSourceProps {
+    firebaseApp?: FirebaseApp;
+    bucketUrl?: string;
+}
+/**
+ * Use this hook to build an {@link StorageSource} based on Firebase storage
+ * @group Firebase
+ */
+export declare function useFirebaseStorageSource({ firebaseApp, bucketUrl }: FirebaseStorageSourceProps): StorageSource;

package/dist/hooks/useFirestoreDriver.d.ts

@@ -0,0 +1,56 @@
+import { DataDriver, EntityCollection, FilterCombination } from "@rebasepro/types";
+import { Firestore } from "@firebase/firestore";
+import { FirebaseApp } from "@firebase/app";
+import { FirestoreTextSearchControllerBuilder } from "../types/text_search";
+/**
+ * @group Firebase
+ */
+export interface FirestoreDataDriverProps {
+    firebaseApp?: FirebaseApp;
+    /**
+     * You can use this controller to return a list of ids from a search index, given a
+     * `path` and a `searchString`.
+     */
+    textSearchControllerBuilder?: FirestoreTextSearchControllerBuilder;
+    /**
+     * Fallback to local text search if no text search controller is specified,
+     * or if the controller does not support the given path.
+     */
+    localTextSearchEnabled?: boolean;
+    /**
+     * Use this builder to indicate which indexes are available in your
+     * Firestore database. This is used to allow filtering and sorting
+     * for multiple fields in the CMS.
+     */
+    firestoreIndexesBuilder?: FirestoreIndexesBuilder;
+}
+export type FirestoreIndexesBuilder = (params: {
+    path: string;
+    collection: EntityCollection<any>;
+}) => FilterCombination<string>[] | undefined;
+export type FirestoreDataDriver = DataDriver & {
+    initTextSearch: (props: {
+        path: string;
+        databaseId?: string;
+        collection?: EntityCollection;
+    }) => Promise<boolean>;
+};
+/**
+ * Use this hook to build a {@link DataDriver} based on Firestore
+ * @param firebaseApp
+ * @param textSearchControllerBuilder
+ * @group Firebase
+ */
+export declare function useFirestoreDriver({ firebaseApp, textSearchControllerBuilder, firestoreIndexesBuilder, localTextSearchEnabled }: FirestoreDataDriverProps): FirestoreDataDriver;
+/**
+ * Recursive function that converts Firestore data types into CMS or plain
+ * JS types.
+ * Rebase uses Javascript dates internally instead of Firestore timestamps.
+ * This makes it easier to interact with the rest of the libraries and
+ * bindings.
+ * Also, Firestore references are replaced with {@link EntityReference}
+ * @param data
+ * @group Firestore
+ */
+export declare function firestoreToCMSModel(data: any): any;
+export declare function cmsToFirestoreModel(data: any, firestore: Firestore, inArray?: boolean): any;

package/dist/hooks/useInitialiseFirebase.d.ts

@@ -0,0 +1,34 @@
+import { FirebaseApp } from "@firebase/app";
+/**
+ * @group Firebase
+ */
+export interface InitialiseFirebaseResult {
+    firebaseConfigLoading: boolean;
+    firebaseApp?: FirebaseApp;
+    configError?: string;
+    firebaseConfigError?: Error;
+}
+/**
+ * Function used to initialise Firebase, either by using the provided config,
+ * or by fetching it by Firebase Hosting, if not specified.
+ *
+ * It works as a hook that gives you the loading state and the used
+ * configuration.
+ *
+ * You most likely only need to use this if you are developing a custom app. You can also not use this component
+ * and initialise Firebase yourself.
+ *
+ * @param onFirebaseInit
+ * @param firebaseConfig
+ * @param fromUrl
+ * @param name
+ * @param authDomain
+ * @group Firebase
+ */
+export declare function useInitialiseFirebase({ firebaseConfig, fromUrl, onFirebaseInit, name, authDomain }: {
+    firebaseConfig?: Record<string, unknown>;
+    fromUrl?: string | undefined;
+    onFirebaseInit?: ((config: object, firebaseApp: FirebaseApp) => void) | undefined;
+    name?: string;
+    authDomain?: string;
+}): InitialiseFirebaseResult;

package/dist/hooks/useRecaptcha.d.ts

@@ -0,0 +1,8 @@
+import { RecaptchaVerifier } from "@firebase/auth";
+declare global {
+    interface Window {
+        recaptchaVerifier: RecaptchaVerifier;
+    }
+}
+export declare const RECAPTCHA_CONTAINER_ID: "recaptcha-container";
+export declare function useRecaptcha(): null;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./hooks";
+export * from "./types";
+export * from "./utils";
+export * from "./components";