jfs-components 0.1.23 → 0.1.28

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} 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 type { Modes } from '../../design-tokens'
+
+/**
+ * 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'
+
+export type RatingProps = {
+  /** Number of filled stars. Rounded to the nearest whole star for display. */
+  value?: number
+  /** Total number of stars to render. */
+  max?: number
+  /**
+   * Called with the new rating (1..max) when a star is pressed. Providing this
+   * makes the control interactive; omit it (or set `readOnly`) for a display.
+   */
+  onChange?: (value: number) => void
+  /** Force a read-only display even when `onChange` is provided. */
+  readOnly?: boolean
+  /** Override the star edge length. Defaults to the `ratingStar/width` token. */
+  starSize?: number
+  /** Override the spacing between stars. Defaults to the `rating/gap` token. */
+  gap?: number
+  /** Design token modes forwarded to token lookups. */
+  modes?: Modes
+  /** Optional container style overrides. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the whole rating. Defaults to "X of Y stars". */
+  accessibilityLabel?: string
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+const toNumber = (value: unknown, fallback: number) => {
+  const n = typeof value === 'string' ? Number(value) : value
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback
+}
+
+function Star({
+  width,
+  height,
+  color,
+}: {
+  width: number
+  height: number
+  color: string
+}) {
+  return (
+    <Svg width={width} height={height} viewBox={STAR_VIEWBOX}>
+      <Path d={STAR_PATH} fill={color} />
+    </Svg>
+  )
+}
+
+function Rating({
+  value = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  starSize,
+  gap,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}: RatingProps) {
+  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',
+      }) as string | undefined
+      const idle = getVariableByName('ratingStar/background', {
+        ...modes,
+        [RATING_STATE_COLLECTION]: 'idle',
+      }) as string | undefined
+
+      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 (
+    <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
+      }
+    >
+      {Array.from({ length: total }, (_, index) => {
+        const color = index < filledCount ? selectedColor : idleColor
+        const star = <Star width={starWidth} height={starHeight} color={color} />
+
+        if (!interactive) {
+          return <React.Fragment key={index}>{star}</React.Fragment>
+        }
+
+        return (
+          <Pressable
+            key={index}
+            onPress={() => onChange?.(index + 1)}
+            accessibilityRole="button"
+            accessibilityLabel={`Rate ${index + 1} of ${total} stars`}
+            hitSlop={8}
+          >
+            {star}
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+export default React.memo(Rating)

package/src/components/UpiHandle/UpiHandle.tsx

@@ -18,10 +18,6 @@ import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
-// 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
@@ -39,6 +35,12 @@ type UpiHandleProps = {
    * inline SVG XML string, a `require()` asset, an SVG React component, or
    * an already-rendered element. See {@link UnifiedSource}. Avatars are
    * intentionally **not** tinted — the source renders as-is.
+   *
+   * The leading avatar is driven entirely by this prop: providing a `source`
+   * (or the deprecated `avatarSource`) force-sets the Figma "UPI Handle Image"
+   * collection to `True` and renders the avatar; omitting it force-sets the
+   * mode to `False` and hides it. This override wins over any `UPI Handle
+   * Image` value passed via `modes`.
    */
   source?: UnifiedSource;
   /**
@@ -134,7 +136,7 @@ function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
  * @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
@@ -168,12 +170,21 @@ function UpiHandle({
 }: UpiHandleProps) {
   const { modes: globalModes } = useTokens()
 
-  const modes = useMemo(
-    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+  // 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 }),
-    [globalModes, propModes]
-  )
+      : { ...globalModes, ...propModes }
+    return { ...base, 'UPI Handle Image': hasSource ? 'True' : 'False' }
+  }, [globalModes, propModes, hasSource])
+
+  const showImageResolved = hasSource
 
   const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes])
 
@@ -226,25 +237,25 @@ 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: UnifiedSource =
-    (source as UnifiedSource | undefined) ??
-    (avatarSource as UnifiedSource | undefined) ??
-    (DEFAULT_AVATAR_IMAGE as UnifiedSource)
+  // 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) as UnifiedSource
 
   const avatarSize = (tokens.avatarStyle.width as number | undefined) ?? 23
 
   const innerContent = (
     <>
-      <View style={tokens.avatarStyle}>
-        <MediaSource
-          source={resolvedAvatarSource}
-          size={avatarSize}
-          resizeMode="cover"
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        />
-      </View>
+      {showImageResolved && (
+        <View style={tokens.avatarStyle}>
+          <MediaSource
+            source={resolvedAvatarSource}
+            size={avatarSize}
+            resizeMode="cover"
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        </View>
+      )}
       <Text
         style={tokens.labelStyle}
         {...resolveTruncation(disableTruncation, 1, 'tail')}