@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Accordion/Accordion.js

@@ -0,0 +1,325 @@
+"use strict";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AccordionGroupContext = /*#__PURE__*/createContext(null);
+const useAccordionGroup = () => useContext(AccordionGroupContext);
+const AccordionGroup = ({
+  children,
+  allowMultiple = false,
+  defaultExpandedKeys,
+  expandedKeys: expandedKeysProp,
+  onChange,
+  style,
+  testID
+}) => {
+  const isControlled = expandedKeysProp !== undefined;
+  const [internalKeys, setInternalKeys] = useState(defaultExpandedKeys ?? []);
+  const keys = isControlled ? expandedKeysProp : internalKeys;
+  const setKeys = useCallback(next => {
+    if (!isControlled) {
+      setInternalKeys(next);
+    }
+    onChange?.(next);
+  }, [isControlled, onChange]);
+  const toggle = useCallback(id => {
+    const isOpen = keys.includes(id);
+    let next;
+    if (isOpen) {
+      next = keys.filter(k => k !== id);
+    } else if (allowMultiple) {
+      next = [...keys, id];
+    } else {
+      next = [id];
+    }
+    setKeys(next);
+  }, [keys, allowMultiple, setKeys]);
+  const isExpanded = useCallback(id => keys.includes(id), [keys]);
+  const ctx = useMemo(() => ({
+    isExpanded,
+    toggle,
+    allowMultiple
+  }), [isExpanded, toggle, allowMultiple]);
+  return /*#__PURE__*/_jsx(AccordionGroupContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      children: children
+    })
+  });
+};
+AccordionGroup.displayName = 'AccordionGroup';
+const Chevron = ({
+  rotate,
+  color
+}) => /*#__PURE__*/_jsx(Animated.Text, {
+  style: [chevronStyles.icon, {
+    color,
+    transform: [{
+      rotate
+    }]
+  }],
+  accessible: false,
+  children: '▾'
+});
+const chevronStyles = StyleSheet.create({
+  icon: {
+    fontSize: 14,
+    lineHeight: 14,
+    includeFontPadding: false
+  }
+});
+const Accordion = props => {
+  const {
+    title,
+    children,
+    id,
+    expanded: expandedProp,
+    defaultExpanded = false,
+    onChange,
+    icon,
+    disabled = false,
+    variant = 'plain',
+    accessibilityLabel,
+    style,
+    headerStyle,
+    contentStyle,
+    contentWrapperStyle,
+    containerStyle,
+    testID,
+    loading = false,
+    haptic
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const group = useAccordionGroup();
+  const isControlled = expandedProp !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const groupExpanded = group && id ? group.isExpanded(id) : null;
+  const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
+  const [measuredHeight, setMeasuredHeight] = useState(null);
+  const heightAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const opacityAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const rotateAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const lastExpandedRef = useRef(expanded);
+  useEffect(() => {
+    // Skip animation when state matches the previous value (e.g. on mount).
+    if (lastExpandedRef.current === expanded) {
+      return;
+    }
+    lastExpandedRef.current = expanded;
+    const anim = Animated.parallel([Animated.timing(heightAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }),
+    // Opacity & rotate run alongside the height interpolation (which must
+    // use the JS driver). Driving them on JS too keeps everything in lockstep
+    // with no driver-mixing warnings, and is fine for two small properties.
+    Animated.timing(opacityAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.timing(rotateAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
+  const onContentLayout = useCallback(e => {
+    const h = e.nativeEvent.layout.height;
+    if (h > 0 && h !== measuredHeight) {
+      setMeasuredHeight(h);
+    }
+  }, [measuredHeight]);
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (group && id) {
+      group.toggle(id);
+      onChange?.(!expanded);
+      return;
+    }
+    if (!isControlled) {
+      setInternalExpanded(!expanded);
+    }
+    onChange?.(!expanded);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+  const animatedHeight = measuredHeight === null ? undefined : heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, measuredHeight]
+  });
+  const cardStyle = variant === 'card' ? [styles.card, theme.shadows.sm, {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.md
+  }] : null;
+  if (loading) {
+    return /*#__PURE__*/_jsx(AccordionSkeleton, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [cardStyle, style, containerStyle],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: handlePress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        expanded,
+        disabled
+      },
+      style: ({
+        pressed
+      }) => [styles.header, headerStyle, {
+        opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+      }],
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconLeft,
+        children: icon
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: theme.typography.fontWeight.semibold
+        }],
+        numberOfLines: 2,
+        children: title
+      }), /*#__PURE__*/_jsx(Chevron, {
+        rotate: rotate,
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+      })]
+    }), measuredHeight === null ? /*#__PURE__*/_jsx(View, {
+      style: styles.measurer,
+      pointerEvents: "none",
+      onLayout: onContentLayout,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.contentWrapper, measuredHeight === null ? {
+        height: 0,
+        opacity: 0
+      } : {
+        height: animatedHeight,
+        opacity: opacityAnim
+      }, contentWrapperStyle]
+      // Re-measure if children change size by listening to layout of inner
+      ,
+      children: /*#__PURE__*/_jsx(View, {
+        onLayout: onContentLayout,
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    })]
+  });
+};
+Accordion.displayName = 'Accordion';
+
+/**
+ * Placeholder shape for `<Accordion>`. Header pill with a title-line
+ * skeleton; content is collapsed (matches the closed-by-default behaviour).
+ */
+const AccordionSkeleton = ({
+  variant = 'plain',
+  style
+}) => {
+  const theme = useTheme();
+  const isCard = variant === 'card';
+  return /*#__PURE__*/_jsx(View, {
+    style: [isCard ? {
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md
+    } : {
+      paddingVertical: theme.spacing.sm
+    }, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18,
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        width: 16,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginLeft: theme.spacing.sm
+        }
+      })]
+    })
+  });
+};
+AccordionSkeleton.displayName = 'AccordionSkeleton';
+Accordion.Skeleton = AccordionSkeleton;
+
+// Suppress unused warnings on platforms that don't support LayoutAnimation
+void LayoutAnimation;
+const buildStyles = theme => StyleSheet.create({
+  card: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.components.accordion?.cardPaddingVertical ?? 4,
+    marginVertical: theme.spacing.xs
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.spacing.sm
+  },
+  iconLeft: {
+    marginRight: theme.spacing.sm
+  },
+  title: {
+    flex: 1
+  },
+  contentWrapper: {
+    overflow: 'hidden'
+  },
+  content: {
+    paddingBottom: theme.spacing.sm
+  },
+  measurer: {
+    position: 'absolute',
+    opacity: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: -1
+  }
+});
+export { Accordion, AccordionGroup };
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Accordion, AccordionGroup, default } from "./Accordion.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import React from 'react';
+import Animated, { FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { useReducedMotion } from "../../hooks/index.js";
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const reduceMotion = useReducedMotion();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) {
+    return null;
+  }
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = ZoomIn.duration(dur);
+        exiting = ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = FadeInUp.duration(dur);
+        exiting = FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = FadeInDown.duration(dur);
+        exiting = FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = FadeIn.duration(dur);
+        exiting = FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+AnimatePresence.displayName = 'AnimatePresence';
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { AnimatePresence } from "./AnimatePresence.js";
+//# sourceMappingURL=index.js.map