@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,278 @@
+/// <reference types="nativewind/types" />
+import * as React from 'react';
+import {
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Circle } from 'lucide-react-native';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect) — lowercase
+ * --------------------------------------------------- */
+
+export const ChipVariants = {
+  state: ['default', 'selected', 'disabled'] as const,
+  variant: [
+    'default',
+    'outline',
+    'brand',
+    'success',
+    'warning',
+    'destructive',
+  ] as const,
+} as const;
+
+type ChipState = (typeof ChipVariants.state)[number];
+type ChipVariant = (typeof ChipVariants.variant)[number];
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'flex flex-row items-center justify-center gap-1 rounded-full px-4 py-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-surface-subtle',
+        outline: 'bg-transparent border border-border-default',
+        brand: 'bg-brand-primary',
+        success: 'bg-highlight-success-green-muted',
+        warning: 'bg-highlight-warning-orange-muted',
+        destructive: 'bg-highlight-alert-red-muted',
+      },
+      state: {
+        default: '',
+        selected: '',
+        disabled: '',
+      },
+    },
+    compoundVariants: [
+      // Selected borders
+      {
+        variant: 'default',
+        state: 'selected',
+        className: 'border border-brand-primary bg-surface-subtle',
+      },
+      {
+        variant: 'outline',
+        state: 'selected',
+        className: 'border border-brand-primary bg-transparent',
+      },
+      {
+        variant: 'brand',
+        state: 'selected',
+        className: 'border border-border-default bg-brand-primary',
+      },
+      {
+        variant: 'success',
+        state: 'selected',
+        className:
+          'border border-highlight-success-green bg-highlight-success-green-muted',
+      },
+      {
+        variant: 'warning',
+        state: 'selected',
+        className:
+          'border border-highlight-warning-orange bg-highlight-warning-orange-muted',
+      },
+      {
+        variant: 'destructive',
+        state: 'selected',
+        className:
+          'border border-highlight-alert-red bg-highlight-alert-red-muted',
+      },
+
+      // Disabled opacity
+      { state: 'disabled', variant: 'default', className: 'opacity-50' },
+      { state: 'disabled', variant: 'outline', className: 'opacity-50' },
+      { state: 'disabled', variant: 'brand', className: 'opacity-50' },
+      { state: 'disabled', variant: 'success', className: 'opacity-50' },
+      { state: 'disabled', variant: 'warning', className: 'opacity-50' },
+      { state: 'disabled', variant: 'destructive', className: 'opacity-50' },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      state: 'default',
+    },
+  }
+);
+
+const textVariants = cva('text-sm font-medium', {
+  variants: {
+    variant: {
+      default: 'text-text-secondary',
+      outline: 'text-text-secondary',
+      brand: 'text-text-inverse',
+      success: 'text-highlight-success-green',
+      warning: 'text-highlight-warning-orange',
+      destructive: 'text-highlight-alert-red',
+    },
+    state: {
+      default: '',
+      selected: '',
+      disabled: '',
+    },
+  },
+  compoundVariants: [
+    { variant: 'default', state: 'selected', className: 'text-brand-primary' },
+    { variant: 'outline', state: 'selected', className: 'text-brand-primary' },
+
+    // Disabled opacity handled on root; keep text consistent
+    {
+      variant: 'brand',
+      state: 'disabled',
+      className: 'text-text-inverse',
+    },
+  ],
+  defaultVariants: {
+    variant: 'default',
+    state: 'default',
+  },
+});
+
+const iconVariants = cva('w-3 h-3', {
+  variants: {
+    state: {
+      default: '',
+      selected: '',
+      disabled: 'opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type ChipProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'variant' | 'state'
+> & {
+  variant?:
+    | ChipVariant
+    | 'Default'
+    | 'Outline'
+    | 'Brand'
+    | 'Success'
+    | 'Warning'
+    | 'Destructive';
+  state?: ChipState | 'Default' | 'Selected' | 'Disabled';
+
+  showLeftIcon?: boolean;
+  showRightIcon?: boolean;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Chip label */
+  children?: React.ReactNode;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeVariant(v: any): ChipVariant {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'outline' ||
+    s === 'brand' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  ) {
+    return s;
+  }
+  return 'default';
+}
+
+function normalizeState(v: any): ChipState {
+  const s = String(v ?? 'default').toLowerCase();
+  if (s === 'default' || s === 'selected' || s === 'disabled') return s;
+  return 'default';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Chip(props: ChipProps) {
+  const {
+    variant,
+    state,
+    showLeftIcon,
+    showRightIcon,
+    style,
+    testID,
+    children,
+  } = props;
+
+  const v = normalizeVariant(variant);
+  const st = normalizeState(state);
+
+  return (
+    <View
+      testID={testID ?? 'chip'}
+      className={cn(rootVariants({ variant: v, state: st }))}
+      style={style}
+    >
+      {showLeftIcon ? (
+        <Circle
+          testID="chip-left-icon"
+          size={14}
+          className={cn(
+            'text-text-primary',
+            v !== 'outline' && v !== 'default' && 'text-text-inverse'
+          )}
+        />
+      ) : null}
+
+      <RNText
+        testID="chip-label"
+        className={cn(textVariants({ variant: v, state: st }))}
+      >
+        {children ?? 'Chip'}
+      </RNText>
+
+      {showRightIcon ? (
+        <View
+          testID="chip-right-icon"
+          className={cn(iconVariants({ state: st }))}
+        >
+          <Circle
+            size={14}
+            className={cn(
+              'text-text-primary',
+              v !== 'outline' && v !== 'default' && 'text-text-inverse'
+            )}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+Chip.displayName = 'Chip';
+
+export { rootVariants, textVariants };

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

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { ChipsRow } from './ChipsRow';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=239-1027';
+
+/**
+ * ChipsRow - Horizontal scrollable row of chips
+ *
+ * Use cases:
+ * - Filter selections
+ * - Category navigation
+ * - Tag display
+ *
+ * Features:
+ * - Horizontal scroll with hidden indicators
+ * - Each chip inherits all Chip component properties
+ * - Configurable gap and padding
+ */
+figma.connect(ChipsRow, FIGMA_URL, {
+  props: {
+    chips: figma.children('Chip*'),
+  },
+  example: () => (
+    <ChipsRow
+      chips={[
+        { id: '1', label: 'Chip Title 1', state: 'selected' },
+        { id: '2', label: 'Chip Title 2' },
+        { id: '3', label: 'Chip Title 3' },
+        { id: '4', label: 'Chip Title 4' },
+      ]}
+    />
+  ),
+});

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

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+import { Chip, type ChipProps } from '../Chips/Chips';
+
+// NativeWind interop
+cssInterop(ScrollView, { className: 'style' });
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface ChipItem extends Omit<ChipProps, 'testID'> {
+  /** Unique identifier for the chip */
+  id: string;
+  /** Label text for the chip */
+  label: string;
+}
+
+export interface ChipsRowProps {
+  /** Array of chip items to render */
+  chips: ChipItem[];
+
+  /** Gap between chips (default: 8) */
+  gap?: number;
+
+  /** Content padding (default: 16) */
+  contentPadding?: number;
+
+  /** Whether to show scroll indicators (default: false) */
+  showsScrollIndicator?: boolean;
+
+  /** Callback when a chip is pressed */
+  onChipPress?: (chip: ChipItem, index: number) => void;
+
+  /** Used to override the container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to override the content container style */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests */
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function ChipsRow({
+  chips,
+  gap = 8,
+  contentPadding = 16,
+  showsScrollIndicator = false,
+  onChipPress: _onChipPress,
+  style,
+  contentContainerStyle,
+  testID,
+}: ChipsRowProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'chips-row'}
+      horizontal
+      showsHorizontalScrollIndicator={showsScrollIndicator}
+      style={style}
+      contentContainerStyle={[
+        {
+          paddingHorizontal: contentPadding,
+          gap: gap,
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+        contentContainerStyle,
+      ]}
+    >
+      {chips.map((chip, _index) => {
+        const { id, label, ...chipProps } = chip;
+        return (
+          <Chip key={id} testID={`chip-${id}`} {...chipProps}>
+            {label}
+          </Chip>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+ChipsRow.displayName = 'ChipsRow';

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

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { DataCard } from './DataCard';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+const DATA_CARD_FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=310-6597';
+
+figma.connect(DataCard, DATA_CARD_FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: () => <DataCard title="Data Card Title" value="Value" />,
+});
+
+export default function DataCardFigma() {
+  return (
+    <View className="bg-background p-6 gap-4 flex-col">
+      <DataCard title="Metric Title" value="42" />
+      <DataCard title="Count" value="128" />
+      <DataCard title="Status" value="Active" />
+    </View>
+  );
+}

package/src/components/DataDisplay/DataCard/DataCard.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import {
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+const View_ = View as React.ComponentType<
+  React.ComponentProps<typeof View> & { className?: string }
+>;
+const Text = RNText as React.ComponentType<
+  React.ComponentProps<typeof RNText> & { className?: string }
+>;
+
+/**
+ * DataCard Component
+ *
+ * A simple, compact card component for displaying a title and value.
+ * Perfect for showing key metrics, statistics, or small data pieces
+ * in a clean, organized layout.
+ *
+ * @example
+ * ```tsx
+ * <DataCard />
+ * ```
+ */
+
+export interface DataCardProps {
+  title?: string;
+  value?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const DataCard = ({
+  title = 'Data Card Title',
+  value = 'Value',
+  style,
+  testID,
+}: DataCardProps) => {
+  return (
+    <View_
+      testID={testID ?? 'data-card'}
+      style={style}
+      className="flex-col items-start gap-2 rounded-lg bg-surface-default p-4 w-45"
+    >
+      {/* Title */}
+      <Text className="text-xs font-medium text-text-secondary w-full">
+        {title}
+      </Text>
+
+      {/* Value */}
+      <Text className="text-xl font-semibold text-foreground w-full">
+        {value}
+      </Text>
+    </View_>
+  );
+};
+
+DataCard.displayName = 'DataCard';
+
+export default DataCard;

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

@@ -0,0 +1,60 @@
+import { figma } from '@figma/code-connect';
+import { DataListItem } from './DataListItem';
+import type { DataListItemProps } from './DataListItem';
+
+export type { DataListItemProps };
+
+// TODO: Update with the correct Figma node ID
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=182-301';
+
+/**
+ * DataListItem
+ *
+ * Purpose:
+ * - Display list items with leading/trailing slots
+ * - Supports comfortable and compact densities
+ * - Multiple states: default, pressed, selected, disabled
+ *
+ * Figma rules:
+ * - Density and state control the layout and background
+ * - Leading slot: avatar, icon, checkbox, or image
+ * - Trailing slot: chevron or switch
+ */
+figma.connect(DataListItem, FIGMA_URL, {
+  props: {
+    density: figma.enum('density', {
+      comfortable: 'comfortable',
+      compact: 'compact',
+    }),
+    state: figma.enum('state', {
+      default: 'default',
+      pressed: 'pressed',
+      selected: 'selected',
+      disabled: 'disabled',
+    }),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    showMeta: figma.boolean('Show Meta'),
+    showLeading: figma.boolean('Show Leading'),
+    showTrailing: figma.boolean('Show Trailing'),
+    showDivider: figma.boolean('Show divider'),
+  },
+
+  example: (props) => (
+    <DataListItem
+      title="Data List Row Title"
+      subtitle="Data List Row Subtitle"
+      meta="Meta Content"
+      density={props.density}
+      state={props.state}
+      showSubtitle={props.showSubtitle}
+      showMeta={props.showMeta}
+      showLeading={props.showLeading}
+      showTrailing={props.showTrailing}
+      showDivider={props.showDivider}
+      leadingImage={{ uri: 'https://example.com/avatar.png' }}
+      leadingIcon={/* <UserIcon /> */ undefined}
+      onPress={() => {}}
+    />
+  ),
+});