@lotics/ui 8.0.0 → 9.0.0

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>
-  );
-}