@multiplatform.one/frappe-ui 7.23.1 → 7.24.0

package/src/record/RecordBars.tsx

@@ -0,0 +1,187 @@
+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 { useTranslation } from "react-i18next";
+import { childBars } from "./recordData";
+import type { FrappeRecordBarsSection } from "./recordSections";
+
+const chartHeight = 220;
+const chartTicks = 4;
+
+/**
+ * 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).
+ */
+export function RecordBars({
+  rows,
+  section,
+  testID,
+}: {
+  rows: readonly Record<string, unknown>[];
+  section: FrappeRecordBarsSection;
+  testID?: string;
+}) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const { knobProps: nested } = useResolvedKnobs({ compact: true });
+  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 (
+      <Text {...nested.label} {...nested.body} color="$color10">
+        {section.empty ?? t("None yet")}
+      </Text>
+    );
+  }
+
+  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 })}
+          >
+            <XStack
+              {...nested.borderRadius}
+              backgroundColor="$color2"
+              borderWidth={0}
+              paddingHorizontal="$2"
+              paddingVertical="$0.5"
+              gap="$1"
+              alignItems="baseline"
+              cursor="help"
+            >
+              <Text {...nested.label} {...nested.body} color="$color10">
+                {name(bar.key)}
+              </Text>
+              <Text {...nested.label} fontWeight="700">
+                {bar.value}
+              </Text>
+            </XStack>
+          </Tooltip>
+        ))}
+      </XStack>
+    </YStack>
+  );
+}

package/src/record/RecordGallery.tsx

@@ -0,0 +1,47 @@
+import { Carousel, YStack } from "@multiplatform.one/components";
+import { useState } from "react";
+import { ImageWell } from "../list/ImageWell";
+import type { FrappeRecordSlide } from "../list/recordLook";
+
+export interface RecordGalleryProps {
+  /** The record's image candidates: the first slide walks them on error. */
+  images: readonly string[];
+  /** Further slides after the first. */
+  slides?: readonly FrappeRecordSlide[];
+  alt: string;
+  tints?: readonly (string | undefined)[];
+}
+
+/**
+ * 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.
+ */
+export function RecordGallery({ images, slides = [], alt, tints }: RecordGalleryProps) {
+  const [width, setWidth] = useState(0);
+  const first = <ImageWell sources={images} alt={alt} tints={tints} inset={0.08} />;
+  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} />
+          {slides.map((slide) => (
+            <ImageWell
+              key={slide.src}
+              sources={[slide.src]}
+              alt={`${alt}, ${slide.label}`}
+              pixelated={slide.pixelated}
+              inset={0.14}
+              backgroundColor="$color2"
+              width={width}
+              lazy
+            />
+          ))}
+        </Carousel>
+      ) : (
+        first
+      )}
+    </YStack>
+  );
+}

package/src/record/RecordHero.tsx

@@ -0,0 +1,186 @@
+import { Skeleton, Text, XStack, YStack, type YStackProps } from "@multiplatform.one/components";
+import { Progress } from "@multiplatform.one/forms";
+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).
+ */
+export const recordHeroArtBasis = 380;
+export const recordHeroArtMax = 480;
+export const recordHeroIdentityBasis = 320;
+
+export interface RecordHeroFrameProps extends YStackProps {
+  /** A theme hue painting the stage from its ramp. */
+  tint?: string;
+  children: ReactNode;
+}
+
+export function RecordHeroFrame({ tint, children, ...rest }: RecordHeroFrameProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack
+      {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
+      backgroundColor={tint ? (`$${tint}2` as never) : "$color3"}
+      width="100%"
+      {...rest}
+    >
+      {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>
+  );
+}
+
+export function RecordHeroIdentityColumn({
+  children,
+  ...rest
+}: YStackProps & { children: ReactNode }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack
+      flexGrow={999}
+      flexBasis={recordHeroIdentityBasis}
+      minWidth={0}
+      {...knobProps.gap}
+      {...rest}
+    >
+      {children}
+    </YStack>
+  );
+}
+
+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. */
+export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  if (tiles.length === 0) return null;
+  return (
+    <XStack {...knobProps.gap} flexWrap="wrap">
+      {tiles.map((tile) => (
+        <YStack
+          key={tile.id}
+          {...knobProps.borderRadius}
+          {...knobProps.panelPadding}
+          backgroundColor="$color2"
+          borderWidth={0}
+          flexGrow={1}
+          flexBasis={140}
+          gap="$1"
+        >
+          <Text {...knobProps.label} {...knobProps.body} color="$color10">
+            {tile.label}
+          </Text>
+          <Text fontSize="$5" fontWeight="700">
+            {tile.value}
+          </Text>
+          {tile.percent === undefined ? null : (
+            <Progress
+              value={tile.percent}
+              max={100}
+              size="$2"
+              intent="accent"
+              progressProps={{ "aria-label": tile.label }}
+            />
+          )}
+        </YStack>
+      ))}
+    </XStack>
+  );
+}
+
+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>
+      </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)} />
+          ))}
+        </XStack>
+        <Skeleton.Text lines={4} />
+      </YStack>
+    </YStack>
+  );
+}