@lotics/ui 8.0.0 → 9.0.0

package/examples/tpl_timeline.tsx

@@ -1,244 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
-import { Badge } from "@lotics/ui/badge";
-import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
-import { Icon, type IconName } from "@lotics/ui/icon";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
-import { KPICard } from "@lotics/ui/kpi_card";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Activity log — the audit feed of ONE record (an order).
-// Grammar: zinc-50 canvas · header band · filter pills (ChipGroup) · one Card
-// per DAY, each card = date band → Divider → Timeline. Icon color = event
-// category accent (blue = documents, emerald = payments, zinc = system,
-// red = warnings). Times right-aligned tabular; expandable details on the
-// events that carry numbers. No dead rows: events without inline details
-// carry an ActionMenu (⋯) with the event's real operations — open/download
-// the document, view the workflow run, re-send the reminder.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Cat = "chungtu" | "thanhtoan" | "hethong";
-
-interface MockEvent {
-  id: string;
-  cat: Cat;
-  icon: IconName;
-  color: string;
-  label: string;
-  time: string; // HH:mm
-  stats?: { label: string; value: string; tone?: "danger" }[];
-  file?: string;
-  note?: string;
-  actions?: ActionMenuItem[];
-}
-
-interface DayGroup {
-  id: string;
-  label: string; // "Today · 12/06"
-  events: MockEvent[];
-}
-
-const DAYS: DayGroup[] = [
-  {
-    id: "d0",
-    label: "Today · 12/06",
-    events: [
-      {
-        id: "e1", cat: "thanhtoan", icon: "circle-check", color: solid("emerald"),
-        label: "Accounting confirmed installment 2 — order settled", time: "14:32",
-        stats: [
-          { label: "Amount", value: formatMoney(12_600_000) },
-          { label: "Method", value: "Bank transfer" },
-          { label: "Outstanding", value: formatMoney(0) },
-        ],
-        note: "Reference TRX-0612-114 · First National Bank",
-      },
-      {
-        id: "e2", cat: "chungtu", icon: "file-up", color: solid("blue"),
-        label: "Nina Adams uploaded the signed delivery note", time: "11:05",
-        file: "DeliveryNote_DN-0042_signed.pdf",
-        actions: [
-          { key: "xem", label: "View document", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e3", cat: "hethong", icon: "bolt", color: colors.zinc[500],
-        label: "Delivery-reconciliation workflow ran — quantities match the note", time: "11:06",
-        actions: [
-          { key: "chay", label: "View run", icon: "history", onPress: () => {} },
-          { key: "mo", label: "Open workflow", icon: "external-link", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e4", cat: "hethong", icon: "bell", color: colors.zinc[500],
-        label: "Reminded Accounting: order awaiting invoice", time: "11:06",
-        actions: [
-          { key: "xem", label: "View notification", icon: "bell", onPress: () => {} },
-          { key: "nhac", label: "Remind again", icon: "repeat", onPress: () => {} },
-        ],
-      },
-    ],
-  },
-  {
-    id: "d1",
-    label: "Yesterday · 11/06",
-    events: [
-      {
-        id: "e5", cat: "chungtu", icon: "file-text", color: solid("blue"),
-        label: "VAT invoice issued from the Sales invoice template", time: "16:40",
-        file: "Invoice_INV-2026-0584.pdf",
-        actions: [
-          { key: "xem", label: "View invoice", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-          { key: "gui", label: "Send to customer", icon: "send", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e6", cat: "thanhtoan", icon: "credit-card", color: solid("emerald"),
-        label: "Installment 1 recorded (50% per contract)", time: "10:18",
-        stats: [
-          { label: "Amount", value: formatMoney(12_600_000) },
-          { label: "Outstanding", value: formatMoney(12_600_000), tone: "danger" },
-        ],
-      },
-      {
-        id: "e7", cat: "hethong", icon: "circle-alert", color: solid("red"),
-        label: "Warning: delivered 2 days past the needed-by date", time: "08:00",
-        note: "Needed by 09/06 — truck actually delivered 11/06. Logged against the delivery KPI.",
-      },
-    ],
-  },
-  {
-    id: "d2",
-    label: "Tuesday · 09/06",
-    events: [
-      {
-        id: "e8", cat: "hethong", icon: "pencil", color: colors.zinc[500],
-        label: "Mark Vu edited the Expected delivery date field", time: "15:22",
-        stats: [
-          { label: "Before", value: "09/06" },
-          { label: "After", value: "11/06" },
-        ],
-        note: "Reason: gluing line jammed at the plant — customer notified by chat.",
-      },
-      {
-        id: "e9", cat: "chungtu", icon: "send", color: solid("blue"),
-        label: "Approved quote emailed to the customer", time: "09:47",
-        file: "Quote_QT-2026-0042.pdf",
-        actions: [
-          { key: "xem", label: "View quote", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-          { key: "gui", label: "Re-send email", icon: "send", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e10", cat: "hethong", icon: "circle-check", color: solid("emerald"),
-        label: "Director approved the order — moved to Production order", time: "09:30",
-        actions: [
-          { key: "duyet", label: "View approval", icon: "eye", onPress: () => {} },
-          { key: "lien-ket", label: "Copy link", icon: "copy", onPress: () => {} },
-        ],
-      },
-    ],
-  },
-];
-
-const FILTERS = [
-  { value: "all", label: "All" },
-  { value: "chungtu", label: "Documents" },
-  { value: "thanhtoan", label: "Payments" },
-  { value: "hethong", label: "System" },
-] as const;
-
-function EventDetails({ ev }: { ev: MockEvent }) {
-  return (
-    <View style={{ gap: 8, paddingVertical: 4 }}>
-      {ev.stats ? (
-        <View style={{ flexDirection: "row", gap: 28 }}>
-          {ev.stats.map((s) => (
-            <KPICard key={s.label} label={s.label} value={s.value} format="none" size="sm" tone={s.tone} />
-          ))}
-        </View>
-      ) : null}
-      {ev.note ? <Text size="xs" color="muted">{ev.note}</Text> : null}
-    </View>
-  );
-}
-
-function toTimelineItem(ev: MockEvent): TimelineItem {
-  const hasDetails = !!ev.stats || !!ev.note;
-  return {
-    id: ev.id,
-    icon: ev.icon,
-    iconColor: ev.color,
-    label: ev.label,
-    right: (
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-        {ev.file ? (
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
-            <Icon name="file" size={12} color={colors.zinc[400]} />
-            <Text size="xs" color="muted" numberOfLines={1}>{ev.file}</Text>
-          </View>
-        ) : null}
-        <Text size="xs" color="muted" tabular>{ev.time}</Text>
-        {ev.actions ? (
-          <ActionMenu items={ev.actions} accessibilityLabel={`Actions: ${ev.label}`} />
-        ) : null}
-      </View>
-    ),
-    details: hasDetails ? <EventDetails ev={ev} /> : undefined,
-  };
-}
-
-export function TplTimeline() {
-  const [filter, setFilter] = useState<string>("all");
-
-  const all = DAYS.flatMap((d) => d.events);
-  const countOf = (v: string) => (v === "all" ? all.length : all.filter((e) => e.cat === v).length);
-  const days = DAYS
-    .map((d) => ({ ...d, events: filter === "all" ? d.events : d.events.filter((e) => e.cat === filter) }))
-    .filter((d) => d.events.length > 0);
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
-          <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Activity log</Text>
-            <Text size="sm" color="muted">Order SO-2026-0042 · NEWTECONS — who did what, when, with the paper trail</Text>
-          </View>
-          <Badge label="Settled" color="emerald" />
-        </View>
-
-        {/* filter band — pills narrow the feed by event type */}
-        <ChipGroup
-          accessibilityLabel="Filter activity"
-          options={FILTERS.map((f) => ({ label: `${f.label} · ${countOf(f.value)}`, value: f.value }))}
-          value={filter}
-          onValueChange={setFilter}
-        />
-
-        {/* one card per day: date band → hairline → timeline */}
-        {days.map((d) => (
-          <Card key={d.id} style={{ padding: 0 }}>
-            <CardHeader>
-              <CardHeaderTitle>{d.label}</CardHeaderTitle>
-              <CardHeaderMeta>{`${d.events.length} events`}</CardHeaderMeta>
-            </CardHeader>
-            {/* Last Timeline row carries its own 14px tail — trim the band's bottom to keep 16px optical. */}
-            <View style={{ paddingTop: 16, paddingHorizontal: 16, paddingBottom: 2 }}>
-              <Timeline items={d.events.map(toTimelineItem)} />
-            </View>
-          </Card>
-        ))}
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_wizard.tsx

@@ -1,223 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
-import { Card, CardBody } from "@lotics/ui/card";
-import { Stepper } from "@lotics/ui/stepper";
-import { FormField } from "@lotics/ui/form_field";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { Picker } from "@lotics/ui/picker";
-import type { PickerOption } from "@lotics/ui/picker";
-import { NumberInput } from "@lotics/ui/number_input";
-import { Switch } from "@lotics/ui/switch";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Callout, CalloutText } from "@lotics/ui/callout";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Application wizard — a long form broken into ordered STEPS with a
-// `Stepper` header, one fieldset per step, and a REVIEW step that reads back
-// every value with an Edit jump to its section. Back / Next gate on the current
-// step's required fields; the last step submits. For a form too long to scan as
-// one page (onboarding, applications, KYC). Two-column grid throughout.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const STEPS = ["Company", "Contact", "Terms", "Review"];
-
-const INDUSTRY: PickerOption[] = [
-  { value: "manufacturing", label: "Manufacturing" },
-  { value: "trading", label: "Trading" },
-  { value: "construction", label: "Construction" },
-  { value: "transport", label: "Transportation" },
-  { value: "retail", label: "Retail" },
-];
-
-const SIZE: PickerOption[] = [
-  { value: "1-10", label: "1–10" },
-  { value: "11-50", label: "11–50" },
-  { value: "51-200", label: "51–200" },
-  { value: "200+", label: "200+" },
-];
-
-const TERMS: PickerOption[] = [
-  { value: "receipt", label: "Due on receipt" },
-  { value: "15", label: "Net 15" },
-  { value: "30", label: "Net 30" },
-  { value: "45", label: "Net 45" },
-];
-
-const labelOf = (opts: PickerOption[], v: string) => opts.find((o) => o.value === v)?.label ?? "—";
-
-const half = { flexGrow: 1, flexBasis: 240 } as const;
-const full = { flexGrow: 1, flexBasis: "100%" } as const;
-
-export function TplWizard() {
-  const [step, setStep] = useState(0);
-
-  // Company
-  const [companyName, setCompanyName] = useState("Northwind Packaging Co., Ltd.");
-  const [taxId, setTaxId] = useState("0312456789");
-  const [industry, setIndustry] = useState("manufacturing");
-  const [regCity, setRegCity] = useState("Gothenburg");
-  const [size, setSize] = useState("51-200");
-
-  // Contact
-  const [contactName, setContactName] = useState("Mara Lindqvist");
-  const [role, setRole] = useState("Procurement lead");
-  const [phone, setPhone] = useState("0903 558 214");
-  const [email, setEmail] = useState("mara@northwind.co");
-
-  // Terms
-  const [terms, setTerms] = useState("30");
-  const [creditLimit, setCreditLimit] = useState<number | null>(50000000);
-  const [vatInvoice, setVatInvoice] = useState(true);
-  const [notes, setNotes] = useState("");
-
-  const stepValid = [
-    companyName.trim() !== "" && taxId.trim() !== "",
-    contactName.trim() !== "" && email.trim() !== "",
-    terms !== "",
-    true,
-  ];
-  const isLast = step === STEPS.length - 1;
-
-  const goEdit = (s: number) => setStep(s);
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">New partner application</Text>
-          <Text size="sm" color="muted">Four short steps — we save as you go; review everything before submitting</Text>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          <CardBody>
-            <Stepper steps={STEPS} current={step} />
-          </CardBody>
-          <Divider />
-
-          {/* step 0 · Company */}
-          {step === 0 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Legal name" style={full}>
-                  <TextInputField value={companyName} onChangeText={setCompanyName} placeholder="Name on the business registration" autoFocus />
-                </FormField>
-                <FormField label="Tax ID" style={half}>
-                  <TextInputField value={taxId} onChangeText={setTaxId} placeholder="10 or 13 digits" inputMode="numeric" />
-                </FormField>
-                <FormField label="Industry" style={half}>
-                  <Picker options={INDUSTRY} value={industry} onValueChange={setIndustry} placeholder="Select industry" accessibilityLabel="Industry" />
-                </FormField>
-                <FormField label="Registered city" style={half}>
-                  <TextInputField value={regCity} onChangeText={setRegCity} placeholder="City" />
-                </FormField>
-                <FormField label="Company size" style={half}>
-                  <Picker options={SIZE} value={size} onValueChange={setSize} placeholder="Headcount" accessibilityLabel="Company size" />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 1 · Contact */}
-          {step === 1 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Contact person" style={half}>
-                  <TextInputField value={contactName} onChangeText={setContactName} placeholder="Full name" autoFocus />
-                </FormField>
-                <FormField label="Role" style={half}>
-                  <TextInputField value={role} onChangeText={setRole} placeholder="Job title" />
-                </FormField>
-                <FormField label="Phone" style={half}>
-                  <TextInputField value={phone} onChangeText={setPhone} placeholder="Mobile number" inputMode="tel" />
-                </FormField>
-                <FormField label="Email" style={half}>
-                  <TextInputField value={email} onChangeText={setEmail} placeholder="name@company.com" inputMode="email" autoCapitalize="none" />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 2 · Terms */}
-          {step === 2 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Payment terms" style={half}>
-                  <Picker options={TERMS} value={terms} onValueChange={setTerms} placeholder="Select terms" accessibilityLabel="Payment terms" />
-                </FormField>
-                <FormField label="Requested credit limit" style={half}>
-                  <NumberInput value={creditLimit} onValueChange={setCreditLimit} min={0} accessibilityLabel="Requested credit limit" />
-                </FormField>
-                <FormField label="VAT invoice" style={full}>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 40 }}>
-                    <Switch accessibilityLabel="VAT invoice" value={vatInvoice} onChange={setVatInvoice} />
-                    <Text size="sm" color="muted">{vatInvoice ? "Issue an invoice for every order" : "No invoices issued"}</Text>
-                  </View>
-                </FormField>
-                <FormField label="Notes" optional optionalLabel="Optional" style={full}>
-                  <TextInputField value={notes} onChangeText={setNotes} placeholder="Anything the credit team should know" numberOfLines={3} />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 3 · Review */}
-          {step === 3 ? (
-            <CardBody>
-              <Callout tone="info"><CalloutText>Check every detail — once submitted, changes need a credit-team request.</CalloutText></Callout>
-              <ReviewGroup title="Company" onEdit={() => goEdit(0)}>
-                <DetailRow label="Legal name" labelWidth={150}><Text size="sm">{companyName}</Text></DetailRow>
-                <DetailRow label="Tax ID" labelWidth={150}><Text size="sm" tabular>{taxId}</Text></DetailRow>
-                <DetailRow label="Industry" labelWidth={150}><Text size="sm">{labelOf(INDUSTRY, industry)}</Text></DetailRow>
-                <DetailRow label="Registered city" labelWidth={150}><Text size="sm">{regCity}</Text></DetailRow>
-                <DetailRow label="Company size" labelWidth={150}><Text size="sm">{labelOf(SIZE, size)}</Text></DetailRow>
-              </ReviewGroup>
-              <Divider />
-              <ReviewGroup title="Contact" onEdit={() => goEdit(1)}>
-                <DetailRow label="Contact person" labelWidth={150}><Text size="sm">{contactName}</Text></DetailRow>
-                <DetailRow label="Role" labelWidth={150}><Text size="sm">{role}</Text></DetailRow>
-                <DetailRow label="Phone" labelWidth={150}><Text size="sm" tabular>{phone}</Text></DetailRow>
-                <DetailRow label="Email" labelWidth={150}><Text size="sm">{email}</Text></DetailRow>
-              </ReviewGroup>
-              <Divider />
-              <ReviewGroup title="Terms" onEdit={() => goEdit(2)}>
-                <DetailRow label="Payment terms" labelWidth={150}><Text size="sm">{labelOf(TERMS, terms)}</Text></DetailRow>
-                <DetailRow label="Credit limit" labelWidth={150}><Text size="sm" tabular>{creditLimit == null ? "—" : formatMoney(creditLimit)}</Text></DetailRow>
-                <DetailRow label="VAT invoice" labelWidth={150}><Text size="sm">{vatInvoice ? "Yes" : "No"}</Text></DetailRow>
-                <DetailRow label="Notes" labelWidth={150}><Text size="sm" color={notes ? "default" : "muted"}>{notes || "—"}</Text></DetailRow>
-              </ReviewGroup>
-            </CardBody>
-          ) : null}
-
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 16, gap: 8 }}>
-            {step > 0 ? <Button title="Back" color="muted" icon="chevron-left" onPress={() => setStep((s) => s - 1)} /> : null}
-            <View style={{ flex: 1 }} />
-            <Text size="xs" color="muted">{`Step ${step + 1} of ${STEPS.length}`}</Text>
-            {isLast ? (
-              <Button title="Submit application" color="primary" onPress={() => {}} />
-            ) : (
-              <Button title="Next" color="primary" disabled={!stepValid[step]} onPress={() => setStep((s) => s + 1)} />
-            )}
-          </View>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}
-
-function ReviewGroup({ title, onEdit, children }: { title: string; onEdit: () => void; children: React.ReactNode }) {
-  return (
-    <View style={{ gap: 2 }}>
-      <View style={{ flexDirection: "row", alignItems: "center", paddingBottom: 4 }}>
-        <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>{title}</Text>
-        <Button title="Edit" color="muted" icon="pencil" onPress={onEdit} />
-      </View>
-      {children}
-    </View>
-  );
-}