@campxdev/react-native-blueprint 0.1.17 → 0.1.19

package/lib/typescript/src/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SuccessPattern.figma.d.ts.map

package/lib/typescript/src/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessPattern.figma.d.ts","sourceRoot":"","sources":["../../../../../../src/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/patterns/pattern-components/SuccessPattern/index.d.ts

@@ -0,0 +1,3 @@
+export { SuccessPattern } from './SuccessPattern';
+export type { SuccessPatternProps } from './SuccessPattern';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/patterns/pattern-components/SuccessPattern/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/patterns/pattern-components/SuccessPattern/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/typescript/src/patterns/pattern-components/index.d.ts

@@ -0,0 +1,16 @@
+export * from './AlertDialogPattern';
+export * from './DashboardPattern';
+export * from './EmptyState';
+export * from './DataListPattern';
+export * from './CardListPattern';
+export * from './AlertPattern';
+export * from './DialogPattern';
+export * from './SkeletonPattern';
+export * from './SuccessPattern';
+export * from './FormPattern';
+export * from './EntityPatternOverview';
+export * from './EntityPatternStructured';
+export * from './EntityPatternGuided';
+export * from './CalendarPattern';
+export * from './MonthlyCalendarPattern';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/patterns/pattern-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/patterns/pattern-components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC"}

package/lib/typescript/tailwind.config.d.ts

@@ -0,0 +1,3 @@
+declare const _exports: import("tailwindcss").Config;
+export = _exports;
+//# sourceMappingURL=tailwind.config.d.ts.map

package/lib/typescript/tailwind.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../../tailwind.config.js"],"names":[],"mappings":"wBAEW,OAAO,aAAa,EAAE,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -10,7 +10,8 @@
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./style": "./global.css"
   },
   "files": [
     "src",
@@ -43,8 +44,9 @@
     "typecheck": "tsc --project tsconfig.build.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
-    "prepare": "bob build --target module",
-    "build:full": "bob build && cp global.css lib/",
+    "build:css": "tailwindcss -i ./global.css -o ./lib/global.css --content './src/**/*.{ts,tsx}' --minify",
+    "prepare": "yarn build:css && bob build --target module",
+    "build:full": "yarn build:css && bob build",
     "release": "release-it --only-version"
   },
   "keywords": [
@@ -91,7 +93,6 @@
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
     "release-it": "^19.0.4",
-    "tailwindcss": "^3.4.17",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
@@ -213,6 +214,7 @@
     "react-native-svg": "^15.14.0",
     "react-native-worklets": "0.5.1",
     "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7"
   }
 }

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

@@ -0,0 +1,43 @@
+import figma from '@figma/code-connect';
+import { FeedCard } from './FeedCard';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=511-10139';
+
+figma.connect(FeedCard, FIGMA_URL, {
+  props: {
+    type: figma.enum('type', {
+      post: 'post',
+      announcement: 'announcement',
+    }),
+    authorName: figma.string('authorName'),
+    postTitle: figma.string('postTitle'),
+    subtitle: figma.string('subtitle'),
+    postContent: figma.string('postContent'),
+    showHeader: figma.boolean('Show Header'),
+    showLeading: figma.boolean('Show Leading'),
+    showMedia: figma.boolean('Show Media'),
+    showPostContent: figma.boolean('Show PostContent'),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    showBadges: figma.boolean('Show Badges'),
+    showFooterActions: figma.boolean('Show FooterActions'),
+    showSecondaryButton: figma.boolean('Show SecondaryButton'),
+  },
+  example: (props) => (
+    <FeedCard
+      type={props.type}
+      authorName={props.authorName}
+      postTitle={props.postTitle}
+      subtitle={props.subtitle}
+      postContent={props.postContent}
+      showHeader={props.showHeader}
+      showLeading={props.showLeading}
+      showMedia={props.showMedia}
+      showPostContent={props.showPostContent}
+      showSubtitle={props.showSubtitle}
+      showBadges={props.showBadges}
+      showFooterActions={props.showFooterActions}
+      showSecondaryButton={props.showSecondaryButton}
+    />
+  ),
+});

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} />
+  ),
 });