@lotics/ui 46.2.0 → 46.8.0

package/examples/tpl_statements.tsx

@@ -1,221 +0,0 @@
-import { ReactNode } 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 { Divider } from "@lotics/ui/divider";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template, Financial statements — the income statement, the balance sheet,
-// and the cash flow statement, all speaking ONE statement grammar: column
-// captions right-aligned over fixed money columns, items indented under their
-// group, a hairline rule above every subtotal, the grand total DOUBLE-RULED
-// (the accounting convention), negatives in accounting parentheses, no bars,
-// no charts — the numbers are the interface. The three statements TIE: net
-// income flows into retained earnings, the cash flow's closing cash IS the
-// balance sheet's cash, the loan repayment moves the debt line. Figures are
-// per-cell currency-free (the meta line says "VND" once).
-// ─────────────────────────────────────────────────────────────────────────────
-
-/** Accounting formatting: thousands-dotted, negatives in parentheses. */
-const num = (n: number) => {
-  const s = Math.abs(n).toLocaleString("vi-VN");
-  return n < 0 ? `(${s})` : s;
-};
-
-type LineKind = "header" | "item" | "subtotal" | "total";
-
-interface Line {
-  kind: LineKind;
-  label: string;
-  /** One value per column; null renders an empty cell (headers usually). */
-  values?: (number | null)[];
-}
-
-const COL_WIDTH = 124;
-
-/** One statement: right-aligned column captions, then the lines. The grammar —
- *  header (group label, no values), item (indented, plain), subtotal (rule
- *  above, semibold), total (DOUBLE rule above, semibold) — covers all three
- *  statements; only the data differs. */
-function Statement({ columns, lines }: { columns: string[]; lines: Line[] }) {
-  const cells = (l: Line, weight?: "medium" | "semibold") =>
-    (l.values ?? columns.map(() => null)).map((v, i) => (
-      <Text key={i} size="sm" weight={weight} tabular align="right" style={{ width: COL_WIDTH }}>
-        {v == null ? "" : num(v)}
-      </Text>
-    ));
-  return (
-    <View>
-      {/* column captions */}
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingBottom: 6 }}>
-        <View style={{ flex: 1 }} />
-        {columns.map((c) => (
-          <Text key={c} size="xs" weight="medium" color="muted" align="right" style={{ width: COL_WIDTH }}>
-            {c}
-          </Text>
-        ))}
-      </View>
-      <Divider />
-      <View style={{ paddingTop: 6, gap: 2 }}>
-        {lines.map((l, i) => {
-          if (l.kind === "header") {
-            return (
-              <Text key={i} size="sm" weight="semibold" style={{ paddingTop: i === 0 ? 0 : 10 }}>
-                {l.label}
-              </Text>
-            );
-          }
-          if (l.kind === "item") {
-            return (
-              <View key={i} style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 26 }}>
-                <Text size="sm" style={{ flex: 1, paddingLeft: 12 }}>{l.label}</Text>
-                {cells(l)}
-              </View>
-            );
-          }
-          if (l.kind === "subtotal") {
-            return (
-              <View key={i} style={{ gap: 2 }}>
-                <View style={{ flexDirection: "row", gap: 12 }}>
-                  <View style={{ flex: 1 }} />
-                  <View style={{ width: COL_WIDTH * columns.length + 12 * (columns.length - 1), borderTopWidth: 1, borderTopColor: colors.zinc[200] }} />
-                </View>
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 26 }}>
-                  <Text size="sm" weight="medium" style={{ flex: 1 }}>{l.label}</Text>
-                  {cells(l, "medium")}
-                </View>
-              </View>
-            );
-          }
-          // total — the double rule
-          return (
-            <View key={i} style={{ gap: 2, paddingTop: 4 }}>
-              <View style={{ flexDirection: "row", gap: 12 }}>
-                <View style={{ flex: 1 }} />
-                <View style={{ width: COL_WIDTH * columns.length + 12 * (columns.length - 1), gap: 2 }}>
-                  <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[400] }} />
-                  <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[400] }} />
-                </View>
-              </View>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 30 }}>
-                <Text size="sm" weight="semibold" style={{ flex: 1 }}>{l.label}</Text>
-                {cells(l, "semibold")}
-              </View>
-            </View>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-/** The statement page: title + the one meta line (entity, period, basis,
- *  currency, stated ONCE so cells stay currency-free) + Export, then the
- *  statement column. */
-function StatementPage({ title, meta, children }: { title: string; meta: string; children: ReactNode }) {
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 96 }}>
-      <View style={{ width: "100%", maxWidth: 680, alignSelf: "center", gap: 20 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", flexWrap: "wrap", columnGap: 12, rowGap: 8 }}>
-          <View style={{ flexGrow: 1, flexBasis: 240, gap: 2 }}>
-            <Text size="xxl" weight="semibold">{title}</Text>
-            <Text size="sm" color="muted">{meta}</Text>
-          </View>
-          <Button title="Export" color="secondary" icon="file-down" onPress={() => {}} />
-        </View>
-        {children}
-        <Text size="xs" color="muted">Unaudited management accounts. Figures in VND.</Text>
-      </View>
-    </ScrollView>
-  );
-}
-
-// ── the data — internally exact AND tied across the three statements:
-//    net income 81.840 → retained earnings 203.600 + 81.840 − 40.740 dividends
-//    = 244.700; closing cash 400.800 IS the balance sheet's cash; the loan
-//    repayment takes long-term debt 90.000 → 80.000. (thousands of VND)
-const K = 1000;
-
-export function TplIncomeStatement() {
-  const lines: Line[] = [
-    { kind: "header", label: "Revenue" },
-    { kind: "item", label: "Service revenue", values: [842_500 * K, 781_200 * K] },
-    { kind: "item", label: "Disbursement recharges", values: [128_400 * K, 118_900 * K] },
-    { kind: "subtotal", label: "Total revenue", values: [970_900 * K, 900_100 * K] },
-    { kind: "header", label: "Cost of services" },
-    { kind: "item", label: "Carrier & handling", values: [-512_300 * K, -471_800 * K] },
-    { kind: "item", label: "Customs & levies", values: [-148_200 * K, -139_600 * K] },
-    { kind: "subtotal", label: "Gross profit", values: [310_400 * K, 288_700 * K] },
-    { kind: "header", label: "Operating expenses" },
-    { kind: "item", label: "Salaries & benefits", values: [-142_000 * K, -138_500 * K] },
-    { kind: "item", label: "Office & software", values: [-38_400 * K, -37_200 * K] },
-    { kind: "item", label: "Marketing", values: [-21_500 * K, -18_900 * K] },
-    { kind: "subtotal", label: "Operating income", values: [108_500 * K, 94_100 * K] },
-    { kind: "item", label: "Interest expense", values: [-6_200 * K, -6_400 * K] },
-    { kind: "subtotal", label: "Profit before tax", values: [102_300 * K, 87_700 * K] },
-    { kind: "item", label: "Income tax (20%)", values: [-20_460 * K, -17_540 * K] },
-    { kind: "total", label: "Net income", values: [81_840 * K, 70_160 * K] },
-  ];
-  return (
-    <StatementPage title="Income statement" meta="VITTORIA Logistics, month ended 30/06/2026, VND">
-      <Statement columns={["Jun 2026", "May 2026"]} lines={lines} />
-    </StatementPage>
-  );
-}
-
-export function TplBalanceSheet() {
-  const lines: Line[] = [
-    { kind: "header", label: "Assets" },
-    { kind: "item", label: "Cash & equivalents", values: [400_800 * K, 355_100 * K] },
-    { kind: "item", label: "Accounts receivable", values: [386_200 * K, 401_600 * K] },
-    { kind: "item", label: "Advances & deposits", values: [54_500 * K, 48_200 * K] },
-    { kind: "subtotal", label: "Current assets", values: [841_500 * K, 804_900 * K] },
-    { kind: "item", label: "Equipment, net", values: [130_400 * K, 121_900 * K] },
-    { kind: "total", label: "Total assets", values: [971_900 * K, 926_800 * K] },
-    { kind: "header", label: "Liabilities" },
-    { kind: "item", label: "Accounts payable", values: [268_300 * K, 259_400 * K] },
-    { kind: "item", label: "Taxes payable", values: [42_100 * K, 38_600 * K] },
-    { kind: "item", label: "Accrued salaries", values: [36_800 * K, 35_200 * K] },
-    { kind: "subtotal", label: "Current liabilities", values: [347_200 * K, 333_200 * K] },
-    { kind: "item", label: "Long-term debt", values: [80_000 * K, 90_000 * K] },
-    { kind: "subtotal", label: "Total liabilities", values: [427_200 * K, 423_200 * K] },
-    { kind: "header", label: "Equity" },
-    { kind: "item", label: "Contributed capital", values: [300_000 * K, 300_000 * K] },
-    { kind: "item", label: "Retained earnings", values: [244_700 * K, 203_600 * K] },
-    { kind: "subtotal", label: "Total equity", values: [544_700 * K, 503_600 * K] },
-    { kind: "total", label: "Total liabilities & equity", values: [971_900 * K, 926_800 * K] },
-  ];
-  return (
-    <StatementPage title="Balance sheet" meta="VITTORIA Logistics, as at 30/06/2026, VND">
-      <Statement columns={["30/06/2026", "31/05/2026"]} lines={lines} />
-    </StatementPage>
-  );
-}
-
-export function TplCashflow() {
-  const lines: Line[] = [
-    { kind: "header", label: "Operating activities" },
-    { kind: "item", label: "Net income", values: [81_840 * K] },
-    { kind: "item", label: "Depreciation", values: [3_500 * K] },
-    { kind: "item", label: "Decrease in accounts receivable", values: [15_400 * K] },
-    { kind: "item", label: "Increase in accounts payable", values: [8_900 * K] },
-    { kind: "item", label: "Other working-capital movements", values: [-1_200 * K] },
-    { kind: "subtotal", label: "Net cash from operating activities", values: [108_440 * K] },
-    { kind: "header", label: "Investing activities" },
-    { kind: "item", label: "Purchases of equipment", values: [-12_000 * K] },
-    { kind: "subtotal", label: "Net cash used in investing activities", values: [-12_000 * K] },
-    { kind: "header", label: "Financing activities" },
-    { kind: "item", label: "Repayment of long-term debt", values: [-10_000 * K] },
-    { kind: "item", label: "Dividends paid", values: [-40_740 * K] },
-    { kind: "subtotal", label: "Net cash used in financing activities", values: [-50_740 * K] },
-    { kind: "subtotal", label: "Net increase in cash", values: [45_700 * K] },
-    { kind: "item", label: "Cash at 01/06/2026", values: [355_100 * K] },
-    { kind: "total", label: "Cash at 30/06/2026", values: [400_800 * K] },
-  ];
-  return (
-    <StatementPage title="Cash flow statement" meta="VITTORIA Logistics, month ended 30/06/2026, VND">
-      <Statement columns={["Jun 2026"]} lines={lines} />
-    </StatementPage>
-  );
-}

package/src/line_chart_labels.ts

@@ -1,32 +0,0 @@
-/**
- * Which of a line chart's x positions get a printed label.
- *
- * A label is roughly `minLabelWidth` wide, so only so many fit across the
- * track; the rest are thinned out. The rule that matters is WHERE the thinning
- * is anchored: stepping forwards from the first point and then forcing the last
- * one in collides whenever the series length minus one is not a multiple of the
- * step — the newest label lands a few pixels from the one before it while every
- * other pair is a full step apart. Anchoring on the LAST point makes the spacing
- * uniform by construction, and the last point is the one a reader looks up
- * first. The first point is then kept only when it clears the same distance.
- */
-export function lineChartLabelIndices(
-  count: number,
-  chartWidth: number,
-  minLabelWidth = 50,
-): number[] {
-  if (count <= 0 || chartWidth <= 0) return [];
-  if (count === 1) return [0];
-
-  const last = count - 1;
-  const maxLabels = Math.max(2, Math.floor(chartWidth / minLabelWidth));
-  const step = Math.max(1, Math.ceil(count / maxLabels));
-
-  const kept: number[] = [];
-  for (let i = last; i >= 0; i -= step) kept.unshift(i);
-
-  const firstKept = kept[0] ?? 0;
-  if (firstKept > 0 && (firstKept / last) * chartWidth >= minLabelWidth) kept.unshift(0);
-
-  return kept;
-}