@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/DataDisplay/MonthCalendar/MonthCalendar.tsx

@@ -0,0 +1,354 @@
+import * as React from 'react';
+import { View, Text as RNText, Dimensions } 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 }
+>;
+
+// Design tokens from Figma
+const COLORS = {
+  textPrimary: '#121212',
+  textSecondary: '#6a7282',
+  textMuted: '#b4b8c1',
+  borderDefault: '#cbd5e1',
+  highlightBlue: '#4baabe',
+  highlightGreen: '#88b053',
+  highlightPurple: '#573dab',
+  highlightOrange: '#ed9035',
+  white: '#ffffff',
+};
+
+interface EventDot {
+  color: string;
+}
+
+interface CalendarDate {
+  date: number;
+  events?: EventDot[];
+  isSelected?: boolean;
+  isEmpty?: boolean;
+  hasNoEvents?: boolean;
+  showEvents?: boolean;
+  badge?: string;
+}
+
+const EventDots: React.FC<{ events?: EventDot[]; badge?: string }> = ({
+  events,
+  badge,
+}) => {
+  if (!events || events.length === 0) return null;
+
+  const displayEvents = events.slice(0, 3);
+
+  return (
+    <View_
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 1,
+        justifyContent: 'center',
+        marginTop: 2,
+      }}
+    >
+      {displayEvents.map((event, idx) => (
+        <View_
+          key={idx}
+          style={{
+            width: 4,
+            height: 4,
+            borderRadius: 2,
+            backgroundColor: event.color,
+          }}
+        />
+      ))}
+      {badge && (
+        <Text_
+          style={{
+            color: COLORS.textSecondary,
+            fontSize: 8,
+            fontWeight: '500',
+            marginLeft: 2,
+          }}
+        >
+          {badge}
+        </Text_>
+      )}
+    </View_>
+  );
+};
+
+const CalendarItem: React.FC<{
+  date: CalendarDate;
+  cellSize: number;
+}> = ({ date, cellSize }) => {
+  const {
+    date: dateNum,
+    events,
+    isSelected,
+    isEmpty,
+    hasNoEvents,
+    showEvents = true,
+    badge,
+  } = date;
+
+  if (isEmpty) {
+    return <View_ style={{ width: cellSize, height: cellSize }} />;
+  }
+
+  return (
+    <View_
+      style={{
+        width: cellSize,
+        height: cellSize,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingTop: 4,
+      }}
+    >
+      {isSelected ? (
+        <View_
+          style={{
+            width: cellSize * 0.5,
+            height: cellSize * 0.5,
+            borderRadius: (cellSize * 0.5) / 2,
+            backgroundColor: COLORS.highlightPurple,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Text_
+            style={{
+              color: COLORS.white,
+              fontSize: 12,
+              fontWeight: '700',
+            }}
+            numberOfLines={1}
+          >
+            {dateNum}
+          </Text_>
+        </View_>
+      ) : (
+        <Text_
+          style={{
+            color: COLORS.textPrimary,
+            fontSize: 12,
+            fontWeight: '700',
+          }}
+          numberOfLines={1}
+        >
+          {dateNum}
+        </Text_>
+      )}
+
+      {hasNoEvents && showEvents ? (
+        <Text_
+          style={{
+            color: COLORS.textSecondary,
+            fontSize: 7,
+            fontWeight: '500',
+            marginTop: 2,
+          }}
+          numberOfLines={1}
+        >
+          No Events
+        </Text_>
+      ) : showEvents ? (
+        <EventDots events={events} badge={badge} />
+      ) : null}
+    </View_>
+  );
+};
+
+const Divider: React.FC = () => (
+  <View_
+    style={{
+      height: 1,
+      backgroundColor: COLORS.borderDefault,
+      marginVertical: 8,
+    }}
+  />
+);
+
+const DateRow: React.FC<{ dates: CalendarDate[]; cellSize: number }> = ({
+  dates,
+  cellSize,
+}) => (
+  <View_
+    style={{
+      flexDirection: 'row',
+    }}
+  >
+    {dates.map((date, idx) => (
+      <CalendarItem key={idx} date={date} cellSize={cellSize} />
+    ))}
+  </View_>
+);
+
+export const MonthCalendar: React.FC<{ month?: string }> = ({
+  month = 'Month',
+}) => {
+  const screenWidth = Dimensions.get('window').width;
+  const padding = 16;
+  const cellSize = (screenWidth - padding * 2) / 7;
+
+  const dateRows: CalendarDate[][] = [
+    [
+      { date: 29, isEmpty: true },
+      { date: 30, isEmpty: true },
+      { date: 31, isEmpty: true },
+      {
+        date: 1,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightOrange },
+        ],
+        badge: '+1',
+      },
+      {
+        date: 2,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+        ],
+        badge: '+1',
+      },
+      {
+        date: 3,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightOrange },
+        ],
+        badge: '+3',
+      },
+      { date: 4, events: [{ color: COLORS.highlightOrange }] },
+    ],
+    [
+      { date: 5, events: [{ color: COLORS.highlightBlue }] },
+      { date: 6, events: [{ color: COLORS.highlightBlue }] },
+      { date: 7 },
+      { date: 8 },
+      {
+        date: 9,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+        ],
+        badge: '+1',
+      },
+      { date: 10, events: [{ color: COLORS.highlightOrange }] },
+      { date: 11, events: [{ color: COLORS.highlightBlue }], badge: '+1' },
+    ],
+    [
+      { date: 12 },
+      { date: 13, events: [{ color: COLORS.highlightOrange }] },
+      { date: 14 },
+      { date: 15, events: [{ color: COLORS.highlightOrange }], badge: '+2' },
+      { date: 16, events: [{ color: COLORS.highlightOrange }] },
+      { date: 17 },
+      { date: 18, events: [{ color: COLORS.highlightBlue }], badge: '+1' },
+    ],
+    [
+      { date: 19 },
+      { date: 20, hasNoEvents: true },
+      { date: 21, hasNoEvents: true },
+      { date: 22, hasNoEvents: true },
+      { date: 23, hasNoEvents: true },
+      { date: 24, events: [{ color: COLORS.highlightBlue }] },
+      { date: 25, events: [{ color: COLORS.highlightBlue }] },
+    ],
+    [
+      {
+        date: 26,
+        isSelected: true,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightPurple },
+        ],
+        badge: '+3',
+      },
+      { date: 27, events: [{ color: COLORS.highlightGreen }] },
+      {
+        date: 28,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+        ],
+        badge: '+3',
+      },
+      {
+        date: 29,
+        events: [
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+          { color: COLORS.highlightBlue },
+        ],
+        badge: '+4',
+      },
+      { date: 30, events: [{ color: COLORS.highlightBlue }] },
+      { date: 31, showEvents: false },
+      { date: 25, isEmpty: true },
+    ],
+  ];
+
+  return (
+    <View_
+      style={{
+        paddingHorizontal: padding,
+        paddingVertical: padding,
+      }}
+    >
+      <Text_
+        style={{
+          color: COLORS.textPrimary,
+          fontSize: 18,
+          fontWeight: '600',
+          marginBottom: 16,
+        }}
+      >
+        {month}
+      </Text_>
+
+      <View_
+        style={{
+          flexDirection: 'row',
+          marginBottom: 16,
+        }}
+      >
+        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
+          <Text_
+            key={day}
+            style={{
+              width: cellSize,
+              textAlign: 'center',
+              color: COLORS.textMuted,
+              fontSize: 10,
+              fontWeight: '500',
+            }}
+            numberOfLines={1}
+          >
+            {day}
+          </Text_>
+        ))}
+      </View_>
+
+      {dateRows.map((row, rowIdx) => (
+        <View_ key={rowIdx}>
+          <Divider />
+          <DateRow dates={row} cellSize={cellSize} />
+        </View_>
+      ))}
+      <Divider />
+    </View_>
+  );
+};
+
+export default MonthCalendar;

package/src/components/DataDisplay/MonthCalendar/index.ts

@@ -0,0 +1 @@
+export { MonthCalendar } from './MonthCalendar';

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

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { Separator } from './Separator';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=74-197';
+
+/**
+ * Separator
+ *
+ * Usage:
+ * - Visual separation between content blocks
+ * - Horizontal or vertical dividers
+ *
+ * Notes:
+ * - orientation + weight are Figma variants
+ * - No state or interaction props
+ */
+figma.connect(Separator, FIGMA_URL, {
+  props: {
+    orientation: figma.enum('orientation', {
+      horizontal: 'horizontal',
+      vertical: 'vertical',
+    }),
+
+    weight: figma.enum('weight', {
+      default: 'default',
+      thick: 'thick',
+    }),
+  },
+
+  example: ({ orientation, weight }) => (
+    <Separator orientation={orientation} weight={weight} />
+  ),
+});

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const SeparatorVariants = {
+  orientation: ['horizontal', 'vertical'] as const,
+  weight: ['default', 'thick'] as const,
+} as const;
+
+type SeparatorOrientation = (typeof SeparatorVariants.orientation)[number];
+type SeparatorWeight = (typeof SeparatorVariants.weight)[number];
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('bg-border', {
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    weight: {
+      default: '',
+      thick: '',
+    },
+  },
+  compoundVariants: [
+    { orientation: 'horizontal', weight: 'default', className: 'h-px' }, // 1
+    { orientation: 'horizontal', weight: 'thick', className: 'h-0.5' }, // 2
+    { orientation: 'vertical', weight: 'default', className: 'w-px' }, // 1
+    { orientation: 'vertical', weight: 'thick', className: 'w-0.5' }, // 2
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    weight: 'default',
+  },
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type SeparatorProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'orientation' | 'weight'
+> & {
+  orientation?: SeparatorOrientation | 'Horizontal' | 'Vertical';
+  weight?: SeparatorWeight | 'Default' | 'Thick';
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeOrientation(v: any): SeparatorOrientation {
+  const s = String(v ?? 'horizontal').toLowerCase();
+  return s === 'vertical' ? 'vertical' : 'horizontal';
+}
+
+function normalizeWeight(v: any): SeparatorWeight {
+  const s = String(v ?? 'default').toLowerCase();
+  return s === 'thick' ? 'thick' : 'default';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Separator(props: SeparatorProps) {
+  const { orientation, weight, style, testID } = props;
+
+  const o = normalizeOrientation(orientation);
+  const w = normalizeWeight(weight);
+
+  return (
+    <View
+      testID={testID ?? 'separator'}
+      className={cn(rootVariants({ orientation: o, weight: w }))}
+      style={style}
+    />
+  );
+}
+
+Separator.displayName = 'Separator';
+
+export { rootVariants };
+export type { SeparatorProps };

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

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import { Skeleton } from './Skeleton';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Components?node-id=59-62';
+
+/**
+ * Skeleton (React Native)
+ *
+ * Placeholder loading indicator used while content is being fetched.
+ * Supports text, circular, and rectangular shapes with multiple sizes.
+ *
+ * Use cases:
+ * - Page and section loading
+ * - Card placeholders
+ * - Avatar and media placeholders
+ * - Text and list loading states
+ */
+figma.connect(Skeleton, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      text: 'text',
+      circle: 'circle',
+      rectangle: 'rectangle',
+    }),
+
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+      xl: 'xl',
+    }),
+  },
+
+  example: (props) => <Skeleton variant={props.variant} size={props.size} />,
+});

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

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+
+/**
+ * ✅ Canonical values (match Figma + Code Connect)
+ * variant: 'text' | 'circle' | 'rectangle'
+ * size: 'sm' | 'md' | 'lg' | 'xl'
+ */
+export const SkeletonVariants = {
+  size: ['sm', 'md', 'lg', 'xl'],
+  variant: ['text', 'circle', 'rectangle'],
+} as const;
+
+const rootVariants = cva('flex flex-col items-start', {
+  variants: {
+    variant: {
+      text: '',
+      circle: '',
+      rectangle: '',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'text',
+    size: 'sm',
+  },
+});
+
+/**
+ * Base skeleton block:
+ * - bg subtle + pulse
+ * - width/height controlled by variants + compound variants
+ */
+const blockVariants = cva('bg-surface-subtle animate-pulse', {
+  variants: {
+    variant: {
+      text: 'w-full',
+      circle: '',
+      rectangle: 'w-full',
+    },
+    size: {
+      // defaults (text)
+      sm: 'h-3 rounded',
+      md: 'h-4 rounded-md',
+      lg: 'h-5 rounded-md',
+      xl: 'h-5 rounded-md',
+    },
+  },
+  compoundVariants: [
+    // TEXT
+    { variant: 'text', size: 'sm', className: 'h-3 w-[200px] rounded-xs' }, // 12px height, 2px radius
+    { variant: 'text', size: 'md', className: 'h-4 w-[200px] rounded-sm' }, // 16px height, 4px radius
+    { variant: 'text', size: 'lg', className: 'h-5 w-[200px] rounded-sm' }, // 20px height, 4px radius
+    // xl text not defined in tokens, keeping lg fallback or removing. User didn't specify xl text.
+    // I'll map xl text to lg for now to avoid breaking if used.
+    { variant: 'text', size: 'xl', className: 'h-5 w-[200px] rounded-sm' },
+
+    // CIRCLE
+    { variant: 'circle', size: 'sm', className: 'size-5 rounded-[48px]' }, // 20px
+    { variant: 'circle', size: 'md', className: 'size-6 rounded-[48px]' }, // 24px
+    { variant: 'circle', size: 'lg', className: 'size-8 rounded-[48px]' }, // 32px
+    { variant: 'circle', size: 'xl', className: 'size-12 rounded-[48px]' }, // 48px
+
+    // RECTANGLE
+    {
+      variant: 'rectangle',
+      size: 'sm',
+      className: 'h-[80px] w-full rounded-md', // 8px radius
+    },
+    {
+      variant: 'rectangle',
+      size: 'md',
+      className: 'h-[120px] w-full rounded-lg', // 12px radius
+    },
+    {
+      variant: 'rectangle',
+      size: 'lg',
+      className: 'h-[200px] w-full rounded-lg', // 12px radius
+    },
+    {
+      variant: 'rectangle',
+      size: 'xl',
+      className: 'h-[200px] w-full rounded-lg', // mapped to lg as xl not specified
+    },
+  ],
+  defaultVariants: {
+    variant: 'text',
+    size: 'sm',
+  },
+});
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ * ✅ Backward compatible: accepts old 'Text'/'Sm' etc and normalizes.
+ */
+export type SkeletonProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'variant' | 'size'
+> & {
+  size?:
+    | (typeof SkeletonVariants.size)[number]
+    | Uppercase<(typeof SkeletonVariants.size)[number]>
+    | Capitalize<(typeof SkeletonVariants.size)[number]>;
+  variant?:
+    | (typeof SkeletonVariants.variant)[number]
+    | Capitalize<(typeof SkeletonVariants.variant)[number]>;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+function normalizeSize(v: any): (typeof SkeletonVariants.size)[number] {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'md' || s === 'lg' || s === 'xl') return s;
+  return 'sm';
+}
+
+function normalizeVariant(v: any): (typeof SkeletonVariants.variant)[number] {
+  const s = String(v ?? 'text').toLowerCase();
+  if (s === 'text' || s === 'circle' || s === 'rectangle') return s;
+  return 'text';
+}
+
+export function Skeleton(props: SkeletonProps) {
+  const { style, testID } = props;
+  const variant = normalizeVariant(props.variant);
+  const size = normalizeSize(props.size);
+
+  return (
+    <View
+      testID={testID ?? 'skeleton'}
+      className={cn(rootVariants({ variant, size }))}
+      style={style}
+    >
+      <View
+        testID="skeleton-block"
+        className={cn(blockVariants({ variant, size }))}
+      />
+    </View>
+  );
+}
+
+Skeleton.displayName = 'Skeleton';
+
+export { rootVariants, blockVariants };
+export type { SkeletonProps };