@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Banner/Banner.js

@@ -0,0 +1,391 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { Skeleton, SkeletonText } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Banner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    message,
+    variant = 'info',
+    icon,
+    actions,
+    dismissible = false,
+    onDismiss,
+    haptic,
+    visible = true,
+    animateMount = true,
+    loading = false,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    iconCircleStyle,
+    tintBarStyle,
+    closeButtonStyle,
+    actionButtonStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const translateY = useRef(createAnimatedValue(animateMount && visible ? -20 : 0)).current;
+  const opacity = useRef(createAnimatedValue(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const [mounted, setMounted] = useState(visible);
+  const isFirstRun = useRef(true);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: runs on `visible` alone — adding `mounted` re-runs this effect after its own setMounted(false) and replays the enter animation
+  useEffect(() => {
+    // Skip running an animation on first mount if animateMount is false.
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      if (!animateMount) {
+        return;
+      }
+    }
+    let anim;
+    if (visible) {
+      setMounted(true);
+      anim = Animated.parallel([Animated.timing(translateY, {
+        toValue: 0,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      })]);
+      anim.start();
+    } else if (mounted) {
+      anim = Animated.parallel([Animated.timing(translateY, {
+        toValue: -20,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]);
+      anim.start(() => {
+        setMounted(false);
+      });
+    }
+    return () => anim?.stop();
+  }, [visible]);
+  if (!mounted) {
+    return null;
+  }
+  const safeTitle = title ?? ' ';
+  const safeMessageString = typeof message === 'string' ? message ?? ' ' : '';
+  const renderIcon = () => {
+    if (icon === false) {
+      return null;
+    }
+    if (icon) {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.iconWrap,
+        children: icon
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        backgroundColor: tint.bar + '22'
+      }, iconCircleStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.iconGlyph, {
+          color: tint.glyphColor
+        }],
+        accessible: false,
+        children: tint.glyph
+      })
+    });
+  };
+  const messageString = typeof message === 'string' ? message : '';
+  const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
+  const liveRegion = variant === 'error' ? 'assertive' : 'polite';
+  const rendered = /*#__PURE__*/_jsxs(Animated.View, {
+    ref: ref,
+    accessibilityRole: 'alert',
+    accessibilityLiveRegion: liveRegion,
+    accessibilityLabel: builtA11y,
+    testID: testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style, containerStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.tintBar, {
+        backgroundColor: tint.bar
+      }, tintBarStyle]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
+        style: styles.textBlock,
+        children: [title || loading ? /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            fontWeight: theme.typography.fontWeight.semibold,
+            lineHeight: 20
+          },
+          numberOfLines: 2,
+          children: safeTitle
+        }) : null, typeof message === 'string' || loading ? /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm,
+            lineHeight: 18,
+            marginTop: title ? 2 : 0
+          },
+          children: safeMessageString || ' '
+        }) : /*#__PURE__*/_jsx(View, {
+          style: {
+            marginTop: title ? 2 : 0
+          },
+          children: message
+        })]
+      }), dismissible ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss banner",
+        onPress: () => {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) {
+            triggerHaptic(h);
+          }
+          onDismiss?.();
+        },
+        hitSlop: 8,
+        style: ({
+          pressed
+        }) => [styles.closeBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }, closeButtonStyle],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: theme.components.banner?.closeGlyphFontSize ?? 18,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: 18
+          },
+          accessible: false,
+          children: "\xD7"
+        })
+      }) : null]
+    }), actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.actionsRow,
+      children: actions.map((action, idx) => {
+        const isPrimary = (action.tone ?? 'primary') === 'primary';
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: action.label,
+          onPress: () => {
+            const h = resolveHaptic(haptic, 'selection');
+            if (h) {
+              triggerHaptic(h);
+            }
+            action.onPress();
+          },
+          style: ({
+            pressed
+          }) => [styles.actionBtn, {
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }, actionButtonStyle],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
+              fontSize: theme.typography.fontSize.sm,
+              fontWeight: theme.typography.fontWeight.semibold
+            },
+            numberOfLines: 1,
+            children: action.label
+          })
+        }, `${action.label}-${idx}`);
+      })
+    }) : null]
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(BannerSkeleton, {
+      ...props
+    });
+  }
+  return rendered;
+});
+Banner.displayName = 'Banner';
+
+/**
+ * Placeholder shape for `<Banner>`. Keeps the icon circle on the left and
+ * shows title + 1-2 message lines + optional action button row. Outer
+ * container retains the elevated background so the banner footprint
+ * doesn't shift when it loads.
+ */
+const BannerSkeleton = ({
+  title,
+  actions,
+  icon,
+  containerStyle,
+  style
+}) => {
+  const theme = useTheme();
+  const showIcon = icon !== false;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      borderWidth: 1,
+      borderColor: theme.colors.border.primary
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [showIcon ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginRight: theme.spacing.sm
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        shape: "circle",
+        width: 32,
+        height: 32
+      })
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [title !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "55%",
+        height: 16,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }) : null, /*#__PURE__*/_jsx(SkeletonText, {
+        lines: 2,
+        fontSize: 13,
+        lastLineWidth: "70%"
+      }), actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          marginTop: theme.spacing.sm
+        },
+        children: actions.map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+          width: 72,
+          height: 28,
+          shape: "rounded",
+          style: {
+            marginRight: theme.spacing.sm
+          }
+        }, `sk-banner-action-${i}`))
+      }) : null]
+    })]
+  });
+};
+BannerSkeleton.displayName = 'BannerSkeleton';
+Banner.Skeleton = BannerSkeleton;
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        bar: theme.colors.success,
+        glyphColor: theme.colors.success,
+        glyph: '✓'
+      };
+    case 'warning':
+      return {
+        bar: theme.colors.warning,
+        glyphColor: theme.colors.warning,
+        glyph: '⚠'
+      };
+    case 'error':
+      return {
+        bar: theme.colors.error,
+        glyphColor: theme.colors.error,
+        glyph: '✗'
+      };
+    case 'neutral':
+      return {
+        bar: theme.colors.text.tertiary,
+        glyphColor: theme.colors.text.secondary,
+        glyph: 'i'
+      };
+    case 'info':
+    default:
+      return {
+        bar: theme.colors.primary,
+        glyphColor: theme.colors.primary,
+        glyph: 'i'
+      };
+  }
+};
+const buildStyles = theme => {
+  const iconCircleSize = theme.components.banner?.iconCircleSize ?? 28;
+  const closeButtonSize = theme.components.banner?.closeButtonSize ?? 28;
+  return StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      paddingLeft: theme.components.banner?.containerPaddingLeft ?? theme.spacing.md
+    },
+    tintBar: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: theme.components.banner?.tintBarWidth ?? 4
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start'
+    },
+    iconWrap: {
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconCircle: {
+      width: iconCircleSize,
+      height: iconCircleSize,
+      borderRadius: theme.components.banner?.iconCircleRadius ?? iconCircleSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconGlyph: {
+      fontSize: theme.components.banner?.iconGlyphFontSize ?? 15,
+      fontWeight: '700',
+      lineHeight: theme.components.banner?.iconGlyphLineHeight ?? 17
+    },
+    textBlock: {
+      flex: 1,
+      paddingRight: theme.components.banner?.textBlockPaddingRight ?? theme.spacing.xs
+    },
+    closeBtn: {
+      width: closeButtonSize,
+      height: closeButtonSize,
+      borderRadius: theme.components.banner?.closeButtonRadius ?? closeButtonSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.components.banner?.closeButtonMarginLeft ?? theme.spacing.xxs ?? 4
+    },
+    actionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      marginTop: theme.components.banner?.actionsRowMarginTop ?? theme.spacing.xs,
+      gap: theme.components.banner?.actionsRowGap ?? 4
+    },
+    actionBtn: {
+      paddingHorizontal: theme.components.banner?.actionButtonPaddingHorizontal ?? theme.spacing.sm,
+      paddingVertical: theme.components.banner?.actionButtonPaddingVertical ?? 6,
+      borderRadius: theme.components.banner?.actionButtonRadius ?? theme.radius.sm
+    }
+  });
+};
+export { Banner };
+export default Banner;
+//# sourceMappingURL=Banner.js.map

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

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