@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,304 @@
+"use strict";
+
+/**
+ * SkeletonContent — show placeholder shapes while data is loading, then
+ * cross-fade to the real children once it arrives.
+ *
+ * Three usage patterns, listed in order of preference:
+ *
+ *   1. **Explicit placeholder** (recommended):
+ *
+ *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
+ *          <Card>{realChildren}</Card>
+ *        </SkeletonContent>
+ *
+ *      Renders `placeholder` verbatim while loading and `children` once loaded.
+ *      Most precise and predictable — what you write is exactly what shimmers.
+ *      Prefer this for any non-trivial layout.
+ *
+ *   2. **Self-describing components inside an auto-walked tree**:
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <Stepper steps={steps} />
+ *          <Card>...</Card>
+ *        </SkeletonContent>
+ *
+ *      With no `placeholder` prop, the walker substitutes each element. For
+ *      library components, the walker checks for a `Component.Skeleton` static
+ *      and replaces the element wholesale with it (the component author knows
+ *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
+ *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
+ *      on the element's own style. Good for screen-level wrappers.
+ *
+ *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <View>
+ *            <Text style={{ fontSize: 20 }}>Title</Text>
+ *            <Text>Subtitle</Text>
+ *          </View>
+ *        </SkeletonContent>
+ *
+ *      Same walker as (2) — the Text/Image/View introspection handles
+ *      primitive trees that mirror the loaded layout.
+ *
+ * Cross-fade: when `loading` flips from true to false, real children fade in
+ * over `fadeDuration` ms. The first render is guarded — content that was
+ * never in a loading state does NOT fade on mount, only the actual
+ * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
+ */
+
+import React, { Children, cloneElement, isValidElement, useEffect, useRef } from 'react';
+import { Animated, Image, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue } from "../../theme/index.js";
+import { Skeleton } from "./Skeleton.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
+import { SkeletonSkip } from "./SkeletonSkip.js";
+
+/**
+ * Components that ship their own placeholder shape declare this static. The
+ * walker looks for it before falling back to primitive introspection. The
+ * function receives the original component's props so consumer-customizable
+ * dimensions (size, count, etc.) carry through to the placeholder.
+ */
+import { jsx as _jsx, Fragment as _Fragment } 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, colors, keyHint = 'r') => {
+  if (node == null || typeof node === 'boolean') {
+    return null;
+  }
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Skeleton, {
+      shape: "text",
+      width: "60%",
+      height: 14,
+      variant: variant,
+      speed: speed,
+      colors: colors
+    }, `${keyHint}-text`);
+  }
+  if (Array.isArray(node)) {
+    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
+  }
+  if (! /*#__PURE__*/isValidElement(node)) {
+    return null;
+  }
+  const element = node;
+  const props = element.props ?? {};
+  const elementType = element.type;
+
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged.
+  if (elementType === SkeletonSkip) {
+    return /*#__PURE__*/cloneElement(element, {
+      key: `${keyHint}-skip`
+    });
+  }
+
+  // Self-describing component path. If a custom component (Stepper, Card,
+  // Banner, etc.) ships a `Skeleton` static, prefer it over the primitive
+  // walker — the component author knows the shape better than we can guess.
+  // Forwards the original props so consumer-tunable params (size, count,
+  // tone) flow through. Crucially this short-circuits the walker BEFORE
+  // it tries to recurse into custom-component children, so we never end up
+  // rendering half-real / half-placeholder UI.
+  if (typeof elementType === 'function' || typeof elementType === 'object') {
+    const SkeletonStatic = elementType.Skeleton;
+    if (SkeletonStatic) {
+      const Sk = SkeletonStatic;
+      return /*#__PURE__*/_jsx(Sk, {
+        ...props
+      }, `${keyHint}-self`);
+    }
+  }
+
+  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius.
+  if (elementType === Image) {
+    const elementStyle = flattenStyle(props.style);
+    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,
+      colors: colors,
+      style: {
+        margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
+      }
+    }, `${keyHint}-img`);
+  }
+
+  // <Text /> → text-line skeleton matching font size.
+  if (elementType === Text) {
+    const elementStyle = flattenStyle(props.style);
+    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
+    const width = resolveWidth(elementStyle.width, '85%');
+    return /*#__PURE__*/_jsx(Skeleton, {
+      shape: "text",
+      width: width,
+      height: Math.round(fontSize * 1.15),
+      variant: variant,
+      speed: speed,
+      colors: colors,
+      style: {
+        marginVertical: 2
+      }
+    }, `${keyHint}-txt`);
+  }
+
+  // Element with children → recurse, preserving the wrapper (View, Pressable,
+  // custom layouts). Runs AFTER the self-describing check so any component
+  // with `.Skeleton` is replaced wholesale.
+  if (props.children != null) {
+    return /*#__PURE__*/cloneElement(element, {
+      key: `${keyHint}-w`
+    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
+  }
+
+  // Leaf <View /> with explicit dimensions → skeleton block.
+  if (elementType === View) {
+    const elementStyle = flattenStyle(props.style);
+    if (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,
+        colors: colors
+      }, `${keyHint}-vw`);
+    }
+  }
+
+  // Opaque leaf (custom component without inspectable children and without a
+  // `.Skeleton` static) → leave as-is. Consumers should provide an explicit
+  // `placeholder` or author a `.Skeleton` static to handle these.
+  return /*#__PURE__*/cloneElement(element, {
+    key: `${keyHint}-leaf`
+  });
+};
+const SkeletonContent = ({
+  loading,
+  children,
+  placeholder,
+  variant,
+  speed,
+  count = 1,
+  colors,
+  fadeDuration,
+  style,
+  testID
+}) => {
+  const defaults = useSkeletonDefaults();
+  const resolvedFadeDuration = fadeDuration ?? defaults.fadeDuration ?? 300;
+
+  // Cross-fade: opacity goes 0 → 1 when loading just flipped off. First
+  // render is guarded with `wasLoadingRef` so already-loaded content
+  // doesn't fade in on mount.
+  const wasLoadingRef = useRef(loading);
+  const fadeAnim = useRef(createAnimatedValue(loading ? 0 : 1)).current;
+  useEffect(() => {
+    let anim;
+    if (wasLoadingRef.current && !loading) {
+      fadeAnim.setValue(0);
+      anim = Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: resolvedFadeDuration,
+        useNativeDriver: true
+      });
+      anim.start();
+    } else if (!wasLoadingRef.current && loading) {
+      // Going back into loading from loaded — snap opacity so the
+      // placeholder appears instantly when data invalidates.
+      fadeAnim.setValue(1);
+    }
+    wasLoadingRef.current = loading;
+    return () => anim?.stop();
+  }, [loading, fadeAnim, resolvedFadeDuration]);
+  if (!loading) {
+    if (resolvedFadeDuration <= 0) {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      });
+    }
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [style, {
+        opacity: fadeAnim
+      }],
+      testID: testID,
+      children: children
+    });
+  }
+
+  // Explicit placeholder path — no walker, no introspection.
+  if (placeholder !== undefined) {
+    const slots = count > 1 ? Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/_jsx(React.Fragment, {
+      children: placeholder
+    }, `sk-ph-${i}`)) : placeholder;
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      accessible: true,
+      accessibilityLabel: "Loading",
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      accessibilityLiveRegion: "polite",
+      children: slots
+    });
+  }
+
+  // Walker path — auto-substitute primitives and self-describing components.
+  const repeated = count > 1 ? Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  }, `sk-rep-${i}`)) : children;
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    accessibilityLiveRegion: "polite",
+    children: skeletonizeNode(repeated, variant, speed, colors)
+  });
+};
+SkeletonContent.displayName = 'SkeletonContent';
+export { SkeletonContent };
+export default SkeletonContent;
+//# sourceMappingURL=SkeletonContent.js.map

package/lib/module/components/Skeleton/SkeletonList.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import React from 'react';
+import { FlatList, View } from 'react-native';
+import { SkeletonContent } from "./SkeletonContent.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
+ * `loading` is true, then transitions to a real `<FlatList>` of `data` once loaded.
+ *
+ * Solves the "FlatList with empty data renders nothing" problem so consumer screens
+ * don't have to maintain a separate placeholder branch.
+ *
+ * Inside a vertical ScrollView, pass `scrollEnabled={false}` and let the outer
+ * view scroll: once `loading` flips false a real VirtualizedList mounts, and RN
+ * logs a nesting error for a same-orientation list — which only shows up after
+ * the data arrives, never on first render.
+ *
+ * @example
+ * <SkeletonList
+ *   loading={isLoading}
+ *   data={sites}
+ *   renderItem={({ item }) => <SiteCard item={item} />}
+ *   renderPlaceholder={() => <SiteCard loading />}
+ *   placeholderCount={3}
+ *   horizontal
+ * />
+ */
+function SkeletonListInner(props) {
+  const {
+    loading,
+    data,
+    renderItem,
+    renderPlaceholder,
+    placeholderCount,
+    variant,
+    speed,
+    colors,
+    placeholderContainerStyle,
+    horizontal,
+    contentContainerStyle,
+    style,
+    testID,
+    ...rest
+  } = props;
+  const defaults = useSkeletonDefaults();
+  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
+  if (loading) {
+    const slots = Array.from({
+      length: Math.max(0, resolvedCount)
+    }, (_, index) => /*#__PURE__*/_jsx(React.Fragment, {
+      children: renderPlaceholder ? renderPlaceholder(index) : null
+    }, `sk-list-${index}`));
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      variant: variant,
+      speed: speed,
+      colors: colors,
+      style: style,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
+        children: slots
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: data ?? [],
+    renderItem: renderItem,
+    horizontal: horizontal,
+    contentContainerStyle: contentContainerStyle,
+    style: style,
+    testID: testID,
+    ...rest
+  });
+}
+const styles = {
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  }
+};
+export const SkeletonList = SkeletonListInner;
+//# sourceMappingURL=SkeletonList.js.map

package/lib/module/components/Skeleton/SkeletonProvider.js

@@ -0,0 +1,106 @@
+"use strict";
+
+/**
+ * SkeletonProvider — app-level defaults for every <Skeleton> below it.
+ *
+ * Two responsibilities:
+ *   1. Broadcasts the default variant / speed / colors / radius /
+ *      placeholderCount so consumers don't repeat them per call site.
+ *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
+ *      every primitive shares a single Animated.Value — synchronized shimmer
+ *      across the whole subtree, one native-driver loop per provider.
+ *
+ * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
+ * paused and skeletons render as static dim blocks. The detection is live —
+ * if the user toggles the setting while the app is open the skeletons stop
+ * shimmering immediately.
+ */
+
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { SkeletonClockProvider } from "./SkeletonClock.js";
+
+/**
+ * Per-instance color override for a skeleton. `background` is the resting
+ * tone of the placeholder; `highlight` is the moving shimmer band (or pulse
+ * fade). Either can be omitted — missing keys fall back to the active theme.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonDefaultsContext = /*#__PURE__*/createContext({});
+export const SkeletonProvider = ({
+  children,
+  variant,
+  speed,
+  placeholderCount,
+  radius,
+  colors,
+  fadeDuration,
+  animation = 'auto'
+}) => {
+  const reduceMotion = useReduceMotion();
+  // Resolve whether the clock should actually tick. `'never'` forces off,
+  // `'always'` forces on, `'auto'` follows the OS preference.
+  const animationsEnabled = animation === 'always' ? true : animation === 'never' ? false : !reduceMotion;
+  const resolvedSpeed = speed ?? 'normal';
+  const resolvedVariant = variant ?? 'shimmer';
+  const value = useMemo(() => ({
+    variant,
+    speed,
+    placeholderCount,
+    radius,
+    colors,
+    fadeDuration,
+    animation
+  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
+  return /*#__PURE__*/_jsx(SkeletonDefaultsContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(SkeletonClockProvider, {
+      speed: resolvedSpeed,
+      variant: resolvedVariant,
+      enabled: animationsEnabled,
+      children: children
+    })
+  });
+};
+SkeletonProvider.displayName = 'SkeletonProvider';
+
+/**
+ * Read the current SkeletonProvider defaults. Returns an empty object when
+ * no provider is mounted, so the skeleton primitives still work outside of
+ * one — but without a shared clock or theme-coordinated colors.
+ */
+export const useSkeletonDefaults = () => {
+  return useContext(SkeletonDefaultsContext);
+};
+
+/**
+ * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
+ * user toggles the setting while the app is open. Used internally by
+ * `SkeletonProvider`; exposed so consumer screens can branch on it too.
+ */
+export const useReduceMotion = () => {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduce(value);
+      }
+    }).catch(() => {
+      // Some platforms / older RN versions throw if the native module is
+      // missing. Treat as "motion allowed" — degrade quietly to shimmer.
+      if (mounted) {
+        setReduce(false);
+      }
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
+      setReduce(value);
+    });
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+};
+//# sourceMappingURL=SkeletonProvider.js.map

package/lib/module/components/Skeleton/SkeletonSkip.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
+ *
+ * The walker recognizes this element type and returns its children unchanged
+ * even while `loading` is true. Use it to keep a specific Text/Image/View
+ * visible inside a skeleton block — e.g., a brand mark, a status icon, or a
+ * decorative element that should never shimmer.
+ *
+ * @example
+ *   <SkeletonContent loading>
+ *     <View style={styles.card}>
+ *       <SkeletonSkip>
+ *         <Image source={Logo} style={styles.brandMark} />
+ *       </SkeletonSkip>
+ *       <Text>Loading…</Text>
+ *     </View>
+ *   </SkeletonContent>
+ */
+export const SkeletonSkip = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
+SkeletonSkip.displayName = 'SkeletonSkip';
+//# sourceMappingURL=SkeletonSkip.js.map

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

@@ -0,0 +1,9 @@
+"use strict";
+
+export { default, Skeleton, SkeletonCircle, SkeletonText } from "./Skeleton.js";
+export { SkeletonClockProvider, useSkeletonClock } from "./SkeletonClock.js";
+export { SkeletonContent } from "./SkeletonContent.js";
+export { SkeletonList } from "./SkeletonList.js";
+export { SkeletonProvider, useReduceMotion, useSkeletonDefaults } from "./SkeletonProvider.js";
+export { SkeletonSkip } from "./SkeletonSkip.js";
+//# sourceMappingURL=index.js.map