@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkeletonContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _SkeletonLoader = require("./SkeletonLoader.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const flattenStyle = style => {
+  if (!style) return {};
+  const flat = _reactNative.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__*/(0, _jsxRuntime.jsx)(_SkeletonLoader.Skeleton, {
+      width: "60%",
+      height: 14,
+      radius: "sm",
+      variant: variant,
+      speed: speed
+    }, `${keyHint}-text`);
+  }
+  if (Array.isArray(node)) {
+    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+  }
+  if (! /*#__PURE__*/(0, _react.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 === _reactNative.Image) {
+    const width = resolveWidth(elementStyle.width, '100%');
+    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 120;
+    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonLoader.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 === _reactNative.Text) {
+    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
+    const width = resolveWidth(elementStyle.width, '85%');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonLoader.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__*/(0, _react.cloneElement)(element, {
+      key: `${keyHint}-w`
+    }, skeletonizeNode(props.children, variant, speed, `${keyHint}-c`));
+  }
+
+  // Leaf <View /> with explicit dimensions → skeleton block
+  if (elementType === _reactNative.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__*/(0, _jsxRuntime.jsx)(_SkeletonLoader.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__*/(0, _react.cloneElement)(element, {
+    key: `${keyHint}-leaf`
+  });
+};
+const SkeletonContent = ({
+  loading,
+  children,
+  variant = 'shimmer',
+  speed = 'normal',
+  mode = 'auto',
+  style,
+  testID
+}) => {
+  if (!loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: children
+    });
+  }
+  if (mode === 'block') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockSkeleton, {
+      style: style,
+      testID: testID,
+      variant: variant,
+      speed: speed,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    children: skeletonizeNode(children, variant, speed)
+  });
+};
+exports.SkeletonContent = SkeletonContent;
+SkeletonContent.displayName = 'SkeletonContent';
+const BlockSkeleton = ({
+  children,
+  variant,
+  speed,
+  style,
+  testID
+}) => {
+  const [size, setSize] = (0, _react.useState)(null);
+  const onLayout = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (!size || size.width !== width || size.height !== height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    onLayout: onLayout,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        opacity: 0
+      },
+      pointerEvents: "none",
+      children: children
+    }), size != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonLoader.Skeleton, {
+        width: size.width,
+        height: size.height,
+        radius: "md",
+        variant: variant,
+        speed: speed
+      })
+    }) : null]
+  });
+};
+var _default = exports.default = SkeletonContent;
+//# sourceMappingURL=SkeletonContent.js.map

package/lib/commonjs/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,311 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkeletonText = exports.SkeletonListItem = exports.SkeletonCircle = exports.SkeletonCard = exports.SkeletonAvatar = exports.Skeleton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const borderRadius = resolveRadius(theme, radius);
+  const resolvedWidth = resolveWidth(width);
+  const resolvedHeight = _index2.Responsive.size(height);
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    progress.setValue(0);
+    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
+    const animation = variant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(progress, {
+      toValue: 0,
+      duration: duration / 2,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    })])) : _reactNative.Animated.loop(_reactNative.Animated.timing(progress, {
+      toValue: 1,
+      duration,
+      easing: _reactNative.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 = (0, _react.useMemo)(() => {
+    if (variant === 'pulse') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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
+  });
+};
+exports.Skeleton = Skeleton;
+Skeleton.displayName = 'Skeleton';
+const SkeletonCircle = ({
+  size,
+  style,
+  ...rest
+}) => {
+  const diameter = _index2.Responsive.size(size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+    ...rest,
+    width: diameter,
+    height: size,
+    radius: "full",
+    style: [{
+      width: diameter,
+      height: diameter,
+      borderRadius: diameter / 2
+    }, style]
+  });
+};
+exports.SkeletonCircle = SkeletonCircle;
+SkeletonCircle.displayName = 'SkeletonCircle';
+const SkeletonText = ({
+  lines = 3,
+  lastLineWidth = '60%',
+  spacing,
+  fontSize = 14,
+  variant,
+  speed,
+  radius = 'sm',
+  width = '100%',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const gap = spacing ?? theme.spacing.xs;
+  const lineHeight = _index2.Responsive.font(fontSize);
+  const safeLines = Math.max(1, lines);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(Skeleton, {
+        width: lineWidth,
+        height: lineHeight,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        style: index < safeLines - 1 ? {
+          marginBottom: gap
+        } : undefined
+      }, index);
+    })
+  });
+};
+exports.SkeletonText = SkeletonText;
+SkeletonText.displayName = 'SkeletonText';
+const SkeletonAvatar = ({
+  size = 'md',
+  ...rest
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonCircle, {
+    ...rest,
+    size: AVATAR_SIZE[size]
+  });
+};
+exports.SkeletonAvatar = SkeletonAvatar;
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+const SkeletonCard = ({
+  variant,
+  speed,
+  radius = 'md',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      padding: theme.spacing.md
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: theme.spacing.md
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonAvatar, {
+        size: "md",
+        variant: variant,
+        speed: speed
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          marginLeft: theme.spacing.sm
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+          width: "60%",
+          height: 14,
+          radius: radius,
+          variant: variant,
+          speed: speed,
+          style: {
+            marginBottom: theme.spacing.xs
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+          width: "40%",
+          height: 12,
+          radius: radius,
+          variant: variant,
+          speed: speed
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonText, {
+      lines: 2,
+      fontSize: 14,
+      variant: variant,
+      speed: speed,
+      radius: radius
+    })]
+  });
+};
+exports.SkeletonCard = SkeletonCard;
+SkeletonCard.displayName = 'SkeletonCard';
+const SkeletonListItem = ({
+  avatarSize = 'md',
+  variant,
+  speed,
+  radius = 'sm',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonAvatar, {
+      size: avatarSize,
+      variant: variant,
+      speed: speed
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1,
+        marginLeft: theme.spacing.sm
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+        width: "70%",
+        height: 14,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+        width: "45%",
+        height: 12,
+        radius: radius,
+        variant: variant,
+        speed: speed
+      })]
+    })]
+  });
+};
+exports.SkeletonListItem = SkeletonListItem;
+SkeletonListItem.displayName = 'SkeletonListItem';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  base: {
+    overflow: 'hidden'
+  },
+  shimmer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    opacity: 0.55
+  }
+});
+var _default = exports.default = Skeleton;
+//# sourceMappingURL=SkeletonLoader.js.map

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkeletonAvatar", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.SkeletonAvatar;
+  }
+});
+Object.defineProperty(exports, "SkeletonCard", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.SkeletonCard;
+  }
+});
+Object.defineProperty(exports, "SkeletonCircle", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.SkeletonCircle;
+  }
+});
+Object.defineProperty(exports, "SkeletonContent", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonContent.SkeletonContent;
+  }
+});
+Object.defineProperty(exports, "SkeletonListItem", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.SkeletonListItem;
+  }
+});
+Object.defineProperty(exports, "SkeletonText", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.SkeletonText;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonLoader.default;
+  }
+});
+var _SkeletonLoader = _interopRequireWildcard(require("./SkeletonLoader.js"));
+var _SkeletonContent = require("./SkeletonContent.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map