jfs-components 0.0.1

package/lib/module/components/MediaCard/MediaCard.mdx

@@ -0,0 +1,107 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as MediaCardStories from './MediaCard.stories';
+import MediaCard from './MediaCard';
+import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+import { View, Image, Text } from 'react-native';
+
+<Meta of={MediaCardStories} />
+
+## 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.
+
+### Contrast Context
+- **Modes:** on dark | on light
+- **Default:** on dark
+## Usage
+
+<Canvas>
+  <Story of={MediaCardStories.Default} />
+</Canvas>
+
+### Example Usage
+
+```tsx
+import { Image, View } from 'react-native';
+import MediaCard from './components/MediaCard/MediaCard';
+import Avatar from './components/Avatar/Avatar'; // Assuming path
+import Button from './components/Button/Button'; // Assuming path
+
+function MyMediaCard() {
+  return (
+    <MediaCard
+      media={
+        <Image 
+          source={{ uri: 'https://picsum.photos/400/400' }} 
+          style={{ width: '100%', height: '100%' }}
+          resizeMode="cover"
+        />
+      }
+      style={{ width: 369 }}
+    >
+      <MediaCard.Header>
+        <MediaCard.Title>Big News</MediaCard.Title>
+      </MediaCard.Header>
+
+      <MediaCard.Footer>
+          <Avatar 
+            initials="JS" 
+            modes={{ 'Avatar / Size': 'S' }} 
+          />
+          <View style={{ flex: 1 }}>
+            <MediaCard.FooterTitle>Subscribed</MediaCard.FooterTitle>
+            <MediaCard.FooterSubtitle>Active now</MediaCard.FooterSubtitle>
+          </View>
+        
+        <Button 
+          label="Open" 
+          modes={{ 'Button / Size': 'S' }}
+          onPress={() => console.log('Open')}
+        />
+      </MediaCard.Footer>
+    </MediaCard>
+  );
+}
+```
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — Wrapper with `cardMedia` tokens for radius and overflow.</li>
+    <li><strong>Media Slot</strong> — Background layer for images.</li>
+    <li><strong>Header / Title</strong> — Overlay title with `cardMedia/title` tokens.</li>
+    <li><strong>Footer</strong> — Bottom glass-effect container using `blur/minimal` and `glass/minimal` concepts.</li>
+  </ul>
+</AnatomySection>
+
+## Props
+
+<ArgsTable of={MediaCard} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`blur/minimal`**
+- **`blur/minimal/background`**
+- **`cardMedia/footer/gap`**
+- **`cardMedia/footer/padding/horizontal`**
+- **`cardMedia/footer/padding/vertical`**
+- **`cardMedia/footer/subtitle/color`**
+- **`cardMedia/footer/subtitle/fontFamily`**
+- **`cardMedia/footer/subtitle/fontSize`**
+- **`cardMedia/footer/subtitle/fontWeight`**
+- **`cardMedia/footer/subtitle/lineHeight`**
+- **`cardMedia/footer/title/color`**
+- **`cardMedia/footer/title/fontFamily`**
+- **`cardMedia/footer/title/fontSize`**
+- **`cardMedia/footer/title/fontWeight`**
+- **`cardMedia/footer/title/lineHeight`**
+- **`cardMedia/gap`**
+- **`cardMedia/radius`**
+- **`cardMedia/title/color`**
+- **`cardMedia/title/fontFamily`**
+- **`cardMedia/title/fontSize`**
+- **`cardMedia/title/fontWeight`**
+- **`cardMedia/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

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

@@ -0,0 +1,125 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+// Map of common ISO 4217 currency codes to display symbols
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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'
+};
+/**
+ * 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
+}) {
+  // 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] : currency;
+  }, [currency]);
+  const baseTextStyle = {
+    color: textColor,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    fontFamily
+  };
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap
+  };
+
+  // Generate default accessibility label from value and currency
+  const defaultAccessibilityLabel = accessibilityLabel || `${resolvedCurrency} ${value}`;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [baseTextStyle, currencyStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: resolvedCurrency
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [baseTextStyle, valueStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: value
+    })]
+  });
+}
+export default MoneyValue;
+//# sourceMappingURL=MoneyValue.js.map

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

@@ -0,0 +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":[]}

package/lib/module/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/lib/module/components/PageTitle/PageTitle.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  // 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 = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const textStyleObj = {
+    color: labelColor,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    flexShrink: 1
+  };
+
+  // Use provided accessibilityLabel or fall back to title
+  const defaultAccessibilityLabel = accessibilityLabel || title;
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "header",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [textStyleObj, textStyle],
+      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: title
+    })
+  });
+}
+export default PageTitle;
+//# sourceMappingURL=PageTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","PageTitle","title","modes","style","textStyle","numberOfLines","accessibilityLabel","accessibilityHint","rest","paddingHorizontal","paddingVertical","labelColor","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","containerStyle","flexDirection","alignItems","width","textStyleObj","color","flexShrink","defaultAccessibilityLabel","accessibilityRole","children","undefined","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/PageTitle/PageTitle.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAC;EACjBC,KAAK,GAAG,YAAY;EACpBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACW,CAAC,EAAE;EACjB;EACA,MAAMC,iBAAiB,GACrBZ,iBAAiB,CAAC,8BAA8B,EAAEK,KAAK,CAAC,IAAI,EAAE;EAChE,MAAMQ,eAAe,GACnBb,iBAAiB,CAAC,4BAA4B,EAAEK,KAAK,CAAC,IAAI,CAAC;;EAE7D;EACA,MAAMS,UAAU,GACdd,iBAAiB,CAAC,uBAAuB,EAAEK,KAAK,CAAC,IAAI,SAAS;EAChE,MAAMU,QAAQ,GAAGf,iBAAiB,CAAC,oBAAoB,EAAEK,KAAK,CAAC,IAAI,EAAE;EACrE,MAAMW,UAAU,GACdhB,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAC,IAAI,EAAE;EACxD,MAAMY,UAAU,GACdjB,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAC,IAAI,QAAQ;EAC9D,MAAMa,aAAa,GACjBlB,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAC,IAAI,GAAG;EACzD,MAAMc,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,cAAyB,GAAG;IAChCC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBX,iBAAiB;IACjBC,eAAe;IACfW,KAAK,EAAE;EACT,CAAC;EAED,MAAMC,YAAuB,GAAG;IAC9BC,KAAK,EAAEZ,UAAU;IACjBC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVQ,UAAU,EAAE;EACd,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIL,KAAK;EAE7D,oBACEF,IAAA,CAACJ,IAAI;IACHQ,KAAK,EAAE,CAACe,cAAc,EAAEf,KAAK,CAAE;IAC/BuB,iBAAiB,EAAC,QAAQ;IAC1BpB,kBAAkB,EAAEmB,yBAA0B;IAC9ClB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAmB,QAAA,eAER5B,IAAA,CAACH,IAAI;MACHO,KAAK,EAAE,CAACmB,YAAY,EAAElB,SAAS,CAAE;MACjCC,aAAa,EAAEA,aAAa,KAAKuB,SAAS,GAAGvB,aAAa,GAAG,CAAE;MAC/DwB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAH,QAAA,EAE7B1B;IAAK,CACF;EAAC,CACH,CAAC;AAEX;AAEA,eAAeD,SAAS","ignoreList":[]}

package/lib/module/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.