jfs-components 0.0.1

package/src/components/MediaCard/MediaCard.tsx

@@ -0,0 +1,210 @@
+import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform, Image } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Button, { type ButtonProps } from '../Button/Button';
+import Avatar, { type AvatarProps } from '../Avatar/Avatar';
+
+/**
+ * Context to share 'modes' with child components.
+ */
+const MediaCardContext = createContext<{ modes?: Record<string, any> }>({});
+
+export interface MediaCardProps {
+    /**
+     * The background media content (e.g. an Image).
+     * It will be positioned absolutely to cover the card.
+     */
+    media?: React.ReactNode;
+    /**
+     * Content to render inside the card (e.g. MediaCard.Title, MediaCard.Footer).
+     */
+    children?: React.ReactNode;
+    /**
+     * Modes object for token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * MediaCard component implementation from Figma node 1241:4140.
+ * 
+ * Features a background media slot, a large title, and a glass-morphism footer.
+ */
+export function MediaCard({
+    media,
+    children,
+    modes = {},
+    style,
+}: MediaCardProps) {
+    // Container Tokens
+    const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
+    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0');
+    // Dimensions from Figma: w=369, h=308. We can make it flexible or default to these?
+    // Usually components should be flexible, but stories will constrain them.
+    // Figma context shows fixed/hug behavior. Let's start with flex container.
+
+    const containerStyle: ViewStyle = {
+        borderRadius: radius,
+        gap,
+        overflow: 'hidden',
+        position: 'relative',
+        // Default dimensions from Figma if needed, but better to let parent control or use defaults in stories.
+        // However, to match "Maximize existing component usage", we follow patterns.
+        // We'll trust the parent layout or style prop for width/height.
+        minHeight: 308, // inferred from Figma height as a good default or minimum
+    };
+
+    const mediaWithModes = isValidElement(media)
+        ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
+        : media;
+
+    return (
+        <MediaCardContext.Provider value={{ modes }}>
+            <View style={[containerStyle, style]}>
+                {/* Background Media Layer */}
+                <View style={StyleSheet.absoluteFill}>
+                    {mediaWithModes}
+                </View>
+
+                {/* Content Layer */}
+                {children}
+            </View>
+        </MediaCardContext.Provider>
+    );
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+/**
+ * Header/Title Wrapper
+ * It seems the title is just floating at the top with padding.
+ * Figma: "title wrap" p-[16px]
+ */
+export function Header({ children, style }: { children?: React.ReactNode; style?: StyleProp<ViewStyle> }) {
+    return (
+        <View style={[{ padding: 16, flex: 1 }, style]}>
+            {children}
+        </View>
+    );
+}
+
+/**
+ * Title component.
+ * Tokens: cardMedia/title/*
+ */
+export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+    const context = useContext(MediaCardContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff';
+    const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52');
+    const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68');
+    const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900';
+
+    const textStyle: TextStyle = {
+        color,
+        fontSize,
+        fontFamily,
+        lineHeight,
+        fontWeight: fontWeight as TextStyle['fontWeight'],
+    };
+
+    return <Text style={[textStyle, style]}>{children}</Text>;
+}
+
+/**
+ * Glass Footer Component
+ * Tokens: cardMedia/footer/*, glass/minimal, blur/minimal
+ */
+export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+    const context = useContext(MediaCardContext);
+    const modes = propModes || context.modes || {};
+
+    // Tokens
+    const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24');
+    const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16');
+    const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
+
+    // Glass Effect
+    // Figma:
+    // blur/minimal/background: "#1414174a"
+    // blur/minimal: 29
+    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
+    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        backgroundColor: glassBgColor,
+        // Web-specific backdrop filter for glass effect
+        // @ts-ignore
+        ...(Platform.OS === 'web' ? { backdropFilter: `blur(${blurRadius}px)` } : {}),
+    };
+
+    return (
+        <View style={[containerStyle, style]}>
+            {children}
+        </View>
+    );
+}
+
+/**
+ * Footer Title
+ * Tokens: cardMedia/footer/title/*
+ */
+export function FooterTitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+    const context = useContext(MediaCardContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff';
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14');
+    const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16');
+    const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800';
+
+    return (
+        <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
+            {children}
+        </Text>
+    );
+}
+
+/**
+ * Footer Subtitle
+ * Tokens: cardMedia/footer/subtitle/*
+ */
+export function FooterSubtitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+    const context = useContext(MediaCardContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1';
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12');
+    const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14');
+    const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400';
+
+    return (
+        <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
+            {children}
+        </Text>
+    );
+}
+
+// Attach sub-components
+MediaCard.Header = Header;
+MediaCard.Title = Title;
+MediaCard.Footer = Footer;
+MediaCard.FooterTitle = FooterTitle;
+MediaCard.FooterSubtitle = FooterSubtitle;
+
+export default MediaCard;

package/src/components/MoneyValue/MoneyValue.mdx

@@ -0,0 +1,63 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as MoneyValueStories from './MoneyValue.stories';
+import MoneyValue from './MoneyValue';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={MoneyValueStories} />
+
+# MoneyValue
+
+MoneyValue component that mirrors the Figma MoneyValue design.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={MoneyValueStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` with the currency and amount, especially when formatting includes abbreviations.',
+    'Ensure negative values are spoken clearly (e.g., prefix “minus”).',
+    'Avoid relying on color alone to convey gain/loss; pair with labels.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Amount</strong> — formatted value using token typography.</li>
+    <li><strong>Prefix/Suffix</strong> — optional currency symbol or unit.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep formatting logic in props; avoid injecting additional Text nodes around the component.',
+    'Use consistent locale/rounding rules across stories to avoid visual drift.',
+    'Pair with contextual labels (e.g., “Available balance”) for clarity.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={MoneyValue} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`moneyValue/gap`**
+- **`moneyValue/supportText/fontFamily`**
+- **`moneyValue/supportText/fontSize`**
+- **`moneyValue/supportText/fontWeight`**
+- **`moneyValue/supportText/lineHeight`**
+- **`moneyValue/text/color`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/MoneyValue/MoneyValue.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+// Map of common ISO 4217 currency codes to display symbols
+const CURRENCY_SYMBOLS = {
+  INR: '₹',
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  JPY: '¥',
+  CNY: '¥',
+  AUD: 'A$',
+  CAD: 'C$',
+  CHF: 'CHF',
+  HKD: 'HK$',
+  SGD: 'S$',
+  NZD: 'NZ$',
+  SEK: 'kr',
+  NOK: 'kr',
+  DKK: 'kr',
+  RUB: '₽',
+  BRL: 'R$',
+  ZAR: 'R',
+  AED: 'د.إ',
+  SAR: '﷼',
+  TRY: '₺',
+  KRW: '₩',
+  IDR: 'Rp',
+  THB: '฿',
+  MYR: 'RM',
+  PHP: '₱',
+  VND: '₫',
+  PKR: '₨',
+  BDT: '৳',
+  LKR: 'Rs',
+  NPR: 'Rs',
+}
+
+type MoneyValueProps = {
+  value?: string | number;
+  currency?: string;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+  currencyStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * MoneyValue component that mirrors the Figma MoneyValue design.
+ *
+ * The styling is fully resolved from Figma design tokens using `getVariableByName`
+ * and an optional `modes` configuration, consistent with other components in this library.
+ *
+ * Currency can be provided either as a symbol (e.g. "₹") or as an ISO code
+ * (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.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @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 {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 = '₹',
+  modes = {},
+  style,
+  valueStyle,
+  currencyStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: MoneyValueProps) {
+  // Resolve typography and layout tokens from Figma
+  const textColor =
+    getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
+  const fontSize =
+    getVariableByName('moneyValue/supportText/fontSize', modes) || 14
+  const lineHeight =
+    getVariableByName('moneyValue/supportText/lineHeight', modes) || 18
+  const fontWeightValue =
+    getVariableByName('moneyValue/supportText/fontWeight', modes) || 500
+  const fontWeight =
+    typeof fontWeightValue === 'number'
+      ? fontWeightValue.toString()
+      : fontWeightValue
+  const fontFamily =
+    getVariableByName('moneyValue/supportText/fontFamily', modes) ||
+    'System'
+  const gap = getVariableByName('moneyValue/gap', modes) || 4
+
+  // Resolve currency to a symbol, supporting both symbols and ISO codes
+  const resolvedCurrency = React.useMemo(() => {
+    if (!currency) return ''
+    const upper = currency.toUpperCase ? currency.toUpperCase() : currency
+    return (upper in CURRENCY_SYMBOLS ? CURRENCY_SYMBOLS[upper as keyof typeof CURRENCY_SYMBOLS] : currency)
+  }, [currency])
+
+  const baseTextStyle = {
+    color: textColor,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    fontFamily,
+  }
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+  }
+
+  // Generate default accessibility label from value and currency
+  const defaultAccessibilityLabel = accessibilityLabel || 
+    `${resolvedCurrency} ${value}`
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      {...rest}
+    >
+      <Text 
+        style={[baseTextStyle, currencyStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {resolvedCurrency}
+      </Text>
+      <Text 
+        style={[baseTextStyle, valueStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}
+
+export default MoneyValue
+
+
+
+
+
+
+
+

package/src/components/PageTitle/PageTitle.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as PageTitleStories from './PageTitle.stories';
+import PageTitle from './PageTitle';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={PageTitleStories} />
+
+# PageTitle
+
+PageTitle component that mirrors the Figma "Page Title" component.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={PageTitleStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Use clear, concise titles that describe the screen; they are announced as headers.',
+    'Avoid emoji-only titles; include text so screen readers have something to read.',
+    'Do not hide the title from accessibility unless a duplicate header exists nearby.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Title text</strong> — primary heading styled via tokens.</li>
+    <li><strong>Container</strong> — optional wrapper spacing provided by the layout.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep to one line where possible; let wrapping occur naturally for long locales.',
+    'Align typography with the page AppBar by sharing `modes`.',
+    'Use `style` sparingly to maintain consistent spacing across screens.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={PageTitle} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`pageTitle/fontFamily`**
+- **`pageTitle/fontSize`**
+- **`pageTitle/fontWeight`**
+- **`pageTitle/label/color`**
+- **`pageTitle/lineHeight`**
+- **`pageTitle/padding/horizontal`**
+- **`pageTitle/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/PageTitle/PageTitle.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+type PageTitleProps = {
+  title?: string;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * PageTitle component that mirrors the Figma "Page Title" component.
+ *
+ * This component displays a page title with design-token driven styling
+ * via `getVariableByName` and `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Page Title'] - Title text to display
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {Object} [props.textStyle] - Optional text style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function PageTitle({
+  title = 'Page Title',
+  modes = {},
+  style,
+  textStyle,
+  numberOfLines,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: PageTitleProps) {
+  // Resolve container padding tokens
+  const paddingHorizontal =
+    getVariableByName('pageTitle/padding/horizontal', modes) || 16
+  const paddingVertical =
+    getVariableByName('pageTitle/padding/vertical', modes) || 8
+
+  // Resolve typography tokens
+  const labelColor =
+    getVariableByName('pageTitle/label/color', modes) || '#0d0d0f'
+  const fontSize = getVariableByName('pageTitle/fontSize', modes) || 26
+  const lineHeight =
+    getVariableByName('pageTitle/lineHeight', modes) || 26
+  const fontFamily =
+    getVariableByName('pageTitle/fontFamily', modes) || 'System'
+  const fontWeightRaw =
+    getVariableByName('pageTitle/fontWeight', modes) || 700
+  const fontWeight =
+    typeof fontWeightRaw === 'number'
+      ? fontWeightRaw.toString()
+      : fontWeightRaw
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%',
+  }
+
+  const textStyleObj: TextStyle = {
+    color: labelColor,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    flexShrink: 1,
+  }
+
+  // Use provided accessibilityLabel or fall back to title
+  const defaultAccessibilityLabel = accessibilityLabel || title
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole="header"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      {...rest}
+    >
+      <Text 
+        style={[textStyleObj, textStyle]} 
+        numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {title}
+      </Text>
+    </View>
+  )
+}
+
+export default PageTitle
+

package/src/components/Section/Section.mdx

@@ -0,0 +1,83 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as SectionStories from './Section.stories';
+import Section from './Section';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={SectionStories} />
+
+# Section
+
+Section component that mirrors the Figma "Section" component.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Padding
+- **Modes:** Default | None
+- **Default:** Default
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={SectionStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel`/`accessibilityHint` to describe the section; defaults to title + support text.',
+    'If the header is pressable, keep `accessibilityRole="button"` and describe the action in the hint.',
+    'Ensure slot content exposes listitem/button roles as appropriate.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Header</strong> — title and optional support text with chevron when pressable.</li>
+    <li><strong>Body slot</strong> — arbitrary children, typically ListItems.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to keep typography and padding consistent with surrounding lists.',
+    'Keep support text brief; truncate to two lines to avoid overflow.',
+    'Avoid placing additional Pressables inside a pressable header; use the body slot for actions.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Section} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`section/background/color`**
+- **`section/gap`**
+- **`section/header/gap`**
+- **`section/header/padding/horizontal`**
+- **`section/header/padding/vertical`**
+- **`section/padding/horizontal`**
+- **`section/padding/vertical`**
+- **`section/radius`**
+- **`section/supportText/color`**
+- **`section/supportText/fontFamily`**
+- **`section/supportText/fontSize`**
+- **`section/supportText/fontWeight`**
+- **`section/supportText/lineHeight`**
+- **`section/title/color`**
+- **`section/title/fontFamily`**
+- **`section/title/fontSize`**
+- **`section/title/fontWeight`**
+- **`section/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.