@firecms/core 3.0.0-canary.210 → 3.0.0-canary.211

package/dist/components/EntityJsonPreview.d.ts

@@ -0,0 +1,3 @@
+export declare function EntityJsonPreview({ values }: {
+    values: object;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/core/EntityEditView.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { Entity, EntityCollection, EntityStatus, User } from "../types";
 import { EntityFormProps } from "../form";
+export declare const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export declare const JSON_TAB_VALUE = "__json";
 export type OnUpdateParams = {
     entity: Entity<any>;
     status: EntityStatus;
@@ -35,7 +37,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * an entity is opened.
  */
 export declare function EntityEditView<M extends Record<string, any>, USER extends User>({ entityId, ...props }: EntityEditViewProps<M>): import("react/jsx-runtime").JSX.Element;
-export declare function EntityEditViewInner<M extends Record<string, any>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionIds, onValuesModified, onSaved, onTabChange, entity, cachedDirtyValues, dataLoading, layout, barActions, status, setStatus, formProps, }: EntityEditViewProps<M> & {
+export declare function EntityEditViewInner<M extends Record<string, any>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionIds, onValuesModified, onSaved, onTabChange, entity, cachedDirtyValues, dataLoading, layout, barActions, status, setStatus, formProps }: EntityEditViewProps<M> & {
     entity?: Entity<M>;
     cachedDirtyValues?: Partial<M>;
     dataLoading: boolean;

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect, useDeferredValue } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Alert, CheckIcon, NotesIcon, InfoIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, Tab, Tabs, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Alert, CheckIcon, NotesIcon, InfoIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useCreateFormex, Formex, setIn, useFormex, getIn, Field } from "@firecms/formex";
@@ -13,6 +13,7 @@ import * as locales from "date-fns/locale";
 import useMeasure from "react-use-measure";
 import * as yup from "yup";
 import { FixedSizeList } from "react-window";
+import { themes, Highlight } from "prism-react-renderer";
 import { useDropzone } from "react-dropzone";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import Resizer from "react-image-file-resizer";
@@ -21529,7 +21530,99 @@ function buildSideActions({
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) })
   ] });
 }
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+function EntityJsonPreview(t0) {
+  const $ = c(9);
+  const {
+    values
+  } = t0;
+  let t1;
+  if ($[0] !== values) {
+    t1 = JSON.stringify(values, null, "	");
+    $[0] = values;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const code = t1;
+  const {
+    mode
+  } = useModeController();
+  const preRef = useRef(null);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+        if (preRef.current) {
+          e.preventDefault();
+          e.stopPropagation();
+          const selection = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(preRef.current);
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const handleGlobalKeyDown = t2;
+  let t3;
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      document.addEventListener("keydown", handleGlobalKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleGlobalKeyDown);
+      };
+    };
+    t4 = [handleGlobalKeyDown];
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t3 = $[3];
+    t4 = $[4];
+  }
+  useEffect(t3, t4);
+  const t5 = mode === "dark" ? themes.vsDark : themes.vsLight;
+  let t6;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = (t72) => {
+      const {
+        style,
+        tokens,
+        getLineProps,
+        getTokenProps
+      } = t72;
+      return /* @__PURE__ */ jsx("pre", { ref: preRef, style: {
+        ...style,
+        background: "inherit"
+      }, className: "container mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsx("div", { ...getLineProps({
+        line
+      }), className: "text-wrap", children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({
+        token
+      }), className: "word-break" }, key)) }, i)) });
+    };
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== code || $[7] !== t5) {
+    t7 = /* @__PURE__ */ jsx(Highlight, { theme: t5, code, language: "json", children: t6 });
+    $[6] = code;
+    $[7] = t5;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  return t7;
+}
+const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+const JSON_TAB_VALUE = "__json";
 function EntityEditView(t0) {
   const $ = c(28);
   let entityId;
@@ -21691,7 +21784,8 @@ function EntityEditViewInner({
   const subcollectionsCount = subcollections?.length ?? 0;
   const customViews = collection.entityViews;
   const customViewsCount = customViews?.length ?? 0;
-  const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+  const includeJsonView = true;
+  const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
   const {
     resolvedEntityViews,
     selectedEntityView,
@@ -21711,6 +21805,9 @@ function EntityEditViewInner({
     }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
   }).filter(Boolean);
   const globalLoading = dataLoading && !usedEntity;
+  const jsonView = /* @__PURE__ */ jsx("div", { className: cls("relative flex-1 h-full overflow-auto w-full", {
+    "hidden": selectedTab !== JSON_TAB_VALUE
+  }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityJsonPreview, { values: formContext?.values ?? {} }) }) }, "json_view");
   const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
     const subcollectionId = subcollection.id ?? subcollection.path;
     const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
@@ -21750,21 +21847,22 @@ function EntityEditViewInner({
   }, Builder: selectedSecondaryForm?.Builder });
   const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
   const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
-  const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
   let result = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
-    shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
       barActions,
       /* @__PURE__ */ jsx("div", { className: "flex-grow" }),
       globalLoading && /* @__PURE__ */ jsx("div", { className: "self-center", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }),
-      hasAdditionalViews && /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_0) => {
+      /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_0) => {
         onSideTabClick(value_0);
       }, children: [
+        /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsx(CodeIcon, { size: "small" }) }),
         /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
         customViewTabs,
         subcollectionTabs
       ] })
     ] }),
     globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView,
+    jsonView,
     customViewsView,
     subCollectionsViews
   ] });
@@ -21880,7 +21978,7 @@ function getEntityViewWidth(props, small, customizationController) {
   const {
     selectedSecondaryForm
   } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-  const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+  const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
   let resolvedWidth;
   if (props.width) {
     resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;