@pushframe/sdk 0.1.4 → 0.1.8

package/src/components/ScrollViewComponent.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import type { PushframeComponentProps } from '../registry';
+
+export interface ScrollViewProps {
+  horizontal?: boolean;
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  backgroundColor?: string;
+  flex?: number;
+  showsScrollIndicator?: boolean;
+  contentPadding?: number;
+  contentPaddingTop?: number;
+  contentPaddingBottom?: number;
+  contentPaddingLeft?: number;
+  contentPaddingRight?: number;
+}
+
+export function ScrollViewComponent({ props, children }: PushframeComponentProps<ScrollViewProps>) {
+  const {
+    horizontal = false,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    backgroundColor,
+    flex,
+    showsScrollIndicator = true,
+    contentPadding,
+    contentPaddingTop,
+    contentPaddingBottom,
+    contentPaddingLeft,
+    contentPaddingRight,
+  } = props;
+
+  return (
+    <ScrollView
+      horizontal={horizontal}
+      showsHorizontalScrollIndicator={horizontal ? showsScrollIndicator : false}
+      showsVerticalScrollIndicator={!horizontal ? showsScrollIndicator : false}
+      style={[
+        padding !== undefined && { padding },
+        paddingTop !== undefined && { paddingTop },
+        paddingBottom !== undefined && { paddingBottom },
+        paddingLeft !== undefined && { paddingLeft },
+        paddingRight !== undefined && { paddingRight },
+        backgroundColor !== undefined && { backgroundColor },
+        flex !== undefined && { flex },
+      ]}
+      contentContainerStyle={[
+        contentPadding !== undefined && { padding: contentPadding },
+        contentPaddingTop !== undefined && { paddingTop: contentPaddingTop },
+        contentPaddingBottom !== undefined && { paddingBottom: contentPaddingBottom },
+        contentPaddingLeft !== undefined && { paddingLeft: contentPaddingLeft },
+        contentPaddingRight !== undefined && { paddingRight: contentPaddingRight },
+      ]}
+    >
+      {children}
+    </ScrollView>
+  );
+}

package/src/components/StackComponent.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { PushframeComponentProps } from '../registry';
+
+export interface StackProps {
+  direction?: 'vertical' | 'horizontal';
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  gap?: number;
+  backgroundColor?: string;
+  flex?: number;
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+}
+
+export function StackComponent({ props, children }: PushframeComponentProps<StackProps>) {
+  const {
+    direction = 'vertical',
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap,
+    backgroundColor,
+    flex,
+    alignItems,
+    justifyContent,
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.base,
+        direction === 'horizontal' && styles.horizontal,
+        padding !== undefined && { padding },
+        paddingTop !== undefined && { paddingTop },
+        paddingBottom !== undefined && { paddingBottom },
+        paddingLeft !== undefined && { paddingLeft },
+        paddingRight !== undefined && { paddingRight },
+        gap !== undefined && { gap },
+        backgroundColor !== undefined && { backgroundColor },
+        flex !== undefined && { flex },
+        alignItems !== undefined && { alignItems },
+        justifyContent !== undefined && { justifyContent },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'column',
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+});

package/src/components/TextComponent.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import type { PushframeComponentProps } from '../registry';
+
+export type TextSize = 'heading' | 'subheading' | 'body' | 'caption';
+export type TextWeight = 'normal' | 'medium' | 'bold';
+
+export interface TextProps {
+  content?: string;
+  size?: TextSize;
+  weight?: TextWeight;
+  color?: string;
+  align?: 'left' | 'center' | 'right';
+  numberOfLines?: number;
+}
+
+const SIZE_STYLES: Record<TextSize, { fontSize: number; lineHeight: number }> = {
+  heading: { fontSize: 24, lineHeight: 32 },
+  subheading: { fontSize: 18, lineHeight: 26 },
+  body: { fontSize: 16, lineHeight: 24 },
+  caption: { fontSize: 12, lineHeight: 18 },
+};
+
+const WEIGHT_MAP: Record<TextWeight, '400' | '500' | '700'> = {
+  normal: '400',
+  medium: '500',
+  bold: '700',
+};
+
+export function TextComponent({ props }: PushframeComponentProps<TextProps>) {
+  const {
+    content = '',
+    size = 'body',
+    weight = 'normal',
+    color,
+    align,
+    numberOfLines,
+  } = props;
+
+  return (
+    <Text
+      style={[
+        styles.base,
+        SIZE_STYLES[size],
+        { fontWeight: WEIGHT_MAP[weight] },
+        color !== undefined && { color },
+        align !== undefined && { textAlign: align },
+      ]}
+      numberOfLines={numberOfLines}
+    >
+      {content}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    color: '#1a1a1a',
+  },
+});

package/src/conditions.ts

@@ -0,0 +1,46 @@
+import type { Condition } from './schema';
+import { resolveValue } from './bindings';
+import type { PushframeContext } from './bindings';
+
+/**
+ * Evaluate a condition against the current context.
+ *
+ * Returns true  → node should render
+ * Returns false → node should be skipped
+ *
+ * When no condition is provided, always returns true.
+ */
+export function evaluateCondition(
+  condition: Condition | undefined,
+  context: PushframeContext,
+): boolean {
+  if (!condition) return true;
+
+  const resolved = resolveValue(condition.if, context);
+  const operator = condition.operator ?? (condition.equals !== undefined ? 'equals' : 'truthy');
+
+  switch (operator) {
+    case 'truthy':
+      return Boolean(resolved);
+
+    case 'falsy':
+      return !resolved;
+
+    case 'equals': {
+      const rhs = resolveValue(condition.equals ?? null, context);
+      return resolved === rhs;
+    }
+
+    case 'notEquals': {
+      const rhs = resolveValue(condition.equals ?? null, context);
+      return resolved !== rhs;
+    }
+
+    default: {
+      // Exhaustive check — TypeScript will catch new operators at compile time.
+      const _exhaustive: never = operator;
+      console.warn('[Pushframe] Unknown condition operator:', _exhaustive);
+      return true;
+    }
+  }
+}

package/src/context/PushFrameContext.ts

@@ -0,0 +1,89 @@
+import { createContext, useContext } from 'react';
+import type React from 'react';
+import type { ComponentRegistry } from '../registry/ComponentRegistry';
+
+// ---------------------------------------------------------------------------
+// Schema types
+// ---------------------------------------------------------------------------
+
+export interface SchemaNode {
+  id?: string;
+  type: string;
+  props?: Record<string, unknown>;
+  children?: SchemaNode[];
+  /** Per-item render template for flatlist nodes. */
+  itemTemplate?: SchemaNode;
+  actions?: Action[];
+  /**
+   * Conditional render expression. String values are resolved against the
+   * context via {{}} binding syntax. Non-string values (boolean, number, null)
+   * are coerced directly. Falsy → node is hidden.
+   */
+  if?: unknown;
+}
+
+export interface FlatListSchemaNode extends SchemaNode {
+  type: 'flatlist';
+  itemTemplate: SchemaNode;
+}
+
+export interface Action {
+  trigger: string;
+  action: string;
+  payload?: Record<string, unknown>;
+}
+
+// ---------------------------------------------------------------------------
+// Overlay payload types
+// ---------------------------------------------------------------------------
+
+export interface ToastPayload {
+  message: string;
+  duration?: number;
+  type?: 'success' | 'error' | 'info' | 'warning';
+}
+
+export interface BottomSheetPayload {
+  schema: SchemaNode;
+  context?: Record<string, unknown>;
+}
+
+export interface ScrollToPayload {
+  x?: number;
+  y?: number;
+  animated?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Context value
+// ---------------------------------------------------------------------------
+
+export interface PushFrameContextValue {
+  apiKey: string;
+  baseUrl: string;
+  appVersion?: string;
+  globalContext: Record<string, unknown>;
+  registry: ComponentRegistry;
+  loadingComponent?: React.ReactNode;
+  fallbackComponent?: React.ReactNode;
+  onAction?: (action: string, payload?: Record<string, unknown>) => void;
+  onError?: (error: Error) => void;
+  // Overlay imperatives
+  showToast: (payload: ToastPayload) => void;
+  showBottomSheet: (payload: BottomSheetPayload) => void;
+  dismissBottomSheet: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Context and hook
+// ---------------------------------------------------------------------------
+
+export const PushFrameContext = createContext<PushFrameContextValue | null>(null);
+
+export function usePushFrameContext(): PushFrameContextValue {
+  const ctx = useContext(PushFrameContext);
+  if (!ctx) {
+    throw new Error('[PushFrame] usePushFrameContext must be called inside <PushFrame.Provider>');
+  }
+  return ctx;
+}

package/src/index.ts

@@ -0,0 +1,119 @@
+/**
+ * @pushframe/sdk — Server-Driven UI for React Native
+ *
+ * Usage:
+ *   import { PushFrame } from '@pushframe/sdk';
+ *
+ *   <PushFrame.Provider apiKey="..." context={...}>
+ *     <PushFrame.Screen name="home" />
+ *     <PushFrame.Component name="promo-banner" />
+ *   </PushFrame.Provider>
+ */
+
+// ---------------------------------------------------------------------------
+// Component imports (for namespace assembly)
+// ---------------------------------------------------------------------------
+
+import { PushFrameProvider } from './components/PushFrameProvider';
+import { PushFrameScreen } from './components/PushFrameScreen';
+import { PushFrameComponent } from './components/PushFrameComponent';
+import { Text } from './primitives/Text';
+import { View } from './primitives/View';
+import { ScrollView } from './primitives/ScrollView';
+import { Image } from './primitives/Image';
+import { Pressable } from './primitives/Pressable';
+import { TextInput } from './primitives/TextInput';
+import { FlatList } from './primitives/FlatList';
+import { Modal } from './primitives/Modal';
+import { ActivityIndicator } from './primitives/ActivityIndicator';
+import { Switch } from './primitives/Switch';
+import { KeyboardAvoidingView } from './primitives/KeyboardAvoidingView';
+import { SafeAreaView } from './primitives/SafeAreaView';
+import { StatusBar } from './primitives/StatusBar';
+
+// ---------------------------------------------------------------------------
+// PushFrame namespace — the primary API surface
+// ---------------------------------------------------------------------------
+
+/**
+ * The PushFrame namespace. Import this as the single entry-point for the SDK.
+ *
+ * Slot components:
+ * - PushFrame.Provider  — wraps the app, initialises registry and context
+ * - PushFrame.Screen    — full-page slot (fetches /screens/:name, applies flex:1)
+ * - PushFrame.Component — inline slot (fetches /components/:name)
+ *
+ * Primitives (used internally by RecursiveRenderer, available for direct use):
+ * - PushFrame.Text, PushFrame.View, PushFrame.ScrollView, PushFrame.Image
+ * - PushFrame.Pressable, PushFrame.TextInput, PushFrame.FlatList
+ * - PushFrame.Modal, PushFrame.ActivityIndicator, PushFrame.Switch
+ * - PushFrame.KeyboardAvoidingView, PushFrame.SafeAreaView, PushFrame.StatusBar
+ */
+export const PushFrame = {
+  // Slot components
+  Provider: PushFrameProvider,
+  Screen: PushFrameScreen,
+  Component: PushFrameComponent,
+
+  // Primitives
+  Text,
+  View,
+  ScrollView,
+  Image,
+  Pressable,
+  TextInput,
+  FlatList,
+  Modal,
+  ActivityIndicator,
+  Switch,
+  KeyboardAvoidingView,
+  SafeAreaView,
+  StatusBar,
+} as const;
+
+// ---------------------------------------------------------------------------
+// Named exports (for tree-shaking and selective imports)
+// ---------------------------------------------------------------------------
+
+// Slot components
+export { PushFrameProvider } from './components/PushFrameProvider';
+export type { PushFrameProviderProps } from './components/PushFrameProvider';
+export { PushFrameScreen } from './components/PushFrameScreen';
+export { PushFrameComponent } from './components/PushFrameComponent';
+export type { PushFrameSlotProps } from './components/PushFrameComponent';
+
+// Context
+export { PushFrameContext, usePushFrameContext } from './context/PushFrameContext';
+export type {
+  PushFrameContextValue,
+  SchemaNode,
+  FlatListSchemaNode,
+  Action,
+  ToastPayload,
+  BottomSheetPayload,
+  ScrollToPayload,
+} from './context/PushFrameContext';
+
+// Registry
+export { ComponentRegistry } from './registry/ComponentRegistry';
+
+// Renderer
+export { RecursiveRenderer } from './renderer/RecursiveRenderer';
+export type { RecursiveRendererProps, DispatchAction } from './renderer/RecursiveRenderer';
+
+// Binding utilities
+export { resolveValue, resolveProps, resolveDeep } from './renderer/bindingResolver';
+export { evaluateIf } from './renderer/conditionalEvaluator';
+
+// Primitives
+export * from './primitives/index';
+
+// Transformer (Craft.js → SDUI; intended for backend / dashboard use)
+export { transformCraftToSDUI } from './transformer/index';
+export type {
+  CraftNode,
+  CraftSchema,
+  SDUINode,
+  CustomComponentDef,
+  CustomComponentsMap,
+} from './transformer/index';

package/src/overlays/BottomSheetHost.tsx

@@ -0,0 +1,175 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
+import {
+  View,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Animated,
+  Dimensions,
+} from 'react-native';
+import type { BottomSheetPayload } from '../context/PushFrameContext';
+import type { SchemaNode } from '../context/PushFrameContext';
+
+// ---------------------------------------------------------------------------
+// Imperative handle
+// ---------------------------------------------------------------------------
+
+export interface BottomSheetHostHandle {
+  show(payload: BottomSheetPayload): void;
+  dismiss(): void;
+}
+
+// ---------------------------------------------------------------------------
+// Props from Provider (renderer callback)
+// ---------------------------------------------------------------------------
+
+export interface BottomSheetHostProps {
+  /**
+   * Callback to render a SchemaNode inside the bottom sheet.
+   * Provided by the Provider which has access to registry and context.
+   */
+  renderContent: (
+    schema: SchemaNode,
+    context?: Record<string, unknown>,
+  ) => React.ReactElement | null;
+}
+
+// ---------------------------------------------------------------------------
+// BottomSheetHost
+// ---------------------------------------------------------------------------
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+/**
+ * Rendered by PushFrameProvider at the root level.
+ * Exposes imperative `show()` and `dismiss()` handles.
+ * Zero third-party dependencies — built with Animated + Modal.
+ */
+export const BottomSheetHost = forwardRef<BottomSheetHostHandle, BottomSheetHostProps>(
+  function BottomSheetHost({ renderContent }, ref) {
+    const [visible, setVisible] = useState(false);
+    const [payload, setPayload] = useState<BottomSheetPayload | null>(null);
+    const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+    const animateIn = useCallback(() => {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        bounciness: 4,
+      }).start();
+    }, [translateY]);
+
+    const animateOut = useCallback(
+      (onDone?: () => void) => {
+        Animated.timing(translateY, {
+          toValue: SCREEN_HEIGHT,
+          duration: 250,
+          useNativeDriver: true,
+        }).start(() => {
+          onDone?.();
+        });
+      },
+      [translateY],
+    );
+
+    useEffect(() => {
+      if (visible) {
+        translateY.setValue(SCREEN_HEIGHT);
+        animateIn();
+      }
+    }, [visible, translateY, animateIn]);
+
+    const dismiss = useCallback(() => {
+      animateOut(() => {
+        setVisible(false);
+        setPayload(null);
+      });
+    }, [animateOut]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show(p: BottomSheetPayload) {
+          setPayload(p);
+          setVisible(true);
+        },
+        dismiss() {
+          dismiss();
+        },
+      }),
+      [dismiss],
+    );
+
+    if (!visible || !payload) return null;
+
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="none"
+        onRequestClose={dismiss}
+        statusBarTranslucent
+      >
+        {/* Backdrop */}
+        <Pressable style={styles.backdrop} onPress={dismiss} />
+
+        {/* Sheet */}
+        <Animated.View style={[styles.sheet, { transform: [{ translateY }] }]}>
+          <View style={styles.handle} />
+          <View style={styles.content}>
+            {renderContent(payload.schema, payload.context)}
+          </View>
+        </Animated.View>
+      </Modal>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  sheet: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingBottom: 34, // safe-area approximation
+    minHeight: 200,
+    maxHeight: '80%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 20,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#d1d5db',
+    marginTop: 12,
+    marginBottom: 8,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});