@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/record/RecordBars.tsx

@@ -1,116 +1,36 @@
-import {
-  BarSeries,
-  ChartSurface,
-  Text,
-  Tooltip,
-  XAxis,
-  XStack,
-  YAxis,
-  YStack,
-  approximateTextWidth,
-  createBandScale,
-  createLinearScale,
-  describeChart,
-  formatChartValue,
-  getLinearTicks,
-  useChartTheme,
-  type ChartDatum,
-} from "@multiplatform.one/components";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Separator, Text, XStack, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { childBars } from "./recordData";
+import { RecordGroupFrame } from "./RecordRows";
 import type { FrappeRecordBarsSection } from "./recordSections";
 
-const chartHeight = 220;
-const chartTicks = 4;
+const labelWidth = "$8";
+const valueWidth = "$3";
 
 /**
- * Bars on a domain pinned to 0..max, composed from the catalog chart
- * primitives: the packaged BarChart scales to each dataset's own maximum,
- * which makes two records' bars incomparable. `nice: false` keeps the
- * ceiling exactly `max`.
- */
-function FixedScaleBars({
-  data,
-  max,
-  label,
-  testID,
-}: {
-  data: ChartDatum[];
-  max: number;
-  label: string;
-  testID?: string;
-}) {
-  const { palette, labelFontSize } = useChartTheme();
-  const fills = data.map(() => palette.single);
-  const domain: [number, number] = [0, max];
-  return (
-    <ChartSurface label={label} height={chartHeight} testID={testID}>
-      {(size) => {
-        const marginScale = createLinearScale({ domain, range: [0, 1], nice: false });
-        const tickLabels = getLinearTicks(marginScale, chartTicks).map((value) =>
-          formatChartValue(value),
-        );
-        const widestTick = Math.max(
-          0,
-          ...tickLabels.map((tick) => approximateTextWidth(tick, labelFontSize)),
-        );
-        const top = Math.ceil(labelFontSize / 2) + 2;
-        const right = 4;
-        const bottom = 4 + 3 + Math.ceil(labelFontSize * 1.15);
-        const left = Math.ceil(widestTick) + 4 + 3 + 2;
-        const plot = {
-          x: left,
-          y: top,
-          width: Math.max(0, size.width - left - right),
-          height: Math.max(0, size.height - top - bottom),
-        };
-        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-        const xScale = createBandScale({
-          domain: data.map((datum) => datum.label),
-          range: [plot.x, plot.x + plot.width],
-        });
-        const yScale = createLinearScale({
-          domain,
-          range: [plot.y + plot.height, plot.y],
-          nice: false,
-        });
-        return (
-          <>
-            <YAxis
-              plot={plot}
-              scale={yScale}
-              ticks={chartTicks}
-              tickFormat={(value) => formatChartValue(value)}
-            />
-            <BarSeries data={data} xScale={xScale} yScale={yScale} plot={plot} fills={fills} />
-            <XAxis plot={plot} scale={xScale} />
-          </>
-        );
-      }}
-    </ChartSurface>
-  );
-}
-
-/**
- * A child table's numbers as bars on one shared scale: the sum above, the
- * chart, then each exact value in a chip (the axis only approximates).
+ * A child table's numbers as horizontal bars on one shared 0..max scale,
+ * so two records' bars compare: a row per value (its name, its number, its
+ * bar), then the sum. Each bar is a meter; the numbers are the state, so no
+ * caption restates the scale. The highest values take the record's tint.
  */
 export function RecordBars({
   rows,
   section,
+  tint,
   testID,
 }: {
   rows: readonly Record<string, unknown>[];
   section: FrappeRecordBarsSection;
+  /** A theme hue for the record's highest bars. */
+  tint?: string;
   testID?: string;
 }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const { knobProps: nested } = useResolvedKnobs({ compact: true });
+  const { knobProps: nested } = useResolvedKnobs();
   const { bars, total } = childBars(rows, section);
   const name = (key: string) => section.barLabel?.(key) ?? key;
-  const data = bars.map((bar) => ({ label: name(bar.key), value: bar.value }));
 
   if (bars.length === 0) {
     return (
@@ -120,68 +40,87 @@ export function RecordBars({
     );
   }
 
+  const top = Math.max(...bars.map((bar) => bar.value));
   return (
-    <YStack {...knobProps.gapLg}>
-      <XStack
-        {...knobProps.gap}
-        alignItems="baseline"
-        justifyContent="space-between"
-        flexWrap="wrap"
-      >
-        <YStack>
-          <Text {...nested.label} color="$color10" textTransform="uppercase" letterSpacing={1}>
-            {section.totalLabel ?? t("Total")}
-          </Text>
-          <Text fontSize="$10" fontWeight="700">
-            {total}
-          </Text>
-        </YStack>
-        {section.description ? (
-          <Text
-            {...nested.label}
-            color="$color10"
-            flexShrink={1}
-            maxWidth={sizeRecipeEscape(420, "chart caption: a readable measure beside the total")}
-          >
-            {section.description}
-          </Text>
-        ) : null}
-      </XStack>
-      <FixedScaleBars
-        data={data}
-        max={section.max}
-        testID={testID}
-        label={[
-          describeChart({ typeLabel: t("Bar chart"), title: section.title, data }),
-          t("Values on a fixed 0 to {{max}} scale.", { max: section.max }),
-        ].join(" ")}
-      />
-      <XStack {...nested.gap} flexWrap="wrap">
-        {bars.map((bar) => (
-          <Tooltip
-            key={bar.key}
-            content={t("{{name}}: {{value}}", { name: name(bar.key), value: bar.value })}
-          >
+    <RecordGroupFrame
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      testID={testID}
+      role="figure"
+      aria-label={section.title}
+    >
+      <YStack role="list" {...knobProps.gap}>
+        {bars.map((bar) => {
+          const percent = Math.max(0, Math.min(100, (bar.value / section.max) * 100));
+          const fill = tint && bar.value === top ? `$${tint}9` : "$color9";
+          return (
             <XStack
-              {...nested.borderRadius}
-              backgroundColor="$color2"
-              borderWidth={0}
-              paddingHorizontal="$2"
-              paddingVertical="$0.5"
-              gap="$1"
-              alignItems="baseline"
-              cursor="help"
+              key={bar.key}
+              role="listitem"
+              alignItems="center"
+              {...knobProps.gap}
+              data-record-bar={bar.key}
             >
-              <Text {...nested.label} {...nested.body} color="$color10">
+              <Text
+                {...nested.label}
+                color="$color11"
+                width={labelWidth}
+                flexShrink={0}
+                numberOfLines={1}
+              >
                 {name(bar.key)}
               </Text>
-              <Text {...nested.label} fontWeight="700">
+              <Text
+                {...nested.label}
+                fontWeight="700"
+                color="$color12"
+                width={valueWidth}
+                flexShrink={0}
+                textAlign="right"
+              >
                 {bar.value}
               </Text>
+              <YStack
+                flex={1}
+                minWidth={0}
+                height="$0.75"
+                borderRadius="$true"
+                backgroundColor="$color4"
+                overflow="hidden"
+                role="meter"
+                aria-label={name(bar.key)}
+                aria-valuenow={bar.value}
+                aria-valuemin={0}
+                aria-valuemax={section.max}
+              >
+                <YStack
+                  height="100%"
+                  width={`${percent}%`}
+                  borderRadius="$true"
+                  backgroundColor={fill as never}
+                  data-record-bar-fill=""
+                />
+              </YStack>
             </XStack>
-          </Tooltip>
-        ))}
+          );
+        })}
+      </YStack>
+      <Separator />
+      <XStack alignItems="center" {...knobProps.gap} data-record-bars-total="">
+        <Text {...nested.label} color="$color11" width={labelWidth} flexShrink={0}>
+          {section.totalLabel ?? t("Total")}
+        </Text>
+        <Text
+          {...nested.label}
+          fontWeight="800"
+          color="$color12"
+          width={valueWidth}
+          flexShrink={0}
+          textAlign="right"
+        >
+          {total}
+        </Text>
       </XStack>
-    </YStack>
+    </RecordGroupFrame>
   );
 }

package/src/record/RecordGallery.tsx

@@ -1,7 +1,9 @@
 import { Carousel, YStack } from "@multiplatform.one/components";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { ImageWell } from "../list/ImageWell";
 import type { FrappeRecordSlide } from "../list/recordLook";
+import { recordHeroArtHeight } from "./RecordHero";
 
 export interface RecordGalleryProps {
   /** The record's image candidates: the first slide walks them on error. */
@@ -9,23 +11,28 @@ export interface RecordGalleryProps {
   /** Further slides after the first. */
   slides?: readonly FrappeRecordSlide[];
   alt: string;
-  tints?: readonly (string | undefined)[];
 }
 
+const art = sizeRecipeEscape(recordHeroArtHeight, "hero art: the design's artwork height");
+
 /**
- * The hero's images. A swipeable carousel once its width is measured; before
- * that (and on the server) the first image alone, so the hero never paints
- * empty. Wells take the measured width and slides sit flush, so each lands
- * exactly one width over.
+ * The hero's images on the tinted stage. A swipeable carousel once its width
+ * is measured; before that (and on the server) the first image alone, so the
+ * hero never paints empty. Wells are clear so the stage's tint shows through.
  */
-export function RecordGallery({ images, slides = [], alt, tints }: RecordGalleryProps) {
+export function RecordGallery({ images, slides = [], alt }: RecordGalleryProps) {
   const [width, setWidth] = useState(0);
-  const first = <ImageWell sources={images} alt={alt} tints={tints} inset={0.08} />;
+  const well = {
+    aspectRatio: undefined,
+    height: art,
+    borderRadius: 0,
+    backgroundColor: "transparent",
+  } as const;
   return (
     <YStack onLayout={(event) => setWidth(Math.round(event.nativeEvent.layout.width))} width="100%">
       {width > 0 && slides.length > 0 ? (
         <Carousel gap={0}>
-          <ImageWell sources={images} alt={alt} tints={tints} inset={0.08} width={width} />
+          <ImageWell sources={images} alt={alt} inset={0} width={width} {...well} />
           {slides.map((slide) => (
             <ImageWell
               key={slide.src}
@@ -33,14 +40,14 @@ export function RecordGallery({ images, slides = [], alt, tints }: RecordGallery
               alt={`${alt}, ${slide.label}`}
               pixelated={slide.pixelated}
               inset={0.14}
-              backgroundColor="$color2"
               width={width}
               lazy
+              {...well}
             />
           ))}
         </Carousel>
       ) : (
-        first
+        <ImageWell sources={images} alt={alt} inset={0} width="100%" {...well} />
       )}
     </YStack>
   );

package/src/record/RecordHero.tsx

@@ -1,76 +1,62 @@
-import { Skeleton, Text, XStack, YStack, type YStackProps } from "@multiplatform.one/components";
-import { Progress } from "@multiplatform.one/forms";
+import {
+  Skeleton,
+  TamaguiSizableText,
+  Text,
+  XStack,
+  YStack,
+  type YStackProps,
+} from "@multiplatform.one/components";
 import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 /**
  * The record hero's geometry, shared by the loaded hero and its skeleton so
- * the row does not jump when the record lands (LC-20).
+ * the page does not jump when the record lands (LC-20).
  */
-export const recordHeroArtBasis = 380;
-export const recordHeroArtMax = 480;
-export const recordHeroIdentityBasis = 320;
+export const recordHeroStageHeight = 250;
+export const recordHeroArtHeight = 220;
 
 export interface RecordHeroFrameProps extends YStackProps {
-  /** A theme hue painting the stage from its ramp. */
-  tint?: string;
+  /** Theme hues painting the stage from their ramps: one fills it, two split it. */
+  tints?: readonly (string | undefined)[];
   children: ReactNode;
 }
 
-export function RecordHeroFrame({ tint, children, ...rest }: RecordHeroFrameProps) {
+/** The full-bleed stage under the art, tinted by the record's facet. */
+export function RecordHeroFrame({ tints = [], children, ...rest }: RecordHeroFrameProps) {
   const { knobProps } = useResolvedKnobs();
+  const [first, second] = tints;
   return (
     <YStack
-      {...knobProps.borderRadius}
-      {...knobProps.panelPadding}
-      backgroundColor={tint ? (`$${tint}2` as never) : "$color3"}
       width="100%"
+      minHeight={sizeRecipeEscape(recordHeroStageHeight, "hero stage: the design's art band")}
+      paddingTop={knobProps.gap.gap}
+      backgroundColor={second ? "transparent" : ((first ? `$${first}3` : "$color3") as never)}
+      overflow="hidden"
+      position="relative"
+      data-record-art-band=""
       {...rest}
     >
+      {second ? (
+        <XStack fullscreen pointerEvents="none">
+          <YStack flex={1} backgroundColor={`$${first ?? "gray"}3` as never} />
+          <YStack flex={1} backgroundColor={`$${second}3` as never} />
+        </XStack>
+      ) : null}
       {children}
     </YStack>
   );
 }
 
-export function RecordHeroRow({ children }: { children: ReactNode }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <XStack {...knobProps.gapLg} flexWrap="wrap" alignItems="flex-start">
-      {children}
-    </XStack>
-  );
-}
-
-export function RecordHeroArtColumn({ children, ...rest }: YStackProps & { children: ReactNode }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <YStack
-      flexGrow={1}
-      flexBasis={recordHeroArtBasis}
-      maxWidth={recordHeroArtMax}
-      minWidth={0}
-      {...knobProps.gap}
-      {...rest}
-    >
-      {children}
-    </YStack>
-  );
-}
-
+/** The identity block under the stage: code, badges, title, subtitle and facts. */
 export function RecordHeroIdentityColumn({
   children,
   ...rest
 }: YStackProps & { children: ReactNode }) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <YStack
-      flexGrow={999}
-      flexBasis={recordHeroIdentityBasis}
-      minWidth={0}
-      {...knobProps.gap}
-      {...rest}
-    >
+    <YStack {...knobProps.panelPadding} paddingBottom={0} gap="$1" minWidth={0} {...rest}>
       {children}
     </YStack>
   );
@@ -80,42 +66,33 @@ export interface RecordVitalTile {
   id: string;
   label: string;
   value: string;
-  /** Fill of a bar under the value, 0 to 100. */
-  percent?: number;
 }
 
-/** Nested fact tiles under the title: compact density so they recede. */
+/** The record's facts as plain label-over-value columns under the title. */
 export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   if (tiles.length === 0) return null;
   return (
-    <XStack {...knobProps.gap} flexWrap="wrap">
+    <XStack
+      columnGap={knobProps.gapLg.gap}
+      rowGap={knobProps.gap.gap}
+      flexWrap="wrap"
+      paddingTop={knobProps.gap.gap}
+      data-record-metrics=""
+    >
       {tiles.map((tile) => (
         <YStack
           key={tile.id}
-          {...knobProps.borderRadius}
-          {...knobProps.panelPadding}
-          backgroundColor="$color2"
-          borderWidth={0}
-          flexGrow={1}
-          flexBasis={140}
           gap="$1"
+          testID={`record-vital-${tile.id}`}
+          data-record-metric={tile.id}
         >
-          <Text {...knobProps.label} {...knobProps.body} color="$color10">
+          <Text {...knobProps.label} color="$color11" numberOfLines={1}>
             {tile.label}
           </Text>
-          <Text fontSize="$5" fontWeight="700">
+          <TamaguiSizableText size="$6" {...knobProps.heading} color="$color" numberOfLines={1}>
             {tile.value}
-          </Text>
-          {tile.percent === undefined ? null : (
-            <Progress
-              value={tile.percent}
-              max={100}
-              size="$2"
-              intent="accent"
-              progressProps={{ "aria-label": tile.label }}
-            />
-          )}
+          </TamaguiSizableText>
         </YStack>
       ))}
     </XStack>
@@ -125,61 +102,52 @@ export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
 const bone = (px: number) =>
   sizeRecipeEscape(px, "loading bones sized to the record page they stand in for");
 
-/** The breadcrumb line's loading twin. */
-export function RecordBreadcrumbBone() {
-  return (
-    <XStack alignItems="center" minHeight={bone(20)}>
-      <Skeleton width={bone(180)} height={bone(14)} />
-    </XStack>
-  );
-}
-
 /** The hero and tab strip's loading twin, on the same geometry. */
 export function RecordSkeleton({ testID }: { testID?: string }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   return (
-    <YStack
-      {...knobProps.gapLg}
-      testID={testID}
-      data-async-skeleton="record"
-      aria-busy
-      aria-label={t("Loading")}
-    >
-      <RecordHeroFrame>
-        <RecordHeroRow>
-          <RecordHeroArtColumn {...{ "data-skeleton-part": "art" }}>
-            <Skeleton variant="rounded" width="100%" aspectRatio={1} />
-          </RecordHeroArtColumn>
-          <RecordHeroIdentityColumn {...{ "data-skeleton-part": "identity" }}>
-            <Skeleton width={bone(72)} height={bone(16)} />
-            <Skeleton width={bone(280)} height={bone(56)} />
-            <Skeleton width={bone(160)} height={bone(18)} />
-            <XStack gap="$1.5">
-              <Skeleton variant="rounded" width={bone(64)} height={bone(22)} />
-              <Skeleton variant="rounded" width={bone(64)} height={bone(22)} />
-            </XStack>
-            <XStack {...knobProps.gap} flexWrap="wrap">
-              {[0, 1, 2].map((tile) => (
-                <Skeleton
-                  key={tile}
-                  variant="rounded"
-                  flexGrow={1}
-                  flexBasis={140}
-                  height={bone(64)}
-                />
-              ))}
-            </XStack>
-          </RecordHeroIdentityColumn>
-        </RecordHeroRow>
+    <YStack testID={testID} data-async-skeleton="record" aria-busy aria-label={t("Loading")}>
+      <RecordHeroFrame {...{ "data-skeleton-part": "art" }}>
+        <YStack alignItems="center">
+          <Skeleton
+            variant="rounded"
+            width={bone(recordHeroArtHeight)}
+            height={bone(recordHeroArtHeight)}
+          />
+        </YStack>
       </RecordHeroFrame>
-      <YStack {...knobProps.gap}>
-        <XStack {...knobProps.gap} {...{ "data-skeleton-part": "tabs" }}>
-          {[104, 88, 96].map((width, tab) => (
-            <Skeleton key={tab} variant="rounded" width={bone(width)} height={bone(44)} />
+      <RecordHeroIdentityColumn {...{ "data-skeleton-part": "identity" }}>
+        <XStack gap="$2">
+          <Skeleton width={bone(40)} height={bone(20)} />
+          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
+          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
+        </XStack>
+        <Skeleton width={bone(220)} height={bone(40)} />
+        <Skeleton width={bone(140)} height={bone(18)} />
+        <XStack columnGap={knobProps.gapLg.gap} paddingTop={knobProps.gap.gap}>
+          {[0, 1, 2].map((tile) => (
+            <YStack key={tile} gap="$1">
+              <Skeleton width={bone(56)} height={bone(14)} />
+              <Skeleton width={bone(48)} height={bone(22)} />
+            </YStack>
           ))}
         </XStack>
-        <Skeleton.Text lines={4} />
+      </RecordHeroIdentityColumn>
+      <YStack {...knobProps.gapLg} paddingTop={knobProps.panelPadding.padding}>
+        <XStack
+          {...knobProps.gapLg}
+          {...knobProps.panelPadding}
+          paddingVertical={0}
+          {...{ "data-skeleton-part": "tabs" }}
+        >
+          {[96, 64, 88].map((width, tab) => (
+            <Skeleton key={tab} width={bone(width)} height={bone(40)} />
+          ))}
+        </XStack>
+        <YStack {...knobProps.panelPadding} paddingVertical={0}>
+          <Skeleton.Text lines={4} />
+        </YStack>
       </YStack>
     </YStack>
   );