References preview fixes

Some style updates.

Author: fgatti675

CONTRIBUTING.md

@@ -5,18 +5,28 @@ If you would like to make changes to the source, feel free to submit a PR!
 
 ## Getting Started
 
-You can find the source code for the library under `lib`.
-The demo project used for development is under `example`.
+This project is a monorepo managed with [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/).
 
-After pulling the code you just need to run
+You can find all the FireCMS packages in the `packages` folder.
+The code that simulates a final project implemented by a user can be found in the `examples` folder.
+
+All dependencies are linked automatically and just running the following commands should be enough to get you started.
+
+After pulling the code you just need to run:
 
 ```bash
 yarn
 yarn dev
 ``` 
-
 to start the demo project.
 
+You can also run:
+```bash
+yarn
+yarn pro
+``` 
+to use the example project with the Pro version of FireCMS.
+
 ## Support and discussion
 
 Please join our [Discord channel](https://discord.gg/fxy7xsQm3m) to discuss any details regarding adaptations. We are

examples/example_pro/src/FirestoreApp/App.tsx

@@ -58,7 +58,7 @@ import CustomColorTextField from "./custom_field/CustomColorTextField";
 import { booksCollection } from "./collections/books_collection";
 import { FirebaseApp } from "@firebase/app";
 import { TestEditorView } from "./views/TestEditorView";
-import { useCollectionEditorPlugin } from "@firecms/collection_editor";
+import { mergeCollections, useCollectionEditorPlugin } from "@firecms/collection_editor";
 import { useFirestoreCollectionsConfigController } from "@firecms/collection_editor_firebase";
 import { ReCaptchaEnterpriseProvider } from "@firebase/app-check";
 import { useExportPlugin } from "@firecms/data_export";
@@ -231,11 +231,11 @@ export function App() {
         if (process.env.NODE_ENV !== "production") {
             sourceCollections.push(testCollection);
         }
-        return sourceCollections;
-        // return mergeCollections(
-        //     sourceCollections,
-        //     collectionConfigController.collections ?? []
-        // )
+        // return sourceCollections;
+        return mergeCollections(
+            sourceCollections,
+            collectionConfigController.collections ?? []
+        );
     }, [collectionConfigController.collections, secondaryFirestoreDelegate]);
 
     const views: CMSView[] = useMemo(() => ([
@@ -348,8 +348,12 @@ export function App() {
                     dataSourceDelegate={firestoreDelegate}
                     storageSource={storageSource}
 
-                    plugins={[userManagementPlugin, dataEnhancementPlugin, exportPlugin, demoPlugin
-                        // collectionEditorPlugin
+                    plugins={[
+                        userManagementPlugin,
+                        dataEnhancementPlugin,
+                        exportPlugin,
+                        demoPlugin,
+                        collectionEditorPlugin
                     ]}
                     onAnalyticsEvent={onAnalyticsEvent}
                     propertyConfigs={propertyConfigs}

examples/example_pro/src/FirestoreApp/collection_actions/SampleCollectionActions.tsx

@@ -17,9 +17,9 @@ export function SampleCollectionActions({ selectionController }: CollectionActio
 
     return (
         <Button onClick={onClick}
-                color="primary"
+                color="text"
                 variant={"text"}>
-            Extra action
+            Demo action
         </Button>
     );
 

examples/example_pro/src/FirestoreApp/collections/products_collection.tsx

@@ -114,7 +114,7 @@ export const productsCollection = buildCollection<Product>({
         create: true,
         delete: true
     }),
-    Actions: [SampleCollectionActions, CustomFiltersActions],
+    Actions: [SampleCollectionActions],
     subcollections: [localeCollection],
     // defaultSelectedView: "sample_custom_view",
     entityViews: [

packages/firecms_core/src/components/EntityPreview.tsx

@@ -71,11 +71,15 @@ export function EntityPreview({
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
     const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
-    const usedImageProperty = "of" in imageProperty ? imageProperty.of : imageProperty;
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
 
-    const imageValue = getValueInPath(entity.values, imagePropertyKey as string);
-    const usedImageValue = "of" in imageProperty ? ((imageValue ?? []).length > 0 ? imageValue[0] : undefined) : imageValue;
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
 
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
@@ -108,7 +112,7 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"truncate my-0.5 text-sm font-medium"}>
                     {
                         entity
                             ? <PropertyPreview
@@ -129,7 +133,7 @@ export function EntityPreview({
 
                 return (
                     <div key={"ref_prev_" + key}
-                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
                         {
                             entity
                                 ? <PropertyPreview

packages/firecms_core/src/core/EntityEditView.tsx

@@ -785,7 +785,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                 })?.toString()}
                             </>;
                         return (
-                            <div>
+                            <div key={`additional_${key}`}>
                                 <LabelWithIconAndTooltip
                                     propertyKey={key}
                                     icon={<NotesIcon size={"small"}/>}
@@ -808,8 +808,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 })
                 .filter(Boolean)}
 
-        </>
-    );
+        </>);
 
     const disabled = formex.isSubmitting || (!modified && status === "existing");
     const formRef = React.useRef<HTMLDivElement>(null);

packages/firecms_core/src/preview/property_previews/MapPropertyPreview.tsx

@@ -127,7 +127,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {childValue && ("toString" in childValue) && <Typography>
+                            {childValue && <Typography>
                                 <ErrorBoundary>
                                     {childValue.toString()}
                                 </ErrorBoundary>

website/src/neat_colors.json

@@ -21,7 +21,7 @@
       "enabled": true
     }
   ],
-  "speed": 3,
+  "speed": 2,
   "horizontalPressure": 2,
   "verticalPressure": 2,
   "waveFrequencyX": 2,