@multiplatform.one/frappe-ui 7.66.0 → 7.67.0

package/src/FormSidebar.tsx

@@ -17,23 +17,19 @@
  * DeskParity story.
  */
 
-import { Avatar, componentColors, getInitials } from "@multiplatform.one/components";
+import {
+  Avatar,
+  Image,
+  Sidebar,
+  Text,
+  type SidebarSection as MpoSidebarSection,
+} 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 {
-  Image,
-  ListItem,
-  Separator,
-  Text,
-  XStack,
-  YStack,
-  isWeb,
-  useTheme,
-  type YStackProps,
-} from "tamagui";
+import { XStack, YStack, useTheme } from "tamagui";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -73,7 +69,7 @@ export interface SidebarMetadataEntry {
   icon?: React.ReactNode;
 }
 
-export interface FormSidebarProps extends Omit<YStackProps, "children"> {
+export interface FormSidebarProps {
   /** Optional image URL to display at the top */
   imageUrl?: string;
   /** Accessible label for the image block (defaults to "Document image") */
@@ -87,30 +83,23 @@ export interface FormSidebarProps extends Omit<YStackProps, "children"> {
   sections?: SidebarSection[];
   /** Metadata lines shown at the bottom (e.g. created by / modified by) */
   metadata?: SidebarMetadataEntry[];
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// Initials come from the catalog Avatar helper (census #21) — the local copy
-// this file carried could drift from the one Timeline/Avatar consume.
-
-// 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 = ["$orange11", "$blue11", "$purple11", "$pink11"];
-function textColor(index: number): string {
-  return textColors[index % textColors.length];
+  /** Rail width (default 280); `"100%"` fills a supporting pane. */
+  width?: number | string;
+  /** The end-edge hairline (default on); off inside a pane whose seam divides it. */
+  divider?: boolean;
+  "data-testid"?: string;
 }
 
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
+/**
+ * The document rail on the MPO `Sidebar` in its complementary role (LC-175):
+ * the image block, the people sections, custom sections and the Info
+ * metadata are Sidebar sections, so the rail takes MPO's surface, caption,
+ * row and divider look.
+ */
 export function FormSidebar({
   imageUrl,
   imageLabel,
@@ -118,7 +107,9 @@ export function FormSidebar({
   onImageRemove,
   sections = [],
   metadata = [],
-  ...stackProps
+  width = 280,
+  divider = true,
+  "data-testid": testID,
 }: FormSidebarProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -133,237 +124,121 @@ export function FormSidebar({
   const [erroredUrl, setErroredUrl] = React.useState<string | undefined>();
   const imageBroken = Boolean(imageUrl) && erroredUrl === imageUrl;
 
-  // Scale typography, avatars, icons and the image block with the size token
   const sz = knobProps.sizeToken;
-  const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
   const imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
 
   const resolvedImageLabel = imageLabel ?? t("Document image");
-  const showImageBlock = Boolean(imageUrl) || Boolean(onImageAdd);
 
-  return (
-    <YStack
-      // Radius-only fragment: the full borderRadius fragment carries
-      // borderWidth and drew an unintended box border around the whole rail
-      // (rtl-audit U6); the panel border is the logical end rail below.
-      {...knobProps.containerRadius}
-      {...knobProps.panelPadding}
-      {...knobProps.gapLg}
-      width={280}
-      // Logical end edge so the rail mirrors in RTL; tamagui borderEndWidth
-      // does not compile to working CSS on web (SB-M-1215)
-      {...(isWeb
-        ? {
-            borderInlineEndWidth: 1,
-            borderInlineEndStyle: "solid" as any,
-            borderInlineEndColor: "$borderColor",
-          }
-        : { borderEndWidth: 1, borderEndColor: "$borderColor" })}
-      {...stackProps}
-    >
-      {/* -- Image section -- */}
-      {showImageBlock && (
-        <>
-          <YStack alignItems="center" gap="$2">
-            {imageUrl && !imageBroken ? (
-              <Image
-                {...knobProps.containerRadius}
-                // src (string), not source: the RN source object leaks onto
-                // the DOM <img> as source="[object Object]" on web
-                src={imageUrl}
-                alt={resolvedImageLabel}
-                width={imageSize}
-                height={imageSize}
-                objectFit="contain"
-                onError={() => setErroredUrl(imageUrl)}
-              />
-            ) : imageUrl && imageBroken ? (
-              <YStack
-                {...knobProps.containerRadius}
-                width={imageSize}
-                height={imageSize}
-                alignItems="center"
-                justifyContent="center"
-                gap="$2"
-                borderWidth={1}
-                borderStyle="dashed"
-                borderColor="$borderColor"
-                aria-label={resolvedImageLabel}
-              >
-                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {t("Image failed to load")}
-                </Text>
-              </YStack>
-            ) : (
-              <YStack
-                role="button"
-                tabIndex={0}
+  const imageBlock =
+    imageUrl || onImageAdd ? (
+      <YStack alignItems="center" gap="$2">
+        {imageUrl ? (
+          <Image
+            {...knobProps.containerRadius}
+            src={imageBroken ? undefined : imageUrl}
+            alt={resolvedImageLabel}
+            width={imageSize}
+            height={imageSize}
+            objectFit="contain"
+            onError={() => setErroredUrl(imageUrl)}
+          />
+        ) : (
+          <Button
+            chromeless
+            icon={ImageSquareIcon}
+            aria-label={t("Add image")}
+            onPress={onImageAdd}
+          />
+        )}
+        {imageBroken ? (
+          <Text color={knobProps.textAccentColor} {...knobProps.label}>
+            {t("Image failed to load")}
+          </Text>
+        ) : null}
+        {imageUrl && (onImageAdd || onImageRemove) ? (
+          <XStack gap="$2">
+            {onImageAdd ? (
+              <Button
+                size="$2"
+                chromeless
+                icon={UploadIcon}
+                aria-label={t("Replace image")}
                 onPress={onImageAdd}
-                aria-label={t("Add image")}
-                width={imageSize}
-                height={imageSize}
-                alignItems="center"
-                justifyContent="center"
-                cursor="pointer"
-                gap="$2"
-                {...knobProps.containerRadius}
-                borderWidth={1}
-                borderStyle="dashed"
-                borderColor="$borderColor"
-              >
-                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {t("Add image")}
-                </Text>
-              </YStack>
-            )}
-
-            {imageUrl && (onImageAdd || onImageRemove) && (
-              <XStack gap="$2">
-                {onImageAdd && (
-                  <Button
-                    size="$2"
-                    chromeless
-                    icon={UploadIcon}
-                    aria-label={t("Replace image")}
-                    onPress={onImageAdd}
-                  >
-                    {t("Replace")}
-                  </Button>
-                )}
-                {onImageRemove && (
+              />
+            ) : null}
+            {onImageRemove ? (
+              <Button
+                size="$2"
+                chromeless
+                icon={XIcon}
+                aria-label={t("Remove image")}
+                onPress={onImageRemove}
+              />
+            ) : null}
+          </XStack>
+        ) : null}
+      </YStack>
+    ) : null;
+
+  const railSections: MpoSidebarSection[] = [
+    ...(imageBlock ? [{ items: [], content: imageBlock }] : []),
+    ...sections.map(
+      (section): MpoSidebarSection => ({
+        title: section.title,
+        icon: section.icon,
+        action: section.onAdd ? (
+          <Button
+            size="$2"
+            chromeless
+            icon={PlusIcon}
+            aria-label={t("Add {{section}}", { section: section.title })}
+            onPress={section.onAdd}
+          />
+        ) : undefined,
+        ...(section.render
+          ? { items: [], content: section.render() }
+          : {
+              items: (section.items ?? []).map((item) => ({
+                label: item.label,
+                value: item.id,
+                subTitle: item.sublabel,
+                icon: <Avatar name={item.label} nested />,
+                trailing: section.onRemoveItem ? (
                   <Button
                     size="$2"
                     chromeless
                     icon={XIcon}
-                    aria-label={t("Remove image")}
-                    onPress={onImageRemove}
-                  >
-                    {t("Remove")}
-                  </Button>
-                )}
-              </XStack>
-            )}
-          </YStack>
-          <Separator />
-        </>
-      )}
-
-      {/* -- Dynamic sections -- */}
-      {sections.map((section, sectionIdx) => (
-        <React.Fragment key={section.key}>
-          <YStack {...knobProps.gap}>
-            <XStack alignItems="center" justifyContent="space-between">
-              <XStack alignItems="center" gap="$2">
-                {section.icon}
-                <Text color={knobProps.textAccentColor} {...knobProps.label} fontWeight="400">
-                  {section.title}
-                </Text>
-              </XStack>
-              {section.onAdd && (
-                <Button
-                  size="$2"
-                  circular
-                  chromeless
-                  icon={PlusIcon}
-                  aria-label={t("Add {{section}}", {
-                    section: section.title,
-                  })}
-                  onPress={section.onAdd}
-                />
-              )}
-            </XStack>
-
-            {section.render ? (
-              section.render()
-            ) : section.items && section.items.length > 0 ? (
-              <YStack {...knobProps.gap}>
-                {section.items.map((item) => (
-                  <XStack key={item.id} gap="$2" alignItems="center">
-                    <Avatar circular size={avatarSize} backgroundColor={avatarColor(sectionIdx)}>
-                      <Avatar.Fallback backgroundColor={avatarColor(sectionIdx)}>
-                        <Text color={textColor(sectionIdx)} {...knobProps.label} fontWeight="700">
-                          {getInitials(item.label)}
-                        </Text>
-                      </Avatar.Fallback>
-                    </Avatar>
-                    <YStack flex={1}>
-                      <Text
-                        color={componentColors.text.primary}
-                        numberOfLines={1}
-                        {...knobProps.label}
-                      >
-                        {item.label}
-                      </Text>
-                      {item.sublabel && (
-                        <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                          {item.sublabel}
-                        </Text>
-                      )}
-                    </YStack>
-                    {section.onRemoveItem && (
-                      <Button
-                        size="$2"
-                        circular
-                        chromeless
-                        icon={XIcon}
-                        aria-label={t("Remove {{name}}", { name: item.label })}
-                        onPress={() => section.onRemoveItem?.(item)}
-                      />
-                    )}
-                  </XStack>
-                ))}
-              </YStack>
-            ) : (
-              <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                {section.emptyText ?? t("None")}
-              </Text>
-            )}
-          </YStack>
-
-          {sectionIdx < sections.length - 1 && <Separator />}
-        </React.Fragment>
-      ))}
-
-      {/* -- Separator before metadata -- */}
-      {metadata.length > 0 && sections.length > 0 && <Separator />}
-
-      {/* -- Info / Metadata -- */}
-      {metadata.length > 0 && (
-        <YStack gap="$1">
-          <Text
-            color={knobProps.textAccentColor}
-            paddingHorizontal="$2"
-            {...knobProps.label}
-            fontWeight="400"
-          >
-            {t("Info")}
-          </Text>
-          {metadata.map((entry) => (
-            <ListItem
-              key={entry.label}
-              size={knobProps.sizeToken}
-              icon={
-                (entry.icon ?? (
-                  <UserIcon
-                    size={iconSize}
-                    color={placeholderIconColor}
-                    style={{ flexShrink: 0 }}
+                    aria-label={t("Remove {{name}}", { name: item.label })}
+                    onPress={() => section.onRemoveItem?.(item)}
                   />
-                )) as any
-              }
-              title={
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {entry.label}
-                </Text>
-              }
-              backgroundColor="transparent"
-              paddingVertical="$1"
-            />
-          ))}
-        </YStack>
-      )}
-    </YStack>
+                ) : undefined,
+              })),
+              emptyText: section.emptyText ?? t("None"),
+            }),
+      }),
+    ),
+    ...(metadata.length > 0
+      ? [
+          {
+            title: t("Info"),
+            items: metadata.map((entry) => ({
+              label: entry.label,
+              value: entry.label,
+              icon: entry.icon ?? <UserIcon size={iconSize} color={placeholderIconColor} />,
+            })),
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <Sidebar
+      role="complementary"
+      aria-label={t("Document details")}
+      width={width}
+      divider={divider}
+      sections={railSections}
+      testID={testID}
+    />
   );
 }

package/src/FrappeConnectionIndicator.tsx

@@ -3,11 +3,10 @@ import {
   type FrappeConnectionState,
   type UseFrappeCollectionConfig,
 } from "@multiplatform.one/frappe";
-import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { StatusDot } from "@multiplatform.one/components";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { XStack, YStack } from "tamagui";
-import { Text } from "@multiplatform.one/components";
+import { XStack } from "tamagui";
 
 export interface FrappeConnectionIndicatorProps {
   /** The same connection config the sibling collection hooks use. */
@@ -21,7 +20,8 @@ export interface FrappeConnectionIndicatorProps {
 }
 
 /**
- * Compact "Reconnecting" status pill for live Frappe views.
+ * Compact "Reconnecting" status for live Frappe views: the MPO `StatusDot`
+ * in the warning tone (LC-169, LC-175).
  *
  * Shows only while the realtime socket is down after having been up
  * (`everConnected && !connected`) — during that window updates arrive via
@@ -31,34 +31,12 @@ export interface FrappeConnectionIndicatorProps {
  */
 export function FrappeConnectionIndicator({ config, connection }: FrappeConnectionIndicatorProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   const hooked = useFrappeConnection(config);
   const { connected, everConnected } = connection ?? hooked;
   if (connected || !everConnected) return null;
   return (
-    <XStack
-      role="status"
-      aria-live="polite"
-      alignSelf="flex-start"
-      alignItems="center"
-      gap="$2"
-      paddingHorizontal="$3"
-      paddingVertical="$1.5"
-      {...knobProps.borderRadius}
-      backgroundColor="$yellow3"
-      borderColor="$yellow7"
-      borderWidth={1}
-    >
-      <YStack
-        {...radiusClassProps("R-PILL", "connection status dot")}
-        width={8}
-        height={8}
-        borderRadius={4}
-        backgroundColor="$yellow10"
-      />
-      <Text fontSize="$2" color="$yellow11">
-        {t("Reconnecting…")}
-      </Text>
+    <XStack role="status" aria-live="polite" alignSelf="flex-start">
+      <StatusDot tone="warning">{t("Reconnecting…")}</StatusDot>
     </XStack>
   );
 }

package/src/FrappeImageView.stories.tsx

@@ -20,7 +20,7 @@ export default {
     },
   },
   argTypes: {
-    columns: { control: { type: "number", min: 1, max: 6 } },
+    columns: { control: { type: "number", min: 1, max: 8 } },
     searchText: { control: "text" },
   },
 };
@@ -104,7 +104,6 @@ export const Main = (args: Record<string, unknown>) => (
     />
   </FrappeProvider>
 );
-Main.args = { columns: 3 };
 Main.storyName = "Main";
 
 /** Zero documents: the grid's empty message must show. */
@@ -139,7 +138,6 @@ export const BrokenImages = () => (
       doctype="QaGalleryBroken"
       imageField="picture"
       titleField="title"
-      columns={3}
       onItemClick={action("onItemClick")}
     />
   </FrappeProvider>
@@ -177,7 +175,6 @@ export const LongMetadata = () => (
       imageField="picture"
       titleField="title"
       subtitleField="subtitle"
-      columns={3}
     />
   </FrappeProvider>
 );
@@ -199,7 +196,6 @@ export const Live = (args: { doctype?: string; imageField?: string; titleField?:
       doctype={args.doctype || "Contact"}
       imageField={args.imageField || "image"}
       titleField={args.titleField || "first_name"}
-      columns={3}
       onItemClick={action("onItemClick")}
     />
   </FrappeStoryProvider>
@@ -232,7 +228,6 @@ export const Filtered = () => (
       imageField="picture"
       titleField="title"
       searchText="Item 1"
-      columns={3}
     />
   </FrappeProvider>
 );