jfs-components 0.0.99 → 0.1.2

package/lib/commonjs/components/TestimonialsCard/TestimonialsCard.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
+ * a bold title, and a body paragraph. It is typically used inside a horizontal
+ * carousel of customer testimonials.
+ *
+ * All styling values are resolved from Figma design tokens using the provided
+ * `modes`.
+ *
+ * @example
+ * ```tsx
+ * <TestimonialsCard
+ *   title="Aarav S."
+ *   body="I was dreading renewing my car insurance, but JioFinance made it a breeze."
+ * />
+ * ```
+ */
+function TestimonialsCard({
+  title = 'Title',
+  body = 'I was dreading renewing my car insurance, but JioFinance made it a breeze.',
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel
+}) {
+  // Container tokens
+  const background = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/background', modes) ?? '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/border/color', modes) ?? '#e8e8e8';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/radius', modes) ?? 8;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/padding/horizontal', modes) ?? 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/padding/vertical', modes) ?? 12;
+
+  // Title typography tokens
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontSize', modes) ?? 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Body typography tokens
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/color', modes) ?? '#010101';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontSize', modes) ?? 12;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/lineHeight', modes) ?? 16;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontWeight', modes) ?? 400;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const containerStyle = {
+    width: 180,
+    backgroundColor: background,
+    borderColor: borderColor,
+    borderWidth: 1,
+    borderRadius: radius,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    alignItems: 'flex-start',
+    gap: gap
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+    width: '100%'
+  };
+  const bodyTextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: bodyFontFamily,
+    fontWeight: bodyFontWeight,
+    width: '100%'
+  };
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {})
+  };
+  const resolvedAccessibilityLabel = accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      style: "Image",
+      modes: avatarModes,
+      ...avatarProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textContainerStyle,
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: title
+      }), !!body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: bodyTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: body
+      })]
+    })]
+  });
+}
+const textContainerStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(TestimonialsCard);

package/lib/commonjs/components/TextInput/TextInput.js

@@ -43,7 +43,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * Helper function to convert a color to a more transparent version for placeholder text.
  * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
- */const IS_WEB = _reactNative.Platform.OS === 'web';
+ */
+const IS_WEB = _reactNative.Platform.OS === 'web';
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';

package/lib/commonjs/components/docs/modeControls.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modeArgTypes = modeArgTypes;
+exports.modeDecorator = modeDecorator;
+exports.withModeControls = withModeControls;
+var _react = _interopRequireDefault(require("react"));
+var _figmaModes = require("../../design-tokens/figma-modes.generated");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Storybook helpers that turn a component's design-token collections into real,
+ * per-collection `select` controls and merge the picked values into the `modes`
+ * prop — so authors get the same enum-driven DX in the Storybook Controls panel
+ * that the typed `modes` prop gives them in code.
+ *
+ * Fully backward compatible:
+ *   - If nothing is picked, `modes` is left exactly as the story provided it.
+ *   - Any `modes` value the story already sets WINS over a control selection,
+ *     so existing stories render identically until someone touches a control.
+ *   - The synthetic control args are stripped before they reach the component,
+ *     so they never leak in as unknown props.
+ */const UNSET = '(default)';
+/**
+ * Resolve the list of collections to expose. Accepts a component name (looked up
+ * in the generated map), an explicit list, or both (merged + de-duplicated).
+ */
+function resolveCollections(componentOrCollections, extra = []) {
+  const fromName = typeof componentOrCollections === 'string' ? _figmaModes.FIGMA_COMPONENT_MODES[componentOrCollections] || [] : componentOrCollections;
+  const merged = new Set([...fromName, ...extra]);
+  // Only keep collections that actually have more than one mode to choose from.
+  return [...merged].filter(name => {
+    const modes = _figmaModes.FIGMA_MODES[name];
+    return Array.isArray(modes) && modes.length > 1;
+  });
+}
+
+/**
+ * Build `argTypes` entries — one `select` per multi-mode collection, grouped
+ * under a "Modes" category. Spread the result into your story `meta.argTypes`.
+ */
+function modeArgTypes(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  const argTypes = {};
+  for (const name of collections) {
+    const modes = _figmaModes.FIGMA_MODES[name];
+    argTypes[name] = {
+      name,
+      description: `\`${name}\` collection mode`,
+      control: {
+        type: 'select'
+      },
+      options: [UNSET, ...modes],
+      table: {
+        category: 'Modes'
+      }
+    };
+  }
+  return argTypes;
+}
+
+/**
+ * A decorator that merges the picked collection modes into `args.modes` and
+ * strips the synthetic control args before they reach the component.
+ */
+function modeDecorator(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  return function ModeControlsDecorator(Story, context) {
+    const args = context?.args || {};
+    const picked = {};
+    // Start from the real story args so nothing is dropped. Passing only the
+    // synthetic keys here would REPLACE the story args in this Storybook
+    // renderer, wiping out real props (e.g. `series`, slot nodes) and leaving
+    // the component to render empty/crash.
+    const override = {
+      ...args
+    };
+    for (const name of collections) {
+      const value = args[name];
+      if (value && value !== UNSET) {
+        picked[name] = value;
+      }
+      // Neutralise the synthetic arg so it is never spread onto the component.
+      override[name] = undefined;
+    }
+
+    // Explicit story-provided modes win over control selections.
+    override.modes = {
+      ...picked,
+      ...(args.modes || {})
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {
+      args: override
+    });
+  };
+}
+
+/**
+ * Convenience: returns `{ argTypes, decorators }` to spread directly into a
+ * story `meta`.
+ *
+ * @example
+ * const meta = {
+ *   title: 'Components/Button',
+ *   component: Button,
+ *   ...withModeControls('Button'),
+ * }
+ */
+function withModeControls(componentOrCollections, extra = []) {
+  return {
+    argTypes: modeArgTypes(componentOrCollections, extra),
+    decorators: [modeDecorator(componentOrCollections, extra)]
+  };
+}

package/lib/commonjs/components/index.js

@@ -513,6 +513,12 @@ Object.defineProperty(exports, "OTPResend", {
     return _OTP.OTPResend;
   }
 });
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function () {
+    return _Overlay.default;
+  }
+});
 Object.defineProperty(exports, "PageHero", {
   enumerable: true,
   get: function () {
@@ -723,6 +729,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "TestimonialsCard", {
+  enumerable: true,
+  get: function () {
+    return _TestimonialsCard.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function () {
@@ -918,6 +930,7 @@ var _NoteInput = _interopRequireDefault(require("./NoteInput/NoteInput"));
 var _Nudge = _interopRequireDefault(require("./Nudge/Nudge"));
 var _NavArrow = _interopRequireDefault(require("./NavArrow/NavArrow"));
 var _Numpad = _interopRequireDefault(require("./Numpad/Numpad"));
+var _Overlay = _interopRequireDefault(require("./Overlay/Overlay"));
 var _Title = _interopRequireDefault(require("./Title/Title"));
 var _Screen = _interopRequireDefault(require("./Screen/Screen"));
 var _Section = _interopRequireDefault(require("./Section/Section"));
@@ -981,6 +994,7 @@ var _StatItem = _interopRequireDefault(require("./StatItem/StatItem"));
 var _StatGroup = _interopRequireDefault(require("./StatGroup/StatGroup"));
 var _StrengthIndicator = _interopRequireDefault(require("./StrengthIndicator/StrengthIndicator"));
 var _SummaryTile = _interopRequireDefault(require("./SummaryTile/SummaryTile"));
+var _TestimonialsCard = _interopRequireDefault(require("./TestimonialsCard/TestimonialsCard"));
 var _Text = _interopRequireDefault(require("./Text/Text"));
 var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/SegmentedControl"));
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));

package/lib/commonjs/design-tokens/JFSThemeProvider.js

@@ -43,7 +43,7 @@ const JFSThemeProvider = ({
  * Hook to access the current design token context.
  *
  * returns {
- *   modes: Record<string, any> - The current active modes
+ *   modes: Modes - The current active modes
  *   getVariable: (name: string) => any - Function to resolve a token value
  * }
  */