@firecms/core 3.0.0-alpha.57 → 3.0.0-alpha.59

package/dist/types/firecms_context.d.ts

@@ -22,15 +22,6 @@ import { DialogsController } from "./dialogs_controller";
  * @see useFireCMSContext
  */
 export type FireCMSContext<UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>> = {
-    /**
-     * 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;
     /**
      * Connector to your database, e.g. your Firestore database
      */
@@ -99,6 +90,15 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+    /**
+     * 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;
     components?: {
         /**
          * Component to render when a reference is missing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/core",
-  "version": "3.0.0-alpha.57",
+  "version": "3.0.0-alpha.59",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -45,7 +45,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.57",
+    "@firecms/ui": "^3.0.0-alpha.59",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -116,7 +116,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "81bd430a1a5f6d5365ae4dcab7290e7b8107832e",
+  "gitHead": "9d82460b4b28c7b31d097ff3e0e28f77c05b1023",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/internal/default_entity_actions.tsx

@@ -1,6 +1,6 @@
 import { EntityAction } from "../../../types";
 import { DeleteEntityDialog } from "./DeleteEntityDialog";
-import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon } from "@firecms/ui";
+import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
 
 export const editEntityAction: EntityAction = {
     icon: <KeyboardTabIcon/>,
@@ -61,12 +61,27 @@ export const archiveEntityAction: EntityAction = {
     onClick({
                 entity,
                 collection,
-                context,
+                context: {
+                    dataSource,
+                }
             }): Promise<void> {
         // Add your code here
         return Promise.resolve(undefined);
     }
 }
+export const openWebsiteAction: EntityAction = {
+    icon: <OpenInNewIcon/>,
+    name: "See in website",
+    onClick({
+                entity,
+                collection,
+                context,
+            }): Promise<void> {
+        // open a new tab
+        window.open(`https://example.com/${entity.id}`, "_blank");
+        return Promise.resolve(undefined);
+    }
+}
 
 export const deleteEntityAction: EntityAction = {
     icon: <DeleteIcon/>,

package/src/{form/components → components}/LabelWithIcon.tsx

@@ -9,8 +9,7 @@ interface LabelWithIconProps {
 }
 
 /**
- * Render the label of a form field for a given property, with the corresponding
- * icon.
+ * Render the label of with an icon and the title of a property
  * @group Form custom fields
  */
 export function LabelWithIcon({

package/src/components/ReferenceWidget.tsx

@@ -0,0 +1,143 @@
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityCollection, EntityReference, FilterValues } from "../types";
+import { getReferenceFrom } from "../util";
+import { PreviewSize, ReferencePreview } from "../preview";
+import { useNavigationController, useReferenceDialog } from "../hooks";
+import { Button, cn } from "@firecms/ui";
+
+/**
+ * This field allows selecting reference/s.
+ */
+export function ReferenceWidget<M extends Record<string, any>>({
+                                                                   name,
+                                                                   multiselect = false,
+                                                                   path,
+                                                                   disabled,
+                                                                   value,
+                                                                   onReferenceSelected,
+                                                                   onMultipleReferenceSelected,
+                                                                   previewProperties,
+                                                                   forceFilter,
+                                                                   size,
+                                                                   className
+                                                               }: {
+    name?: string,
+    multiselect?: boolean,
+    value: EntityReference | EntityReference[] | null,
+    onReferenceSelected?: (params: {
+        reference: EntityReference | null,
+        entity: Entity<M> | null
+    }) => void,
+    onMultipleReferenceSelected?: (params: {
+        references: EntityReference[] | null,
+        entities: Entity<M>[] | null
+    }) => void,
+    path: string,
+    disabled?: boolean,
+    previewProperties?: string[];
+    /**
+     * Allow selection of entities that pass the given filter only.
+     */
+    forceFilter?: FilterValues<string>;
+    size: PreviewSize;
+    className?: string;
+}) {
+
+    const navigationController = useNavigationController();
+
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return navigationController.getCollection(path);
+    }, [path, navigationController]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
+        if (disabled)
+            return;
+        if (onReferenceSelected) {
+            const reference = entity ? getReferenceFrom(entity) : null;
+            onReferenceSelected?.({ reference, entity });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<M>[]) => {
+        if (disabled)
+            return;
+        if (onMultipleReferenceSelected) {
+            const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
+            onMultipleReferenceSelected({ references, entities });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect,
+            path,
+            collection,
+            onSingleEntitySelected,
+            onMultipleEntitiesSelected,
+            forceFilter
+        }
+    );
+
+    const clearValue = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (multiselect) {
+            onMultipleEntitiesSelected([]);
+        } else {
+            onSingleEntitySelected(null);
+        }
+    }, [onReferenceSelected]);
+
+    let child: React.ReactNode;
+
+    const onEntryClick = () => {
+        if (disabled)
+            return;
+        referenceDialogController.open();
+    };
+
+    if (Array.isArray(value)) {
+        child = <div className={"flex flex-col gap-4"}>
+            {value.map((ref, index) => {
+                return <ReferencePreview
+                    key={`reference_preview_${index}`}
+                    onClick={onEntryClick}
+                    reference={ref}
+                    disabled={disabled}
+                    previewProperties={previewProperties}
+                    size={size}/>
+            })}
+        </div>
+    } else if (value instanceof EntityReference) {
+        child = <ReferencePreview
+            reference={value}
+            onClick={onEntryClick}
+            disabled={disabled}
+            previewProperties={previewProperties}
+            size={size}/>
+
+    }
+    return <div className={cn("text-sm font-medium text-gray-500",
+        "min-w-80 flex flex-col gap-4",
+        "relative transition-colors duration-200 ease-in rounded font-medium",
+        disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
+        "text-opacity-50 dark:text-white dark:text-opacity-50",
+        className
+    )}
+    >
+
+        {child}
+        {!value && <div className="justify-center text-left">
+            <Button variant="outlined"
+                    color="primary"
+                    disabled={disabled}
+                    onClick={onEntryClick}>
+                Edit {name}
+            </Button>
+        </div>}
+
+    </div>;
+}

package/src/components/index.tsx

@@ -26,3 +26,5 @@ export * from "./FireCMSLogo";
 export * from "./FireCMSAppBar";
 
 export * from "./ArrayContainer";
+export * from "./ReferenceWidget";
+export * from "./LabelWithIcon";

package/src/form/components/index.tsx

@@ -1,4 +1,3 @@
 export * from "./FormikArrayContainer";
-export * from "./LabelWithIcon";
 export * from "./SwitchControl";
 export * from "./FieldHelperText";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
+import { LabelWithIcon } from "../../components";
 
 /**
  * Array field used for custom

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer } from "../components";
+import { LabelWithIcon } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { FastField, FieldProps as FormikFieldProps, useFormikContext } from "formik";
 
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer } from "../components";
+import { LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -2,7 +2,8 @@ import React from "react";
 
 import { FieldProps } from "../../types";
 
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react";
 import { DataType, EntityReference, FieldProps, GeoPoint } from "../../types";
 
 import { ArrayContainer } from "../../components";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+
+import { LabelWithIcon } from "../../components";
 import {
     AddIcon,
     ArrowDropDownIcon,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
+import { LabelWithIcon } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -4,7 +4,8 @@ import React, { useDeferredValue, useEffect, useRef } from "react";
 import MarkdownIt from "markdown-it";
 import MdEditor, { Plugins } from "react-markdown-editor-lite";
 
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { FieldProps } from "../../types";
 import { getIconForProperty } from "../../util";
 import {

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cn, paperMixin } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -3,7 +3,8 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
 import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { Button } from "@firecms/ui";

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer } from "../components";
+import { LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -10,7 +10,8 @@ import {
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
 import { FieldProps } from "../../types";
-import { LabelWithIcon } from "../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { FieldHelperText } from "../components/FieldHelperText";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
+import { LabelWithIcon } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback } from "react";
 
 import { FieldProps, PreviewType } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText } from "../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { PropertyPreview } from "../../preview";
+import { LabelWithIcon } from "../../components";
 
 interface TextFieldProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean

package/src/types/firecms_context.tsx

@@ -24,17 +24,6 @@ import { DialogsController } from "./dialogs_controller";
  */
 export type FireCMSContext<UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>> = {
 
-    /**
-     * 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;
-
     /**
      * Connector to your database, e.g. your Firestore database
      */
@@ -117,6 +106,16 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      */
     entityViews?: EntityCustomView[];
 
+    /**
+     * 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;
 
     components?: {
 

package/dist/form/components/ReferenceWidget.d.ts

@@ -1,24 +0,0 @@
-import { EntityReference, FilterValues } from "../../types";
-/**
- * This field allows selecting reference/s.
- * @param name
- * @param path
- * @param disabled
- * @param value
- * @param setValue
- * @param previewProperties
- * @param forceFilter
- * @constructor
- */
-export declare function ReferenceWidget<M extends Record<string, any>>({ name, path, disabled, value, setValue, previewProperties, forceFilter }: {
-    name?: string;
-    value?: EntityReference;
-    setValue: (value: EntityReference | null) => void;
-    path: string;
-    disabled?: boolean;
-    previewProperties?: string[];
-    /**
-     * Allow selection of entities that pass the given filter only.
-     */
-    forceFilter?: FilterValues<string>;
-}): import("react/jsx-runtime").JSX.Element;