@campxdev/react-native-blueprint 0.1.14 → 0.1.16

package/src/components/DataDisplay/Banner/Banner.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Plus } from 'lucide-react-native';
+import { Text } from '../../Input/Text/Text';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+cssInterop(LinearGradient, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface BannerProps {
+  title?: string;
+  subtitle?: string;
+  showBadge?: boolean;
+  badgeText?: string;
+  showActionItems?: boolean;
+  actionItems?: string[];
+  showTrailing?: boolean;
+  onTrailingPress?: () => void;
+  testID?: string;
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+function Banner({
+  title = 'Banner Title',
+  subtitle = 'Subtitle of the banner goes here',
+  showBadge = true,
+  badgeText = 'Badge',
+  showActionItems = true,
+  actionItems = ['Action Item', 'Action Item', 'Action Item'],
+  showTrailing = true,
+  onTrailingPress,
+  testID,
+}: BannerProps) {
+  return (
+    <LinearGradient
+      testID={testID}
+      colors={['#573dab', '#573dab33']}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      className="w-full max-w-[400px] flex-row items-center justify-between gap-4 rounded-lg p-4"
+    >
+      {/* Main Content */}
+      <View className="flex-1 flex-col gap-5">
+        {/* Header with Title and Badge */}
+        <View className="flex-col gap-1">
+          <View className="flex-row items-center gap-2">
+            <Text className="font-semibold text-base text-white">{title}</Text>
+            {showBadge && (
+              <Badge variant="default" size="sm">
+                <Text>{badgeText}</Text>
+              </Badge>
+            )}
+          </View>
+          <Text className="font-medium text-xs text-white opacity-70">
+            {subtitle}
+          </Text>
+        </View>
+
+        {/* Action Items */}
+        {showActionItems && actionItems && actionItems.length > 0 && (
+          <View className="flex-row items-center gap-3">
+            {actionItems.map((item, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && (
+                  <View className="h-1 w-1 rounded-full bg-white" />
+                )}
+                <Text className="font-medium text-xs text-white">{item}</Text>
+              </React.Fragment>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {/* Trailing Icon */}
+      {showTrailing && (
+        <Pressable
+          onPress={onTrailingPress}
+          hitSlop={12}
+          className="flex-row items-center justify-center"
+        >
+          <Icon as={Plus} size={16} color="white" />
+        </Pressable>
+      )}
+    </LinearGradient>
+  );
+}
+
+export { Banner };
+export default Banner;

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   View as RNView,
   Text as RNTextBase,

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

@@ -1,4 +1,5 @@
 /// <reference types="nativewind/types" />
+// @ts-nocheck
 import * as React from 'react';
 import {
   View,

package/src/components/DataDisplay/ChipsRow/ChipsRow.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/DataDisplay/DataListItem/DataListItem.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   Image,

package/src/components/DataDisplay/Datalist/Datalist.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';

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

@@ -0,0 +1,12 @@
+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';
+
+figma.connect(Greeting, FIGMA_URL, {
+  props: {
+    showNextUp: figma.boolean('Show NextUp'),
+  },
+  example: (props) => <Greeting showNextUp={props.showNextUp} />,
+});

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

@@ -0,0 +1,154 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+  Pressable as RNPressable,
+  StyleSheet,
+  View as RNView,
+} from 'react-native';
+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';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+/**
+ * Props for the Greeting component
+ */
+export interface GreetingProps {
+  /** User's name to display in greeting */
+  userName?: string;
+  /** Greeting message (e.g., "Good Morning") */
+  greetingText?: string;
+  /** Subtitle/secondary text below greeting */
+  subtitle?: string;
+  /** Whether to show the schedule/calendar button */
+  showScheduleButton?: boolean;
+  /** Callback when schedule button is pressed */
+  onSchedulePress?: () => void;
+  /** Whether to show the "Next up" section */
+  showNextUp?: boolean;
+  /** Next class/course name */
+  nextUpTitle?: string;
+  /** Time for next class */
+  nextUpTime?: string;
+  /** Additional CSS classes for styling */
+  className?: string;
+  /** Test identifier */
+  testID?: string;
+}
+
+/**
+ * Greeting - A personalized greeting card with schedule information
+ *
+ * Displays a personalized greeting with user name, class information, and upcoming
+ * class details. Features a prominent purple schedule button with calendar icon,
+ * "Next up" section with course name and time, and flexible visibility controls.
+ *
+ * Design from Figma: node-id=448-8146
+ * - Header: "Hey {name}, {greeting}" + Subtitle
+ * - Schedule Button: Purple (#573dab) with calendar icon and shadow
+ * - Next Up: Course name + divider dot + time
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Greeting
+ *   userName="Marshall"
+ *   greetingText="Good Morning"
+ *   subtitle="You have 3 Classes today"
+ *   nextUpTitle="Digital Logic Design"
+ *   nextUpTime="10:00 AM"
+ *   showNextUp={true}
+ *   onSchedulePress={() => navigate('Schedule')}
+ * />
+ * ```
+ */
+export function Greeting({
+  userName = 'Marshall',
+  greetingText = 'Good Morning',
+  subtitle = 'You have 3 Classes today',
+  showScheduleButton = true,
+  onSchedulePress,
+  showNextUp = true,
+  nextUpTitle = 'Digital Logic Design',
+  nextUpTime = '10:00 AM',
+  className,
+  testID,
+}: GreetingProps) {
+  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',
+        className
+      )}
+    >
+      {/* Header Section: Greeting + Schedule Button */}
+      <View className="w-full flex-row items-center justify-between">
+        {/* Header Content: Title and Subtitle */}
+        <View className="flex-1 flex-col gap-1">
+          <Text className="font-semibold text-base text-text-primary">
+            {`Hey ${userName}, ${greetingText}`}
+          </Text>
+          <Text className="font-medium text-xs text-text-secondary">
+            {subtitle}
+          </Text>
+        </View>
+
+        {/* Schedule Button with Calendar Icon */}
+        {showScheduleButton && (
+          <Pressable
+            onPress={onSchedulePress}
+            hitSlop={12}
+            className="ml-3 flex-row items-center justify-center rounded-lg bg-highlight-purple p-3"
+            style={styles.scheduleButton}
+          >
+            <Icon as={Calendar} size={16} color="white" />
+          </Pressable>
+        )}
+      </View>
+
+      {/* Next Up Section */}
+      {showNextUp && (
+        <View className="w-full flex-col gap-1">
+          <Text className="font-medium text-xs text-text-secondary">
+            Next up
+          </Text>
+          {/* Next Up Items: Course Name + Divider + Time */}
+          <View className="w-full flex-row items-center gap-3">
+            <Text className="font-semibold text-base text-text-primary">
+              {nextUpTitle}
+            </Text>
+            {/* Divider Dot */}
+            <View className="h-1.5 w-1.5 rounded-full bg-text-secondary" />
+            <Text className="font-semibold text-base text-text-primary">
+              {nextUpTime}
+            </Text>
+          </View>
+        </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/DataDisplay/MonthCalendar/MonthCalendar.figma.tsx

@@ -1,15 +1,11 @@
-import { figma } from '@figma/code-connect';
+import figma from '@figma/code-connect';
 import { MonthCalendar } from './MonthCalendar';
 
-figma.connect(
-  MonthCalendar,
-  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306:9028',
-  {
-    props: {
-      month: figma.string('Month'),
-    },
-    example: (props) => <MonthCalendar {...props} />,
-  }
-);
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306:9028';
+
+figma.connect(MonthCalendar, FIGMA_URL, {
+  example: () => <MonthCalendar month="February 2024" />,
+});
 
 export default MonthCalendar;

package/src/components/DataDisplay/Separator/Separator.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/DataDisplay/Skeleton/Skeleton.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 import * as React from 'react';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';

package/src/components/DataDisplay/Tooltip/Tooltip.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { Platform } from 'react-native';
 

package/src/components/Feedback/InfoBar/InfoBar.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { InfoBar } from './InfoBar';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=375-5879';
+
+figma.connect(InfoBar, FIGMA_URL, {
+  props: {
+    title: figma.string('Title'),
+    description: figma.string('Description'),
+    showCloseIcon: figma.boolean('Show closeIcon'),
+    showAlertContent: figma.boolean('Show alertContent'),
+    showIconContainer: figma.boolean('Show iconContainer'),
+    showInfoBarDescription: figma.boolean('Show InfoBarDescription'),
+  },
+  example: (props) => (
+    <InfoBar
+      title={props.title}
+      description={props.description}
+      showCloseIcon={props.showCloseIcon}
+      showAlertContent={props.showAlertContent}
+      showIconContainer={props.showIconContainer}
+      showInfoBarDescription={props.showInfoBarDescription}
+      alertContent={[
+        { text: 'Point 1 of Content' },
+        { text: 'Point 2 of the Content' },
+        { text: 'Point 3 of the Content' },
+      ]}
+    />
+  ),
+});

package/src/components/Feedback/InfoBar/InfoBar.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { X } from 'lucide-react-native';
+import { Text } from '../../Input/Text/Text';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface InfoBarProps {
+  title?: string;
+  description?: string;
+  showCloseIcon?: boolean;
+  showAlertContent?: boolean;
+  showIconContainer?: boolean;
+  showInfoBarDescription?: boolean;
+  alertContent?: Array<{ text: string }>;
+  onClose?: () => void;
+  icon?: React.ComponentType<{ size: number; color: string }>;
+  testID?: string;
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+function InfoBar({
+  title = 'This is the Info Bar title',
+  description = 'Infobar description goes here. It can be one or two lines.',
+  showCloseIcon = true,
+  showAlertContent = true,
+  showIconContainer = true,
+  showInfoBarDescription = true,
+  alertContent = [
+    { text: 'Point 1 of Content' },
+    { text: 'Point 2 of the Content' },
+    { text: 'Point 3 of the Content' },
+  ],
+  onClose,
+  icon: IconComponent,
+  testID,
+}: InfoBarProps) {
+  return (
+    <View className="w-full flex-col items-start gap-3 justify-center">
+      <View
+        testID={testID}
+        className="bg-[#573dab33] flex-col items-start gap-3 p-5 rounded-[var(--radius-lg)]"
+      >
+        <View className="w-full flex-col items-start gap-2 justify-center">
+          {/* Icon Container & Close Button */}
+          {showIconContainer && (
+            <View className="w-full flex-row items-start justify-between">
+              <View className="flex-1 flex-row items-center">
+                {IconComponent && (
+                  <Icon as={IconComponent} size={16} color="#573dab" />
+                )}
+              </View>
+
+              {showCloseIcon && (
+                <Pressable
+                  onPress={onClose}
+                  hitSlop={12}
+                  style={{
+                    width: 16,
+                    height: 16,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Icon as={X} size={16} color="#573dab" />
+                </Pressable>
+              )}
+            </View>
+          )}
+
+          {/* Content: Title & Description */}
+          <View className="w-full flex-col items-start gap-2">
+            <View className="w-full flex-col items-start gap-1">
+              <Text className="font-semibold text-base text-[var(--colors-text-primary)]">
+                {title}
+              </Text>
+
+              {showInfoBarDescription && (
+                <Text className="font-medium text-xs opacity-70 text-[var(--colors-text-primary)]">
+                  {description}
+                </Text>
+              )}
+            </View>
+          </View>
+
+          {/* Alert Content - Bullet Points */}
+          {showAlertContent && alertContent && alertContent.length > 0 && (
+            <View className="w-full flex-col items-start gap-2">
+              {alertContent.map((item, index) => (
+                <View
+                  key={index}
+                  className="w-full flex-row items-center gap-1"
+                >
+                  <View className="w-1 h-1 rounded-full bg-[var(--colors-text-primary)]" />
+                  <Text className="font-normal text-xs text-[var(--colors-text-primary)]">
+                    {item.text}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export { InfoBar };
+export default InfoBar;

package/src/components/Feedback/ProgressCircular/Progress-circular.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/Feedback/ProgressLinear/Progress-linear.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';