jfs-components 0.0.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,250 @@
+import React, { useMemo, useState } from 'react'
+import { Pressable, Text, View, type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+
+export type ButtonProps = SafePressableProps & {
+  label?: string;
+  children?: React.ReactNode;
+  /**
+   * Optional render prop for taking over the inner label/content while still
+   * reusing the token-driven text styles.
+   *
+   * When provided, this takes precedence over `children`. The `styles`
+   * argument is the merged text style (base token styles + `labelStyle`).
+   *
+   * Example:
+   * ```tsx
+   * <Button
+   *   renderContent={(styles) => (
+   *     <CustomText style={styles}>Pay now</CustomText>
+   *   )}
+   * />
+   * ```
+   */
+  renderContent?: (styles: StyleProp<TextStyle>) => React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  modes?: Record<string, any>;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityState?: AccessibilityState;
+  /**
+   * Web-specific accessibility props (only used on web platform)
+   */
+  webAccessibilityProps?: WebAccessibilityProps;
+};
+
+/**
+ * Button component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.label="Button"] - Label text to display when no children are provided
+ * @param {React.ReactNode} [props.children] - Optional custom content to render inside the button. When provided, this is treated as a full-content override and `label`/`labelStyle` are ignored.
+ * @param {Function} [props.renderContent] - Optional render prop that receives the merged label text styles and returns custom content. Preferred when you want custom content but still reuse the token-driven typography.
+ * @param {React.ReactNode} [props.leading] - Optional leading accessory (e.g., icon)
+ * @param {React.ReactNode} [props.trailing] - Optional trailing accessory (e.g., icon)
+ * @param {Object} [props.modes={}] - Mode configuration passed to the token resolver (e.g., {"Button / Size": "M"})
+ * @param {Function} [props.onPress] - Callback triggered when the button is pressed
+ * @param {boolean} [props.disabled=false] - When true, the button cannot be pressed
+ * @param {Object} [props.style] - Optional style overrides for the button container
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+function Button({
+  label = 'Button',
+  children,
+  renderContent,
+  leading,
+  trailing,
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}: ButtonProps) {
+  // Resolve design tokens with the provided modes
+  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
+  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
+  const borderWidth = getVariableByName('button/border/size', modes)
+  const radius = getVariableByName('button/radius', modes) || 9999
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20
+  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12
+  const gap = getVariableByName('button/gap', modes) || 8
+
+  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System'
+  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
+  const lineHeight = getVariableByName('button/lineHeight', modes) || 19
+  const fontSize = getVariableByName('button/fontSize', modes) || 16
+  const textColor = getVariableByName('button/forground', modes) || '#0f0d0a'
+
+  const baseLabelTextStyle: TextStyle = {
+    color: textColor,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+  }
+
+  const mergedLabelTextStyle: StyleProp<TextStyle> = [baseLabelTextStyle, labelStyle]
+
+  let content: React.ReactNode
+
+  if (renderContent) {
+    // Preferred extension point: caller fully controls the inner node but we
+    // still provide the token-derived text styles.
+    content = renderContent(mergedLabelTextStyle)
+  } else if (children !== undefined && children !== null) {
+    // Full-content override: label and labelStyle are intentionally ignored.
+    content = children
+  } else {
+    content = (
+      <Text
+        style={mergedLabelTextStyle}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+    )
+  }
+
+  const containerBaseStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    borderWidth: borderWidth ?? 1,
+    borderColor,
+    backgroundColor,
+    gap,
+    opacity: disabled ? 0.5 : 1,
+  }
+
+  const accessoryOffset = gap / 2
+
+  const leadingAccessoryStyle = useMemo(
+    () => ({ marginRight: accessoryOffset }),
+    [accessoryOffset],
+  )
+
+  const trailingAccessoryStyle = useMemo(
+    () => ({ marginLeft: accessoryOffset }),
+    [accessoryOffset],
+  )
+
+  // Use provided accessibilityLabel, or fall back to label text
+  const defaultAccessibilityLabel = accessibilityLabel || (typeof label === 'string' ? label : undefined)
+
+  // Get web platform support props
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+
+  // Interaction states (placeholders for visuals; tweak later)
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const pressedStyle = { transform: [{ scale: 0.995 }], backgroundColor: '#b88940' }
+  const focusStyle = { borderWidth: 1, borderColor: '#222' }
+  const hoverStyle = { opacity: 0.95 }
+
+  if (__DEV__) {
+    if (children && labelStyle) {
+      console.warn(
+        '[Button] `children` was provided; `labelStyle` will be ignored. ' +
+        'Use `renderContent` if you need custom content that still reuses the label styles.',
+      )
+    }
+
+    if ((children || renderContent) && !accessibilityLabel && (typeof label !== 'string' || !label)) {
+      console.warn(
+        '[Button] Custom content is used without an explicit `accessibilityLabel` or string `label`. ' +
+        'Screen readers may not announce this button correctly.',
+      )
+    }
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={defaultAccessibilityLabel}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      accessibilityState={{
+        disabled,
+        ...(accessibilityState || {})
+      }}
+      disabled={disabled}
+      {...(onPress !== undefined ? { onPress } : {})}
+      onPressIn={(e: any) => {
+        ; (rest as any)?.onPressIn?.(e)
+      }}
+      onPressOut={(e: any) => {
+        ; (rest as any)?.onPressOut?.(e)
+      }}
+      onFocus={(e: any) => {
+        setIsFocused(true)
+          ; (rest as any)?.onFocus?.(e)
+      }}
+      onBlur={(e: any) => {
+        setIsFocused(false)
+          ; (rest as any)?.onBlur?.(e)
+      }}
+      onHoverIn={(e: any) => {
+        setIsHovered(true)
+          ; (rest as any)?.onHoverIn?.(e)
+      }}
+      onHoverOut={(e: any) => {
+        setIsHovered(false)
+          ; (rest as any)?.onHoverOut?.(e)
+      }}
+      style={({ pressed }) => [
+        containerBaseStyle,
+        pressed && !disabled ? pressedStyle : null,
+        isHovered && !disabled ? hoverStyle : null,
+        isFocused && !disabled ? focusStyle : null,
+        style,
+      ] as StyleProp<ViewStyle>}
+      {...webProps}
+    >
+      {leading ? (
+        <View style={leadingAccessoryStyle}>
+          {leading}
+        </View>
+      ) : null}
+      {content}
+      {trailing ? (
+        <View style={trailingAccessoryStyle}>
+          {trailing}
+        </View>
+      ) : null}
+    </Pressable>
+  )
+}
+
+export default Button
+
+
+
+
+
+
+
+

package/src/components/Card/Card.mdx

@@ -0,0 +1,88 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CardStories from './Card.stories';
+import Card from './Card';
+import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+import { View, Image, Text } from 'react-native';
+
+<Meta of={CardStories} />
+## 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.
+
+### Gap
+- **Modes:** S | M | L
+- **Default:** S
+## Usage
+
+<Canvas>
+  <Story of={CardStories.Default} />
+</Canvas>
+
+### Example Usage
+
+```tsx
+import { Image } from 'react-native';
+import Card from './components/Card/Card';
+
+function MyCard() {
+  return (
+    <Card 
+      media={
+        <Image 
+          source={{ uri: 'https://picsum.photos/300/200' }} 
+          style={{ width: '100%', height: '100%' }} 
+        />
+      }
+      mediaAspectRatio={1.33} // Optional: defaults to ~1.328
+      style={{ width: 148 }}
+    >
+      <Card.SupportText>Featured</Card.SupportText>
+      <Card.Title>Amazing Card</Card.Title>
+      <Card.SupportText>Subtitle here</Card.SupportText>
+    </Card>
+  );
+}
+```
+
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — Wrapper with token-driven background, border, radius, and padding.</li>
+    <li><strong>Media Slot</strong> — Dedicated area for images or other visual content, controlled by <code>mediaAspectRatio</code>.</li>
+    <li><strong>Content Wrapper</strong> — Layout container for the card's text content with token-driven spacing.</li>
+    <li><strong>Card.Title</strong> — Sub-component for the card's main title, automatically consuming <code>card/title/\*</code> tokens.</li>
+    <li><strong>Card.SupportText</strong> — Sub-component for secondary text, automatically consuming <code>card/supportive-text/\*</code> tokens.</li>
+  </ul>
+</AnatomySection>
+
+## Props
+
+<ArgsTable of={Card} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`card/background/color`**
+- **`card/border/color`**
+- **`card/content/gap`**
+- **`card/content/padding/horizontal`**
+- **`card/content/padding/vertical`**
+- **`card/gap`**
+- **`card/padding-horizontal`**
+- **`card/padding-vertical`**
+- **`card/radius`**
+- **`card/strokeWidth`**
+- **`card/supportive-text/color`**
+- **`card/supportive-text/fontFamily`**
+- **`card/supportive-text/fontSize`**
+- **`card/supportive-text/fontWeight`**
+- **`card/supportive-text/lineHeight`**
+- **`card/title/color`**
+- **`card/title/fontFamily`**
+- **`card/title/fontSize`**
+- **`card/title/fontWeight`**
+- **`card/title/fonwWeight`**
+- **`card/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Card/Card.tsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+/**
+ * Context to share 'modes' with child components like Card.Title and Card.SupportText.
+ * This ensures that nested components can resolve their tokens correctly without 
+ * needing explicit mode prop passing for every child.
+ */
+const CardContext = createContext<{ modes?: Record<string, any> }>({});
+
+export interface CardProps {
+    /**
+     * The content to be rendered in the media slot (e.g. an Image).
+     * This content is wrapped in a container that respects the `aspectRatio`.
+     */
+    media?: React.ReactNode;
+    /**
+     * Content to render inside the card (e.g. Card.Title, Card.SupportText).
+     */
+    children?: React.ReactNode;
+    /**
+     * Modes object for token resolution (e.g. { "Mode": "Dark" }).
+     */
+    modes?: Record<string, any>;
+    /**
+     * Aspect ratio for the media slot container.
+     * Default is based on Figma design 154/116 (~1.328).
+     */
+    mediaAspectRatio?: number;
+    /**
+     * Style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Card component implementation from Figma node 765:6186.
+ * 
+ * Supports a `media` slot (with aspect ratio) and a content area.
+ * Usage:
+ * ```tsx
+ * <Card media={<Image source={...} />} modes={modes}>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ *   <Card.Title>Title</Card.Title>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ * </Card>
+ * ```
+ */
+export function Card({
+    media,
+    children,
+    modes = {},
+    mediaAspectRatio = 154 / 116,
+    style,
+}: CardProps) {
+    // Resolve Card Container Tokens
+    const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
+    const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
+    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
+    const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
+    const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
+    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
+    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+
+    // Resolve Content Wrapper Tokens
+    const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
+    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
+    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+
+    // Clone media to pass modes if it's a valid element, facilitating nested style resolution
+    const mediaWithModes = isValidElement(media)
+        ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
+        : media;
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        borderRadius: radius,
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        overflow: 'hidden', // Ensure border radius clips content
+    };
+
+    const mediaWrapperStyle: ViewStyle = {
+        width: '100%',
+        aspectRatio: mediaAspectRatio,
+        overflow: 'hidden',
+        // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
+        // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
+        // For now, we leave it transparent or rely on media.
+    };
+
+    const contentWrapperStyle: ViewStyle = {
+        width: '100%',
+        gap: contentGap,
+        paddingHorizontal: contentPaddingHorizontal,
+        paddingVertical: contentPaddingVertical,
+    };
+
+    return (
+        <CardContext.Provider value={{ modes }}>
+            <View style={[containerStyle, style]}>
+                {media && (
+                    <View style={mediaWrapperStyle}>
+                        {mediaWithModes}
+                    </View>
+                )}
+                <View style={contentWrapperStyle}>
+                    {children}
+                </View>
+            </View>
+        </CardContext.Provider>
+    );
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+export interface CardTextProps {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+    modes?: Record<string, any>;
+}
+
+/**
+ * Title component for Card content.
+ * Uses tokens: card/title/*
+ */
+function Title({ children, style, modes: propModes }: CardTextProps) {
+    const context = useContext(CardContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('card/title/color', modes) || '#081007';
+    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
+    const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+
+    // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
+    // We check both keys to be safe.
+    const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
+    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+
+    const textStyle: TextStyle = {
+        color,
+        fontSize,
+        fontFamily,
+        lineHeight,
+        fontWeight: fontWeight as TextStyle['fontWeight'],
+    };
+
+    return <Text style={[textStyle, style]}>{children}</Text>;
+}
+
+/**
+ * SupportiveText component for Card content.
+ * Uses tokens: card/supportive-text/*
+ */
+function SupportText({ children, style, modes: propModes }: CardTextProps) {
+    const context = useContext(CardContext);
+    const modes = propModes || context.modes || {};
+
+    const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
+    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
+    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
+    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
+    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
+    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+
+    const textStyle: TextStyle = {
+        color,
+        fontSize,
+        fontFamily,
+        lineHeight,
+        fontWeight: fontWeight as TextStyle['fontWeight'],
+    };
+
+    return <Text style={[textStyle, style]}>{children}</Text>;
+}
+
+// Attach sub-components to Card
+Card.Title = Title;
+Card.SupportText = SupportText;
+
+export default Card;

package/src/components/CardFeedback/CardFeedback.mdx

@@ -0,0 +1,84 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CardFeedbackStories from './CardFeedback.stories';
+import CardFeedback from './CardFeedback';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={CardFeedbackStories} />
+
+# CardFeedback
+
+CardFeedback component from Figma node 1280:4481. Used for status updates, warnings, or feedback (e.g., success, error states).
+
+## 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.
+
+### Appearance.System
+- **Modes:** positive | warning | negative
+- **Default:** positive
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+## Usage
+
+<Canvas>
+  <Story of={CardFeedbackStories.Default} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'Use standard text elements for Title and Body to ensure readability.',
+    'Buttons in the Action slot should have appropriate accessibility labels.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Icon</strong> — Optional icon slot (top left).</li>
+    <li><strong>Content</strong> — Wraps Title, Body, and Action slots.</li>
+    <li><strong>Title</strong> — Primary message.</li>
+    <li><strong>Body</strong> — Secondary details.</li>
+    <li><strong>Action</strong> — Slot for interactive elements (Buttons).</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use existing `Button` components within the `CardFeedback.Action` slot.',
+    'Ensure correct modes are passed if using specific feedback themes (e.g., Success, Error).',
+  ]}
+/>
+
+## Props
+
+<ArgsTable of={CardFeedback} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`cardFeedback/actionSlot/gap`**
+- **`cardFeedback/background`**
+- **`cardFeedback/body/color`**
+- **`cardFeedback/body/fontFamily`**
+- **`cardFeedback/body/fontSize`**
+- **`cardFeedback/body/fontWeight`**
+- **`cardFeedback/body/lineHeight`**
+- **`cardFeedback/gap`**
+- **`cardFeedback/icon/size`**
+- **`cardFeedback/padding/horizontal`**
+- **`cardFeedback/padding/vertical`**
+- **`cardFeedback/radius`**
+- **`cardFeedback/text/gap`**
+- **`cardFeedback/title/color`**
+- **`cardFeedback/title/fontFamily`**
+- **`cardFeedback/title/fontSize`**
+- **`cardFeedback/title/fontWeight`**
+- **`cardFeedback/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.