jfs-components 0.1.28 → 0.1.32

package/src/components/CounterBadge/CounterBadge.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type CounterBadgeProps = {
+  /** The value shown inside the badge. */
+  value?: string
+  /** Modes used to resolve design tokens. Counter Badge exposes a single `Default` mode. */
+  modes?: Modes
+  style?: ViewStyle
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+/**
+ * Counter Badge — a small token-driven pill that displays a value.
+ *
+ * All visual attributes resolve from the Figma `counterBadge/*` tokens via
+ * `getVariableByName`.
+ */
+function CounterBadge({
+  value = '99',
+  modes = EMPTY_MODES,
+  style,
+  ...rest
+}: CounterBadgeProps) {
+  // Resolve token values (fall back to the Figma defaults for the single
+  // `Default` mode so the badge still renders if a token is missing).
+  const backgroundColor =
+    (getVariableByName('counterBadge/background', modes) as string) ?? '#ebebec'
+  const foreground =
+    (getVariableByName('counterBadge/foreground', modes) as string) ?? '#0c0d10'
+  const fontFamily =
+    (getVariableByName('counterBadge/fontFamily', modes) as string) ?? 'JioType Var'
+  const fontWeightRaw =
+    getVariableByName('counterBadge/fontWeight', modes) ?? 500
+  const fontWeight =
+    typeof fontWeightRaw === 'number' ? String(fontWeightRaw) : (fontWeightRaw as string)
+  const fontSize =
+    Number(getVariableByName('counterBadge/fontSize', modes) ?? 8)
+  const lineHeight =
+    Number(getVariableByName('counterBadge/lineHeight', modes) ?? 8)
+  const paddingHorizontal =
+    Number(getVariableByName('counterBadge/padding/horizontal', modes) ?? 4)
+  // The Figma design pins vertical padding to 4px (matching horizontal), but the
+  // committed variables snapshot resolves `counterBadge/padding/vertical` to 5px
+  // (a stale export). Figma is the source of truth here, so hardcode 4px rather
+  // than trust the token, keeping the badge one pixel shorter to match the design.
+  const paddingVertical = 4
+  const borderRadius =
+    Number(getVariableByName('counterBadge/radius', modes) ?? 999)
+
+  const containerStyle: ViewStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...((style as any) || {}),
+  }
+
+  const textStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontWeight: fontWeight as TextStyle['fontWeight'],
+    fontSize,
+    lineHeight,
+    textAlign: 'center',
+  }
+
+  return (
+    <View style={containerStyle} {...rest}>
+      {/* Figma `wrap`: a centered box with a 10px minimum. */}
+      <View style={WRAP_STYLE}>
+        <Text style={textStyle}>{value}</Text>
+      </View>
+    </View>
+  )
+}
+
+// Figma `wrap` node (data-node-id 7701:10879): min-width 10, centered.
+const WRAP_STYLE: ViewStyle = {
+  minWidth: 10,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+export default CounterBadge

package/src/components/FavoriteToggle/FavoriteToggle.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  Pressable,
+  Platform,
+  type AccessibilityState,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import GlassFill from '../../utils/GlassFill/GlassFill'
+import {
+  usePressableWebSupport,
+  type SafePressableProps,
+  type WebAccessibilityProps,
+} from '../../utils/web-platform-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
+
+export type FavoriteToggleProps = SafePressableProps & {
+  /**
+   * Whether the toggle is favorited (active) — **controlled**. When provided,
+   * the component reflects this value and defers state ownership to the parent
+   * (update it in `onChange`). Omit it to use the component uncontrolled with
+   * `defaultActive`.
+   */
+  isActive?: boolean
+  /**
+   * Initial favorited state for **uncontrolled** usage. Ignored when `isActive`
+   * is provided. Defaults to `false`.
+   */
+  defaultActive?: boolean
+  /**
+   * Icon rendered inside the toggle. Defaults to the heart glyph
+   * (`ic_favorite`). Both Figma variants use the same filled heart; only its
+   * color changes with state (white when inactive, gold when active). Figma
+   * hardcodes the heart, so this prop is exposed purely for future reuse.
+   */
+  icon?: string
+  /** Fired on press with the next (toggled) active state. */
+  onChange?: (next: boolean) => void
+  /** Raw press handler, fired alongside `onChange`. */
+  onPress?: () => void
+  /** Modes used to resolve design tokens. */
+  modes?: Modes
+  disabled?: boolean
+  /** Accessibility label; defaults to `"Favorite"`. */
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  accessibilityState?: AccessibilityState
+  webAccessibilityProps?: WebAccessibilityProps
+  style?: StyleProp<ViewStyle>
+  /**
+   * Explicit per-instance loading override. When `true`, renders a same-size
+   * circular skeleton instead of the toggle. Defaults to inheriting from the
+   * surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean
+}
+
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+const pressedOverlayStyle: ViewStyle = { opacity: 0.7 }
+
+interface FavoriteToggleTokens {
+  size: number
+  borderRadius: number
+  backgroundColor: string
+  iconColor: string
+  iconSize: number
+  blurIntensity: number
+}
+
+// The `favoriteToggle/*` tokens are not yet in the committed variables snapshot,
+// so `getVariableByName` returns undefined and these Figma-node values are used
+// as fallbacks. Once the token export is re-synced the resolver takes over.
+function resolveTokens(modes: Modes, isActive: boolean): FavoriteToggleTokens {
+  const width = Number(getVariableByName('favoriteToggle/width', modes) ?? 29)
+  const height = Number(getVariableByName('favoriteToggle/height', modes) ?? 29)
+  const radiusRaw = Number(getVariableByName('favoriteToggle/icon/radius', modes) ?? 9999)
+  const iconSize = Number(getVariableByName('favoriteToggle/icon/width', modes) ?? 20)
+  // 9999 is the design-token sentinel for "perfect circle".
+  const size = Math.max(width, height)
+  const borderRadius = radiusRaw >= 9999 ? size / 2 : radiusRaw
+
+  // Background + icon color differ per variant. In Figma this is driven by the
+  // `isActive` collection (modes `'False'` / `'True'`), so we pass that mode
+  // through by its string name. Until the `color/favoriteToggle/*` tokens are
+  // exported the resolver returns undefined and the fallbacks below — which
+  // encode the two Figma variants directly — take over.
+  const isActiveMode = { ...modes, isActive: isActive ? 'True' : 'False' }
+  const backgroundColor =
+    (getVariableByName('color/favoriteToggle/background/color', isActiveMode) as string) ??
+    (isActive ? '#ffffff' : '#ffffff33')
+  const iconColor =
+    (getVariableByName('color/favoriteToggle/icon/color', isActiveMode) as string) ??
+    (isActive ? '#cea15a' : '#ffffff')
+
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0-100 intensity scale, the
+  // same mapping Badge's glass path uses.
+  const blurRaw = Number(getVariableByName('blur/minimal', modes) ?? 29)
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurRaw)))
+
+  return { size, borderRadius, backgroundColor, iconColor, iconSize, blurIntensity }
+}
+
+/**
+ * Circular glass favorite (heart) toggle, mirroring the Figma `Favorite Toggle`
+ * component set's boolean `isActive` variant:
+ *   - inactive: translucent frosted circle (`#ffffff33` over a `blur/minimal`
+ *     backdrop) with a white heart.
+ *   - active: solid white circle with a gold (`#cea15a`) heart.
+ * Both variants share the identical filled-heart glyph; only the background and
+ * icon colors change between states.
+ *
+ * Controlled or uncontrolled: pass `isActive` (+ `onChange`) to control it, or
+ * omit `isActive` and use `defaultActive` to let the component own the state.
+ *
+ * Visual attributes resolve from the `favoriteToggle/*` / `color/favoriteToggle/*`
+ * tokens via `getVariableByName`. Those tokens are not yet in the committed
+ * variables snapshot, so the component currently runs on the Figma-node values
+ * as fallbacks; once the tokens are exported (under the `isActive` collection,
+ * modes `False`/`True`) the resolver takes over.
+ */
+function FavoriteToggle({
+  isActive: controlledActive,
+  defaultActive = false,
+  icon = 'ic_favorite',
+  onChange,
+  onPress,
+  modes = EMPTY_MODES,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  style,
+  loading,
+  ...rest
+}: FavoriteToggleProps) {
+  // Controlled when `isActive` is supplied; otherwise own the state internally
+  // (mirrors the Toggle / SegmentedControl controlled-or-uncontrolled pattern).
+  const isControlled = controlledActive !== undefined
+  const [internalActive, setInternalActive] = useState(defaultActive)
+  const isActive = isControlled ? (controlledActive as boolean) : internalActive
+
+  const tokens = useMemo(() => resolveTokens(modes, isActive), [modes, isActive])
+
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
+  const handlePress = useCallback(() => {
+    const next = !isActive
+    if (!isControlled) {
+      setInternalActive(next)
+    }
+    onChange?.(next)
+    onPress?.()
+  }, [isActive, isControlled, onChange, onPress])
+
+  const label = accessibilityLabel || 'Favorite'
+
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : handlePress,
+    disabled,
+    accessibilityLabel: label,
+    webAccessibilityProps,
+  })
+
+  const baseContainerStyle: ViewStyle = {
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    // Active is opaque white, so no glass is drawn and the background paints
+    // directly. Inactive keeps the container transparent so the GlassFill blur
+    // (clipped by overflow:hidden) shows through.
+    backgroundColor: isActive ? tokens.backgroundColor : 'transparent',
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? 0.5 : 1,
+  }
+
+  // Declared before the loading short-circuit so hook order stays stable.
+  const styleCallback = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      baseContainerStyle,
+      style,
+      pressed && !disabled ? pressedOverlayStyle : null,
+    ],
+    [baseContainerStyle, style, disabled]
+  )
+
+  if (isLoading) {
+    return (
+      <Skeleton
+        kind="other"
+        width={tokens.size}
+        height={tokens.size}
+        style={[{ borderRadius: tokens.borderRadius }, style as any]}
+        modes={modes}
+      />
+    )
+  }
+
+  return (
+    <Pressable
+      accessibilityRole={IS_WEB ? ('switch' as any) : 'button'}
+      accessibilityLabel={undefined}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ disabled, checked: isActive, ...accessibilityState }}
+      onPress={disabled ? undefined : handlePress}
+      disabled={disabled}
+      unstable_pressDelay={PRESS_DELAY}
+      style={styleCallback}
+      {...webProps}
+    >
+      {/* Inactive: translucent frosted glass behind the icon. */}
+      {!isActive ? (
+        <GlassFill
+          tint="light"
+          intensity={tokens.blurIntensity}
+          overlayColor={tokens.backgroundColor}
+          androidTintWash={false}
+        />
+      ) : null}
+      <Icon
+        name={icon}
+        size={tokens.iconSize}
+        color={tokens.iconColor}
+        accessibilityElementsHidden
+        importantForAccessibility="no"
+      />
+    </Pressable>
+  )
+}
+
+export default React.memo(FavoriteToggle)