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

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { EnumValuesChip, PropertyPreviewProps } from "../../preview";
+import { enumToObjectEntries } from "../../util";
+
+/**
+ * @group Preview components
+ */
+export function NumberPropertyPreview({
+                                          value,
+                                          property,
+                                          size
+                                      }: PropertyPreviewProps<number>): React.ReactElement {
+
+    if (property.enumValues) {
+        const enumKey = value;
+        const enumValues = enumToObjectEntries(property.enumValues);
+        if (!enumValues)
+            return <>{value}</>;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={size !== "medium" ? "small" : "medium"}/>;
+    } else {
+        return <>{value}</>;
+    }
+}

package/src/preview/property_previews/SkeletonPropertyComponent.d.ts

@@ -0,0 +1,14 @@
+import { ResolvedProperty } from "../../types";
+import { PreviewSize } from "../PropertyPreviewProps";
+export interface SkeletonPropertyComponentProps {
+    property: ResolvedProperty;
+    size: PreviewSize;
+}
+/**
+ * @group Preview components
+ */
+export declare function SkeletonPropertyComponent({ property, size }: SkeletonPropertyComponentProps): any;
+export declare function renderSkeletonImageThumbnail(size: PreviewSize): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonText(index?: number, width?: number): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonCaptionText(index?: number): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonIcon(): import("react/jsx-runtime").JSX.Element;

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -0,0 +1,283 @@
+import {
+    ResolvedArrayProperty,
+    ResolvedMapProperty,
+    ResolvedProperties,
+    ResolvedProperty,
+    ResolvedStringProperty
+} from "../../types";
+import React from "react";
+import { getThumbnailMeasure } from "../util";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { Skeleton } from "@firecms/ui";
+
+export interface SkeletonPropertyComponentProps {
+    property: ResolvedProperty,
+    size: PreviewSize
+}
+
+/**
+ * @group Preview components
+ */
+export function SkeletonPropertyComponent({
+                                              property,
+                                              size
+                                          }: SkeletonPropertyComponentProps
+) {
+
+    if (!property) {
+        console.error("No property assigned for skeleton component", property, size);
+    }
+
+    let content: React.ReactNode | any;
+    if (property.dataType === "string") {
+        const stringProperty = property as ResolvedStringProperty;
+        if (stringProperty.url) {
+            content = renderUrlComponent(stringProperty, size);
+        } else if (stringProperty.storage) {
+            content = renderSkeletonImageThumbnail(size);
+        } else {
+            content = renderSkeletonText();
+        }
+    } else if (property.dataType === "array") {
+        const arrayProperty = property as ResolvedArrayProperty;
+
+        if (arrayProperty.of) {
+            if (Array.isArray(arrayProperty.of)) {
+                content = <>{arrayProperty.of.map((p, i) => renderGenericArrayCell(p, i))} </>;
+            } else {
+                if (arrayProperty.of.dataType === "map" && arrayProperty.of.properties) {
+                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
+                } else if (arrayProperty.of.dataType === "string") {
+                    if (arrayProperty.of.enumValues) {
+                        content = renderArrayEnumTableCell();
+                    } else if (arrayProperty.of.storage) {
+                        content = renderGenericArrayCell(arrayProperty.of);
+                    } else {
+                        content = renderArrayOfStrings();
+                    }
+                } else {
+                    content = renderGenericArrayCell(arrayProperty.of);
+                }
+            }
+        }
+
+    } else if (property.dataType === "map") {
+        content = renderMap(property as ResolvedMapProperty, size);
+    } else if (property.dataType === "date") {
+        content = renderSkeletonText();
+    } else if (property.dataType === "reference") {
+        content = renderReference();
+    } else if (property.dataType === "boolean") {
+        content = renderSkeletonText();
+    } else {
+        content = renderSkeletonText();
+    }
+    return (content || null);
+}
+
+function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<T>, size: PreviewSize) {
+
+    if (!property.properties)
+        return <></>;
+
+    let mapPropertyKeys: string[];
+    if (size === "medium") {
+        mapPropertyKeys = Object.keys(property.properties);
+    } else {
+        mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
+        if (size === "small")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 3);
+        else if (size === "tiny")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 1);
+    }
+
+    if (size !== "medium")
+        return (
+            <div
+                className="w-full flex flex-col space-y-4"
+            >
+                {mapPropertyKeys.map((key, index) => (
+                    <div key={`map_${key}`}>
+                        {property.properties && property.properties[key] &&
+                            <SkeletonPropertyComponent
+                                property={property.properties[key]}
+                                size={"small"}/>}
+                    </div>
+                ))}
+            </div>
+        );
+
+    return (
+        <table className="table-auto">
+            <tbody>
+            {mapPropertyKeys &&
+                mapPropertyKeys.map((key, index) => {
+                    return (
+                        <tr
+                            key={`map_preview_table__${index}`}
+                            className="border-b last:border-b-0">
+                            <th key={`table-cell-title--${key}`}
+                                className="align-top"
+                                style={{ width: "30%" }}>
+                                <p className="text-xs text-secondary">
+                                    {property.properties![key].name}
+                                </p>
+                            </th>
+                            <th key={`table-cell-${key}`}
+                                style={{ width: "70%" }}>
+                                {property.properties && property.properties[key] &&
+                                    <SkeletonPropertyComponent
+                                        property={property.properties[key]}
+                                        size={"small"}/>}
+                            </th>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedProperties<M>, size: PreviewSize, previewProperties?: string[]) {
+    let tableProperties = previewProperties;
+    if (!tableProperties || !tableProperties.length) {
+        tableProperties = Object.keys(properties) as string[];
+        if (size)
+            tableProperties = tableProperties.slice(0, 3);
+    }
+
+    return (
+        <table className="table-auto">
+            <tbody>
+            {
+                [0, 1, 2].map((value, index) => {
+                    return (
+                        <tr key={`table_${value}_${index}`}>
+                            {tableProperties && tableProperties.map(
+                                (key) => (
+                                    <th
+                                        key={`table-cell-${key}`}
+                                    >
+                                        <SkeletonPropertyComponent
+                                            property={(properties)[key]}
+                                            size={"small"}/>
+                                    </th>
+                                )
+                            )}
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfStrings() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) => (
+                    renderSkeletonText(index)
+                ))}
+        </div>
+    );
+}
+
+function renderArrayEnumTableCell() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        {renderSkeletonText(index)}
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderGenericArrayCell(
+    property: ResolvedProperty,
+    index = 0
+) {
+    return (
+
+        <div key={"array_index_" + index}
+             className={"flex flex-col gap-2"}>
+
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        <SkeletonPropertyComponent key={`i_${index}`}
+                                                   property={property}
+                                                   size={"small"}/>
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderUrlAudioComponent() {
+    return (
+        <Skeleton width={300}
+                  height={100}/>
+    );
+}
+
+export function renderSkeletonImageThumbnail(size: PreviewSize) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    return (
+        <Skeleton width={imageSize}
+                  height={imageSize}/>
+    );
+}
+
+function renderUrlVideo(size: PreviewSize) {
+
+    return (
+        <Skeleton width={size !== "medium" ? 300 : 500}
+                  height={size !== "medium" ? 200 : 250}/>
+    );
+}
+
+function renderReference() {
+    return <Skeleton width={200} height={100}/>;
+}
+
+function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "medium") {
+
+    if (typeof property.url === "boolean") {
+        return <div style={{
+            display: "flex"
+        }}>
+            {renderSkeletonIcon()}
+            {renderSkeletonText()}
+        </div>;
+    }
+
+    return renderUrlFile(size);
+}
+
+function renderUrlFile(size: PreviewSize) {
+
+    return (
+        <div
+            className={`w-${getThumbnailMeasure(size)} h-${getThumbnailMeasure(size)}`}>
+            {renderSkeletonIcon()}
+        </div>
+    );
+}
+
+export function renderSkeletonText(index?: number, width = 120) {
+    return <Skeleton width={width} key={`skeleton_${index}`}/>;
+}
+
+export function renderSkeletonCaptionText(index?: number) {
+    return <Skeleton
+        height={20}/>;
+}
+
+export function renderSkeletonIcon() {
+    return <Skeleton width={24} height={24}/>;
+}

package/src/preview/property_previews/StringPropertyPreview.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function StringPropertyPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string>): React.ReactElement;

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { resolvePropertyEnum } from "../../util";
+import { EnumValuesChip } from "../components/EnumValuesChip";
+import { getColorSchemeForSeed } from "../../util/chip_utils";
+import { PreviewType } from "../../types";
+import { UrlComponentPreview } from "../components/UrlComponentPreview";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { ErrorBoundary } from "../../components";
+import { Chip } from "@firecms/ui";
+
+/**
+ * @group Preview components
+ */
+export function StringPropertyPreview({
+                                          propertyKey,
+                                          value,
+                                          property,
+                                          size
+                                      }: PropertyPreviewProps<string>): React.ReactElement {
+
+    if (property.enumValues) {
+        const enumKey = value;
+        const resolvedProperty = resolvePropertyEnum(property);
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={resolvedProperty.enumValues}
+            size={size !== "medium" ? "small" : "medium"}/>;
+    } else if (property.previewAsTag) {
+        const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
+        return (
+            <ErrorBoundary>
+                <Chip
+                    colorScheme={colorScheme}
+                    size={size !== "medium" ? "small" : "medium"}>
+                    {value}
+                </Chip>
+            </ErrorBoundary>);
+    } else if (property.url) {
+        return (
+            <UrlComponentPreview size={size}
+                                 url={value}
+                                 previewType={typeof property.url === "string" ? property.url as PreviewType : undefined}/>
+        );
+    } else {
+        if (!value) return <></>;
+        const lines = value.split("\n");
+        return value && value.includes("\n")
+            ? <div className={"overflow-x-scroll"}>
+                {lines.map((str, index) =>
+                    <React.Fragment key={`string_preview_${index}`}>
+                        <span>{str}</span>
+                        {index !== lines.length - 1 && <br/>}
+                    </React.Fragment>)}
+            </div>
+            : <>
+                {value}
+            </>;
+    }
+}

package/src/preview/util.d.ts

@@ -0,0 +1,7 @@
+import { CollectionSize } from "../types";
+import { PreviewSize } from "./PropertyPreviewProps";
+export declare const TINY_THUMBNAIL = 40;
+export declare const SMALL_THUMBNAIL = 100;
+export declare const REGULAR_THUMBNAIL = 200;
+export declare function getThumbnailMeasure(size: PreviewSize): number;
+export declare function getPreviewSizeFrom(size: CollectionSize): PreviewSize;

package/src/preview/util.ts

@@ -0,0 +1,31 @@
+import { CollectionSize } from "../types";
+import { PreviewSize } from "./PropertyPreviewProps";
+
+export const TINY_THUMBNAIL = 40;
+export const SMALL_THUMBNAIL = 100;
+export const REGULAR_THUMBNAIL = 200;
+
+export function getThumbnailMeasure(size: PreviewSize): number {
+    if (size === "tiny")
+        return TINY_THUMBNAIL;
+    else if (size === "small")
+        return SMALL_THUMBNAIL;
+    else if (size === "medium")
+        return REGULAR_THUMBNAIL;
+    else throw Error("Thumbnail size not mapped");
+}
+
+export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
+    switch (size) {
+        case "xs":
+        case "s":
+            return "tiny";
+        case "m":
+            return "small";
+        case "l":
+        case "xl":
+            return "medium";
+        default:
+            throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
+    }
+}

package/src/types/analytics.d.ts

@@ -0,0 +1 @@
+export type CMSAnalyticsEvent = "entity_click" | "entity_click_from_reference" | "reference_selection_clear" | "reference_selection_toggle" | "reference_selected_single" | "reference_selection_new_entity" | "edit_entity_clicked" | "entity_edited" | "new_entity_click" | "new_entity_saved" | "copy_entity_click" | "entity_copied" | "single_delete_dialog_open" | "multiple_delete_dialog_open" | "single_entity_deleted" | "multiple_entities_deleted" | "drawer_navigate_to_home" | "drawer_navigate_to_collection" | "drawer_navigate_to_view" | "home_navigate_to_collection" | "home_favorite_navigate_to_collection" | "home_navigate_to_view" | "home_favorite_navigate_to_view" | "collection_inline_editing" | "unmapped_event";

package/src/types/analytics.ts

@@ -0,0 +1,34 @@
+export type CMSAnalyticsEvent =
+    | "entity_click"
+    | "entity_click_from_reference"
+
+    | "reference_selection_clear"
+    | "reference_selection_toggle"
+    | "reference_selected_single"
+    | "reference_selection_new_entity"
+
+    | "edit_entity_clicked"
+    | "entity_edited"
+    | "new_entity_click"
+    | "new_entity_saved"
+    | "copy_entity_click"
+    | "entity_copied"
+
+    | "single_delete_dialog_open"
+    | "multiple_delete_dialog_open"
+    | "single_entity_deleted"
+    | "multiple_entities_deleted"
+
+    | "drawer_navigate_to_home"
+    | "drawer_navigate_to_collection"
+    | "drawer_navigate_to_view"
+
+    | "home_navigate_to_collection"
+    | "home_favorite_navigate_to_collection"
+    | "home_navigate_to_view"
+    | "home_favorite_navigate_to_view"
+
+    | "collection_inline_editing"
+
+    | "unmapped_event"
+    ;

package/src/types/appcheck.d.ts

@@ -0,0 +1,26 @@
+import { FirebaseApp } from "firebase/app";
+/**
+ * @group Firebase
+ */
+export interface AppCheck {
+    firebaseApp?: FirebaseApp;
+}
+/**
+ * @group Firebase
+ */
+export interface AppCheckOptions {
+    providerKey: string;
+    useEnterpriseRecaptcha: boolean;
+    isTokenAutoRefreshEnabled?: boolean;
+    debugToken?: string;
+    forceRefresh?: boolean;
+}
+/**
+ * @group Firebase
+ */
+export declare interface AppCheckTokenResult {
+    /**
+     * The token string in JWT format.
+     */
+    readonly token: string;
+}

package/src/types/appcheck.ts

@@ -0,0 +1,29 @@
+import { FirebaseApp } from "firebase/app";
+
+/**
+ * @group Firebase
+ */
+export interface AppCheck {
+    firebaseApp?: FirebaseApp;
+}
+
+/**
+ * @group Firebase
+ */
+export interface AppCheckOptions {
+    providerKey: string;
+    useEnterpriseRecaptcha: boolean;
+    isTokenAutoRefreshEnabled?: boolean;
+    debugToken?: string;
+    forceRefresh?: boolean;
+}
+
+/**
+ * @group Firebase
+ */
+export declare interface AppCheckTokenResult {
+    /**
+     * The token string in JWT format.
+     */
+    readonly token: string;
+}

package/src/types/auth.d.ts

@@ -0,0 +1,40 @@
+import { User } from "./user";
+/**
+ * Controller for retrieving the logged user or performing auth related operations.
+ * Note that if you are implementing your AuthController, you probably will want
+ * to do it as the result of a hook.
+ * @group Hooks and utilities
+ */
+export type AuthController<UserType extends User = User> = {
+    /**
+     * The user currently logged in
+     * The values can be: the user object, null if they skipped login
+     */
+    user: UserType | null;
+    /**
+     * Initial loading flag. It is used not to display the login screen
+     * when the app first loads, and it has not been checked whether the user
+     * is logged in or not.
+     */
+    initialLoading?: boolean;
+    /**
+     * Sign out
+     */
+    signOut: () => void;
+    /**
+     * Error initializing the authentication
+     */
+    authError?: any;
+    /**
+     * Error dispatched by the auth provider
+     */
+    authProviderError?: any;
+    /**
+     * You can use this method to retrieve the auth token for the current user.
+     */
+    getAuthToken: () => Promise<string>;
+    /**
+     * Has the user skipped the login process
+     */
+    loginSkipped: boolean;
+};

package/src/types/auth.tsx

@@ -0,0 +1,49 @@
+import { User } from "./user";
+
+/**
+ * Controller for retrieving the logged user or performing auth related operations.
+ * Note that if you are implementing your AuthController, you probably will want
+ * to do it as the result of a hook.
+ * @group Hooks and utilities
+ */
+export type AuthController<UserType extends User = User> = {
+
+    /**
+     * The user currently logged in
+     * The values can be: the user object, null if they skipped login
+     */
+    user: UserType | null;
+
+    /**
+     * Initial loading flag. It is used not to display the login screen
+     * when the app first loads, and it has not been checked whether the user
+     * is logged in or not.
+     */
+    initialLoading?: boolean;
+
+    /**
+     * Sign out
+     */
+    signOut: () => void;
+
+    /**
+     * Error initializing the authentication
+     */
+    authError?: any;
+
+    /**
+     * Error dispatched by the auth provider
+     */
+    authProviderError?: any;
+
+    /**
+     * You can use this method to retrieve the auth token for the current user.
+     */
+    getAuthToken: () => Promise<string>;
+
+    /**
+     * Has the user skipped the login process
+     */
+    loginSkipped: boolean;
+
+};