jfs-components 0.0.40 → 0.0.42

package/lib/commonjs/components/Form/Form.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useFormContext = useFormContext;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FormContext = /*#__PURE__*/(0, _react.createContext)(null);
+function useFormContext() {
+  return (0, _react.useContext)(FormContext);
+}
+function Form({
+  children,
+  validationErrors: externalErrors,
+  onSubmit,
+  modes: propModes = {},
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const [clearedFields, setClearedFields] = (0, _react.useState)({});
+
+  // Re-sync cleared state when external errors change reference
+  const prevErrorsRef = _react.default.useRef(externalErrors);
+  if (externalErrors !== prevErrorsRef.current) {
+    prevErrorsRef.current = externalErrors;
+    setClearedFields({});
+  }
+  const validationErrors = (0, _react.useMemo)(() => {
+    if (!externalErrors) return {};
+    const result = {};
+    for (const key of Object.keys(externalErrors)) {
+      if (!clearedFields[key]) {
+        result[key] = externalErrors[key];
+      }
+    }
+    return result;
+  }, [externalErrors, clearedFields]);
+  const onFieldChange = (0, _react.useCallback)(name => {
+    if (externalErrors && name in externalErrors) {
+      setClearedFields(prev => ({
+        ...prev,
+        [name]: true
+      }));
+    }
+  }, [externalErrors]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    validationErrors,
+    onFieldChange
+  }), [validationErrors, onFieldChange]);
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('form/gap', modes), 10) || 12;
+  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('form/padding/horizontal', modes), 10) || 0;
+  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('form/padding/vertical', modes), 10) || 0;
+  const containerStyle = (0, _react.useMemo)(() => ({
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  }), [gap, paddingHorizontal, paddingVertical]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [containerStyle, style],
+      accessibilityRole: "none",
+      accessibilityLabel: accessibilityLabel,
+      testID: testID,
+      children: children
+    })
+  });
+}
+var _default = exports.default = Form;

package/lib/commonjs/components/FormField/FormField.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function useFormField(props) {
+  const {
+    type = 'text',
+    isDisabled = false,
+    isInvalid = false,
+    supportText,
+    errorMessage,
+    modes: propModes = {},
+    onFocus,
+    onBlur
+  } = props;
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  // Merge FormField States collection based on focus
+  const modes = (0, _react.useMemo)(() => ({
+    ...baseModes,
+    'FormField States': isFocused ? 'Active' : 'Idle'
+  }), [baseModes, isFocused]);
+
+  // -- Label tokens (from "FormField / Output" collection) --
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#0c0d10';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+  const labelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 10) || 14;
+  const labelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 10) || 17;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 10) || 8;
+
+  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
+  const inputPaddingH = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 10) || 12;
+  const inputGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 10) || 8;
+  const inputRadius = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 10) || 8;
+  const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
+  const inputFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 10) || 16;
+  const inputLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 10) || 45;
+  const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
+  const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
+  const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
+  const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+  const inputBorderSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 10) || 1;
+
+  // -- Styles --
+  const labelStyle = (0, _react.useMemo)(() => ({
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+  const wrapperStyle = (0, _react.useMemo)(() => ({
+    gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [gap, isDisabled]);
+  const requiredIndicatorStyle = (0, _react.useMemo)(() => ({
+    color: '#d93d3d',
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  }), [labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+
+  // Style overrides for the input row, sourced from formField/input/* tokens
+  const inputContainerStyle = (0, _react.useMemo)(() => ({
+    backgroundColor: inputBackground,
+    borderColor: inputBorderColor,
+    borderWidth: inputBorderSize,
+    borderRadius: inputRadius,
+    paddingHorizontal: inputPaddingH,
+    gap: inputGap
+  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap]);
+  const inputTextStyle = (0, _react.useMemo)(() => ({
+    color: inputTextColor,
+    fontSize: inputFontSize,
+    lineHeight: inputLineHeight,
+    fontFamily: inputFontFamily,
+    fontWeight: inputFontWeight
+  }), [inputTextColor, inputFontSize, inputLineHeight, inputFontFamily, inputFontWeight]);
+
+  // -- Support text logic --
+  const supportStatus = isInvalid ? 'Error' : 'Neutral';
+  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
+
+  // -- Input type derived props --
+  const secureTextEntry = type === 'password';
+  const keyboardType = type === 'email' ? 'email-address' : 'default';
+  const autoCapitalize = type === 'email' || type === 'password' ? 'none' : 'sentences';
+
+  // -- Event handlers --
+  const handleFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  return {
+    modes,
+    labelStyle,
+    wrapperStyle,
+    requiredIndicatorStyle,
+    inputContainerStyle,
+    inputTextStyle,
+    supportStatus,
+    supportLabel,
+    secureTextEntry,
+    keyboardType,
+    autoCapitalize,
+    handleFocus,
+    handleBlur
+  };
+}
+function FormField({
+  label,
+  placeholder,
+  value = '',
+  onChangeText,
+  type = 'text',
+  leading,
+  trailing,
+  leadingIconName,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  supportText,
+  errorMessage,
+  modes = {},
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: resolvedModes,
+    labelStyle,
+    wrapperStyle,
+    requiredIndicatorStyle,
+    inputContainerStyle,
+    inputTextStyle,
+    supportStatus,
+    supportLabel,
+    secureTextEntry,
+    keyboardType,
+    autoCapitalize,
+    handleFocus,
+    handleBlur
+  } = useFormField({
+    type,
+    isDisabled,
+    isInvalid,
+    supportText,
+    errorMessage,
+    modes,
+    onFocus,
+    onBlur
+  });
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    accessible: true,
+    accessibilityRole: "none",
+    accessibilityLabel: resolvedA11yLabel,
+    accessibilityState: {
+      disabled: isDisabled
+    },
+    children: [label != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'baseline'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: labelStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      placeholder: placeholder || '',
+      value: value,
+      ...(onChangeText ? {
+        onChangeText
+      } : {}),
+      leading: leading,
+      trailing: trailing,
+      leadingIconName: leadingIconName || 'ic_search',
+      modes: resolvedModes,
+      style: inputContainerStyle,
+      inputStyle: inputTextStyle,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      secureTextEntry: secureTextEntry,
+      keyboardType: keyboardType,
+      autoCapitalize: autoCapitalize,
+      editable: !isDisabled,
+      accessibilityLabel: resolvedA11yLabel,
+      accessibilityHint: accessibilityHint || ''
+    }), supportLabel != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: resolvedModes
+    })]
+  });
+}
+var _default = exports.default = FormField;

package/lib/commonjs/components/index.js

@@ -135,6 +135,18 @@ Object.defineProperty(exports, "FilterBar", {
     return _FilterBar.default;
   }
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _Form.default;
+  }
+});
+Object.defineProperty(exports, "FormField", {
+  enumerable: true,
+  get: function () {
+    return _FormField.default;
+  }
+});
 Object.defineProperty(exports, "HStack", {
   enumerable: true,
   get: function () {
@@ -297,6 +309,12 @@ Object.defineProperty(exports, "VStack", {
     return _VStack.default;
   }
 });
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: function () {
+    return _Form.useFormContext;
+  }
+});
 var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
 var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
@@ -312,6 +330,8 @@ var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
 var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
+var _Form = _interopRequireWildcard(require("./Form/Form"));
+var _FormField = _interopRequireDefault(require("./FormField/FormField"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
@@ -346,4 +366,5 @@ var _InputSearch = _interopRequireDefault(require("./InputSearch/InputSearch"));
 var _SupportText = _interopRequireDefault(require("./SupportText/SupportText"));
 var _SupportTextIcon = _interopRequireDefault(require("./SupportText/SupportTextIcon"));
 var _RadioButton = _interopRequireDefault(require("./RadioButton/RadioButton"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }