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

package/dist/util/index.d.ts

@@ -11,6 +11,8 @@ export * from "./useDebounce";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";
+export * from "./icon_list";
+export * from "./icon_synonyms";
 export * from "./icons";
 export * from "./plurals";
 export * from "./references";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-alpha.71",
+  "version": "3.0.0-alpha.73",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,7 +38,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.71",
+    "@firecms/ui": "^3.0.0-alpha.73",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -58,7 +58,6 @@
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "algoliasearch": "^4.13.0",
     "firebase": "^10.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -85,7 +84,6 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "algoliasearch": "^4.22.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.55.0",
     "eslint-config-standard": "^17.1.0",
@@ -109,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b",
+  "gitHead": "df625cc7bd6af087b7012d1c9ae77d3a6c17a320",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -39,8 +39,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
 
 /**
  * This component is in charge of rendering a collection table with a high
- * degree of customization. It is in charge of fetching data from
- * the {@link DataSource} and holding the state of filtering and sorting.
+ * degree of customization.
  *
  * This component is used internally by {@link EntityCollectionView} and
  * {@link useReferenceDialog}
@@ -51,10 +50,11 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
  *
  * If you want to bind a {@link EntityCollection} to a table with the default
  * options you see in collections in the top level navigation, you can
- * check {@link EntityCollectionView}
+ * check {@link EntityCollectionView}.
  *
- * If you need a table that is not bound to the datasource or entities and
- * properties at all, you can check {@link VirtualTable}
+ * The data displayed in the table is managed by a {@link TableController}.
+ * You can build the default, bound to a path in the datasource, by using the hook
+ * {@link useDataSourceEntityCollectionTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
@@ -385,7 +385,6 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     onValueChange,
                     size,
                     selectedCell,
-                    selectedEntityIds
                 }}
             >
 

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -92,7 +92,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     /**
      * Controller holding the logic for the table
-     * {@link useEntityCollectionTableController}
+     * {@link useDataSourceEntityCollectionTableController}
      * {@link TableController}
      */
     tableController: TableController<M>;

package/src/components/EntityCollectionTable/index.tsx

@@ -13,4 +13,4 @@ export type {
     OnCellValueChangeParams
 } from "./types";
 
-export * from "./useEntityCollectionTableController";
+export * from "./useDataSourceEntityCollectionTableController";

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

@@ -71,9 +71,9 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
 
     return (
         <div
-            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 md:mr-4 mr-2">
 
                 {props.title && <div className={"hidden lg:block"}>
                     {props.title}

package/src/components/EntityCollectionTable/types.tsx

@@ -2,11 +2,25 @@ import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellP
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
+    /**
+     * This cell is displayed as selected
+     */
     selectedCell?: SelectedCellProps<any>;
+    /**
+     * Select a table cell
+     * @param cell
+     */
     select: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * The cell that is displayed as a popup view.
+     * @param cell
+     */
     setPopupCell?: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * Callback used when the value of a cell has changed.
+     * @param params
+     */
     onValueChange?: (params: OnCellValueChangeParams<any, M>) => void;
-    selectedEntityIds?: string[];
     /**
      * Size of the elements in the collection
      */

package/src/components/EntityCollectionTable/{useEntityCollectionTableController.tsx → useDataSourceEntityCollectionTableController.tsx}

@@ -15,34 +15,46 @@ import { useDebouncedData } from "./useDebouncedData";
 
 const DEFAULT_PAGE_SIZE = 50;
 
-export type EntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
+export type DataSourceEntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
+    /**
+     * Full path where the data of this table is located
+     */
     fullPath: string;
+    /**
+     * The collection that is represented by this config.
+     */
     collection: EntityCollection<M>;
     /**
      * List of entities that will be displayed on top, no matter the ordering.
      * This is used for reference fields selection
      */
     entitiesDisplayedFirst?: Entity<M>[];
+
     lastDeleteTimestamp?: number;
     forceFilter?: FilterValues<string>;
 }
 
 /**
- * Use this hook to build a controller for the {@link EntityCollectionTable}
+ * Use this hook to build a controller for the {@link EntityCollectionTable}.
+ * This controller is bound to data in a path in your specified datasource.
+ *
+ * Note that you can build your own hook returning a {@link TableController}
+ * if you would like to display different data.
+ *
  * @param fullPath
  * @param collection
  * @param entitiesDisplayedFirst
  * @param lastDeleteTimestamp
  * @param forceFilterFromProps
  */
-export function useEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
+export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
     {
         fullPath,
         collection,
         entitiesDisplayedFirst,
         lastDeleteTimestamp,
         forceFilter: forceFilterFromProps,
-    }: EntityCollectionTableControllerProps<M>)
+    }: DataSourceEntityCollectionTableControllerProps<M>)
     : TableController<M> {
 
     const {

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -47,7 +47,7 @@ import {
 } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
-import { useEntityCollectionTableController } from "../EntityCollectionTable/useEntityCollectionTableController";
+import { useDataSourceEntityCollectionTableController } from "../EntityCollectionTable/useDataSourceEntityCollectionTableController";
 import {
     AddIcon,
     Button,
@@ -176,7 +176,7 @@ export const EntityCollectionView = React.memo(
             setDeleteEntityClicked(undefined);
         }, [selectedEntities]);
 
-        const tableController = useEntityCollectionTableController<M>({
+        const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
             collection,
             entitiesDisplayedFirst: [],

package/src/components/ReferenceSelectionInner.tsx

@@ -15,7 +15,7 @@ import { ErrorView } from "./ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
 import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../util";
 import { useSelectionController } from "./EntityCollectionView/EntityCollectionView";
-import { useEntityCollectionTableController } from "./EntityCollectionTable/useEntityCollectionTableController";
+import { useDataSourceEntityCollectionTableController } from "./EntityCollectionTable/useDataSourceEntityCollectionTableController";
 import { useColumnIds } from "./EntityCollectionView/useColumnsIds";
 import { useSideDialogContext } from "../core";
 
@@ -258,7 +258,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tableController = useEntityCollectionTableController<M>({
+    const tableController = useDataSourceEntityCollectionTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,

package/src/components/SearchIconsView.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
+import { icon_synonyms, iconsSearch } from "../util";
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+if (process.env.NODE_ENV !== "production") {
+    Object.keys(icon_synonyms).forEach((icon: string) => {
+        if (!iconKeys.includes(icon)) {
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+        }
+    });
+}
+
+export interface SearchIconsProps {
+    selectedIcon?: string;
+    onIconSelected?: (icon: string) => void;
+}
+
+export function SearchIconsView({
+                                selectedIcon = "",
+                                onIconSelected
+                            }: SearchIconsProps) {
+    const [keys, setKeys] = React.useState<string[] | null>(null);
+    const [query, setQuery] = React.useState<string>("");
+
+    const updateSearchResults = React.useMemo(() =>
+        debounce((value: string) => {
+            if (!value || value === "") {
+                setKeys(null);
+            } else {
+                const searchResult = iconsSearch.search(value);
+                setKeys(searchResult.map((e: any) => e.key));
+            }
+        }, UPDATE_SEARCH_INDEX_WAIT_MS), []
+    );
+
+    React.useEffect(() => {
+        updateSearchResults(query);
+        return () => {
+            updateSearchResults.clear();
+        };
+    }, [query, updateSearchResults]);
+
+    const icons = keys === null ? coolIconKeys : keys;
+
+    return (
+        <>
+            <SearchBar
+                autoFocus
+                innerClassName={"w-full sticky top-0 z-10"}
+                onTextSearch={(value?: string) => setQuery(value ?? "")}
+                placeholder="Search for more icons…"
+            />
+
+            <div className={"flex max-w-full flex-wrap mt-4"}>
+                {icons.map((icon: string) => {
+                    return (
+                        <Tooltip title={icon} key={icon}>
+                            <IconButton
+                                shape={"square"}
+                                toggled={selectedIcon === icon}
+                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                                className="box-content m-1"
+                            >
+                                <Icon iconKey={icon} size={24}/>
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </div>
+        </>
+    );
+}

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -19,7 +19,6 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                 }: VirtualTableRowProps<T>) {
 
         const onClick = useCallback((event: React.SyntheticEvent) => {
-            console.debug("VirtualTableRow click");
             if (onRowClick)
                 onRowClick({
                     rowData,

package/src/components/index.tsx

@@ -28,3 +28,4 @@ export * from "./FireCMSAppBar";
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./LabelWithIcon";
+export * from "./SearchIconsView";

package/src/core/EntitySidePanel.tsx

@@ -74,7 +74,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     return (
         <>
-
             <ErrorBoundary>
                 <EntityView
                     {...props}

package/src/form/EntityForm.tsx

@@ -28,7 +28,7 @@ import {
 import { useAuthController, useDataSource, useFireCMSContext, useSideEntityController } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
@@ -400,9 +400,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                     )).filter(Boolean));
                 }
 
-                return <div
-                    className="h-full overflow-auto"
-                >
+                return <div className="h-full overflow-auto">
 
                     {pluginActions.length > 0 && <div
                         className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
@@ -413,12 +411,15 @@ function EntityFormInternal<M extends Record<string, any>>({
                         className="pl-4 pr-4 pt-12 pb-16 md:pl-8"
                     >
                         <div
-                            className={`w-full py-2 flex items-center mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+                            className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 
                             <Typography
                                 className={"mt-4 flex-grow " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
                                 variant={"h4"}>{inputCollection.singularName ?? inputCollection.name}
                             </Typography>
+                            <Alert color={"base"} className={"w-full"} size={"small"}>
+                                <code className={"text-sm select-all"}>{path}/{entityId}</code>
+                            </Alert>
                         </div>
 
                         {!hideId &&

package/src/form/PropertyFieldBinding.tsx

@@ -202,7 +202,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
     const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
-    const UsedComponent: ComponentType<FieldProps<T>> = Component;
+    const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
     const isSubmitting = fieldProps.form.isSubmitting;
 

package/src/form/validation.ts

@@ -109,7 +109,11 @@ export function getYupMapObjectSchema<M extends Record<string, any>>({
             });
         });
 
-    return yup.object().shape(objectSchema);
+    const shape = yup.object().shape(objectSchema);
+    if (validation?.required) {
+        return shape.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true);
+    }
+    return shape.nullable(true);
     // const object: ObjectSchema<any> = yup.object().shape(objectSchema);
     // return validation?.required
     //     ? object.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true)

package/src/hooks/useVerifyLicense.tsx

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

package/src/internal/EntityView.tsx

@@ -68,7 +68,6 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                                                                                      onClose
                                                                                  }: EntityViewProps<M>) {
 
-
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
@@ -502,11 +501,12 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
                         <div
                             className="pb-1 self-center">
-                            <IconButton onClick={() => {
-                                onClose?.();
-                                return sideDialogContext.close(false);
-                            }}
-                                        size="large">
+                            <IconButton
+                                onClick={() => {
+                                    onClose?.();
+                                    return sideDialogContext.close(false);
+                                }}
+                                size="large">
                                 <CloseIcon/>
                             </IconButton>
                         </div>

package/src/internal/useBuildDataSource.ts

@@ -225,8 +225,6 @@ export function useBuildDataSource({
                     })
                 : firestoreValues;
 
-            console.debug("Saving entity", path, entityId, updatedFirestoreValues);
-
             return delegate.saveEntity({
                 path,
                 entityId,

package/src/internal/useBuildSideEntityController.tsx

@@ -61,6 +61,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         if (props.copy && !props.entityId) {
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
+
         const defaultSelectedView = resolveDefaultSelectedView(
             props.collection ? props.collection.defaultSelectedView : undefined,
             {
@@ -69,7 +70,10 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             }
         );
 
-        sideDialogsController.open(propsToSidePanel({ selectedSubPath: defaultSelectedView, ...props }, navigation, smallLayout));
+        sideDialogsController.open(propsToSidePanel({
+            selectedSubPath: defaultSelectedView,
+            ...props,
+        }, navigation, smallLayout));
 
     }, [sideDialogsController, navigation, smallLayout]);
 
@@ -144,17 +148,24 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
 
 const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
 
-    const collectionPath = removeInitialAndTrailingSlashes(props.path);
-    const newPath = props.entityId
-        ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-        : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-
-    return ({
-        key: `${props.path}/${props.entityId}`,
-        component: <EntitySidePanel {...props}/>,
-        urlPath: newPath,
-        parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
-        width: getEntityViewWidth(props, smallLayout),
-        onClose: props.onClose
-    });
-};
+        const collectionPath = removeInitialAndTrailingSlashes(props.path);
+        const newPath = props.entityId
+            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+
+        const resolvedPanelProps: EntitySidePanelProps<any> = {
+            ...props,
+            path: resolvedPath
+        };
+
+        return ({
+            key: `${props.path}/${props.entityId}`,
+            component: <EntitySidePanel {...resolvedPanelProps}/>,
+            urlPath: newPath,
+            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
+            width: getEntityViewWidth(props, smallLayout),
+            onClose: props.onClose
+        });
+    }
+;

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -5,6 +5,7 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
+import { EmptyValue } from "../components/EmptyValue";
 
 /**
  * @group Preview components
@@ -43,7 +44,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                             <PropertyPreview propertyKey={key}
                                              value={(value)[key]}
                                              property={mapProperty.properties![key]}
-                                             // entity={entity}
+                                // entity={entity}
                                              size={size}/>
                         </ErrorBoundary>
                     </div>
@@ -105,6 +106,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
 export function KeyValuePreview({ value }: { value: any }) {
     if (typeof value !== "object") return null;
+    if (!value) return <EmptyValue/>;
     return <div
         className="flex flex-col gap-1 w-full">
         {

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -2,12 +2,11 @@ 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";
+import { Chip, getColorSchemeForSeed } from "@firecms/ui";
 
 /**
  * @group Preview components

package/src/util/enums.ts

@@ -1,6 +1,5 @@
 import { EnumValueConfig, EnumValues } from "../types";
-import { CHIP_COLORS, ChipColorScheme } from "@firecms/ui";
-import { getColorSchemeForSeed } from "./chip_utils";
+import { CHIP_COLORS, ChipColorScheme, getColorSchemeForSeed } from "@firecms/ui";
 
 export function enumToObjectEntries(enumValues: EnumValues): EnumValueConfig[] {
     if (Array.isArray(enumValues)) {

package/src/util/icon_list.ts

@@ -0,0 +1,17 @@
+import { icon_synonyms } from "./icon_synonyms";
+import { iconKeys } from "@firecms/ui";
+
+// @ts-ignore
+import * as JsSearch from "js-search";
+
+export const iconsSearch = new JsSearch.Search("key");
+iconsSearch.addIndex("synonyms");
+
+iconsSearch.addDocuments(iconKeys
+    .map((importName) => {
+        return {
+            key: importName,
+            // @ts-ignore
+            synonyms: icon_synonyms[importName] ?? [],
+        }
+    }));