react-native-divkit 0.1.0-alpha.1

package/src/components/state/DivState.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import type { ComponentContext } from '../../types/componentContext';
+import type { DivStateData, State } from '../../types/state';
+import { Outer } from '../utilities/Outer';
+import { useStateContext } from '../../context/StateContext';
+import { useDivKitContext } from '../../context/DivKitContext';
+import { wrapError } from '../../utils/wrapError';
+
+export interface DivStateProps {
+    componentContext: ComponentContext<DivStateData>;
+}
+
+/**
+ * DivState component - renders different content based on state
+ * MVP implementation with basic features:
+ * - State selection by state_id
+ * - Default state
+ * - State switching via actions (set_state)
+ * - State registration in StateContext
+ * - State variable binding (state_id_variable)
+ *
+ * Deferred for post-MVP:
+ * - Transition animations (in/out/change)
+ * - Animation timing and interpolation
+ * - Clip to bounds
+ * - Advanced state management
+ * - Multiple concurrent state transitions
+ *
+ * Based on Web State.svelte
+ */
+export function DivState({ componentContext }: DivStateProps) {
+    const { json } = componentContext;
+    const { getVariable } = useDivKitContext();
+    const { registerState } = useStateContext();
+
+    // Get state ID for registration
+    const stateId = json.div_id || json.id;
+
+    // Find default state
+    const defaultStateId = useMemo(() => {
+        if (json.default_state_id) {
+            return json.default_state_id;
+        }
+        // If no default, use first state
+        if (json.states && json.states.length > 0) {
+            return json.states[0].state_id;
+        }
+        return undefined;
+    }, [json.default_state_id, json.states]);
+
+    // State management
+    const [currentStateId, setCurrentStateId] = useState<string | undefined>(defaultStateId);
+
+    // Handle state_id_variable (two-way binding)
+    const stateVariableName = json.state_id_variable;
+    const stateVariable = stateVariableName ? getVariable(stateVariableName) : undefined;
+
+    // Sync with state variable
+    useEffect(() => {
+        if (stateVariable) {
+            // Subscribe to variable changes
+            const unsubscribe = stateVariable.subscribe((value: unknown) => {
+                if (typeof value === 'string' && value !== currentStateId) {
+                    setCurrentStateId(value);
+                }
+            });
+
+            return unsubscribe;
+        }
+        return undefined;
+    }, [stateVariable, currentStateId]);
+
+    // Update variable when state changes
+    useEffect(() => {
+        if (stateVariable && currentStateId) {
+            const currentValue = stateVariable.getValue();
+            if (currentValue !== currentStateId) {
+                stateVariable.setValue(currentStateId);
+            }
+        }
+    }, [stateVariable, currentStateId]);
+
+    // Register state in context for set_state action
+    useEffect(() => {
+        if (stateId) {
+            const unregister = registerState(stateId, async (newStateId: string) => {
+                setCurrentStateId(newStateId);
+                return undefined;
+            });
+            return unregister;
+        }
+        return undefined;
+    }, [stateId, registerState]);
+
+    // Validate states
+    useEffect(() => {
+        if (!json.states || json.states.length === 0) {
+            componentContext.logError(wrapError(new Error('Empty "states" prop for div "state"')));
+        }
+        if (!stateId) {
+            componentContext.logError(wrapError(new Error('Missing "id" prop for div "state"')));
+        }
+    }, [json.states, stateId, componentContext]);
+
+    // Find current state
+    const currentState = useMemo((): State | undefined => {
+        if (!json.states) return undefined;
+        const found = json.states.find(s => s.state_id === currentStateId);
+        if (!found || !found.state_id) return undefined;
+        return found as State;
+    }, [json.states, currentStateId]);
+
+    // Create child context for current state
+    const childContext = useMemo(() => {
+        if (!currentState?.div) return undefined;
+
+        return componentContext.produceChildContext(currentState.div, {
+            path: currentStateId,
+        });
+    }, [currentState, currentStateId, componentContext]);
+
+    // Render current state
+    const renderContent = () => {
+        if (!currentState?.div || !childContext) {
+            return null;
+        }
+
+        // Import DivComponent dynamically to avoid circular dependency
+        const DivComponent = require('../DivComponent').DivComponent;
+
+        return (
+            <DivComponent
+                componentContext={childContext}
+            />
+        );
+    };
+
+    return (
+        <Outer componentContext={componentContext}>
+            <View>
+                {renderContent()}
+            </View>
+        </Outer>
+    );
+}

package/src/components/state/index.ts

@@ -0,0 +1,2 @@
+export { DivState } from './DivState';
+export type { DivStateProps } from './DivState';

package/src/components/text/DivText.tsx

@@ -0,0 +1,186 @@
+import React, { useMemo } from 'react';
+import { Text, TextStyle } from 'react-native';
+import type { ComponentContext } from '../../types/componentContext';
+import type { DivTextData, FontWeight, Truncate } from '../../types/text';
+import { Outer } from '../utilities/Outer';
+import { useDerivedFromVarsSimple } from '../../hooks/useDerivedFromVars';
+import { useDivKitContext } from '../../context/DivKitContext';
+
+export interface DivTextProps {
+    componentContext: ComponentContext<DivTextData>;
+}
+
+/**
+ * DivText component - renders text with styling
+ * MVP implementation with basic features:
+ * - Text rendering with variable substitution
+ * - Font styling (size, weight, color, family)
+ * - Text alignment (horizontal & vertical)
+ * - Max lines with ellipsize
+ * - Line height, letter spacing
+ * - Text decorations (underline, strikethrough)
+ *
+ * Deferred for post-MVP:
+ * - Text ranges (nested styling)
+ * - Text images
+ * - Text gradients
+ * - Text shadows
+ * - Auto ellipsize
+ * - Selectable text with custom actions
+ *
+ * Based on Web Text.svelte
+ */
+export function DivText({ componentContext }: DivTextProps) {
+    const { direction } = useDivKitContext();
+    const { json, variables } = componentContext;
+
+    // Reactive properties - use hooks for properties that may contain variables
+    const text = useDerivedFromVarsSimple<string>(
+        json.text || '',
+        variables || new Map()
+    );
+
+    const fontSize = useDerivedFromVarsSimple<number>(
+        json.font_size || 12,
+        variables || new Map()
+    );
+
+    const textColor = useDerivedFromVarsSimple<string>(
+        json.text_color || '#000000',
+        variables || new Map()
+    );
+
+    const textAlignmentHorizontal = useDerivedFromVarsSimple(
+        json.text_alignment_horizontal || 'start',
+        variables || new Map()
+    );
+
+    const maxLines = useDerivedFromVarsSimple<number | undefined>(
+        json.max_lines,
+        variables || new Map()
+    );
+
+    // Build text style
+    const textStyle = useMemo((): TextStyle => {
+        const style: TextStyle = {};
+
+        // Font size
+        if (fontSize) {
+            style.fontSize = fontSize;
+        }
+
+        // Text color
+        if (textColor) {
+            style.color = textColor;
+        }
+
+        // Font weight
+        if (json.font_weight) {
+            const weightMap: Record<FontWeight, TextStyle['fontWeight']> = {
+                'light': '300',
+                'regular': '400',
+                'medium': '500',
+                'bold': '700'
+            };
+            style.fontWeight = weightMap[json.font_weight] || '400';
+        } else if (json.font_weight_value) {
+            // Custom weight value (100-900)
+            const weight = Math.max(100, Math.min(900, json.font_weight_value));
+            style.fontWeight = String(weight) as TextStyle['fontWeight'];
+        }
+
+        // Font family
+        if (json.font_family) {
+            style.fontFamily = json.font_family;
+        }
+
+        // Line height
+        if (json.line_height && fontSize) {
+            // DivKit line_height is in pixels, React Native expects ratio or pixels
+            // Convert to ratio: line_height / font_size
+            style.lineHeight = json.line_height;
+        }
+
+        // Letter spacing
+        if (json.letter_spacing !== undefined) {
+            style.letterSpacing = json.letter_spacing;
+        }
+
+        // Text alignment
+        const alignValue = textAlignmentHorizontal;
+        if (alignValue === 'start') {
+            style.textAlign = direction === 'rtl' ? 'right' : 'left';
+        } else if (alignValue === 'end') {
+            style.textAlign = direction === 'rtl' ? 'left' : 'right';
+        } else if (alignValue === 'center') {
+            style.textAlign = 'center';
+        } else if (alignValue === 'left' || alignValue === 'right') {
+            style.textAlign = alignValue;
+        }
+
+        // Text decoration - underline
+        if (json.underline === 'single') {
+            style.textDecorationLine = 'underline';
+        }
+
+        // Text decoration - strike (strikethrough)
+        if (json.strike === 'single') {
+            if (style.textDecorationLine === 'underline') {
+                style.textDecorationLine = 'underline line-through';
+            } else {
+                style.textDecorationLine = 'line-through';
+            }
+        }
+
+        // Font feature settings (advanced typography)
+        if (json.font_feature_settings) {
+            // React Native supports fontVariant for some features
+            // For full support, this may require native modules
+            // MVP: basic support
+            style.fontVariant = json.font_feature_settings.split(',').map(s => s.trim()) as any;
+        }
+
+        return style;
+    }, [
+        fontSize,
+        textColor,
+        textAlignmentHorizontal,
+        json.font_weight,
+        json.font_weight_value,
+        json.font_family,
+        json.line_height,
+        json.letter_spacing,
+        json.underline,
+        json.strike,
+        json.font_feature_settings,
+        direction
+    ]);
+
+    // Determine numberOfLines prop
+    const numberOfLines = maxLines && maxLines > 0 ? maxLines : undefined;
+
+    // Ellipsize mode
+    const ellipsizeMode = useMemo(() => {
+        const truncate = json.truncate as Truncate | undefined;
+        if (truncate === 'end' || numberOfLines !== undefined) {
+            return 'tail';
+        }
+        return undefined;
+    }, [json.truncate, numberOfLines]);
+
+    // Vertical alignment is handled by Outer component via alignment props
+    // For text, we primarily care about horizontal alignment which is in textStyle
+
+    return (
+        <Outer componentContext={componentContext}>
+            <Text
+                style={textStyle}
+                numberOfLines={numberOfLines}
+                ellipsizeMode={ellipsizeMode}
+                allowFontScaling={false} // DivKit has fixed sizes
+            >
+                {text}
+            </Text>
+        </Outer>
+    );
+}

package/src/components/text/index.ts

@@ -0,0 +1,2 @@
+export { DivText } from './DivText';
+export type { DivTextProps } from './DivText';

package/src/components/utilities/Outer.tsx

@@ -0,0 +1,239 @@
+import React, { ReactNode, useMemo } from 'react';
+import { View, Pressable, ViewStyle, StyleSheet } from 'react-native';
+import type { ComponentContext } from '../../types/componentContext';
+import type { DivBaseData } from '../../types/base';
+import type { Visibility } from '../../types/base';
+import type { FixedSize, MatchParentSize } from '../../types/sizes';
+import type { MaybeMissing } from '../../expressions/json';
+import { useDerivedFromVarsSimple } from '../../hooks/useDerivedFromVars';
+import { useActionHandler, useHasActions } from '../../hooks/useAction';
+import { useDivKitContext } from '../../context/DivKitContext';
+
+export interface OuterProps<T extends DivBaseData = DivBaseData> {
+    componentContext: ComponentContext<T>;
+    children: ReactNode;
+    style?: ViewStyle;
+}
+
+/**
+ * Outer component - base wrapper for all DivKit components
+ * Handles visibility, sizing, padding, margins, background, borders, and actions
+ *
+ * Based on Web Outer.svelte but simplified for React Native MVP
+ */
+export function Outer<T extends DivBaseData = DivBaseData>({
+    componentContext,
+    children,
+    style: customStyle
+}: OuterProps<T>) {
+    const { direction } = useDivKitContext();
+    const { json, variables } = componentContext;
+
+    // Only use reactive hooks for truly dynamic properties (visibility, alpha)
+    // For MVP, other properties are read directly from JSON (can be enhanced later)
+    const visibility = useDerivedFromVarsSimple<Visibility>(
+        json.visibility || 'visible',
+        variables || new Map()
+    );
+    const alpha = useDerivedFromVarsSimple<number>(
+        json.alpha !== undefined ? json.alpha : 1,
+        variables || new Map()
+    );
+
+    // Extract properties directly from JSON for MVP (non-reactive)
+    const paddings = json.paddings;
+    const margins = json.margins;
+    const background = json.background;
+    const border = json.border;
+    const width = json.width;
+    const height = json.height;
+
+    // Actions - use type assertion for now (will be refined in component implementations)
+    const jsonAny = json as any;
+    const actions = jsonAny.actions || (jsonAny.action ? [jsonAny.action] : []);
+    const hasActions = useHasActions(actions);
+    const handlePress = useActionHandler(actions, { componentContext });
+
+    // Early return for gone visibility
+    if (visibility === 'gone') {
+        return null;
+    }
+
+    // Build styles
+    const containerStyle = useMemo(() => {
+        const styles: ViewStyle = {};
+
+        // Visibility (invisible = opacity 0, but still takes space)
+        if (visibility === 'invisible') {
+            styles.opacity = 0;
+        } else if (typeof alpha === 'number' && alpha !== 1) {
+            styles.opacity = Math.max(0, Math.min(1, alpha));
+        }
+
+        // Width
+        if (width) {
+            const widthVal = width as MaybeMissing<any>;
+            if (widthVal.type === 'fixed') {
+                styles.width = (widthVal as FixedSize).value;
+            } else if (widthVal.type === 'match_parent') {
+                styles.width = '100%';
+                styles.flexGrow = (widthVal as MatchParentSize).weight || 1;
+            } else if (widthVal.type === 'wrap_content') {
+                styles.alignSelf = 'flex-start';
+                // React Native default is wrap_content-like for View
+            }
+        } else {
+            // Default: match_parent
+            styles.width = '100%';
+            styles.flexGrow = 1;
+        }
+
+        // Height
+        if (height) {
+            const heightVal = height as MaybeMissing<any>;
+            if (heightVal.type === 'fixed') {
+                styles.height = (heightVal as FixedSize).value;
+            } else if (heightVal.type === 'match_parent') {
+                styles.height = '100%';
+                styles.flexGrow = (heightVal as MatchParentSize).weight || 1;
+            }
+            // wrap_content is default in React Native
+        }
+
+        // Paddings
+        if (paddings) {
+            const p = paddings as any;
+            if (p.top !== undefined) styles.paddingTop = p.top;
+            if (p.bottom !== undefined) styles.paddingBottom = p.bottom;
+
+            // Handle RTL for start/end
+            if (direction === 'rtl') {
+                if (p.start !== undefined) styles.paddingRight = p.start;
+                if (p.end !== undefined) styles.paddingLeft = p.end;
+            } else {
+                if (p.start !== undefined) styles.paddingLeft = p.start;
+                if (p.end !== undefined) styles.paddingRight = p.end;
+            }
+
+            // Fallback to left/right if start/end not provided
+            if (p.left !== undefined && p.start === undefined) {
+                styles.paddingLeft = p.left;
+            }
+            if (p.right !== undefined && p.end === undefined) {
+                styles.paddingRight = p.right;
+            }
+        }
+
+        // Margins
+        if (margins) {
+            const m = margins as any;
+            if (m.top !== undefined) styles.marginTop = m.top;
+            if (m.bottom !== undefined) styles.marginBottom = m.bottom;
+
+            // Handle RTL for start/end
+            if (direction === 'rtl') {
+                if (m.start !== undefined) styles.marginRight = m.start;
+                if (m.end !== undefined) styles.marginLeft = m.end;
+            } else {
+                if (m.start !== undefined) styles.marginLeft = m.start;
+                if (m.end !== undefined) styles.marginRight = m.end;
+            }
+
+            // Fallback to left/right
+            if (m.left !== undefined && m.start === undefined) {
+                styles.marginLeft = m.left;
+            }
+            if (m.right !== undefined && m.end === undefined) {
+                styles.marginRight = m.right;
+            }
+        }
+
+        // Background (MVP: only solid colors)
+        if (background && Array.isArray(background)) {
+            const bg = background as any[];
+            const solidBg = bg.find((b: any) => b?.type === 'solid');
+            if (solidBg && solidBg.color) {
+                styles.backgroundColor = solidBg.color;
+            }
+        }
+
+        // Border
+        if (border) {
+            const b = border as any;
+            if (b.stroke) {
+                const strokeWidth = b.stroke.width || 1;
+                const strokeColor = b.stroke.color || '#000000';
+                styles.borderWidth = strokeWidth;
+                styles.borderColor = strokeColor;
+                styles.borderStyle = b.stroke.style?.type === 'dashed' ? 'dashed' : 'solid';
+            }
+
+            // Border radius
+            if (b.corner_radius !== undefined) {
+                styles.borderRadius = b.corner_radius;
+            } else if (b.corners_radius) {
+                // React Native supports individual corners
+                const corners = b.corners_radius;
+                if (corners['top-left'] !== undefined) {
+                    styles.borderTopLeftRadius = corners['top-left'];
+                }
+                if (corners['top-right'] !== undefined) {
+                    styles.borderTopRightRadius = corners['top-right'];
+                }
+                if (corners['bottom-left'] !== undefined) {
+                    styles.borderBottomLeftRadius = corners['bottom-left'];
+                }
+                if (corners['bottom-right'] !== undefined) {
+                    styles.borderBottomRightRadius = corners['bottom-right'];
+                }
+            }
+
+            // Shadow (box-shadow equivalent)
+            if (b.has_shadow) {
+                const shadow = b.shadow;
+                if (shadow) {
+                    styles.shadowColor = shadow.color || '#000000';
+                    styles.shadowOffset = {
+                        width: shadow.offset?.x?.value || 0,
+                        height: shadow.offset?.y?.value || 2
+                    };
+                    styles.shadowOpacity = shadow.alpha !== undefined ? shadow.alpha : 0.18;
+                    styles.shadowRadius = shadow.blur || 2;
+                    // Android elevation
+                    styles.elevation = 3;
+                } else {
+                    // Default shadow
+                    styles.shadowColor = '#000000';
+                    styles.shadowOffset = { width: 0, height: 1 };
+                    styles.shadowOpacity = 0.18;
+                    styles.shadowRadius = 2;
+                    styles.elevation = 2;
+                }
+            }
+        }
+
+        return styles;
+    }, [visibility, alpha, width, height, paddings, margins, background, border, direction]);
+
+    const finalStyle = useMemo(() => {
+        return StyleSheet.flatten([containerStyle, customStyle]);
+    }, [containerStyle, customStyle]);
+
+    // Render with or without Pressable based on actions
+    if (hasActions) {
+        return (
+            <Pressable
+                onPress={handlePress}
+                style={finalStyle}
+            >
+                {children}
+            </Pressable>
+        );
+    }
+
+    return (
+        <View style={finalStyle}>
+            {children}
+        </View>
+    );
+}