@lotics/ui 8.0.0 → 10.0.0

package/examples/tpl_directory.tsx

@@ -1,260 +0,0 @@
-import { useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { ActionMenu } from "@lotics/ui/action_menu";
-import { Avatar } from "@lotics/ui/avatar";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterChip } from "@lotics/ui/filter_chip";
-import { Counter } from "@lotics/ui/counter";
-import { Card } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { formatMoney } from "@lotics/ui/format_money";
-import { StatusBadge } from "@lotics/ui/status_badge";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { SearchInput } from "@lotics/ui/search_input";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Directory — the partner directory every trading/logistics desk
-// needs: one searchable, filterable register of customers and suppliers with
-// the relationship status and volume at a glance.
-//
-// Grammar: zinc-50 canvas · one header band (count + ONE primary action) ·
-// toolbar (live search + type tabs) · ONE banded card of rows separated by
-// hairlines: Avatar → name + MST → type badge → tabular volume → StatusBadge.
-// Doors: a partner row is the PRIMARY entity here — press opens the partner
-// workspace Drawer (◀ ▶ / ←→ sequenced over the visible filtered ordering);
-// ⋯ holds the row's quick operations (destructive last).
-// ─────────────────────────────────────────────────────────────────────────────
-
-type PartnerKind = "khach" | "ncc";
-
-interface Partner {
-  id: string;
-  ten: string;
-  mst: string;
-  kind: PartnerKind;
-  donHang: number;
-  doanhSo: number;
-  active: boolean;
-}
-
-const PARTNERS: Partner[] = [
-  { id: "p1", ten: "Apex Plastics", mst: "0301452786", kind: "khach", donHang: 24, doanhSo: 860_000_000, active: true },
-  { id: "p2", ten: "Eastland Packaging", mst: "0312908455", kind: "ncc", donHang: 18, doanhSo: 412_000_000, active: true },
-  { id: "p3", ten: "Vista Paper Mills", mst: "0309977120", kind: "ncc", donHang: 31, doanhSo: 1_240_000_000, active: true },
-  { id: "p4", ten: "Crestline Foods", mst: "0107643298", kind: "khach", donHang: 12, doanhSo: 340_000_000, active: true },
-  { id: "p5", ten: "Harbor Engineering", mst: "0203318874", kind: "khach", donHang: 7, doanhSo: 156_000_000, active: false },
-  { id: "p6", ten: "Summit Freight", mst: "0314226901", kind: "ncc", donHang: 42, doanhSo: 980_000_000, active: true },
-  { id: "p7", ten: "Northway Appliances", mst: "0108812346", kind: "khach", donHang: 19, doanhSo: 624_000_000, active: true },
-  { id: "p8", ten: "Brightline Inks", mst: "0305570213", kind: "ncc", donHang: 9, doanhSo: 87_000_000, active: false },
-  { id: "p9", ten: "Phoenix Textiles", mst: "0300523847", kind: "khach", donHang: 28, doanhSo: 1_030_000_000, active: true },
-  { id: "p10", ten: "Delta Chemicals", mst: "0204461185", kind: "ncc", donHang: 15, doanhSo: 295_000_000, active: true },
-];
-
-const KIND_TABS = [
-  { value: "all", label: "All" },
-  { value: "khach", label: "Customers" },
-  { value: "ncc", label: "Suppliers" },
-] as const;
-
-type KindTab = (typeof KIND_TABS)[number]["value"];
-
-const kindLabel = (kind: PartnerKind) => (kind === "khach" ? "Customer" : "Supplier");
-
-function PartnerRow({ p, selected, onPress }: { p: Partner; selected: boolean; onPress: () => void }) {
-  return (
-    <PressableRow onPress={onPress} selected={selected} style={{ minHeight: 64 }}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`Open partner ${p.ten}`}
-        onPress={onPress}
-        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12 }}
-      >
-        <Avatar size={36} name={p.ten} />
-        <View style={{ flex: 1, gap: 2 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="sm" weight="medium" numberOfLines={1}>{p.ten}</Text>
-            <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
-          </View>
-          <Text size="xs" color="muted" tabular>MST {p.mst}</Text>
-        </View>
-        <Text size="sm" color="muted" tabular>
-          {p.donHang} orders · {formatMoney(p.doanhSo)}
-        </Text>
-        <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
-      </Pressable>
-      <ActionMenu
-        accessibilityLabel={`Actions for ${p.ten}`}
-        items={[
-          { key: "don", label: "Create order", icon: "file-text", onPress: () => {} },
-          { key: "sua", label: "Edit details", icon: "pencil", onPress: () => {} },
-          p.active
-            ? { key: "dung", label: "Pause partnership", icon: "pause", danger: true, onPress: () => {} }
-            : { key: "molai", label: "Resume partnership", icon: "history", onPress: () => {} },
-        ]}
-      />
-    </PressableRow>
-  );
-}
-
-function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
-      <Text size="sm" color="muted" style={{ width: 110 }}>{label}</Text>
-      {typeof children === "string" ? <Text size="sm">{children}</Text> : children}
-    </View>
-  );
-}
-
-// The drawer body — compact partner workspace: identity, the key facts already
-// on the row, and the two real next steps. Keyed by partner id by the caller
-// so nothing leaks across ◀ ▶ steps.
-function PartnerWorkspace({ p }: { p: Partner }) {
-  return (
-    <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 20 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-          <Avatar size={44} name={p.ten} />
-          <View style={{ gap: 4, flex: 1 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
-              <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
-            </View>
-            <Text size="xs" color="muted" tabular userSelect="auto">MST {p.mst}</Text>
-          </View>
-        </View>
-
-        <Divider />
-
-        <View style={{ gap: 6 }}>
-          <KVRow label="Partner type">{kindLabel(p.kind)}</KVRow>
-          <KVRow label="Tax ID"><Text size="sm" tabular userSelect="auto">{p.mst}</Text></KVRow>
-          <KVRow label="Orders"><Text size="sm" tabular>{`${p.donHang} orders`}</Text></KVRow>
-          <KVRow label="Revenue"><Text size="sm" tabular>{formatMoney(p.doanhSo)}</Text></KVRow>
-        </View>
-      </ScrollView>
-
-      {/* pinned footer — the workspace's escalation, commit action at the right edge */}
-      <View style={{ borderTopWidth: 1, borderTopColor: colors.border, paddingHorizontal: 20, paddingVertical: 14, flexDirection: "row", alignItems: "center", gap: 12 }}>
-        <Text size="xs" color="muted" style={{ flex: 1 }}>New orders attach to this partner — track them in the Orders module.</Text>
-        <Button title="Edit details" color="secondary" onPress={() => {}} />
-        <Button title="Create order" color="primary" onPress={() => {}} />
-      </View>
-    </>
-  );
-}
-
-export function TplDirectory() {
-  const [search, setSearch] = useState("");
-  const [tab, setTab] = useState<KindTab>("all");
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [minOrders, setMinOrders] = useState(0);
-
-  const q = search.trim().toLowerCase();
-  const matches = PARTNERS.filter(
-    (p) =>
-      (tab === "all" || p.kind === tab) &&
-      p.donHang >= minOrders &&
-      (q === "" || p.ten.toLowerCase().includes(q) || p.mst.includes(q)),
-  );
-
-  // The drawer sequences over the visible filtered ordering. When the open
-  // partner falls out of it (search/tab changed), the chevrons disappear but
-  // the drawer stays on the record.
-  const openPartner = PARTNERS.find((p) => p.id === openId) ?? null;
-  const seqIndex = openPartner ? matches.findIndex((p) => p.id === openPartner.id) : -1;
-
-  return (
-    <View style={{ flex: 1, backgroundColor: colors.white }}>
-      <ScrollView style={{ flex: 1 }} 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 }}>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                <Text size="xl" weight="semibold">Directory</Text>
-              </View>
-              <Text size="sm" color="muted">Customers and suppliers — look anyone up by name or tax ID</Text>
-            </View>
-            <Button title="Add partner" color="primary" onPress={() => {}} />
-          </View>
-
-          {/* toolbar: live search + a partner-type lens. Wraps when narrow;
-              every control is 40px so a wrapped band reads as clean rows. */}
-          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
-            <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
-              <SearchInput
-                placeholder="Search by name or tax ID…"
-                accessibilityLabel="Search partners"
-                value={search}
-                onChangeText={setSearch}
-              />
-            </View>
-            <ChipGroup
-              accessibilityLabel="Partner type"
-              options={KIND_TABS.map((t) => ({
-                label: `${t.label} · ${PARTNERS.filter((p) => t.value === "all" || p.kind === t.value).length}`,
-                value: t.value,
-              }))}
-              value={tab}
-              onValueChange={setTab}
-            />
-            <FilterChip
-              label="Min orders"
-              summary={minOrders > 0 ? `≥ ${minOrders}` : undefined}
-              onClear={() => setMinOrders(0)}
-              clearLabel="Clear min-orders filter"
-            >
-              <View style={{ gap: 10 }}>
-                <Text size="sm" color="muted">Show partners with at least</Text>
-                <Counter
-                  value={minOrders}
-                  min={0}
-                  max={50}
-                  step={5}
-                  onValueChange={setMinOrders}
-                  accessibilityLabel="minimum orders"
-                  format={(n) => `${n} orders`}
-                />
-              </View>
-            </FilterChip>
-          </View>
-
-          {/* the register: one card, gap-separated rounded `register` rows (no per-row Divider) */}
-          <Card style={{ padding: 0 }}>
-            {matches.length === 0 ? (
-              <EmptyState
-                message="No partners match"
-                hint="Try another keyword or switch the type filter"
-              />
-            ) : (
-              <View style={{ paddingVertical: 6, gap: 2 }}>
-                {matches.map((p) => (
-                  <PartnerRow key={p.id} p={p} selected={p.id === openId} onPress={() => setOpenId(p.id)} />
-                ))}
-              </View>
-            )}
-          </Card>
-        </View>
-      </ScrollView>
-
-      {/* the partner workspace — body keyed by partner id so per-record state
-          resets when ◀ ▶ (or ←/→) steps through the visible list */}
-      {openPartner ? (
-        <Drawer
-          open onOpenChange={(o) => !o && setOpenId(null)} title={openPartner.ten} width={480}
-          onPrev={seqIndex > 0 ? () => setOpenId(matches[seqIndex - 1].id) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < matches.length - 1 ? () => setOpenId(matches[seqIndex + 1].id) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${matches.length}` : undefined}
-        >
-          <PartnerWorkspace key={openPartner.id} p={openPartner} />
-        </Drawer>
-      ) : null}
-    </View>
-  );
-}

package/examples/tpl_intake.tsx

@@ -1,206 +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, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { FileDropzone } from "@lotics/ui/file_dropzone";
-import type { DisplayFile } from "@lotics/ui/file_thumbnail";
-import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
-import { Divider } from "@lotics/ui/divider";
-import { FormField } from "@lotics/ui/form_field";
-import { Picker } from "@lotics/ui/picker";
-import { Switch } from "@lotics/ui/switch";
-import { TextInputField } from "@lotics/ui/text_input_field";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Client intake — the multi-section intake form for a new
-// business partner. One banded Card: header (title + why it matters) →
-// three titled fieldsets separated by Dividers → footer per Action Layout
-// (helper text left · Cancel muted + ONE primary right). Fields wrap on a
-// flexBasis grid; every field holds state; Tax ID demonstrates the error band.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const INDUSTRIES = [
-  { label: "Manufacturing", value: "san_xuat" },
-  { label: "Trading", value: "thuong_mai" },
-  { label: "Construction", value: "xay_dung" },
-  { label: "Transportation", value: "van_tai" },
-  { label: "Packaging", value: "bao_bi" },
-  { label: "Other", value: "khac" },
-];
-
-const PAYMENT_TERMS = [
-  { label: "Due on receipt", value: "ngay" },
-  { label: "Net 15", value: "15" },
-  { label: "Net 30", value: "30" },
-  { label: "Net 45", value: "45" },
-];
-
-/** Grid cells: half-width on wide screens, full row when they can't fit. */
-const half = { flexGrow: 1, flexBasis: 280 } as const;
-const full = { flexGrow: 1, flexBasis: "100%" } as const;
-
-function FieldsetTitle({ title, hint }: { title: string; hint: string }) {
-  return (
-    <View style={{ gap: 2, paddingBottom: 14 }}>
-      <Text size="xs" color="muted" transform="uppercase">{title}</Text>
-      <Text size="xs" color="muted">{hint}</Text>
-    </View>
-  );
-}
-
-export function TplIntake() {
-  const [tenCongTy, setTenCongTy] = useState("Northwind Packaging Co., Ltd.");
-  const [mst, setMst] = useState("031245678");
-  const [linhVuc, setLinhVuc] = useState("");
-  const [nguoiLienHe, setNguoiLienHe] = useState("Maria Lopez");
-  const [dienThoai, setDienThoai] = useState("0903 558 214");
-  const [email, setEmail] = useState("maria.lopez@northwindpkg.com");
-  const [nhomZalo, setNhomZalo] = useState("");
-  const [hanThanhToan, setHanThanhToan] = useState("30");
-  const [hoaDonVat, setHoaDonVat] = useState(true);
-  const [ghiChu, setGhiChu] = useState("");
-  const [giayTo, setGiayTo] = useState<DisplayFile[]>([]);
-
-  const soChuSo = mst.replace(/\D/g, "").length;
-  const mstError =
-    mst.length > 0 && !/^\d{10}(\d{3})?$/.test(mst.replace(/[\s.-]/g, ""))
-      ? `Tax ID must be 10 or 13 digits — currently ${soChuSo}.`
-      : undefined;
-
-  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">Client intake</Text>
-            <Text size="sm" color="muted">Set up a new partner record — complete details up front mean quotes, orders, and invoices never need a follow-up question</Text>
-          </View>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          {/* card header: what this form decides */}
-          <CardHeader>
-            <CardHeaderTitle description="Enter once, reuse on every future quote and invoice — the tax ID is the matching key, double-check it before creating">
-              Partner record
-            </CardHeaderTitle>
-          </CardHeader>
-
-          {/* fieldset 1 · General information */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="General information" hint="Legal name as on the business registration, not the trading name" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Company name" style={full}>
-                <TextInputField value={tenCongTy} onChangeText={setTenCongTy} placeholder="Name on the business registration" />
-              </FormField>
-              <FormField label="Tax ID" error={mstError} style={half}>
-                <TextInputField
-                  value={mst}
-                  onChangeText={setMst}
-                  placeholder="10 or 13 digits"
-                  inputMode="numeric"
-                  style={{ fontVariant: ["tabular-nums"] }}
-                />
-              </FormField>
-              <FormField label="Industry" style={half}>
-                <Picker options={INDUSTRIES} value={linhVuc} onValueChange={setLinhVuc} placeholder="Select industry" />
-              </FormField>
-            </View>
-          </View>
-          <Divider />
-
-          {/* fieldset 2 · Contact */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="Contact" hint="The person who receives quotes and the monthly statement reconciliation" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Contact person" style={half}>
-                <TextInputField value={nguoiLienHe} onChangeText={setNguoiLienHe} placeholder="Full name" />
-              </FormField>
-              <FormField label="Phone" style={half}>
-                <TextInputField
-                  value={dienThoai}
-                  onChangeText={setDienThoai}
-                  placeholder="Mobile number"
-                  inputMode="tel"
-                  style={{ fontVariant: ["tabular-nums"] }}
-                />
-              </FormField>
-              <FormField label="Email" style={half}>
-                <TextInputField value={email} onChangeText={setEmail} placeholder="name@company.com" inputMode="email" autoCapitalize="none" />
-              </FormField>
-              <FormField label="Chat group" optional optionalLabel="Optional" style={half}>
-                <TextInputField value={nhomZalo} onChangeText={setNhomZalo} placeholder="Group used to coordinate orders" />
-              </FormField>
-            </View>
-          </View>
-          <Divider />
-
-          {/* fieldset 3 · Terms */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 4 }}>
-            <FieldsetTitle title="Terms" hint="Applied as the default on every order for this partner, adjustable per order" />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Payment terms" style={half}>
-                <Picker options={PAYMENT_TERMS} value={hanThanhToan} onValueChange={setHanThanhToan} placeholder="Select payment terms" />
-              </FormField>
-              <FormField label="VAT invoice" style={half}>
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 40 }}>
-                  <Switch accessibilityLabel="VAT invoice" value={hoaDonVat} onChange={setHoaDonVat} />
-                  <Text size="sm" color="muted">{hoaDonVat ? "Issue an invoice for every order" : "No invoices issued"}</Text>
-                </View>
-              </FormField>
-              <FormField label="Notes" optional optionalLabel="Optional" style={full}>
-                <TextInputField
-                  value={ghiChu}
-                  onChangeText={setGhiChu}
-                  placeholder="Special requirements for delivery, documents, reconciliation…"
-                  numberOfLines={3}
-                />
-              </FormField>
-            </View>
-          </View>
-
-          <Divider />
-
-          {/* fieldset 4 · Documents — the attachment pattern: FileDropzone
-              captures, FileThumbnailGrid displays what landed */}
-          <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 16, gap: 12 }}>
-            <FieldsetTitle title="Documents" hint="Business registration and legal documents — clear scans or photos" />
-            <FileDropzone
-              height={120}
-              label="Drop the business registration here"
-              hint="or click to browse · PDF, images"
-              dropLabel="Release to attach"
-              accept="application/pdf,image/*"
-              accessibilityLabel="Attach business registration"
-              onFiles={(files) =>
-                setGiayTo((prev) => [
-                  ...prev,
-                  ...files.map((f, i) => ({
-                    id: `${f.name}-${prev.length + i}`,
-                    filename: f.name,
-                    mimeType: f.type || "application/octet-stream",
-                    url: URL.createObjectURL(f),
-                  })),
-                ])
-              }
-            />
-            {giayTo.length > 0 ? <FileThumbnailGrid files={giayTo} itemSize={88} /> : null}
-          </View>
-
-          {/* footer per Action Layout: helper left · Cancel muted + ONE primary right */}
-          <CardFooter>
-            <Text size="xs" color="muted" style={{ flex: 1 }}>
-              {giayTo.length > 0
-                ? `${giayTo.length} files attached · record awaits Accounting approval before the first order`
-                : "New records await Accounting approval before the first order"}
-            </Text>
-            <Button title="Cancel" color="muted" onPress={() => {}} />
-            <Button title="Create record" color="primary" onPress={() => {}} />
-          </CardFooter>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}