@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/app/driver/navigation.tsx

@@ -0,0 +1,94 @@
+import { useWorkflow, useTransition, useField, useComputed, useOnChange } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { RideRequest, RidePhase } from '../models/ride';
+import { MapView } from '../components/MapView';
+import { DirectionStep } from '../models/navigation';
+
+export default function Navigation() {
+  const workflow = useWorkflow('active-ride');
+
+  const ride = useField<RideRequest>('ride.current');
+  const phase = useField<RidePhase>('ride.phase');
+  const directions = useField<DirectionStep[]>('ride.directions');
+  const currentStepIndex = useField<number>('ride.currentStep');
+
+  const currentFare = useComputed('ride.currentFare', () => {
+    const { distanceMiles, surgeFactor } = ride.value;
+    return (2.5 + distanceMiles * 1.75) * surgeFactor;
+  });
+
+  const arrivedAtPickup = useTransition('arrived-at-pickup');
+  const startRide = useTransition('start-ride');
+  const completeRide = useTransition('complete-ride');
+
+  useOnChange('ride.currentStep', (stepIndex) => {
+    // Auto-advance map when step changes
+  });
+
+  const handlePhaseAction = () => {
+    switch (phase.value) {
+      case 'en-route-to-pickup':
+        arrivedAtPickup.execute({ rideId: ride.value.id });
+        break;
+      case 'waiting-at-pickup':
+        startRide.execute({ rideId: ride.value.id });
+        break;
+      case 'in-progress':
+        completeRide.execute({ rideId: ride.value.id });
+        break;
+    }
+  };
+
+  const phaseLabel: Record<RidePhase, string> = {
+    'en-route-to-pickup': 'Arrived at Pickup',
+    'waiting-at-pickup': 'Start Ride',
+    'in-progress': 'Complete Ride',
+    'completed': 'Completed',
+  };
+
+  return (
+    <Stack gap="md" padding="md">
+      <MapView
+        pickup={ride.value.pickupCoords}
+        dropoff={ride.value.dropoffCoords}
+        currentStep={currentStepIndex.value}
+        directions={directions.value}
+      />
+
+      <Card padding="md">
+        <Row justify="between" align="center">
+          <Stack gap="xs">
+            <Text weight="medium">{ride.value.passengerName}</Text>
+            <Text size="sm" color="muted">
+              {phase.value === 'en-route-to-pickup'
+                ? ride.value.pickupAddress
+                : ride.value.dropoffAddress}
+            </Text>
+          </Stack>
+          <Text size="lg" weight="bold">${currentFare.value.toFixed(2)}</Text>
+        </Row>
+      </Card>
+
+      <Card padding="sm" maxHeight={200} overflow="scroll">
+        <Each items={directions.value}>
+          {(step, index) => (
+            <Row
+              key={step.id}
+              padding="sm"
+              background={index === currentStepIndex.value ? 'highlight' : 'none'}
+            >
+              <Badge variant="neutral">{step.distanceFt} ft</Badge>
+              <Text size="sm" flex={1}>{step.instruction}</Text>
+            </Row>
+          )}
+        </Each>
+      </Card>
+
+      <Show when={phase.value !== 'completed'}>
+        <Button variant="primary" size="lg" onPress={handlePhaseAction}>
+          {phaseLabel[phase.value]}
+        </Button>
+      </Show>
+    </Stack>
+  );
+}

package/examples/uber-app/app/driver/ride-acceptance.tsx

@@ -0,0 +1,103 @@
+import { useState, useWorkflow, useTransition, useField, useOnEvent, useComputed } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Card, Badge, Heading } from '@mindmatrix/react';
+import { RideRequest } from '../models/ride';
+import { PassengerInfo } from '../models/passenger';
+
+export default function RideAcceptance() {
+  const workflow = useWorkflow('ride-matching');
+  const [timeLeft, setTimeLeft] = useState(30);
+
+  const incomingRide = useField<RideRequest | null>('matching.pendingRequest');
+  const passenger = useField<PassengerInfo | null>('matching.passengerInfo');
+
+  const estimatedFare = useComputed('matching.estimatedFare', () => {
+    if (!incomingRide.value) return 0;
+    const { distanceMiles, surgeFactor } = incomingRide.value;
+    return (2.5 + distanceMiles * 1.75) * surgeFactor;
+  });
+
+  const acceptRide = useTransition('accept-ride');
+  const declineRide = useTransition('decline-ride');
+
+  useOnEvent('new-ride-request', (event) => {
+    setTimeLeft(30);
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          declineRide.execute({ reason: 'timeout' });
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  });
+
+  const handleAccept = () => {
+    acceptRide.execute({ rideId: incomingRide.value?.id });
+  };
+
+  const handleDecline = () => {
+    declineRide.execute({ reason: 'driver-declined' });
+  };
+
+  return (
+    <Stack gap="lg" padding="md">
+      <Heading level={2}>Incoming Ride Request</Heading>
+
+      <Show when={incomingRide.value !== null}>
+        <Card padding="lg">
+          <Stack gap="md">
+            <Row justify="between">
+              <Badge variant="info">{timeLeft}s</Badge>
+              <Text size="xl" weight="bold">${estimatedFare.value.toFixed(2)}</Text>
+            </Row>
+
+            <Stack gap="sm">
+              <Row gap="sm" align="center">
+                <Badge variant="success">Pickup</Badge>
+                <Text>{incomingRide.value!.pickupAddress}</Text>
+              </Row>
+              <Row gap="sm" align="center">
+                <Badge variant="neutral">Dropoff</Badge>
+                <Text>{incomingRide.value!.dropoffAddress}</Text>
+              </Row>
+            </Stack>
+
+            <Row gap="md">
+              <Text size="sm" color="muted">
+                {incomingRide.value!.distanceMiles.toFixed(1)} mi
+              </Text>
+              <Text size="sm" color="muted">
+                ~{incomingRide.value!.estimatedMinutes} min
+              </Text>
+            </Row>
+
+            <Show when={passenger.value !== null}>
+              <Row gap="sm" align="center">
+                <Text weight="medium">{passenger.value!.name}</Text>
+                <Badge variant="warning">{passenger.value!.rating.toFixed(1)}</Badge>
+              </Row>
+            </Show>
+
+            <Row gap="md">
+              <Button variant="primary" size="lg" flex={1} onPress={handleAccept}>
+                Accept
+              </Button>
+              <Button variant="outline" size="lg" flex={1} onPress={handleDecline}>
+                Decline
+              </Button>
+            </Row>
+          </Stack>
+        </Card>
+      </Show>
+
+      <Show when={incomingRide.value === null}>
+        <Card padding="lg">
+          <Text align="center" color="muted">No pending ride requests</Text>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}

package/examples/uber-app/app/rider/home.tsx

@@ -0,0 +1,109 @@
+import {
+  useState, useWorkflow, useTransition, useField,
+  useComputed, useRole, useQuery, useOnEnter, useOnEvent,
+} from '@mindmatrix/react';
+import {
+  Stack, Row, Text, Button, Show, Each, Card, Badge,
+  Heading, Input,
+} from '@mindmatrix/react';
+import { Ride, VehicleType } from '../models/ride.model';
+import { MapView } from '../components/MapView';
+import { estimateFare } from '../actions/pricing.server';
+
+const VEHICLE_TYPES: { key: VehicleType; label: string; icon: string }[] = [
+  { key: 'economy', label: 'Economy', icon: 'car' },
+  { key: 'premium', label: 'Premium', icon: 'car-premium' },
+  { key: 'xl', label: 'XL', icon: 'car-xl' },
+  { key: 'luxury', label: 'Luxury', icon: 'car-luxury' },
+];
+
+export default function RiderHome() {
+  const workflow = useWorkflow<Ride>('ride-request');
+  const transition = useTransition(workflow);
+  const pickup = useField(workflow, 'pickup_address');
+  const dropoff = useField(workflow, 'dropoff_address');
+  const vehicleType = useField(workflow, 'vehicle_type');
+
+  const [selectedVehicle, setSelectedVehicle] = useState<VehicleType>('economy');
+
+  const fareEstimate = useComputed(workflow, 'fare_estimate', {
+    deps: [pickup.value, dropoff.value, selectedVehicle],
+  });
+
+  const routePreview = useComputed(workflow, 'route_preview', {
+    deps: [pickup.value, dropoff.value],
+  });
+
+  const handleSelectVehicle = (type: VehicleType) => {
+    setSelectedVehicle(type);
+    vehicleType.set(type);
+  };
+
+  const handleRequestRide = async () => {
+    await transition('request_ride', {
+      pickup_address: pickup.value,
+      dropoff_address: dropoff.value,
+      vehicle_type: selectedVehicle,
+    });
+  };
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Heading level={2}>Where to?</Heading>
+
+      <Card padding={3}>
+        <Stack gap={3}>
+          <Input
+            label="Pickup"
+            placeholder="Enter pickup address"
+            value={pickup.value ?? ''}
+            onChange={pickup.set}
+          />
+          <Input
+            label="Dropoff"
+            placeholder="Enter destination"
+            value={dropoff.value ?? ''}
+            onChange={dropoff.set}
+          />
+        </Stack>
+      </Card>
+
+      <Show when={routePreview.value}>
+        <MapView route={routePreview.value} height={200} />
+      </Show>
+
+      <Row gap={2} wrap>
+        <Each items={VEHICLE_TYPES}>
+          {(vt) => (
+            <Card
+              key={vt.key}
+              padding={2}
+              selected={selectedVehicle === vt.key}
+              onPress={() => handleSelectVehicle(vt.key)}
+            >
+              <Text weight="bold">{vt.label}</Text>
+            </Card>
+          )}
+        </Each>
+      </Row>
+
+      <Show when={fareEstimate.value != null}>
+        <Card padding={3}>
+          <Row justify="between" align="center">
+            <Text color="muted">Estimated fare</Text>
+            <Text size="xl" weight="bold">${fareEstimate.value?.toFixed(2)}</Text>
+          </Row>
+        </Card>
+      </Show>
+
+      <Button
+        variant="primary"
+        size="lg"
+        disabled={!pickup.value || !dropoff.value}
+        onPress={handleRequestRide}
+      >
+        Request Ride
+      </Button>
+    </Stack>
+  );
+}

package/examples/uber-app/app/rider/payment-methods.tsx

@@ -0,0 +1,134 @@
+import {
+  useState, useWorkflow, useTransition, useField,
+  useComputed, useRole, useQuery, useOnEnter, useOnEvent,
+} from '@mindmatrix/react';
+import {
+  Stack, Row, Text, Button, Show, Each, Card, Badge,
+  Heading, Input,
+} from '@mindmatrix/react';
+import { PaymentMethod } from '../models/payment.model';
+import { addPaymentMethod, removePaymentMethod, setDefaultPayment } from '../actions/payments.server';
+
+export default function PaymentMethods() {
+  const methods = useQuery<PaymentMethod[]>('payment-methods', {
+    sort: { is_default: 'desc', created_at: 'desc' },
+  });
+
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [cardNumber, setCardNumber] = useState('');
+  const [expiry, setExpiry] = useState('');
+  const [cvv, setCvv] = useState('');
+  const [cardholderName, setCardholderName] = useState('');
+
+  const resetForm = () => {
+    setCardNumber('');
+    setExpiry('');
+    setCvv('');
+    setCardholderName('');
+    setShowAddForm(false);
+  };
+
+  const handleAddCard = async () => {
+    await addPaymentMethod({ cardNumber, expiry, cvv, cardholderName });
+    resetForm();
+    methods.refetch();
+  };
+
+  const handleDelete = async (id: string) => {
+    await removePaymentMethod(id);
+    methods.refetch();
+  };
+
+  const handleSetDefault = async (id: string) => {
+    await setDefaultPayment(id);
+    methods.refetch();
+  };
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Row justify="between" align="center">
+        <Heading level={2}>Payment Methods</Heading>
+        <Button variant="secondary" onPress={() => setShowAddForm(!showAddForm)}>
+          {showAddForm ? 'Cancel' : 'Add Card'}
+        </Button>
+      </Row>
+
+      <Show when={showAddForm}>
+        <Card padding={3}>
+          <Stack gap={3}>
+            <Input
+              label="Cardholder Name"
+              placeholder="John Doe"
+              value={cardholderName}
+              onChange={setCardholderName}
+            />
+            <Input
+              label="Card Number"
+              placeholder="4242 4242 4242 4242"
+              value={cardNumber}
+              onChange={setCardNumber}
+            />
+            <Row gap={3}>
+              <Input
+                label="Expiry"
+                placeholder="MM/YY"
+                value={expiry}
+                onChange={setExpiry}
+                flex={1}
+              />
+              <Input
+                label="CVV"
+                placeholder="123"
+                value={cvv}
+                onChange={setCvv}
+                flex={1}
+              />
+            </Row>
+            <Button variant="primary" onPress={handleAddCard}>
+              Save Card
+            </Button>
+          </Stack>
+        </Card>
+      </Show>
+
+      <Show when={methods.loading}>
+        <Text color="muted" align="center">Loading payment methods...</Text>
+      </Show>
+
+      <Each items={methods.data ?? []}>
+        {(method) => (
+          <Card key={method.id} padding={3}>
+            <Row justify="between" align="center">
+              <Row gap={2} align="center">
+                <Text weight="bold">{method.brand}</Text>
+                <Text color="muted">**** {method.last_four}</Text>
+                <Text color="muted" size="sm">Exp {method.expiry}</Text>
+                <Show when={method.is_default}>
+                  <Badge color="green">Default</Badge>
+                </Show>
+              </Row>
+              <Row gap={2}>
+                <Show when={!method.is_default}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onPress={() => handleSetDefault(method.id)}
+                  >
+                    Set Default
+                  </Button>
+                </Show>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onPress={() => handleDelete(method.id)}
+                >
+                  Remove
+                </Button>
+              </Row>
+            </Row>
+          </Card>
+        )}
+      </Each>
+    </Stack>
+  );
+}

package/examples/uber-app/app/rider/ride-history.tsx

@@ -0,0 +1,90 @@
+import {
+  useState, useWorkflow, useTransition, useField,
+  useComputed, useRole, useQuery, useOnEnter, useOnEvent,
+} from '@mindmatrix/react';
+import {
+  Stack, Row, Text, Button, Show, Each, Card, Badge,
+  Heading, Input,
+} from '@mindmatrix/react';
+import { Ride } from '../models/ride.model';
+import { RideCard } from '../components/RideCard';
+
+export default function RideHistory() {
+  const [dateFrom, setDateFrom] = useState<string>('');
+  const [dateTo, setDateTo] = useState<string>('');
+
+  const rides = useQuery<Ride[]>('ride-request', {
+    filter: {
+      trip_status: 'completed',
+      ...(dateFrom && { created_at_gte: dateFrom }),
+      ...(dateTo && { created_at_lte: dateTo }),
+    },
+    sort: { created_at: 'desc' },
+    limit: 50,
+  });
+
+  const totalSpent = useComputed(rides, 'total_spent', {
+    deps: [rides.data],
+  });
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Heading level={2}>Ride History</Heading>
+
+      <Card padding={3}>
+        <Row gap={3} align="end">
+          <Input
+            label="From"
+            type="date"
+            value={dateFrom}
+            onChange={setDateFrom}
+            flex={1}
+          />
+          <Input
+            label="To"
+            type="date"
+            value={dateTo}
+            onChange={setDateTo}
+            flex={1}
+          />
+          <Button
+            variant="secondary"
+            onPress={() => { setDateFrom(''); setDateTo(''); }}
+          >
+            Clear
+          </Button>
+        </Row>
+      </Card>
+
+      <Show when={totalSpent.value != null}>
+        <Row justify="between" padding={2}>
+          <Text color="muted">Total spent</Text>
+          <Text size="lg" weight="bold">${totalSpent.value?.toFixed(2)}</Text>
+        </Row>
+      </Show>
+
+      <Show when={rides.loading}>
+        <Text color="muted" align="center">Loading rides...</Text>
+      </Show>
+
+      <Show when={!rides.loading && rides.data?.length === 0}>
+        <Text color="muted" align="center">No rides found</Text>
+      </Show>
+
+      <Each items={rides.data ?? []}>
+        {(ride) => (
+          <RideCard
+            key={ride.id}
+            date={ride.created_at}
+            pickup={ride.pickup_address}
+            dropoff={ride.dropoff_address}
+            fare={ride.final_fare}
+            rating={ride.rider_rating}
+            driverName={ride.assigned_driver?.name}
+            vehicleType={ride.vehicle_type}
+          />
+        )}
+      </Each>
+    </Stack>
+  );
+}

package/examples/uber-app/app/rider/ride-tracking.tsx

@@ -0,0 +1,108 @@
+import {
+  useState, useWorkflow, useTransition, useField,
+  useComputed, useRole, useQuery, useOnEnter, useOnEvent,
+} from '@mindmatrix/react';
+import {
+  Stack, Row, Text, Button, Show, Each, Card, Badge,
+  Heading, Input,
+} from '@mindmatrix/react';
+import { Ride, DriverLocation, TripStatus } from '../models/ride.model';
+import { MapView } from '../components/MapView';
+import { DriverCard } from '../components/DriverCard';
+import { shareTrip } from '../actions/sharing.server';
+
+const STATUS_COLORS: Record<TripStatus, string> = {
+  matching: 'yellow',
+  driver_assigned: 'blue',
+  arriving: 'blue',
+  in_progress: 'green',
+  completed: 'gray',
+  cancelled: 'red',
+};
+
+export default function RideTracking() {
+  const workflow = useWorkflow<Ride>('ride-request');
+  const transition = useTransition(workflow);
+  const status = useField(workflow, 'trip_status');
+  const driver = useField(workflow, 'assigned_driver');
+  const route = useField(workflow, 'active_route');
+  const fare = useField(workflow, 'current_fare');
+
+  const [driverLocation, setDriverLocation] = useState<DriverLocation | null>(null);
+
+  const eta = useComputed(workflow, 'eta_minutes', {
+    deps: [driverLocation, route.value],
+  });
+
+  useOnEvent(workflow, 'driver_location_update', (event) => {
+    setDriverLocation(event.payload as DriverLocation);
+  });
+
+  useOnEnter(workflow, 'completed', () => {
+    // Trigger rating prompt when ride completes
+  });
+
+  const handleCancel = async () => {
+    await transition('cancel_ride', { reason: 'rider_cancelled' });
+  };
+
+  const handleShareTrip = async () => {
+    if (workflow.instanceId) {
+      await shareTrip(workflow.instanceId);
+    }
+  };
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Row justify="between" align="center">
+        <Heading level={2}>Your Ride</Heading>
+        <Badge color={STATUS_COLORS[status.value as TripStatus] ?? 'gray'}>
+          {status.value}
+        </Badge>
+      </Row>
+
+      <MapView
+        route={route.value}
+        driverPin={driverLocation}
+        height={300}
+        followDriver
+      />
+
+      <Show when={eta.value != null}>
+        <Card padding={3}>
+          <Stack gap={1} align="center">
+            <Text size="3xl" weight="bold">{eta.value}</Text>
+            <Text color="muted">minutes away</Text>
+          </Stack>
+        </Card>
+      </Show>
+
+      <Show when={driver.value != null}>
+        <DriverCard
+          name={driver.value?.name}
+          rating={driver.value?.rating}
+          vehicle={driver.value?.vehicle}
+          photo={driver.value?.photo_url}
+        />
+      </Show>
+
+      <Show when={fare.value != null}>
+        <Row justify="between" padding={2}>
+          <Text color="muted">Current fare</Text>
+          <Text weight="bold">${fare.value?.toFixed(2)}</Text>
+        </Row>
+      </Show>
+
+      <Row gap={3}>
+        <Show when={status.value !== 'completed' && status.value !== 'cancelled'}>
+          <Button variant="danger" onPress={handleCancel} flex={1}>
+            Cancel Ride
+          </Button>
+        </Show>
+        <Button variant="secondary" onPress={handleShareTrip} flex={1}>
+          Share Trip
+        </Button>
+      </Row>
+    </Stack>
+  );
+}