@firecms/collection_editor 3.0.0-beta.2-pre.4 → 3.0.0-beta.2-pre.5

package/dist/ui/RootCollectionSuggestions.d.ts

@@ -1 +1,3 @@
-export declare function RootCollectionSuggestions(): import("react/jsx-runtime").JSX.Element;
+export declare function RootCollectionSuggestions({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { EntityCollection, FireCMSPlugin, ModifyCollectionProps, User } from "@firecms/core";
+import { FireCMSPlugin, User } from "@firecms/core";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
@@ -9,7 +9,6 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      * Firebase app where the configuration is saved.
      */
     collectionConfigController: CollectionsConfigController;
-    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void;
     /**
      * Define what actions can be performed on the configuration.
      */
@@ -31,6 +30,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser: (uid: string) => UserType | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    introMode?: "new_project" | "existing_project";
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -43,4 +43,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, modifyCollection, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, introMode, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function IntroWidget({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.4",
+  "version": "3.0.0-beta.2-pre.5",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.2-pre.4",
-    "@firecms/formex": "^3.0.0-beta.2-pre.4",
-    "@firecms/schema_inference": "^3.0.0-beta.2-pre.4",
-    "@firecms/ui": "^3.0.0-beta.2-pre.4",
+    "@firecms/data_import_export": "^3.0.0-beta.2-pre.5",
+    "@firecms/formex": "^3.0.0-beta.2-pre.5",
+    "@firecms/schema_inference": "^3.0.0-beta.2-pre.5",
+    "@firecms/ui": "^3.0.0-beta.2-pre.5",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -63,7 +63,7 @@
     "react-router-dom": "^6.22.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.2",
+    "vite": "^5.1.1",
     "vite-plugin-fonts": "^0.7.0"
   },
   "files": [
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a947c08aada0e374aec7dff2b0dc9e540e170834"
+  "gitHead": "5159646cfdb35e11cc510080bd3cff17104d0cb4"
 }

package/src/ui/RootCollectionSuggestions.tsx

@@ -1,9 +1,9 @@
 import { unslugify, useAuthController, useNavigationController } from "@firecms/core";
-import { AddIcon, Chip, Collapse, Typography, } from "@firecms/ui";
+import { AddIcon, Chip, CircularProgress, Collapse, Typography, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import React from "react";
 
-export function RootCollectionSuggestions() {
+export function RootCollectionSuggestions({ introMode }: { introMode?: "new_project" | "existing_project" }) {
 
     const authController = useAuthController();
     const navigationController = useNavigationController();
@@ -15,22 +15,27 @@ export function RootCollectionSuggestions() {
         }).createCollections
         : true;
 
-    const rootPathSuggestions = collectionEditorController.rootPathSuggestions ?? [];
+    const rootPathSuggestions = collectionEditorController.rootPathSuggestions;
 
-    const showSuggestions = rootPathSuggestions.length > 3 || ((navigationController.collections ?? []).length === 0 && rootPathSuggestions.length > 0);
+    const showSuggestions = (rootPathSuggestions ?? []).length > 3 || ((navigationController.collections ?? []).length === 0 && (rootPathSuggestions ?? []).length > 0);
+    const forceShowSuggestions = introMode === "existing_project";
     return <Collapse
-        in={showSuggestions}>
+        in={forceShowSuggestions || showSuggestions}>
 
         <div
             className={"flex flex-col gap-1 p-2 my-4"}>
 
-            <Typography variant={"body2"} color={"secondary"}>
+            {!introMode && <Typography variant={"body2"} color={"secondary"}>
                 Create a collection from your data:
-            </Typography>
+            </Typography>}
+
+            {introMode === "existing_project" && <Typography>
+                You will see your <b>database collections</b> here, a few seconds after project creation
+            </Typography>}
 
             <div
                 className={"flex flex-row gap-1 overflow-scroll no-scrollbar "}>
-                {rootPathSuggestions.map((path) => {
+                {(rootPathSuggestions ?? []).map((path) => {
                     return (
                         <div key={path}>
                             <Chip
@@ -50,6 +55,8 @@ export function RootCollectionSuggestions() {
                         </div>
                     );
                 })}
+                {rootPathSuggestions === undefined && <CircularProgress size={"small"}/>}
+                {rootPathSuggestions?.length === 0 && <Typography variant={"caption"}>No suggestions</Typography>}
             </div>
         </div>
     </Collapse>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -21,7 +21,7 @@ import {
 } from "@firecms/ui";
 
 import { FieldHelperView } from "./properties/FieldHelperView";
-import { useFormex, Field, getIn } from "@firecms/formex";
+import { Field, getIn, useFormex } from "@firecms/formex";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -70,7 +70,7 @@ export function CollectionDetailsForm({
 
         const singularNameTouched = getIn(touched, "singularName");
         if (!singularNameTouched && isNewCollection && name) {
-            setFieldValue("singularName", singular(name))
+            setFieldValue("singularName", singular(name));
         }
 
     };
@@ -107,6 +107,8 @@ export function CollectionDetailsForm({
             customIdValue = "optional";
         }
     }
+
+    const showErrors = submitCount > 0;
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -141,7 +143,7 @@ export function CollectionDetailsForm({
                             onChange={(e: any) => updateName(e.target.value)}
                             label={"Name"}
                             required
-                            error={touched.name && Boolean(errors.name)}/>
+                            error={showErrors && Boolean(errors.name)}/>
                         <FieldHelperView error={touched.name && Boolean(errors.name)}>
                             {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
                         </FieldHelperView>
@@ -153,7 +155,7 @@ export function CollectionDetailsForm({
                                label={"Path"}
                                disabled={!isNewCollection}
                                required
-                               error={touched.path && Boolean(errors.path)}/>
+                               error={showErrors && Boolean(errors.path)}/>
 
                         <FieldHelperView error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
@@ -165,7 +167,7 @@ export function CollectionDetailsForm({
 
                     {!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>
 
-                        <TextField error={touched.group && Boolean(errors.group)}
+                        <TextField error={showErrors && Boolean(errors.group)}
                                    disabled={isSubmitting}
                                    value={values.group ?? ""}
                                    autoComplete="off"
@@ -191,7 +193,7 @@ export function CollectionDetailsForm({
                             })}
                         </Autocomplete>
                         <FieldHelperView>
-                            {touched.group && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
                         </FieldHelperView>
                     </div>}
 
@@ -215,7 +217,7 @@ export function CollectionDetailsForm({
                                            as={DebouncedTextField}
                                            disabled={!isNewCollection}
                                            label={"Collection id"}
-                                           error={touched.id && Boolean(errors.id)}/>
+                                           error={showErrors && Boolean(errors.id)}/>
                                     <FieldHelperView error={touched.id && Boolean(errors.id)}>
                                         {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
                                     </FieldHelperView>
@@ -223,7 +225,7 @@ export function CollectionDetailsForm({
 
                                 <div className={"col-span-12"}>
                                     <TextField
-                                        error={touched.singularName && Boolean(errors.singularName)}
+                                        error={showErrors && Boolean(errors.singularName)}
                                         id={"singularName"}
                                         aria-describedby={"singularName-helper"}
                                         onChange={(e) => {
@@ -232,13 +234,13 @@ export function CollectionDetailsForm({
                                         }}
                                         value={values.singularName ?? ""}
                                         label={"Singular name"}/>
-                                    <FieldHelperView error={touched.singularName && Boolean(errors.singularName)}>
-                                        {touched.singularName && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
+                                    <FieldHelperView error={showErrors && Boolean(errors.singularName)}>
+                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
                                     </FieldHelperView>
                                 </div>
                                 <div className={"col-span-12"}>
                                     <TextField
-                                        error={touched.description && Boolean(errors.description)}
+                                        error={showErrors && Boolean(errors.description)}
                                         id="description"
                                         value={values.description ?? ""}
                                         onChange={handleChange}
@@ -247,8 +249,8 @@ export function CollectionDetailsForm({
                                         aria-describedby="description-helper-text"
                                         label="Description"
                                     />
-                                    <FieldHelperView error={touched.description && Boolean(errors.description)}>
-                                        {touched.description && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
+                                    <FieldHelperView error={showErrors && Boolean(errors.description)}>
+                                        {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
                                     </FieldHelperView>
                                 </div>
 

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -261,6 +261,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const importConfig = useImportConfig();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
+    console.log({ importConfig })
 
     // Use this ref to store which properties have errors
     const propertyErrorsRef = useRef({});
@@ -374,7 +375,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
                     formexController.resetForm({ values: initialValues });
-                    // setNextMode();
                     handleClose(newCollectionState);
                 });
                 return;
@@ -482,7 +482,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
     const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath, parentPaths ?? []) : undefined;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         setFormDirty(dirty);
     }, [dirty]);
@@ -552,9 +551,9 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
-                            onContinue={(data) => {
-                                if (data) {
-                                    onImportDataSet(data);
+                            onContinue={(importData) => {
+                                if (importData) {
+                                    onImportDataSet(importData);
                                     setCurrentView("import_data_mapping");
                                 } else {
                                     setCurrentView("details");
@@ -577,12 +576,13 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "import_data_saving" && importConfig &&
                         <ImportSaveInProgress importConfig={importConfig}
                                               collection={values}
-                                              onImportSuccess={(importedCollection) => {
-                                                  handleClose(importedCollection);
+                                              onImportSuccess={async (importedCollection) => {
                                                   snackbarController.open({
                                                       type: "info",
                                                       message: "Data imported successfully"
                                                   });
+                                                  await saveCollection(values);
+                                                  handleClose(importedCollection);
                                               }}
                         />}
 
@@ -649,7 +649,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             <Button variant={"text"}
                                     type="button"
                                     onClick={() => {
-                                        saveCollection(values);
                                         setCurrentView("import_data_mapping");
                                     }}>
                                 <ArrowBackIcon/>
@@ -718,7 +717,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             color="primary"
                             type="submit"
                             loading={isSubmitting}
-                            // disabled={isSubmitting || !dirty}
                         >
                             Update collection
                         </LoadingButton>}

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -99,7 +99,7 @@ function collectionToCode(collection: EntityCollection): object {
         customId: collection.customId,
         initialFilter: collection.initialFilter,
         initialSort: collection.initialSort,
-        properties: Object.entries(collection.properties)
+        properties: Object.entries(collection.properties ?? {})
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -140,7 +140,7 @@ export function CollectionEditorImportMapping({
 
     return (
 
-        <div className={"overflow-auto my-auto bg-gray-50 dark:bg-gray-900"}>
+        <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
                 <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>

package/src/useCollectionEditorPlugin.tsx

@@ -1,13 +1,5 @@
 import React from "react";
-import {
-    EntityCollection,
-    FireCMSPlugin,
-    joinCollectionLists,
-    makePropertiesEditable,
-    ModifyCollectionProps,
-    Properties,
-    User
-} from "@firecms/core";
+import { FireCMSPlugin, useAuthController, useNavigationController, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
@@ -20,6 +12,8 @@ import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
+import { AddIcon, Button, Typography } from "@firecms/ui";
+import { useCollectionEditorController } from "./useCollectionEditorController";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -28,8 +22,6 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      */
     collectionConfigController: CollectionsConfigController;
 
-    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void;
-
     /**
      * Define what actions can be performed on the configuration.
      */
@@ -59,6 +51,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    introMode?: "new_project" | "existing_project";
+
 }
 
 /**
@@ -75,7 +69,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
 ({
      collectionConfigController,
-     modifyCollection,
+     introMode,
      configPermissions,
      reservedGroups,
      extraView,
@@ -86,8 +80,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      onAnalyticsEvent
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
-
-
     return {
         name: "Collection Editor",
         loading: collectionConfigController.loading,
@@ -110,9 +102,10 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenEnd: <RootCollectionSuggestions/>,
+            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
+            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
             CollectionActions: HomePageEditorCollectionAction,
-            AdditionalCards: NewCollectionCard,
+            AdditionalCards: introMode ? undefined : NewCollectionCard,
         },
         collectionView: {
             HeaderAction: CollectionViewHeaderAction,
@@ -120,3 +113,44 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         }
     };
 }
+
+export function IntroWidget({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}) {
+
+    const navigation = useNavigationController();
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+        }).createCollections
+        : true;
+
+    return (
+        <div className={"mt-8 flex flex-col mt-8 p-2"}>
+            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
+            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
+            <Typography paragraph={true}>
+                Start building collections in FireCMS easily. Map them to your existing
+                database data, import from files, or use our templates. Simplify your data management process
+                now.
+            </Typography>
+            {canCreateCollections && <Button
+                className={"mt-4"}
+                onClick={collectionEditorController && canCreateCollections
+                    ? () => collectionEditorController.createCollection({
+                        parentCollectionIds: [],
+                        redirect: true,
+                        sourceClick: "new_collection_card"
+                    })
+                    : undefined}>
+                <AddIcon/>Create your first collection
+            </Button>}
+        </div>
+    );
+}