jfs-components 0.1.2 → 0.1.8

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -22,6 +22,12 @@ const IS_WEB = _reactNative.Platform.OS === 'web';
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -125,7 +131,7 @@ function collectOptionsFromChildren(children) {
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput({
   label,
   placeholder = 'Select an option',
   items,
@@ -156,7 +162,7 @@ function DropdownInput({
   accessibilityHint,
   onFocus,
   onBlur
-}) {
+}, ref) {
   // ---------------- Modes ----------------
   const {
     modes: globalModes
@@ -270,6 +276,32 @@ function DropdownInput({
     measure();
   }, [measure]);
 
+  // ---------------- Imperative handle ----------------
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      setOpenState(true);
+    },
+    close: closeMenu,
+    toggle: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      toggleMenu();
+    },
+    focus: () => {
+      ;
+      triggerRef.current?.focus?.();
+    },
+    blur: () => {
+      ;
+      triggerRef.current?.blur?.();
+    },
+    measureInWindow: callback => {
+      triggerRef.current?.measureInWindow(callback);
+    }
+  }), [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]);
+
   // ---------------- Popup positioning ----------------
   const [menuSize, setMenuSize] = (0, _react.useState)(null);
   const handleMenuLayout = (0, _react.useCallback)(e => {
@@ -564,7 +596,7 @@ function DropdownInput({
       })
     })]
   });
-}
+});
 const webNoOutline = {
   outlineStyle: 'none',
   outlineWidth: 0,

package/lib/commonjs/components/FormField/FormField.js

@@ -162,7 +162,7 @@ function firstError(error) {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   label,
   placeholder,
   value,
@@ -190,7 +190,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID
-}) {
+}, ref) {
   // -- Form context integration -------------------------------------------
   const formCtx = (0, _Form.useFormContext)();
   const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
@@ -347,6 +347,7 @@ function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: ref,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,
@@ -376,5 +377,5 @@ function FormField({
       modes: modes
     })]
   });
-}
+});
 var _default = exports.default = FormField;

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = InputSearch;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -54,7 +54,7 @@ function SupportText({
     })]
   });
 }
-function InputSearch({
+const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
   supportTextIcon = "ic_info",
@@ -69,7 +69,7 @@ function InputSearch({
   trailing,
   inputStyle,
   ...rest
-}) {
+}, ref) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -124,6 +124,7 @@ function InputSearch({
       gap: formFieldGap
     }, containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
       placeholder: placeholder,
       value: value || '',
       onChangeText: onChangeText || (() => {}),
@@ -143,4 +144,5 @@ function InputSearch({
       modes: componentModes
     })]
   });
-}
+});
+var _default = exports.default = InputSearch;

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = NoteInput;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -14,7 +14,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-function NoteInput({
+const NoteInput = /*#__PURE__*/(0, _react.forwardRef)(function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
@@ -25,7 +25,7 @@ function NoteInput({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   const [internalFocused, setInternalFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
 
@@ -97,7 +97,7 @@ function NoteInput({
         importantForAccessibility: "no",
         children: internalFocused ? value || ' ' : value || placeholder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
+        ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
         value: value,
         onChangeText: onChangeText,
         placeholder: internalFocused ? '' : placeholder,
@@ -117,4 +117,5 @@ function NoteInput({
       })]
     })
   });
-}
+});
+var _default = exports.default = NoteInput;

package/lib/commonjs/components/PdpCcCard/PdpCcCard.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Title = _interopRequireDefault(require("../Title/Title"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+function PdpCcCard({
+  imageSource,
+  imageWidth = 100,
+  imageHeight = 60,
+  media,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  metrics = DEFAULT_METRICS,
+  buttonLabel = 'button',
+  buttonIcon = 'ic_add_circle',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 344,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // The CTA uses the brand "Secondary" appearance at "Medium" emphasis (lilac
+  // fill + purple label) and the small size — matching the design. A
+  // consumer-supplied `modes` value still wins via spread order.
+  const ctaModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+  const buttonForeground = (0, _react.useMemo)(() => asStr((0, _figmaVariablesResolver.getVariableByName)('button/foreground', ctaModes), '#5d00b5'), [ctaModes]);
+  const mediaNode = media ? (0, _reactUtils.cloneChildrenWithModes)(media, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    imageSource: imageSource,
+    width: imageWidth,
+    height: imageHeight,
+    borderRadius: tokens.imageRadius,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  });
+  const ctaNode = button ? (0, _reactUtils.cloneChildrenWithModes)(button, ctaModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress,
+    leading: buttonIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      iconName: buttonIcon,
+      size: tokens.buttonIconSize,
+      color: buttonForeground
+    }) : undefined
+  });
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.mediaSlot,
+      children: mediaNode
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
+      title: title,
+      subtitle: subtitle,
+      textAlign: "Center",
+      modes: modes
+    }), metrics.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.metricsRow,
+      children: metrics.map((metric, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+          direction: "vertical",
+          modes: modes,
+          style: styles.metricDivider
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Metricdata, {
+          metric: metric,
+          tokens: tokens
+        })]
+      }, index))
+    }) : null, showButton ? ctaNode : null]
+  });
+  const containerStyle = (0, _react.useMemo)(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Metricdata — internal metric column (Figma node 5352:256)
+// ---------------------------------------------------------------------------
+
+function Metricdata({
+  metric,
+  tokens
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: tokens.metric,
+    children: [metric.title != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricTitle,
+      children: metric.title
+    }) : null, metric.value != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricValue,
+      children: metric.value
+    }) : null, metric.caption != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricCaption,
+      children: metric.caption
+    }) : null]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const background = asStr((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/bg/color', modes), '#ffffff');
+  const paddingHorizontal = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/padding/horizontal', modes), 16);
+  const paddingVertical = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/padding/vertical', modes), 20);
+  const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/gap', modes), 12);
+  const imageRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('image/radius', modes), 8);
+  const buttonIconSize = asNum((0, _figmaVariablesResolver.getVariableByName)('button/iconSize', modes), 16);
+  const metricGap = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes), 4);
+  const metricPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes), 10);
+  const metricPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes), 10);
+  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes), '#000000');
+  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontsize', modes), 12);
+  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontfamily', modes), 'JioType Var');
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes), '400');
+  const valueColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes), '#000000');
+  const valueSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontsize', modes), 20);
+  const valueFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontfamily', modes), 'JioType Var');
+  const valueWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontweight', modes), '700');
+  const captionColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes), '#777777');
+  const captionSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontsize', modes), 12);
+  const captionFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontfamily', modes), 'JioType Var');
+  const captionWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    imageRadius,
+    buttonIconSize,
+    metric: {
+      flex: 1,
+      gap: metricGap,
+      paddingHorizontal: metricPadH,
+      paddingVertical: metricPadV,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    metricTitle: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.round(titleSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    metricValue: {
+      color: valueColor,
+      fontSize: valueSize,
+      fontFamily: valueFamily,
+      fontWeight: valueWeight,
+      lineHeight: Math.round(valueSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    metricCaption: {
+      color: captionColor,
+      fontSize: captionSize,
+      fontFamily: captionFamily,
+      fontWeight: captionWeight,
+      lineHeight: Math.round(captionSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_METRICS = [{
+  title: 'Title',
+  value: 'Value',
+  caption: 'caption'
+}, {
+  title: 'Title',
+  value: 'Value',
+  caption: 'caption'
+}];
+const styles = _reactNative.StyleSheet.create({
+  mediaSlot: {
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  metricsRow: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  metricDivider: {
+    alignSelf: 'center',
+    height: '70%'
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+var _default = exports.default = PdpCcCard;