@lotics/ui 3.6.0 → 4.0.0

package/examples/tpl_record_plain.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { SectionHeading, SectionHeadingTitle } from "@lotics/ui/section_heading";
+import { Divider } from "@lotics/ui/divider";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Badge } from "@lotics/ui/badge";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineNumberInput } from "@lotics/ui/inline_number_input";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineTimePicker } from "@lotics/ui/inline_time_picker";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Inline record (plain) — the same in-place record edit as the card
+// variant, but CARD-LESS: sections are set off by a clear `SectionHeading` + a
+// hairline and generous vertical rhythm, not card chrome. The lighter look for
+// a single full-screen record where banded cards would be visual noise.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const PLAN = [
+  { value: "starter", label: "Starter" },
+  { value: "growth", label: "Growth" },
+  { value: "enterprise", label: "Enterprise" },
+];
+
+const HEALTH = [
+  { value: "healthy", label: "Healthy" },
+  { value: "at_risk", label: "At risk" },
+  { value: "churning", label: "Churning" },
+];
+
+const HEALTH_DOT: Record<string, string> = {
+  healthy: colors.emerald[500],
+  at_risk: colors.amber[500],
+  churning: colors.red[500],
+};
+
+function persist<T>(set: (v: T) => void) {
+  return (v: T) =>
+    new Promise<void>((resolve) => {
+      setTimeout(() => {
+        set(v);
+        resolve();
+      }, 350);
+    });
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <DetailRow label={label} labelWidth={130} minHeight={40}>
+      <View style={{ flex: 1 }}>{children}</View>
+    </DetailRow>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <View style={{ gap: 8 }}>
+      <SectionHeading>
+        <SectionHeadingTitle>{title}</SectionHeadingTitle>
+      </SectionHeading>
+      <Divider />
+      <View style={{ gap: 2 }}>{children}</View>
+    </View>
+  );
+}
+
+export function TplRecordPlain() {
+  const [name, setName] = useState("Northwind Traders");
+  const [contact, setContact] = useState("Mara Lindqvist");
+  const [email, setEmail] = useState("mara@northwind.co");
+  const [phone, setPhone] = useState("");
+  const [city, setCity] = useState("Gothenburg");
+  const [value, setValue] = useState<number | null>(48000);
+  const [plan, setPlan] = useState("growth");
+  const [health, setHealth] = useState("healthy");
+  const [renews, setRenews] = useState("2026-05-22");
+  const [review, setReview] = useState("2026-04-10T14:30");
+  const [opens, setOpens] = useState("09:00");
+
+  const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 28 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Text size="xl" weight="semibold">
+            {name}
+          </Text>
+          <Badge label="Customer" color="blue" />
+          <View style={{ flex: 1 }} />
+          <Text size="xs" color="muted">
+            Click any value to edit
+          </Text>
+        </View>
+
+        <Section title="Contact">
+          <Field label="Account name">
+            <InlineTextInput value={name} onSave={persist(setName)} accessibilityLabel="Account name" />
+          </Field>
+          <Field label="Primary contact">
+            <InlineTextInput value={contact} onSave={persist(setContact)} accessibilityLabel="Primary contact" />
+          </Field>
+          <Field label="Email">
+            <InlineTextInput value={email} onSave={persist(setEmail)} placeholder="Add email…" accessibilityLabel="Email" />
+          </Field>
+          <Field label="Phone">
+            <InlineTextInput value={phone} onSave={persist(setPhone)} placeholder="Add phone…" accessibilityLabel="Phone" />
+          </Field>
+          <Field label="City">
+            <InlineTextInput value={city} onSave={persist(setCity)} accessibilityLabel="City" />
+          </Field>
+        </Section>
+
+        <Section title="Commercial">
+          <Field label="Annual value">
+            <InlineNumberInput value={value} onSave={persist(setValue)} format={money} accessibilityLabel="Annual value" />
+          </Field>
+          <Field label="Plan">
+            <InlineSelect value={plan} onSave={persist(setPlan)} options={PLAN} accessibilityLabel="Plan" />
+          </Field>
+          <Field label="Health">
+            <InlineSelect
+              value={health}
+              onSave={persist(setHealth)}
+              options={HEALTH}
+              accessibilityLabel="Health"
+              renderOptionContent={(o) => (
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: HEALTH_DOT[o.value] }} />
+                  <Text size="sm">{o.label}</Text>
+                </View>
+              )}
+            />
+          </Field>
+        </Section>
+
+        <Section title="Schedule">
+          <Field label="Renews on">
+            <InlineDatePicker value={renews} onSave={persist(setRenews)} locale="en-US" accessibilityLabel="Renews on" />
+          </Field>
+          <Field label="Next review">
+            <InlineDatePicker value={review} onSave={persist(setReview)} format="datetime" locale="en-US" accessibilityLabel="Next review" />
+          </Field>
+          <Field label="Support opens">
+            <InlineTimePicker value={opens} onSave={persist(setOpens)} accessibilityLabel="Support opens" />
+          </Field>
+        </Section>
+      </View>
+    </ScrollView>
+  );
+}

package/examples/tpl_rollup.tsx

@@ -0,0 +1,300 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid } from "@lotics/ui/colors";
+import { Accordion, AccordionContent, AccordionHeader, AccordionTitle } from "@lotics/ui/accordion";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { PressableHighlight } from "@lotics/ui/pressable_highlight";
+import { Sparkline } from "@lotics/ui/sparkline";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Network rollup — hierarchical totals with drill: region →
+// site → lane, every level carrying the SAME aligned metric columns so a
+// bad number can be chased down the tree ("which branch drags the
+// total?"). Pure composition: nested Accordions + a fixed-width column
+// map; under-target branches are flagged at every level so the drill
+// path is visible before expanding. Leaf rows open a sequenced drawer
+// over their site's lanes.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ONTIME_TARGET = 88;
+
+interface Lane {
+  id: string;
+  dest: string;
+  volume: number;
+  ontime: number;
+  margin: number;
+}
+
+interface Site {
+  key: string;
+  label: string;
+  lanes: Lane[];
+}
+
+interface Region {
+  key: string;
+  label: string;
+  sites: Site[];
+}
+
+// Deterministic 12-week volume history for the drawer sparkline.
+function hash(i: number, salt: number): number {
+  let x = (i + 1) * 2654435761 + salt * 40503;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  return (x >>> 16) % 1000;
+}
+
+const lane = (site: string, n: number, dest: string, volume: number, ontime: number, margin: number): Lane => ({
+  id: `LN-${site}-${String(n).padStart(2, "0")}`, dest, volume, ontime, margin,
+});
+
+// The story: South region drags the network — Southbay's lanes run late.
+const REGIONS: Region[] = [
+  {
+    key: "north", label: "North region",
+    sites: [
+      { key: "EP", label: "Eastport", lanes: [
+        lane("EP", 1, "Arden", 4180, 96, 22), lane("EP", 2, "Brookfield", 3460, 94, 19),
+        lane("EP", 3, "Centerville", 2210, 91, 24), lane("EP", 4, "Dalton", 1730, 97, 17),
+      ]},
+      { key: "NG", label: "Northgate", lanes: [
+        lane("NG", 1, "Edgewater", 3040, 93, 21), lane("NG", 2, "Fairview", 2380, 95, 18),
+        lane("NG", 3, "Hillcrest", 1610, 92, 23),
+      ]},
+    ],
+  },
+  {
+    key: "central", label: "Central region",
+    sites: [
+      { key: "RS", label: "Riverside", lanes: [
+        lane("RS", 1, "Kingsport", 2870, 90, 16), lane("RS", 2, "Lakeside", 2140, 94, 20),
+        lane("RS", 3, "Midvale", 1890, 89, 14),
+      ]},
+      { key: "MH", label: "Midvale Hub", lanes: [
+        lane("MH", 1, "Norwood", 2520, 92, 18), lane("MH", 2, "Arden", 1480, 96, 15),
+        lane("MH", 3, "Granton", 1160, 87, 12),
+      ]},
+    ],
+  },
+  {
+    key: "south", label: "South region",
+    sites: [
+      { key: "SB", label: "Southbay", lanes: [
+        lane("SB", 1, "Fairview", 2640, 81, 11), lane("SB", 2, "Dalton", 2310, 84, 13),
+        lane("SB", 3, "Lakeside", 1820, 79, 9),
+      ]},
+      { key: "GR", label: "Granton", lanes: [
+        lane("GR", 1, "Brookfield", 1540, 90, 16), lane("GR", 2, "Norwood", 980, 86, 14),
+      ]},
+    ],
+  },
+];
+
+// Volume-weighted rollups — a small lane can't mask a big one.
+function rollup(lanes: Lane[]) {
+  const volume = lanes.reduce((s, l) => s + l.volume, 0);
+  const ontime = Math.round(lanes.reduce((s, l) => s + l.ontime * l.volume, 0) / volume);
+  const margin = Math.round(lanes.reduce((s, l) => s + l.margin * l.volume, 0) / volume);
+  return { volume, ontime, margin };
+}
+
+const ALL_LANES = REGIONS.flatMap((r) => r.sites.flatMap((s) => s.lanes));
+const NETWORK = rollup(ALL_LANES);
+const UNDER_TARGET = ALL_LANES.filter((l) => l.ontime < ONTIME_TARGET).length;
+
+/** The shared column map — identical at every level of the tree. */
+const COLS = { volume: 90, ontime: 64, margin: 64 } as const;
+
+function MetricCols({ volume, ontime, margin, weight }: { volume: number; ontime: number; margin: number; weight?: "medium" }) {
+  return (
+    <>
+      <Text size="sm" weight={weight} tabular align="right" style={{ width: COLS.volume }}>
+        {volume.toLocaleString("en-US")}
+      </Text>
+      <Text size="sm" weight={weight} tabular align="right" color={ontime < ONTIME_TARGET ? "danger" : "default"} style={{ width: COLS.ontime }}>
+        {`${ontime}%`}
+      </Text>
+      <Text size="sm" weight={weight} tabular align="right" style={{ width: COLS.margin }}>
+        {`${margin}%`}
+      </Text>
+    </>
+  );
+}
+
+function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 28 }}>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+      {children}
+    </View>
+  );
+}
+
+export function TplRollup() {
+  // Drawer walks the opened lane's site — the natural sibling group.
+  const [open, setOpen] = useState<{ site: Site; idx: number } | null>(null);
+  const openLane = open ? open.site.lanes[open.idx] : null;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 980, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Network rollup</Text>
+          <Text size="sm" color="muted">This month by region, site and lane — expand the branch that drags the total</Text>
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Network volume", value: NETWORK.volume, format: "number", caption: `${ALL_LANES.length} lanes` },
+            { label: "On-time", value: NETWORK.ontime, format: "percentage", info: `Volume-weighted across every lane — target ${ONTIME_TARGET}%. Flagged branches are below it.` },
+            { label: "Margin", value: NETWORK.margin, format: "percentage", info: "Volume-weighted lane margin after transport cost." },
+            { label: "Lanes under target", value: UNDER_TARGET, format: "number", tone: "danger", caption: `on-time below ${ONTIME_TARGET}%` },
+          ]}
+        />
+
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="The same three columns at every level — totals are volume-weighted, so a flagged region always traces to flagged lanes inside it.">
+              By region · site · lane
+            </CardHeaderTitle>
+          </CardHeader>
+
+          {/* eyebrow columns — match the tree's column map exactly */}
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 10 }}>
+            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>Branch</Text>
+            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.volume }}>Volume</Text>
+            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.ontime }}>On-time</Text>
+            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.margin }}>Margin</Text>
+            <View style={{ width: 16 }} />
+          </View>
+          <Divider />
+
+          <View style={{ paddingHorizontal: 20, paddingVertical: 4 }}>
+            {REGIONS.map((region, ri) => {
+              const regionTotals = rollup(region.sites.flatMap((s) => s.lanes));
+              return (
+                <View key={region.key}>
+                  {ri > 0 ? <Divider /> : null}
+                  <Accordion defaultExpanded={regionTotals.ontime < ONTIME_TARGET}>
+                    <AccordionHeader accessibilityLabel={`${region.label} rollup`}>
+                      <AccordionTitle
+                        icon={regionTotals.ontime < ONTIME_TARGET ? "circle-alert" : undefined}
+                        iconColor={solid("amber")}
+                      >
+                        {region.label}
+                      </AccordionTitle>
+                      <MetricCols {...regionTotals} weight="medium" />
+                    </AccordionHeader>
+                    <AccordionContent>
+                      {region.sites.map((site) => {
+                        const siteTotals = rollup(site.lanes);
+                        return (
+                          <Accordion key={site.key} defaultExpanded={siteTotals.ontime < ONTIME_TARGET}>
+                            <AccordionHeader accessibilityLabel={`${site.label} rollup`}>
+                              <AccordionTitle
+                                icon={siteTotals.ontime < ONTIME_TARGET ? "circle-alert" : undefined}
+                                iconColor={solid("amber")}
+                              >
+                                {site.label}
+                              </AccordionTitle>
+                              <MetricCols {...siteTotals} />
+                            </AccordionHeader>
+                            <AccordionContent>
+                              {site.lanes.map((l, li) => (
+                                <PressableHighlight
+                                  key={l.id}
+                                  accessibilityRole="button"
+                                  accessibilityLabel={`Open lane ${l.id} to ${l.dest}`}
+                                  onPress={() => setOpen({ site, idx: li })}
+                                  style={{
+                                    flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40,
+                                    borderRadius: 8, paddingHorizontal: 8, marginHorizontal: -8,
+                                    backgroundColor: openLane?.id === l.id ? colors.zinc[100] : undefined,
+                                  }}
+                                >
+                                  <Text size="sm" tabular style={{ width: 88 }}>{l.id}</Text>
+                                  <Text size="sm" color="muted" numberOfLines={1} style={{ flex: 1 }}>{`→ ${l.dest}`}</Text>
+                                  <MetricCols {...l} />
+                                  <View style={{ width: 16 }} />
+                                </PressableHighlight>
+                              ))}
+                            </AccordionContent>
+                          </Accordion>
+                        );
+                      })}
+                    </AccordionContent>
+                  </Accordion>
+                </View>
+              );
+            })}
+          </View>
+
+          <CardFooter>
+            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+              {`Network · ${NETWORK.volume.toLocaleString("en-US")} units · ${NETWORK.ontime}% on-time · ${NETWORK.margin}% margin`}
+            </Text>
+          </CardFooter>
+        </Card>
+      </View>
+
+      {open !== null && openLane !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpen(null)}
+          title={openLane.id}
+          width={440}
+          onPrev={open.idx > 0 ? () => setOpen({ site: open.site, idx: open.idx - 1 }) : undefined}
+          onNext={open.idx < open.site.lanes.length - 1 ? () => setOpen({ site: open.site, idx: open.idx + 1 }) : undefined}
+          position={`${open.idx + 1}/${open.site.lanes.length}`}
+        >
+          <View key={openLane.id} style={{ flex: 1, padding: 24, gap: 16 }}>
+            <View style={{ gap: 6 }}>
+              <KVRow label="Route"><Text size="sm">{`${open.site.label} → ${openLane.dest}`}</Text></KVRow>
+              <Divider />
+              <KVRow label="Volume this month"><Text size="sm" tabular>{openLane.volume.toLocaleString("en-US")}</Text></KVRow>
+              <Divider />
+              <KVRow label="On-time">
+                <Text size="sm" tabular color={openLane.ontime < ONTIME_TARGET ? "danger" : "default"}>
+                  {`${openLane.ontime}% · target ${ONTIME_TARGET}%`}
+                </Text>
+              </KVRow>
+              <Divider />
+              <KVRow label="Margin"><Text size="sm" tabular>{`${openLane.margin}%`}</Text></KVRow>
+            </View>
+            <View style={{ gap: 8 }}>
+              <Text size="xs" color="muted" transform="uppercase">Volume · last 12 weeks</Text>
+              <Sparkline
+                data={Array.from({ length: 12 }, (_, w) => openLane.volume / 4 + (hash(w, openLane.volume) - 500) * (openLane.volume / 12000))}
+                width={200}
+                height={36}
+                color={openLane.ontime < ONTIME_TARGET ? solid("amber") : solid("blue")}
+              />
+            </View>
+          </View>
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderTopColor: colors.border,
+              paddingHorizontal: 20,
+              paddingVertical: 14,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 12,
+            }}
+          >
+            <Button title="Open lane record" color="primary" onPress={() => {}} />
+          </View>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}