jfs-components 0.1.30 → 0.1.33

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)