@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/FileBrowser/types.ts

@@ -0,0 +1,61 @@
+import type { MediaAspect, TileSizeRung } from "@multiplatform.one/theme";
+
+export type FileBrowserView = "list" | "grid";
+export type FileBrowserLayout = "split" | "drill";
+export type FileBrowserSelectionMode = "multi" | "single";
+export type FileBrowserPaneStatus = "ready" | "loading" | "empty" | "error";
+export type FileBrowserSelectAllScope = "page" | "filtered";
+export type FileBrowserBulkBarPlacement = "top" | "bottom";
+
+/** One File-doctype row (folder or file). */
+export type FileBrowserFile = {
+  name: string;
+  file_name: string;
+  file_url?: string;
+  file_size?: number;
+  file_type?: string;
+  folder?: string;
+  is_folder?: number | boolean;
+  modified?: string;
+};
+
+export type FileBrowserProps = {
+  /** Fixture / controlled File rows. Omit to load the live File doctype. */
+  files?: FileBrowserFile[];
+  foldersStatus?: FileBrowserPaneStatus;
+  filesStatus?: FileBrowserPaneStatus;
+  foldersError?: boolean | string | Error;
+  filesError?: boolean | string | Error;
+  onFoldersRetry?: () => void;
+  onFilesRetry?: () => void;
+  view?: FileBrowserView;
+  defaultView?: FileBrowserView;
+  onViewChange?: (view: FileBrowserView) => void;
+  /** Persist list|grid per surface (localStorage). Not a theme knob. */
+  surfaceId?: string;
+  selectionMode?: FileBrowserSelectionMode;
+  selectedIds?: string[];
+  onSelectedIdsChange?: (ids: string[]) => void;
+  /** Attach library current value — trailing 14×14 check (LC-21). */
+  currentValue?: string;
+  onPick?: (file: FileBrowserFile) => void;
+  currentFolder?: string;
+  onCurrentFolderChange?: (folder: string) => void;
+  tileSize?: TileSizeRung;
+  mediaAspect?: MediaAspect;
+  selectAllScope?: FileBrowserSelectAllScope;
+  bulkBarPlacement?: FileBrowserBulkBarPlacement;
+  tableZebra?: boolean;
+  /** Test / story override. Default: split ≥640, drill-in below. */
+  layout?: FileBrowserLayout;
+  /** Opens the in-pane FileUpload (same forms control Attach uses). */
+  onUpload?: (file: File) => unknown;
+  search?: string;
+  onSearchChange?: (query: string) => void;
+  onOpen?: (file: FileBrowserFile) => void;
+  onDownload?: (files: FileBrowserFile[]) => void;
+  onRename?: (file: FileBrowserFile) => void;
+  onMove?: (files: FileBrowserFile[]) => void;
+  onDelete?: (files: FileBrowserFile[]) => void;
+  accept?: string;
+};

package/src/FileBrowser/viewPersistence.ts

@@ -0,0 +1,37 @@
+import type { FileBrowserView } from "./types";
+
+const PREFIX = "mpo.filebrowser.view.";
+
+/** Survives the test-utils no-op localStorage stub; localStorage still wins after reload. */
+const memory = new Map<string, FileBrowserView>();
+
+function storageKey(surfaceId: string): string {
+  return `${PREFIX}${surfaceId}`;
+}
+
+function coerce(value: string | null | undefined): FileBrowserView | undefined {
+  return value === "grid" || value === "list" ? value : undefined;
+}
+
+export function readPersistedView(surfaceId?: string): FileBrowserView | undefined {
+  if (!surfaceId) return undefined;
+  const key = storageKey(surfaceId);
+  const remembered = memory.get(key);
+  if (remembered) return remembered;
+  try {
+    return coerce(globalThis.localStorage?.getItem(key));
+  } catch {
+    return undefined;
+  }
+}
+
+export function writePersistedView(surfaceId: string | undefined, view: FileBrowserView): void {
+  if (!surfaceId) return;
+  const key = storageKey(surfaceId);
+  memory.set(key, view);
+  try {
+    globalThis.localStorage?.setItem(key, view);
+  } catch {
+    // quota / private mode / test stub
+  }
+}

package/src/FormSidebar.stories.tsx

@@ -26,7 +26,8 @@ import {
   type SidebarSection,
 } from "./FormSidebar";
 import { FrappeForm } from "./FrappeForm";
-import { FrappeStoryProvider, LiveToDoGate } from "./frappeStoryTarget";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeStoryProvider, LiveToDoGate, frappeStoriesLive } from "./frappeStoryTarget";
 
 export default {
   title: "FrappeUI/FormSidebar",
@@ -413,6 +414,71 @@ const todoFixtureMeta = {
   permissions: [{ role: "All", read: 1, write: 1 }],
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic Live fallback (G-15 story honesty / D-05, closes UX-P18).
+//
+// FrappeStoryProvider's offline arm still targets demo.frappe.cloud as
+// baseURL. Native / Kitchen Sink / TestFlight never have the bench, so that
+// host fires CORS-failing getdoctype requests even with fixtures. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving the
+// machine. The live arm still uses FrappeStoryProvider when the bench is up.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappeformsidebar.mock.test";
+
+const liveSidebarFixtures = new InMemoryFixtureProvider({
+  DocType: [todoFixtureMeta],
+  ToDo: [
+    {
+      name: "TODO-LIVE-001",
+      doctype: "ToDo",
+      description: "Fixture fallback todo (bench unreachable)",
+      status: "Open",
+      priority: "Medium",
+      _assign: '["jane@example.com"]',
+    },
+  ],
+});
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeFormSidebarMockFetch) return;
+  w.__frappeFormSidebarMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "ToDo";
+        const meta = doctype === "ToDo" ? todoFixtureMeta : { ...todoFixtureMeta, name: doctype };
+        return jsonResponse({ docs: [meta] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) {
+        const doctype = decodeURIComponent(metaMatch[1]);
+        const meta = doctype === "ToDo" ? todoFixtureMeta : { ...todoFixtureMeta, name: doctype };
+        return jsonResponse({ data: meta });
+      }
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
+      }
+      // Everything else (DocShare, guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 /**
  * Live sidebar plumbing: renders FrappeForm (schema mode + showSidebar)
  * against the real bench ToDo doctype so the sidebar's assignments
@@ -420,28 +486,11 @@ const todoFixtureMeta = {
  * the open document in place. The `name` arg selects the document
  * (harnesses pass a real doc name via URL args). When live with no arg,
  * LiveToDoGate resolves a real ToDo so the story does not 404 on a
- * hash-named doctype. Falls back to fixtures when the bench is down —
- * the `DocType` entry below is what makes the offline branch render a
- * form rather than a meta error.
+ * hash-named doctype. Falls back to MOCK_HOST + fixtures when the bench is
+ * down — native never needs the bench or demo.frappe.cloud.
  */
-export const Live = (args: { name?: string }) => (
-  <FrappeStoryProvider
-    fixtures={
-      new InMemoryFixtureProvider({
-        DocType: [todoFixtureMeta],
-        ToDo: [
-          {
-            name: "TODO-LIVE-001",
-            doctype: "ToDo",
-            description: "Fixture fallback todo (bench unreachable)",
-            status: "Open",
-            priority: "Medium",
-            _assign: '["jane@example.com"]',
-          },
-        ],
-      })
-    }
-  >
+export const Live = (args: { name?: string }) => {
+  const form = (
     <LiveToDoGate name={args.name}>
       {(name) => (
         <FrappeForm
@@ -452,15 +501,23 @@ export const Live = (args: { name?: string }) => (
         />
       )}
     </LiveToDoGate>
-  </FrappeStoryProvider>
-);
+  );
+  if (frappeStoriesLive) {
+    return <FrappeStoryProvider>{form}</FrappeStoryProvider>;
+  }
+  return (
+    <FrappeProvider baseURL={MOCK_HOST} fixtures={liveSidebarFixtures}>
+      {form}
+    </FrappeProvider>
+  );
+};
 Live.args = { name: "" };
 Live.argTypes = { name: { control: "text" } };
 Live.parameters = {
   docs: {
     description: {
       story:
-        "Live sidebar over the real bench: assignments (_assign), shares (DocShare subscription) and metadata update in place when the open ToDo changes on the server. Opens a real bench ToDo so the live arm is not a 404. Administrator sees live DocShare rows; an ordinary Desk User is refused DocShare (403) and the Shared With section degrades — that is expected, not a product failure. Fixture fallback when the bench is down.",
+        "Live sidebar over the real bench: assignments (_assign), shares (DocShare subscription) and metadata update in place when the open ToDo changes on the server. Opens a real bench ToDo so the live arm is not a 404. Administrator sees live DocShare rows; an ordinary Desk User is refused DocShare (403) and the Shared With section degrades — that is expected, not a product failure. When the bench is down (Kitchen Sink / TestFlight / native) the fallback uses MOCK_HOST https://frappeformsidebar.mock.test plus fixtures so DocType meta never hits demo.frappe.cloud.",
     },
   },
 };

package/src/FormSidebar.tsx

@@ -17,13 +17,13 @@
  * DeskParity story.
  */
 
-import { Avatar, getInitials } from "@multiplatform.one/components";
-import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Avatar, componentColors, getInitials } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ImageSquareIcon, PlusIcon, UploadIcon, UserIcon, XIcon } from "@phosphor-icons/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import {
-  Button,
   Image,
   ListItem,
   Separator,
@@ -96,12 +96,13 @@ export interface FormSidebarProps extends Omit<YStackProps, "children"> {
 // Initials come from the catalog Avatar helper (census #21) — the local copy
 // this file carried could drift from the one Timeline/Avatar consume.
 
-const avatarColors = ["$blue4", "$green4", "$orange4", "$purple4", "$red4"];
+// R12 tint family (decorative, not semantic): orange / blue / purple / pink.
+const avatarColors = ["$orange4", "$blue4", "$purple4", "$pink4"];
 function avatarColor(index: number): string {
   return avatarColors[index % avatarColors.length];
 }
 
-const textColors = ["$blue11", "$green11", "$orange11", "$purple11", "$red11"];
+const textColors = ["$orange11", "$blue11", "$purple11", "$pink11"];
 function textColor(index: number): string {
   return textColors[index % textColors.length];
 }
@@ -122,9 +123,10 @@ export function FormSidebar({
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
-  // Resolved token, not "var(--color10)": CSS var strings reach react-native-svg
+  // Resolved token, not "var(--color11)": CSS var strings reach react-native-svg
   // unparsed on native and the icon renders invisible.
-  const placeholderIconColor = theme.color10?.val ?? "currentColor";
+  const placeholderIconColor = theme.color11?.val ?? "currentColor";
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
 
   // Broken-image fallback: remember which URL failed so a replacement URL
   // gets a fresh attempt (no effect needed).
@@ -133,11 +135,7 @@ export function FormSidebar({
 
   // Scale typography, avatars, icons and the image block with the size knob
   const sz = knobProps.sizeToken;
-  const headingFontSize = sz === "$3" ? "$1" : sz === "$5" ? "$4" : "$2";
-  const labelFontSize = headingFontSize;
-  const subFontSize = sz === "$5" ? "$2" : "$1";
   const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
-  const metaIconSize = sz === "$3" ? 12 : sz === "$5" ? 16 : 14;
   const imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
 
   const resolvedImageLabel = imageLabel ?? t("Document image");
@@ -192,55 +190,55 @@ export function FormSidebar({
                 borderColor="$borderColor"
                 aria-label={resolvedImageLabel}
               >
-                <ImageSquareIcon size={32} color={placeholderIconColor} />
-                <Text fontSize={subFontSize} color="$color11">
+                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
+                <Text color={componentColors.text.muted} {...knobProps.label}>
                   {t("Image failed to load")}
                 </Text>
               </YStack>
             ) : (
-              <Button
-                chromeless
+              <YStack
+                role="button"
+                tabIndex={0}
                 onPress={onImageAdd}
                 aria-label={t("Add image")}
                 width={imageSize}
                 height={imageSize}
-                flexDirection="column"
+                alignItems="center"
+                justifyContent="center"
+                cursor="pointer"
                 gap="$2"
                 {...knobProps.containerRadius}
                 borderWidth={1}
                 borderStyle="dashed"
                 borderColor="$borderColor"
               >
-                <ImageSquareIcon size={32} color={placeholderIconColor} />
-                <Text fontSize={subFontSize} color="$color11">
+                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
+                <Text color={componentColors.text.muted} {...knobProps.label}>
                   {t("Add image")}
                 </Text>
-              </Button>
+              </YStack>
             )}
 
             {imageUrl && (onImageAdd || onImageRemove) && (
               <XStack gap="$2">
                 {onImageAdd && (
                   <Button
-                    size="$1"
+                    size="$2"
                     chromeless
                     icon={UploadIcon}
                     aria-label={t("Replace image")}
                     onPress={onImageAdd}
-                    // DG-LAY-04: raw size="$1" buttons measure ~20px tall.
-                    {...pressTargetStyle()}
                   >
                     {t("Replace")}
                   </Button>
                 )}
                 {onImageRemove && (
                   <Button
-                    size="$1"
+                    size="$2"
                     chromeless
                     icon={XIcon}
                     aria-label={t("Remove image")}
                     onPress={onImageRemove}
-                    {...pressTargetStyle()}
                   >
                     {t("Remove")}
                   </Button>
@@ -259,21 +257,20 @@ export function FormSidebar({
             <XStack alignItems="center" justifyContent="space-between">
               <XStack alignItems="center" gap="$2">
                 {section.icon}
-                <Text fontSize={headingFontSize} fontWeight="600" color="$color11">
+                <Text color={componentColors.text.muted} {...knobProps.label} fontWeight="400">
                   {section.title}
                 </Text>
               </XStack>
               {section.onAdd && (
                 <Button
-                  size="$1"
+                  size="$2"
+                  circular
                   chromeless
                   icon={PlusIcon}
                   aria-label={t("Add {{section}}", {
                     section: section.title,
                   })}
                   onPress={section.onAdd}
-                  // DG-LAY-04: raw size="$1" icon buttons measure ~17×20.
-                  {...pressTargetStyle()}
                 />
               )}
             </XStack>
@@ -286,36 +283,40 @@ export function FormSidebar({
                   <XStack key={item.id} gap="$2" alignItems="center">
                     <Avatar circular size={avatarSize} backgroundColor={avatarColor(sectionIdx)}>
                       <Avatar.Fallback backgroundColor={avatarColor(sectionIdx)}>
-                        <Text fontSize={subFontSize} color={textColor(sectionIdx)} fontWeight="600">
+                        <Text color={textColor(sectionIdx)} {...knobProps.label} fontWeight="700">
                           {getInitials(item.label)}
                         </Text>
                       </Avatar.Fallback>
                     </Avatar>
                     <YStack flex={1}>
-                      <Text fontSize={labelFontSize} color="$color12" numberOfLines={1}>
+                      <Text
+                        color={componentColors.text.primary}
+                        numberOfLines={1}
+                        {...knobProps.label}
+                      >
                         {item.label}
                       </Text>
                       {item.sublabel && (
-                        <Text fontSize={subFontSize} color="$color11">
+                        <Text color={componentColors.text.muted} {...knobProps.label}>
                           {item.sublabel}
                         </Text>
                       )}
                     </YStack>
                     {section.onRemoveItem && (
                       <Button
-                        size="$1"
+                        size="$2"
+                        circular
                         chromeless
                         icon={XIcon}
                         aria-label={t("Remove {{name}}", { name: item.label })}
                         onPress={() => section.onRemoveItem?.(item)}
-                        {...pressTargetStyle()}
                       />
                     )}
                   </XStack>
                 ))}
               </YStack>
             ) : (
-              <Text fontSize={subFontSize} color="$color11">
+              <Text color={componentColors.text.muted} {...knobProps.label}>
                 {section.emptyText ?? t("None")}
               </Text>
             )}
@@ -331,7 +332,12 @@ export function FormSidebar({
       {/* -- Info / Metadata -- */}
       {metadata.length > 0 && (
         <YStack gap="$1">
-          <Text fontSize={headingFontSize} fontWeight="600" color="$color11" paddingHorizontal="$2">
+          <Text
+            color={componentColors.text.muted}
+            paddingHorizontal="$2"
+            {...knobProps.label}
+            fontWeight="400"
+          >
             {t("Info")}
           </Text>
           {metadata.map((entry) => (
@@ -340,10 +346,18 @@ export function FormSidebar({
               size={knobProps.sizeToken}
               icon={
                 (entry.icon ?? (
-                  <UserIcon size={metaIconSize} color="var(--color11)" style={{ flexShrink: 0 }} />
+                  <UserIcon
+                    size={iconSize}
+                    color={placeholderIconColor}
+                    style={{ flexShrink: 0 }}
+                  />
                 )) as any
               }
-              title={<Text color="$color11">{entry.label}</Text>}
+              title={
+                <Text color={componentColors.text.muted} {...knobProps.label}>
+                  {entry.label}
+                </Text>
+              }
               backgroundColor="transparent"
               paddingVertical="$1"
             />