jfs-components 0.0.99 → 0.1.2

package/lib/module/components/TestimonialsCard/TestimonialsCard.js

@@ -0,0 +1,116 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel
+}) {
+  // Container tokens
+  const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff';
+  const borderColor = getVariableByName('testimonialsCard/border/color', modes) ?? '#e8e8e8';
+  const radius = getVariableByName('testimonialsCard/radius', modes) ?? 8;
+  const gap = getVariableByName('testimonialsCard/gap', modes) ?? 8;
+  const paddingHorizontal = getVariableByName('testimonialsCard/padding/horizontal', modes) ?? 12;
+  const paddingVertical = getVariableByName('testimonialsCard/padding/vertical', modes) ?? 12;
+
+  // Title typography tokens
+  const titleColor = getVariableByName('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f';
+  const titleFontSize = getVariableByName('testimonialsCard/title/fontSize', modes) ?? 14;
+  const titleFontFamily = getVariableByName('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = getVariableByName('testimonialsCard/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Body typography tokens
+  const bodyColor = getVariableByName('testimonialsCard/title/color', modes) ?? '#010101';
+  const bodyFontSize = getVariableByName('testimonialsCard/subtitle/fontSize', modes) ?? 12;
+  const bodyLineHeight = getVariableByName('testimonialsCard/subtitle/lineHeight', modes) ?? 16;
+  const bodyFontFamily = getVariableByName('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontWeightRaw = 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__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      style: "Image",
+      modes: avatarModes,
+      ...avatarProps
+    }), /*#__PURE__*/_jsxs(View, {
+      style: textContainerStyle,
+      children: [!!title && /*#__PURE__*/_jsx(Text, {
+        style: titleTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: title
+      }), !!body && /*#__PURE__*/_jsx(Text, {
+        style: bodyTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: body
+      })]
+    })]
+  });
+}
+const textContainerStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4
+};
+export default /*#__PURE__*/React.memo(TestimonialsCard);

package/lib/module/components/TextInput/TextInput.js

@@ -5,7 +5,7 @@ import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-nativ
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TextInput component that mirrors the Figma "textInput" component.
  *
@@ -38,7 +38,6 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
  * 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.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -7,10 +7,9 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import Icon from '../../icons/Icon';
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Default static asset from the component folder.
 // Consumers can override the image via the `source` prop if needed.
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_AVATAR_IMAGE = require('./Image.png');
 const IS_WEB = Platform.OS === 'web';
 const IS_IOS = Platform.OS === 'ios';

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

@@ -0,0 +1,111 @@
+"use strict";
+
+import React from 'react';
+import { FIGMA_MODES, FIGMA_COMPONENT_MODES } from '../../design-tokens/figma-modes.generated';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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' ? 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 = 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`.
+ */
+export function modeArgTypes(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  const argTypes = {};
+  for (const name of collections) {
+    const modes = 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.
+ */
+export 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__*/_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'),
+ * }
+ */
+export function withModeControls(componentOrCollections, extra = []) {
+  return {
+    argTypes: modeArgTypes(componentOrCollections, extra),
+    decorators: [modeDecorator(componentOrCollections, extra)]
+  };
+}

package/lib/module/components/index.js

@@ -64,6 +64,7 @@ export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as Nudge } from './Nudge/Nudge';
 export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as Numpad } from './Numpad/Numpad';
+export { default as Overlay } from './Overlay/Overlay';
 export { default as Title } from './Title/Title';
 export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
@@ -131,6 +132,7 @@ export { default as StatItem } from './StatItem/StatItem';
 export { default as StatGroup } from './StatGroup/StatGroup';
 export { default as StrengthIndicator } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard } from './TestimonialsCard/TestimonialsCard';
 export { default as Text } from './Text/Text';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { default as Toggle } from './Toggle/Toggle';

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

@@ -38,7 +38,7 @@ export 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
  * }
  */