jfs-components 0.0.1 → 0.0.3

package/lib/module/components/NavArrow/NavArrow.js

@@ -0,0 +1,84 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NavArrow component that displays a small chevron arrow for navigation.
+ *
+ * This component uses design tokens for all visual properties:
+ * - navArrow/icon/color - chevron stroke color
+ * - navArrow/icon/width - icon width
+ * - navArrow/icon/height - icon height
+ * - navArrow/icon/strokeWeight - stroke width
+ * - navArrow/width - container width
+ * - navArrow/height - container height
+ * - navArrow/radius - border radius
+ * - navArrow/background - background color
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {Object} [props.modes={}] - Modes for design token resolution
+ * @param {Object} [props.style] - Additional container styles
+ */
+function NavArrow({
+  direction = 'Back',
+  modes = {},
+  style,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve design tokens
+  const iconColor = getVariableByName('navArrow/icon/color', modes) || '#24262b';
+  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4;
+  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8;
+  const strokeWeight = Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2;
+  const containerWidth = Number(getVariableByName('navArrow/width', modes)) || 6;
+  const containerHeight = Number(getVariableByName('navArrow/height', modes)) || 10;
+  const borderRadius = Number(getVariableByName('navArrow/radius', modes)) || 0;
+  const backgroundColor = getVariableByName('navArrow/background', modes) || 'transparent';
+  const containerStyle = {
+    width: containerWidth,
+    height: containerHeight,
+    borderRadius,
+    backgroundColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {})
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward');
+
+  // SVG path for chevron - draws a simple ">" shape
+  // For Back direction, we flip horizontally with scaleX(-1)
+  // The path creates a chevron pointing right by default
+  const chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`;
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    accessibilityRole: "image",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: /*#__PURE__*/_jsx(Svg, {
+      width: iconWidth,
+      height: iconHeight,
+      viewBox: `0 0 ${iconWidth} ${iconHeight}`,
+      style: direction === 'Back' ? {
+        transform: [{
+          scaleX: -1
+        }]
+      } : undefined,
+      children: /*#__PURE__*/_jsx(Path, {
+        d: chevronPath,
+        stroke: iconColor,
+        strokeWidth: strokeWeight,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })
+    })
+  });
+}
+export default NavArrow;
+//# sourceMappingURL=NavArrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Svg","Path","getVariableByName","jsx","_jsx","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","iconWidth","Number","iconHeight","strokeWeight","containerWidth","containerHeight","borderRadius","backgroundColor","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","chevronPath","accessibilityRole","children","viewBox","transform","scaleX","undefined","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwB,cAAc;AACnD,OAAOC,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAC5C,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAehF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAC;EAChBC,SAAS,GAAG,MAAM;EAClBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACU,CAAC,EAAE;EAChB;EACA,MAAMC,SAAS,GACZT,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,IAAe,SAAS;EAC1E,MAAMK,SAAS,GACbC,MAAM,CAACX,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC9D,MAAMO,UAAU,GACdD,MAAM,CAACX,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC/D,MAAMQ,YAAY,GAChBF,MAAM,CAACX,iBAAiB,CAAC,4BAA4B,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EACrE,MAAMS,cAAc,GAClBH,MAAM,CAACX,iBAAiB,CAAC,gBAAgB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EACzD,MAAMU,eAAe,GACnBJ,MAAM,CAACX,iBAAiB,CAAC,iBAAiB,EAAEK,KAAK,CAAC,CAAC,IAAI,EAAE;EAC3D,MAAMW,YAAY,GAChBL,MAAM,CAACX,iBAAiB,CAAC,iBAAiB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC1D,MAAMY,eAAe,GAClBjB,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,IAAe,aAAa;EAE9E,MAAMa,cAAyB,GAAG;IAChCC,KAAK,EAAEL,cAAc;IACrBM,MAAM,EAAEL,eAAe;IACvBC,YAAY;IACZC,eAAe;IACfI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,IAAIhB,KAAK,IAAI,CAAC,CAAC;EACjB,CAAC;EAED,MAAMiB,yBAAyB,GAC7BhB,kBAAkB,KAAKH,SAAS,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;;EAEzE;EACA;EACA;EACA,MAAMoB,WAAW,GAAG,QAAQd,SAAS,GAAG,CAAC,IAAIE,UAAU,GAAG,CAAC,MAAMA,UAAU,GAAG,CAAC,EAAE;EAEjF,oBACEV,IAAA,CAACL,IAAI;IACHS,KAAK,EAAEY,cAAe;IACtBO,iBAAiB,EAAC,OAAO;IACzBlB,kBAAkB,EAAEgB,yBAA0B;IAAA,GAC1Cf,IAAI;IAAAkB,QAAA,eAERxB,IAAA,CAACJ,GAAG;MACFqB,KAAK,EAAET,SAAU;MACjBU,MAAM,EAAER,UAAW;MACnBe,OAAO,EAAE,OAAOjB,SAAS,IAAIE,UAAU,EAAG;MAC1CN,KAAK,EAAEF,SAAS,KAAK,MAAM,GAAG;QAAEwB,SAAS,EAAE,CAAC;UAAEC,MAAM,EAAE,CAAC;QAAE,CAAC;MAAE,CAAC,GAAGC,SAAU;MAAAJ,QAAA,eAE1ExB,IAAA,CAACH,IAAI;QACHgC,CAAC,EAAEP,WAAY;QACfQ,MAAM,EAAEvB,SAAU;QAClBwB,WAAW,EAAEpB,YAAa;QAC1BqB,aAAa,EAAC,OAAO;QACrBC,cAAc,EAAC,OAAO;QACtBC,IAAI,EAAC;MAAM,CACZ;IAAC,CACC;EAAC,CACF,CAAC;AAEX;AAEA,eAAejC,QAAQ","ignoreList":[]}

package/lib/module/components/NavArrow/NavArrow.mdx

@@ -0,0 +1,123 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as NavArrowStories from './NavArrow.stories';
+import NavArrow from './NavArrow';
+
+<Meta of={NavArrowStories} />
+
+# NavArrow
+
+A small navigation arrow component that displays a chevron for Back or Forward navigation. Commonly used in navigation headers, list items, or anywhere directional navigation cues are needed.
+
+## 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
+
+### Context2
+- **Modes:** Default | AppBar
+- **Default:** Default
+## Usage
+
+### Basic Usage
+
+<Canvas>
+  <Story of={NavArrowStories.Default} />
+</Canvas>
+
+### Direction Variants
+
+The NavArrow supports two directions:
+
+- **Back** — Left-pointing chevron (‹) for backward navigation
+- **Forward** — Right-pointing chevron (›) for forward navigation
+
+<Canvas>
+  <Story of={NavArrowStories.AllDirections} />
+</Canvas>
+
+### Usage Examples
+
+```jsx
+import { NavArrow } from 'jfs-components';
+
+// Basic back arrow
+<NavArrow direction="Back" />
+
+// Forward arrow
+<NavArrow direction="Forward" />
+
+// With custom modes (for theming)
+<NavArrow direction="Back" modes={{ 'Color Mode': 'Dark' }} />
+
+// With accessibility label
+<NavArrow 
+  direction="Back" 
+  accessibilityLabel="Navigate to previous screen" 
+/>
+```
+
+### Usage in a Header
+
+```jsx
+import { View, Text, Pressable } from 'react-native';
+import { NavArrow } from 'jfs-components';
+
+function Header({ title, onBack }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
+      <Pressable onPress={onBack} style={{ padding: 8 }}>
+        <NavArrow direction="Back" />
+      </Pressable>
+      <Text style={{ marginLeft: 8, fontSize: 18, fontWeight: '600' }}>
+        {title}
+      </Text>
+    </View>
+  );
+}
+```
+
+### Usage in a List Item
+
+```jsx
+import { View, Text, Pressable } from 'react-native';
+import { NavArrow } from 'jfs-components';
+
+function NavigableListItem({ label, onPress }) {
+  return (
+    <Pressable 
+      onPress={onPress}
+      style={{ 
+        flexDirection: 'row', 
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        padding: 16 
+      }}
+    >
+      <Text>{label}</Text>
+      <NavArrow direction="Forward" />
+    </Pressable>
+  );
+}
+```
+
+## Props
+
+<ArgsTable of={NavArrow} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`navArrow/background`**
+- **`navArrow/height`**
+- **`navArrow/icon/color`**
+- **`navArrow/icon/height`**
+- **`navArrow/icon/strokeWeight`**
+- **`navArrow/icon/width`**
+- **`navArrow/radius`**
+- **`navArrow/width`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/Section/Section.mdx

@@ -13,6 +13,10 @@ Section component that mirrors the Figma "Section" component.
 
 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
+
 ### Padding
 - **Modes:** Default | None
 - **Default:** Default
@@ -20,10 +24,6 @@ This component uses the following design token collections. Each collection supp
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
-
-### Color Mode
-- **Modes:** Light | Dark
-- **Default:** Light
 ## Usage
 
 <Canvas>

package/lib/module/components/Stepper/Step.mdx

@@ -12,7 +12,7 @@ A component representing a single step within a Stepper process. It displays an
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-### Status
+### Step Status
 - **Modes:** active | inactive | complete | error | warning
 - **Default:** active
 

package/lib/module/components/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+export { default as ActionFooter } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -10,6 +11,7 @@ export { default as Button } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
+export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
@@ -18,7 +20,9 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';

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

@@ -1 +1 @@
-{"version":3,"names":["default","AppBar","Avatar","AvatarGroup","Badge","BottomNav","BottomNavItem","Button","Card","CardFeedback","Disclaimer","Drawer","FilterBar","IconButton","IconCapsule","LazyList","ListGroup","ListItem","MediaCard","MoneyValue","PageTitle","Section","Stepper","Step","StepLabel","TextInput","Tooltip","UpiHandle"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,iBAAiB;AACnD,SAASD,OAAO,IAAIE,MAAM,QAA0B,iBAAiB;AACrE,SAASF,OAAO,IAAIG,WAAW,QAAQ,2BAA2B;AAClE,SAASH,OAAO,IAAII,KAAK,QAAQ,eAAe;AAChD,SAASJ,OAAO,IAAIK,SAAS,QAAQ,uBAAuB;AAC5D,SAASL,OAAO,IAAIM,aAAa,QAAQ,+BAA+B;AACxE,SAASN,OAAO,IAAIO,MAAM,QAA0B,iBAAiB;AACrE,SAASP,OAAO,IAAIQ,IAAI,QAAQ,aAAa;AAC7C,SAASR,OAAO,IAAIS,YAAY,QAAQ,6BAA6B;AACrE,SAAST,OAAO,IAAIU,UAAU,QAAQ,yBAAyB;AAC/D,SAASV,OAAO,IAAIW,MAAM,QAAQ,iBAAiB;AACnD,SAASX,OAAO,IAAIY,SAAS,QAAQ,uBAAuB;AAC5D,SAASZ,OAAO,IAAIa,UAAU,QAAQ,yBAAyB;AAC/D,SAASb,OAAO,IAAIc,WAAW,QAAQ,2BAA2B;AAClE,SAASd,OAAO,IAAIe,QAAQ,QAAQ,qBAAqB;AACzD,SAASf,OAAO,IAAIgB,SAAS,QAAQ,uBAAuB;AAC5D,SAAShB,OAAO,IAAIiB,QAAQ,QAAQ,qBAAqB;AACzD,SAASjB,OAAO,IAAIkB,SAAS,QAAQ,uBAAuB;AAC5D,SAASlB,OAAO,IAAImB,UAAU,QAAQ,yBAAyB;AAC/D,SAASnB,OAAO,IAAIoB,SAAS,QAAQ,uBAAuB;AAC5D,SAASpB,OAAO,IAAIqB,OAAO,QAAQ,mBAAmB;AACtD,SAASrB,OAAO,IAAIsB,OAAO,QAAQ,mBAAmB;AACtD,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASxB,OAAO,IAAIyB,SAAS,QAAQ,uBAAuB;AAC5D,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAAS1B,OAAO,IAAI2B,SAAS,QAAQ,uBAAuB","ignoreList":[]}
+{"version":3,"names":["default","ActionFooter","AppBar","Avatar","AvatarGroup","Badge","BottomNav","BottomNavItem","Button","Card","CardFeedback","Disclaimer","Divider","Drawer","FilterBar","IconButton","IconCapsule","LazyList","ListGroup","ListItem","MediaCard","MerchantProfile","MoneyValue","NavArrow","PageTitle","Section","Stepper","Step","StepLabel","TextInput","Tooltip","UpiHandle"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,YAAY,QAAgC,6BAA6B;AAC7F,SAASD,OAAO,IAAIE,MAAM,QAAQ,iBAAiB;AACnD,SAASF,OAAO,IAAIG,MAAM,QAA0B,iBAAiB;AACrE,SAASH,OAAO,IAAII,WAAW,QAAQ,2BAA2B;AAClE,SAASJ,OAAO,IAAIK,KAAK,QAAQ,eAAe;AAChD,SAASL,OAAO,IAAIM,SAAS,QAAQ,uBAAuB;AAC5D,SAASN,OAAO,IAAIO,aAAa,QAAQ,+BAA+B;AACxE,SAASP,OAAO,IAAIQ,MAAM,QAA0B,iBAAiB;AACrE,SAASR,OAAO,IAAIS,IAAI,QAAQ,aAAa;AAC7C,SAAST,OAAO,IAAIU,YAAY,QAAQ,6BAA6B;AACrE,SAASV,OAAO,IAAIW,UAAU,QAAQ,yBAAyB;AAC/D,SAASX,OAAO,IAAIY,OAAO,QAAkD,mBAAmB;AAChG,SAASZ,OAAO,IAAIa,MAAM,QAAQ,iBAAiB;AACnD,SAASb,OAAO,IAAIc,SAAS,QAAQ,uBAAuB;AAC5D,SAASd,OAAO,IAAIe,UAAU,QAAQ,yBAAyB;AAC/D,SAASf,OAAO,IAAIgB,WAAW,QAAQ,2BAA2B;AAClE,SAAShB,OAAO,IAAIiB,QAAQ,QAAQ,qBAAqB;AACzD,SAASjB,OAAO,IAAIkB,SAAS,QAAQ,uBAAuB;AAC5D,SAASlB,OAAO,IAAImB,QAAQ,QAAQ,qBAAqB;AACzD,SAASnB,OAAO,IAAIoB,SAAS,QAAQ,uBAAuB;AAC5D,SAASpB,OAAO,IAAIqB,eAAe,QAAmC,mCAAmC;AACzG,SAASrB,OAAO,IAAIsB,UAAU,QAAQ,yBAAyB;AAC/D,SAAStB,OAAO,IAAIuB,QAAQ,QAAQ,qBAAqB;AACzD,SAASvB,OAAO,IAAIwB,SAAS,QAAQ,uBAAuB;AAC5D,SAASxB,OAAO,IAAIyB,OAAO,QAAQ,mBAAmB;AACtD,SAASzB,OAAO,IAAI0B,OAAO,QAAQ,mBAAmB;AACtD,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAAS5B,OAAO,IAAI6B,SAAS,QAAQ,uBAAuB;AAC5D,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAAS9B,OAAO,IAAI+B,SAAS,QAAQ,uBAAuB","ignoreList":[]}