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

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.72",
   "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.72",
     "@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": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e",
   "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/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/index.tsx

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