@firecms/collection_editor 3.0.0-canary.144 → 3.0.0-canary.146

package/dist/index.es.js

@@ -5,7 +5,7 @@ import React__default, { useContext, useState, useEffect, useMemo, useRef, useDe
 import equal from "react-fast-compare";
 import { useAutoComplete, Container, Typography, Tooltip, IconButton, Chip, TextField, cls, DebouncedTextField, Autocomplete, AutocompleteItem, ExpandablePanel, SettingsIcon, ClearIcon, Select, SelectItem, BooleanSwitchWithLabel, Dialog, AutoAwesomeIcon, Badge, ListIcon, Button, CircularProgress, Paper, DialogContent, DialogActions, RuleIcon, FileUploadIcon, MultiSelect, MultiSelectItem, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, RemoveCircleIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, InfoLabel, DeleteIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, DialogTitle, Card, WarningOffIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, DoneIcon, Menu, MoreVertIcon, MenuItem, SaveIcon, UndoIcon } from "@firecms/ui";
 import * as Yup from "yup";
-import { useFormex, Field, getIn, useCreateFormex, Formex } from "@firecms/formex";
+import { useFormex, Field, getIn, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import JSON5 from "json5";
@@ -193,7 +193,7 @@ function CollectionDetailsForm({
         {
           expanded: advancedPanelExpanded,
           onExpandedChange: setAdvancedPanelExpanded,
-          title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-gray-500", children: [
+          title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
             /* @__PURE__ */ jsx(SettingsIcon, {}),
             /* @__PURE__ */ jsx(
               Typography,
@@ -997,7 +997,7 @@ function ValidationPanel({
       initiallyExpanded: false,
       asField: true,
       innerClassName: "p-4",
-      title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-gray-500", children: [
+      title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsx(RuleIcon, {}),
         /* @__PURE__ */ jsx(
           Typography,
@@ -1134,7 +1134,7 @@ function StoragePropertyField({
     /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
       ExpandablePanel,
       {
-        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-gray-500", children: [
+        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
           /* @__PURE__ */ jsx(FileUploadIcon, {}),
           /* @__PURE__ */ jsx(
             Typography,
@@ -1382,7 +1382,7 @@ function NonEditablePropertyPreview({
           !propertyConfig && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500",
+              className: "h-8 w-8 p-1 rounded-full shadow text-white bg-surface-500",
               children: /* @__PURE__ */ jsx(FunctionsIcon, { color: "inherit", size: "medium" })
             }
           ),
@@ -2918,7 +2918,7 @@ function MarkdownPropertyField({
     /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
       ExpandablePanel,
       {
-        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-gray-500", children: [
+        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
           /* @__PURE__ */ jsx(FileUploadIcon, {}),
           /* @__PURE__ */ jsx(
             Typography,
@@ -3048,6 +3048,7 @@ const PropertyForm = React__default.memo(
       onPropertyChanged?.(params);
     };
     const formexController = useCreateFormex({
+      debugId: "PROPERTY_FORM",
       initialValues: property ? { id: propertyKey, ...property } : initialValue,
       initialErrors,
       validateOnChange: true,
@@ -3708,7 +3709,7 @@ function GetCodeDialog({
   open
 }) {
   const snackbarController = useSnackbarController();
-  const code = collection ? 'import { EntityCollection } from "@firecms/core";\n\nconst ' + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "	") : "No collection selected";
+  const code = collection ? 'import { EntityCollection } from "@firecms/core";\n\nconst ' + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "	") : "No collection selected";
   return /* @__PURE__ */ jsxs(
     Dialog,
     {
@@ -3778,33 +3779,34 @@ function GetCodeDialog({
 }
 function collectionToCode(collection) {
   const propertyCleanup = (value) => {
-    if (typeof value === "function") {
-      return value;
+    const valueCopy = clone(value);
+    if (typeof valueCopy === "function") {
+      return valueCopy;
     }
-    if (Array.isArray(value)) {
-      return value.map((v) => propertyCleanup(v));
+    if (Array.isArray(valueCopy)) {
+      return valueCopy.map((v) => propertyCleanup(v));
     }
-    if (typeof value === "object") {
-      if (value === null)
-        return value;
-      Object.keys(value).forEach((key) => {
-        if (!isEmptyObject(value)) {
-          const childRes = propertyCleanup(value[key]);
+    if (typeof valueCopy === "object") {
+      if (valueCopy === null)
+        return valueCopy;
+      Object.keys(valueCopy).forEach((key) => {
+        if (!isEmptyObject(valueCopy)) {
+          const childRes = propertyCleanup(valueCopy[key]);
           if (childRes !== null && childRes !== void 0 && childRes !== false && !isEmptyObject(childRes)) {
-            value[key] = childRes;
+            valueCopy[key] = childRes;
           } else {
-            delete value[key];
+            delete valueCopy[key];
           }
         }
       });
     }
-    delete value.fromBuilder;
-    delete value.resolved;
-    delete value.propertiesOrder;
-    delete value.propertyConfig;
-    delete value.resolvedProperties;
-    delete value.editable;
-    return value;
+    delete valueCopy.fromBuilder;
+    delete valueCopy.resolved;
+    delete valueCopy.propertiesOrder;
+    delete valueCopy.propertyConfig;
+    delete valueCopy.resolvedProperties;
+    delete valueCopy.editable;
+    return valueCopy;
   };
   return {
     id: collection.id,
@@ -3959,15 +3961,10 @@ function CollectionPropertiesEditorForm({
     previousId,
     namespace
   }) => {
+    console.log("!!!!!! onPropertyChanged", property);
     const fullId = id ? getFullId(id, namespace) : void 0;
     const propertyPath = fullId ? idToPropertiesPath(fullId) : void 0;
     if (previousId && previousId !== id) {
-      console.debug("onPropertyChanged, id change", {
-        id,
-        property,
-        previousId,
-        namespace
-      });
       const previousFullId = getFullId(previousId, namespace);
       const previousPropertyPath = idToPropertiesPath(previousFullId);
       const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
@@ -4023,7 +4020,7 @@ function CollectionPropertiesEditorForm({
     setSelectedPropertyKey(propertyKey);
     setSelectedPropertyNamespace(namespace);
   };
-  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900", children: [
+  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900", children: [
     /* @__PURE__ */ jsxs("div", { className: cls(
       "p-4 md:p-8 pb-20 md:pb-20",
       "col-span-12 lg:col-span-5 h-full overflow-auto",
@@ -5124,9 +5121,9 @@ function TemplateButton({
           onClick,
           className: cls(
             "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-            "text-gray-700 dark:text-slate-300",
+            "text-surface-700 dark:text-surface-accent-300",
             "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
-            "border-gray-400 dark:border-gray-600 "
+            "border-surface-400 dark:border-surface-600 "
           ),
           children: [
             icon,
@@ -5697,7 +5694,7 @@ function CollectionEditorInternal({
     try {
       if (!isNewCollection) {
         saveCollection(newCollectionState).then(() => {
-          formexController.resetForm({ values: initialValues });
+          formexController.resetForm();
           handleClose(newCollectionState);
         });
         return;
@@ -5781,7 +5778,8 @@ function CollectionEditorInternal({
   const formController = useCreateFormex({
     initialValues,
     onSubmit,
-    validation
+    validation,
+    debugId: "COLLECTION_EDITOR"
   });
   const {
     values,
@@ -5836,7 +5834,7 @@ function CollectionEditorInternal({
       Tabs,
       {
         value: currentView,
-        className: cls(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b"),
+        className: cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b"),
         onValueChange: (v) => setCurrentView(v),
         children: [
           /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
@@ -6499,7 +6497,7 @@ function CollectionViewHeaderAction({
       children: /* @__PURE__ */ jsx(
         IconButton,
         {
-          className: onHover ? "bg-white dark:bg-gray-950" : "hidden",
+          className: onHover ? "bg-white dark:bg-surface-950" : "hidden",
           onClick: () => {
             collectionEditorController.editProperty({
               propertyKey,
@@ -6537,7 +6535,7 @@ function PropertyAddColumnComponent({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950",
+          className: "p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950",
           onClick: () => {
             collectionEditorController.editProperty({
               editedCollectionId: collection.id,
@@ -6555,7 +6553,7 @@ function PropertyAddColumnComponent({
 }
 function NewCollectionButton() {
   const collectionEditorController = useCollectionEditorController();
-  return /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-900 min-w-fit rounded", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "bg-surface-50 dark:bg-surface-900 min-w-fit rounded", children: /* @__PURE__ */ jsxs(
     Button,
     {
       className: "min-w-fit",
@@ -6755,7 +6753,7 @@ function IntroWidget({}) {
   return /* @__PURE__ */ jsxs(
     Paper,
     {
-      className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2",
+      className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2",
       children: [
         /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" }),
         /* @__PURE__ */ jsx(Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." }),