jfs-components 0.0.1

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,396 @@
+import React, { useMemo } from 'react'
+import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type AccessibilityState } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import Button from '../Button/Button'
+import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ * This ensures that all child components in slots receive the modes prop from the parent.
+ */
+function cloneChildrenWithModes(
+  children: React.ReactNode,
+  modes: Record<string, any>
+): React.ReactNode[] {
+  const result = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    // Get existing children
+    const childChildren = (child.props as any)?.children
+    const hasChildren = childChildren !== undefined && childChildren !== null
+
+    // Clone the child with modes prop if it doesn't already have one
+    // or merge with existing modes if it does
+    // Merge order: parent modes first, then child's explicit modes override them
+    const existingModes = (child.props as any)?.modes
+    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
+
+    // Recursively process children if they exist
+    const processedChildren: React.ReactNode | undefined = hasChildren
+      ? cloneChildrenWithModes(
+          React.Children.toArray(childChildren),
+          modes
+        )
+      : undefined
+
+    // Clone element with modes and processed children
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })
+  return result || []
+}
+
+type ListItemProps = {
+  layout?: 'Vertical' | 'Horizontal';
+  title?: string;
+  supportText?: string;
+  showSupportText?: boolean;
+  leading?: React.ReactNode;
+  supportSlot?: React.ReactNode;
+  endSlot?: React.ReactNode;
+  showTrailing?: boolean;
+  modes?: Record<string, any>;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityState?: AccessibilityState;
+  /**
+   * Web-specific accessibility props (only used on web platform)
+   */
+  webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * ListItem component that mirrors the Figma "List Item" component.
+ *
+ * This component supports:
+ *  - **layout**: "Vertical" or "Horizontal"
+ *  - **static** vs **navigation** behaviour (based on `onPress`)
+ *  - **slots** for leading element, support text, and trailing content
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "support text" → `supportSlot`
+ *  - Slot "end" → `endSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Vertical'|'Horizontal'} [props.layout='Vertical'] - Layout variant, controlling structure and children.
+ * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
+ * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
+ * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
+ * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
+ * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {boolean} [props.showTrailing=true] - When `true`, renders the default trailing Button in Horizontal layout if `endSlot` is not provided.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
+ * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.contentStyle] - Optional inner content wrapper style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+function ListItem({
+  layout = 'Vertical',
+  title = 'Title',
+  supportText = 'Support Text',
+  showSupportText = true,
+  leading,
+  supportSlot,
+  endSlot,
+  showTrailing = true,
+  modes = {},
+  onPress,
+  style,
+  contentStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}: ListItemProps) {
+  // Resolve container spacing tokens
+  const gap = getVariableByName('listItem/gap', modes) ?? 8
+  const paddingTop = getVariableByName('listItem/padding/top', modes) ?? 0
+  const paddingBottom = getVariableByName('listItem/padding/bottom', modes) ?? 0
+  const paddingLeft = getVariableByName('listItem/padding/left', modes) ?? 0
+  const paddingRight = getVariableByName('listItem/padding/right', modes) ?? 0
+
+  // Title typography (horizontal layout)
+  const titleColor = getVariableByName('listItem/title/color', modes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('listItem/title/fontSize', modes) || 14
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', modes) || 16
+  const titleFontFamily =
+    getVariableByName('listItem/title/fontFamily', modes) || 'System'
+  const titleFontWeightRaw =
+    getVariableByName('listItem/title/fontWeight', modes) || 700
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number'
+      ? titleFontWeightRaw.toString()
+      : titleFontWeightRaw
+
+  // Support text typography (used in both layouts)
+  const supportColor =
+    getVariableByName('listItem/supportText/color', modes) || '#1f1a14'
+  const supportFontSize =
+    getVariableByName('listItem/supportText/fontSize', modes) || 12
+  const supportLineHeight =
+    getVariableByName('listItem/supportText/lineHeight', modes) || 14
+  const supportFontFamily =
+    getVariableByName('listItem/supportText/fontFamily', modes) || 'System'
+  const supportFontWeightRaw =
+    getVariableByName('listItem/supportText/fontWeight', modes) || 500
+  const supportFontWeight =
+    typeof supportFontWeightRaw === 'number'
+      ? supportFontWeightRaw.toString()
+      : supportFontWeightRaw
+
+  const baseContainerStyle = {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+  }
+
+  const sharedLayoutStyle: ViewStyle =
+    layout === 'Horizontal'
+      ? {
+          flexDirection: 'row' as const,
+          alignItems: 'center' as const,
+          gap,
+        }
+      : {
+          flexDirection: 'column' as const,
+          alignItems: 'center' as const,
+          gap,
+        }
+
+  const innerContentBaseStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap,
+  }
+
+  const verticalContentBaseStyle: ViewStyle = {
+    alignItems: 'center',
+    gap,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+  }
+
+  const supportTextStyle: TextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    lineHeight: supportLineHeight,
+    fontFamily: supportFontFamily,
+    fontWeight: supportFontWeight,
+  }
+
+  const trailingWrapperStyle = useMemo(
+    () => ({ marginLeft: gap / 2 }),
+    [gap],
+  )
+
+
+  // Generate default accessibility label from title and supportText if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || 
+    (layout === 'Horizontal' 
+      ? `${title}${showSupportText && supportText ? `, ${supportText}` : ''}`
+      : supportText)
+
+  // Get web platform support props (only used when onPress is defined)
+  const webPropsHorizontal = usePressableWebSupport({
+    restProps: rest,
+    onPress,
+    disabled: false,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+
+  const webPropsVertical = usePressableWebSupport({
+    restProps: rest,
+    onPress,
+    disabled: false,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+
+  // Process leading slot to pass modes to children
+  const processedLeading = leading
+    ? cloneChildrenWithModes(React.Children.toArray(leading), modes)
+    : []
+  // Extract single element if array has one element, otherwise use array
+  const leadingElement =
+    processedLeading.length > 0
+      ? processedLeading.length === 1
+        ? processedLeading[0]
+        : processedLeading
+      : <IconCapsule modes={modes} accessibilityLabel={defaultAccessibilityLabel} />
+
+  const renderSupportContent = () => {
+    if (supportSlot) {
+      // Process supportSlot to pass modes to children
+      const processedSupportSlot = cloneChildrenWithModes(
+        React.Children.toArray(supportSlot),
+        modes
+      )
+      // Extract single element if array has one element, otherwise use array
+      return processedSupportSlot.length === 1
+        ? processedSupportSlot[0]
+        : processedSupportSlot
+    }
+
+    // Default support text (used for:
+    //  - vertical layout main text
+    //  - horizontal layout secondary line)
+    return (
+      <Text
+        style={supportTextStyle}
+        numberOfLines={layout === 'Horizontal' ? 2 : 1}
+      >
+        {supportText}
+      </Text>
+    )
+  }
+
+  if (layout === 'Horizontal') {
+    // Process endSlot to pass modes to children
+    const processedEndSlot = endSlot
+      ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes)
+      : []
+    // Extract single element if array has one element, otherwise use array
+    const trailingContent =
+      processedEndSlot.length > 0
+        ? processedEndSlot.length === 1
+          ? processedEndSlot[0]
+          : processedEndSlot
+        : showTrailing
+        ? <Button label="Button" modes={modes} {...({} as any)} />
+        : null
+
+    const innerContent = (
+      <View
+        style={[innerContentBaseStyle, contentStyle]}
+      >
+        {leadingElement}
+        <View
+          style={{
+            flex: 1,
+            minWidth: 1,
+          }}
+        >
+          <Text
+            style={titleTextStyle}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          {showSupportText && renderSupportContent()}
+        </View>
+        {trailingContent ? (
+          <View style={trailingWrapperStyle}>{trailingContent}</View>
+        ) : null}
+      </View>
+    )
+
+    if (onPress) {
+      return (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={defaultAccessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityState={{ 
+            ...accessibilityState 
+          }}
+          onPress={onPress}
+          style={({ pressed }) => [
+            baseContainerStyle,
+            sharedLayoutStyle,
+            pressed ? { opacity: 0.85 } : null,
+            style,
+          ]}
+          {...webPropsHorizontal}
+        >
+          {innerContent}
+        </Pressable>
+      )
+    }
+
+    return (
+      <View
+        accessibilityRole={undefined}
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        style={[baseContainerStyle, sharedLayoutStyle, style]}
+        {...rest}
+      >
+        {innerContent}
+      </View>
+    )
+  }
+
+  // Vertical layout - icon on top, support text/slot below
+  const verticalContent = (
+    <View style={[verticalContentBaseStyle, contentStyle]}>
+      {leadingElement}
+      {renderSupportContent()}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ 
+          ...accessibilityState 
+        }}
+        onPress={onPress}
+        style={({ pressed }) => [
+          baseContainerStyle,
+          sharedLayoutStyle,
+          pressed ? { opacity: 0.85 } : null,
+          style,
+        ]}
+        {...webPropsVertical}
+      >
+        {verticalContent}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View
+      accessibilityRole={undefined}
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      style={[baseContainerStyle, sharedLayoutStyle, style]}
+      {...rest}
+    >
+      {verticalContent}
+    </View>
+  )
+}
+
+export default ListItem

package/src/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.