jfs-components 0.1.25 → 0.1.28

package/lib/module/components/FormUpload/FormUpload.js

@@ -0,0 +1,192 @@
+"use strict";
+
+import React, { useMemo, useCallback } from 'react';
+import { View, Text } 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 { useFormContext } from '../Form/Form';
+import SupportText from '../SupportText/SupportText';
+import Additem from './Additem';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function toNumber(value, fallback) {
+  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;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+}
+function resolveFormUploadTokens(modes) {
+  const gap = toNumber(getVariableByName('formField/input/gap', modes), 8);
+  const rowGap = toNumber(getVariableByName('formField/gap', modes), 8);
+  const labelColor = getVariableByName('formField/label/color', modes);
+  const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
+  const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
+  const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
+  const labelFontWeight = toFontWeight(getVariableByName('formField/label/fontWeight', modes), '500');
+  return {
+    gap,
+    rowGap,
+    labelColor,
+    labelFontFamily,
+    labelFontSize,
+    labelLineHeight,
+    labelFontWeight
+  };
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
+}
+
+/** Figma defaults for the remove `IconCapsule` on filled preview cells. Overridable via `modes`. */
+const FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS'
+};
+
+/**
+ * `FormUpload` — a form-aware upload row built from reusable `Additem` cells.
+ *
+ * The component mirrors the Figma "FormUpload" design: a label, a horizontal
+ * row of upload/preview cells, and support text. It integrates with the
+ * existing `<Form>` context so server-side validation errors automatically
+ * show below the row, and it clears those errors when attachments change.
+ *
+ * Upload behaviour is provided through the `picker` prop so the library stays
+ * free of native image-picker dependencies. Pass any picker that returns the
+ * `AdditemPickerResult` shape and the empty cell becomes a real upload trigger
+ * on both iOS and Android.
+ */
+function FormUpload({
+  label,
+  supportText,
+  name,
+  attachments = [],
+  maxCount,
+  onAttachmentsChange,
+  picker,
+  errorMessage,
+  isInvalid = false,
+  isDisabled = false,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  rowStyle,
+  accessibilityLabel,
+  testID
+}) {
+  const formCtx = useFormContext();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const resolvedErrorMessage = errorMessage ?? formError;
+  const {
+    modes: globalModes
+  } = useTokens();
+  const baseModes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const modes = useMemo(() => ({
+    ...baseModes,
+    'FormField States': resolvedIsInvalid ? 'Error' : 'Idle',
+    Status: resolvedIsInvalid ? 'Error' : 'Auto'
+  }), [baseModes, resolvedIsInvalid]);
+
+  // Empty cells rely on `Additem`'s built-in Neutral / Low / S defaults for the
+  // add icon. Preview cells use the tighter remove-icon treatment from Figma.
+  const previewAdditemModes = useMemo(() => ({
+    ...FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = useMemo(() => resolveFormUploadTokens(modes), [modes]);
+  const handleAssetsPicked = useCallback(assets => {
+    if (isDisabled) return;
+    const next = [...attachments, ...assets];
+    if (maxCount != null && next.length > maxCount) {
+      next.length = maxCount;
+    }
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, maxCount, onAttachmentsChange, isDisabled, name, formCtx]);
+  const handleRemove = useCallback(index => {
+    if (isDisabled) return;
+    const next = attachments.filter((_, i) => i !== index);
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, onAttachmentsChange, isDisabled, name, formCtx]);
+  const containerStyle = useMemo(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const rowStyleResolved = useMemo(() => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: tokens.rowGap,
+    alignItems: 'flex-start'
+  }), [tokens.rowGap]);
+  const labelStyle = useMemo(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens]);
+  const resolvedA11yLabel = accessibilityLabel ?? label ?? 'Attachment upload';
+  const canAddMore = maxCount == null || attachments.length < maxCount;
+  const renderContent = () => {
+    if (children) {
+      return cloneChildrenWithModes(children, modes);
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [attachments.map((attachment, index) => /*#__PURE__*/_jsx(Additem, {
+        state: "preview",
+        imageSource: attachment.uri,
+        onRemove: () => handleRemove(index),
+        modes: previewAdditemModes,
+        isDisabled: isDisabled,
+        accessibilityLabel: attachment.name ?? `Attachment ${index + 1}`,
+        testID: `${testID}-item-${index}`
+      }, `${attachment.uri}-${index}`)), canAddMore && /*#__PURE__*/_jsx(Additem, {
+        state: "empty",
+        picker: picker,
+        onAssetsPicked: handleAssetsPicked,
+        modes: modes,
+        isDisabled: isDisabled,
+        testID: `${testID}-add`
+      })]
+    });
+  };
+  const supportLabel = resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText;
+  const supportStatus = resolvedIsInvalid ? 'Error' : 'Neutral';
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: resolvedA11yLabel,
+    testID: testID,
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: label
+    }), /*#__PURE__*/_jsx(View, {
+      style: [rowStyleResolved, rowStyle],
+      children: renderContent()
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/_jsx(SupportText, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    })]
+  });
+}
+export default /*#__PURE__*/React.memo(FormUpload);

package/lib/module/components/Grid/Grid.js

@@ -0,0 +1,201 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function toNumber(value, fallback) {
+  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;
+}
+function resolveGridTokens(modes) {
+  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) ?? 'transparent';
+  return {
+    backgroundColor,
+    columnGap,
+    rowGap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+}
+function normalizeFrs(frs, count) {
+  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) {
+  if (alignItems === 'center') return 'center';
+  if (alignItems === 'start') return 'flex-start';
+  return 'stretch';
+}
+function resolveRowJustifyContent(justifyContent) {
+  if (justifyContent === 'space-between') return 'space-between';
+  if (justifyContent === 'start') return 'flex-start';
+  return 'flex-start';
+}
+function buildCellStyle(columnFr, justifyContent, alignItems) {
+  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
+}) {
+  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 = [];
+    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(() => ({
+    backgroundColor: tokens.backgroundColor,
+    ...resolvedPadding,
+    width: '100%'
+  }), [tokens.backgroundColor, resolvedPadding]);
+  const rowsContainerStyle = useMemo(() => ({
+    gap: resolvedRowGap,
+    width: '100%'
+  }), [resolvedRowGap]);
+  const rowStyle = useMemo(() => ({
+    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 /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: defaultAccessibilityLabel,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [rowsContainerStyle, contentStyle],
+      children: gridRows.map((row, rowIndex) => {
+        const rowFr = normalizedRowFrs?.[rowIndex];
+        const spacersNeeded = justifyContent === 'space-between' && row.length < safeColumns ? safeColumns - row.length : 0;
+        return /*#__PURE__*/_jsxs(View, {
+          style: rowFr != null ? [rowStyle, {
+            flexGrow: rowFr
+          }] : rowStyle,
+          children: [row.map((cell, columnIndex) => {
+            const absoluteIndex = rowIndex * safeColumns + columnIndex;
+            const cellFlexStyle = buildCellStyle(normalizedColumnFrs[columnIndex] ?? 1, justifyContent, alignItems);
+            return /*#__PURE__*/_jsx(View, {
+              style: [cellFlexStyle, cellStyle],
+              children: cell
+            }, `grid-cell-${absoluteIndex}`);
+          }), spacersNeeded > 0 && Array.from({
+            length: spacersNeeded
+          }, (_, spacerIndex) => /*#__PURE__*/_jsx(View, {
+            style: buildCellStyle(normalizedColumnFrs[row.length + spacerIndex] ?? 1, justifyContent, alignItems)
+          }, `grid-spacer-${rowIndex}-${spacerIndex}`))]
+        }, `grid-row-${rowIndex}`);
+      })
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Grid);

package/lib/module/components/NumberPagination/NumberPagination.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function resolveNumberPaginationTokens(modes) {
+  const horizontalPadding = getVariableByName('numberPagination/padding/horizontal', modes) ?? 4;
+  const verticalPadding = getVariableByName('numberPagination/padding/vertical', modes) ?? 4;
+  const radiusRaw = getVariableByName('numberPagination/radius', modes) ?? 9999;
+  const backgroundColor = getVariableByName('numberPagination/background/color', modes) ?? 'rgba(141, 141, 141, 0.4)';
+  const borderColor = getVariableByName('numberPagination/border/color', modes) ?? 'rgba(255, 255, 255, 0.15)';
+
+  // control number variables
+  const itemWidth = getVariableByName('controlNumber/width', modes) ?? 32;
+  const itemHeight = getVariableByName('controlNumber/height', modes) ?? 32;
+  const itemRadiusRaw = getVariableByName('controlNumber/radius', modes) ?? 9999;
+  const activeBgColor = getVariableByName('control/active/background/color', modes) ?? '#ffffff';
+  const activeTextColor = getVariableByName('control/active/text/color', modes) ?? '#000000';
+  const inactiveTextColor = getVariableByName('control/text/default', modes) ?? '#ffffff';
+
+  // typography variables
+  const fontFamily = getVariableByName('numberPagination/fontFamily', modes) ?? 'JioType';
+  const fontSize = getVariableByName('numberPagination/fontSize', modes) ?? 16;
+  const fontWeight = String(getVariableByName('numberPagination/fontWeight', modes) ?? '500');
+  const lineHeight = getVariableByName('numberPagination/lineHeight', modes) ?? 18;
+  const blurMinimal = getVariableByName('blur/minimal', modes) ?? 29;
+  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
+}) {
+  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(/*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onPageChange?.(i),
+        style: ({
+          pressed
+        }) => [active ? tokens.activeItemStyle : tokens.inactiveItemStyle, pressed && {
+          opacity: 0.7
+        }],
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: `Page ${i}`,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: active ? tokens.activeTextStyle : tokens.inactiveTextStyle,
+          children: i
+        })
+      }, i));
+    }
+    return pages;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [tokens.containerStyle, style],
+    children: [/*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: tokens.backgroundColor,
+      androidTintWash: false
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: '100%'
+      },
+      children: renderPages()
+    })]
+  });
+}