jfs-components 0.0.66 → 0.0.68

package/lib/module/components/CardCTA/CardCTA.js

@@ -73,11 +73,23 @@ function CardCTA({
     alignItems: 'flex-start',
     justifyContent: 'center'
   };
+
+  // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
+  // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
+  // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
+  // its own padding+IconCapsule width when leftWrap's text is long. Once that
+  // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
+  // the IconCapsule against the inner edge, and the icon ends up visually
+  // touching the body text (the wrapper "appears not to exist"). Web hides
+  // this because browsers honor `min-width: auto` on flex items. Use
+  // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
+  // is sized to its content as a floor and only grows for the design's
+  // 3:2 ratio when extra space is available. leftWrap already absorbs tight
+  // space via `flexShrink: 1` + `minWidth: 0`.
   const rightWrapStyle = {
-    flex: 2,
-    flexShrink: 1,
-    flexBasis: 0,
-    minWidth: 0,
+    flexGrow: 2,
+    flexShrink: 0,
+    flexBasis: 'auto',
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',

package/lib/module/components/Image/Image.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+function normalizeSource(imageSource) {
+  if (imageSource == null) return undefined;
+  if (typeof imageSource === 'string') return {
+    uri: imageSource
+  };
+  return imageSource;
+}
+
+/**
+ * `Image` — the library's standard raster image primitive.
+ *
+ * Why this exists:
+ *  - Gives consumers a single component for "show an image at a given aspect
+ *    ratio inside a flex container" without having to remember the
+ *    `width:'100%' / height:'100%' / resizeMode:'cover'` boilerplate.
+ *  - Centralizes URL-vs-`{uri}` normalization that several components were
+ *    re-implementing.
+ *  - Uses the same `imageSource` prop name as the rest of the library
+ *    (`Avatar`, `ProductLabel`, `CardProviderInfo`, ...) for a unified API.
+ *
+ * Layout rules:
+ *  - If `ratio` is provided, the image lays out with `aspectRatio: ratio`
+ *    and (unless `width` is given) fills the parent's width.
+ *  - If neither `ratio` nor explicit dimensions are given, the image fills
+ *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
+ *    most common usage in this library (background media, hero images).
+ */
+const DEFAULT_RATIO = 16 / 9;
+function Image({
+  imageSource,
+  ratio = DEFAULT_RATIO,
+  resizeMode = 'cover',
+  width,
+  height,
+  borderRadius,
+  style,
+  accessibilityLabel,
+  accessibilityElementsHidden,
+  importantForAccessibility
+}) {
+  const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
+  const layoutStyle = useMemo(() => {
+    // If the caller has fully specified width AND height, they're doing a
+    // non-aspect layout (e.g. "fill the parent") — respect that and skip
+    // `aspectRatio` so it doesn't conflict.
+    const isExplicitBox = width != null && height != null;
+    const s = {
+      width: width ?? '100%',
+      ...(isExplicitBox ? {
+        height: height
+      } : {
+        aspectRatio: ratio,
+        ...(height != null ? {
+          height
+        } : {})
+      })
+    };
+    if (borderRadius != null) s.borderRadius = borderRadius;
+    return s;
+  }, [ratio, width, height, borderRadius]);
+  if (!source) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [layoutStyle, style]
+    });
+  }
+  return /*#__PURE__*/_jsx(RNImage, {
+    source: source,
+    style: [layoutStyle, style],
+    resizeMode: resizeMode,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    importantForAccessibility: importantForAccessibility
+  });
+}
+export default /*#__PURE__*/React.memo(Image);

package/lib/module/components/MediaCard/MediaCard.js

@@ -1,59 +1,63 @@
 "use strict";
 
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Image from '../Image/Image';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
-/**
- * Context to share 'modes' with child components.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
 /**
  * MediaCard component implementation from Figma node 1241:4140.
- * 
+ *
  * Features a background media slot, a large title, and a glass-morphism footer.
+ *
+ * The background can be supplied either as `imageSource` (preferred — uses
+ * the shared `<Image>` primitive under the hood) or as a custom `media` node
+ * for non-image backgrounds.
  */
 export function MediaCard({
+  imageSource,
+  ratio,
   media,
   children,
   modes = EMPTY_MODES,
   style
 }) {
-  // Container Tokens
   const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
-  const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0');
-  // Dimensions from Figma: w=369, h=308. We can make it flexible or default to these?
-  // Usually components should be flexible, but stories will constrain them.
-  // Figma context shows fixed/hug behavior. Let's start with flex container.
 
+  // No magic minHeight, no aspectRatio on the container. The card simply
+  // hugs whatever the background renders at: the <Image> sits in normal
+  // flow with `aspectRatio: ratio`, so its rendered height becomes the
+  // card's height. Header and Footer are absolutely positioned overlays
+  // and don't contribute to layout.
   const containerStyle = {
     borderRadius: radius,
-    gap,
     overflow: 'hidden',
-    position: 'relative',
-    // Default dimensions from Figma if needed, but better to let parent control or use defaults in stories.
-    // However, to match "Maximize existing component usage", we follow patterns.
-    // We'll trust the parent layout or style prop for width/height.
-    minHeight: 308 // inferred from Figma height as a good default or minimum
+    position: 'relative'
   };
-  const mediaWithModes = /*#__PURE__*/isValidElement(media) ? /*#__PURE__*/cloneElement(media, {
-    modes: {
-      ...media.props.modes,
-      ...modes
-    }
-  }) : media;
+
+  // `media` wins as an escape hatch (gradient/video/etc.). Otherwise we
+  // delegate to the shared <Image> for image-source backgrounds. The
+  // background renders in normal flow so its height drives the card.
+  const background = media ?? (imageSource != null ? /*#__PURE__*/_jsx(Image, {
+    imageSource: imageSource,
+    ratio: ratio,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : null);
   return /*#__PURE__*/_jsx(MediaCardContext.Provider, {
     value: {
       modes
     },
     children: /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [background, children != null ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
-        children: mediaWithModes
-      }), children]
+        pointerEvents: "box-none",
+        children: children
+      }) : null]
     })
   });
 }
@@ -71,10 +75,24 @@ export function Header({
   children,
   style
 }) {
+  // NOTE: the previous `flex: 1` shorthand expanded on Yoga (Android) to
+  // `{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }`. With `flexBasis: 0` the
+  // Header has *no intrinsic floor*, so when MediaCard is placed inside a
+  // height-unbounded parent — e.g. a Carousel slot whose contentContainer
+  // is `alignItems: 'flex-start'` — Yoga's first measurement pass sizes
+  // the Header at 0 and the card's overall height becomes non-deterministic.
+  // On native this manifests as the card "over-stretching" vertically (the
+  // same Yoga foot-gun we fixed in `CardCTA` rightWrap). Web hides it
+  // because browsers honor `min-height: auto` on flex items. Use explicit
+  // `flexGrow / flexShrink: 0 / flexBasis: 'auto'` so the Header is sized
+  // to its content as a floor and only grows to consume the extra space
+  // contributed by `MediaCard`'s `minHeight: 308`.
   return /*#__PURE__*/_jsx(View, {
     style: [{
       padding: 16,
-      flex: 1
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto'
     }, style],
     children: children
   });
@@ -120,8 +138,6 @@ export function Footer({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-
-  // Tokens
   const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24');
   const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16');
   const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
@@ -206,8 +222,6 @@ export function FooterSubtitle({
     children: children
   });
 }
-
-// Attach sub-components
 MediaCard.Header = Header;
 MediaCard.Title = Title;
 MediaCard.Footer = Footer;

package/lib/module/components/index.js

@@ -25,6 +25,7 @@ export { default as HoldingsCard } from './HoldingsCard/HoldingsCard';
 export { default as HStack } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as Image } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';