@lotics/ui 3.6.0 → 4.0.0

package/examples/tpl_pick.tsx

@@ -0,0 +1,240 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid } from "@lotics/ui/colors";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card } from "@lotics/ui/card";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { Counter } from "@lotics/ui/counter";
+import { Divider } from "@lotics/ui/divider";
+import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
+import { ProgressBar } from "@lotics/ui/progress_bar";
+import { ScanField } from "@lotics/ui/scan_field";
+import { StepList, type StepListItem } from "@lotics/ui/step_list";
+import { CompletionState } from "@lotics/ui/completion_state";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Guided execution — a warehouse PICK RUN. The work is a SEQUENCE of
+// physical tasks, not a list to browse: the run hands the operator the next bin,
+// they scan to verify they're at the right shelf, confirm the count, and the
+// next task takes its place. Two panes use the screen the way the work wants —
+// the CURRENT task large on the left (where to walk, what to take, how many), the
+// whole PICK PATH on the right (done · now · up next) so position is always in
+// view. Scan-to-verify, can't-skip ordering, and a short-pick exception that
+// flags-and-advances without stalling the run.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface PickLine {
+  id: string;
+  zone: string;
+  bin: string;
+  sku: string;
+  item: string;
+  qty: number;
+  status: "pending" | "picked" | "short";
+  /** Actual units taken — = qty when picked, < qty when short. */
+  picked?: number;
+}
+
+// Ordered by pick path — the run walks the operator down the aisles in sequence.
+const WAVE: PickLine[] = [
+  { id: "L1", zone: "Aisle A", bin: "A-12-03", sku: "RM-0012", item: "Kraft paper 175gsm, 1.6m", qty: 8, status: "pending" },
+  { id: "L2", zone: "Aisle A", bin: "A-14-08", sku: "RM-0018", item: "Medium paper 115gsm, 1.4m", qty: 12, status: "pending" },
+  { id: "L3", zone: "Aisle B", bin: "B-03-01", sku: "FG-0203", item: "Carton box 600×400×400, 5-ply", qty: 50, status: "pending" },
+  { id: "L4", zone: "Aisle B", bin: "B-05-07", sku: "FG-0218", item: "Carton box 350×250×200, 3-ply", qty: 40, status: "pending" },
+  { id: "L5", zone: "Aisle C", bin: "C-01-02", sku: "SUP-0007", item: "Clear packing tape 48mm", qty: 24, status: "pending" },
+  { id: "L6", zone: "Aisle C", bin: "C-02-09", sku: "SUP-0011", item: "PP strapping 12mm, 10kg roll", qty: 6, status: "pending" },
+  { id: "L7", zone: "Aisle C", bin: "C-04-01", sku: "FG-0226", item: "Offset box 250×180×90, 4-color", qty: 30, status: "pending" },
+];
+
+const SHORT_REASONS = [
+  { label: "Out of stock", value: "oos" },
+  { label: "Damaged", value: "damaged" },
+  { label: "Location empty", value: "empty" },
+];
+
+// The exception branch — record fewer units than asked + a reason, then advance.
+// A short never blocks the run; the shortfall is flagged for backfill.
+function ShortGate({ line, onShort }: { line: PickLine; onShort: (actual: number) => void }) {
+  const [open, setOpen] = useState(false);
+  const [actual, setActual] = useState(0);
+  const [reason, setReason] = useState("oos");
+  return (
+    <Popover open={open} onOpenChange={setOpen} side="top" align="start">
+      <PopoverTrigger>
+        <Button title="Can't pick all" color="muted" />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 300 }} disableBodyScroll>
+        <View style={{ gap: 14 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="sm" weight="semibold">{`Short pick · ${line.bin}`}</Text>
+            <Text size="xs" color="muted">Record what you actually took — the rest is flagged for backfill.</Text>
+          </View>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+            <Text size="sm" color="muted" style={{ flex: 1 }}>{`Picked (of ${line.qty})`}</Text>
+            <Counter value={actual} min={0} max={line.qty} onValueChange={setActual} accessibilityLabel="units actually picked" />
+          </View>
+          <ChipGroup accessibilityLabel="Short reason" options={SHORT_REASONS} value={reason} onValueChange={setReason} />
+        </View>
+        <PopoverFooter>
+          <Button title="Record short" color="danger" onPress={() => { setOpen(false); onShort(actual); }} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// The hero — the one task in front of the operator right now.
+function CurrentTask({ line, index, total, onConfirm, onShort }: {
+  line: PickLine; index: number; total: number; onConfirm: () => void; onShort: (actual: number) => void;
+}) {
+  const [scan, setScan] = useState("");
+  const matched = scan.trim().toUpperCase() === line.bin.toUpperCase();
+  return (
+    <Card style={{ padding: 0 }}>
+      <View style={{ padding: 24, gap: 18 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Badge label={line.zone} color="blue" />
+          <Text size="xs" color="muted" tabular style={{ flex: 1, textAlign: "right" }}>{`Line ${index + 1} of ${total}`}</Text>
+        </View>
+        {/* the bin is the biggest thing on screen — it's where you walk */}
+        <View style={{ gap: 2 }}>
+          <Text size="xs" color="muted" transform="uppercase">Go to bin</Text>
+          <Text size="xxl" weight="semibold" tabular>{line.bin}</Text>
+        </View>
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
+          <View style={{ gap: 2, flexGrow: 1, flexBasis: 200 }}>
+            <Text size="md" weight="medium">{line.item}</Text>
+            <Text size="sm" color="muted" tabular>{line.sku}</Text>
+          </View>
+          <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+            <Text size="sm" color="muted">Pick</Text>
+            <Text size="xl" weight="semibold" tabular>{line.qty}</Text>
+            <Text size="sm" color="muted">units</Text>
+          </View>
+        </View>
+        {/* scan-to-verify — confirm you're at the right shelf before the count */}
+        <ScanField
+          value={scan}
+          onChangeText={setScan}
+          status={matched ? "match" : scan.trim() ? "mismatch" : "idle"}
+          matchHint="Location verified — confirm the count"
+          mismatchHint={`Wrong bin — walk to ${line.bin}`}
+          placeholder={`Scan or type bin ${line.bin}`}
+          onScan={() => { if (matched) onConfirm(); }}
+          accessibilityLabel="Scan bin to verify location"
+        />
+      </View>
+      <Divider />
+      <View style={{ padding: 16, flexDirection: "row", alignItems: "center", gap: 12 }}>
+        <ShortGate line={line} onShort={onShort} />
+        <View style={{ flex: 1 }} />
+        <Button title={`Confirm ${line.qty}`} color="primary" onPress={onConfirm} />
+      </View>
+    </Card>
+  );
+}
+
+function Complete({ lines, onReset }: { lines: PickLine[]; onReset: () => void }) {
+  const shorts = lines.filter((l) => l.status === "short").length;
+  const units = lines.reduce((s, l) => s + (l.status === "short" ? l.picked ?? 0 : l.qty), 0);
+  return (
+    <Card style={{ padding: 0 }}>
+      <CompletionState
+        title="Wave picked"
+        summary={`${lines.length} lines · ${units} units${shorts > 0 ? ` · ${shorts} short` : ""}`}
+      >
+        <Button title="Start next wave" color="muted" onPress={onReset} />
+        <Button title="Hand to packing" color="primary" onPress={() => {}} />
+      </CompletionState>
+    </Card>
+  );
+}
+
+// The right rail — the whole run at a glance: done · now · up next. Read-only;
+// the run is sequential, so position is shown, not chosen.
+function RunPath({ lines, currentIndex }: { lines: PickLine[]; currentIndex: number }) {
+  const steps: StepListItem[] = lines.map((l, i) => ({
+    id: l.id,
+    status: l.status === "short" ? "warning" : l.status === "picked" ? "done" : i === currentIndex ? "current" : "pending",
+    title: l.bin,
+    subtitle: l.item,
+    trailing:
+      l.status === "short" ? (
+        <Badge variant="dot" label={`${l.picked ?? 0} of ${l.qty}`} color="amber" />
+      ) : (
+        <Text size="sm" color="muted" tabular>{`×${l.qty}`}</Text>
+      ),
+  }));
+  return (
+    <Card style={{ padding: 0 }}>
+      <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
+        <Text size="xs" color="muted" transform="uppercase">{`Pick path · ${lines.length} lines`}</Text>
+      </View>
+      <Divider />
+      <View style={{ paddingHorizontal: 16, paddingVertical: 14 }}>
+        <StepList steps={steps} accessibilityLabel="Pick path" />
+      </View>
+    </Card>
+  );
+}
+
+export function TplPick() {
+  const [lines, setLines] = useState<PickLine[]>(WAVE);
+
+  const idx = lines.findIndex((l) => l.status === "pending");
+  const current = idx >= 0 ? lines[idx] : null;
+  const done = lines.filter((l) => l.status !== "pending");
+
+  const totalUnits = lines.reduce((s, l) => s + l.qty, 0);
+  const pickedUnits = lines.reduce((s, l) => s + (l.status === "picked" ? l.qty : l.status === "short" ? l.picked ?? 0 : 0), 0);
+  const shorts = lines.filter((l) => l.status === "short").length;
+
+  const setStatus = (id: string, status: PickLine["status"], picked: number) =>
+    setLines((prev) => prev.map((l) => (l.id === id ? { ...l, status, picked } : l)));
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center", gap: 16 }}>
+        {/* header — the wave + the cart it's filling */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">Pick wave W-0142</Text>
+            <Text size="sm" color="muted">7 lines for 3 outbound orders · Cart C-07</Text>
+          </View>
+          <Button title="Pause wave" color="muted" onPress={() => {}} />
+        </View>
+
+        {/* run progress — the one number that says how close to done */}
+        <View style={{ gap: 6 }}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <Text size="sm" color="muted" style={{ flex: 1 }}>{`${done.length} of ${lines.length} lines · ${pickedUnits} of ${totalUnits} units`}</Text>
+            {shorts > 0 ? <Text size="sm" color="danger" tabular>{`${shorts} short`}</Text> : null}
+          </View>
+          <ProgressBar value={done.length} max={lines.length} format="none" color={solid("blue")} />
+        </View>
+
+        {/* two panes — the current task large, the whole path alongside it */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
+          <View style={{ flexGrow: 1.6, flexBasis: 440 }}>
+            {current ? (
+              <CurrentTask
+                line={current}
+                index={idx}
+                total={lines.length}
+                onConfirm={() => setStatus(current.id, "picked", current.qty)}
+                onShort={(actual) => setStatus(current.id, actual >= current.qty ? "picked" : "short", actual)}
+              />
+            ) : (
+              <Complete lines={lines} onReset={() => setLines(WAVE)} />
+            )}
+          </View>
+          <View style={{ flexGrow: 1, flexBasis: 320 }}>
+            <RunPath lines={lines} currentIndex={idx} />
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

package/examples/tpl_quick.tsx

@@ -0,0 +1,210 @@
+import { useRef, useState } from "react";
+import { ScrollView, View, type TextInput as RNTextInput } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { Alert } from "@lotics/ui/alert";
+import { Card, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Icon, type IconName } from "@lotics/ui/icon";
+import { FormField } from "@lotics/ui/form_field";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Combobox } from "@lotics/ui/combobox";
+import type { PickerOption } from "@lotics/ui/picker";
+import { SegmentedControl } from "@lotics/ui/segmented_control";
+import { Counter } from "@lotics/ui/counter";
+import { EmptyState } from "@lotics/ui/empty_state";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Quick capture — the SPEED surface, opposite of the heavy form: one
+// compact row of inputs, Enter to add, the field keeps focus and the contact
+// carries over so the next touchpoint is two keystrokes away. Every entry drops
+// into the log below (newest first, undoable). A `SegmentedControl` mode, a
+// `Combobox`-as-select, a `Counter` for the bounded duration. No screen-wide
+// Save — each entry commits on its own.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type ActType = "call" | "email" | "meeting" | "note";
+
+const ACT: Record<ActType, { label: string; icon: IconName }> = {
+  call: { label: "Call", icon: "phone" },
+  email: { label: "Email", icon: "mail" },
+  meeting: { label: "Meeting", icon: "calendar" },
+  note: { label: "Note", icon: "message-square" },
+};
+
+const TYPE_OPTIONS = (Object.keys(ACT) as ActType[]).map((v) => ({ label: ACT[v].label, value: v }));
+
+interface Contact {
+  id: string;
+  name: string;
+  company: string;
+}
+
+const CONTACTS: Contact[] = [
+  { id: "c1", name: "Mara Lindqvist", company: "Northwind Traders" },
+  { id: "c2", name: "Diego Alvarez", company: "Harbor Freight Lines" },
+  { id: "c3", name: "Priya Nair", company: "Summit Packaging Co." },
+  { id: "c4", name: "Tom Becker", company: "Atlas Distribution" },
+  { id: "c5", name: "Lena Fischer", company: "Bluewater Logistics" },
+  { id: "c6", name: "Sara Cohen", company: "Meridian Retail Group" },
+];
+
+const CONTACT_OPTIONS: PickerOption<string, Contact>[] = CONTACTS.map((c) => ({
+  value: c.id,
+  label: c.name,
+  data: c,
+}));
+
+interface Entry {
+  id: string;
+  type: ActType;
+  contact: Contact;
+  note: string;
+  minutes: number;
+  time: string;
+}
+
+const SEED: Entry[] = [
+  { id: "e1", type: "call", contact: CONTACTS[2], note: "Reviewed Q3 volume, wants a revised quote by Friday", minutes: 15, time: "10:05" },
+  { id: "e2", type: "email", contact: CONTACTS[0], note: "Sent updated pallet spec sheet", minutes: 0, time: "09:40" },
+  { id: "e3", type: "meeting", contact: CONTACTS[4], note: "Warehouse walkthrough — flagged dock height", minutes: 45, time: "09:12" },
+];
+
+const fmtDuration = (m: number) => (m === 0 ? "—" : m >= 60 ? `${Math.floor(m / 60)}h${m % 60 ? ` ${m % 60}m` : ""}` : `${m}m`);
+
+export function TplQuick() {
+  const id = useRef(1);
+  const noteRef = useRef<RNTextInput>(null);
+
+  const [type, setType] = useState<ActType>("call");
+  const [contact, setContact] = useState<PickerOption<string, Contact> | null>(null);
+  const [note, setNote] = useState("");
+  const [minutes, setMinutes] = useState(15);
+  const [entries, setEntries] = useState<Entry[]>(SEED);
+
+  const canAdd = contact !== null && note.trim().length > 0;
+
+  const add = () => {
+    if (!canAdd || !contact?.data) return;
+    const entry: Entry = {
+      id: `e_${(id.current += 1)}`,
+      type,
+      contact: contact.data,
+      note: note.trim(),
+      minutes,
+      time: "Just now",
+    };
+    setEntries((prev) => [entry, ...prev]);
+    // Keep type + contact for the next touchpoint; clear only the note + duration
+    // and re-focus the note so logging again is immediate.
+    setNote("");
+    setMinutes(type === "email" ? 0 : 15);
+    noteRef.current?.focus();
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Log activity</Text>
+          <Text size="sm" color="muted">Capture a touchpoint in seconds — pick the type, the contact, type the note, press Enter</Text>
+        </View>
+
+        {/* the capture row */}
+        <Card style={{ padding: 0 }}>
+          <CardBody>
+            <SegmentedControl accessibilityLabel="Activity type" options={TYPE_OPTIONS} value={type} onValueChange={setType} style={{ marginBottom: 16 }} />
+            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+              <FormField label="Contact" style={{ flexGrow: 1, flexBasis: 240 }}>
+                <Combobox
+                  options={CONTACT_OPTIONS}
+                  value={contact}
+                  onValueChange={setContact}
+                  getOptionDescription={(o) => o.data?.company}
+                  placeholder="Select a contact"
+                  accessibilityLabel="Contact"
+                />
+              </FormField>
+              <FormField label="Duration" style={{ flexGrow: 0, flexBasis: 180 }}>
+                <View style={{ minHeight: 40, justifyContent: "center" }}>
+                  <Counter value={minutes} onValueChange={setMinutes} min={0} max={240} step={15} accessibilityLabel="Duration" format={fmtDuration} />
+                </View>
+              </FormField>
+            </View>
+            <FormField label="Note">
+              <TextInputField
+                ref={noteRef}
+                value={note}
+                onChangeText={setNote}
+                placeholder="What happened? (press Enter to log)"
+                autoFocus
+                onKeyPress={(e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
+                  if (e.nativeEvent.key === "Enter") {
+                    e.preventDefault();
+                    add();
+                  }
+                }}
+              />
+            </FormField>
+          </CardBody>
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 12, gap: 8 }}>
+            <Text size="xs" color="muted" style={{ flex: 1 }}>
+              {contact?.data ? `${ACT[type].label} · ${contact.data.name}` : "Pick a contact to log against"}
+            </Text>
+            <Button title="Log activity" color="primary" icon="plus" disabled={!canAdd} onPress={add} />
+          </View>
+        </Card>
+
+        {/* the running log */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle>Today</CardHeaderTitle>
+            <CardHeaderMeta>{entries.length} logged</CardHeaderMeta>
+          </CardHeader>
+          {entries.length === 0 ? (
+            <EmptyState icon="message-square" message="Nothing logged yet" hint="Your activity for the day appears here" />
+          ) : (
+            entries.map((e, i) => (
+              <View key={e.id}>
+                {i > 0 ? <Divider /> : null}
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12 }}>
+                  <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+                    <Icon name={ACT[e.type].icon} size={16} color={colors.zinc[600]} />
+                  </View>
+                  <View style={{ flex: 1, gap: 1 }}>
+                    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+                      <Text weight="medium" numberOfLines={1}>{e.contact.name}</Text>
+                      <Text size="xs" color="muted">· {e.contact.company}</Text>
+                    </View>
+                    <Text size="sm" color="muted" numberOfLines={1}>{e.note}</Text>
+                  </View>
+                  <View style={{ alignItems: "flex-end", width: 76 }}>
+                    <Text size="xs" color="muted" tabular>{e.time}</Text>
+                    {e.minutes > 0 ? <Text size="xs" color="muted" tabular>{fmtDuration(e.minutes)}</Text> : null}
+                  </View>
+                  <Button
+                    title="Delete"
+                    color="secondary"
+                    accessibilityLabel={`Delete ${e.contact.name} ${ACT[e.type].label.toLowerCase()}`}
+                    onPress={() =>
+                      Alert.alert(
+                        "Delete activity?",
+                        `Remove the ${ACT[e.type].label.toLowerCase()} logged for ${e.contact.name}. This can't be undone.`,
+                        [
+                          { text: "Cancel", style: "cancel" },
+                          { text: "Delete", style: "destructive", onPress: () => setEntries((prev) => prev.filter((x) => x.id !== e.id)) },
+                        ],
+                      )
+                    }
+                  />
+                </View>
+              </View>
+            ))
+          )}
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}