jfs-components 0.0.86 → 0.0.95

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,167 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  type AccessibilityProps,
+  type StyleProp,
+  type ViewStyle,
+} 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 BaseIcon from '../../icons/Icon'
+import type { UnifiedSource } from '../../utils/MediaSource'
+
+type IconProps = AccessibilityProps & {
+  /**
+   * Built-in icon name from the registry, in the `ic_something` format
+   * (e.g. `'ic_card'`, `'ic_scan_qr_code'`). When omitted and no `source` or
+   * `children` slot is supplied, defaults to `'ic_card'` to match the Figma
+   * design's default glyph.
+   */
+  iconName?: string
+  /**
+   * Unified fallback source rendered when `iconName` is missing or not in the
+   * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+   * asset, an SVG React component, or an already-rendered element. The media
+   * is tinted with the mode-resolved icon color so it follows design tokens
+   * just like a built-in icon. See {@link UnifiedSource}.
+   */
+  source?: UnifiedSource
+  /**
+   * Icon slot. Render any node here (another `Icon`, a custom SVG component,
+   * etc.) and it takes precedence over `iconName`/`source`. `modes` cascade
+   * into the slotted children automatically.
+   */
+  children?: React.ReactNode
+  /**
+   * Override the mode-resolved icon color. When omitted the value comes from
+   * the `icon/color` design token.
+   */
+  color?: string
+  /**
+   * Override the mode-resolved icon size (in px). When omitted the value comes
+   * from the `icon/size` design token.
+   */
+  size?: number
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+interface IconTokens {
+  containerStyle: ViewStyle
+  iconColor: string
+  iconSize: number
+}
+
+function resolveIconTokens(modes: Record<string, any>): IconTokens {
+  const iconColor = (getVariableByName('icon/color', modes) || '#ad8444') as string
+  const iconSize = (getVariableByName('icon/size', modes) || 18) as number
+  const paddingLeft = (getVariableByName('icon/padding/left', modes) || 0) as number
+  const paddingTop = (getVariableByName('icon/padding/top', modes) || 0) as number
+  const paddingRight = (getVariableByName('icon/padding/right', modes) || 0) as number
+  const paddingBottom = (getVariableByName('icon/padding/bottom', modes) || 0) as number
+
+  return {
+    containerStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+    },
+    iconColor,
+    iconSize,
+  }
+}
+
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+function Icon({
+  iconName,
+  source,
+  children,
+  color,
+  size,
+  modes: propModes = EMPTY_MODES,
+  style: styleProp,
+  ...rest
+}: IconProps) {
+  const { modes: globalModes } = useTokens()
+
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveIconTokens(modes), [modes])
+
+  const composedStyle = useMemo<StyleProp<ViewStyle>>(
+    () => (styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle),
+    [tokens.containerStyle, styleProp]
+  )
+
+  const hasSlot = React.Children.count(children) > 0
+
+  // Only fall back to the default glyph when nothing at all is provided so an
+  // explicit `source` (without an `iconName`) isn't shadowed by `ic_card`.
+  const resolvedName =
+    iconName ?? (source === undefined ? 'ic_card' : undefined)
+
+  const iconColor = color ?? tokens.iconColor
+  const iconSize = size ?? tokens.iconSize
+
+  return (
+    <View style={composedStyle} {...rest}>
+      {hasSlot ? (
+        cloneChildrenWithModes(children, modes)
+      ) : (
+        <BaseIcon
+          name={resolvedName}
+          {...(source !== undefined ? { source } : {})}
+          size={iconSize}
+          color={iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      )}
+    </View>
+  )
+}
+
+export default React.memo(Icon)
+export type { IconProps }

package/src/components/index.ts

@@ -43,6 +43,7 @@ export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProp
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
+export { default as Icon, type IconProps } from './Icon/Icon';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';