@webority-technologies/mobile 0.0.1

package/lib/module/components/SkeletonLoader/SkeletonContent.js

@@ -0,0 +1,186 @@
+"use strict";
+
+import React, { Children, cloneElement, isValidElement, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { Skeleton } from "./SkeletonLoader.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const flattenStyle = style => {
+  if (!style) return {};
+  const flat = StyleSheet.flatten(style);
+  return flat ?? {};
+};
+const resolveWidth = (raw, fallback) => {
+  if (typeof raw === 'number') return raw;
+  if (typeof raw === 'string') {
+    if (raw === 'auto' || raw === '100%' || /^\d+(\.\d+)?%$/.test(raw)) {
+      return raw;
+    }
+  }
+  return fallback;
+};
+const resolveRadius = (raw, fallback) => {
+  if (typeof raw === 'number') return raw;
+  return fallback;
+};
+const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
+  if (node == null || typeof node === 'boolean') return null;
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Skeleton, {
+      width: "60%",
+      height: 14,
+      radius: "sm",
+      variant: variant,
+      speed: speed
+    }, `${keyHint}-text`);
+  }
+  if (Array.isArray(node)) {
+    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+  }
+  if (! /*#__PURE__*/isValidElement(node)) return null;
+  const element = node;
+  const props = element.props ?? {};
+  const elementStyle = flattenStyle(props.style);
+  const elementType = element.type;
+
+  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
+  if (elementType === Image) {
+    const width = resolveWidth(elementStyle.width, '100%');
+    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 120;
+    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+    return /*#__PURE__*/_jsx(Skeleton, {
+      width: width,
+      height: height,
+      radius: radius,
+      variant: variant,
+      speed: speed,
+      style: {
+        margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
+      }
+    }, `${keyHint}-img`);
+  }
+
+  // <Text /> → text-line skeleton matching font size
+  if (elementType === Text) {
+    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
+    const width = resolveWidth(elementStyle.width, '85%');
+    return /*#__PURE__*/_jsx(Skeleton, {
+      width: width,
+      height: Math.round(fontSize * 1.15),
+      radius: "sm",
+      variant: variant,
+      speed: speed,
+      style: {
+        marginVertical: 2
+      }
+    }, `${keyHint}-txt`);
+  }
+
+  // Element with children → recurse, preserving the wrapper (View, Pressable, custom layouts)
+  if (props.children != null) {
+    return /*#__PURE__*/cloneElement(element, {
+      key: `${keyHint}-w`
+    }, skeletonizeNode(props.children, variant, speed, `${keyHint}-c`));
+  }
+
+  // Leaf <View /> with explicit dimensions → skeleton block
+  if (elementType === View && (elementStyle.width != null || elementStyle.height != null)) {
+    const width = resolveWidth(elementStyle.width, '100%');
+    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 20;
+    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+    return /*#__PURE__*/_jsx(Skeleton, {
+      width: width,
+      height: height,
+      radius: radius,
+      variant: variant,
+      speed: speed
+    }, `${keyHint}-vw`);
+  }
+
+  // Opaque leaf (custom component without inspectable children) → leave as-is.
+  // Consumers should use mode='block' when wrapping such elements.
+  return /*#__PURE__*/cloneElement(element, {
+    key: `${keyHint}-leaf`
+  });
+};
+const SkeletonContent = ({
+  loading,
+  children,
+  variant = 'shimmer',
+  speed = 'normal',
+  mode = 'auto',
+  style,
+  testID
+}) => {
+  if (!loading) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  if (mode === 'block') {
+    return /*#__PURE__*/_jsx(BlockSkeleton, {
+      style: style,
+      testID: testID,
+      variant: variant,
+      speed: speed,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    children: skeletonizeNode(children, variant, speed)
+  });
+};
+SkeletonContent.displayName = 'SkeletonContent';
+const BlockSkeleton = ({
+  children,
+  variant,
+  speed,
+  style,
+  testID
+}) => {
+  const [size, setSize] = useState(null);
+  const onLayout = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (!size || size.width !== width || size.height !== height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    testID: testID,
+    onLayout: onLayout,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        opacity: 0
+      },
+      pointerEvents: "none",
+      children: children
+    }), size != null ? /*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        width: size.width,
+        height: size.height,
+        radius: "md",
+        variant: variant,
+        speed: speed
+      })
+    }) : null]
+  });
+};
+export { SkeletonContent };
+export default SkeletonContent;
+//# sourceMappingURL=SkeletonContent.js.map

package/lib/module/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,301 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { Responsive } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPEED_DURATION = {
+  slow: 1800,
+  normal: 1200,
+  fast: 800
+};
+const PULSE_DURATION = 1000;
+const AVATAR_SIZE = {
+  sm: 32,
+  md: 48,
+  lg: 64
+};
+const resolveRadius = (theme, radius) => {
+  if (typeof radius === 'number') return radius;
+  return theme.radius[radius];
+};
+const resolveWidth = width => {
+  if (width === undefined) return '100%';
+  if (typeof width === 'number') return width;
+  return width;
+};
+const Skeleton = ({
+  width = '100%',
+  height = 16,
+  radius = 'sm',
+  variant = 'shimmer',
+  speed = 'normal',
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const borderRadius = resolveRadius(theme, radius);
+  const resolvedWidth = resolveWidth(width);
+  const resolvedHeight = Responsive.size(height);
+  const progress = useRef(new Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    progress.setValue(0);
+    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
+    const animation = variant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(progress, {
+      toValue: 0,
+      duration: duration / 2,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true
+    })])) : Animated.loop(Animated.timing(progress, {
+      toValue: 1,
+      duration,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [progress, speed, variant]);
+  const handleLayout = event => {
+    const next = event.nativeEvent.layout.width;
+    if (next !== containerWidth) setContainerWidth(next);
+  };
+  const overlay = useMemo(() => {
+    if (variant === 'pulse') {
+      return /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFillObject, {
+          backgroundColor: theme.colors.skeleton.highlight,
+          opacity: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 0.6]
+          })
+        }]
+      });
+    }
+    if (containerWidth <= 0) return null;
+    const highlightWidth = Math.max(48, containerWidth * 0.6);
+    const translateX = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-highlightWidth, containerWidth]
+    });
+    return /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.shimmer, {
+        width: highlightWidth,
+        backgroundColor: theme.colors.skeleton.highlight,
+        transform: [{
+          translateX
+        }]
+      }]
+    });
+  }, [containerWidth, progress, styles.shimmer, theme.colors.skeleton.highlight, variant]);
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: handleLayout,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    testID: testID,
+    style: [styles.base, {
+      width: resolvedWidth,
+      height: resolvedHeight,
+      borderRadius,
+      backgroundColor: theme.colors.skeleton.background
+    }, style],
+    children: overlay
+  });
+};
+Skeleton.displayName = 'Skeleton';
+const SkeletonCircle = ({
+  size,
+  style,
+  ...rest
+}) => {
+  const diameter = Responsive.size(size);
+  return /*#__PURE__*/_jsx(Skeleton, {
+    ...rest,
+    width: diameter,
+    height: size,
+    radius: "full",
+    style: [{
+      width: diameter,
+      height: diameter,
+      borderRadius: diameter / 2
+    }, style]
+  });
+};
+SkeletonCircle.displayName = 'SkeletonCircle';
+const SkeletonText = ({
+  lines = 3,
+  lastLineWidth = '60%',
+  spacing,
+  fontSize = 14,
+  variant,
+  speed,
+  radius = 'sm',
+  width = '100%',
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const gap = spacing ?? theme.spacing.xs;
+  const lineHeight = Responsive.font(fontSize);
+  const safeLines = Math.max(1, lines);
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    children: Array.from({
+      length: safeLines
+    }).map((_, index) => {
+      const isLast = index === safeLines - 1;
+      const lineWidth = isLast && safeLines > 1 ? lastLineWidth : width;
+      return /*#__PURE__*/_jsx(Skeleton, {
+        width: lineWidth,
+        height: lineHeight,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        style: index < safeLines - 1 ? {
+          marginBottom: gap
+        } : undefined
+      }, index);
+    })
+  });
+};
+SkeletonText.displayName = 'SkeletonText';
+const SkeletonAvatar = ({
+  size = 'md',
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(SkeletonCircle, {
+    ...rest,
+    size: AVATAR_SIZE[size]
+  });
+};
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+const SkeletonCard = ({
+  variant,
+  speed,
+  radius = 'md',
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      padding: theme.spacing.md
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: theme.spacing.md
+      },
+      children: [/*#__PURE__*/_jsx(SkeletonAvatar, {
+        size: "md",
+        variant: variant,
+        speed: speed
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          marginLeft: theme.spacing.sm
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          width: "60%",
+          height: 14,
+          radius: radius,
+          variant: variant,
+          speed: speed,
+          style: {
+            marginBottom: theme.spacing.xs
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          width: "40%",
+          height: 12,
+          radius: radius,
+          variant: variant,
+          speed: speed
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(SkeletonText, {
+      lines: 2,
+      fontSize: 14,
+      variant: variant,
+      speed: speed,
+      radius: radius
+    })]
+  });
+};
+SkeletonCard.displayName = 'SkeletonCard';
+const SkeletonListItem = ({
+  avatarSize = 'md',
+  variant,
+  speed,
+  radius = 'sm',
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(SkeletonAvatar, {
+      size: avatarSize,
+      variant: variant,
+      speed: speed
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        marginLeft: theme.spacing.sm
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        width: "70%",
+        height: 14,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        width: "45%",
+        height: 12,
+        radius: radius,
+        variant: variant,
+        speed: speed
+      })]
+    })]
+  });
+};
+SkeletonListItem.displayName = 'SkeletonListItem';
+const buildStyles = _theme => StyleSheet.create({
+  base: {
+    overflow: 'hidden'
+  },
+  shimmer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    opacity: 0.55
+  }
+});
+export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem };
+export default Skeleton;
+//# sourceMappingURL=SkeletonLoader.js.map

package/lib/module/components/SkeletonLoader/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from "./SkeletonLoader.js";
+export { SkeletonContent } from "./SkeletonContent.js";
+//# sourceMappingURL=index.js.map