jfs-components 0.0.1

package/src/components/CardFeedback/CardFeedback.tsx

@@ -0,0 +1,196 @@
+import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+/**
+ * Context to share 'modes' with child components.
+ */
+const CardFeedbackContext = createContext<{ modes?: Record<string, any> }>({});
+
+export interface CardFeedbackProps {
+    /**
+     * The main content of the card (Icon, Title, Body, Action).
+     */
+    children?: React.ReactNode;
+    /**
+     * Modes object for token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * CardFeedback component from Figma node 1280:4481.
+ * 
+ * Used for status updates, warnings, or feedback.
+ */
+export function CardFeedback({
+    children,
+    modes = {},
+    style,
+}: CardFeedbackProps) {
+    // Container Tokens
+    const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
+    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
+    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
+    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
+    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderRadius: radius,
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        // Min height from design, but flex is better
+        minHeight: 59,
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+    };
+
+    return (
+        <CardFeedbackContext.Provider value={{ modes }}>
+            <View style={[containerStyle, style]}>
+                {children}
+            </View>
+        </CardFeedbackContext.Provider>
+    );
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+/**
+ * Icon Wrapper
+ * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ */
+export function Icon({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+    const context = useContext(CardFeedbackContext);
+    const modes = propModes || context.modes || {};
+
+    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+    // Color is usually applied to the SVG/Icon itself, but we can access it here if needed
+    // const color = getVariableByName('cardFeedback/icon/color', modes); 
+
+    const containerStyle: ViewStyle = {
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+    };
+
+    // If children is an SVG or Icon component, we might need to clone it to pass color?
+    // For now, just render children in the sized box.
+    return (
+        <View style={[containerStyle, style]}>
+            {children}
+        </View>
+    );
+}
+
+/**
+ * Content Wrapper (Text Wrap)
+ * Wraps Title, Body, and sometimes Action.
+ * Tokens: cardFeedback/text/gap
+ */
+export function Content({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+    const context = useContext(CardFeedbackContext);
+    const modes = propModes || context.modes || {};
+
+    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+
+    return (
+        <View style={[{ gap, width: '100%' }, style]}>
+            {children}
+        </View>
+    );
+}
+
+/**
+ * Title Component
+ * Tokens: cardFeedback/title/*
+ */
+export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+    const context = useContext(CardFeedbackContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
+    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
+    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
+    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+
+    const textStyle: TextStyle = {
+        color,
+        fontSize,
+        fontFamily,
+        lineHeight,
+        fontWeight: fontWeight as TextStyle['fontWeight'],
+    };
+
+    return <Text style={[textStyle, style]}>{children}</Text>;
+}
+
+/**
+ * Body Component
+ * Tokens: cardFeedback/body/*
+ */
+export function Body({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+    const context = useContext(CardFeedbackContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
+    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
+    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
+    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+
+    const textStyle: TextStyle = {
+        color,
+        fontSize,
+        fontFamily,
+        lineHeight,
+        fontWeight: fontWeight as TextStyle['fontWeight'],
+    };
+
+    return <Text style={[textStyle, style]}>{children}</Text>;
+}
+
+/**
+ * Action Slot Wrapper
+ * Tokens: cardFeedback/actionSlot/gap
+ */
+export function Action({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+    const context = useContext(CardFeedbackContext);
+    const modes = propModes || context.modes || {};
+
+    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '4');
+
+    // "Maximise existing component usage" -> Pass modes to children (Buttons)
+    const childrenWithModes = React.Children.map(children, child => {
+        if (isValidElement(child)) {
+            return cloneElement(child as any, { modes: { ...(child.props as any).modes, ...modes } });
+        }
+        return child;
+    });
+
+    return (
+        <View style={[{ gap, flexDirection: 'row', flexWrap: 'wrap' }, style]}>
+            {childrenWithModes}
+        </View>
+    );
+}
+
+// Attach sub-components
+CardFeedback.Icon = Icon;
+CardFeedback.Content = Content;
+CardFeedback.Title = Title;
+CardFeedback.Body = Body;
+CardFeedback.Action = Action;
+
+export default CardFeedback;

package/src/components/Disclaimer/Disclaimer.mdx

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DisclaimerStories from './Disclaimer.stories';
+import Disclaimer from './Disclaimer';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={DisclaimerStories} />
+
+# Disclaimer
+
+Disclaimer text block that mirrors the Figma "Disclaimer" 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={DisclaimerStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` when the disclaimer copy changes; it defaults to the first line.',
+    'Keep the component non-interactive (role `text`); place links/buttons outside.',
+    'Use brief sentences so the announcement is a single utterance.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — centered block constrained to the Figma max width.</li>
+    <li><strong>Text</strong> — two-line disclaimer using token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Avoid inline links; pair nearby buttons for acknowledgements when needed.',
+    'Use `style`/`textStyle` for spacing tweaks without shrinking font sizes.',
+    'Keep width flexible; rely on the built-in max width for alignment.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Disclaimer} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`disclaimer/color`**
+- **`disclaimer/label/fontFamily`**
+- **`disclaimer/label/fontSize`**
+- **`disclaimer/label/fontWeight`**
+- **`disclaimer/label/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Disclaimer/Disclaimer.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 DisclaimerProps = {
+  disclaimer?: string;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * Disclaimer text block that mirrors the Figma "Disclaimer" component.
+ *
+ * All visual attributes (color, typography, etc.) are resolved from
+ * Figma design tokens via `getVariableByName`, with an optional `modes`
+ * configuration object – exactly like other components in this library.
+ *
+ * The text is center‑aligned and constrained to the same width as in Figma,
+ * with two lines:
+ *  - A configurable disclaimer prefix
+ *  - A fixed "Jio Payments Bank Pvt. Ltd." line
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.disclaimer] - First line of the disclaimer text.
+ * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
+ * @param {Object} [props.style] - Optional style overrides for the container.
+ * @param {Object} [props.textStyle] - Optional style overrides for the text element.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses disclaimer text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Disclaimer({
+  disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
+  modes = {},
+  style,
+  textStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: DisclaimerProps) {
+  // Resolve typography and color from Figma variables
+  const color = getVariableByName('disclaimer/color', modes) || '#24262b'
+  const fontSize =
+    getVariableByName('disclaimer/label/fontSize', modes) || 10
+  const lineHeight =
+    getVariableByName('disclaimer/label/lineHeight', modes) || 12
+  const fontFamily =
+    getVariableByName('disclaimer/label/fontFamily', modes) || 'System'
+  const fontWeightRaw =
+    getVariableByName('disclaimer/label/fontWeight', modes) || 500
+  const fontWeight =
+    typeof fontWeightRaw === 'number'
+      ? fontWeightRaw.toString()
+      : fontWeightRaw
+
+  const baseTextStyle: TextStyle = {
+    color,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    textAlign: 'center',
+  }
+
+  const containerStyle: ViewStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Match the Figma content width while still being flexible in layouts
+    maxWidth: 281,
+    width: '100%',
+  }
+
+  // Use provided accessibilityLabel or fall back to disclaimer text
+  const defaultAccessibilityLabel = accessibilityLabel || disclaimer
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      {...rest}
+    >
+      <Text 
+        style={[baseTextStyle, textStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {disclaimer}
+        {'\n'}
+      </Text>
+    </View>
+  )
+}
+
+export default Disclaimer
+
+
+

package/src/components/Drawer/Drawer.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DrawerStories from './Drawer.stories';
+import Drawer from './Drawer';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={DrawerStories} />
+
+# Drawer
+
+Lightweight bottom drawer/sheet with a draggable handle.
+
+## 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={DrawerStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel`/`accessibilityHint` describing what the sheet contains and how to expand/collapse it.',
+    'Ensure the drag handle remains reachable via a `button` role; do not rely on gestures alone.',
+    'Give action items and custom children readable labels and predictable focus order.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Handle</strong> — drag affordance at the top of the sheet.</li>
+    <li><strong>Header</strong> — optional title text above actions.</li>
+    <li><strong>Actions</strong> — grid of IconButtons rendered from the `items` prop.</li>
+    <li><strong>Content slot</strong> — custom children rendered after the actions row.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep `expandedRatio` between 0.2–0.95 to avoid clipping or full-screen takeover.',
+    'Pass stable `items` keys/labels; avoid heavy scrollable children inside the animated sheet.',
+    'For web, keep nested content click/drag friendly; avoid stacking additional absolute sheets inside.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Drawer} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`drawer/background`**
+- **`drawer/handle/color`**
+- **`drawer/handle/height`**
+- **`drawer/handle/width`**
+- **`drawer/padding`**
+- **`drawer/radius`**
+- **`drawer/title/color`**
+- **`drawer/title/size`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import IconButton from '../IconButton/IconButton'
+
+type DrawerItem = {
+  iconName?: string
+  label?: string
+  modes?: Record<string, any>
+  onPress?: () => void
+}
+
+type DrawerProps = {
+  items?: DrawerItem[]
+  modes?: Record<string, any>
+  title?: string
+  children?: React.ReactNode
+  collapsedHeight?: number
+  expandedRatio?: number
+  initialState?: 'collapsed' | 'expanded'
+  contentStyle?: any
+  sheetStyle?: any
+  accessibilityLabel?: string
+  accessibilityHint?: string
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
+/**
+ * Lightweight bottom drawer/sheet with a draggable handle.
+ * No external dependencies; uses Animated + PanResponder so it works in RN and Storybook (web).
+ * 
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the drawer. If not provided, uses title or "Drawer"
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Drawer({
+  items = [],
+  modes = {},
+  title,
+  children,
+  collapsedHeight = 120,
+  expandedRatio = 0.75,
+  initialState = 'collapsed',
+  contentStyle,
+  sheetStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: DrawerProps) {
+  const { height: screenHeight } = useWindowDimensions()
+
+  const expandedHeight = screenHeight * clamp(expandedRatio, 0.2, 0.95)
+  const maxTranslateY = Math.max(screenHeight - collapsedHeight, 0) // fully collapsed
+  const minTranslateY = Math.max(screenHeight - expandedHeight, 0) // fully expanded
+
+  const translateY = useRef(new Animated.Value(initialState === 'expanded' ? minTranslateY : maxTranslateY)).current
+  const lastGestureY = useRef(initialState === 'expanded' ? minTranslateY : maxTranslateY)
+
+  useEffect(() => {
+    // Re-sync when viewport changes (storybook iframe resize, orientation change)
+    const next = initialState === 'expanded' ? minTranslateY : maxTranslateY
+    lastGestureY.current = next
+    translateY.setValue(next)
+  }, [initialState, maxTranslateY, minTranslateY, translateY])
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+          translateY.stopAnimation((v) => {
+            lastGestureY.current = v
+          })
+        },
+        onPanResponderMove: (_, gesture) => {
+          const next = clamp(lastGestureY.current + gesture.dy, minTranslateY, maxTranslateY)
+          translateY.setValue(next)
+        },
+        onPanResponderRelease: (_, gesture) => {
+          const current = lastGestureY.current + gesture.dy
+          const midpoint = (minTranslateY + maxTranslateY) / 2
+          const shouldOpen = gesture.vy < -0.3 || current < midpoint
+          const target = shouldOpen ? minTranslateY : maxTranslateY
+          lastGestureY.current = target
+          Animated.spring(translateY, {
+            toValue: target,
+            tension: 80,
+            friction: 12,
+            useNativeDriver: true,
+          }).start()
+        },
+      }),
+    [maxTranslateY, minTranslateY, translateY],
+  )
+
+  // Resolve tokens with fallbacks to keep storybook stable
+  const backgroundColor = getVariableByName('drawer/background', modes) || '#ffffff'
+  const handleColor = getVariableByName('drawer/handle/color', modes) || '#D1D5DB'
+  const handleWidth = getVariableByName('drawer/handle/width', modes) || 60
+  const handleHeight = getVariableByName('drawer/handle/height', modes) || 6
+  const radius = getVariableByName('drawer/radius', modes) || 20
+  const padding = getVariableByName('drawer/padding', modes) || 16
+  const titleColor = getVariableByName('drawer/title/color', modes) || '#0f172a'
+  const titleSize = getVariableByName('drawer/title/size', modes) || 16
+
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
+
+  return (
+    <View style={styles.host} {...rest}>
+      <Animated.View
+        {...panResponder.panHandlers}
+        accessibilityRole={'dialog' as any}
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint || 'Swipe up or down to expand or collapse'}
+        style={[
+          styles.sheet,
+          styles.nonSelectable,
+          {
+            backgroundColor,
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingHorizontal: padding,
+            paddingBottom: padding,
+            transform: [{ translateY }],
+          },
+          sheetStyle,
+        ]}
+      >
+        <View
+          style={[styles.handleArea, styles.nonSelectable]}
+          accessibilityRole="button"
+          accessibilityLabel="Drag handle"
+          accessibilityHint="Drag up or down to expand or collapse drawer"
+        >
+          <View
+            style={[
+              styles.handle,
+              { backgroundColor: handleColor, width: handleWidth, height: handleHeight, borderRadius: handleHeight / 2 },
+            ]}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        </View>
+
+        {title ? (
+          <Text 
+            selectable={false}
+            style={[styles.title, styles.nonSelectable, { color: titleColor, fontSize: titleSize }]} 
+            accessibilityRole="header"
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          >
+            {title}
+          </Text>
+        ) : null}
+
+        {items?.length ? (
+          <View style={styles.actionsRow}>
+            {items.map((item, idx) => (
+              <View key={item.label || item.iconName || idx} style={styles.action}>
+                <IconButton
+                  iconName={item.iconName}
+                  onPress={item.onPress}
+                  modes={item.modes || modes}
+                  // Let IconButton manage its own accessibility labelling; we don't need to
+                  // forward extra props from the item model here.
+                  // Cast to any to satisfy the more specific IconButton prop type.
+                  {...({} as any)}
+                />
+                {item.label ? (
+                  <Text selectable={false} style={[styles.actionLabel, styles.nonSelectable]}>
+                    {item.label}
+                  </Text>
+                ) : null}
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        {children ? <View style={[styles.content, styles.nonSelectable, contentStyle]}>{children}</View> : null}
+      </Animated.View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    shadowColor: '#000000',
+    shadowOpacity: 0.12,
+    shadowOffset: { width: 0, height: -4 },
+    shadowRadius: 12,
+    elevation: 6,
+    paddingTop: 10,
+  },
+  handleArea: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  handle: {
+    opacity: 0.9,
+  },
+  title: {
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingBottom: 4,
+  },
+  action: {
+    alignItems: 'center',
+    minWidth: 72,
+    marginRight: 12,
+    marginBottom: 16,
+  },
+  actionLabel: {
+    marginTop: 6,
+    fontSize: 12,
+    color: '#475467',
+  },
+  content: {
+    paddingTop: 12,
+  },
+  // `userSelect` is a web-only style; cast to any to keep React Native types happy
+  nonSelectable: {
+    userSelect: 'none',
+  } as any,
+})
+
+export default Drawer
+
+