jfs-components 0.1.23 → 0.1.28

package/lib/module/components/ProfileCard/ProfileCard.js

@@ -0,0 +1,202 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import Attached from '../Attached/Attached';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import ListItem from '../ListItem/ListItem';
+import UpiHandle from '../UpiHandle/UpiHandle';
+import Divider from '../Divider/Divider';
+
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Forced modes for everything rendered inside the card — the profile card is
+// an on-dark (jioPlus) surface, so child components (Avatar, UpiHandle,
+// ListItem, Divider, Text, Button, …) must resolve their tokens through the
+// `context 10: jioPlus` mode. Consumer modes are spread first so appearance
+// modes (e.g. `Profile Card Appearance: Premium`) still cascade through.
+const CARD_CONTEXT = Object.freeze({
+  'context 10': 'jioPlus'
+});
+const DEFAULT_UPI_HANDLES = [{
+  label: 'username@jio',
+  iconName: 'ic_copy'
+}, {
+  label: '9999999999',
+  iconName: 'ic_confirm'
+}];
+function resolveProfileCardTokens(modes) {
+  const backgroundColor = getVariableByName('profileCard/bg', modes) ?? '#00065a';
+  const gap = getVariableByName('profileCard/gap', modes) ?? 12;
+  const borderRadius = getVariableByName('profileCard/radius', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('profileCard/padding/horizontal', modes) ?? 20;
+  const paddingVertical = getVariableByName('profileCard/padding/vertical', modes) ?? 20;
+  const childModes = {
+    ...modes,
+    ...CARD_CONTEXT
+  };
+
+  // The UPI handle pills sit in the header ListItem's support slot, whose row
+  // gap is the `slot/gap` token in the ListItem context.
+  const handlesGap = getVariableByName('slot/gap', {
+    ...childModes,
+    Context: 'ListItem'
+  }) ?? 2;
+
+  // The avatar badge is a white circle: the fill comes from the Attached
+  // slot's background token (the IconCapsule itself resolves transparent).
+  const badgeBackground = getVariableByName('attached/slot/background', childModes) ?? '#ffffff';
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderRadius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    },
+    handlesRowStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: handlesGap
+    },
+    badgeBackground,
+    childModes,
+    // XS capsule per the Figma spec; consumers can still override the size
+    // through their own modes.
+    badgeModes: {
+      'Icon Capsule Size': 'XS',
+      ...modes,
+      ...CARD_CONTEXT
+    }
+  };
+}
+
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+function ProfileCard({
+  name = 'Name',
+  monogram = 'MS',
+  avatarSource,
+  badgeIcon = 'ic_qr_code',
+  upiHandles = DEFAULT_UPI_HANDLES,
+  header,
+  children,
+  showDivider = true,
+  width = 344,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveProfileCardTokens(modes), [modes]);
+
+  // ---- Header -------------------------------------------------------------
+  const headerNode = useMemo(() => {
+    if (header) return cloneChildrenWithModes(header, tokens.childModes);
+    const avatar = /*#__PURE__*/_jsx(Attached, {
+      position: "bottom-right",
+      modes: tokens.childModes,
+      badge: badgeIcon != null ? /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: badgeIcon,
+        modes: tokens.badgeModes,
+        style: {
+          backgroundColor: tokens.badgeBackground
+        }
+      }) : null,
+      children: /*#__PURE__*/_jsx(Avatar, {
+        monogram: monogram,
+        style: avatarSource ? 'Image' : 'Monogram',
+        ...(avatarSource != null ? {
+          imageSource: avatarSource
+        } : {}),
+        modes: tokens.childModes
+      })
+    });
+    const handles = upiHandles.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: tokens.handlesRowStyle,
+      children: upiHandles.map((handle, index) => /*#__PURE__*/_jsx(UpiHandle, {
+        label: handle.label,
+        ...(handle.iconName != null ? {
+          iconName: handle.iconName
+        } : {}),
+        showIcon: handle.showIcon ?? true,
+        ...(handle.onPress != null ? {
+          onPress: handle.onPress
+        } : {}),
+        modes: tokens.childModes
+      }, `${handle.label}-${index}`))
+    }) : null;
+    return /*#__PURE__*/_jsx(ListItem, {
+      layout: "Horizontal",
+      title: name,
+      navArrow: false,
+      showSupportText: handles != null,
+      supportSlot: handles,
+      leading: avatar,
+      modes: tokens.childModes
+    });
+  }, [header, name, monogram, avatarSource, badgeIcon, upiHandles, tokens]);
+
+  // ---- Body slot ----------------------------------------------------------
+  const bodyChildren = useMemo(() => children != null ? cloneChildrenWithModes(children, tokens.childModes) : null, [children, tokens.childModes]);
+  const hasBody = bodyChildren != null && bodyChildren.length > 0;
+  const containerStyle = useMemo(() => ({
+    ...tokens.containerStyle,
+    width
+  }), [tokens.containerStyle, width]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: [headerNode, hasBody && showDivider ? /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: tokens.childModes
+    }) : null, bodyChildren]
+  });
+}
+export default /*#__PURE__*/React.memo(ProfileCard);

package/lib/module/components/Rating/Rating.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Star glyph taken directly from the Figma `Rating` component. Filled and empty
+ * stars share this shape and differ only by fill color, so a single path keeps
+ * the row perfectly aligned.
+ */
+const STAR_PATH = 'M40.7187 15.3334C40.4728 14.6159 40.0426 13.9805 39.4688 13.4885C38.8951 12.9965 38.1985 12.689 37.4403 12.566L28.3018 11.1721L24.2038 2.35741C23.8759 1.66044 23.3432 1.06596 22.6875 0.635476C22.0318 0.225491 21.2737 0 20.4951 0C19.7165 0 18.9583 0.225491 18.3027 0.635476C17.647 1.04546 17.1142 1.63994 16.7864 2.35741L12.6884 11.1721L3.4679 12.566C2.73026 12.689 2.01311 12.9965 1.43939 13.4885C0.865675 13.9805 0.435385 14.6159 0.189505 15.3334C-0.0358854 16.0304 -0.0563753 16.7889 0.107545 17.5063C0.271465 18.2238 0.640285 18.9003 1.15254 19.4333L7.89374 26.362L6.29552 36.1811C6.17258 36.9396 6.27503 37.7186 6.56189 38.4156C6.84875 39.1125 7.34051 39.7275 7.9757 40.1785C8.65187 40.691 9.49196 40.978 10.3525 40.9985C11.0697 40.9985 11.7664 40.8345 12.4015 40.486L20.5771 35.9761L28.7526 40.486C29.3673 40.8345 30.0844 41.019 30.8016 40.9985C31.6621 40.9985 32.4817 40.732 33.1784 40.24C33.7931 39.789 34.2849 39.1945 34.5922 38.4771C34.8791 37.7801 34.9815 37.0011 34.8586 36.2426L33.2604 26.4235L40.0016 19.4948C40.4933 18.9413 40.8007 18.2443 40.9441 17.5063C41.0671 16.7684 40.9851 16.0099 40.7187 15.3334Z';
+const STAR_VIEWBOX = '0 0 41 41';
+
+// Fallbacks mirror the Figma `Rating Star / Output` + `Rating Star State` tokens.
+const DEFAULT_STAR_SIZE = 41;
+const DEFAULT_GAP = 12;
+const SELECTED_FALLBACK = '#5D00B5';
+const IDLE_FALLBACK = '#F6F3FF';
+
+/**
+ * `ratingStar/background` is state-driven: the same token resolves to the filled
+ * color when `Rating Star State = selected` and to the empty color when `idle`.
+ */
+const RATING_STATE_COLLECTION = 'Rating Star State';
+const toNumber = (value, fallback) => {
+  const n = typeof value === 'string' ? Number(value) : value;
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback;
+};
+function Star({
+  width,
+  height,
+  color
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: width,
+    height: height,
+    viewBox: STAR_VIEWBOX,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: STAR_PATH,
+      fill: color
+    })
+  });
+}
+function Rating({
+  value = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  starSize,
+  gap,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    selectedColor,
+    idleColor,
+    starWidth,
+    starHeight,
+    resolvedGap
+  } = useMemo(() => {
+    const selected = getVariableByName('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'selected'
+    });
+    const idle = getVariableByName('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'idle'
+    });
+    return {
+      selectedColor: selected ?? SELECTED_FALLBACK,
+      idleColor: idle ?? IDLE_FALLBACK,
+      starWidth: starSize ?? toNumber(getVariableByName('ratingStar/width', modes), DEFAULT_STAR_SIZE),
+      starHeight: starSize ?? toNumber(getVariableByName('ratingStar/height', modes), DEFAULT_STAR_SIZE),
+      resolvedGap: gap ?? toNumber(getVariableByName('rating/gap', modes), DEFAULT_GAP)
+    };
+  }, [modes, starSize, gap]);
+  const total = Math.max(0, Math.round(max));
+  const filledCount = Math.max(0, Math.min(total, Math.round(value)));
+  const interactive = !readOnly && typeof onChange === 'function';
+  const label = accessibilityLabel ?? `${filledCount} of ${total} stars`;
+  return /*#__PURE__*/_jsx(View, {
+    ...rest,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: resolvedGap
+    }, style],
+    accessibilityRole: interactive ? 'adjustable' : 'image',
+    accessibilityLabel: label,
+    accessibilityValue: interactive ? {
+      min: 0,
+      max: total,
+      now: filledCount
+    } : undefined,
+    children: Array.from({
+      length: total
+    }, (_, index) => {
+      const color = index < filledCount ? selectedColor : idleColor;
+      const star = /*#__PURE__*/_jsx(Star, {
+        width: starWidth,
+        height: starHeight,
+        color: color
+      });
+      if (!interactive) {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: star
+        }, index);
+      }
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onChange?.(index + 1),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rate ${index + 1} of ${total} stars`,
+        hitSlop: 8,
+        children: star
+      }, index);
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Rating);

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -8,9 +8,6 @@ import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Default static asset from the component folder.
-// Consumers can override the image via the `source` prop if needed.
-const DEFAULT_AVATAR_IMAGE = require('./Image.png');
 const IS_WEB = Platform.OS === 'web';
 const IS_IOS = Platform.OS === 'ios';
 const PRESS_DELAY = IS_IOS ? 130 : 0;
@@ -83,7 +80,7 @@ function resolveUpiHandleTokens(modes) {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web. Providing a source force-sets `UPI Handle Image: True` (avatar shown); omitting it force-sets `False` (avatar hidden), overriding any `UPI Handle Image` value passed via `modes`.
  * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
@@ -118,10 +115,24 @@ function UpiHandle({
   const {
     modes: globalModes
   } = useTokens();
-  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
-    ...globalModes,
-    ...propModes
-  }, [globalModes, propModes]);
+
+  // The avatar is fully driven by the presence of a `source`. It force-sets the
+  // Figma "UPI Handle Image" collection to `True` when a source is provided and
+  // `False` otherwise. This is applied last so it overrides any consumer-passed
+  // `UPI Handle Image` mode, keeping the avatar visibility and the token layout
+  // (symmetric padding in the hidden-image state) in lockstep with the source.
+  const hasSource = source != null || avatarSource != null;
+  const modes = useMemo(() => {
+    const base = globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+      ...globalModes,
+      ...propModes
+    };
+    return {
+      ...base,
+      'UPI Handle Image': hasSource ? 'True' : 'False'
+    };
+  }, [globalModes, propModes, hasSource]);
+  const showImageResolved = hasSource;
   const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes]);
 
   // Focus is a sustained visible state (web-only). Setter is gated so it
@@ -155,11 +166,12 @@ function UpiHandle({
 
   // `source` wins; `avatarSource` is the legacy fallback. Both are accepted
   // as a UnifiedSource (string / number / {uri} / component / element), and
-  // the legacy `ImageSourcePropType` shapes naturally fit that union too.
-  const resolvedAvatarSource = source ?? avatarSource ?? DEFAULT_AVATAR_IMAGE;
+  // the legacy `ImageSourcePropType` shapes naturally fit that union too. This
+  // is only read when `showImageResolved` is true, which requires a source.
+  const resolvedAvatarSource = source ?? avatarSource;
   const avatarSize = tokens.avatarStyle.width ?? 23;
   const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
+    children: [showImageResolved && /*#__PURE__*/_jsx(View, {
       style: tokens.avatarStyle,
       children: /*#__PURE__*/_jsx(MediaSource, {
         source: resolvedAvatarSource,

package/lib/module/components/index.js

@@ -37,6 +37,9 @@ export { default as FullscreenModal } from './FullscreenModal/FullscreenModal';
 export { default as Form } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField } from './FormField/FormField';
+export { default as Grid } from './Grid/Grid';
+export { default as FormUpload } from './FormUpload/FormUpload';
+export { default as Additem } from './FormUpload/Additem';
 export { default as ContentSheet } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar } from './CircularProgressBar/CircularProgressBar';
 export { default as CircularProgressBarDoted } from './CircularProgressBarDoted/CircularProgressBarDoted';
@@ -136,6 +139,7 @@ export { default as CompareTable } from './CompareTable/CompareTable';
 export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from './Table/Table';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
+export { default as ProfileCard } from './ProfileCard/ProfileCard';
 export { default as ProductMerchandisingCard } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';
 export { default as ProjectionMarker } from './ProjectionMarker/ProjectionMarker';
@@ -151,4 +155,6 @@ export { default as TestimonialsCard } from './TestimonialsCard/TestimonialsCard
 export { default as Text } from './Text/Text';
 export { default as TextSegment } from './TextSegment/TextSegment';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
-export { default as Toggle } from './Toggle/Toggle';
+export { default as Toggle } from './Toggle/Toggle';
+export { default as AutoplayControl } from './AutoplayControl/AutoplayControl';
+export { default as NumberPagination } from './NumberPagination/NumberPagination';