@vvedantb/native-ui 0.2.1 → 0.3.12

package/src/marketing/PricingModal.tsx

@@ -0,0 +1,410 @@
+import type { ReactElement, ReactNode } from "react";
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCheck, IconX } from "@tabler/icons-react-native";
+import { APP_ICONS, IconProjectV } from "../brand/AppIcons";
+import type { ProductAppName } from "../brand/AppWordmark";
+import { familyApp } from "../brand/familyApps";
+import type { AppName } from "../brand/svg";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { useControllableState } from "../primitives/use-controllable-state";
+import {
+  isEmphasised,
+  planAppBenefits,
+  planButton,
+  sortAppBenefits,
+  type PricingModalPeriod,
+  type PricingPlan,
+} from "./pricing";
+
+export type PricingModalProps = {
+  open: boolean;
+  /** Called by the close button and Android back (and an iOS swipe-down). */
+  onClose: () => void;
+  /** Accessible title, read first. Not visible. */
+  title: string;
+  /** Accessible description. Not visible. */
+  description?: string;
+  /** Cards, top to bottom. */
+  plans: readonly PricingPlan[];
+  /** App marks at the top left. */
+  apps?: readonly AppName[];
+  /** App the modal is shown in. Its `appBenefits` group comes first. */
+  currentApp?: ProductAppName;
+  /** Centred headline, for example "One plan. Every V app." */
+  headline?: ReactNode;
+  /** Small print under the cards. */
+  finePrint?: ReactNode;
+  billingPeriod?: PricingModalPeriod;
+  onBillingPeriodChange?: (period: PricingModalPeriod) => void;
+  /** Default `"month"`. */
+  defaultBillingPeriod?: PricingModalPeriod;
+  /** Called by a plan's button. Not called for the `current` plan. Route it to the store's purchase flow. */
+  onCheckout?: (plan: PricingPlan, period: PricingModalPeriod) => void;
+  /** Wraps each plan's button (the web `renderCheckout`). The button already calls `onCheckout`. Not called for the `current` plan. */
+  renderCheckout?: (
+    button: ReactElement,
+    plan: PricingPlan,
+    period: PricingModalPeriod,
+  ) => ReactNode;
+  /** Called when an app mark is pressed. Without it the marks are not pressable. */
+  onAppPress?: (app: AppName, url: string) => void;
+  testID?: string;
+};
+
+/**
+ * Upgrade sheet, the native counterpart of the web `PricingModal` multi-plan
+ * layout: a page sheet on iOS (full screen on Android) with a Monthly / Annual
+ * switch and stacked plan cards. The web single-plan layout (logo URLs and a
+ * Michroma wordmark) is not ported: pass one plan instead.
+ */
+export function PricingModal({
+  open,
+  onClose,
+  title,
+  description,
+  plans,
+  apps,
+  currentApp,
+  headline,
+  finePrint,
+  billingPeriod,
+  onBillingPeriodChange,
+  defaultBillingPeriod = "month",
+  onCheckout,
+  renderCheckout,
+  onAppPress,
+  testID,
+}: PricingModalProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const [period, setPeriod] = useControllableState({
+    value: billingPeriod,
+    defaultValue: defaultBillingPeriod,
+    onChange: onBillingPeriodChange,
+  });
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+
+  return (
+    <Modal
+      visible={open}
+      animationType={reduceMotion ? "none" : "slide"}
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+      testID={testID}
+    >
+      <View
+        className="flex-1"
+        style={{
+          backgroundColor: tokens.color.background[scheme],
+          paddingBottom: insets.bottom,
+        }}
+      >
+        {/* The web `sr-only` DialogTitle: a visually hidden header. */}
+        <View
+          accessible
+          accessibilityRole="header"
+          accessibilityLabel={title}
+          accessibilityHint={description}
+          style={styles.srOnly}
+        />
+        <View className="flex-row items-center justify-between gap-3 px-4 pb-3 pt-4">
+          <View className="flex-row items-center gap-3">
+            {apps?.map((app) => {
+              const Icon = APP_ICONS[app];
+              const { name, url } = familyApp(app);
+              return onAppPress ? (
+                <Pressable
+                  key={app}
+                  accessibilityRole="link"
+                  accessibilityLabel={name}
+                  hitSlop={8}
+                  onPress={() => onAppPress(app, url)}
+                  className="active:opacity-70"
+                >
+                  <Icon size={22} color={fg} />
+                </Pressable>
+              ) : (
+                <Icon key={app} size={22} color={fg} title={name} />
+              );
+            })}
+          </View>
+          <View className="flex-row items-center gap-2">
+            <View
+              accessibilityLabel="Billing period"
+              className="flex-row rounded-full p-0.5"
+              style={{ backgroundColor: palette.surfaceTertiary[scheme] }}
+            >
+              {(["month", "year"] as const).map((value) => {
+                const selected = period === value;
+                return (
+                  <Pressable
+                    key={value}
+                    testID={testID ? `${testID}-period-${value}` : undefined}
+                    accessibilityRole="button"
+                    accessibilityState={{ selected }}
+                    hitSlop={6}
+                    onPress={() => setPeriod(value)}
+                    className="rounded-full px-3 py-1.5"
+                    style={selected ? { backgroundColor: palette.segment[scheme] } : null}
+                  >
+                    <Text
+                      className={cn(
+                        "font-instrument-sans-medium",
+                        largerText ? "text-base" : "text-sm",
+                      )}
+                      style={[
+                        { color: selected ? palette.segmentForeground[scheme] : muted },
+                        typeStyle("medium"),
+                      ]}
+                    >
+                      {value === "month" ? "Monthly" : "Annual"}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+            <Pressable
+              testID={testID ? `${testID}-close` : undefined}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              hitSlop={8}
+              onPress={onClose}
+              className="h-10 w-10 items-center justify-center rounded-full active:opacity-70"
+            >
+              <IconX size={22} color={muted} />
+            </Pressable>
+          </View>
+        </View>
+
+        <ScrollView
+          className="flex-1"
+          contentContainerClassName="gap-3 px-4 pb-6"
+          showsVerticalScrollIndicator={false}
+        >
+          {headline ? (
+            <Text
+              className={cn(
+                "pb-2 text-center font-instrument-sans-medium",
+                largerText ? "text-3xl" : "text-2xl",
+              )}
+              style={[{ color: fg }, typeStyle("medium")]}
+            >
+              {headline}
+            </Text>
+          ) : null}
+
+          {plans.map((plan) => (
+            <PlanCard
+              key={plan.id}
+              plan={plan}
+              period={period}
+              currentApp={currentApp}
+              onCheckout={onCheckout}
+              renderCheckout={renderCheckout}
+            />
+          ))}
+
+          {finePrint ? (
+            <Text className="px-1 pt-1 font-instrument-sans text-sm" style={{ color: muted }}>
+              {finePrint}
+            </Text>
+          ) : null}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+function PlanCard({
+  plan,
+  period,
+  currentApp,
+  onCheckout,
+  renderCheckout,
+}: {
+  plan: PricingPlan;
+  period: PricingModalPeriod;
+  currentApp?: ProductAppName;
+  onCheckout: PricingModalProps["onCheckout"];
+  renderCheckout: PricingModalProps["renderCheckout"];
+}) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+  const separator = tokens.color.separator[scheme];
+  const emphasised = isEmphasised(plan);
+  const appBenefits = planAppBenefits(plan);
+  const cta = planButton(plan);
+  const bodyText = largerText ? "text-lg" : "text-base";
+
+  const button = (
+    <Button
+      variant={cta.variant}
+      disabled={cta.disabled}
+      shadowType="flat"
+      onPress={() => onCheckout?.(plan, period)}
+    >
+      {cta.label}
+    </Button>
+  );
+
+  return (
+    <View
+      className="p-5"
+      style={{
+        borderRadius: tokens.radius.card,
+        borderWidth: 1,
+        borderColor: emphasised ? withAlpha(fg, 0.25) : separator,
+        backgroundColor: tokens.color.surfaceSecondary[scheme],
+      }}
+    >
+      <View className="flex-row items-center gap-2">
+        {emphasised ? <IconProjectV size={16} color={fg} /> : null}
+        <Text
+          accessibilityRole="header"
+          className={cn("font-instrument-sans-medium", bodyText)}
+          style={[{ color: fg }, typeStyle("medium")]}
+        >
+          {plan.name}
+        </Text>
+      </View>
+
+      <View className="mt-4 flex-row items-baseline gap-1">
+        <Text
+          className="font-instrument-sans-medium"
+          style={[
+            {
+              color: fg,
+              fontSize: 48,
+              lineHeight: 52,
+              letterSpacing: -0.5,
+              fontVariant: ["tabular-nums"],
+            },
+            typeStyle("medium"),
+          ]}
+        >
+          {plan.price[period]}
+        </Text>
+        <Text className={cn("font-instrument-sans", bodyText)} style={{ color: muted }}>
+          {plan.periodSuffix ?? "/month"}
+        </Text>
+      </View>
+
+      <View className="mt-5">
+        {plan.current || !renderCheckout ? button : renderCheckout(button, plan, period)}
+      </View>
+
+      {plan.intro ? (
+        <Text className={cn("mt-6 font-instrument-sans", bodyText)} style={{ color: muted }}>
+          {plan.intro}
+        </Text>
+      ) : null}
+
+      {plan.highlight ? (
+        <View className="mt-3">
+          <Text
+            className="font-instrument-sans-medium text-2xl"
+            style={[{ color: fg }, typeStyle("medium")]}
+          >
+            {plan.highlight.title}
+          </Text>
+          <Text className={cn("font-instrument-sans", bodyText)} style={{ color: fg }}>
+            {plan.highlight.description}
+          </Text>
+        </View>
+      ) : null}
+
+      {plan.benefits?.length ? (
+        <View
+          className="mt-5 gap-2.5 pt-4"
+          style={{ borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: separator }}
+        >
+          {plan.benefits.map((benefit, index) => {
+            const BenefitIcon =
+              benefit.icon && benefit.icon !== "check" ? APP_ICONS[benefit.icon] : null;
+            return (
+              <View key={index} className="flex-row items-start gap-2.5">
+                <View className="mt-1 h-4 w-5 items-center justify-center">
+                  {BenefitIcon ? (
+                    <BenefitIcon size={14} color={benefit.muted ? muted : fg} />
+                  ) : (
+                    <IconCheck size={16} strokeWidth={2} color={benefit.muted ? muted : fg} />
+                  )}
+                </View>
+                <Text
+                  className={cn("min-w-0 flex-1 font-instrument-sans", bodyText)}
+                  style={{ color: benefit.muted ? muted : fg }}
+                >
+                  {benefit.label}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+
+      {appBenefits?.length ? (
+        <View
+          className="mt-4 gap-3 pt-3"
+          style={{ borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: separator }}
+        >
+          {sortAppBenefits(appBenefits, currentApp).map((group) => {
+            const GroupIcon = APP_ICONS[group.app];
+            return (
+              <View key={group.app}>
+                <View className="flex-row items-center gap-2">
+                  <GroupIcon size={14} color={fg} />
+                  <Text
+                    className="font-instrument-sans-medium text-sm"
+                    style={[{ color: fg }, typeStyle("medium")]}
+                  >
+                    {familyApp(group.app).name}
+                  </Text>
+                </View>
+                <View className="mt-1 gap-0.5 pl-[22px]">
+                  {group.items.map((item, index) => (
+                    <Text
+                      key={index}
+                      className={cn("font-instrument-sans", bodyText)}
+                      style={{ color: fg }}
+                    >
+                      {item}
+                    </Text>
+                  ))}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  srOnly: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});

package/src/marketing/UpgradeToProCard.tsx

@@ -0,0 +1,103 @@
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+
+/** Web `rounded-2xl` (16) on the card. */
+const RADIUS = tokens.radius.lg;
+
+// The web `Button` `sm` (`h-8 px-3 text-xs`) uses `max-sm:hit-target`, 8 on
+// each side: 32 + 16 = 48, as the native `Button` `small`.
+const HIT_SLOP = 8;
+
+export type UpgradeToProCardProps = {
+  /** Opens the app's `PricingModal`. */
+  onUpgrade: () => void;
+  /**
+   * A "Pro" pill (labelled with `title`) instead of the full card. Like the
+   * web `Button` it stretches across a column and fits its label in a row.
+   * Default `false`.
+   */
+  collapsed?: boolean;
+  /** Default "Upgrade to Pro". */
+  title?: string;
+  /** Default "Upgrade". */
+  ctaLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * Upgrade prompt, the native `SidebarUpgradeCard`: the title and an "Upgrade"
+ * pill on a secondary surface, with no mark. It does not check the plan; the
+ * app hides it when the user is already on Pro.
+ */
+export function UpgradeToProCard({
+  onUpgrade,
+  collapsed = false,
+  title = "Upgrade to Pro",
+  ctaLabel = "Upgrade",
+  className,
+  testID,
+}: UpgradeToProCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  // Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
+  const titleSize = largerText ? "text-lg" : "text-sm";
+  const ctaSize = largerText ? "text-base" : "text-xs";
+  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`.
+  const pill = (label: string, accessibilityLabel?: string) => (
+    <Pressable
+      testID={testID ? `${testID}-cta` : undefined}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onUpgrade}
+      hitSlop={HIT_SLOP}
+      className={cn(
+        "shrink-0 items-center justify-center rounded-full active:opacity-80",
+        largerText ? "min-h-12 px-4" : "min-h-8 px-3",
+      )}
+      style={{ backgroundColor: tokens.color.foreground[scheme] }}
+    >
+      <Text
+        className={cn("font-instrument-sans-medium", ctaSize)}
+        style={[
+          { color: tokens.color.background[scheme] },
+          sizeStyle(ctaSize),
+          typeStyle("medium"),
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+
+  if (collapsed) {
+    return (
+      <View testID={testID} className={className}>
+        {pill("Pro", title)}
+      </View>
+    );
+  }
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        "flex-row items-center justify-between gap-3 bg-surface-secondary px-3 py-2.5",
+        className,
+      )}
+      style={{ borderRadius: RADIUS }}
+    >
+      <Text
+        numberOfLines={1}
+        className={cn("min-w-0 flex-1 font-instrument-sans-semibold", titleSize)}
+        style={[textStyle("foreground", scheme), sizeStyle(titleSize), typeStyle("semibold")]}
+      >
+        {title}
+      </Text>
+      {pill(ctaLabel)}
+    </View>
+  );
+}

package/src/marketing/pricing.ts

@@ -0,0 +1,76 @@
+// Plan types and pure helpers for `PricingModal`, the same shapes and rules as
+// the web `PricingModal` multi-plan layout. No React Native imports.
+import type { ReactNode } from "react";
+import type { AppName } from "../brand/svg";
+import { V_PRO_APP_BENEFITS, type PricingPlanAppBenefit } from "../brand/vProAppBenefits";
+
+export type PricingModalPeriod = "month" | "year";
+
+export type PricingPlanBenefit = {
+  label: ReactNode;
+  /** `"check"` (default) or an app mark. */
+  icon?: "check" | AppName;
+  /** Dimmed row. */
+  muted?: boolean;
+};
+
+export type PricingPlan = {
+  id: string;
+  name: string;
+  /** Display strings per month, for example `{ month: "$10", year: "$8" }`. The yearly price is still per month. */
+  price: { month: string; year: string };
+  /** Default "Get started". */
+  ctaLabel?: string;
+  /** Line above the highlight, for example "Everything in Free, and:". */
+  intro?: ReactNode;
+  /** Large title with small text under it. */
+  highlight?: { title: string; description: string };
+  benefits?: readonly PricingPlanBenefit[];
+  /** Grouped per app, after `benefits`. The featured plan defaults to `V_PRO_APP_BENEFITS`. */
+  appBenefits?: readonly PricingPlanAppBenefit[];
+  /** The plan the user is on: the button reads "Current plan" and is disabled. */
+  current?: boolean;
+  /** Subtle ring on the card. `highlighted` is an alias. */
+  featured?: boolean;
+  highlighted?: boolean;
+  /** Text after the price. Default "/month". */
+  periodSuffix?: string;
+};
+
+/** `featured`, else `highlighted` (the web rule: `featured ?? highlighted`). */
+export function isEmphasised(plan: PricingPlan): boolean {
+  return Boolean(plan.featured ?? plan.highlighted);
+}
+
+/** The plan's app groups: its own, else `V_PRO_APP_BENEFITS` for the emphasised plan, else none. */
+export function planAppBenefits(
+  plan: PricingPlan,
+): readonly PricingPlanAppBenefit[] | undefined {
+  return plan.appBenefits ?? (isEmphasised(plan) ? V_PRO_APP_BENEFITS : undefined);
+}
+
+/** Stable sort: the current app's group first, the rest in their order. */
+export function sortAppBenefits(
+  groups: readonly PricingPlanAppBenefit[],
+  currentApp?: AppName,
+): PricingPlanAppBenefit[] {
+  return [...groups].sort(
+    (a, b) => Number(b.app === currentApp) - Number(a.app === currentApp),
+  );
+}
+
+/** Label, variant and state of a plan's button, as on the web. */
+export function planButton(plan: PricingPlan): {
+  label: string;
+  variant: "default" | "secondary" | "outline";
+  disabled: boolean;
+} {
+  if (plan.current) {
+    return { label: "Current plan", variant: "outline", disabled: true };
+  }
+  return {
+    label: plan.ctaLabel ?? "Get started",
+    variant: isEmphasised(plan) ? "default" : "secondary",
+    disabled: false,
+  };
+}

package/src/palette.ts

@@ -0,0 +1,43 @@
+/**
+ * Web semantic colours for React Native, converted from `@vvedantb/ui`
+ * `tokens.css` (oklch → sRGB hex, clipped to sRGB). `tokens.ts` holds the
+ * neutrals the native app ships; these are the colours it lacks (primary,
+ * danger, success, warning, overlay, segment, field placeholder, backdrop,
+ * dialog description).
+ *
+ * A test in this package converts `tokens.css` and fails when a value here
+ * drifts, so change `tokens.css` first and then this file.
+ */
+export const palette = {
+  /** `--accent` (web `primary`): near-black in light, near-white in dark. */
+  primary: { light: "#181818", dark: "#fcfcfc" },
+  primaryForeground: { light: "#fcfcfc", dark: "#181818" },
+  danger: { light: "#ff373c", dark: "#db3b3e" },
+  dangerForeground: { light: "#fcfcfc", dark: "#fcfcfc" },
+  success: { light: "#15c964", dark: "#15c964" },
+  successForeground: { light: "#161917", dark: "#161917" },
+  warning: { light: "#f5a523", dark: "#f7b750" },
+  warningForeground: { light: "#1a1815", dark: "#1a1815" },
+  /** `--default` (web `secondary`): neutral control fill. */
+  default: { light: "#ebebeb", dark: "#272727" },
+  defaultForeground: { light: "#181818", dark: "#fcfcfc" },
+  overlay: { light: "#ffffff", dark: "#181818" },
+  overlayForeground: { light: "#181818", dark: "#fcfcfc" },
+  segment: { light: "#ffffff", dark: "#474747" },
+  segmentForeground: { light: "#181818", dark: "#fcfcfc" },
+  surfaceTertiary: { light: "#eaeaea", dark: "#282627" },
+  fieldPlaceholder: { light: "#727272", dark: "#a0a0a0" },
+  backdrop: { light: "rgba(0, 0, 0, 0.5)", dark: "rgba(0, 0, 0, 0.6)" },
+  /** Web `DialogDescription` text: `--overlay-foreground` mixed 72% into `--overlay` (oklch), for 4.5:1 on the overlay. */
+  overlayMuted: { light: "#505050", dark: "#b5b5b5" },
+  /** Fill of the web destructive `Button` (`oklch(47.2% 0.195 25.7)`), the same in both schemes. */
+  destructive: "#af0015",
+} as const;
+
+export type Palette = typeof palette;
+
+/** `#rrggbb` with an alpha, as `rgba(...)`. For tints such as the badge fills (web `bg-danger/12`). */
+export function withAlpha(hex: string, alpha: number): string {
+  const n = Number.parseInt(hex.slice(1, 7), 16);
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}

package/src/primitives/input.tsx

@@ -1,16 +1,24 @@
 import * as React from "react";
 import { Platform, TextInput } from "react-native";
 import { cn } from "../cn";
+import { palette } from "../palette";
+import { useScheme } from "../useScheme";
 
 type InputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
   className?: string;
 };
 
 const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, placeholderTextColor, ...props }, ref) => {
+    const scheme = useScheme();
     return (
       <TextInput
         ref={ref}
+        // A prop, not a `placeholder:` class: on native NativeWind turns that
+        // class into `placeholderTextColor`, which beats the prop. The old
+        // `placeholder:text-muted-foreground/50` was the light grey at half
+        // opacity in apps that nest `dark` under `muted-foreground`.
+        placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
         className={cn(
           "flex w-full flex-row items-center rounded-lg border-0 bg-secondary px-3 py-2 text-base text-foreground",
           props.editable === false &&
@@ -22,7 +30,6 @@ const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
             ),
           Platform.select({
             web: "outline-none transition-[color,box-shadow] md:text-sm",
-            native: "placeholder:text-muted-foreground/50",
           }),
           className,
         )}