@billdog.io/react-native 1.0.0-beta.2

package/dist/utils/CSSConverter.js

@@ -0,0 +1,470 @@
+"use strict";
+/**
+ * CSS to React Native Style Converter
+ * Converts CSS strings to React Native StyleSheet-compatible objects
+ * Enhanced with gradient detection and unified style generation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertCSSToReactNative = convertCSSToReactNative;
+exports.validateCSSForNative = validateCSSForNative;
+exports.angleToGradientPoints = angleToGradientPoints;
+/**
+ * Properties that only work in WebView, not native React Native
+ */
+const WEBVIEW_ONLY_PROPERTIES = [
+    'backdrop-filter',
+    'box-shadow', // Partially supported via shadow* props
+    'text-shadow',
+    'background-image',
+    'clip-path',
+    'mask',
+    'filter',
+    'mix-blend-mode',
+    'background-blend-mode',
+];
+/**
+ * Parse gradient from CSS background property
+ */
+function parseGradientFromCSS(value) {
+    // Match linear-gradient(angle, color1 pos1, color2 pos2, ...)
+    const linearMatch = value.match(/linear-gradient\(([^)]+)\)/);
+    if (linearMatch) {
+        const parts = linearMatch[1].split(',').map(p => p.trim());
+        let angle = 180;
+        let colorStops = [];
+        // First part might be angle
+        if (parts[0].includes('deg')) {
+            angle = parseFloat(parts[0].replace('deg', ''));
+            colorStops = parts.slice(1);
+        }
+        else if (parts[0].startsWith('to ')) {
+            // Handle direction keywords
+            const dir = parts[0].replace('to ', '');
+            if (dir === 'right')
+                angle = 90;
+            else if (dir === 'left')
+                angle = 270;
+            else if (dir === 'bottom')
+                angle = 180;
+            else if (dir === 'top')
+                angle = 0;
+            colorStops = parts.slice(1);
+        }
+        else {
+            colorStops = parts;
+        }
+        const stops = colorStops.map((stop, index) => {
+            const match = stop.match(/(.+?)\s+(\d+)%?$/);
+            if (match) {
+                return { color: match[1].trim(), position: parseFloat(match[2]) };
+            }
+            // Default position based on index
+            return {
+                color: stop.trim(),
+                position: (index / Math.max(colorStops.length - 1, 1)) * 100
+            };
+        });
+        return { type: 'linear', angle, stops };
+    }
+    // Match radial-gradient
+    const radialMatch = value.match(/radial-gradient\(([^)]+)\)/);
+    if (radialMatch) {
+        const parts = radialMatch[1].split(',').map(p => p.trim());
+        // Skip shape/size specification, get color stops
+        const colorStops = parts.filter(p => !p.includes('circle') && !p.includes('ellipse'));
+        const stops = colorStops.map((stop, index) => {
+            const match = stop.match(/(.+?)\s+(\d+)%?$/);
+            if (match) {
+                return { color: match[1].trim(), position: parseFloat(match[2]) };
+            }
+            return {
+                color: stop.trim(),
+                position: (index / Math.max(colorStops.length - 1, 1)) * 100
+            };
+        });
+        return { type: 'radial', stops };
+    }
+    return null;
+}
+/**
+ * Convert CSS string to React Native styles
+ * Now with gradient detection and extraction
+ */
+function convertCSSToReactNative(css) {
+    var _a;
+    const style = {};
+    const warnings = [];
+    let requiresGradient = false;
+    let gradient;
+    let fallbackColor;
+    if (!css || css.trim() === '') {
+        return { style, warnings };
+    }
+    const properties = parseCSSProperties(css);
+    for (const [property, value] of Object.entries(properties)) {
+        // Check for gradient in background property
+        if (property === 'background' || property === 'background-image') {
+            const gradientConfig = parseGradientFromCSS(value);
+            if (gradientConfig) {
+                requiresGradient = true;
+                gradient = gradientConfig;
+                fallbackColor = ((_a = gradientConfig.stops[0]) === null || _a === void 0 ? void 0 : _a.color) || 'transparent';
+                style.backgroundColor = fallbackColor; // Fallback
+                continue;
+            }
+        }
+        // Check for unsupported properties
+        if (WEBVIEW_ONLY_PROPERTIES.some(p => property.includes(p))) {
+            warnings.push(`'${property}' is not supported in native rendering`);
+            continue;
+        }
+        processProperty(property, value, style, warnings);
+    }
+    return { style, warnings, requiresGradient, gradient, fallbackColor };
+}
+/**
+ * Parse CSS string into property map
+ */
+function parseCSSProperties(css) {
+    const properties = {};
+    const declarations = css.split(';').filter(d => d.trim());
+    for (const decl of declarations) {
+        const colonIndex = decl.indexOf(':');
+        if (colonIndex > 0) {
+            const prop = decl.substring(0, colonIndex).trim();
+            const value = decl.substring(colonIndex + 1).trim();
+            properties[prop] = value;
+        }
+    }
+    return properties;
+}
+/**
+ * Process a single CSS property
+ */
+function processProperty(property, value, style, warnings) {
+    const numericValue = parseNumericValue(value);
+    switch (property) {
+        // Background
+        case 'background-color':
+            style.backgroundColor = value;
+            break;
+        // Opacity
+        case 'opacity':
+            style.opacity = parseFloat(value);
+            break;
+        // Border radius
+        case 'border-radius':
+            style.borderRadius = numericValue;
+            break;
+        case 'border-top-left-radius':
+            style.borderTopLeftRadius = numericValue;
+            break;
+        case 'border-top-right-radius':
+            style.borderTopRightRadius = numericValue;
+            break;
+        case 'border-bottom-left-radius':
+            style.borderBottomLeftRadius = numericValue;
+            break;
+        case 'border-bottom-right-radius':
+            style.borderBottomRightRadius = numericValue;
+            break;
+        // Border
+        case 'border-width':
+            style.borderWidth = numericValue;
+            break;
+        case 'border-color':
+            style.borderColor = value;
+            break;
+        case 'border-style':
+            style.borderStyle = value;
+            break;
+        case 'border-top-width':
+            style.borderTopWidth = numericValue;
+            break;
+        case 'border-right-width':
+            style.borderRightWidth = numericValue;
+            break;
+        case 'border-bottom-width':
+            style.borderBottomWidth = numericValue;
+            break;
+        case 'border-left-width':
+            style.borderLeftWidth = numericValue;
+            break;
+        // Padding
+        case 'padding':
+            applySpacingShorthand(value, style, 'padding');
+            break;
+        case 'padding-top':
+            style.paddingTop = numericValue;
+            break;
+        case 'padding-right':
+            style.paddingRight = numericValue;
+            break;
+        case 'padding-bottom':
+            style.paddingBottom = numericValue;
+            break;
+        case 'padding-left':
+            style.paddingLeft = numericValue;
+            break;
+        // Margin
+        case 'margin':
+            applySpacingShorthand(value, style, 'margin');
+            break;
+        case 'margin-top':
+            style.marginTop = numericValue;
+            break;
+        case 'margin-right':
+            style.marginRight = numericValue;
+            break;
+        case 'margin-bottom':
+            style.marginBottom = numericValue;
+            break;
+        case 'margin-left':
+            style.marginLeft = numericValue;
+            break;
+        // Dimensions
+        case 'width':
+            style.width = parseNumericOrPercent(value);
+            break;
+        case 'height':
+            style.height = parseNumericOrPercent(value);
+            break;
+        case 'min-width':
+            style.minWidth = parseNumericOrPercent(value);
+            break;
+        case 'min-height':
+            style.minHeight = parseNumericOrPercent(value);
+            break;
+        case 'max-width':
+            style.maxWidth = parseNumericOrPercent(value);
+            break;
+        case 'max-height':
+            style.maxHeight = parseNumericOrPercent(value);
+            break;
+        // Transform
+        case 'transform':
+            // parseTransform returns a dynamically-built array of single-key transform
+            // objects from parsed CSS. RN's transform union (RotateTransform | ... |
+            // MatrixTransform) is impractical to satisfy from dynamic parsing, so cast.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            style.transform = parseTransform(value);
+            break;
+        // Flexbox
+        case 'flex':
+            style.flex = parseFloat(value);
+            break;
+        case 'flex-direction':
+            style.flexDirection = value;
+            break;
+        case 'justify-content':
+            style.justifyContent = mapJustifyContent(value);
+            break;
+        case 'align-items':
+            style.alignItems = mapAlignItems(value);
+            break;
+        case 'align-self':
+            style.alignSelf = mapAlignItems(value);
+            break;
+        case 'flex-wrap':
+            style.flexWrap = value;
+            break;
+        // Shadow (partial support)
+        case 'box-shadow':
+            applyBoxShadow(value, style);
+            break;
+        // Position
+        case 'position':
+            style.position = value;
+            break;
+        case 'top':
+            style.top = numericValue;
+            break;
+        case 'right':
+            style.right = numericValue;
+            break;
+        case 'bottom':
+            style.bottom = numericValue;
+            break;
+        case 'left':
+            style.left = numericValue;
+            break;
+        case 'z-index':
+            style.zIndex = parseInt(value);
+            break;
+        // Overflow
+        case 'overflow':
+            style.overflow = value;
+            break;
+        default:
+            // Unknown property - add warning
+            if (!property.startsWith('-webkit') && !property.startsWith('-moz')) {
+                warnings.push(`Unknown CSS property: '${property}'`);
+            }
+    }
+}
+/**
+ * Parse numeric value from CSS
+ */
+function parseNumericValue(value) {
+    return parseFloat(value.replace(/px|dp|pt|rem|em/g, '')) || 0;
+}
+/**
+ * Parse numeric or percentage value
+ */
+function parseNumericOrPercent(value) {
+    if (value.includes('%')) {
+        // RN's DimensionValue percent type is the template literal `${number}%`;
+        // a runtime-parsed CSS string can't be statically proven to match, so cast.
+        return value.trim();
+    }
+    return parseNumericValue(value);
+}
+/**
+ * Apply spacing shorthand (padding/margin)
+ */
+function applySpacingShorthand(value, style, prefix) {
+    const parts = value.split(/\s+/).map(parseNumericValue);
+    switch (parts.length) {
+        case 1:
+            style[prefix] = parts[0];
+            break;
+        case 2:
+            style[`${prefix}Vertical`] = parts[0];
+            style[`${prefix}Horizontal`] = parts[1];
+            break;
+        case 3:
+            style[`${prefix}Top`] = parts[0];
+            style[`${prefix}Horizontal`] = parts[1];
+            style[`${prefix}Bottom`] = parts[2];
+            break;
+        case 4:
+            style[`${prefix}Top`] = parts[0];
+            style[`${prefix}Right`] = parts[1];
+            style[`${prefix}Bottom`] = parts[2];
+            style[`${prefix}Left`] = parts[3];
+            break;
+    }
+}
+/**
+ * Parse CSS transform to React Native transform array
+ */
+function parseTransform(value) {
+    const transforms = [];
+    // translateX
+    const translateXMatch = value.match(/translateX\(([^)]+)\)/);
+    if (translateXMatch) {
+        transforms.push({ translateX: parseNumericValue(translateXMatch[1]) });
+    }
+    // translateY
+    const translateYMatch = value.match(/translateY\(([^)]+)\)/);
+    if (translateYMatch) {
+        transforms.push({ translateY: parseNumericValue(translateYMatch[1]) });
+    }
+    // translate(x, y)
+    const translateMatch = value.match(/translate\(([^,)]+)(?:,\s*([^)]+))?\)/);
+    if (translateMatch) {
+        transforms.push({ translateX: parseNumericValue(translateMatch[1]) });
+        if (translateMatch[2]) {
+            transforms.push({ translateY: parseNumericValue(translateMatch[2]) });
+        }
+    }
+    // scale
+    const scaleMatch = value.match(/scale\(([^)]+)\)/);
+    if (scaleMatch) {
+        transforms.push({ scale: parseFloat(scaleMatch[1]) });
+    }
+    // scaleX
+    const scaleXMatch = value.match(/scaleX\(([^)]+)\)/);
+    if (scaleXMatch) {
+        transforms.push({ scaleX: parseFloat(scaleXMatch[1]) });
+    }
+    // scaleY
+    const scaleYMatch = value.match(/scaleY\(([^)]+)\)/);
+    if (scaleYMatch) {
+        transforms.push({ scaleY: parseFloat(scaleYMatch[1]) });
+    }
+    // rotate
+    const rotateMatch = value.match(/rotate\(([^)]+)\)/);
+    if (rotateMatch) {
+        const deg = rotateMatch[1].replace('deg', '');
+        transforms.push({ rotate: `${deg}deg` });
+    }
+    return transforms;
+}
+/**
+ * Apply box-shadow (partial React Native support)
+ */
+function applyBoxShadow(value, style) {
+    // Parse: offsetX offsetY blurRadius color
+    const match = value.match(/(-?\d+)px\s+(-?\d+)px\s+(-?\d+)px(?:\s+(-?\d+)px)?\s+(.+)/);
+    if (match) {
+        const [, x, y, blur, _spread, color] = match;
+        style.shadowColor = color.trim();
+        style.shadowOffset = { width: parseInt(x), height: parseInt(y) };
+        style.shadowOpacity = 1;
+        style.shadowRadius = parseInt(blur);
+        // Android elevation
+        style.elevation = Math.max(parseInt(blur), 1);
+    }
+}
+/**
+ * Map CSS justify-content to React Native
+ */
+function mapJustifyContent(value) {
+    const map = {
+        'flex-start': 'flex-start',
+        'flex-end': 'flex-end',
+        'center': 'center',
+        'space-between': 'space-between',
+        'space-around': 'space-around',
+        'space-evenly': 'space-evenly',
+    };
+    return map[value] || 'flex-start';
+}
+/**
+ * Map CSS align-items to React Native
+ */
+function mapAlignItems(value) {
+    const map = {
+        'flex-start': 'flex-start',
+        'flex-end': 'flex-end',
+        'center': 'center',
+        'stretch': 'stretch',
+        'baseline': 'baseline',
+    };
+    return map[value] || 'stretch';
+}
+/**
+ * Validate CSS for native compatibility
+ */
+function validateCSSForNative(css) {
+    const warnings = [];
+    for (const prop of WEBVIEW_ONLY_PROPERTIES) {
+        if (css.includes(prop)) {
+            warnings.push(`'${prop}' is only supported in WebView mode`);
+        }
+    }
+    // Check for gradients (now supported with LinearGradient component)
+    if (css.includes('linear-gradient') || css.includes('radial-gradient')) {
+        warnings.push('Gradients require LinearGradient component wrapper');
+    }
+    return warnings;
+}
+/**
+ * Convert gradient angle to LinearGradient start/end points
+ * CSS angle: 0deg = bottom to top, 90deg = left to right
+ * LinearGradient: start/end are {x, y} where 0,0 is top-left
+ */
+function angleToGradientPoints(angle) {
+    const radians = ((angle - 90) * Math.PI) / 180;
+    const startX = 0.5 - Math.cos(radians) * 0.5;
+    const startY = 0.5 + Math.sin(radians) * 0.5;
+    const endX = 0.5 + Math.cos(radians) * 0.5;
+    const endY = 0.5 - Math.sin(radians) * 0.5;
+    return {
+        start: { x: startX, y: startY },
+        end: { x: endX, y: endY },
+    };
+}
+// GradientStop and GradientConfig are already exported at their `export interface`
+// declarations above; the redundant re-export was removed to avoid a conflict.

package/dist/utils/animations.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Animation utilities for React Native tap behavior transitions
+ */
+import { Animated } from 'react-native';
+export type TransitionType = 'none' | 'shrink' | 'grow' | 'fade' | 'bounce' | 'slide' | 'rotate' | 'pulse';
+/**
+ * Play a transition animation on an Animated.Value
+ */
+export declare function playTransition(scaleValue: Animated.Value, opacityValue: Animated.Value, type: TransitionType, duration: number): Promise<void>;
+/**
+ * Create animation values for a button
+ */
+export declare function createAnimationValues(): {
+    scale: Animated.Value;
+    opacity: Animated.Value;
+    translateX: Animated.Value;
+    rotate: Animated.Value;
+};
+/**
+ * Reset animation values to default
+ */
+export declare function resetAnimationValues(values: {
+    scale: Animated.Value;
+    opacity: Animated.Value;
+    translateX: Animated.Value;
+    rotate: Animated.Value;
+}): void;
+/**
+ * Get animated style from animation values
+ */
+export declare function getAnimatedStyle(values: {
+    scale: Animated.Value;
+    opacity: Animated.Value;
+    translateX: Animated.Value;
+    rotate: Animated.Value;
+}): {
+    transform: {
+        scale: Animated.Value;
+    }[];
+    opacity: Animated.Value;
+};

package/dist/utils/animations.js

@@ -0,0 +1,194 @@
+"use strict";
+/**
+ * Animation utilities for React Native tap behavior transitions
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.playTransition = playTransition;
+exports.createAnimationValues = createAnimationValues;
+exports.resetAnimationValues = resetAnimationValues;
+exports.getAnimatedStyle = getAnimatedStyle;
+const react_native_1 = require("react-native");
+/**
+ * Play a transition animation on an Animated.Value
+ */
+async function playTransition(scaleValue, opacityValue, type, duration) {
+    if (type === 'none')
+        return;
+    return new Promise((resolve) => {
+        const animation = getTransitionAnimation(scaleValue, opacityValue, type, duration);
+        animation.start(() => resolve());
+    });
+}
+/**
+ * Get the appropriate animation for a transition type
+ */
+function getTransitionAnimation(scaleValue, opacityValue, type, duration) {
+    const halfDuration = duration / 2;
+    const quarterDuration = duration / 4;
+    switch (type) {
+        case 'shrink':
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 0.95,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+        case 'grow':
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1.05,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+        case 'fade':
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(opacityValue, {
+                    toValue: 0.5,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(opacityValue, {
+                    toValue: 1,
+                    duration: halfDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+        case 'bounce':
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 0.9,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.spring(scaleValue, {
+                    toValue: 1,
+                    friction: 3,
+                    tension: 100,
+                    useNativeDriver: true,
+                }),
+            ]);
+        case 'pulse':
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.parallel([
+                    react_native_1.Animated.timing(scaleValue, {
+                        toValue: 1.1,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.timing(opacityValue, {
+                        toValue: 0.8,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                ]),
+                react_native_1.Animated.parallel([
+                    react_native_1.Animated.timing(scaleValue, {
+                        toValue: 1,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                ]),
+            ]);
+        case 'slide':
+            // For slide, we need a translateX value - this is a simplified version
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 0.98,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1.02,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+        case 'rotate':
+            // Note: Rotation requires a different animated value
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 0.98,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleValue, {
+                    toValue: 1,
+                    duration: quarterDuration,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+        default:
+            return react_native_1.Animated.timing(scaleValue, {
+                toValue: 1,
+                duration: 0,
+                useNativeDriver: true,
+            });
+    }
+}
+/**
+ * Create animation values for a button
+ */
+function createAnimationValues() {
+    return {
+        scale: new react_native_1.Animated.Value(1),
+        opacity: new react_native_1.Animated.Value(1),
+        translateX: new react_native_1.Animated.Value(0),
+        rotate: new react_native_1.Animated.Value(0),
+    };
+}
+/**
+ * Reset animation values to default
+ */
+function resetAnimationValues(values) {
+    values.scale.setValue(1);
+    values.opacity.setValue(1);
+    values.translateX.setValue(0);
+    values.rotate.setValue(0);
+}
+/**
+ * Get animated style from animation values
+ */
+function getAnimatedStyle(values) {
+    return {
+        transform: [{ scale: values.scale }],
+        opacity: values.opacity,
+    };
+}