@munchi_oy/native-ui 0.1.0

package/src/MNumpad.tsx

@@ -0,0 +1,520 @@
+import { cva } from "class-variance-authority";
+import { Delete } from "lucide-react-native";
+import type React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Platform,
+  Pressable,
+  Text,
+  View,
+  useWindowDimensions
+} from "react-native";
+import { useColorScheme } from "./hooks/useColorScheme";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+export enum NumpadMode {
+  Discount = "discount",
+  Table = "table",
+  Price = "price",
+  Cash = "cash",
+  Quantity = "quantity",
+  Phone = "phone",
+  GiftCard = "giftcard"
+}
+
+export const getDecimalSeparator = () => {
+  const formatted = new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1
+  }).format(1.1);
+  return formatted.match(/[^0-9]/)?.[0] || ".";
+};
+
+function toInternalDot(raw: string, decSep: string): string {
+  if (!raw) return "";
+  if (decSep === ".") {
+    const [head = "", ...tails] = raw.split(".");
+    if (tails.length === 0) return head;
+    return `${head}.${tails.join("")}`;
+  }
+  if (raw.includes(".")) return raw;
+  const parts = raw.split(decSep);
+  if (parts.length <= 1) return raw.replace(/\./g, "");
+  return `${(parts[0] ?? "").replace(/\./g, "")}.${parts.slice(1).join("")}`;
+}
+
+/**
+ * Cash-register style helpers: the numpad stores an integer cents string
+ * internally (e.g. "1258" means 12.58). All callers still receive/emit a
+ * decimal display string like "12.58" / "12,58".
+ */
+function centsToDisplay(cents: string, decSep: string): string {
+  const n = cents.replace(/\D/g, "");
+  if (n === "" || n === "0") return `0${decSep}00`;
+  const padded = n.padStart(3, "0");
+  const whole = padded.slice(0, -2).replace(/^0+/, "") || "0";
+  const frac = padded.slice(-2);
+  return `${whole}${decSep}${frac}`;
+}
+
+function displayToCents(display: string, decSep: string): string {
+  if (!display) return "";
+  const withDot = decSep === "." ? display : display.replace(decSep, ".");
+  const parsed = Number.parseFloat(withDot);
+  if (Number.isNaN(parsed) || parsed <= 0) return "";
+  return Math.round(parsed * 100).toString();
+}
+
+export interface MNumpadProps {
+  customAmount: string | null;
+  setCustomAmount: (amount: string | null) => void;
+  mode: NumpadMode;
+  maxDigits?: number;
+}
+
+const CELL_SIZE_PHONE = 90;
+const CELL_SIZE_TABLET = 118;
+const CELL_SIZE_PHONE_ANDROID = 78;
+const CELL_SIZE_TABLET_ANDROID = 106;
+const CELL_HEIGHT_PHONE = 72;
+const CELL_HEIGHT_TABLET = 90;
+const CELL_HEIGHT_PHONE_ANDROID = 62;
+const CELL_HEIGHT_TABLET_ANDROID = 80;
+const FONT_SIZE_PHONE = 24;
+const FONT_SIZE_TABLET = 36;
+const FONT_SIZE_PHONE_ANDROID = 22;
+const FONT_SIZE_TABLET_ANDROID = 32;
+const GAP = 6;
+const GAP_ANDROID = 5;
+const COLS = 3;
+const DOUBLE_ZERO = "00";
+
+const PLACEHOLDER_CENTS = /^(\d+)\.00$/;
+
+function numpadKeyTestId(item: string): string {
+  switch (item) {
+    case "X":
+      return "munchi.numpad.key.backspace";
+    case DOUBLE_ZERO:
+      return "munchi.numpad.key.double-zero";
+    case "-":
+      return "munchi.numpad.key.minus";
+    case "+":
+      return "munchi.numpad.key.plus";
+    default:
+      return `munchi.numpad.key.digit-${item}`;
+  }
+}
+
+const numpadKeyVariants = cva("items-center justify-center rounded-2xl", {
+  variants: {
+    pressed: { true: "", false: "bg-muted" },
+    scheme: { dark: "", light: "" }
+  },
+  compoundVariants: [
+    {
+      pressed: true,
+      scheme: "dark",
+      className: "bg-white/15 border-white/20"
+    },
+    {
+      pressed: true,
+      scheme: "light",
+      className: "bg-foreground/10 border-foreground/15"
+    }
+  ],
+  defaultVariants: { pressed: false, scheme: "light" }
+});
+
+export const MNumpad: React.FC<MNumpadProps> = ({
+  customAmount,
+  setCustomAmount,
+  mode,
+  maxDigits = 6
+}) => {
+  const decimalSeparator = getDecimalSeparator();
+  const isCashRegisterMode =
+    mode === NumpadMode.Price ||
+    mode === NumpadMode.Cash ||
+    mode === NumpadMode.Discount;
+  const isPriceMode = isCashRegisterMode;
+  const isPhoneMode = mode === NumpadMode.Phone;
+  const amountRef = useRef<string | null>(customAmount);
+  amountRef.current = customAmount;
+  const postDoubleZeroRef = useRef(0);
+  const { foreground } = useIconColors();
+  const { colorScheme } = useColorScheme();
+  const { width } = useWindowDimensions();
+
+  const isTablet = width >= 768;
+  const isAndroid = Platform.OS === "android";
+
+  const cellSize = isAndroid
+    ? isTablet
+      ? CELL_SIZE_TABLET_ANDROID
+      : CELL_SIZE_PHONE_ANDROID
+    : isTablet
+      ? CELL_SIZE_TABLET
+      : CELL_SIZE_PHONE;
+  const cellHeight = isAndroid
+    ? isTablet
+      ? CELL_HEIGHT_TABLET_ANDROID
+      : CELL_HEIGHT_PHONE_ANDROID
+    : isTablet
+      ? CELL_HEIGHT_TABLET
+      : CELL_HEIGHT_PHONE;
+  const gap = isAndroid ? GAP_ANDROID : GAP;
+  const fontSize = isAndroid
+    ? isTablet
+      ? FONT_SIZE_TABLET_ANDROID
+      : FONT_SIZE_PHONE_ANDROID
+    : isTablet
+      ? FONT_SIZE_TABLET
+      : FONT_SIZE_PHONE;
+
+  const scheme = colorScheme === "dark" ? "dark" : "light";
+
+  const handleNumPress = useCallback(
+    (input: string) => {
+      if (isCashRegisterMode) {
+        const isDoubleZero = input === DOUBLE_ZERO;
+        if (!isDoubleZero && !/^\d$/.test(input)) return;
+
+        const cents = displayToCents(amountRef.current ?? "", decimalSeparator);
+
+        if (isDoubleZero) {
+          const nextCents = `${cents}00`.replace(/^0+/, "") || "";
+          if (nextCents === "") {
+            postDoubleZeroRef.current = 0;
+            return;
+          }
+          if (nextCents.length > maxDigits + 2) return;
+          postDoubleZeroRef.current = 2;
+          const display = centsToDisplay(nextCents, decimalSeparator);
+          amountRef.current = display;
+          setCustomAmount(display);
+          return;
+        }
+
+        // Single digit press
+        if (postDoubleZeroRef.current > 0) {
+          // In cents-fill mode: digits shift left within the two cent slots only
+          // 1.00 + 5 → 1.05, then 1.05 + 6 → 1.56, then resume normal penny-push
+          const centsStr = cents.padStart(3, "0");
+          const wholeDigits = centsStr.slice(0, -2);
+          const centsDigits = centsStr.slice(-2);
+          const newCentsDigits = (centsDigits[1] ?? "0") + input;
+          const nextCents =
+            (wholeDigits + newCentsDigits).replace(/^0+/, "") || "";
+          if (nextCents.length > maxDigits + 2) return;
+          postDoubleZeroRef.current -= 1;
+          const display = centsToDisplay(nextCents, decimalSeparator);
+          amountRef.current = display;
+          setCustomAmount(display);
+          return;
+        }
+
+        // Normal penny-push: append digit to the right
+        const next = (cents + input).replace(/^0+/, "") || "";
+        if (next.length > maxDigits + 2) return;
+        if (next === "") {
+          amountRef.current = null;
+          setCustomAmount(null);
+          return;
+        }
+        const display = centsToDisplay(next, decimalSeparator);
+        amountRef.current = display;
+        setCustomAmount(display);
+        return;
+      }
+
+      const raw = amountRef.current ?? "";
+      const internal = toInternalDot(raw, decimalSeparator);
+      const [whole = "", fraction = ""] = internal.split(".");
+      const hasDot = internal.includes(".");
+      const isSep = input === decimalSeparator;
+      const isDoubleZeroKey = input === DOUBLE_ZERO && isPriceMode;
+
+      if (isDoubleZeroKey) {
+        if (!hasDot) {
+          const next = whole === "" ? "0.00" : `${whole}.00`;
+          amountRef.current = next;
+          setCustomAmount(next);
+          return;
+        }
+        const stripMatch = PLACEHOLDER_CENTS.exec(internal);
+        if (stripMatch) {
+          const w = stripMatch[1] ?? "";
+          amountRef.current = w;
+          setCustomAmount(w);
+          return;
+        }
+        return;
+      }
+
+      if (isSep) {
+        if (hasDot) return;
+        setCustomAmount(raw + decimalSeparator);
+        return;
+      }
+
+      const placeholderMatch = isPriceMode
+        ? PLACEHOLDER_CENTS.exec(internal)
+        : null;
+      if (placeholderMatch && /^\d$/.test(input)) {
+        const w = placeholderMatch[1] ?? "";
+        if (input === "0") {
+          const nextWhole = `${w}0`;
+          if (nextWhole.length > maxDigits) {
+            return;
+          }
+          const next = `${nextWhole}.00`;
+          amountRef.current = next;
+          setCustomAmount(next);
+          return;
+        }
+        const next = `${w}.${input}0`;
+        amountRef.current = next;
+        setCustomAmount(next);
+        return;
+      }
+
+      if (isPriceMode && hasDot) {
+        if (
+          fraction.length === 2 &&
+          fraction[0] !== "0" &&
+          fraction[1] !== "0" &&
+          /^\d$/.test(input)
+        ) {
+          const newWhole = `${whole}${input}`;
+          if (newWhole.length > maxDigits) {
+            return;
+          }
+          const next = `${newWhole}.${fraction}`;
+          amountRef.current = next;
+          setCustomAmount(next);
+          return;
+        }
+        if (fraction.length === 2 && fraction[1] === "0") {
+          const next = `${whole}.${fraction[0]}${input}`;
+          amountRef.current = next;
+          setCustomAmount(next);
+          return;
+        }
+        if (fraction.length === 1 && /^\d$/.test(fraction)) {
+          const next = `${whole}.${fraction}${input}`;
+          amountRef.current = next;
+          setCustomAmount(next);
+          return;
+        }
+        if (fraction.length >= 2) return;
+      }
+
+      if (isPriceMode) {
+        if (!hasDot && whole.length >= maxDigits) return;
+      } else if (whole.length >= maxDigits) return;
+
+      const nextRaw = raw + input;
+      const nextInternal = toInternalDot(nextRaw, decimalSeparator);
+      amountRef.current = nextInternal;
+      setCustomAmount(nextInternal);
+    },
+    [
+      decimalSeparator,
+      isCashRegisterMode,
+      isPriceMode,
+      maxDigits,
+      setCustomAmount
+    ]
+  );
+
+  const handleBackspace = useCallback(() => {
+    const raw = amountRef.current;
+
+    if (isCashRegisterMode) {
+      postDoubleZeroRef.current = 0;
+      if (raw == null || raw === "") {
+        amountRef.current = null;
+        setCustomAmount(null);
+        return;
+      }
+      const cents = displayToCents(raw, decimalSeparator);
+      const trimmed = cents.slice(0, -1).replace(/^0+/, "") || "";
+      if (trimmed === "") {
+        amountRef.current = null;
+        setCustomAmount(null);
+        return;
+      }
+      const display = centsToDisplay(trimmed, decimalSeparator);
+      amountRef.current = display;
+      setCustomAmount(display);
+      return;
+    }
+
+    if (raw == null || raw === "") {
+      amountRef.current = null;
+      setCustomAmount(null);
+      return;
+    }
+    const internal = toInternalDot(raw, decimalSeparator);
+    if (!internal.includes(".")) {
+      const nextInternal = internal.slice(0, -1);
+      if (nextInternal === "") {
+        amountRef.current = null;
+        setCustomAmount(null);
+        return;
+      }
+      amountRef.current = nextInternal;
+      setCustomAmount(nextInternal);
+      return;
+    }
+    const [w = "", frac = ""] = internal.split(".");
+    if (frac.length > 0) {
+      const nextFrac = frac.slice(0, -1);
+      if (nextFrac === "") {
+        amountRef.current = w === "" ? null : w;
+        setCustomAmount(w === "" ? null : w);
+        return;
+      }
+      const next = `${w}.${nextFrac}`;
+      amountRef.current = next;
+      setCustomAmount(next);
+      return;
+    }
+    amountRef.current = w === "" ? null : w;
+    setCustomAmount(w === "" ? null : w);
+  }, [decimalSeparator, isCashRegisterMode, setCustomAmount]);
+
+  const keypadLayout = useMemo(
+    () => [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      mode === NumpadMode.GiftCard
+        ? "-"
+        : isPriceMode
+          ? DOUBLE_ZERO
+          : isPhoneMode
+            ? "+"
+            : "",
+      "0",
+      "X"
+    ],
+    [mode, isPriceMode, isPhoneMode]
+  );
+
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const naturalWidth = cellSize * COLS + gap * (COLS - 1);
+
+  const effectiveCellSize =
+    containerWidth > 0 && containerWidth < naturalWidth
+      ? Math.floor((containerWidth - gap * (COLS - 1)) / COLS)
+      : cellSize;
+
+  const derivedCellHeight = Math.round(
+    effectiveCellSize * (cellHeight / cellSize)
+  );
+  const derivedFontSize = Math.round(fontSize * (effectiveCellSize / cellSize));
+
+  return (
+    <View
+      style={{
+        width: naturalWidth,
+        maxWidth: "100%",
+        alignSelf: "center",
+        gap
+      }}
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+    >
+      {[0, 1, 2, 3].map((row) => (
+        <View key={row} style={{ flexDirection: "row", gap }}>
+          {keypadLayout
+            .slice(row * COLS, row * COLS + COLS)
+            .map((item, col) => {
+              const key = `${row}-${col}`;
+              if (item === "") {
+                return (
+                  <View
+                    key={key}
+                    style={{
+                      width: effectiveCellSize,
+                      height: derivedCellHeight
+                    }}
+                  />
+                );
+              }
+              return (
+                <NumpadKey
+                  key={key}
+                  testID={numpadKeyTestId(item)}
+                  item={item}
+                  width={effectiveCellSize}
+                  height={derivedCellHeight}
+                  fontSize={derivedFontSize}
+                  foreground={foreground}
+                  scheme={scheme}
+                  onPress={
+                    item === "X" ? handleBackspace : () => handleNumPress(item)
+                  }
+                />
+              );
+            })}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+type NumpadKeyProps = {
+  testID: string;
+  item: string;
+  width: number;
+  height: number;
+  fontSize: number;
+  foreground: string;
+  scheme: "dark" | "light";
+  onPress: () => void;
+};
+
+const NumpadKey: React.FC<NumpadKeyProps> = ({
+  testID,
+  item,
+  width,
+  height,
+  fontSize,
+  foreground,
+  scheme,
+  onPress
+}) => (
+  <Pressable testID={testID} onPress={onPress} style={{ width, height }}>
+    {({ pressed }) => (
+      <View
+        style={{ width, height }}
+        className={cn(numpadKeyVariants({ pressed, scheme }))}
+      >
+        {item === "X" ? (
+          <Delete size={fontSize} color={foreground} />
+        ) : (
+          <Text
+            style={{ fontSize, lineHeight: fontSize * 1.4 }}
+            className="text-foreground"
+          >
+            {item}
+          </Text>
+        )}
+      </View>
+    )}
+  </Pressable>
+);
+
+MNumpad.displayName = "MNumpad";
+
+export default MNumpad;

package/src/MPicker.tsx

@@ -0,0 +1,150 @@
+import type React from "react";
+import { useRef, useState } from "react";
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  type PressableProps,
+  Text,
+  type TextProps,
+  View,
+  type ViewProps
+} from "react-native";
+import { cn } from "./utils";
+
+export type PickerItem<T> = {
+  label: string;
+  value: T;
+};
+
+export type MPickerProps<T> = Pick<PressableProps, "className"> & {
+  data: PickerItem<T>[];
+  onSelect: (item: PickerItem<T>) => void;
+  placeholder: string;
+  selectedValue?: T | null;
+  textClassName?: TextProps["className"];
+  dropdownContainerClassName?: ViewProps["className"];
+  itemContainerClassName?: PressableProps["className"];
+  itemTextClassName?: TextProps["className"];
+};
+
+export const MPicker = <T,>({
+  data,
+  onSelect,
+  placeholder,
+  selectedValue,
+  className,
+  textClassName,
+  dropdownContainerClassName,
+  itemContainerClassName,
+  itemTextClassName
+}: MPickerProps<T>): React.ReactElement => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const buttonRef = useRef<View>(null);
+  const [buttonLayout, setButtonLayout] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+
+  const selectedItem = data.find((item) => item.value === selectedValue);
+
+  const handleSelect = (item: PickerItem<T>) => {
+    onSelect(item);
+    setIsVisible(false);
+  };
+
+  const renderItem = ({ item }: { item: PickerItem<T> }) => {
+    const isSelected = item.value === selectedValue;
+
+    return (
+      <Pressable
+        className={cn(
+          "p-3 rounded-md m-1",
+          isSelected ? "bg-primary" : "active:bg-muted",
+          itemContainerClassName
+        )}
+        onPress={() => handleSelect(item)}
+      >
+        <Text
+          className={cn(
+            isSelected ? "text-primary-foreground" : "text-foreground",
+            itemTextClassName
+          )}
+          numberOfLines={1}
+        >
+          {item.label}
+        </Text>
+      </Pressable>
+    );
+  };
+
+  const handlePress = () => {
+    if (!isVisible) {
+      buttonRef.current?.measureInWindow((x, y, width, height) => {
+        setButtonLayout({ x, y, width, height });
+        setIsVisible(true);
+      });
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  return (
+    <View className="flex-col items-center justify-center">
+      <Pressable
+        ref={buttonRef}
+        className={cn(
+          "bg-primary rounded-full py-4 px-6 flex-row items-center",
+          className
+        )}
+        onPress={handlePress}
+      >
+        <Text
+          className={cn("text-primary-foreground text-base", textClassName)}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {selectedItem ? selectedItem.label : placeholder}
+        </Text>
+      </Pressable>
+
+      <Modal
+        animationType="none"
+        transparent={true}
+        visible={isVisible}
+        onRequestClose={() => {
+          setIsVisible(false);
+        }}
+      >
+        <Pressable
+          className="absolute inset-0"
+          onPress={() => setIsVisible(false)}
+        />
+        <View
+          style={{
+            position: "absolute",
+            top: buttonLayout.y + buttonLayout.height,
+            left: buttonLayout.x
+          }}
+          className={cn(
+            "min-w-[100px] bg-background shadow-lg rounded-lg border border-border p-1 z-50 mt-2",
+            dropdownContainerClassName
+          )}
+        >
+          <FlatList
+            data={data}
+            renderItem={renderItem}
+            keyExtractor={(item) => String(item.value)}
+            className="max-h-[200px]"
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+MPicker.displayName = "MPicker";
+
+export default MPicker;