@campxdev/react-native-blueprint 0.1.13 → 0.1.15

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

@@ -0,0 +1,92 @@
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Stepper } from './Stepper';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+const STEPPER_FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=307-6458';
+
+figma.connect(Stepper, STEPPER_FIGMA_URL, {
+  props: {},
+  example: () => (
+    <Stepper
+      steps={[
+        {
+          state: 'completed',
+          title: 'Step 1',
+          subtitle: 'Completed step',
+        },
+        {
+          state: 'active',
+          title: 'Step 2',
+          subtitle: 'Active step',
+          showStepperContent: true,
+          showSecondaryButton: true,
+        },
+        {
+          state: 'pending',
+          title: 'Step 3',
+          subtitle: 'Pending step',
+        },
+      ]}
+    />
+  ),
+});
+
+export default function StepperFigma() {
+  return (
+    <View className="bg-background p-6 gap-8 flex-col">
+      <Stepper
+        steps={[
+          {
+            state: 'completed',
+            title: 'Step Item Title',
+            subtitle: 'This is the step item description',
+            showSubtitle: true,
+            showStepperContent: false,
+          },
+          {
+            state: 'error',
+            title: 'Step Item Title',
+            subtitle:
+              'This step has an error description. Fix the error by clicking on the Primary Action button below',
+            showSubtitle: true,
+            showStepperContent: false,
+            primaryButtonLabel: 'Primary Action',
+          },
+          {
+            state: 'active',
+            title: 'Step Item Title',
+            subtitle: 'This is the step item description',
+            showSubtitle: true,
+            showStepperContent: true,
+            showSecondaryButton: true,
+            secondaryButtonLabel: 'Secondary Action',
+            primaryButtonLabel: 'Primary Action',
+          },
+          {
+            state: 'pending',
+            title: 'Step Item Title',
+            subtitle: 'This is the step item description',
+            showSubtitle: true,
+            showStepperContent: false,
+          },
+          {
+            state: 'pending',
+            title: 'Step Item Title',
+            subtitle: 'This is the step item description',
+            showSubtitle: true,
+            showStepperContent: false,
+          },
+        ]}
+      />
+    </View>
+  );
+}

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,290 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+  Pressable,
+  View,
+  Text as RNText,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+  type PressableProps,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { SquircleView } from 'react-native-figma-squircle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { useThemeColors } from '../../../lib/theme';
+
+// 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-text-inverse" />;
+}
+
+/**
+ * Returns squircle fill & stroke colors per variant from THEME tokens
+ */
+function useVariantSquircleParams(variant: string) {
+  const colors = useThemeColors();
+
+  const map: Record<
+    string,
+    { fillColor: string; strokeColor: string; strokeWidth: number }
+  > = {
+    default: {
+      fillColor: colors.brandPrimary,
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    secondary: {
+      fillColor: colors.brandSecondary,
+      strokeColor: colors.brandPrimary,
+      strokeWidth: 1,
+    },
+    outline: {
+      fillColor: 'transparent',
+      strokeColor: colors.border,
+      strokeWidth: 1,
+    },
+    ghost: {
+      fillColor: 'transparent',
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    destructive: {
+      fillColor: colors.destructive,
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+    link: {
+      fillColor: 'transparent',
+      strokeColor: 'transparent',
+      strokeWidth: 0,
+    },
+  };
+
+  return map[variant] ?? map.default;
+}
+
+const CORNER_RADIUS = 8; // radius-lg
+const CORNER_SMOOTHING = 1; // maximum smoothing
+
+const buttonVariants = cva('flex-row items-center justify-center', {
+  variants: {
+    variant: {
+      default: 'gap-2 active:opacity-90',
+      secondary: 'active:opacity-90',
+      outline: 'active:opacity-90',
+      ghost: 'active:opacity-90',
+      destructive: 'active:opacity-90',
+      link: '',
+    },
+    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-text-inverse',
+      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);
+
+  const squircleParams = useVariantSquircleParams(v);
+
+  const handlePress = React.useCallback(
+    (e: GestureResponderEvent) => {
+      if (d) return;
+      onPress?.(e);
+    },
+    [d, onPress]
+  );
+
+  return (
+    <View style={style}>
+      <SquircleView
+        squircleParams={{
+          cornerRadius: CORNER_RADIUS,
+          cornerSmoothing: CORNER_SMOOTHING,
+          ...squircleParams,
+        }}
+      >
+        <Pressable
+          testID={testID ?? 'button'}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: d }}
+          disabled={d}
+          onPress={handlePress}
+          className={cn(
+            buttonVariants({
+              variant: v,
+              size: s,
+              disabled: d,
+              hasIcons,
+            })
+          )}
+          {...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>
+      </SquircleView>
+    </View>
+  );
+}
+
+Button.displayName = 'Button';
+
+export { buttonTextVariants, buttonVariants };