jfs-components 0.1.25 → 0.1.28

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,368 @@
+import React, { useMemo } from 'react'
+import { View, 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, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type GridJustifyContent = 'start' | 'stretch' | 'space-between'
+export type GridAlignItems = 'start' | 'stretch' | 'center'
+
+export type GridProps = {
+  /**
+   * Number of columns per row. Defaults to `1`. Children flow left-to-right,
+   * top-to-bottom into this many columns.
+   */
+  columns?: number
+  /**
+   * Fixed row count. When set, the grid always renders `columns × rows` cells.
+   * Missing cells render as empty placeholders so the geometry stays stable.
+   * When omitted, the row count is derived from the number of children.
+   */
+  rows?: number
+  /**
+   * Fractional column track weights — the React Native equivalent of CSS
+   * `grid-template-columns: 1fr 2fr 1fr`. Each value becomes a `flex` grow
+   * weight on the matching column. Shorter arrays repeat the last weight;
+   * omitted values default to equal `1fr` columns.
+   */
+  columnFrs?: readonly number[]
+  /**
+   * Fractional row track weights. When provided, each row container receives
+   * a matching `flexGrow` weight. Useful when the grid should fill a fixed
+   * height and rows should share space proportionally.
+   */
+  rowFrs?: readonly number[]
+  /** Override the resolved column gap token. */
+  columnGap?: number
+  /** Override the resolved row gap token. */
+  rowGap?: number
+  /**
+   * Shorthand gap override applied when `columnGap` / `rowGap` are not set
+   * individually. Falls back to the `Grid/gap` token.
+   */
+  gap?: number
+  /** Uniform padding override for all sides. */
+  padding?: number
+  paddingHorizontal?: number
+  paddingVertical?: number
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  /**
+   * How cells are distributed along each row.
+   * - `'stretch'` (default) — cells expand using `columnFrs`.
+   * - `'start'` — cells hug the leading edge; trailing space stays empty.
+   * - `'space-between'` — leftover space is distributed between cells
+   *   (first cell flush-left, last cell flush-right).
+   */
+  justifyContent?: GridJustifyContent
+  /** Cross-axis alignment applied to every cell wrapper. Defaults to `'stretch'`. */
+  alignItems?: GridAlignItems
+  /**
+   * Slot content. Each child becomes one grid cell. `modes` cascade into all
+   * slot children automatically.
+   */
+  children?: React.ReactNode
+  /** Design token modes (e.g. `{ 'Slot gap': 'M' }`). */
+  modes?: Modes
+  /** Style override for the outer container. */
+  style?: StyleProp<ViewStyle>
+  /** Style override for the inner rows wrapper. */
+  contentStyle?: StyleProp<ViewStyle>
+  /** Style applied to every cell wrapper. */
+  cellStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the grid container. */
+  accessibilityLabel?: string
+  testID?: string
+}
+
+function toNumber(value: unknown, fallback: number): number {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return fallback
+}
+
+interface GridTokens {
+  backgroundColor: string
+  columnGap: number
+  rowGap: number
+  paddingTop: number
+  paddingBottom: number
+  paddingLeft: number
+  paddingRight: number
+}
+
+function resolveGridTokens(modes: Modes): GridTokens {
+  const gapFallback = toNumber(getVariableByName('Grid/gap', modes), 8)
+  const columnGap = toNumber(getVariableByName('Grid/column/gap', modes), gapFallback)
+  const rowGap = toNumber(getVariableByName('Grid/row/gap', modes), gapFallback)
+
+  const paddingHorizontal = toNumber(getVariableByName('Grid/padding/horizontal', modes), 8)
+  const paddingVertical = toNumber(getVariableByName('Grid/padding/vertical', modes), 8)
+  const paddingTop = toNumber(getVariableByName('Grid/padding/top', modes), paddingVertical)
+  const paddingBottom = toNumber(getVariableByName('Grid/padding/bottom', modes), paddingVertical)
+  const paddingLeft = toNumber(getVariableByName('Grid/padding/left', modes), paddingHorizontal)
+  const paddingRight = toNumber(getVariableByName('Grid/padding/right', modes), paddingHorizontal)
+
+  const backgroundColor =
+    (getVariableByName('Grid/background/color', modes) as string | null) ?? 'transparent'
+
+  return {
+    backgroundColor,
+    columnGap,
+    rowGap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+  }
+}
+
+function normalizeFrs(frs: readonly number[] | undefined, count: number): number[] {
+  if (!frs || frs.length === 0) {
+    return Array.from({ length: count }, () => 1)
+  }
+  return Array.from({ length: count }, (_, index) => {
+    const value = frs[index] ?? frs[frs.length - 1] ?? 1
+    return value > 0 ? value : 1
+  })
+}
+
+function resolveAlignSelf(alignItems: GridAlignItems): ViewStyle['alignSelf'] {
+  if (alignItems === 'center') return 'center'
+  if (alignItems === 'start') return 'flex-start'
+  return 'stretch'
+}
+
+function resolveRowJustifyContent(justifyContent: GridJustifyContent): ViewStyle['justifyContent'] {
+  if (justifyContent === 'space-between') return 'space-between'
+  if (justifyContent === 'start') return 'flex-start'
+  return 'flex-start'
+}
+
+function buildCellStyle(
+  columnFr: number,
+  justifyContent: GridJustifyContent,
+  alignItems: GridAlignItems,
+): ViewStyle {
+  const alignSelf = resolveAlignSelf(alignItems)
+
+  if (justifyContent === 'space-between' || justifyContent === 'start') {
+    return {
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      minWidth: 0,
+      alignSelf,
+    }
+  }
+
+  return {
+    flex: columnFr,
+    minWidth: 0,
+    alignSelf,
+  }
+}
+
+/**
+ * `Grid` — a token-driven layout grid for React Native.
+ *
+ * Mirrors the Figma "Grid" component: a padded container with configurable
+ * columns, rows, fractional column tracks (`columnFrs`), and gap tokens.
+ * Each slot child maps to one cell — no separate `GridItem` wrapper is needed.
+ *
+ * @component
+ */
+function Grid({
+  columns = 1,
+  rows,
+  columnFrs,
+  rowFrs,
+  columnGap: columnGapProp,
+  rowGap: rowGapProp,
+  gap: gapProp,
+  padding: paddingProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
+  paddingTop: paddingTopProp,
+  paddingBottom: paddingBottomProp,
+  paddingLeft: paddingLeftProp,
+  paddingRight: paddingRightProp,
+  justifyContent = 'stretch',
+  alignItems = 'stretch',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentStyle,
+  cellStyle,
+  accessibilityLabel,
+  testID,
+}: GridProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes],
+  )
+
+  const tokens = useMemo(() => resolveGridTokens(modes), [modes])
+
+  const resolvedColumnGap = columnGapProp ?? gapProp ?? tokens.columnGap
+  const resolvedRowGap = rowGapProp ?? gapProp ?? tokens.rowGap
+
+  const resolvedPadding = useMemo(
+    () => ({
+      paddingTop: paddingTopProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingTop,
+      paddingBottom: paddingBottomProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingBottom,
+      paddingLeft: paddingLeftProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingLeft,
+      paddingRight: paddingRightProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingRight,
+    }),
+    [
+      paddingTopProp,
+      paddingBottomProp,
+      paddingLeftProp,
+      paddingRightProp,
+      paddingHorizontalProp,
+      paddingVerticalProp,
+      paddingProp,
+      tokens,
+    ],
+  )
+
+  const safeColumns = Math.max(1, Math.floor(columns))
+
+  const processedChildren = useMemo(
+    () => cloneChildrenWithModes(flattenChildren(children), modes),
+    [children, modes],
+  )
+
+  const cellNodes = useMemo(() => {
+    const nodes = [...processedChildren]
+    if (rows != null) {
+      const targetCount = safeColumns * Math.max(1, Math.floor(rows))
+      while (nodes.length < targetCount) {
+        nodes.push(null)
+      }
+      if (nodes.length > targetCount) {
+        nodes.length = targetCount
+      }
+    }
+    return nodes
+  }, [processedChildren, rows, safeColumns])
+
+  const gridRows = useMemo(() => {
+    const result: React.ReactNode[][] = []
+    for (let index = 0; index < cellNodes.length; index += safeColumns) {
+      result.push(cellNodes.slice(index, index + safeColumns))
+    }
+    return result
+  }, [cellNodes, safeColumns])
+
+  const normalizedColumnFrs = useMemo(
+    () => normalizeFrs(columnFrs, safeColumns),
+    [columnFrs, safeColumns],
+  )
+
+  const normalizedRowFrs = useMemo(
+    () => (rowFrs ? normalizeFrs(rowFrs, gridRows.length) : null),
+    [rowFrs, gridRows.length],
+  )
+
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({
+      backgroundColor: tokens.backgroundColor,
+      ...resolvedPadding,
+      width: '100%',
+    }),
+    [tokens.backgroundColor, resolvedPadding],
+  )
+
+  const rowsContainerStyle = useMemo<ViewStyle>(
+    () => ({
+      gap: resolvedRowGap,
+      width: '100%',
+    }),
+    [resolvedRowGap],
+  )
+
+  const rowStyle = useMemo<ViewStyle>(
+    () => ({
+      flexDirection: 'row',
+      columnGap: resolvedColumnGap,
+      justifyContent: resolveRowJustifyContent(justifyContent),
+      alignItems: alignItems === 'stretch' ? 'stretch' : alignItems === 'center' ? 'center' : 'flex-start',
+      width: '100%',
+    }),
+    [resolvedColumnGap, justifyContent, alignItems],
+  )
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ??
+    `Grid, ${safeColumns} column${safeColumns === 1 ? '' : 's'}, ${gridRows.length} row${
+      gridRows.length === 1 ? '' : 's'
+    }`
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="none"
+      accessibilityLabel={defaultAccessibilityLabel}
+      testID={testID}
+    >
+      <View style={[rowsContainerStyle, contentStyle]}>
+        {gridRows.map((row, rowIndex) => {
+          const rowFr = normalizedRowFrs?.[rowIndex]
+          const spacersNeeded =
+            justifyContent === 'space-between' && row.length < safeColumns
+              ? safeColumns - row.length
+              : 0
+
+          return (
+            <View
+              key={`grid-row-${rowIndex}`}
+              style={rowFr != null ? [rowStyle, { flexGrow: rowFr }] : rowStyle}
+            >
+              {row.map((cell, columnIndex) => {
+                const absoluteIndex = rowIndex * safeColumns + columnIndex
+                const cellFlexStyle = buildCellStyle(
+                  normalizedColumnFrs[columnIndex] ?? 1,
+                  justifyContent,
+                  alignItems,
+                )
+
+                return (
+                  <View
+                    key={`grid-cell-${absoluteIndex}`}
+                    style={[cellFlexStyle, cellStyle]}
+                  >
+                    {cell}
+                  </View>
+                )
+              })}
+              {spacersNeeded > 0 &&
+                Array.from({ length: spacersNeeded }, (_, spacerIndex) => (
+                  <View
+                    key={`grid-spacer-${rowIndex}-${spacerIndex}`}
+                    style={buildCellStyle(
+                      normalizedColumnFrs[row.length + spacerIndex] ?? 1,
+                      justifyContent,
+                      alignItems,
+                    )}
+                  />
+                ))}
+            </View>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+export default React.memo(Grid)

package/src/components/NumberPagination/NumberPagination.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import GlassFill from '../../utils/GlassFill/GlassFill'
+import type { Modes } from '../../design-tokens'
+
+export type NumberPaginationProps = {
+  /** The 1-based active page index. Ignored if `children` is supplied. Defaults to 1. */
+  activePage?: number;
+  /** The total number of pages. Ignored if `children` is supplied. Defaults to 1. */
+  totalPages?: number;
+  /** Callback fired when a page button is pressed. Ignored if `children` is supplied. */
+  onPageChange?: (page: number) => void;
+  /** Custom children to override the default page buttons. */
+  children?: React.ReactNode;
+  modes?: Modes;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface NumberPaginationTokens {
+  containerStyle: ViewStyle;
+  activeItemStyle: ViewStyle;
+  inactiveItemStyle: ViewStyle;
+  activeTextStyle: TextStyle;
+  inactiveTextStyle: TextStyle;
+  blurIntensity: number;
+  backgroundColor: string;
+}
+
+function resolveNumberPaginationTokens(modes: Modes): NumberPaginationTokens {
+  const horizontalPadding = (getVariableByName('numberPagination/padding/horizontal', modes) ?? 4) as number
+  const verticalPadding = (getVariableByName('numberPagination/padding/vertical', modes) ?? 4) as number
+  const radiusRaw = (getVariableByName('numberPagination/radius', modes) ?? 9999) as number
+  const backgroundColor = (getVariableByName('numberPagination/background/color', modes) ?? 'rgba(141, 141, 141, 0.4)') as string
+  const borderColor = (getVariableByName('numberPagination/border/color', modes) ?? 'rgba(255, 255, 255, 0.15)') as string
+
+  // control number variables
+  const itemWidth = (getVariableByName('controlNumber/width', modes) ?? 32) as number
+  const itemHeight = (getVariableByName('controlNumber/height', modes) ?? 32) as number
+  const itemRadiusRaw = (getVariableByName('controlNumber/radius', modes) ?? 9999) as number
+  const activeBgColor = (getVariableByName('control/active/background/color', modes) ?? '#ffffff') as string
+  const activeTextColor = (getVariableByName('control/active/text/color', modes) ?? '#000000') as string
+  const inactiveTextColor = (getVariableByName('control/text/default', modes) ?? '#ffffff') as string
+
+  // typography variables
+  const fontFamily = (getVariableByName('numberPagination/fontFamily', modes) ?? 'JioType') as string
+  const fontSize = (getVariableByName('numberPagination/fontSize', modes) ?? 16) as number
+  const fontWeight = String(getVariableByName('numberPagination/fontWeight', modes) ?? '500') as TextStyle['fontWeight']
+  const lineHeight = (getVariableByName('numberPagination/lineHeight', modes) ?? 18) as number
+
+  const blurMinimal = (getVariableByName('blur/minimal', modes) ?? 29) as number
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(blurMinimal))))
+
+  const borderRadius = radiusRaw === 9999 ? 39 / 2 : radiusRaw
+  const itemRadius = itemRadiusRaw === 9999 ? itemWidth / 2 : itemRadiusRaw
+
+  return {
+    containerStyle: {
+      height: 39,
+      borderRadius,
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: horizontalPadding,
+      paddingVertical: verticalPadding,
+    },
+    activeItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: activeBgColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inactiveItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    activeTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: activeTextColor,
+      textAlign: 'center',
+    },
+    inactiveTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: inactiveTextColor,
+      textAlign: 'center',
+    },
+    blurIntensity,
+    backgroundColor,
+  }
+}
+
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+export default function NumberPagination({
+  activePage = 1,
+  totalPages = 1,
+  onPageChange,
+  children,
+  modes,
+  style,
+}: NumberPaginationProps) {
+  const tokens = useMemo(() => resolveNumberPaginationTokens(modes ?? {}), [modes])
+
+  const renderPages = () => {
+    if (children) {
+      return children
+    }
+
+    const pages = []
+    for (let i = 1; i <= totalPages; i++) {
+      const active = i === activePage
+      pages.push(
+        <Pressable
+          key={i}
+          onPress={() => onPageChange?.(i)}
+          style={({ pressed }) => [
+            active ? tokens.activeItemStyle : tokens.inactiveItemStyle,
+            pressed && { opacity: 0.7 },
+          ]}
+          accessibilityRole="button"
+          accessibilityState={{ selected: active }}
+          accessibilityLabel={`Page ${i}`}
+        >
+          <Text style={active ? tokens.activeTextStyle : tokens.inactiveTextStyle}>
+            {i}
+          </Text>
+        </Pressable>
+      )
+    }
+    return pages
+  }
+
+  return (
+    <View style={[tokens.containerStyle, style]}>
+      <GlassFill
+        tint="light"
+        intensity={tokens.blurIntensity}
+        overlayColor={tokens.backgroundColor}
+        androidTintWash={false}
+      />
+      <View style={{ flexDirection: 'row', alignItems: 'center', height: '100%' }}>
+        {renderPages()}
+      </View>
+    </View>
+  )
+}