@firecms/core 3.0.0-canary.145 → 3.0.0-canary.147

package/dist/types/auth.d.ts

@@ -1,5 +1,4 @@
 import { User } from "./user";
-import { Role } from "./roles";
 import { DataSourceDelegate } from "./datasource";
 import { StorageSource } from "./storage";
 /**
@@ -14,10 +13,6 @@ export type AuthController<USER extends User = any, ExtraData = any> = {
      * The values can be: the user object, null if they skipped login
      */
     user: USER | null;
-    /**
-     * Roles related to the logged user
-     */
-    userRoles?: Role[];
     /**
      * 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
@@ -52,7 +47,6 @@ export type AuthController<USER extends User = any, ExtraData = any> = {
     extra: ExtraData;
     setExtra: (extra: ExtraData) => void;
     setUser?: (user: USER | null) => void;
-    setUserRoles?: (roles: Role[]) => void;
 };
 /**
  * Implement this function to allow access to specific users.

package/dist/util/icons.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export declare function getIcon(iconKey?: string, className?: string): React.ReactElement | undefined;
+import { IconColor } from "@firecms/ui";
+export declare function getIcon(iconKey?: string, className?: string, color?: IconColor): React.ReactElement | undefined;
 export type IconViewProps = {
     path: string;
     name: string;
@@ -9,6 +10,7 @@ export type IconViewProps = {
 };
 export declare const IconForView: React.NamedExoticComponent<{
     collectionOrView?: IconViewProps;
+    color?: IconColor;
     className?: string;
     size?: "smallest" | "small" | "medium" | "large" | number;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.145",
+    "version": "3.0.0-canary.147",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.145",
-        "@firecms/formex": "^3.0.0-canary.145",
-        "@firecms/ui": "^3.0.0-canary.145",
+        "@firecms/editor": "^3.0.0-canary.147",
+        "@firecms/formex": "^3.0.0-canary.147",
+        "@firecms/ui": "^3.0.0-canary.147",
         "@hello-pangea/dnd": "^17.0.0",
         "@radix-ui/react-portal": "^1.1.2",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "e5d660f00c5806e1b63839c013af3c973f3dd47e",
+    "gitHead": "904db63d5e1b326111f6d4c2787b7fde84b1decf",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -8,7 +8,7 @@ import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { cls } from "@firecms/ui";
+import { cls, EditIcon } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -151,18 +151,17 @@ export const TableReferenceFieldInternal = React.memo(
 
                 {valueNotSet &&
                     <EntityPreviewContainer
-                        className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
+                        className={cls("px-3 py-2 text-sm font-medium flex items-center",
                             multiselect ? "gap-4" : "gap-6",
                             disabled
                                 ? "text-surface-accent-500"
-                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                                : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
                         onClick={handleOpen}
                         size={"medium"}>
-                        <IconForView
+                        <EditIcon
                             size={"small"}
-                            collectionOrView={collection}
-                            className={"text-surface-300 dark:text-surface-600"}/>
-                        Edit {title}
+                            className={"ml-2 mr-1 text-surface-300 dark:text-surface-600"}/>
+                        {title}
                     </EntityPreviewContainer>}
 
             </div>

package/src/components/EntityPreview.tsx

@@ -77,12 +77,15 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        <div className={cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
             {imageProperty && <PropertyPreview property={imageProperty}
                                                propertyKey={imagePropertyKey as string}
                                                size={"smallest"}
                                                value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
-            {!imageProperty && <IconForView collectionOrView={collection} size={size} className={"m-auto"}/>}
+            {!imageProperty && <IconForView collectionOrView={collection}
+                                            color={"primary"}
+                                            size={size}
+                                            className={"m-auto p-1"}/>}
         </div>
 
 
@@ -181,7 +184,6 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-
 export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
                                                                                                          children,
                                                                                                          hover,

package/src/hooks/useBuildNavigationController.tsx

@@ -188,7 +188,6 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         if (authController.initialLoading)
             return;
 
-        console.log("refresh", authController)
         console.debug("Refreshing navigation");
 
         try {
@@ -462,9 +461,7 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
-    console.log("resolvedCollections 2", resolvedCollections, collectionPermissions);
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
-    console.log("resolvedCollections 3", resolvedCollections, authController);
     return resolvedCollections;
 }
 

package/src/types/auth.tsx

@@ -17,11 +17,6 @@ export type AuthController<USER extends User = any, ExtraData = any> = {
      */
     user: USER | null;
 
-    /**
-     * Roles related to the logged user
-     */
-    userRoles?: Role[];
-
     /**
      * 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
@@ -66,7 +61,6 @@ export type AuthController<USER extends User = any, ExtraData = any> = {
 
     setUser?: (user: USER | null) => void;
 
-    setUserRoles?: (roles: Role[]) => void;
 };
 
 /**

package/src/util/icons.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { hashString } from "./hash";
-import { coolIconKeys, Icon, iconKeys } from "@firecms/ui";
+import { coolIconKeys, Icon, IconColor, iconKeys } from "@firecms/ui";
 import { slugify } from "./strings";
 import equal from "react-fast-compare"
 
-export function getIcon(iconKey?: string, className?: string): React.ReactElement | undefined {
+export function getIcon(iconKey?: string, className?: string, color?:IconColor): React.ReactElement | undefined {
     if (!iconKey) return undefined;
     iconKey = slugify(iconKey);
     if (!(iconKey in iconKeysMap)) {
         return undefined;
     }
-    return iconKey in iconKeysMap ? <Icon iconKey={iconKey} size={"medium"} className={className}/> : undefined;
+    return iconKey in iconKeysMap ? <Icon iconKey={iconKey} size={"medium"} className={className} color={color}/> : undefined;
 }
 
 export type IconViewProps = {
@@ -25,12 +25,16 @@ export const IconForView = React.memo(
     function IconForView({
                              collectionOrView,
                              className,
-                             size = "medium"
+                             color,
+                             size = "medium",
                          }: {
-        collectionOrView?: IconViewProps, className?: string, size?: "smallest" | "small" | "medium" | "large" | number,
+        collectionOrView?: IconViewProps,
+        color?: IconColor,
+        className?: string,
+        size?: "smallest" | "small" | "medium" | "large" | number,
     }): React.ReactElement {
         if (!collectionOrView) return <></>;
-        const icon = getIcon(collectionOrView.icon, className);
+        const icon = getIcon(collectionOrView.icon, className, color);
         if (collectionOrView?.icon && icon)
             return icon;
 
@@ -51,9 +55,9 @@ export const IconForView = React.memo(
         if (!key)
             key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
 
-        return <Icon iconKey={key} size={size} className={className}/>;
+        return <Icon iconKey={key} size={size} className={className} color={color}/>;
     }, (prevProps, nextProps) => {
-        return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
+        return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon) && equal(prevProps.color, nextProps.color);
     });
 
 const iconKeysMap: Record<string, string> = iconKeys.reduce((acc: Record<string, string>, key) => {