@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/DataDisplay/Avatar/Avatar.figma.tsx

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import { Avatar } from './Avatar';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=62-3';
+
+/**
+ * Avatar
+ *
+ * Purpose:
+ * - User identity representation
+ * - Supports initials, image placeholder, or icon
+ *
+ * Figma rules:
+ * - Only structural variants are exposed
+ * - Visual state (ring, content) is controlled in code
+ */
+figma.connect(Avatar, FIGMA_URL, {
+  props: {
+    size: figma.enum('size', {
+      sm: 'sm',
+      default: 'default',
+      lg: 'lg',
+    }),
+
+    type: figma.enum('type', {
+      initials: 'initials',
+      image: 'image',
+      icon: 'icon',
+    }),
+  },
+
+  example: ({ size, type }) => {
+    return <Avatar size={size} type={type} initials="AK" showRing={true} />;
+  },
+});

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -0,0 +1,146 @@
+import {
+  View as RNView,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const Text = cssInterop(RNText, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const AvatarVariants = {
+  size: ['sm', 'default', 'lg'] as const,
+  type: ['initials', 'image', 'icon'] as const,
+} as const;
+
+type AvatarSize = (typeof AvatarVariants.size)[number];
+type AvatarType = (typeof AvatarVariants.type)[number];
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('items-center justify-center rounded-full bg-muted', {
+  variants: {
+    size: {
+      sm: 'w-8 h-8', // 32
+      default: 'w-12 h-12', // 48
+      lg: 'w-[60px] h-[60px]', // 60
+    },
+    type: {
+      initials: '',
+      image: 'bg-[lightgray]',
+      icon: '',
+    },
+    ring: {
+      false: '',
+      true: 'ring-2 ring-primary ring-offset-2 ring-offset-background',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    type: 'initials',
+    ring: false,
+  },
+});
+
+const textVariants = cva('font-semibold uppercase text-muted-foreground', {
+  variants: {
+    size: {
+      sm: 'text-xs', // 12
+      default: 'text-base', // 16
+      lg: 'text-xl', // 20
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type AvatarProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'size' | 'type'
+> & {
+  initials: string;
+
+  size?: AvatarSize | 'Sm' | 'Default' | 'Lg';
+  type?: AvatarType | 'Initials' | 'Image' | 'Icon';
+  source?: any;
+  icon?: any;
+
+  showRing?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeSize(v: any): AvatarSize {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'default' || s === 'lg') return s;
+  if (s === 'md') return 'default';
+  return 'sm';
+}
+
+function normalizeType(v: any): AvatarType {
+  const s = String(v ?? 'initials').toLowerCase();
+  if (s === 'initials' || s === 'image' || s === 'icon') return s;
+  return 'initials';
+}
+
+function normalizeRing(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Avatar(props: AvatarProps) {
+  const { initials, size, type, showRing, style, testID } = props;
+
+  const sz = normalizeSize(size);
+  const tp = normalizeType(type);
+  const ring = normalizeRing(showRing);
+
+  return (
+    <View
+      testID={testID ?? 'avatar'}
+      className={cn(rootVariants({ size: sz, type: tp, ring: ring }))}
+      style={style}
+    >
+      {/* Keep original behavior: render initials */}
+      <Text testID="avatar-initials" className={cn(textVariants({ size: sz }))}>
+        {initials}
+      </Text>
+    </View>
+  );
+}
+
+Avatar.displayName = 'Avatar';
+
+export { rootVariants, textVariants };

package/src/components/DataDisplay/Badge/Badge.figma.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import figma from '@figma/code-connect';
+import * as React from 'react';
+import { Badge } from './Badge';
+import { Text } from '../../Input/Text/Text';
+import { Circle } from 'lucide-react-native';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=68-97';
+
+/**
+ * Badge - Compact label for status, metadata, or categorization
+ *
+ * Use cases:
+ * - Status indicators (success, warning, error)
+ * - Labels for items or categories
+ * - Counts and notifications
+ * - Inline metadata
+ *
+ * Features:
+ * - Multiple visual variants (default, success, warning, etc.)
+ * - Two size options (sm, md)
+ * - Optional left and right icons
+ * - Automatic text styling via TextClassContext
+ */
+figma.connect(Badge, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      secondary: 'secondary',
+      destructive: 'destructive',
+      success: 'success',
+      warning: 'warning',
+      outline: 'outline',
+    }),
+
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+    }),
+
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon'),
+  },
+
+  example: (props) => (
+    <Badge
+      variant={props.variant}
+      size={props.size}
+      leftIcon={props.showLeftIcon ? Circle : undefined}
+      rightIcon={props.showRightIcon ? Circle : undefined}
+      showRightIcon={props.showRightIcon}
+    >
+      <Text>Badge</Text>
+    </Badge>
+  ),
+});

package/src/components/DataDisplay/Badge/Badge.tsx

@@ -0,0 +1,170 @@
+// @ts-nocheck
+import * as React from 'react';
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { View } from 'react-native';
+import type { LucideIcon } from 'lucide-react-native';
+import { cn } from '../../../lib/utils';
+import { TextClassContext } from '../../Input/Text/Text';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Slot.View, { className: 'style' });
+
+/**
+ * Badge container style variants
+ *
+ * @variant default - Primary badge with solid background
+ * @variant secondary - Secondary badge with muted background
+ * @variant destructive - Destructive badge with danger/error styling
+ * @variant success - Success badge with positive/confirmation styling
+ * @variant warning - Warning badge with caution styling
+ * @variant outline - Badge with border and transparent background
+ *
+ * @size sm - Small badge with compact padding and text
+ * @size md - Default badge size
+ */
+const badgeVariants = cva(
+  'flex-row items-center rounded-full border web:inline-flex',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-brand-primary',
+        secondary: 'border-transparent bg-surface-subtle',
+        destructive: 'border-transparent bg-highlight-alert-red',
+        success: 'border-transparent bg-highlight-success-green',
+        warning: 'border-transparent bg-highlight-warning-orange',
+        outline: 'border-border-default bg-transparent',
+      },
+      size: {
+        sm: 'px-2 py-0.5',
+        md: 'px-2.5 py-1',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+/**
+ * Badge text style variants for matching text colors with badge variants
+ * Applied through TextClassContext to child Text components
+ *
+ * Variants match badgeVariants to ensure proper contrast
+ * @see badgeVariants
+ */
+const badgeTextVariants = cva('font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-text-inverse',
+      secondary: 'text-text-primary',
+      destructive: 'text-text-inverse',
+      success: 'text-text-inverse',
+      warning: 'text-text-inverse',
+      outline: 'text-text-primary',
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+});
+
+/**
+ * Props for Badge component
+ *
+ * @extends SlottableViewProps - Includes all View props plus asChild for slot composition
+ * @extends VariantProps - Includes variant and size styling options from badgeVariants
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline'} [variant='default']
+ *   - Badge style variant
+ * @property {'sm' | 'md'} [size='md'] - Badge size
+ * @property {LucideIcon} [leftIcon] - Optional icon displayed before badge content
+ * @property {LucideIcon} [rightIcon] - Optional icon displayed after badge content
+ * @property {boolean} [showRightIcon=false] - Controls visibility of rightIcon
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success" size="sm">
+ *   <Text>Active</Text>
+ * </Badge>
+ * ```
+ */
+type BadgeProps = SlottableViewProps &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+    showRightIcon?: boolean;
+  };
+
+/**
+ * A compact badge component for displaying status, labels, or counts
+ *
+ * Small, pill-shaped component for highlighting information. Supports multiple
+ * variants and sizes, optional icons, and automatically styles child Text
+ * components via TextClassContext.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Success badge with icon
+ * <Badge variant="success" leftIcon={Check}>
+ *   <Text>Verified</Text>
+ * </Badge>
+ *
+ * // Warning badge with right icon
+ * <Badge variant="warning" rightIcon={X} showRightIcon>
+ *   <Text>Pending</Text>
+ * </Badge>
+ * ```
+ */
+const Badge = React.forwardRef<ViewRef, BadgeProps>(
+  (
+    {
+      variant,
+      size,
+      asChild = false,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      showRightIcon = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    const iconSize = size === 'sm' ? 12 : 14;
+
+    return (
+      <TextClassContext.Provider value={badgeTextVariants({ variant, size })}>
+        <Component
+          className={cn(badgeVariants({ variant, size }))}
+          ref={ref as any}
+          {...props}
+        >
+          {LeftIcon && <LeftIcon size={iconSize} className="mr-1" />}
+
+          {children}
+
+          {showRightIcon && RightIcon && (
+            <RightIcon size={iconSize} className="ml-1" />
+          )}
+        </Component>
+      </TextClassContext.Provider>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };

package/src/components/DataDisplay/BannerRow/BannerRow.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { BannerRow } from './BannerRow';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=239-1028';
+
+/**
+ * BannerRow - Horizontal scrollable row of gradient banners
+ *
+ * Use cases:
+ * - Promotional banners
+ * - Featured content carousel
+ * - Hero sections
+ *
+ * Features:
+ * - Horizontal scroll with hidden indicators
+ * - Gradient background (111° angle approximation)
+ * - Configurable dimensions and colors
+ * - End spacer for scroll padding
+ */
+figma.connect(BannerRow, FIGMA_URL, {
+  props: {
+    banners: figma.children('Banner*'),
+  },
+  example: () => <BannerRow banners={[{ id: '1' }, { id: '2' }]} />,
+});

package/src/components/DataDisplay/BannerRow/BannerRow.tsx

@@ -0,0 +1,186 @@
+// @ts-nocheck
+import * as React from 'react';
+import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { cssInterop } from 'nativewind';
+
+// NativeWind interop
+cssInterop(ScrollView, { className: 'style' });
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Tokens (from Figma)
+ * --------------------------------------------------- */
+
+const tokens = {
+  radius: {
+    xl: 20,
+  },
+  spacing: {
+    sm: 8,
+    xl: 20,
+  },
+  colors: {
+    highlightPurple: 'rgb(87, 61, 171)',
+    highlightPurpleMuted: 'rgba(87, 61, 171, 0.2)',
+  },
+};
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface BannerItem {
+  /** Unique identifier for the banner */
+  id: string;
+  /** Custom gradient colors [start, end] */
+  gradientColors?: [string, string];
+  /** Custom width (default: 400) */
+  width?: number;
+  /** Custom height (default: 150) */
+  height?: number;
+  /** Custom border radius (default: 20) */
+  borderRadius?: number;
+  /** Content to render inside the banner */
+  children?: React.ReactNode;
+}
+
+export interface BannerProps {
+  /** Custom gradient colors [start, end] */
+  gradientColors?: [string, string];
+  /** Banner width (default: 400) */
+  width?: number;
+  /** Banner height (default: 150) */
+  height?: number;
+  /** Border radius (default: 20) */
+  borderRadius?: number;
+  /** Content to render inside the banner */
+  children?: React.ReactNode;
+  /** Used to override the banner style */
+  style?: StyleProp<ViewStyle>;
+  /** Used to locate this view in end-to-end tests */
+  testID?: string;
+}
+
+export interface BannerRowProps {
+  /** Array of banner items to render */
+  banners: BannerItem[];
+
+  /** Gap between banners (default: 8) */
+  gap?: number;
+
+  /** Content padding (default: 20) */
+  contentPadding?: number;
+
+  /** Whether to show scroll indicators (default: false) */
+  showsScrollIndicator?: boolean;
+
+  /** Whether to show end spacer (default: true) */
+  showEndSpacer?: boolean;
+
+  /** Callback when a banner is pressed */
+  onBannerPress?: (banner: BannerItem, index: number) => void;
+
+  /** Used to override the container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to override the content container style */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests */
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * Banner Component
+ * --------------------------------------------------- */
+
+export function Banner({
+  gradientColors = [
+    tokens.colors.highlightPurple,
+    tokens.colors.highlightPurpleMuted,
+  ],
+  width = 400,
+  height = 150,
+  borderRadius = tokens.radius.xl,
+  children,
+  style,
+  testID,
+}: BannerProps) {
+  return (
+    <LinearGradient
+      testID={testID ?? 'banner'}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      colors={gradientColors}
+      style={[
+        {
+          width,
+          height,
+          borderRadius,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </LinearGradient>
+  );
+}
+
+Banner.displayName = 'Banner';
+
+/* -----------------------------------------------------
+ * BannerRow Component
+ * --------------------------------------------------- */
+
+export function BannerRow({
+  banners,
+  gap = tokens.spacing.sm,
+  contentPadding = tokens.spacing.xl,
+  showsScrollIndicator = false,
+  showEndSpacer = true,
+  onBannerPress: _onBannerPress,
+  style,
+  contentContainerStyle,
+  testID,
+}: BannerRowProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'banner-row'}
+      horizontal
+      showsHorizontalScrollIndicator={showsScrollIndicator}
+      style={style}
+      contentContainerStyle={[
+        {
+          paddingHorizontal: contentPadding,
+          gap: gap,
+          alignItems: 'center',
+        },
+        contentContainerStyle,
+      ]}
+    >
+      {banners.map((banner, _index) => {
+        const { id, children, ...bannerProps } = banner;
+        return (
+          <Banner key={id} testID={`banner-${id}`} {...bannerProps}>
+            {children}
+          </Banner>
+        );
+      })}
+
+      {/* Spacer node from Figma (opacity 0 placeholder) */}
+      {showEndSpacer && (
+        <View
+          style={{
+            width: 12,
+            height: 100,
+            opacity: 0,
+          }}
+        />
+      )}
+    </ScrollView>
+  );
+}
+
+BannerRow.displayName = 'BannerRow';

package/src/components/DataDisplay/CalendarItem/CalendarItem.figma.tsx

@@ -0,0 +1,74 @@
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { CalendarItem } from './CalendarItem';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+const CALENDAR_ITEM_FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=315-6878';
+
+figma.connect(CalendarItem, CALENDAR_ITEM_FIGMA_URL, {
+  props: {
+    span: figma.enum('span', {
+      '1': 1,
+      '2': 2,
+      '3': 3,
+    }),
+  },
+  example: (props) => (
+    <CalendarItem
+      span={props.span as 1 | 2 | 3}
+      time="09:00 AM"
+      eventName="Web Technologies"
+      eventTime="09:00 AM - 09:50 AM"
+      badgeText="Event"
+      showBadge={true}
+      showTrailing={true}
+    />
+  ),
+});
+
+export default function CalendarItemFigma() {
+  return (
+    <View className="bg-background p-5 gap-6 flex-col">
+      {/* Span 1 - Compact */}
+      <CalendarItem
+        span={1}
+        time="09:00 AM"
+        eventName="Web Technologies"
+        eventTime="09:00 AM - 09:50 AM"
+        showBadge={true}
+        showTrailing={true}
+        badgeText="Event"
+      />
+
+      {/* Span 2 - Medium */}
+      <CalendarItem
+        span={2}
+        time="10:00 AM"
+        eventName="React Workshop"
+        eventTime="10:00 AM - 11:30 AM"
+        showBadge={true}
+        showTrailing={true}
+        badgeText="Workshop"
+      />
+
+      {/* Span 3 - Large */}
+      <CalendarItem
+        span={3}
+        time="01:00 PM"
+        eventName="Full Day Conference"
+        eventTime="01:00 PM - 05:00 PM"
+        showBadge={true}
+        showTrailing={true}
+        badgeText="Conference"
+      />
+    </View>
+  );
+}