@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+import { Badge, type BadgeProps } from '../../DataDisplay/Badge/Badge';
+import { Text } from '../../Input/Text/Text';
+import { cn } from '../../../lib/utils';
+
+cssInterop(View, { className: 'style' });
+
+const View_ = View as React.ComponentType<
+  React.ComponentProps<typeof View> & { className?: string }
+>;
+
+/**
+ * CalendarItem Component
+ *
+ * A flexible calendar event display component with responsive variants.
+ * Supports span variants (1, 2, 3) for different event durations.
+ * Integrates Badge component for status/category indicators.
+ */
+
+export type CalendarSpan = 1 | 2 | 3;
+
+export interface CalendarItemProps {
+  /** Time displayed in left column (e.g., "09:00 AM") */
+  time?: string;
+  /** Event name/title */
+  eventName?: string;
+  /** Event time range (e.g., "09:00 AM - 09:50 AM") */
+  eventTime?: string;
+  /** Span variant: 1 (compact), 2 (medium), 3 (large) */
+  span?: CalendarSpan;
+  /** Show badge component */
+  showBadge?: boolean;
+  /** Show trailing checkmark icon */
+  showTrailing?: boolean;
+  /** Badge variant */
+  badgeVariant?: BadgeProps['variant'];
+  /** Badge size */
+  badgeSize?: BadgeProps['size'];
+  /** Badge text content */
+  badgeText?: string;
+  /** Left icon for badge */
+  leftIcon?: BadgeProps['leftIcon'];
+  /** Right icon for badge */
+  rightIcon?: BadgeProps['rightIcon'];
+  /** Show right icon in badge */
+  showRightIcon?: boolean;
+  /** Custom style override */
+  style?: StyleProp<ViewStyle>;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+const getHeightClass = (span: CalendarSpan) => {
+  switch (span) {
+    case 1:
+      return 'h-auto';
+    case 2:
+      return 'h-32';
+    case 3:
+      return 'h-60';
+    default:
+      return 'h-auto';
+  }
+};
+
+const getPaddingClass = (span: CalendarSpan) => {
+  switch (span) {
+    case 1:
+      return 'px-0 py-1';
+    case 2:
+      return 'px-0 py-2';
+    case 3:
+      return 'px-0 py-2';
+    default:
+      return 'px-0 py-1';
+  }
+};
+
+export const CalendarItem = React.forwardRef<View_, CalendarItemProps>(
+  (
+    {
+      time = '09:00 AM',
+      eventName = 'Web Technologies',
+      eventTime = '09:00 AM - 09:50 AM',
+      span = 1,
+      showBadge = true,
+      showTrailing = true,
+      badgeVariant = 'default',
+      badgeSize: _badgeSize = 'md',
+      badgeText = 'Status',
+      leftIcon,
+      rightIcon,
+      showRightIcon = false,
+      style,
+      testID,
+    },
+    ref
+  ) => {
+    return (
+      <View_
+        ref={ref}
+        testID={testID ?? 'calendar-item'}
+        style={style}
+        className={cn('flex-row gap-2 flex-1')}
+      >
+        {/* Time Column */}
+        <View_ className="w-16 justify-start pt-2">
+          <Text className="text-xs font-medium text-text-muted">{time}</Text>
+        </View_>
+
+        {/* Event Container */}
+        <View_
+          className={cn(
+            'flex-1 flex-row rounded-lg border border-border',
+            'bg-cyan-500/20',
+            getHeightClass(span)
+          )}
+        >
+          {/* Left Accent Bar */}
+          <View_
+            className={cn('w-1.5 ml-3 my-3', 'bg-cyan-500 rounded-full')}
+          />
+
+          {/* Content Area */}
+          <View_
+            className={cn(
+              'flex-1 flex-col',
+              getPaddingClass(span),
+              'gap-3 justify-center ml-2'
+            )}
+          >
+            {/* Event Details */}
+            <View_ className="flex-col gap-0.5">
+              <Text className="text-sm font-semibold text-foreground">
+                {eventName}
+              </Text>
+              <Text className="text-xs font-medium text-text-secondary">
+                {eventTime}
+              </Text>
+            </View_>
+
+            {/* Badge Component */}
+            {showBadge && (
+              <View_ className="flex-row w-auto">
+                <Badge
+                  variant={badgeVariant}
+                  leftIcon={leftIcon}
+                  rightIcon={rightIcon}
+                  showRightIcon={showRightIcon}
+                >
+                  <Text>{badgeText}</Text>
+                </Badge>
+              </View_>
+            )}
+          </View_>
+
+          {/* Trailing Icon */}
+          {showTrailing && (
+            <View_ className="justify-center items-center pr-2">
+              <View_ className="w-6 h-6 rounded-sm bg-white items-center justify-center">
+                <Text className="text-sm font-bold text-cyan-500">✓</Text>
+              </View_>
+            </View_>
+          )}
+        </View_>
+      </View_>
+    );
+  }
+);
+
+CalendarItem.displayName = 'CalendarItem';
+
+export default CalendarItem;

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

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import { Card } from './Card';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=111-406';
+
+figma.connect(Card, FIGMA_URL, {
+  props: {
+    showMedia: figma.boolean('Show Media'),
+    showHeader: figma.boolean('Show Header'),
+    title: figma.string('Title'),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    subtitle: figma.string('Subtitle'),
+    showBody: figma.boolean('Show Body'),
+    showLeading: figma.boolean('Show Leading'),
+    showFooterActions: figma.boolean('Show FooterActions'),
+    showBadges: figma.boolean('Show Badges'),
+  },
+
+  example: (props) => (
+    <Card
+      showMedia={props.showMedia}
+      showSubtitle={props.showSubtitle}
+      showBadges={props.showBadges}
+      showFooterActions={props.showFooterActions}
+      showLeading={props.showLeading}
+      title={props.title}
+      subtitle={props.subtitle}
+      avatarInitials="AB"
+      badge1Text="Badge 1"
+      badge2Text="Badge 2"
+      primaryActionText="Primary"
+      secondaryActionText="Secondary"
+    />
+  ),
+});

package/src/components/DataDisplay/Card/Card.tsx

@@ -0,0 +1,449 @@
+import {
+  View as RNView,
+  Text as RNTextBase,
+  Image as RNImage,
+  Pressable as RNPressable,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { MoreHorizontal } from 'lucide-react-native';
+
+import { cn } from '../../../lib/utils';
+
+// Prefer your existing primitives (keeps design system consistent)
+import { Button } from '../../Input/Button/Button';
+import { Badge } from '../Badge/Badge';
+import { Text } from '../../Input/Text/Text';
+import { Checkbox } from '../../Input/Checkbox/Checkbox';
+import { Avatar } from '../Avatar/Avatar';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const RNText = cssInterop(RNTextBase, { className: 'style' });
+const Pressable = cssInterop(RNPressable, { className: 'style' });
+const Image = cssInterop(RNImage, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+export const CardVariants = {
+  density: ['comfortable', 'compact'] as const,
+  tone: ['default', 'subtle'] as const,
+} as const;
+
+type CardDensity = (typeof CardVariants.density)[number];
+type CardTone = (typeof CardVariants.tone)[number];
+
+const rootVariants = cva('w-full overflow-hidden rounded-2xl border', {
+  variants: {
+    tone: {
+      default: 'bg-background border-border',
+      subtle: 'bg-muted border-border',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+});
+
+const mediaWrapVariants = cva('w-full bg-muted overflow-hidden', {
+  variants: {
+    density: {
+      comfortable: 'h-56',
+      compact: 'h-40',
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+  },
+});
+
+const contentWrapVariants = cva('w-full', {
+  variants: {
+    density: {
+      comfortable: 'px-4 py-4 gap-4',
+      compact: 'px-4 py-3 gap-3',
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+  },
+});
+
+const headerRowVariants = cva('w-full flex-row items-center', {
+  variants: {
+    density: {
+      comfortable: 'gap-3',
+      compact: 'gap-3',
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+  },
+});
+
+const titleColumnVariants = cva('flex-1 flex-col', {
+  variants: {
+    density: {
+      comfortable: 'gap-1',
+      compact: 'gap-1',
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+  },
+});
+
+const titleVariants = cva('text-base font-semibold text-foreground');
+const subtitleVariants = cva('text-xs font-medium text-muted-foreground');
+const bodyVariants = cva('text-sm font-medium text-foreground');
+
+const badgesRowVariants = cva('flex-row items-center gap-2');
+const footerRowVariants = cva('w-full flex-row items-center justify-between');
+const leftButtonsVariants = cva('flex-row items-center gap-2');
+const rightButtonsVariants = cva('flex-row items-center gap-2');
+
+const overflowBtnVariants = cva(
+  'absolute right-4 top-4 items-center justify-center rounded-lg border bg-muted',
+  {
+    variants: {
+      density: {
+        comfortable: 'w-10 h-10',
+        compact: 'w-9 h-9',
+      },
+    },
+    defaultVariants: {
+      density: 'comfortable',
+    },
+  }
+);
+
+/* -----------------------------------------------------
+ * Helpers
+ * --------------------------------------------------- */
+
+function normalizeDensity(v: any): CardDensity {
+  const s = String(v ?? 'comfortable').toLowerCase();
+  return s === 'compact' ? 'compact' : 'comfortable';
+}
+
+function normalizeTone(v: any): CardTone {
+  const s = String(v ?? 'default').toLowerCase();
+  return s === 'subtle' ? 'subtle' : 'default';
+}
+
+/* -----------------------------------------------------
+ * Leading slot (simple, system-friendly)
+ * --------------------------------------------------- */
+
+type LeadingType = 'avatar' | 'checkbox' | 'none';
+
+function normalizeLeadingType(v: any): LeadingType {
+  const s = String(v ?? 'avatar').toLowerCase();
+  if (s === 'checkbox') return 'checkbox';
+  if (s === 'none') return 'none';
+  return 'avatar';
+}
+
+type LeadingSlotProps = {
+  type?: LeadingType | 'Avatar' | 'Checkbox' | 'None';
+  checked?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+  avatarInitials?: string;
+};
+
+function normalizeBoolean(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+function LeadingSlot({ type, checked, avatarInitials }: LeadingSlotProps) {
+  const t = normalizeLeadingType(type);
+  if (t === 'none') return null;
+  if (t === 'checkbox') {
+    return (
+      <Checkbox
+        size="sm"
+        state={normalizeBoolean(checked) ? 'checked' : 'unchecked'}
+        disabled={false}
+      />
+    );
+  }
+
+  // avatar (default)
+  return (
+    <Avatar
+      initials={(avatarInitials ?? 'AB').slice(0, 2)}
+      size="Default"
+      type="Initials"
+    />
+  );
+}
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+export type CardProps = Omit<
+  VariantProps<typeof rootVariants> &
+    VariantProps<typeof contentWrapVariants> &
+    VariantProps<typeof mediaWrapVariants> &
+    VariantProps<typeof overflowBtnVariants>,
+  'density' | 'tone'
+> & {
+  title?: string;
+  subtitle?: string;
+  body?: string;
+
+  /** optional media */
+  image?: ImageSourcePropType;
+
+  /** switches */
+  showMedia?: boolean;
+  showSubtitle?: boolean;
+  showBadges?: boolean;
+  showFooterActions?: boolean;
+  showLeading?: boolean;
+  showOverflowMenu?: boolean;
+
+  /** leading */
+  leadingType?: LeadingType | 'Avatar' | 'Checkbox' | 'None';
+  leadingChecked?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+  avatarInitials?: string;
+
+  /** variants */
+  density?: CardDensity | 'Comfortable' | 'Compact';
+  tone?: CardTone | 'Default' | 'Subtle';
+
+  /** optional badge labels */
+  badge1Text?: string;
+  badge2Text?: string;
+
+  /** footer button labels */
+  primaryActionText?: string;
+  secondaryActionText?: string;
+
+  /** callbacks */
+  onPrimaryActionPress?: () => void;
+  onSecondaryActionPress?: () => void;
+  onOverflowPress?: () => void;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Strictly block passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Card(props: CardProps) {
+  const {
+    title = 'Card Title',
+    subtitle = 'Subtitle of the card goes here',
+    body = 'The card may contain body content which can be truncated to 1–2 lines.',
+    image,
+
+    showMedia = true,
+    showSubtitle = true,
+    showBadges = true,
+    showFooterActions = true,
+    showLeading = true,
+    showOverflowMenu = true,
+
+    leadingType = 'avatar',
+    leadingChecked,
+    avatarInitials,
+
+    density,
+    tone,
+
+    badge1Text = 'Badge 1',
+    badge2Text = 'Badge 2',
+
+    primaryActionText = 'Primary',
+    secondaryActionText = 'Secondary',
+
+    onPrimaryActionPress,
+    onSecondaryActionPress,
+    onOverflowPress,
+
+    style,
+    testID,
+  } = props;
+
+  const den = normalizeDensity(density);
+  const tn = normalizeTone(tone);
+
+  return (
+    <View
+      testID={testID ?? 'card'}
+      className={cn(rootVariants({ tone: tn }))}
+      style={style}
+    >
+      {showMedia ? (
+        <View
+          testID="card-media-wrap"
+          className={cn(mediaWrapVariants({ density: den }))}
+        >
+          {image ? (
+            <Image
+              testID="card-media"
+              source={image}
+              resizeMode="cover"
+              className="w-full h-full"
+            />
+          ) : (
+            <View
+              testID="card-media-placeholder"
+              className="w-full h-full bg-muted"
+            />
+          )}
+        </View>
+      ) : null}
+
+      <View
+        testID="card-content"
+        className={cn(contentWrapVariants({ density: den }))}
+      >
+        <View
+          testID="card-header"
+          className={cn(headerRowVariants({ density: den }))}
+        >
+          {showLeading ? (
+            <View testID="card-leading" className="items-center justify-center">
+              <LeadingSlot
+                type={leadingType}
+                checked={leadingChecked}
+                avatarInitials={avatarInitials}
+              />
+            </View>
+          ) : null}
+
+          <View
+            testID="card-title-column"
+            className={cn(titleColumnVariants({ density: den }))}
+          >
+            <RNText
+              testID="card-title"
+              numberOfLines={1}
+              className={cn(titleVariants())}
+            >
+              {title}
+            </RNText>
+
+            {showSubtitle ? (
+              <RNText
+                testID="card-subtitle"
+                numberOfLines={1}
+                className={cn(subtitleVariants())}
+              >
+                {subtitle}
+              </RNText>
+            ) : null}
+          </View>
+        </View>
+
+        <RNText
+          testID="card-body"
+          numberOfLines={2}
+          className={cn(bodyVariants())}
+        >
+          {body}
+        </RNText>
+
+        {showBadges ? (
+          <View testID="card-badges" className={cn(badgesRowVariants())}>
+            <Badge
+              testID="card-badge-1"
+              variant="default"
+              size="sm"
+              showRightIcon={false}
+            >
+              <Text>{badge1Text}</Text>
+            </Badge>
+            <Badge
+              testID="card-badge-2"
+              variant="default"
+              size="sm"
+              showRightIcon={false}
+            >
+              <Text>{badge2Text}</Text>
+            </Badge>
+          </View>
+        ) : null}
+
+        {showFooterActions ? (
+          <View testID="card-footer" className={cn(footerRowVariants())}>
+            <View
+              testID="card-footer-left"
+              className={cn(leftButtonsVariants())}
+            >
+              <Button
+                testID="card-primary-action"
+                disabled={false}
+                size="default"
+                variant="default"
+                showLeftIcon={false}
+                showRightIcon={false}
+                onPress={onPrimaryActionPress}
+              >
+                {primaryActionText}
+              </Button>
+              <Button
+                testID="card-secondary-action"
+                disabled={false}
+                size="default"
+                variant="secondary"
+                showLeftIcon={false}
+                showRightIcon={false}
+                onPress={onSecondaryActionPress}
+              >
+                {secondaryActionText}
+              </Button>
+            </View>
+
+            <View
+              testID="card-footer-right"
+              className={cn(rightButtonsVariants())}
+            >
+              <Button
+                testID="card-icon-action"
+                disabled={false}
+                size="icon"
+                variant="secondary"
+                showLeftIcon={false}
+                showRightIcon={false}
+              />
+            </View>
+          </View>
+        ) : null}
+      </View>
+
+      {showOverflowMenu ? (
+        <Pressable
+          testID="card-overflow"
+          onPress={onOverflowPress}
+          className={cn(overflowBtnVariants({ density: den }))}
+          hitSlop={8}
+        >
+          <MoreHorizontal size={18} color="hsl(var(--foreground))" />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+Card.displayName = 'Card';
+
+export { rootVariants };
+export type { CardProps };

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

@@ -0,0 +1,43 @@
+import figma from '@figma/code-connect';
+import { Chip } from './Chips';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=66-22';
+
+/**
+ * Chip
+ *
+ * Purpose:
+ * - Compact label for filters, selections, or status
+ *
+ * Design rules:
+ * - `variant` controls semantic color
+ * - `state` controls visual state (default / selected / disabled)
+ * - Icons are contextual → handled in examples, not variants
+ */
+figma.connect(Chip, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      outline: 'outline',
+      brand: 'brand',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+
+    state: figma.enum('state', {
+      default: 'default',
+      selected: 'selected',
+      disabled: 'disabled',
+    }),
+  },
+
+  example: ({ variant, state }) => {
+    return (
+      <Chip variant={variant} state={state} showLeftIcon showRightIcon>
+        Chip
+      </Chip>
+    );
+  },
+});