@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/components/RideCard.tsx

@@ -0,0 +1,167 @@
+/**
+ * RideCard — Compact ride summary with route, status, and fare
+ */
+
+import React from 'react';
+import { Stack, Row, Text, Badge, Icon, Divider } from '@mindmatrix/react';
+
+interface RideCardProps {
+  rideId: string;
+  originAddress: string;
+  destinationAddress: string;
+  status: string;
+  vehicleType: string;
+  fare: number;
+  distance: number;
+  duration: number;
+  driverName?: string;
+  driverRating?: number;
+  requestedAt: string;
+  completedAt?: string;
+  surgeMultiplier?: number;
+  onSelect?: (rideId: string) => void;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  idle: '#718096',
+  searching: '#ecc94b',
+  matched: '#4299e1',
+  driver_enroute: '#4299e1',
+  driver_arrived: '#38b2ac',
+  in_progress: '#48bb78',
+  completed: '#48bb78',
+  cancelled: '#f56565',
+  rated: '#9f7aea',
+  disputed: '#ed8936',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  idle: 'Idle',
+  searching: 'Searching',
+  matched: 'Matched',
+  driver_enroute: 'Driver En Route',
+  driver_arrived: 'Driver Arrived',
+  in_progress: 'In Progress',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+  rated: 'Rated',
+  disputed: 'Disputed',
+};
+
+export function RideCard({
+  rideId,
+  originAddress,
+  destinationAddress,
+  status,
+  vehicleType,
+  fare,
+  distance,
+  duration,
+  driverName,
+  driverRating,
+  requestedAt,
+  completedAt,
+  surgeMultiplier,
+  onSelect,
+}: RideCardProps) {
+  const statusColor = STATUS_COLORS[status] || '#718096';
+  const statusLabel = STATUS_LABELS[status] || status;
+  const formattedDate = new Date(requestedAt).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <Stack
+      onClick={() => onSelect?.(rideId)}
+      sx={{
+        bg: '#1a202c',
+        borderRadius: 'lg',
+        p: 4,
+        cursor: onSelect ? 'pointer' : 'default',
+        border: '1px solid #2d3748',
+        transition: 'all 0.2s',
+        _hover: onSelect ? { borderColor: '#4299e1', transform: 'translateY(-1px)' } : {},
+      }}
+    >
+      {/* Header: status + date */}
+      <Row sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <Badge sx={{ bg: statusColor, color: 'white', px: 2, py: 0.5, borderRadius: 'full', fontSize: 'xs' }}>
+          {statusLabel}
+        </Badge>
+        <Row sx={{ gap: 2, alignItems: 'center' }}>
+          {surgeMultiplier && surgeMultiplier > 1 && (
+            <Badge sx={{ bg: '#ed8936', color: 'white', px: 2, py: 0.5, borderRadius: 'full', fontSize: 'xs' }}>
+              {surgeMultiplier}x surge
+            </Badge>
+          )}
+          <Text sx={{ color: '#718096', fontSize: 'xs' }}>{formattedDate}</Text>
+        </Row>
+      </Row>
+
+      {/* Route */}
+      <Row sx={{ gap: 3, mb: 3 }}>
+        <Stack sx={{ alignItems: 'center', gap: 1, pt: 0.5 }}>
+          <Stack sx={{ width: 3, height: 3, borderRadius: 'full', bg: '#48bb78' }} />
+          <Stack sx={{ width: '2px', height: 6, bg: '#4a5568' }} />
+          <Stack sx={{ width: 3, height: 3, borderRadius: 'full', bg: '#f56565' }} />
+        </Stack>
+        <Stack sx={{ flex: 1, gap: 1 }}>
+          <Text sx={{ color: '#e2e8f0', fontSize: 'sm', fontWeight: 500 }} numberOfLines={1}>
+            {originAddress}
+          </Text>
+          <Text sx={{ color: '#a0aec0', fontSize: 'sm' }} numberOfLines={1}>
+            {destinationAddress}
+          </Text>
+        </Stack>
+      </Row>
+
+      <Divider sx={{ borderColor: '#2d3748', my: 2 }} />
+
+      {/* Footer: fare, distance, driver */}
+      <Row sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Row sx={{ gap: 4 }}>
+          <Stack>
+            <Text sx={{ color: '#718096', fontSize: 'xs' }}>Fare</Text>
+            <Text sx={{ color: '#e2e8f0', fontWeight: 'bold', fontSize: 'md' }}>
+              ${fare.toFixed(2)}
+            </Text>
+          </Stack>
+          <Stack>
+            <Text sx={{ color: '#718096', fontSize: 'xs' }}>Distance</Text>
+            <Text sx={{ color: '#a0aec0', fontSize: 'sm' }}>{distance.toFixed(1)} km</Text>
+          </Stack>
+          <Stack>
+            <Text sx={{ color: '#718096', fontSize: 'xs' }}>Duration</Text>
+            <Text sx={{ color: '#a0aec0', fontSize: 'sm' }}>{duration} min</Text>
+          </Stack>
+        </Row>
+
+        {driverName && (
+          <Row sx={{ gap: 2, alignItems: 'center' }}>
+            <Stack sx={{ width: 8, height: 8, borderRadius: 'full', bg: '#2d3748', alignItems: 'center', justifyContent: 'center' }}>
+              <Icon name="user" sx={{ color: '#a0aec0', fontSize: 'sm' }} />
+            </Stack>
+            <Stack>
+              <Text sx={{ color: '#e2e8f0', fontSize: 'sm' }}>{driverName}</Text>
+              {driverRating && (
+                <Row sx={{ gap: 1, alignItems: 'center' }}>
+                  <Icon name="star" sx={{ color: '#ecc94b', fontSize: 'xs' }} />
+                  <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>{driverRating.toFixed(1)}</Text>
+                </Row>
+              )}
+            </Stack>
+          </Row>
+        )}
+
+        <Badge sx={{ bg: '#2d3748', color: '#a0aec0', px: 2, py: 0.5, borderRadius: 'md', fontSize: 'xs', textTransform: 'capitalize' }}>
+          {vehicleType}
+        </Badge>
+      </Row>
+    </Stack>
+  );
+}
+
+export default RideCard;

package/examples/uber-app/mm.config.ts

@@ -0,0 +1,30 @@
+import { defineBlueprint } from '@mindmatrix/react';
+
+export default defineBlueprint({
+  slug: 'uber-rideshare',
+  name: 'Uber Rideshare',
+  version: '2.0.0',
+  description: 'Full-featured ride-sharing platform with rider, driver, and admin experiences',
+  mode: 'strict',
+  defaultRuntime: 'collaborative',
+  category: 'blueprint',
+  entries: [
+    'app/rider/home.workflow.tsx',
+    'app/driver/dashboard.workflow.tsx',
+    'app/admin/fleet.workflow.tsx',
+  ],
+  models: [
+    'models/user.model.ts',
+    'models/ride.model.ts',
+    'models/vehicle.model.ts',
+    'models/payment.model.ts',
+    'models/rating.model.ts',
+    'models/location.model.ts',
+  ],
+  contributes_to: {
+    'platform-shell': {
+      navigation: ['rider-nav', 'driver-nav', 'admin-nav'],
+      settings: ['payment-settings', 'notification-settings'],
+    },
+  },
+});

package/examples/uber-app/models/location.model.ts

@@ -0,0 +1,70 @@
+/**
+ * @workflow slug="uber-location" version="2.0.0" category="data"
+ * @description Geo locations for tracking, surge zones, and geofencing
+ */
+
+export interface Location {
+  // Identity
+  entityId: string;
+  entityType: 'driver' | 'rider' | 'surge_zone' | 'geofence';
+  label: string;
+
+  // Coordinates
+  latitude: number;
+  longitude: number;
+  altitude: number;
+  accuracy: number;
+  heading: number;
+  speed: number;
+
+  // Address
+  formattedAddress: string;
+  streetAddress: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+  placeId: string;
+
+  // Zone info
+  zoneId: string;
+  zoneName: string;
+  zoneType: 'airport' | 'downtown' | 'suburb' | 'highway' | 'event_venue' | 'custom';
+  isHighDemand: boolean;
+  currentSurgeMultiplier: number;
+
+  // Geofence
+  geofenceRadiusMeters: number;
+  geofenceShape: 'circle' | 'polygon';
+  geofenceVertices: string;
+  isInsideGeofence: boolean;
+
+  // Tracking
+  status: 'active' | 'stale' | 'offline';
+  lastUpdatedAt: Date;
+  updateFrequencyMs: number;
+  batteryLevel: number;
+  connectionType: 'gps' | 'network' | 'wifi';
+
+  // History
+  totalDistanceToday: number;
+  averageSpeedToday: number;
+  sessionStartedAt: Date;
+}
+
+export const fieldOptions = {
+  entityType: { options: ['driver', 'rider', 'surge_zone', 'geofence'] },
+  zoneType: { options: ['airport', 'downtown', 'suburb', 'highway', 'event_venue', 'custom'] },
+  geofenceShape: { options: ['circle', 'polygon'] },
+  status: { options: ['active', 'stale', 'offline'] },
+  connectionType: { options: ['gps', 'network', 'wifi'] },
+  currentSurgeMultiplier: { min: 1, max: 5 },
+  batteryLevel: { min: 0, max: 100 },
+};
+
+export const transitions = [
+  { name: 'update', from: ['active', 'stale'], to: 'active' },
+  { name: 'markStale', from: ['active'], to: 'stale' },
+  { name: 'goOffline', from: ['active', 'stale'], to: 'offline' },
+  { name: 'goOnline', from: ['offline'], to: 'active' },
+];

package/examples/uber-app/models/payment.model.ts

@@ -0,0 +1,87 @@
+/**
+ * @workflow slug="uber-payment" version="2.0.0" category="data"
+ * @description Payment transactions with authorization, capture, settlement, and refund lifecycle
+ */
+
+export interface Payment {
+  // References
+  rideId: string;
+  riderId: string;
+  driverId: string;
+
+  // Amounts
+  baseFare: number;
+  distanceFare: number;
+  timeFare: number;
+  surgeFee: number;
+  bookingFee: number;
+  tollsFee: number;
+  tipAmount: number;
+  promoDiscount: number;
+  cancellationFee: number;
+  totalAmount: number;
+  currency: string;
+
+  // Split
+  platformFee: number;
+  platformFeePercent: number;
+  driverPayout: number;
+  taxAmount: number;
+  taxRate: number;
+
+  // Payment Method
+  paymentMethodType: 'card' | 'wallet' | 'cash' | 'corporate';
+  cardLast4: string;
+  cardBrand: string;
+  walletId: string;
+
+  // Processing
+  status: 'pending' | 'authorized' | 'captured' | 'settled' | 'refunded' | 'partially_refunded' | 'failed' | 'disputed';
+  processorId: string;
+  processorTransactionId: string;
+  authorizationCode: string;
+  failureReason: string;
+  failureCode: string;
+
+  // Refund
+  refundAmount: number;
+  refundReason: string;
+  refundedAt: Date;
+  refundedBy: string;
+
+  // Payout
+  payoutId: string;
+  payoutStatus: 'pending' | 'processing' | 'completed' | 'failed';
+  payoutScheduledAt: Date;
+  payoutCompletedAt: Date;
+
+  // Timestamps
+  authorizedAt: Date;
+  capturedAt: Date;
+  settledAt: Date;
+  createdAt: Date;
+
+  // Receipt
+  receiptUrl: string;
+  invoiceNumber: string;
+}
+
+export const fieldOptions = {
+  status: { options: ['pending', 'authorized', 'captured', 'settled', 'refunded', 'partially_refunded', 'failed', 'disputed'] },
+  paymentMethodType: { options: ['card', 'wallet', 'cash', 'corporate'] },
+  payoutStatus: { options: ['pending', 'processing', 'completed', 'failed'] },
+  platformFeePercent: { defaultValue: 25 },
+  taxRate: { defaultValue: 8.875 },
+  currency: { defaultValue: 'USD' },
+};
+
+export const transitions = [
+  { name: 'authorize', from: ['pending'], to: 'authorized' },
+  { name: 'capture', from: ['authorized'], to: 'captured' },
+  { name: 'settle', from: ['captured'], to: 'settled' },
+  { name: 'refund', from: ['captured', 'settled'], to: 'refunded' },
+  { name: 'partialRefund', from: ['captured', 'settled'], to: 'partially_refunded' },
+  { name: 'fail', from: ['pending', 'authorized'], to: 'failed' },
+  { name: 'dispute', from: ['captured', 'settled'], to: 'disputed' },
+  { name: 'retryAuthorize', from: ['failed'], to: 'authorized' },
+];

package/examples/uber-app/models/rating.model.ts

@@ -0,0 +1,54 @@
+/**
+ * @workflow slug="uber-rating" version="2.0.0" category="data"
+ * @description Ratings and reviews with moderation pipeline
+ */
+
+export interface Rating {
+  // References
+  rideId: string;
+  fromUserId: string;
+  toUserId: string;
+  fromRole: 'rider' | 'driver';
+
+  // Rating
+  stars: number;
+  comment: string;
+  tags: string[];
+
+  // Moderation
+  status: 'pending' | 'submitted' | 'flagged' | 'resolved' | 'hidden';
+  flagReason: string;
+  flaggedBy: string;
+  flaggedAt: Date;
+  moderatorId: string;
+  moderatorNotes: string;
+  resolvedAt: Date;
+  resolution: 'upheld' | 'dismissed' | 'warning_issued' | '';
+
+  // Context
+  rideDistance: number;
+  rideDuration: number;
+  vehicleType: string;
+  surgeApplied: boolean;
+  tipGiven: boolean;
+  tipAmount: number;
+
+  // Timestamps
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export const fieldOptions = {
+  fromRole: { options: ['rider', 'driver'] },
+  status: { options: ['pending', 'submitted', 'flagged', 'resolved', 'hidden'] },
+  resolution: { options: ['upheld', 'dismissed', 'warning_issued', ''] },
+  stars: { min: 1, max: 5 },
+};
+
+export const transitions = [
+  { name: 'submit', from: ['pending'], to: 'submitted' },
+  { name: 'flag', from: ['submitted'], to: 'flagged' },
+  { name: 'resolve', from: ['flagged'], to: 'resolved' },
+  { name: 'hide', from: ['flagged', 'resolved'], to: 'hidden' },
+  { name: 'reinstate', from: ['hidden'], to: 'submitted' },
+];

package/examples/uber-app/models/ride.model.ts

@@ -0,0 +1,118 @@
+/**
+ * @workflow slug="uber-ride" version="2.0.0" category="data"
+ * @description Ride lifecycle with full state machine — the core domain object
+ */
+
+export interface Ride {
+  // Participants
+  riderId: string;
+  riderName: string;
+  driverId: string;
+  driverName: string;
+  vehicleId: string;
+
+  // Origin
+  originAddress: string;
+  originLatitude: number;
+  originLongitude: number;
+  originPlaceId: string;
+
+  // Destination
+  destinationAddress: string;
+  destinationLatitude: number;
+  destinationLongitude: number;
+  destinationPlaceId: string;
+
+  // Route
+  routePolyline: string;
+  estimatedDistanceKm: number;
+  actualDistanceKm: number;
+  estimatedDurationMinutes: number;
+  actualDurationMinutes: number;
+  waypoints: string[];
+
+  // Pricing
+  vehicleType: 'economy' | 'premium' | 'xl' | 'luxury';
+  baseFare: number;
+  distanceFare: number;
+  timeFare: number;
+  surgeMultiplier: number;
+  surgeFee: number;
+  bookingFee: number;
+  tollsFee: number;
+  promoCode: string;
+  promoDiscount: number;
+  tipAmount: number;
+  estimatedFare: number;
+  actualFare: number;
+  currency: string;
+
+  // Driver tracking
+  driverLatitude: number;
+  driverLongitude: number;
+  driverHeading: number;
+  driverSpeed: number;
+  etaMinutes: number;
+  etaUpdatedAt: Date;
+
+  // Status
+  status: string;
+  searchAttempts: number;
+  maxSearchAttempts: number;
+  matchedAt: Date;
+  pickupAt: Date;
+  dropoffAt: Date;
+  cancelledAt: Date;
+  cancelledBy: string;
+  cancellationReason: string;
+  cancellationFee: number;
+
+  // Payment
+  paymentMethodId: string;
+  paymentStatus: string;
+  paymentId: string;
+
+  // Ratings
+  riderRating: number;
+  driverRating: number;
+  riderFeedback: string;
+  driverFeedback: string;
+
+  // Safety
+  shareCode: string;
+  emergencyContacted: boolean;
+  tripRecorded: boolean;
+
+  // Metadata
+  requestedAt: Date;
+  completedAt: Date;
+  rideType: 'standard' | 'scheduled' | 'shared';
+  scheduledPickupAt: Date;
+  passengerCount: number;
+}
+
+export const fieldOptions = {
+  vehicleType: { options: ['economy', 'premium', 'xl', 'luxury'] },
+  rideType: { options: ['standard', 'scheduled', 'shared'] },
+  riderRating: { min: 1, max: 5 },
+  driverRating: { min: 1, max: 5 },
+  surgeMultiplier: { min: 1, max: 5 },
+  passengerCount: { min: 1, max: 6 },
+  maxSearchAttempts: { defaultValue: 10 },
+};
+
+export const transitions = [
+  { name: 'search', from: ['idle'], to: 'searching' },
+  { name: 'match', from: ['searching'], to: 'matched' },
+  { name: 'timeout', from: ['searching'], to: 'cancelled' },
+  { name: 'accept', from: ['matched'], to: 'driver_enroute' },
+  { name: 'decline', from: ['matched'], to: 'searching' },
+  { name: 'arrive', from: ['driver_enroute'], to: 'driver_arrived' },
+  { name: 'startRide', from: ['driver_arrived'], to: 'in_progress' },
+  { name: 'complete', from: ['in_progress'], to: 'completed' },
+  { name: 'rate', from: ['completed'], to: 'rated' },
+  { name: 'dispute', from: ['completed', 'rated'], to: 'disputed' },
+  { name: 'cancelByRider', from: ['searching', 'matched', 'driver_enroute', 'driver_arrived'], to: 'cancelled' },
+  { name: 'cancelByDriver', from: ['matched', 'driver_enroute'], to: 'searching' },
+  { name: 'cancelBySystem', from: ['searching', 'matched'], to: 'cancelled' },
+];

package/examples/uber-app/models/user.model.ts

@@ -0,0 +1,66 @@
+/**
+ * @workflow slug="uber-user" version="2.0.0" category="data"
+ * @description User accounts with rider/driver/admin roles and real-time tracking
+ */
+
+export interface User {
+  // Identity
+  email: string;
+  displayName: string;
+  phone: string;
+  avatarUrl: string;
+
+  // Role & Status
+  role: 'rider' | 'driver' | 'admin';
+  status: 'pending' | 'active' | 'suspended' | 'deactivated';
+  isOnline: boolean;
+  lastSeenAt: Date;
+
+  // Rider fields
+  homeAddress: string;
+  workAddress: string;
+  savedPlaces: string[];
+  defaultPaymentMethodId: string;
+  walletBalance: number;
+  riderRating: number;
+  totalRides: number;
+
+  // Driver fields
+  vehicleId: string;
+  driversLicenseNumber: string;
+  driversLicenseExpiry: Date;
+  backgroundCheckStatus: 'none' | 'pending' | 'passed' | 'failed';
+  driverRating: number;
+  totalTrips: number;
+  acceptanceRate: number;
+  cancellationRate: number;
+  currentLatitude: number;
+  currentLongitude: number;
+  isInSurgeZone: boolean;
+  earningsBalance: number;
+  weeklyHoursOnline: number;
+
+  // Preferences
+  preferredLanguage: string;
+  notificationsEnabled: boolean;
+  accessibilityNeeds: string[];
+}
+
+export const fieldOptions = {
+  role: { options: ['rider', 'driver', 'admin'] },
+  status: { options: ['pending', 'active', 'suspended', 'deactivated'] },
+  backgroundCheckStatus: { options: ['none', 'pending', 'passed', 'failed'] },
+  riderRating: { min: 1, max: 5 },
+  driverRating: { min: 1, max: 5 },
+  acceptanceRate: { min: 0, max: 100 },
+  cancellationRate: { min: 0, max: 100 },
+};
+
+export const transitions = [
+  { name: 'activate', from: ['pending'], to: 'active' },
+  { name: 'suspend', from: ['active'], to: 'suspended' },
+  { name: 'reactivate', from: ['suspended'], to: 'active' },
+  { name: 'deactivate', from: ['active', 'suspended'], to: 'deactivated' },
+  { name: 'goOnline', from: ['active'], to: 'active' },
+  { name: 'goOffline', from: ['active'], to: 'active' },
+];

package/examples/uber-app/models/vehicle.model.ts

@@ -0,0 +1,63 @@
+/**
+ * @workflow slug="uber-vehicle" version="2.0.0" category="data"
+ * @description Vehicle registration, inspection, and lifecycle management
+ */
+
+export interface Vehicle {
+  driverId: string;
+  driverName: string;
+
+  // Vehicle Info
+  make: string;
+  model: string;
+  year: number;
+  color: string;
+  licensePlate: string;
+  vin: string;
+  photoUrl: string;
+
+  // Classification
+  vehicleType: 'economy' | 'premium' | 'xl' | 'luxury';
+  seatingCapacity: number;
+  isAccessible: boolean;
+
+  // Documents
+  registrationNumber: string;
+  registrationExpiry: Date;
+  insuranceProvider: string;
+  insurancePolicyNumber: string;
+  insuranceExpiry: Date;
+  inspectionDate: Date;
+  inspectionResult: 'pass' | 'fail' | 'pending';
+
+  // Status
+  status: 'pending_approval' | 'active' | 'inactive' | 'suspended' | 'retired';
+  approvedAt: Date;
+  approvedBy: string;
+  suspensionReason: string;
+
+  // Metrics
+  totalTrips: number;
+  totalDistanceKm: number;
+  averageRating: number;
+  lastMaintenanceDate: Date;
+  odometerKm: number;
+}
+
+export const fieldOptions = {
+  vehicleType: { options: ['economy', 'premium', 'xl', 'luxury'] },
+  status: { options: ['pending_approval', 'active', 'inactive', 'suspended', 'retired'] },
+  inspectionResult: { options: ['pass', 'fail', 'pending'] },
+  seatingCapacity: { min: 1, max: 8 },
+  averageRating: { min: 1, max: 5 },
+};
+
+export const transitions = [
+  { name: 'approve', from: ['pending_approval'], to: 'active' },
+  { name: 'reject', from: ['pending_approval'], to: 'retired' },
+  { name: 'deactivate', from: ['active'], to: 'inactive' },
+  { name: 'reactivate', from: ['inactive'], to: 'active' },
+  { name: 'suspend', from: ['active'], to: 'suspended' },
+  { name: 'unsuspend', from: ['suspended'], to: 'active' },
+  { name: 'retire', from: ['active', 'inactive', 'suspended'], to: 'retired' },
+];