jfs-components 0.1.25 → 0.1.30

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,14 +1,20 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import {
   Platform,
+  Text,
   View,
+  useWindowDimensions,
   type StyleProp,
+  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from 'react-native'
 import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
 } from 'react-native-reanimated'
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
@@ -17,6 +23,18 @@ import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
+// Spring config — mirrors the Drawer's bottom pop-up spring so the two
+// bottom-sheet surfaces share the exact same entrance feel (slight bounce,
+// snappy). Keep in sync with `Drawer.tsx` SPRING_CONFIG.
+const SPRING_CONFIG = {
+  damping: 32,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1,
+}
+
 export type ContentSheetProps = {
   /**
    * Sheet content. The sheet is one big slot: whatever you place here is
@@ -31,6 +49,12 @@ export type ContentSheetProps = {
    * the same theme without you wiring `modes` onto each one.
    */
   modes?: Modes
+  /**
+   * Optional title rendered in a centered, sticky header at the top of the
+   * sheet. Uses the same `drawer/title*` token family as the `Drawer` title so
+   * the two surfaces stay visually consistent.
+   */
+  title?: string
   /**
    * Keep the sheet above the on-screen keyboard. When the keyboard opens the
    * sheet rises by exactly the keyboard height; when it closes the sheet drops
@@ -63,6 +87,19 @@ export type ContentSheetProps = {
    * works in both modes.
    */
   pinToBottom?: boolean
+  /**
+   * Controls whether the sheet is on-screen. When this becomes `true` the sheet
+   * springs up from the bottom edge (off-screen → on-screen) using the same
+   * spring as the {@link Drawer} (`damping: 32`, `stiffness: 300`); when it
+   * becomes `false` it springs back down below the bottom edge. The sheet pops
+   * up on mount by default.
+   *
+   * The animation runs entirely on the UI thread via `react-native-reanimated`
+   * (no re-renders) and composes with keyboard avoidance — the entrance
+   * `translateY` and the keyboard `translateY` are summed in a single
+   * `useAnimatedStyle`. Default `true`.
+   */
+  visible?: boolean
   /** Optional style override applied to the sheet container. */
   style?: StyleProp<ViewStyle>
 } & Omit<ViewProps, 'style' | 'children'>
@@ -70,6 +107,8 @@ export type ContentSheetProps = {
 interface ContentSheetStyle {
   container: ViewStyle
   paddingBottom: number
+  headerStyle: ViewStyle
+  titleStyle: TextStyle
 }
 
 function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
@@ -81,6 +120,23 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
   const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes) as number
   const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes) as number
 
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = getVariableByName('drawer/title/color', modes) as string
+  const titleSize = getVariableByName('drawer/title/fontSize', modes) as number
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) as number
+  const titleFontFamily = getVariableByName('drawer/title/fontFamily', modes) as string
+  const titleFontWeightRaw = getVariableByName('drawer/title/fontWeight', modes)
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes) as number
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) as number
+  const titleWrapPaddingHorizontal = getVariableByName(
+    'drawer/titleWrap/padding/horizontal',
+    modes
+  ) as number
+
   return {
     container: {
       backgroundColor,
@@ -97,6 +153,20 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
       overflow: 'hidden',
     },
     paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center',
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight as TextStyle['fontWeight'],
+      textAlign: 'center',
+    },
   }
 }
 
@@ -126,10 +196,12 @@ const pinnedStyle: ViewStyle = {
 function ContentSheet({
   children,
   modes = EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
   style,
   ...rest
 }: ContentSheetProps) {
@@ -158,57 +230,115 @@ function ContentSheet({
     [pinToBottom, resolved.container, paddingBottom, style]
   )
 
+  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
+  // sheet is bottom-anchored, so a positive `translateY` equal to the window
+  // height parks it fully below the bottom edge. Springing it back to `0`
+  // produces the same bottom pop-up the Drawer uses. The shared value is
+  // initialised off-screen so the very first mount pops in (no flash).
+  const { height: windowHeight } = useWindowDimensions()
+  const entrance = useSharedValue(windowHeight)
+  useEffect(() => {
+    entrance.value = withSpring(visible ? 0 : windowHeight, SPRING_CONFIG)
+  }, [visible, windowHeight, entrance])
+
   // Switching between the keyboard-aware and plain implementation is keyed off
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
-  // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  // inside `KeyboardAwareSheet` always runs in a stable hook order. Both
+  // branches receive the `entrance` shared value so the bottom pop-up plays in
+  // every configuration.
+  const header = title ? (
+    <View style={resolved.headerStyle}>
+      <Text style={resolved.titleStyle}>{title}</Text>
+    </View>
+  ) : null
+
   if (avoidKeyboard && !IS_WEB) {
     return (
       <KeyboardAwareSheet
         style={containerStyle}
         spacing={keyboardSpacing}
+        entrance={entrance}
         {...rest}
       >
+        {header}
         {processedChildren}
       </KeyboardAwareSheet>
     )
   }
 
   return (
-    <View style={containerStyle} {...rest}>
+    <AnimatedSheet style={containerStyle} entrance={entrance} {...rest}>
+      {header}
       {processedChildren}
-    </View>
+    </AnimatedSheet>
   )
 }
 
 type KeyboardAwareSheetProps = {
   style: StyleProp<ViewStyle>
   spacing: number
+  entrance: SharedValue<number>
+  children: React.ReactNode
+} & Omit<ViewProps, 'style' | 'children'>
+
+type AnimatedSheetProps = {
+  style: StyleProp<ViewStyle>
+  entrance: SharedValue<number>
   children: React.ReactNode
 } & Omit<ViewProps, 'style' | 'children'>
 
 /**
  * Native-only wrapper that lifts the sheet by the live keyboard height. The
  * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
- * sheet tracks the keyboard frame-for-frame without any JS work.
+ * sheet tracks the keyboard frame-for-frame without any JS work. The keyboard
+ * offset is summed with the entrance `translateY` (the bottom pop-up) inside a
+ * single `useAnimatedStyle` so both motions stay on the UI thread and never
+ * fight each other.
  */
 function KeyboardAwareSheet({
   style,
   spacing,
+  entrance,
   children,
   ...rest
 }: KeyboardAwareSheetProps) {
   const keyboard = useAnimatedKeyboard()
 
-  const keyboardStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     const height = keyboard.height.value
+    const keyboardOffset = height > 0 ? -(height + spacing) : 0
+    return {
+      transform: [{ translateY: entrance.value + keyboardOffset }],
+    }
+  })
+
+  return (
+    <Animated.View style={[style, animatedStyle]} {...rest}>
+      {children}
+    </Animated.View>
+  )
+}
+
+/**
+ * Entrance-only animated sheet (web, or when keyboard avoidance is disabled).
+ * Applies the same bottom pop-up `translateY` as `KeyboardAwareSheet`, minus
+ * the keyboard offset.
+ */
+function AnimatedSheet({
+  style,
+  entrance,
+  children,
+  ...rest
+}: AnimatedSheetProps) {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: height > 0 ? -(height + spacing) : 0 }],
+      transform: [{ translateY: entrance.value }],
     }
   })
 
   return (
-    <Animated.View style={[style, keyboardStyle]} {...rest}>
+    <Animated.View style={[style, animatedStyle]} {...rest}>
       {children}
     </Animated.View>
   )

package/src/components/FormUpload/Additem.tsx

@@ -0,0 +1,262 @@
+import React, { useMemo } from 'react'
+import { Pressable, View, type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Image from '../Image/Image'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import type { Modes } from '../../design-tokens'
+
+export type PickedAsset = {
+  /** URI to the selected file (image, video, or document). */
+  uri: string
+  /** Original file name, when available. */
+  name?: string
+  /** MIME type, when available. */
+  type?: string
+  /** File size in bytes, when available. */
+  size?: number
+  /** Image/video width in pixels, when available. */
+  width?: number
+  /** Image/video height in pixels, when available. */
+  height?: number
+}
+
+export type AdditemPickerResult = {
+  /** `true` when the user cancelled the picker. */
+  didCancel?: boolean
+  /** Selected assets. Empty when cancelled. */
+  assets: PickedAsset[]
+  /** Native error message, when something went wrong. */
+  error?: string
+}
+
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+export type AdditemPicker = () => Promise<AdditemPickerResult>
+
+export type AdditemState = 'empty' | 'preview'
+
+export type AdditemProps = {
+  /**
+   * Visual state of the item.
+   * - `'empty'` — shows the add/upload icon (default).
+   * - `'preview'` — shows `imageSource` and a remove icon overlay.
+   */
+  state?: AdditemState
+  /**
+   * Image to preview when `state` is `'preview'`. Accepts the same shapes as
+   * the library's `Image` component (remote URI string, `{ uri }`, or `require()`).
+   */
+  imageSource?: ImageSourcePropType | string | undefined
+  /**
+   * Called when the cell is pressed. In `'empty'` mode this is typically where
+   * the picker is launched; in `'preview'` mode it can open a preview/lightbox.
+   */
+  onPress?: () => void
+  /**
+   * Called when the remove icon overlay is pressed in `'preview'` mode.
+   * Receives the press event so the parent can stop propagation if needed.
+   */
+  onRemove?: () => void
+  /**
+   * Optional picker to invoke when the empty cell is pressed. When provided,
+   * `onPress` is ignored for the empty state and the cell becomes a real
+   * upload trigger that resolves with picked assets via `onAssetsPicked`.
+   */
+  picker?: AdditemPicker
+  /**
+   * Called after a successful picker invocation with the selected assets.
+   */
+  onAssetsPicked?: (assets: PickedAsset[]) => void
+  /**
+   * Modes for design-token resolution. Defaults to Neutral / Low / Icon Capsule
+   * Size S for the inner `IconCapsule` icons; any key supplied here overrides
+   * those defaults.
+   */
+  modes?: Modes
+  /**
+   * Accessibility label. Defaults to a descriptive label based on state.
+   */
+  accessibilityLabel?: string
+  /**
+   * Disables press interaction. Also dims the cell.
+   */
+  isDisabled?: boolean
+  /** Test identifier. */
+  testID?: string
+}
+
+interface AdditemTokens {
+  backgroundColor: string
+  borderRadius: number
+  paddingHorizontal: number
+  paddingVertical: number
+  size: number
+}
+
+function toNumber(value: unknown, fallback: number): number {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return fallback
+}
+
+function resolveAdditemTokens(modes: Modes): AdditemTokens {
+  const backgroundColor = getVariableByName('compareCardItem/background', modes) as string
+  const borderRadius = toNumber(getVariableByName('compareCardItem/radius', modes), 8)
+  const paddingHorizontal = toNumber(getVariableByName('compareCardItem/padding/horizontal', modes), 6)
+  const paddingVertical = toNumber(getVariableByName('compareCardItem/padding/vertical', modes), 8)
+  // The Figma design uses a fixed 44 × 44 dp cell. There is no
+  // `compareCardItem/size` token in the variables JSON, so we keep the size
+  // constant to match the design exactly.
+  const size = 44
+
+  return {
+    backgroundColor,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    size,
+  }
+}
+
+/** Figma defaults for the inner `IconCapsule` icons. Overridable via `modes`. */
+const ADDITEM_DEFAULT_MODES: Readonly<Record<string, string>> = Object.freeze({
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Low',
+  'Icon Capsule Size': 'S',
+})
+
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+function Additem({
+  state = 'empty',
+  imageSource,
+  onPress,
+  onRemove,
+  picker,
+  onAssetsPicked,
+  modes: propModes = EMPTY_MODES,
+  accessibilityLabel,
+  isDisabled = false,
+  testID,
+}: AdditemProps) {
+  const { modes: globalModes } = useTokens()
+
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? ADDITEM_DEFAULT_MODES
+        : { ...ADDITEM_DEFAULT_MODES, ...globalModes, ...propModes },
+    [globalModes, propModes],
+  )
+
+  const tokens = useMemo(() => resolveAdditemTokens(modes), [modes])
+
+  const handlePress = React.useCallback(async () => {
+    if (isDisabled) return
+
+    if (state === 'empty' && picker) {
+      try {
+        const result = await picker()
+        if (result.didCancel) return
+        if (result.error) {
+          if (__DEV__) {
+            console.warn('[Additem] picker error:', result.error)
+          }
+          return
+        }
+        if (result.assets.length > 0) {
+          onAssetsPicked?.(result.assets)
+        }
+      } catch (err) {
+        if (__DEV__) {
+          console.warn('[Additem] unexpected picker error:', err)
+        }
+      }
+      return
+    }
+
+    onPress?.()
+  }, [isDisabled, onPress, onAssetsPicked, picker, state])
+
+  const handleRemove = React.useCallback(() => {
+    if (!isDisabled) {
+      onRemove?.()
+    }
+  }, [isDisabled, onRemove])
+
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (state === 'empty' ? 'Add attachment' : 'Attachment preview')
+
+  const containerStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      width: tokens.size,
+      height: tokens.size,
+      borderRadius: tokens.borderRadius,
+      backgroundColor: tokens.backgroundColor,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      opacity: isDisabled ? 0.5 : 1,
+    }),
+    [tokens, isDisabled],
+  )
+
+  const isPreview = state === 'preview'
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ disabled: isDisabled }}
+      testID={testID}
+      style={containerStyle}
+    >
+      {isPreview ? (
+        <>
+          <Image
+            imageSource={imageSource}
+            width="100%"
+            height={tokens.size - tokens.paddingVertical * 2}
+            resizeMode="cover"
+            borderRadius={tokens.borderRadius - 2}
+          />
+          {onRemove != null && (
+            <View style={{ position: 'absolute', top: 2, right: 2 }}>
+              <IconCapsule
+                iconName="ic_close"
+                modes={modes}
+                onTouchEnd={handleRemove}
+                accessibilityRole="button"
+                accessibilityLabel="Remove attachment"
+              />
+            </View>
+          )}
+        </>
+      ) : (
+        <IconCapsule iconName="ic_add" modes={modes} />
+      )}
+    </Pressable>
+  )
+}
+
+export default React.memo(Additem)