jfs-components 0.1.36 → 0.1.48

package/src/components/AppBar/AppBar.tsx

@@ -1,74 +1,158 @@
-import React, { useState } from 'react'
-import { View, type StyleProp, type ViewStyle, Pressable } from 'react-native'
+import React, { useMemo } from 'react'
+import {
+  View,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import Svg, { Path, Defs, LinearGradient, Stop, ClipPath, Rect, G } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-
 import NavArrow from '../NavArrow/NavArrow'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
-// SubPage "slot wrap" geometry, taken directly from the Figma design
-// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
-// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
-// item so it fills / shrinks responsively within that box.
+// SubPage "slot wrap" geometry from Figma (node 449:7876). The middle slot is
+// an absolutely-centered fixed-size box; its inner content (node 3991:4125)
+// fills / shrinks responsively within that box.
 const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192
 const SUBPAGE_MIDDLE_HEIGHT = 32
 const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21
+const JIODOT_FALLBACK_SIZE = 32
+
+export type JioDotProps = {
+  /** Render size in px. Defaults to token `appBar/mainPage/jiodot/size` (32). */
+  size?: number
+  /** Modes used to resolve `appBar/mainPage/jiodot/size` when `size` is omitted. */
+  modes?: Modes
+}
+
+/**
+ * Figma "jiodot" mark (node 1117:1908). Opt-in via `leadingSlot` — MainPage
+ * does NOT render this by default so existing consumers stay empty-leading.
+ */
+export function JioDot({ size, modes = EMPTY_MODES }: JioDotProps) {
+  const resolvedSize =
+    size ??
+    (Number(getVariableByName('appBar/mainPage/jiodot/size', modes)) ||
+      JIODOT_FALLBACK_SIZE)
+  return (
+    <Svg
+      width={resolvedSize}
+      height={resolvedSize}
+      viewBox="0 0 32 32"
+      fill="none"
+      accessibilityRole="image"
+      accessibilityLabel="Jio"
+    >
+      <G clipPath="url(#jiodotClip)">
+        <Path
+          d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z"
+          fill="url(#jiodotGrad)"
+        />
+        <Path
+          d="M11.3039 9.64982H10.7705C9.75837 9.64982 9.20548 10.2205 9.20548 11.3621V16.8679C9.20548 18.2854 8.72667 18.7829 7.60341 18.7829C6.71985 18.7829 6.00192 18.3959 5.43096 17.6963C5.37555 17.6229 4.21615 18.1749 4.21615 19.5378C4.21615 21.0107 5.59629 21.9132 8.15689 21.9132C11.268 21.9132 12.9077 20.3479 12.9077 16.9233V11.3621C12.9059 10.222 12.3536 9.64982 11.3039 9.64982ZM23.7039 12.3381C20.6837 12.3381 18.6769 14.2531 18.6769 17.1085C18.6769 20.0365 20.6096 21.915 23.6482 21.915C26.6674 21.915 28.6556 20.0365 28.6556 17.1274C28.6573 14.2531 26.6867 12.3381 23.7039 12.3381ZM23.6668 19.206C22.4879 19.206 21.6781 18.3408 21.6781 17.107C21.6781 15.8922 22.5077 15.0264 23.6668 15.0264C24.8259 15.0264 25.6553 15.8922 25.6553 17.1257C25.6556 18.3221 24.8084 19.206 23.6668 19.206ZM16.1252 12.43H15.7563C14.8547 12.43 14.1735 12.8531 14.1735 14.1426V20.0347C14.1735 21.3423 14.8366 21.7476 15.7936 21.7476H16.1622C17.0644 21.7476 17.7086 21.3052 17.7086 20.0347V14.1426C17.7086 12.8169 17.0831 12.43 16.1252 12.43ZM15.9228 8.15885C14.7809 8.15885 14.063 8.80359 14.063 9.81634C14.063 10.8469 14.7999 11.4913 15.9779 11.4913C17.1196 11.4913 17.8378 10.8469 17.8378 9.81634C17.8378 8.78582 17.1012 8.15885 15.9228 8.15885Z"
+          fill="white"
+        />
+      </G>
+      <Defs>
+        <LinearGradient
+          id="jiodotGrad"
+          x1="11.085"
+          y1="9.25442"
+          x2="22.3469"
+          y2="15.7638"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FBDCAF" />
+          <Stop offset="1" stopColor="#AD8444" />
+        </LinearGradient>
+        <ClipPath id="jiodotClip">
+          <Rect width="32" height="32" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  )
+}
 
 export type AppBarProps = {
   /**
    * Type of the App Bar.
-   * - `MainPage`: Taller, usually has Jio logo (leading) and Profile/Notif (actions).
-   * - `SubPage`: Shorter, usually has Back arrow (leading) and Page Title (middle).
+   * - `MainPage`: Taller bar; no default leading (pass `JioDot` or your logo via `leadingSlot`).
+   * - `SubPage`: Shorter bar with default back arrow and centered middle slot.
    * @default "MainPage"
    */
-  type?: AppBarType;
+  type?: AppBarType
   /**
    * Slot for the leading element.
    * Defaults:
-   * - MainPage: Jio Logo (placeholder circle for now if no asset)
-   * - SubPage: Back Icon Button
+   * - MainPage: none (opt in with `<JioDot />` or any custom node)
+   * - SubPage: Back `NavArrow`
    */
-  leadingSlot?: React.ReactNode;
+  leadingSlot?: React.ReactNode
   /**
-   * Slot for the middle content.
-   * Often used for "Page Title" in SubPage.
+   * Slot for the middle content. Often used for a page title on SubPage.
    *
-   * On `SubPage` this is rendered as an absolutely-centered box (matching the
-   * Figma "slot wrap"): it stays centered in the bar regardless of how wide
-   * the leading/actions slots are, and its content fills/shrinks responsively
-   * within {@link middleSlotWidth}.
+   * On `SubPage` this is rendered as an absolutely-centered box (Figma
+   * "slot wrap"): it stays centered regardless of leading/actions width, and
+   * content fills/shrinks within {@link middleSlotWidth}.
    */
-  middleSlot?: React.ReactNode;
+  middleSlot?: React.ReactNode
   /**
    * Width of the centered `SubPage` middle slot, in px.
    * Defaults to the Figma value (192). Has no effect on `MainPage`.
    * @default 192
    */
-  middleSlotWidth?: number;
+  middleSlotWidth?: number
   /**
-   * Slot for the actions on the right.
+   * Slot for the actions on the right (IconButtons, Avatar, etc.).
    */
-  actionsSlot?: React.ReactNode;
+  actionsSlot?: React.ReactNode
   /**
    * Token modes to override.
    */
-  modes?: Modes;
+  modes?: Modes
   /**
-   * Callback for the default leading slot press (e.g. back button).
+   * Callback for the default SubPage leading back arrow.
    */
-  onLeadingPress?: () => void;
+  onLeadingPress?: () => void
   /**
    * Container style override.
    */
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
+  style?: StyleProp<ViewStyle>
+  accessibilityLabel?: string
+  accessibilityHint?: string
+} & Omit<
+  React.ComponentProps<typeof View>,
+  'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'
+>
 
-export default function AppBar({
+/**
+ * AppBar — top navigation bar for MainPage and SubPage layouts
+ * (Figma node 1070:18571).
+ *
+ * Visual values resolve from design tokens via `getVariableByName`. Slots
+ * cascade `modes` to children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AppBar
+ *   type="MainPage"
+ *   leadingSlot={<JioDot />}
+ *   actionsSlot={
+ *     <>
+ *       <IconButton iconName="ic_add" />
+ *       <IconButton iconName="ic_add" />
+ *       <Avatar />
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
@@ -82,14 +166,14 @@ export default function AppBar({
   ...rest
 }: AppBarProps) {
   const { modes: globalModes } = useTokens()
-  const modes = { Context2: 'AppBar', ...globalModes, ...propModes }
+  const modes = useMemo(
+    () => ({ Context2: 'AppBar', ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
 
   const isMain = type === 'MainPage'
   const isSub = type === 'SubPage'
 
-  // --- Tokens ---
-  // Construct token keys based on type. keys must be camelCase as per instruction.
-  // We use explicit string literals so that the extraction script can find them.
   const paddingHorizontal = isMain
     ? getVariableByName('appBar/mainPage/padding/horizontal', modes)
     : getVariableByName('appBar/subPage/padding/horizontal', modes)
@@ -106,61 +190,35 @@ export default function AppBar({
     ? getVariableByName('appBar/mainPage/actions/gap', modes)
     : getVariableByName('appBar/subPage/actions/gap', modes)
 
-  // Layout styles
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    // No `justifyContent` here: with the inline middle slot using `flex: 1`
-    // the three sections lay out naturally (leading | middle | actions).
-    // When middleSlot is absent we fall back to `space-between` at the wrapper
-    // level so leading & actions still anchor to the edges.
-    paddingHorizontal: paddingHorizontal ?? 16,
-    paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
-    backgroundColor: backgroundColor ?? '#FFFFFF',
-    // MainPage: h=68 (16 top/bot padding? 36 height content?)
-    // SubPage: h=52
+    paddingHorizontal: (paddingHorizontal as number) ?? 16,
+    paddingVertical: (paddingVertical as number) ?? (isMain ? 16 : 10),
+    backgroundColor: (backgroundColor as string) ?? '#FFFFFF',
   }
 
-  // --- Leading Slot Default ---
-  // SubPage default: Back Arrow
-  // MainPage default: Jio Logo (We'll use a placeholder or basic text if no asset, 
-  // but looking at "AppBarHome" before, it had "ic_hellojio". Let's stick to generic defaults or empty if not provided,
-  // but usually a component library provides sensible defaults.)
-
-  // Actually, let's implement the specific defaults mentioned in the plan/analysis
-  // SubPage: NavArrow props (icon, etc).
-
+  // MainPage: no default leading (backward compatible — consumers opt in via
+  // leadingSlot, e.g. <JioDot />). SubPage: default back NavArrow.
   let defaultLeading: React.ReactNode = null
-  if (leadingSlot === undefined) {
-    if (isSub) {
-      defaultLeading = (
-        <Pressable
-          {...(onLeadingPress ? { onPress: onLeadingPress } : {})}
-          hitSlop={8}
-          accessibilityRole="button"
-          accessibilityLabel={undefined}
-          style={({ pressed }) => ({
-            opacity: pressed ? 0.7 : 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-          })}
-        >
-          <NavArrow direction="Back" modes={modes} />
-        </Pressable>
-      )
-    } else {
-      // MainPage default leading: often the Brand Logo.
-      // We'll leave it empty or render a placeholder if desired, but standard AppBar often lets consumer pass logo.
-      // Previous code had `leadingIconName='ic_hellojio'` for Home.
-      // We will render nothing by default for MainPage leading to keep it flexible, OR a specialized Logo component if we had one.
-      // For now, let's assume consumer passes it for MainPage, or we leave empty.
-      // Wait, Figma screenshot shows "Jio" logo.
-      // The user said: "mostly token namings are 'camelCase'. Maximize existing component usage."
-      // I'll leave defaultLeading as null for MainPage unless I have a "BrandLogo" component.
-    }
+  if (leadingSlot === undefined && isSub) {
+    defaultLeading = (
+      <Pressable
+        {...(onLeadingPress ? { onPress: onLeadingPress } : {})}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={undefined}
+        style={({ pressed }) => ({
+          opacity: pressed ? 0.7 : 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        })}
+      >
+        <NavArrow direction="Back" modes={modes} />
+      </Pressable>
+    )
   }
 
-  // --- Process Slots ---
   const processedLeading = leadingSlot
     ? cloneChildrenWithModes([leadingSlot], modes)[0]
     : defaultLeading
@@ -169,40 +227,28 @@ export default function AppBar({
     ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes)
     : null
 
-  // Actions Gap wrapper
-  // The Figma has "Actions" slot with a gap.
   const actionsStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: actionsGap ?? 0,
+    gap: (actionsGap as number) ?? 0,
   }
 
   const processedActions = actionsSlot
-    ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
+    ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
     : null
 
-  // SubPage centers its middle slot via absolute positioning (see Figma
-  // "slot wrap"), so it never participates in the row flow. Only MainPage
-  // keeps the legacy in-flow middle slot.
+  // SubPage middle is absolute (Figma "slot wrap"); MainPage middle stays in-flow.
   const hasInFlowMiddle = isMain && !!processedMiddle
 
-  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
-  // remaining space, so leading & actions sit at the edges naturally. In all
-  // other cases we pin leading & actions to the outer edges with
-  // `space-between`; the SubPage middle floats above, centered.
+  // With an in-flow middle the flex:1 middle absorbs leftover space. Otherwise
+  // pin leading & actions to the edges; SubPage middle floats centered above.
   const wrapperStyle: ViewStyle = {
     ...containerStyle,
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between',
   }
 
-  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
-  // centering a fixed-height box with `top/left: 50%` + transform (which on
-  // Android resolves the percentage against an intermediate, content-driven
-  // parent height and lands a few px too high), the overlay STRETCHES to fill
-  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
-  // flexbox. This uses the exact same full-height vertical reference as the
-  // leading/actions row (`alignItems: 'center'`), so the middle content always
-  // sits on the same line as the back arrow and end slot on every platform.
+  // Overlay stretches to the full bar and centers content with flexbox so the
+  // middle aligns with leading/actions on every platform.
   const subPageMiddleOverlayStyle: ViewStyle = {
     position: 'absolute',
     top: 0,
@@ -214,9 +260,6 @@ export default function AppBar({
     justifyContent: 'center',
   }
 
-  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
-  // middle content from bleeding under the leading/actions slots while staying
-  // centered within the overlay above.
   const subPageMiddleBoxStyle: ViewStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
@@ -235,18 +278,11 @@ export default function AppBar({
       {...(accessibilityHint ? { accessibilityHint } : {})}
       {...rest}
     >
-      {/* Leading Section */}
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         {processedLeading}
       </View>
 
-      {/*
-       * MainPage in-flow middle — occupies the space between leading and
-       * actions (`flex: 1`) without overflowing. `minWidth: 0` lets the flex
-       * item shrink below its content's intrinsic width on platforms that
-       * respect it (web).
-       */}
-      {hasInFlowMiddle && (
+      {hasInFlowMiddle ? (
         <View
           style={{
             flex: 1,
@@ -259,19 +295,11 @@ export default function AppBar({
         >
           {processedMiddle}
         </View>
-      )}
+      ) : null}
 
-      {/* Actions Section */}
-      <View style={actionsStyle}>
-        {processedActions}
-      </View>
+      <View style={actionsStyle}>{processedActions}</View>
 
-      {/*
-       * SubPage middle — absolutely centered "slot wrap". The inner wrapper is
-       * a responsive `flex: 1` item (matching Figma's `flex-[1_0_0] min-w-px`)
-       * so its content fills / shrinks within the fixed-width box.
-       */}
-      {isSub && processedMiddle && (
+      {isSub && processedMiddle ? (
         <View style={subPageMiddleOverlayStyle} pointerEvents="box-none">
           <View style={subPageMiddleBoxStyle} pointerEvents="box-none">
             <View
@@ -289,7 +317,9 @@ export default function AppBar({
             </View>
           </View>
         </View>
-      )}
+      ) : null}
     </View>
   )
 }
+
+export default AppBar