@campxdev/react-native-blueprint 0.1.16 → 0.1.18

package/src/components/DataDisplay/FeedCard/FeedCard.tsx

@@ -0,0 +1,376 @@
+// @ts-nocheck
+import {
+  View as RNView,
+  Text as RNTextBase,
+  Image as RNImage,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Button } from '../../Input/Button/Button';
+import { Badge } from '../Badge/Badge';
+import { Text } from '../../Input/Text/Text';
+import { Avatar } from '../Avatar/Avatar';
+import { AspectRatio } from '../../Layout/AspectRatio/Aspect-Ratio';
+
+// Default placeholder image
+const DEFAULT_MEDIA_IMAGE =
+  'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe3e?w=400&h=224&fit=crop';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const RNText = cssInterop(RNTextBase, { className: 'style' });
+const Image = cssInterop(RNImage, { className: 'style' });
+
+/* ============================================================================
+ * VARIANTS
+ * ============================================================================ */
+
+export const FeedCardVariants = {
+  type: ['post', 'announcement'] as const,
+} as const;
+
+type FeedCardType = (typeof FeedCardVariants.type)[number];
+
+const rootVariants = cva('w-full overflow-hidden rounded-3xl', {
+  variants: {
+    type: {
+      post: 'bg-surface-default',
+      announcement: 'bg-surface-default border border-border-default',
+    },
+  },
+  defaultVariants: {
+    type: 'post',
+  },
+});
+
+const metaRowVariants = cva('w-full flex-row p-4', {
+  variants: {
+    type: {
+      post: 'items-center gap-2',
+      announcement: 'items-center justify-between',
+    },
+  },
+  defaultVariants: {
+    type: 'post',
+  },
+});
+
+const mediaWrapVariants = cva('w-full overflow-hidden px-4 pb-4');
+
+const contentWrapVariants = cva('w-full px-4 pb-4 flex-col');
+
+const headerVariants = cva('w-full gap-1 flex-col');
+
+const titleVariants = cva('text-base font-semibold text-text-primary');
+
+const subtitleVariants = cva('text-xs font-medium text-text-secondary');
+
+const bodyVariants = cva('text-sm font-medium text-text-primary');
+
+const badgesRowVariants = cva('w-full flex-row items-start gap-2 pb-4 px-4');
+
+const footerRowVariants = cva(
+  'w-full flex-row items-center justify-between px-4 pb-4'
+);
+
+const leftButtonsVariants = cva('flex-row items-center gap-2');
+
+const rightButtonsVariants = cva('flex-row items-center');
+
+/* ============================================================================
+ * HELPERS
+ * ============================================================================ */
+
+function normalizeType(v: any): FeedCardType {
+  const s = String(v ?? 'post').toLowerCase();
+  return s === 'announcement' ? 'announcement' : 'post';
+}
+
+/* ============================================================================
+ * PROPS
+ * ============================================================================ */
+
+export type FeedCardProps = {
+  /** Author/creator name */
+  authorName?: string;
+
+  /** Post/announcement title */
+  postTitle?: string;
+
+  /** Subtitle below title */
+  subtitle?: string;
+
+  /** Main body content */
+  postContent?: string;
+
+  /** Optional image/media */
+  image?: ImageSourcePropType;
+
+  /** Card type variant */
+  type?: FeedCardType | 'Post' | 'Announcement';
+
+  /** Visibility toggles */
+  showHeader?: boolean;
+  showLeading?: boolean;
+  showMedia?: boolean;
+  showPostContent?: boolean;
+  showSubtitle?: boolean;
+  showBadges?: boolean;
+  showFooterActions?: boolean;
+  showSecondaryButton?: boolean;
+
+  /** Badge labels */
+  badge1Text?: string;
+  badge2Text?: string;
+
+  /** Button labels */
+  primaryActionText?: string;
+  secondaryActionText?: string;
+  tertiaryActionText?: string;
+
+  /** Callbacks */
+  onPrimaryActionPress?: () => void;
+  onSecondaryActionPress?: () => void;
+  onTertiaryActionPress?: () => void;
+
+  /** Styling */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * COMPONENT
+ * ============================================================================ */
+
+export function FeedCard(props: FeedCardProps) {
+  const {
+    authorName = 'Author Name',
+    postTitle = 'Post Title',
+    subtitle = 'Subtitle of the card goes here',
+    postContent = 'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+    image,
+
+    type = 'post',
+
+    showHeader = true,
+    showLeading = true,
+    showMedia = true,
+    showPostContent = true,
+    showSubtitle = true,
+    showBadges = true,
+    showFooterActions = true,
+    showSecondaryButton = true,
+
+    badge1Text = 'Badge',
+    badge2Text = 'Badge',
+
+    primaryActionText = 'Button',
+    secondaryActionText = 'Button',
+
+    onPrimaryActionPress,
+    onSecondaryActionPress,
+    onTertiaryActionPress,
+
+    style,
+    testID,
+  } = props;
+
+  const cardType = normalizeType(type);
+  const isAnnouncement = cardType === 'announcement';
+
+  return (
+    <View
+      testID={testID ?? 'feed-card'}
+      className={cn(rootVariants({ type: cardType }))}
+      style={style}
+    >
+      {/* Meta Section: Author Info */}
+      <View
+        testID="feed-card-meta"
+        className={cn(metaRowVariants({ type: cardType }))}
+      >
+        {showLeading && (
+          <View
+            testID="feed-card-leading"
+            className="items-center justify-center"
+          >
+            <Avatar
+              initials={(authorName ?? 'AA').slice(0, 2).toUpperCase()}
+              size="Default"
+              type="Initials"
+            />
+          </View>
+        )}
+
+        {/* Author Details */}
+        <View testID="feed-card-author" className="flex-col flex-1 gap-0.5">
+          <RNText
+            testID="feed-card-author-name"
+            numberOfLines={1}
+            className="text-sm font-semibold text-text-primary"
+          >
+            {authorName}
+          </RNText>
+          <RNText
+            testID="feed-card-timestamp"
+            numberOfLines={1}
+            className="text-xs font-normal text-text-secondary"
+          >
+            Posted 1 day ago
+          </RNText>
+        </View>
+
+        {/* Announcement Badge */}
+        {isAnnouncement && (
+          <Badge
+            testID="feed-card-type-badge"
+            variant="default"
+            size="sm"
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            <Text>Announcement</Text>
+          </Badge>
+        )}
+      </View>
+
+      {/* Media Section */}
+      {showMedia && (
+        <View testID="feed-card-media-wrap" className={cn(mediaWrapVariants())}>
+          <AspectRatio variant="16:9">
+            <View className="w-full h-full bg-surface-subtle rounded-3xl overflow-hidden">
+              <Image
+                testID="feed-card-media"
+                source={image || { uri: DEFAULT_MEDIA_IMAGE }}
+                resizeMode="cover"
+                className="w-full h-full"
+              />
+            </View>
+          </AspectRatio>
+        </View>
+      )}
+
+      {/* Content Section */}
+      {showPostContent && (
+        <View testID="feed-card-content" className={cn(contentWrapVariants())}>
+          {/* Header: Title + Subtitle */}
+          {showHeader && (
+            <View testID="feed-card-header" className={cn(headerVariants())}>
+              <RNText
+                testID="feed-card-title"
+                numberOfLines={1}
+                className={cn(titleVariants())}
+              >
+                {postTitle}
+              </RNText>
+
+              {showSubtitle && (
+                <RNText
+                  testID="feed-card-subtitle"
+                  numberOfLines={1}
+                  className={cn(subtitleVariants())}
+                >
+                  {subtitle}
+                </RNText>
+              )}
+            </View>
+          )}
+
+          {/* Body */}
+          <RNText
+            testID="feed-card-body"
+            numberOfLines={2}
+            className={cn(bodyVariants())}
+          >
+            {postContent}
+          </RNText>
+        </View>
+      )}
+
+      {/* Badges Section */}
+      {showBadges && (
+        <View testID="feed-card-badges" className={cn(badgesRowVariants())}>
+          <Badge
+            testID="feed-card-badge-1"
+            variant="default"
+            size="sm"
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            <Text>{badge1Text}</Text>
+          </Badge>
+          <Badge
+            testID="feed-card-badge-2"
+            variant="default"
+            size="sm"
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            <Text>{badge2Text}</Text>
+          </Badge>
+        </View>
+      )}
+
+      {/* Footer Actions */}
+      {showFooterActions && (
+        <View testID="feed-card-footer" className={cn(footerRowVariants())}>
+          <View
+            testID="feed-card-footer-left"
+            className={cn(leftButtonsVariants())}
+          >
+            <Button
+              testID="feed-card-primary-action"
+              disabled={false}
+              size="default"
+              variant="default"
+              showLeftIcon={false}
+              showRightIcon={false}
+              onPress={onPrimaryActionPress}
+            >
+              {primaryActionText}
+            </Button>
+
+            {showSecondaryButton && (
+              <Button
+                testID="feed-card-secondary-action"
+                disabled={false}
+                size="default"
+                variant="secondary"
+                showLeftIcon={false}
+                showRightIcon={false}
+                onPress={onSecondaryActionPress}
+              >
+                {secondaryActionText}
+              </Button>
+            )}
+          </View>
+
+          <View
+            testID="feed-card-footer-right"
+            className={cn(rightButtonsVariants())}
+          >
+            <Button
+              testID="feed-card-tertiary-action"
+              disabled={false}
+              size="icon"
+              variant="secondary"
+              showLeftIcon={false}
+              showRightIcon={false}
+              onPress={onTertiaryActionPress}
+            />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+FeedCard.displayName = 'FeedCard';
+
+export type { FeedCardProps };

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

@@ -2,11 +2,19 @@ import figma from '@figma/code-connect';
 import { Greeting } from './Greeting';
 
 const FIGMA_URL =
-  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=448-8146';
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=495-8995';
 
 figma.connect(Greeting, FIGMA_URL, {
   props: {
+    ctaLayout: figma.enum('CTA Layout', {
+      'icon': 'icon',
+      'none': 'none',
+      'floating': 'floating',
+      'ai summary': 'ai summary',
+    }),
     showNextUp: figma.boolean('Show NextUp'),
   },
-  example: (props) => <Greeting showNextUp={props.showNextUp} />,
+  example: (props) => (
+    <Greeting ctaLayout={props.ctaLayout} showNextUp={props.showNextUp} />
+  ),
 });

package/src/components/DataDisplay/Greeting/Greeting.tsx

@@ -1,18 +1,17 @@
 // @ts-nocheck
 import * as React from 'react';
-import {
-  Pressable as RNPressable,
-  StyleSheet,
-  View as RNView,
-} from 'react-native';
+import { Pressable as RNPressable, View as RNView } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import { cssInterop } from 'nativewind';
 import { Calendar } from 'lucide-react-native';
 import { cn } from '../../../lib/utils';
 import { Text } from '../../Input/Text/Text';
 import { Icon } from '../../ui/Icon';
+import { Button } from '../../Input/Button/Button';
 
 cssInterop(RNView, { className: 'style' });
 cssInterop(RNPressable, { className: 'style' });
+cssInterop(LinearGradient, { className: 'style' });
 
 const View = RNView as React.ComponentType<
   React.ComponentProps<typeof RNView> & { className?: string }
@@ -31,7 +30,9 @@ export interface GreetingProps {
   greetingText?: string;
   /** Subtitle/secondary text below greeting */
   subtitle?: string;
-  /** Whether to show the schedule/calendar button */
+  /** CTA (Call-to-Action) layout style */
+  ctaLayout?: 'icon' | 'none' | 'floating' | 'ai summary';
+  /** Whether to show the schedule/calendar button - deprecated, use ctaLayout instead */
   showScheduleButton?: boolean;
   /** Callback when schedule button is pressed */
   onSchedulePress?: () => void;
@@ -77,7 +78,8 @@ export function Greeting({
   userName = 'Marshall',
   greetingText = 'Good Morning',
   subtitle = 'You have 3 Classes today',
-  showScheduleButton = true,
+  ctaLayout = 'icon',
+  showScheduleButton,
   onSchedulePress,
   showNextUp = true,
   nextUpTitle = 'Digital Logic Design',
@@ -85,16 +87,51 @@ export function Greeting({
   className,
   testID,
 }: GreetingProps) {
+  // Handle backwards compatibility: showScheduleButton prop takes precedence if explicitly set
+  const effectiveCtaLayout =
+    showScheduleButton !== undefined
+      ? showScheduleButton
+        ? 'icon'
+        : 'none'
+      : ctaLayout;
+
+  const isAiSummary = effectiveCtaLayout === 'ai summary';
+  const isFloating = effectiveCtaLayout === 'floating';
+  const isIconOrFloatingOrNoneOrAiSummary = [
+    'icon',
+    'floating',
+    'none',
+    'ai summary',
+  ].includes(effectiveCtaLayout);
+  const isNone = effectiveCtaLayout === 'none';
+
   return (
     <View
       testID={testID}
       className={cn(
-        'w-full max-w-[400px] flex-col gap-4 items-start justify-end rounded-lg border border-border-default bg-surface-default px-3 py-4',
+        'w-full max-w-[400px] flex-col items-start justify-end bg-surface-default',
+        // Base styling based on ctaLayout
+        isAiSummary
+          ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
+          : isFloating
+            ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
+            : isNone
+              ? 'gap-4 rounded-3xl border border-border-default px-0 py-4'
+              : 'gap-4 rounded-3xl border border-border-default px-0 py-4',
         className
       )}
     >
       {/* Header Section: Greeting + Schedule Button */}
-      <View className="w-full flex-row items-center justify-between">
+      <View
+        className={cn(
+          'w-full flex-row items-center',
+          isFloating || isAiSummary
+            ? 'justify-between px-3'
+            : isNone
+              ? 'px-3'
+              : 'px-3'
+        )}
+      >
         {/* Header Content: Title and Subtitle */}
         <View className="flex-1 flex-col gap-1">
           <Text className="font-semibold text-base text-text-primary">
@@ -105,22 +142,32 @@ export function Greeting({
           </Text>
         </View>
 
-        {/* Schedule Button with Calendar Icon */}
-        {showScheduleButton && (
+        {/* Schedule Button with Calendar Icon - Icon Layout */}
+        {effectiveCtaLayout === 'icon' && (
+          <Pressable
+            onPress={onSchedulePress}
+            hitSlop={12}
+            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
+          >
+            <Icon as={Calendar} size={16} color="white" />
+          </Pressable>
+        )}
+
+        {/* Calendar Icon for AI Summary and Floating layouts */}
+        {isAiSummary && (
           <Pressable
             onPress={onSchedulePress}
             hitSlop={12}
-            className="ml-3 flex-row items-center justify-center rounded-lg bg-highlight-purple p-3"
-            style={styles.scheduleButton}
+            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
           >
             <Icon as={Calendar} size={16} color="white" />
           </Pressable>
         )}
       </View>
 
-      {/* Next Up Section */}
-      {showNextUp && (
-        <View className="w-full flex-col gap-1">
+      {/* Next Up Section - For icon, none, floating, and ai summary layouts */}
+      {isIconOrFloatingOrNoneOrAiSummary && showNextUp && (
+        <View className="w-full flex-col gap-1 px-3">
           <Text className="font-medium text-xs text-text-secondary">
             Next up
           </Text>
@@ -137,18 +184,52 @@ export function Greeting({
           </View>
         </View>
       )}
+
+      {/* AI Summary Button - Purple to Red Gradient - Full Width */}
+      {isAiSummary && (
+        <LinearGradient
+          colors={['#573dab', '#f2353c']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          className="w-full items-center justify-center"
+          style={{
+            paddingVertical: 8,
+            borderBottomLeftRadius: 20,
+            borderBottomRightRadius: 20,
+          }}
+        >
+          <Pressable
+            onPress={onSchedulePress}
+            className="w-full items-center justify-center"
+            style={{ paddingVertical: 0 }}
+          >
+            <Text className="font-semibold text-sm text-white">
+              AI Summary for Today
+            </Text>
+          </Pressable>
+        </LinearGradient>
+      )}
+
+      {/* Floating Button - Full width at bottom - Card color (white) */}
+      {isFloating && (
+        <View
+          className="w-full bg-surface-default"
+          style={{ borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}
+        >
+          <Button
+            variant="outline"
+            size="default"
+            showRightIcon
+            rightIcon={Calendar}
+            onPress={onSchedulePress}
+            style={{ width: '100%' }}
+          >
+            View Schedule
+          </Button>
+        </View>
+      )}
     </View>
   );
 }
 
 Greeting.displayName = 'Greeting';
-
-const styles = StyleSheet.create({
-  scheduleButton: {
-    shadowColor: '#573dab',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.5,
-    shadowRadius: 12,
-    elevation: 8,
-  },
-});

package/src/components/ui/index.ts

@@ -19,6 +19,7 @@ export * from '../Layout/Bottomsheet/Bottom-Sheet';
 export * from '../Input/Button/Button';
 export * from '../DataDisplay/Card/Card';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/FeedCard/FeedCard';
 export * from '../DataDisplay/Greeting/Greeting';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
 export * from '../DataDisplay/DataCard/DataCard';