jfs-components 0.0.2 → 0.0.4

package/lib/module/components/CtaCard/CtaCard.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CtaCardStories from './CtaCard.stories';
+import CtaCard from './CtaCard';
+
+<Meta of={CtaCardStories} />
+
+# CtaCard
+
+`CtaCard` is a component used to display a Call-to-Action with an icon, title, body text, and a button.
+It is designed to be flexible, allowing content to be passed via props or fully customized via slots.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { CtaCard } from 'jfs-components'; // Adjust import based on your package structure
+
+// Basic Usage
+<CtaCard
+  title="Lets create your UPI ID"
+  body="Send and receive money securely."
+  iconName="ic_upi_number"
+  buttonLabel="Get started"
+  onPressButton={() => console.log('Pressed')}
+/>
+
+// Using Slots
+<CtaCard
+  titleSlot={<CustomTitle />}
+  buttonSlot={<CustomButton />}
+/>
+```
+
+<Canvas>
+  <Story of={CtaCardStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={CtaCard} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`ctaCard/background`**
+- **`ctaCard/body/color`**
+- **`ctaCard/body/fontFamily`**
+- **`ctaCard/body/fontSize`**
+- **`ctaCard/body/lineHeight`**
+- **`ctaCard/content/gap`**
+- **`ctaCard/gap`**
+- **`ctaCard/padding/horizontal`**
+- **`ctaCard/padding/vertical`**
+- **`ctaCard/radius`**
+- **`ctaCard/title/color`**
+- **`ctaCard/title/fontFamily`**
+- **`ctaCard/title/fontSize`**
+- **`ctaCard/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+

package/lib/module/components/CtaCard/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default } from './CtaCard';
+//# sourceMappingURL=index.js.map

package/lib/module/components/CtaCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sourceRoot":"../../../../src","sources":["components/CtaCard/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,WAAW","ignoreList":[]}

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -49,29 +49,56 @@ const CURRENCY_SYMBOLS = {
  * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
  * appropriate symbol, with special care to support INR and other major currencies.
  *
+ * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
+ * The `negative` prop can be used to explicitly override this behavior.
+ *
  * @component
  * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
  * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  *                                   Example: {"MoneyValue / Theme": "Default"}
  * @param {Object} [props.style] - Optional container style overrides.
  * @param {Object} [props.valueStyle] - Optional value text style overrides.
  * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
+ * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
+  negative,
   modes = {},
   style,
   valueStyle,
   currencyStyle,
+  negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
+  // Auto-detect negative from value and compute display value
+  const {
+    isNegative,
+    displayValue
+  } = React.useMemo(() => {
+    const stringValue = String(value);
+    const trimmed = stringValue.trim();
+    const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
+
+    // Strip leading minus sign for display (we show it separately)
+    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
+
+    // Use explicit negative prop if provided, otherwise use auto-detected
+    const showNegative = negative !== undefined ? negative : valueIsNegative;
+    return {
+      isNegative: showNegative,
+      displayValue: absoluteValue
+    };
+  }, [value, negative]);
+
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a';
   const fontSize = getVariableByName('moneyValue/supportText/fontSize', modes) || 14;
@@ -101,14 +128,19 @@ function MoneyValue({
   };
 
   // Generate default accessibility label from value and currency
-  const defaultAccessibilityLabel = accessibilityLabel || `${resolvedCurrency} ${value}`;
+  const defaultAccessibilityLabel = accessibilityLabel || `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     accessibilityRole: "text",
     accessibilityLabel: defaultAccessibilityLabel,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: [/*#__PURE__*/_jsx(Text, {
+    children: [isNegative && /*#__PURE__*/_jsx(Text, {
+      style: [baseTextStyle, negativeSignStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: "-"
+    }), /*#__PURE__*/_jsx(Text, {
       style: [baseTextStyle, currencyStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -117,7 +149,7 @@ function MoneyValue({
       style: [baseTextStyle, valueStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      children: value
+      children: displayValue
     })]
   });
 }

package/lib/module/components/MoneyValue/MoneyValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","CURRENCY_SYMBOLS","INR","USD","EUR","GBP","JPY","CNY","AUD","CAD","CHF","HKD","SGD","NZD","SEK","NOK","DKK","RUB","BRL","ZAR","AED","SAR","TRY","KRW","IDR","THB","MYR","PHP","VND","PKR","BDT","LKR","NPR","MoneyValue","value","currency","modes","style","valueStyle","currencyStyle","accessibilityLabel","accessibilityHint","rest","textColor","fontSize","lineHeight","fontWeightValue","fontWeight","toString","fontFamily","gap","resolvedCurrency","useMemo","upper","toUpperCase","baseTextStyle","color","containerStyle","flexDirection","alignItems","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/MoneyValue/MoneyValue.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","CURRENCY_SYMBOLS","INR","USD","EUR","GBP","JPY","CNY","AUD","CAD","CHF","HKD","SGD","NZD","SEK","NOK","DKK","RUB","BRL","ZAR","AED","SAR","TRY","KRW","IDR","THB","MYR","PHP","VND","PKR","BDT","LKR","NPR","MoneyValue","value","currency","negative","modes","style","valueStyle","currencyStyle","negativeSignStyle","accessibilityLabel","accessibilityHint","rest","isNegative","displayValue","useMemo","stringValue","String","trimmed","trim","valueIsNegative","startsWith","absoluteValue","slice","showNegative","undefined","textColor","fontSize","lineHeight","fontWeightValue","fontWeight","toString","fontFamily","gap","resolvedCurrency","upper","toUpperCase","baseTextStyle","color","containerStyle","flexDirection","alignItems","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/MoneyValue/MoneyValue.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -0,0 +1,109 @@
+"use strict";
+
+import React, { isValidElement, cloneElement } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
+ */
+export default function ThreadHero({
+  title = 'Subhash Rajan',
+  subtitle = 'Banking name: SHIVASHANKAR RAJAN',
+  caption,
+  renderAvatar,
+  modes = {},
+  style
+}) {
+  // Container Gaps
+  const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8;
+  const detailsGap = Number(getVariableByName('threadHero/details/gap', modes)) || 2;
+
+  // Title Styles
+  const titleColor = getVariableByName('threadHero/title/color', modes) || '#191b1e';
+  const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes)) || 16;
+  const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes)) || 20;
+  const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes) || '600';
+
+  // Subtitle Styles
+  const subtitleColor = getVariableByName('threadHero/subtitle/color', modes) || '#5d5d61';
+  const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes)) || 12;
+  const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes) || 'System';
+  const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes)) || 18;
+  const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes) || '500';
+
+  // Caption Styles
+  const captionColor = getVariableByName('threadHero/caption/color', modes) || '#5d5d61';
+  const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes)) || 12;
+  const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes) || 'System';
+  const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes)) || 18;
+  const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes) || '500';
+
+  // Styles
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: containerGap,
+    ...style
+  };
+  const detailsStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: detailsGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight,
+    textAlign: 'center',
+    minWidth: '100%'
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    fontFamily: subtitleFontFamily,
+    lineHeight: subtitleLineHeight,
+    fontWeight: subtitleFontWeight,
+    textAlign: 'center',
+    minWidth: '100%'
+  };
+  const captionStyle = {
+    color: captionColor,
+    fontSize: captionFontSize,
+    fontFamily: captionFontFamily,
+    lineHeight: captionLineHeight,
+    fontWeight: captionFontWeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+
+  // Process Avatar Slot to inject modes
+  const avatarContent = /*#__PURE__*/isValidElement(renderAvatar) ? /*#__PURE__*/cloneElement(renderAvatar, {
+    modes
+  }) : renderAvatar;
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: detailsStyle,
+      children: [avatarContent, title ? /*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
+        style: subtitleStyle,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: subtitle
+      }) : null]
+    }), caption ? /*#__PURE__*/_jsx(Text, {
+      style: captionStyle,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: caption
+    }) : null]
+  });
+}
+//# sourceMappingURL=ThreadHero.js.map

package/lib/module/components/ThreadHero/ThreadHero.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","isValidElement","cloneElement","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","ThreadHero","title","subtitle","caption","renderAvatar","modes","style","containerGap","Number","detailsGap","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeight","subtitleColor","subtitleFontSize","subtitleFontFamily","subtitleLineHeight","subtitleFontWeight","captionColor","captionFontSize","captionFontFamily","captionLineHeight","captionFontWeight","containerStyle","flexDirection","alignItems","gap","detailsStyle","width","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","textAlign","minWidth","subtitleStyle","captionStyle","avatarContent","children","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/ThreadHero/ThreadHero.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ThreadHero/ThreadHero.mdx

@@ -0,0 +1,69 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ThreadHeroStories from './ThreadHero.stories';
+import ThreadHero from './ThreadHero';
+
+<Meta of={ThreadHeroStories} />
+
+# ThreadHero
+
+The `ThreadHero` component displays a central user identity with an avatar, title, subtitle, and an optional caption.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import ThreadHero from './ThreadHero';
+import Avatar from '../Avatar/Avatar';
+
+<ThreadHero
+  title="Subhash Rajan"
+  subtitle="Banking name: SHIVASHANKAR RAJAN"
+  caption="+91 00000 00000"
+  renderAvatar={<Avatar size="small" initials="SR" />}
+/>
+```
+
+## Props
+
+<ArgsTable of={ThreadHero} />
+
+## Stories
+
+### Default
+
+<Canvas>
+  <Story of={ThreadHeroStories.Default} />
+</Canvas>
+
+### Without Caption
+
+<Canvas>
+  <Story of={ThreadHeroStories.WithoutCaption} />
+</Canvas>
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`threadHero/caption/color`**
+- **`threadHero/caption/fontFamily`**
+- **`threadHero/caption/fontSize`**
+- **`threadHero/caption/fontWeight`**
+- **`threadHero/caption/lineHeight`**
+- **`threadHero/details/gap`**
+- **`threadHero/gap`**
+- **`threadHero/subtitle/color`**
+- **`threadHero/subtitle/fontFamily`**
+- **`threadHero/subtitle/fontSize`**
+- **`threadHero/subtitle/fontWeight`**
+- **`threadHero/subtitle/lineHeight`**
+- **`threadHero/title/color`**
+- **`threadHero/title/fontFamily`**
+- **`threadHero/title/fontSize`**
+- **`threadHero/title/fontWeight`**
+- **`threadHero/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import NavArrow from '../NavArrow/NavArrow';
+import TransactionStatus from '../TransactionStatus/TransactionStatus';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TransactionBubble component displaying transaction details in a bubble card.
+ *
+ * @component
+ */
+export default function TransactionBubble({
+  description = 'Payment to Uber India',
+  amount = '56',
+  currency = '₹',
+  status = 'Expired',
+  statusDate = '20 Mar 2025',
+  modes = {},
+  style
+}) {
+  // --- Container Tokens ---
+  const backgroundColor = getVariableByName('transactionBubble/background', modes) || '#ffffff';
+  const borderColor = getVariableByName('transactionBubble/border/color', modes) || '#e5e5e5';
+  const borderWidth = Number(getVariableByName('transactionBubble/border/size', modes)) || 1;
+  const borderRadius = Number(getVariableByName('transactionBubble/radius', modes)) || 23;
+  const padding = Number(getVariableByName('transactionBubble/padding', modes)) || 16;
+  const gap = Number(getVariableByName('transactionBubble/gap', modes)) || 8;
+
+  // --- Description Tokens ---
+  const descColor = getVariableByName('transactionBubble/description/color', modes) || '#24262b';
+  const descFontSize = Number(getVariableByName('transactionBubble/description/fontSize', modes)) || 14;
+  const descLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', modes)) || 17;
+  const descFontFamily = getVariableByName('transactionBubble/description/fontFamily', modes) || 'System';
+
+  // --- Status Row Tokens ---
+  // Status wrapping gap from TransactionBubble definition for the row container
+  const statusHeight = Number(getVariableByName('transactionBubble/statusWrap/height', modes)) || 18;
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    padding,
+    gap,
+    alignItems: 'flex-start',
+    width: 231,
+    // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
+    ...style
+  };
+  const descriptionStyle = {
+    color: descColor,
+    fontSize: descFontSize,
+    lineHeight: descLineHeight,
+    fontFamily: descFontFamily,
+    fontWeight: '500' // Hardcoded in design as 'Medium' -> 500
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 8,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: descriptionStyle,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: description
+      }), /*#__PURE__*/_jsx(MoneyValue, {
+        value: amount,
+        currency: currency,
+        modes: modes
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        height: statusHeight // Enforce height from design
+      },
+      children: [/*#__PURE__*/_jsx(TransactionStatus, {
+        status: status,
+        date: statusDate,
+        modes: modes
+      }), /*#__PURE__*/_jsx(NavArrow, {
+        direction: "Forward",
+        modes: modes
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=TransactionBubble.js.map

package/lib/module/components/TransactionBubble/TransactionBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","MoneyValue","NavArrow","TransactionStatus","jsx","_jsx","jsxs","_jsxs","TransactionBubble","description","amount","currency","status","statusDate","modes","style","backgroundColor","borderColor","borderWidth","Number","borderRadius","padding","gap","descColor","descFontSize","descLineHeight","descFontFamily","statusHeight","containerStyle","alignItems","width","descriptionStyle","color","fontSize","lineHeight","fontFamily","fontWeight","children","numberOfLines","ellipsizeMode","value","flexDirection","justifyContent","height","date","direction"],"sourceRoot":"../../../../src","sources":["components/TransactionBubble/TransactionBubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TransactionBubble/TransactionBubble.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionBubbleStories from './TransactionBubble.stories';
+import TransactionBubble from './TransactionBubble';
+
+<Meta of={TransactionBubbleStories} />
+
+# TransactionBubble
+
+TransactionBubble component with design-token-driven styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionBubbleStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={TransactionBubble} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`transactionBubble/background`**
+- **`transactionBubble/border/color`**
+- **`transactionBubble/border/size`**
+- **`transactionBubble/description/color`**
+- **`transactionBubble/description/fontFamily`**
+- **`transactionBubble/description/fontSize`**
+- **`transactionBubble/description/lineHeight`**
+- **`transactionBubble/gap`**
+- **`transactionBubble/padding`**
+- **`transactionBubble/radius`**
+- **`transactionBubble/statusWrap/height`**
+
+All tokens support mode-based theming through the `modes` prop.