@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import * as React from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
+import { Text } from '../../Input/Text/Text';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=93-139';
+
+figma.connect(Tooltip, FIGMA_URL, {
+  props: {
+    placement: figma.enum('placement', {
+      bottom: 'bottom',
+      top: 'top',
+      left: 'left',
+      right: 'right',
+    }),
+  },
+
+  example: ({ placement }) => (
+    <Tooltip>
+      <TooltipTrigger>
+        <Text>Hover me</Text>
+      </TooltipTrigger>
+
+      <TooltipContent placement={placement}>
+        <Text>Tooltip content</Text>
+      </TooltipContent>
+    </Tooltip>
+  ),
+});

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+import { cva } from 'class-variance-authority';
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import { FadeOut, FadeInDown, FadeInUp } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+import { NativeOnlyAnimatedView } from '../../ui/Native-Only-Animated-View';
+import { TextClassContext } from '../../Input/Text/Text';
+import { cn } from '../../../lib/utils';
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+type TooltipContentProps = Omit<
+  TooltipPrimitive.ContentProps,
+  'className' | 'side'
+> & {
+  placement?: TooltipPlacement;
+  portalHost?: string;
+};
+
+const tooltipContentStyles = cva(
+  'z-50 w-fit rounded-md border border-border bg-popover px-3 py-2 shadow-md'
+);
+
+const tooltipTextStyles = 'text-xs text-foreground';
+
+function getEnteringAnimation(placement: TooltipPlacement) {
+  switch (placement) {
+    case 'top':
+      return FadeInDown.withInitialValues({
+        transform: [{ translateY: 4 }],
+      }).duration(150);
+
+    case 'bottom':
+      return FadeInUp.withInitialValues({
+        transform: [{ translateY: -4 }],
+      }).duration(150);
+
+    case 'left':
+      return FadeInUp.withInitialValues({
+        transform: [{ translateX: 6 }],
+      }).duration(150);
+
+    case 'right':
+    default:
+      return FadeInUp.withInitialValues({
+        transform: [{ translateX: -6 }],
+      }).duration(150);
+  }
+}
+
+function TooltipContent({
+  sideOffset = 4,
+  placement = 'top',
+  portalHost,
+  ...props
+}: TooltipContentProps & React.RefAttributes<TooltipPrimitive.ContentRef>) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <TooltipPrimitive.Overlay className="absolute inset-0">
+          <NativeOnlyAnimatedView
+            entering={getEnteringAnimation(placement)}
+            exiting={FadeOut.duration(100)}
+          >
+            <TextClassContext.Provider value={tooltipTextStyles}>
+              <TooltipPrimitive.Content
+                side={placement}
+                sideOffset={sideOffset}
+                className={cn(
+                  tooltipContentStyles(),
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 text-balance',
+                      placement === 'bottom' && 'slide-in-from-top-2',
+                      placement === 'left' && 'slide-in-from-right-2',
+                      placement === 'right' && 'slide-in-from-left-2',
+                      placement === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                  })
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </TooltipPrimitive.Overlay>
+      </FullWindowOverlay>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent };

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

@@ -0,0 +1,40 @@
+import figma from '@figma/code-connect';
+import { Alert } from './Alert';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=52-106';
+
+figma.connect(Alert, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      info: 'info',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+    style: figma.enum('style', {
+      subtle: 'subtle',
+      solid: 'solid',
+      outline: 'outline',
+    }),
+    showAlertDescription: figma.boolean('Show alertDescription'),
+    showAlertContent: figma.boolean('Show alertContent'),
+    showCloseIcon: figma.boolean('Show closeIcon'),
+  },
+  example: (props) => (
+    <Alert
+      variant={props.variant}
+      alertStyle={props.style}
+      description={
+        props.showAlertDescription
+          ? 'This is an example alert description to show how the component looks.'
+          : undefined
+      }
+      bulletPoints={
+        props.showAlertContent ? ['First item', 'Second item'] : undefined
+      }
+      showCloseIcon={props.showCloseIcon}
+    />
+  ),
+});

package/src/components/Feedback/Alert/Alert.tsx

@@ -0,0 +1,378 @@
+import React from 'react';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../../lib/utils';
+import {
+  X,
+  AlertCircle,
+  CheckCircle,
+  AlertTriangle,
+  Info,
+  Bell,
+} 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 }
+>;
+
+// ============================================================================
+// VARIANT DEFINITIONS USING CVA (lowercase + Code Connect friendly)
+// ============================================================================
+
+const alertContainerVariants = cva(
+  'p-5 flex-col items-start gap-3 rounded-2xl',
+  {
+    variants: {
+      alertStyle: {
+        subtle: '',
+        solid: '',
+        outline: 'bg-transparent border border-border',
+      },
+      variant: {
+        default: '',
+        info: '',
+        success: '',
+        warning: '',
+        destructive: '',
+      },
+    },
+    compoundVariants: [
+      // Subtle backgrounds
+      { alertStyle: 'subtle', variant: 'default', className: 'bg-muted' },
+      { alertStyle: 'subtle', variant: 'info', className: 'bg-info-muted' },
+      {
+        alertStyle: 'subtle',
+        variant: 'success',
+        className: 'bg-success-muted',
+      },
+      {
+        alertStyle: 'subtle',
+        variant: 'warning',
+        className: 'bg-warning-muted',
+      },
+      {
+        alertStyle: 'subtle',
+        variant: 'destructive',
+        className: 'bg-destructive-muted',
+      },
+
+      // Solid backgrounds
+      { alertStyle: 'solid', variant: 'default', className: 'bg-primary' },
+      { alertStyle: 'solid', variant: 'info', className: 'bg-info' },
+      { alertStyle: 'solid', variant: 'success', className: 'bg-success' },
+      { alertStyle: 'solid', variant: 'warning', className: 'bg-warning' },
+      {
+        alertStyle: 'solid',
+        variant: 'destructive',
+        className: 'bg-destructive',
+      },
+    ],
+    defaultVariants: {
+      alertStyle: 'subtle',
+      variant: 'default',
+    },
+  }
+);
+
+const alertTitleVariants = cva('text-base font-semibold', {
+  variants: {
+    alertStyle: {
+      subtle: '',
+      solid: 'text-primary-foreground',
+      outline: '',
+    },
+    variant: {
+      default: '',
+      info: '',
+      success: '',
+      warning: '',
+      destructive: '',
+    },
+  },
+  compoundVariants: [
+    // Subtle & Outline title colors
+    { alertStyle: 'subtle', variant: 'default', className: 'text-foreground' },
+    { alertStyle: 'subtle', variant: 'info', className: 'text-info' },
+    { alertStyle: 'subtle', variant: 'success', className: 'text-success' },
+    { alertStyle: 'subtle', variant: 'warning', className: 'text-warning' },
+    {
+      alertStyle: 'subtle',
+      variant: 'destructive',
+      className: 'text-destructive',
+    },
+
+    { alertStyle: 'outline', variant: 'default', className: 'text-foreground' },
+    { alertStyle: 'outline', variant: 'info', className: 'text-info' },
+    { alertStyle: 'outline', variant: 'success', className: 'text-success' },
+    { alertStyle: 'outline', variant: 'warning', className: 'text-warning' },
+    {
+      alertStyle: 'outline',
+      variant: 'destructive',
+      className: 'text-destructive',
+    },
+  ],
+  defaultVariants: {
+    alertStyle: 'subtle',
+    variant: 'default',
+  },
+});
+
+const alertDescriptionVariants = cva('text-xs font-medium opacity-70', {
+  variants: {
+    alertStyle: {
+      subtle: 'text-foreground',
+      solid: 'text-primary-foreground',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    alertStyle: 'subtle',
+  },
+});
+
+// ============================================================================
+// ICON MAPPING (lowercase variant keys)
+// ============================================================================
+
+const VARIANT_ICONS = {
+  default: Bell,
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  destructive: AlertCircle,
+} as const;
+
+// ============================================================================
+// COLOR MAPPING FOR ICONS (lowercase keys)
+// ============================================================================
+
+const ICON_COLORS = {
+  solid: {
+    default: '#FFFFFF',
+    info: '#FFFFFF',
+    success: '#FFFFFF',
+    warning: '#FFFFFF',
+    destructive: '#FFFFFF',
+  },
+  subtle: {
+    default: '#111827',
+    info: '#3B82F6',
+    success: '#22C55E',
+    warning: '#F97316',
+    destructive: '#EF4444',
+  },
+  outline: {
+    default: '#111827',
+    info: '#3B82F6',
+    success: '#22C55E',
+    warning: '#F97316',
+    destructive: '#EF4444',
+  },
+} as const;
+
+// ============================================================================
+// TYPES (lowercase + backward compatible input normalization)
+// ============================================================================
+
+export type AlertStyleType = 'subtle' | 'solid' | 'outline';
+export type AlertVariantType =
+  | 'default'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'destructive';
+
+type LegacyAlertStyleType = 'Subtle' | 'Solid' | 'Outline';
+type LegacyAlertVariantType =
+  | 'Default'
+  | 'Info'
+  | 'Success'
+  | 'Warning'
+  | 'Destructive';
+
+export interface AlertProps {
+  alertStyle?: AlertStyleType | LegacyAlertStyleType;
+  variant?: AlertVariantType | LegacyAlertVariantType;
+  title?: string;
+  description?: string;
+  bulletPoints?: string[];
+  showCloseIcon?: boolean;
+  onClose?: () => void;
+  testID?: string;
+}
+
+// ============================================================================
+// NORMALIZERS (so old callers still work)
+// ============================================================================
+
+function normalizeAlertStyle(v: any): AlertStyleType {
+  const s = String(v ?? 'subtle').toLowerCase();
+  if (s === 'subtle' || s === 'solid' || s === 'outline') return s;
+  return 'subtle';
+}
+
+function normalizeVariant(v: any): AlertVariantType {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'info' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  )
+    return s;
+  return 'default';
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+function Alert({
+  alertStyle = 'subtle',
+  variant = 'default',
+  title = 'This is the Alert title',
+  description,
+  bulletPoints,
+  showCloseIcon = false,
+  onClose,
+  testID,
+}: AlertProps) {
+  const s = normalizeAlertStyle(alertStyle);
+  const v = normalizeVariant(variant);
+
+  const IconComponent = VARIANT_ICONS[v];
+  const iconColor = ICON_COLORS[s][v];
+
+  return (
+    <View className="w-[400px] flex-col justify-center items-start gap-3">
+      <View
+        testID={testID}
+        className={cn(alertContainerVariants({ alertStyle: s, variant: v }))}
+      >
+        {/* Header: Icon + Close Button */}
+        <View className="flex-row justify-between items-start self-stretch">
+          <View className="flex-row items-center gap-2.5 flex-1">
+            <Icon as={IconComponent} size={24} color={iconColor} />
+          </View>
+
+          {showCloseIcon && (
+            <Pressable
+              onPress={onClose}
+              hitSlop={12}
+              style={{
+                width: 16,
+                height: 16,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Icon as={X} size={16} color={iconColor} />
+            </Pressable>
+          )}
+        </View>
+
+        {/* Content: Title & Description */}
+        <View className="flex-col items-start gap-3">
+          <View className="w-[308px] flex-col items-start gap-1">
+            <Text
+              className={cn(alertTitleVariants({ alertStyle: s, variant: v }))}
+            >
+              {title}
+            </Text>
+
+            {description ? (
+              <Text className={cn(alertDescriptionVariants({ alertStyle: s }))}>
+                {description}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        {/* Bullet Points */}
+        {bulletPoints && bulletPoints.length > 0 ? (
+          <View className="w-[308px] flex-col items-start gap-2">
+            {bulletPoints.map((point, index) => (
+              <Text
+                key={index}
+                className={cn(
+                  'text-xs font-normal self-stretch',
+                  s === 'solid' ? 'text-primary-foreground' : 'text-foreground'
+                )}
+              >
+                {'‐ ' + point}
+              </Text>
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+// ============================================================================
+// SUB-COMPONENTS FOR COMPOSITION PATTERN (lowercase + backward compatible)
+// ============================================================================
+
+export function AlertIcon({
+  alertStyle,
+  variant,
+}: {
+  alertStyle: AlertStyleType | LegacyAlertStyleType;
+  variant: AlertVariantType | LegacyAlertVariantType;
+}) {
+  const s = normalizeAlertStyle(alertStyle);
+  const v = normalizeVariant(variant);
+
+  const IconComponent = VARIANT_ICONS[v];
+  const iconColor = ICON_COLORS[s][v];
+
+  return <Icon as={IconComponent} size={24} color={iconColor} />;
+}
+
+export function AlertTitle({
+  children,
+  alertStyle,
+  variant,
+}: {
+  children: React.ReactNode;
+  alertStyle: AlertStyleType | LegacyAlertStyleType;
+  variant: AlertVariantType | LegacyAlertVariantType;
+}) {
+  const s = normalizeAlertStyle(alertStyle);
+  const v = normalizeVariant(variant);
+
+  return (
+    <Text className={cn(alertTitleVariants({ alertStyle: s, variant: v }))}>
+      {children}
+    </Text>
+  );
+}
+
+export function AlertDescription({
+  children,
+  alertStyle,
+}: {
+  children: React.ReactNode;
+  alertStyle: AlertStyleType | LegacyAlertStyleType;
+}) {
+  const s = normalizeAlertStyle(alertStyle);
+
+  return (
+    <Text className={cn(alertDescriptionVariants({ alertStyle: s }))}>
+      {children}
+    </Text>
+  );
+}
+
+export { Alert };
+export default Alert;

package/src/components/Feedback/AlertDialog/Alert-Dialog.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { AlertDialog } from './Alert-Dialog';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=101-606';
+
+figma.connect(AlertDialog, FIGMA_URL, {
+  props: {
+    intent: figma.enum('intent', {
+      default: 'default',
+      destructive: 'destructive',
+    }),
+    showDescription: figma.boolean('Show description'),
+    showSecondaryAction: figma.boolean('Show secondaryAction'),
+  },
+  example: (props) => (
+    <AlertDialog
+      title="Are you absolutely sure?"
+      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+      intent={props.intent}
+      showDescription={props.showDescription}
+      showSecondaryAction={props.showSecondaryAction}
+    />
+  ),
+});