fluent-styles 1.54.0 → 1.55.0

package/src/notification/index.tsx

@@ -0,0 +1,189 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import {
+  Animated,
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from 'react-native'
+import {
+  ComponentTheme,
+  resolveTheme,
+  NotificationColors,
+  NOTIFICATION_DARK,
+  NOTIFICATION_LIGHT,
+} from '../utiles/theme'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type NotificationProps = {
+  title:         string
+  body:          string
+  avatar?:       ImageSourcePropType
+  initials?:     string
+  source?:       string
+  timestamp?:    string
+  actionLabel?:  string
+  onAction?:     () => void
+  onDismiss?:    () => void
+  duration?:     number
+  theme?:        ComponentTheme
+  colors?:       Partial<NotificationColors>
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const Notification: React.FC<NotificationProps> = ({
+  title,
+  body,
+  avatar,
+  initials,
+  source,
+  timestamp,
+  actionLabel,
+  onAction,
+  onDismiss,
+  duration   = 5000,
+  theme      = 'dark',
+  colors: colorOverrides,
+}) => {
+  const deviceScheme = useColorScheme()
+
+  const colors = useMemo<NotificationColors>(() => {
+    const base = resolveTheme(theme, deviceScheme) === 'light'
+      ? NOTIFICATION_LIGHT
+      : NOTIFICATION_DARK
+    return colorOverrides ? { ...base, ...colorOverrides } : base
+  }, [theme, deviceScheme, colorOverrides])
+
+  // ── Animation ────────────────────────────────────────────────────────────
+  const translateX   = useRef(new Animated.Value(360)).current
+  const opacity      = useRef(new Animated.Value(0)).current
+  const isDismissing = useRef(false)
+
+  const onDismissRef = useRef(onDismiss)
+  useEffect(() => { onDismissRef.current = onDismiss }, [onDismiss])
+
+  const dismiss = useCallback(() => {
+    if (isDismissing.current) return
+    isDismissing.current = true
+    Animated.parallel([
+      Animated.timing(translateX, { toValue: 360, duration: 260, useNativeDriver: true }),
+      Animated.timing(opacity,    { toValue: 0,   duration: 200, useNativeDriver: true }),
+    ]).start(() => onDismissRef.current?.())
+  }, [translateX, opacity])
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 22, stiffness: 250 }),
+      Animated.timing(opacity,    { toValue: 1, duration: 180, useNativeDriver: true }),
+    ]).start()
+    if (duration > 0) {
+      const t = setTimeout(dismiss, duration)
+      return () => clearTimeout(t)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleAction = useCallback(() => {
+    onAction?.()
+    dismiss()
+  }, [onAction, dismiss])
+
+  // ── Render ───────────────────────────────────────────────────────────────
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: colors.background, borderColor: colors.border, opacity, transform: [{ translateX }] },
+      ]}
+    >
+      {/* Avatar */}
+      <View style={styles.avatarWrap}>
+        {avatar ? (
+          <Image source={avatar} style={styles.avatarImage} />
+        ) : (
+          <View style={[styles.avatarFallback, { backgroundColor: colors.avatarBg, borderColor: colors.avatarBorder }]}>
+            <Text style={[styles.avatarInitials, { color: colors.avatarInitials }]}>{initials ?? '?'}</Text>
+          </View>
+        )}
+      </View>
+
+      {/* Body */}
+      <View style={styles.content}>
+        {source ? (
+          <Text style={[styles.source, { color: colors.source }]} numberOfLines={1}>{source}</Text>
+        ) : null}
+        <View style={styles.titleRow}>
+          <Text style={[styles.title, { color: colors.title }]} numberOfLines={1}>{title}</Text>
+          {timestamp ? (
+            <Text style={[styles.timestamp, { color: colors.timestamp }]}>{timestamp}</Text>
+          ) : null}
+        </View>
+        <Text style={[styles.body, { color: colors.body }]} numberOfLines={2}>{body}</Text>
+        {actionLabel ? (
+          <TouchableOpacity
+            onPress={handleAction}
+            style={[styles.actionBtn, { backgroundColor: colors.actionBg, borderColor: colors.actionBorder }]}
+          >
+            <Text style={[styles.actionLabel, { color: colors.actionLabel }]}>{actionLabel}</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      {/* Close */}
+      <TouchableOpacity
+        onPress={dismiss}
+        style={styles.closeBtn}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      >
+        <Text style={[styles.closeIcon, { color: colors.closeIcon }]}>✕</Text>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+// ─── Styles (layout only) ─────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth:   1,
+    borderRadius:  14,
+    padding:       14,
+    gap:           12,
+    width:         340,
+    shadowColor:   '#000',
+    shadowOffset:  { width: 0, height: 12 },
+    shadowOpacity: 0.18,
+    shadowRadius:  20,
+    elevation:     10,
+  },
+  avatarWrap:     { paddingTop: 2 },
+  avatarImage:    { width: 40, height: 40, borderRadius: 20 },
+  avatarFallback: {
+    width: 40, height: 40, borderRadius: 20,
+    borderWidth: 1, alignItems: 'center', justifyContent: 'center',
+  },
+  avatarInitials: { fontSize: 15, fontWeight: '700', letterSpacing: 0.5 },
+  content:        { flex: 1, gap: 3 },
+  source:         { fontSize: 11, fontWeight: '600', letterSpacing: 0.8, textTransform: 'uppercase' },
+  titleRow:       { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  title:          { fontSize: 14, fontWeight: '700', flex: 1 },
+  timestamp:      { fontSize: 11, marginLeft: 8 },
+  body:           { fontSize: 13, lineHeight: 18 },
+  actionBtn: {
+    alignSelf: 'flex-start', marginTop: 6,
+    paddingHorizontal: 12, paddingVertical: 5,
+    borderRadius: 6, borderWidth: 1,
+  },
+  actionLabel:    { fontSize: 12, fontWeight: '600' },
+  closeBtn:       { paddingTop: 2 },
+  closeIcon:      { fontSize: 12, fontWeight: '600' },
+})
+
+export { NOTIFICATION_DARK, NOTIFICATION_LIGHT }
+export type { NotificationColors }

package/src/notification/useNotification.tsx

@@ -0,0 +1,64 @@
+import { useCallback } from 'react'
+import React from 'react'
+import { usePortal } from '../portal/PortalContext'
+import { Notification, NotificationProps } from './'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type ShowOptions = Omit<NotificationProps, 'onDismiss'>
+
+type NotificationAPI = {
+  show:    (options: ShowOptions) => number
+  dismiss: (id: number) => void
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Declarative notification hook — requires a `PortalManager` ancestor.
+ *
+ * Notifications slide in from the right edge at the top of the screen and
+ * auto-dismiss after `duration` ms (default 5000).
+ *
+ * @example
+ * ```tsx
+ * const notification = useNotification()
+ *
+ * notification.show({
+ *   title: 'New message from Alex',
+ *   body:  'Hey, are you free this afternoon?',
+ *   source: 'Messages',
+ *   initials: 'AK',
+ *   timestamp: 'now',
+ *   actionLabel: 'Reply',
+ *   onAction: () => navigation.navigate('Chat'),
+ * })
+ * ```
+ */
+export function useNotification(): NotificationAPI {
+  const { mount, unmount } = usePortal()
+
+  const show = useCallback(
+    (options: ShowOptions): number => {
+      let id: number
+
+      id = mount(
+        <Notification
+          {...options}
+          onDismiss={() => unmount(id)}
+        />,
+        { position: 'top-right', offset: { x: 16, y: 56 } },
+      )
+
+      return id
+    },
+    [mount, unmount],
+  )
+
+  const dismiss = useCallback(
+    (id: number) => unmount(id),
+    [unmount],
+  )
+
+  return { show, dismiss }
+}

package/src/page/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyledSafeAreaView, StyledSafeAreaViewProps } from '../safeAreaView';
+
+type StyledPageProps = StyledSafeAreaViewProps & {
+    children?: React.ReactNode;
+}
+
+const StyledPage = ({ children, ...props }: StyledPageProps) => {
+    return (
+        <StyledSafeAreaView {...props}>
+            {children}
+        </StyledSafeAreaView>
+    )
+}
+
+StyledPage.displayName = 'StyledPage';
+
+export { StyledPage };
+export type { StyledPageProps };

package/src/popup/Popup.tsx

@@ -0,0 +1,398 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Animated,
+  BackHandler,
+  Easing,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import {
+  POPUP_COLORS_DARK,
+  POPUP_COLORS_LIGHT,
+  type PopupAnimation,
+  type PopupColors,
+  type PopupProps,
+} from './interface'
+import {
+  animatedStyle,
+  getBorderRadius,
+  getPositionStyle,
+  hiddenValue,
+  resolveAnimation,
+  visibleValue,
+} from './helpers'
+
+// ─── Close button (pure RN, no icon library) ──────────────────────────────────
+
+const CloseButton: React.FC<{
+  onPress: () => void
+  color:   string
+  bg:      string
+}> = ({ onPress, color, bg }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+    style={[close.btn, { backgroundColor: bg }]}
+    accessibilityLabel="Close"
+    accessibilityRole="button"
+  >
+    <Text style={[close.icon, { color }]}>✕</Text>
+  </TouchableOpacity>
+)
+
+const close = StyleSheet.create({
+  btn:  {
+    width: 28, height: 28, borderRadius: 14,
+    alignItems: 'center', justifyContent: 'center',
+  },
+  icon: { fontSize: 13, fontWeight: '700', lineHeight: 14 },
+})
+
+// ─── Popup ────────────────────────────────────────────────────────────────────
+
+const PopupInner: React.FC<PopupProps> = ({
+  children,
+  visible,
+
+  overlay              = true,
+  overlayColor,
+  closeOnPressOverlay  = true,
+  onPressOverlay,
+
+  position             = 'bottom',
+  animation: animProp,
+  duration             = 280,
+  spring,
+
+  round                = true,
+  roundRadius          = 20,
+
+  safeAreaBottom       = false,
+  safeAreaTop          = false,
+
+  lazyRender           = true,
+  destroyOnClose       = false,
+
+  title,
+  subtitle,
+  showHandle: showHandleProp,
+  showClose            = false,
+  onClose,
+
+  style,
+  overlayStyle,
+  headerStyle,
+  titleStyle,
+  subtitleStyle,
+
+  colors: colorOverrides,
+
+  onOpen,
+  onOpened,
+  onClosed,
+  onRequestClose,
+
+  testID,
+}) => {
+
+  // ── Colours ────────────────────────────────────────────────────────────────
+  const scheme = useColorScheme()
+  const baseColors = scheme === 'dark' ? POPUP_COLORS_DARK : POPUP_COLORS_LIGHT
+  const colors: PopupColors = useMemo(
+    () => colorOverrides ? { ...baseColors, ...colorOverrides } : baseColors,
+    [baseColors, colorOverrides],
+  )
+
+  // ── Safe area ──────────────────────────────────────────────────────────────
+  const insets = useSafeAreaInsets()
+
+  // ── Animation resolution ───────────────────────────────────────────────────
+  const animation: PopupAnimation = resolveAnimation(animProp, position)
+  const HIDDEN  = hiddenValue(animation, position)
+  const VISIBLE = visibleValue(animation)
+
+  // ── Render gate ────────────────────────────────────────────────────────────
+  const hasEverOpened = useRef(false)
+  const [mounted, setMounted] = useState(!lazyRender || visible)
+  const [modalVisible, setModalVisible] = useState(visible)
+
+  // ── Animated values ────────────────────────────────────────────────────────
+  const anim         = useRef(new Animated.Value(visible ? VISIBLE : HIDDEN)).current
+  const overlayAnim  = useRef(new Animated.Value(visible ? 1 : 0)).current
+  const isAnimating  = useRef(false)
+
+  // ── Lifecycle refs ────────────────────────────────────────────────────────
+  const onOpenedRef  = useRef(onOpened)
+  const onClosedRef  = useRef(onClosed)
+  useEffect(() => { onOpenedRef.current  = onOpened  }, [onOpened])
+  useEffect(() => { onClosedRef.current  = onClosed  }, [onClosed])
+
+  // ── Run animation ──────────────────────────────────────────────────────────
+  const runAnimation = useCallback(
+    (toVisible: boolean, onDone?: () => void) => {
+      isAnimating.current = true
+      const toValue = toVisible ? VISIBLE : HIDDEN
+
+      const makeAnim = (val: Animated.Value, target: number) => {
+        if (animation === 'none') {
+          return Animated.timing(val, {
+            toValue: target, duration: 0, useNativeDriver: val !== overlayAnim,
+          })
+        }
+
+        if (toVisible && spring) {
+          return Animated.spring(val, {
+            toValue:         target,
+            damping:         spring.damping,
+            stiffness:       spring.stiffness,
+            mass:            spring.mass ?? 1,
+            useNativeDriver: val !== overlayAnim,
+          })
+        }
+
+        return Animated.timing(val, {
+          toValue:         target,
+          duration,
+          easing:          toVisible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+          useNativeDriver: val !== overlayAnim,
+        })
+      }
+
+      Animated.parallel([
+        makeAnim(anim, toValue),
+        makeAnim(overlayAnim, toVisible ? 1 : 0),
+      ]).start(({ finished }) => {
+        isAnimating.current = false
+        if (finished) onDone?.()
+      })
+    },
+    [anim, overlayAnim, animation, duration, spring, HIDDEN, VISIBLE],
+  )
+
+  // ── Sync visible prop ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (visible) {
+      if (!mounted) setMounted(true)
+      hasEverOpened.current = true
+      setModalVisible(true)
+      onOpen?.()
+      // Give the Modal a frame to mount before animating
+      requestAnimationFrame(() => {
+        runAnimation(true, () => onOpenedRef.current?.())
+      })
+    } else {
+      runAnimation(false, () => {
+        setModalVisible(false)
+        if (destroyOnClose) {
+          setMounted(false)
+          hasEverOpened.current = false
+        }
+        onClosedRef.current?.()
+      })
+    }
+  }, [visible]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Android back button ────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!visible || Platform.OS !== 'android') return
+    const handler = BackHandler.addEventListener('hardwareBackPress', () => {
+      return onRequestClose?.() ?? false
+    })
+    return () => handler.remove()
+  }, [visible, onRequestClose])
+
+  // ── Overlay press ──────────────────────────────────────────────────────────
+  const handleOverlayPress = useCallback(() => {
+    onPressOverlay?.()
+    if (closeOnPressOverlay) onClose?.()
+  }, [onPressOverlay, closeOnPressOverlay, onClose])
+
+  // ── Handle visibility ──────────────────────────────────────────────────────
+  const showHandle = _showHandle(position, showHandleProp)
+
+  // ── Animated style for the popup surface ──────────────────────────────────
+  const popupAnimatedStyle = useMemo(
+    () => animatedStyle(animation, position, anim),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [animation, position],  // anim ref is stable
+  )
+
+  // ── Border radius ──────────────────────────────────────────────────────────
+  const radiusStyle = getBorderRadius(position, round, roundRadius)
+
+  // ── Safe area padding ──────────────────────────────────────────────────────
+  const safeStyle = {
+    paddingBottom: safeAreaBottom ? insets.bottom : 0,
+    paddingTop:    safeAreaTop    ? insets.top    : 0,
+  }
+
+  // ── Center wrapper (for center position, centers the content) ─────────────
+  const positionStyle = getPositionStyle(position)
+
+  if (!mounted && !modalVisible) return null
+
+  return (
+    <Modal
+      visible={modalVisible}
+      transparent
+      statusBarTranslucent
+      animationType="none"
+      onRequestClose={() => onRequestClose?.()}
+      testID={testID}
+    >
+      {/* ── Overlay ─────────────────────────────────────────────────── */}
+      {overlay && (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: (overlayColor as string) ?? colors.overlay, opacity: overlayAnim },
+            overlayStyle,
+          ]}
+          pointerEvents="box-none"
+        >
+          <Pressable style={StyleSheet.absoluteFill} onPress={handleOverlayPress} />
+        </Animated.View>
+      )}
+
+      {/* ── Popup surface ───────────────────────────────────────────── */}
+      <Animated.View
+        style={[
+          positionStyle,
+          popupAnimatedStyle,
+        ]}
+        pointerEvents="box-none"
+      >
+        <View
+          style={[
+            S.surface,
+            radiusStyle,
+            safeStyle,
+            { backgroundColor: colors.background },
+            style,
+          ]}
+        >
+          {/* Handle */}
+          {showHandle && (
+            <View style={[S.handle_wrap]}>
+              <View style={[S.handle, { backgroundColor: colors.handle }]} />
+            </View>
+          )}
+
+          {/* Header */}
+          {(title || subtitle || showClose) ? (
+            <View
+              style={[
+                S.header,
+                { borderBottomColor: colors.headerBorder },
+                showHandle && S.header_no_top_pad,
+                headerStyle,
+              ]}
+            >
+              <View style={S.header_text}>
+                {title ? (
+                  typeof title === 'string' ? (
+                    <Text
+                      style={[S.header_title, { color: colors.headerTitle }, titleStyle]}
+                      numberOfLines={1}
+                    >
+                      {title}
+                    </Text>
+                  ) : title
+                ) : null}
+
+                {subtitle ? (
+                  typeof subtitle === 'string' ? (
+                    <Text
+                      style={[S.header_subtitle, { color: colors.headerSubtitle }, subtitleStyle]}
+                      numberOfLines={1}
+                    >
+                      {subtitle}
+                    </Text>
+                  ) : subtitle
+                ) : null}
+              </View>
+
+              {showClose && onClose ? (
+                <CloseButton
+                  onPress={onClose}
+                  color={colors.closeIcon}
+                  bg={colors.closeIconBg}
+                />
+              ) : null}
+            </View>
+          ) : null}
+
+          {/* Body */}
+          {mounted ? children : null}
+        </View>
+      </Animated.View>
+    </Modal>
+  )
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function _showHandle(position: string, explicit?: boolean): boolean {
+  if (explicit !== undefined) return explicit
+  return position === 'bottom'
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const S = StyleSheet.create({
+  surface: {
+    overflow: 'hidden',
+  },
+  handle_wrap: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 4,
+  },
+  handle: {
+    width:        36,
+    height:       4,
+    borderRadius: 2,
+  },
+  header: {
+    flexDirection:     'row',
+    alignItems:        'center',
+    paddingHorizontal: 20,
+    paddingTop:        16,
+    paddingBottom:     14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap:               12,
+  },
+  header_no_top_pad: {
+    paddingTop: 6,
+  },
+  header_text: {
+    flex: 1,
+    gap:  3,
+  },
+  header_title: {
+    fontSize:   17,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+  header_subtitle: {
+    fontSize:   13,
+    fontWeight: '400',
+  },
+})
+
+export const Popup = memo(PopupInner)