@campxdev/react-native-blueprint 0.1.12 → 0.1.14

package/src/components/Feedback/Stepper/Stepper.tsx

@@ -0,0 +1,289 @@
+import * as React from 'react';
+import {
+  View as RNView,
+  Text as RNText,
+  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 { Radio } from '../../Input/RadioGroup/Radio-Group';
+
+// Enable className on View and Text
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Text = RNText as React.ComponentType<
+  React.ComponentProps<typeof RNText> & { className?: string }
+>;
+
+export const StepperVariants = {
+  state: ['pending', 'active', 'completed', 'error'] as const,
+};
+
+type StepState = (typeof StepperVariants.state)[number];
+
+const stepItemVariants = cva('flex-row gap-3 items-start w-full', {
+  variants: {
+    state: {
+      pending: '',
+      active: '',
+      completed: '',
+      error: '',
+    },
+  },
+  defaultVariants: {
+    state: 'pending',
+  },
+});
+
+const markerVariants = cva('py-0.5 items-center shrink-0', {
+  variants: {
+    state: {
+      pending: '',
+      active: '',
+      completed: '',
+      error: '',
+    },
+  },
+});
+
+const contentVariants = cva('flex-1 flex-col items-start -mt-0.5', {
+  variants: {
+    state: {
+      pending: 'gap-1',
+      active: 'gap-4',
+      completed: 'gap-1',
+      error: 'gap-4',
+    },
+  },
+});
+
+const titleVariants = cva('font-medium text-base w-full', {
+  variants: {
+    state: {
+      pending: 'text-foreground',
+      active: 'text-foreground',
+      completed: 'text-foreground',
+      error: 'text-highlight-alert-red',
+    },
+  },
+});
+
+const subtitleVariants = cva('text-xs w-full text-text-secondary', {
+  variants: {
+    state: {
+      pending: '',
+      active: '',
+      completed: '',
+      error: '',
+    },
+  },
+});
+
+const headerVariants = cva('flex-col items-start w-full gap-1', {
+  variants: {
+    state: {
+      pending: '',
+      active: '',
+      completed: '',
+      error: '',
+    },
+  },
+});
+
+const actionsVariants = cva('flex-row gap-3 items-start w-full', {
+  variants: {
+    state: {
+      active: '',
+      error: '',
+    },
+  },
+});
+
+export interface StepItemProps {
+  state?: StepState;
+  title?: string;
+  subtitle?: string;
+  showSubtitle?: boolean;
+  showStepperContent?: boolean;
+  showSecondaryButton?: boolean;
+  secondaryButtonLabel?: string;
+  primaryButtonLabel?: string;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children?: React.ReactNode;
+}
+
+export function StepItem({
+  state = 'pending',
+  title = 'Step Item Title',
+  subtitle = 'This is the step item description',
+  showSubtitle = true,
+  showStepperContent = true,
+  showSecondaryButton = false,
+  secondaryButtonLabel = 'Secondary Action',
+  primaryButtonLabel = 'Primary Action',
+  onPrimaryAction,
+  onSecondaryAction,
+  style,
+  testID,
+  children,
+}: StepItemProps) {
+  const isActive = state === 'active';
+  const isError = state === 'error';
+  const isCompleted = state === 'completed';
+
+  return (
+    <View
+      testID={testID}
+      style={style}
+      className={cn(stepItemVariants({ state }))}
+    >
+      {/* Marker with Radio */}
+      <View testID="step-marker" className={cn(markerVariants({ state }))}>
+        <Radio
+          value={title}
+          state={
+            isCompleted
+              ? 'Checked'
+              : isError
+                ? 'Unchecked'
+                : isActive
+                  ? 'Checked'
+                  : 'Unchecked'
+          }
+          disabled="False"
+          size="Md"
+        />
+      </View>
+
+      {/* Content */}
+      <View testID="step-content" className={cn(contentVariants({ state }))}>
+        {/* Header with title and subtitle - for pending, completed, error states */}
+        {(state === 'pending' ||
+          state === 'completed' ||
+          state === 'error') && (
+          <View testID="step-header" className={cn(headerVariants({ state }))}>
+            <Text className={cn(titleVariants({ state }))}>{title}</Text>
+            {showSubtitle && (
+              <Text className={cn(subtitleVariants({ state }))}>
+                {subtitle}
+              </Text>
+            )}
+          </View>
+        )}
+
+        {/* Active State: Header + Content + Actions */}
+        {isActive && (
+          <>
+            <View
+              testID="step-active-header"
+              className={cn(headerVariants({ state }))}
+            >
+              <Text className={cn(titleVariants({ state }))}>{title}</Text>
+              {showSubtitle && (
+                <Text className={cn(subtitleVariants({ state }))}>
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+
+            {showStepperContent && (
+              <Text className="font-medium text-sm text-foreground w-full">
+                {children ||
+                  'Meta Content - Text | Attachment Card | List Item'}
+              </Text>
+            )}
+
+            <View
+              testID="step-actions"
+              className={cn(actionsVariants({ state }))}
+            >
+              {showSecondaryButton && (
+                <Button
+                  variant="secondary"
+                  size="default"
+                  onPress={onSecondaryAction}
+                >
+                  {secondaryButtonLabel}
+                </Button>
+              )}
+              <Button
+                variant="default"
+                size="default"
+                onPress={onPrimaryAction}
+              >
+                {primaryButtonLabel}
+              </Button>
+            </View>
+          </>
+        )}
+
+        {/* Error State: Primary Action Button */}
+        {isError && (
+          <Button variant="default" size="default" onPress={onPrimaryAction}>
+            {primaryButtonLabel}
+          </Button>
+        )}
+      </View>
+    </View>
+  );
+}
+
+StepItem.displayName = 'StepItem';
+
+export interface StepperProps {
+  steps: StepItemProps[];
+  activeIndex?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Stepper({
+  steps,
+  activeIndex = 0,
+  style,
+  testID,
+}: StepperProps) {
+  return (
+    <View
+      testID={testID ?? 'stepper'}
+      style={style}
+      className="flex-col gap-8 items-start w-full"
+    >
+      {/* Vertical Line divider between steps */}
+      {steps.length > 1 && (
+        <View className="absolute left-1.5 top-4 bottom-0 w-0 border-l border-dashed border-border-default" />
+      )}
+
+      {/* Render each step */}
+      {steps.map((step, index) => (
+        <StepItem
+          key={index}
+          {...step}
+          state={
+            index < activeIndex
+              ? 'completed'
+              : index === activeIndex
+                ? 'active'
+                : step.state || 'pending'
+          }
+          testID={`step-${index}`}
+        />
+      ))}
+    </View>
+  );
+}
+
+Stepper.displayName = 'Stepper';
+
+export default Stepper;

package/src/components/Input/Button/Button.figma.tsx

@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect';
+import { Button } from './Button';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=14-300';
+
+figma.connect(Button, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      secondary: 'secondary',
+      outline: 'outline',
+      ghost: 'ghost',
+      destructive: 'destructive',
+      link: 'link',
+    }),
+
+    size: figma.enum('size', {
+      default: 'default',
+      lg: 'lg',
+      icon: 'icon',
+    }),
+
+    disabled: figma.boolean('disabled'),
+
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon'),
+  },
+
+  example: (props) => (
+    <Button
+      variant={props.variant}
+      size={props.size}
+      disabled={props.disabled}
+      showLeftIcon={props.showLeftIcon}
+      showRightIcon={props.showRightIcon}
+    >
+      Button
+    </Button>
+  ),
+});

package/src/components/Input/Button/Button.tsx

@@ -0,0 +1,223 @@
+import * as React from 'react';
+import {
+  Pressable,
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+  type PressableProps,
+} 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(Pressable, { className: 'style' });
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+/**
+ * ✅ Canonical values (match Figma)
+ */
+export const ButtonVariants = {
+  size: ['default', 'lg', 'icon'],
+  variant: ['default', 'secondary', 'outline', 'ghost', 'destructive', 'link'],
+} as const;
+
+/**
+ * Local lightweight placeholder icon (used in demos/tests)
+ * ✅ No inline styles (satisfies react-native/no-inline-styles)
+ */
+function DummyIcon({ testID }: { testID?: string }) {
+  return <View testID={testID} className="w-4 h-4 rounded bg-black/60" />;
+}
+
+const buttonVariants = cva('flex-row items-center justify-center rounded-md', {
+  variants: {
+    variant: {
+      default: 'bg-brand-primary active:opacity-90',
+      secondary:
+        'bg-brand-secondary border border-brand-primary active:opacity-90',
+      outline: 'bg-transparent border border-border-default active:opacity-90',
+      ghost: 'bg-transparent active:opacity-90',
+      destructive: 'bg-highlight-alert-red active:opacity-90',
+      link: 'bg-transparent',
+    },
+    size: {
+      // ✅ Figma-like sizing
+      default: 'py-3 px-5',
+      lg: 'py-5 px-6',
+      icon: 'h-10 w-10',
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-50',
+    },
+    // Optional icon toggles still affect spacing correctly
+    hasIcons: {
+      false: '',
+      true: 'gap-2',
+    },
+  },
+  compoundVariants: [
+    // ✅ Link should not have forced height/padding
+    { variant: 'link', size: 'default', className: 'h-auto p-0' },
+    { variant: 'link', size: 'lg', className: 'h-auto p-0' },
+    { variant: 'link', size: 'icon', className: 'h-auto p-0 w-auto' },
+  ],
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    hasIcons: false,
+  },
+});
+
+const buttonTextVariants = cva('font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-foreground',
+      outline: 'text-foreground',
+      ghost: 'text-foreground',
+      destructive: 'text-primary-foreground',
+      link: 'text-primary underline',
+    },
+    size: {
+      default: 'text-sm',
+      lg: 'text-base',
+      icon: 'text-sm',
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-50',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+});
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ * So we omit it explicitly from PressableProps.
+ */
+type PressablePropsWithoutClassName = Omit<PressableProps, 'style'> & {
+  className?: never;
+};
+
+/**
+ * ✅ Backward compatible types:
+ * - supports boolean disabled (new)
+ * - supports 'True'/'False' and 'true'/'false' and '1'/'0' (old)
+ * - supports capitalized variant/size (old)
+ */
+export type ButtonProps = PressablePropsWithoutClassName &
+  VariantProps<typeof buttonVariants> & {
+    variant?:
+      | (typeof ButtonVariants.variant)[number]
+      | Capitalize<(typeof ButtonVariants.variant)[number]>;
+    size?:
+      | (typeof ButtonVariants.size)[number]
+      | Capitalize<(typeof ButtonVariants.size)[number]>;
+    disabled?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+
+    showLeftIcon?: boolean;
+    showRightIcon?: boolean;
+
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    children?: React.ReactNode;
+  };
+
+function normalizeVariant(v: any): (typeof ButtonVariants.variant)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  return (ButtonVariants.variant as readonly string[]).includes(s)
+    ? (s as (typeof ButtonVariants.variant)[number])
+    : 'default';
+}
+
+function normalizeSize(v: any): (typeof ButtonVariants.size)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  return (ButtonVariants.size as readonly string[]).includes(s)
+    ? (s as (typeof ButtonVariants.size)[number])
+    : 'default';
+}
+
+function normalizeDisabled(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+export function Button(props: ButtonProps) {
+  const {
+    variant,
+    size,
+    disabled,
+    showLeftIcon,
+    showRightIcon,
+    style,
+    testID,
+    children,
+    onPress,
+    ...rest
+  } = props;
+
+  const v = normalizeVariant(variant);
+  const s = normalizeSize(size);
+  const d = normalizeDisabled(disabled);
+
+  // ✅ icon button must be square and must NOT show label (prevents long button)
+  const isIconOnly = s === 'icon';
+
+  // spacing only when icons exist
+  const hasIcons = Boolean(showLeftIcon || showRightIcon);
+
+  // For link variant: we keep Pressable minimal
+  // - still show label unless icon-only (rare)
+  // - can show icons with gap
+  return (
+    <Pressable
+      testID={testID ?? 'button'}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: d }}
+      disabled={d}
+      onPress={d ? undefined : onPress}
+      className={cn(
+        buttonVariants({
+          variant: v,
+          size: s,
+          disabled: d,
+          hasIcons,
+        })
+      )}
+      style={style}
+      {...rest}
+    >
+      {showLeftIcon ? <DummyIcon testID="button-left-icon" /> : null}
+
+      {!isIconOnly ? (
+        <RNText
+          testID="button-label"
+          className={cn(
+            buttonTextVariants({ variant: v, size: s, disabled: d })
+          )}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {children}
+        </RNText>
+      ) : null}
+
+      {showRightIcon ? <DummyIcon testID="button-right-icon" /> : null}
+    </Pressable>
+  );
+}
+
+Button.displayName = 'Button';
+
+export { buttonTextVariants, buttonVariants };

package/src/components/Input/Checkbox/Checkbox.figma.tsx

@@ -0,0 +1,35 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=24-191';
+
+/**
+ * Checkbox – Binary and multi-state selection control
+ *
+ * Use cases:
+ * - Selecting single or multiple options
+ * - Accepting terms and conditions
+ * - Settings toggles
+ * - Indeterminate (partial selection) states
+ */
+figma.connect(Checkbox, FIGMA_URL, {
+  props: {
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+    }),
+
+    state: figma.enum('state', {
+      unchecked: 'unchecked',
+      checked: 'checked',
+      indeterminate: 'indeterminate',
+    }),
+
+    disabled: figma.boolean('disabled'),
+  },
+
+  example: (props) => (
+    <Checkbox size={props.size} state={props.state} disabled={props.disabled} />
+  ),
+});