@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,176 @@
+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';
+// Corrected import path for Button
+import { Button } from '../../Input/Button/Button';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+// Internal components with loose typing to allow className passing internally
+// while keeping the public API strict.
+const StyledView = View as any;
+const StyledText = RNText as any;
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const AlertDialogVariants = {
+  intent: ['default', 'destructive'] as const,
+} as const;
+
+type AlertDialogIntent = (typeof AlertDialogVariants.intent)[number];
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'flex-1 flex-col items-start rounded-lg bg-background px-5 py-5 gap-4 mx-5',
+  {
+    variants: {
+      intent: {
+        default: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: {
+      intent: 'default',
+    },
+  }
+);
+
+const contentVariants = cva('w-full flex-col items-start gap-2');
+
+const titleVariants = cva('w-full text-base font-semibold text-foreground');
+
+const descriptionVariants = cva(
+  'w-full text-xs font-medium text-muted-foreground'
+);
+
+const actionsVariants = cva('flex-row items-start gap-3');
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+export type AlertDialogProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'intent'
+> & {
+  title: string;
+  description: string;
+
+  intent?: AlertDialogIntent | 'Default' | 'Destructive';
+
+  showDescription?: boolean;
+  showSecondaryAction?: boolean;
+
+  /** 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;
+};
+
+/* -----------------------------------------------------
+ * Normalizer
+ * --------------------------------------------------- */
+
+function normalizeIntent(v: any): AlertDialogIntent {
+  const s = String(v ?? 'default').toLowerCase();
+  return s === 'destructive' ? 'destructive' : 'default';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function AlertDialog(props: AlertDialogProps) {
+  const {
+    title,
+    description,
+    intent,
+    showDescription = true,
+    showSecondaryAction = true,
+    style,
+    testID,
+  } = props;
+
+  const i = normalizeIntent(intent);
+
+  // map to your Button variants (lowercase here)
+  const primaryVariant = i === 'destructive' ? 'destructive' : 'default';
+  const secondaryVariant = i === 'destructive' ? 'outline' : 'outline';
+
+  return (
+    <StyledView
+      testID={testID ?? 'alert-dialog'}
+      className={cn(rootVariants({ intent: i }))}
+      style={style}
+    >
+      <StyledView
+        testID="alert-dialog-content"
+        className={cn(contentVariants())}
+      >
+        <StyledText testID="alert-dialog-title" className={cn(titleVariants())}>
+          {title}
+        </StyledText>
+
+        {showDescription ? (
+          <StyledText
+            testID="alert-dialog-description"
+            className={cn(descriptionVariants())}
+          >
+            {description}
+          </StyledText>
+        ) : null}
+      </StyledView>
+
+      <StyledView
+        testID="alert-dialog-actions"
+        className={cn(actionsVariants())}
+      >
+        <Button
+          testID="alert-dialog-confirm"
+          disabled={false}
+          size="default"
+          variant={primaryVariant}
+          showLeftIcon={false}
+          showRightIcon={false}
+        >
+          Confirm
+        </Button>
+
+        {showSecondaryAction ? (
+          <Button
+            testID="alert-dialog-cancel"
+            disabled={false}
+            size="default"
+            variant={secondaryVariant}
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            Cancel
+          </Button>
+        ) : null}
+      </StyledView>
+    </StyledView>
+  );
+}
+
+AlertDialog.displayName = 'AlertDialog';
+
+export { rootVariants };

package/src/components/Feedback/ProgressCircular/Progress-circular.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { ProgressCircular } from './Progress-circular';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=24-114';
+
+figma.connect(ProgressCircular, FIGMA_URL, {
+  props: {
+    indeterminate: figma.boolean('indeterminate'),
+
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+    }),
+
+    variant: figma.enum('variant', {
+      default: 'default',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+  },
+
+  example: (props) => (
+    <ProgressCircular
+      indeterminate={props.indeterminate}
+      size={props.size}
+      variant={props.variant}
+    />
+  ),
+});

package/src/components/Feedback/ProgressCircular/Progress-circular.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' });
+
+/**
+ * ✅ Matches Figma / Code Connect canonical values:
+ * indeterminate: boolean
+ * size: 'sm' | 'md' | 'lg'
+ * variant: 'default' | 'success' | 'warning' | 'destructive'
+ */
+export const ProgressCircularVariants = {
+  size: ['sm', 'md', 'lg'],
+  variant: ['default', 'success', 'warning', 'destructive'],
+} as const;
+
+const rootVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'w-5 h-5', // 20x20
+      md: 'w-6 h-6', // 24x24
+      lg: 'w-8 h-8', // 32x32
+    },
+    variant: {
+      default: '',
+      success: '',
+      warning: '',
+      destructive: '',
+    },
+    disabled: {
+      // (not used, but keeping pattern if you ever add)
+      false: '',
+      true: '',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    variant: 'default',
+  },
+});
+
+/**
+ * Ring that can spin when indeterminate === true.
+ * Uses NativeWind `animate-spin`.
+ */
+const spinnerVariants = cva(
+  'rounded-full border-2 border-l-transparent border-r-transparent border-b-transparent',
+  {
+    variants: {
+      size: {
+        sm: 'w-5 h-5 border-2',
+        md: 'w-6 h-6 border-2',
+        lg: 'w-8 h-8 border-2',
+      },
+      variant: {
+        default: 'border-t-brand-primary',
+        success: 'border-t-highlight-success-green',
+        warning: 'border-t-highlight-warning-orange',
+        destructive: 'border-t-highlight-alert-red',
+      },
+      indeterminate: {
+        false: '',
+        true: 'animate-spin',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+      indeterminate: false,
+    },
+  }
+);
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ */
+export type ProgressCircularProps = Omit<
+  VariantProps<typeof rootVariants>,
+  'disabled'
+> & {
+  indeterminate?: boolean;
+  size?: (typeof ProgressCircularVariants.size)[number];
+  variant?: (typeof ProgressCircularVariants.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;
+};
+
+/**
+ * Backward compatibility:
+ * If any old callers still pass 'True'/'False' or 'Sm'/'Md'/'Lg', normalize them.
+ */
+function normalizeIndeterminate(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+function normalizeSize(v: any): (typeof ProgressCircularVariants.size)[number] {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'md' || s === 'lg') return s;
+  // support old caps: Sm/Md/Lg
+  if (s === 'sm' || s === 'md' || s === 'lg') return s;
+  return 'sm';
+}
+
+function normalizeVariant(
+  v: any
+): (typeof ProgressCircularVariants.variant)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  )
+    return s;
+  return 'default';
+}
+
+export function ProgressCircular(props: ProgressCircularProps) {
+  const { style, testID } = props;
+
+  const size = normalizeSize(props.size);
+  const variant = normalizeVariant(props.variant);
+  const indeterminate = normalizeIndeterminate(props.indeterminate);
+
+  // sizes: sm=20, md=24, lg=32
+  const sizePx = size === 'sm' ? 20 : size === 'md' ? 24 : 32;
+
+  return (
+    <View
+      testID={testID ?? 'progress-circular'}
+      className={cn(rootVariants({ size, variant }))}
+      style={style}
+    >
+      <View
+        testID="progress-circular-ring"
+        className={cn(spinnerVariants({ size, variant, indeterminate }))}
+        style={{
+          width: sizePx,
+          height: sizePx,
+          borderRadius: sizePx / 2,
+        }}
+      />
+    </View>
+  );
+}
+
+ProgressCircular.displayName = 'ProgressCircular';
+
+export { rootVariants, spinnerVariants };
+export type { ProgressCircularProps };

package/src/components/Feedback/ProgressLinear/Progress-linear.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { ProgressLinear } from './Progress-linear';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=24-88';
+
+figma.connect(ProgressLinear, FIGMA_URL, {
+  props: {
+    // Boolean toggle in Figma
+    indeterminate: figma.boolean('indeterminate'),
+
+    // Lowercase enum values (match Figma + code)
+    variant: figma.enum('variant', {
+      default: 'default',
+      success: 'success',
+      warning: 'warning',
+      destructive: 'destructive',
+    }),
+  },
+
+  example: (props) => (
+    <ProgressLinear
+      indeterminate={props.indeterminate}
+      variant={props.variant}
+    />
+  ),
+});

package/src/components/Feedback/ProgressLinear/Progress-linear.tsx

@@ -0,0 +1,125 @@
+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)
+ * indeterminate: boolean
+ * variant: 'default' | 'success' | 'warning' | 'destructive'
+ */
+export const ProgressLinearVariants = {
+  variant: ['default', 'success', 'warning', 'destructive'],
+} as const;
+
+const rootVariants = cva(
+  'w-[400px] h-1 relative overflow-hidden rounded-full',
+  {
+    variants: {
+      variant: {
+        default: '',
+        success: '',
+        warning: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const backgroundVariants = cva('absolute inset-0 bg-surface-subtle');
+
+const barVariants = cva('absolute left-0 top-0 h-1 rounded-full', {
+  variants: {
+    indeterminate: {
+      false: 'w-[400px]',
+      true: 'w-[100px]',
+    },
+    variant: {
+      default: 'bg-brand-primary',
+      success: 'bg-highlight-success-green',
+      warning: 'bg-highlight-warning-orange',
+      destructive: 'bg-highlight-alert-red',
+    },
+  },
+  defaultVariants: {
+    indeterminate: false,
+    variant: 'default',
+  },
+});
+
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ * ✅ Backward compatible: accepts old 'True'/'False' and 'Default' casing too.
+ */
+export type ProgressLinearProps = Omit<
+  VariantProps<typeof barVariants>,
+  'variant' | 'indeterminate'
+> & {
+  indeterminate?: boolean | 'True' | 'False' | 'true' | 'false' | '1' | '0';
+  variant?:
+    | (typeof ProgressLinearVariants.variant)[number]
+    | Capitalize<(typeof ProgressLinearVariants.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 normalizeIndeterminate(v: any): boolean {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+function normalizeVariant(
+  v: any
+): (typeof ProgressLinearVariants.variant)[number] {
+  const s = String(v ?? 'default').toLowerCase();
+  if (
+    s === 'default' ||
+    s === 'success' ||
+    s === 'warning' ||
+    s === 'destructive'
+  )
+    return s;
+  return 'default';
+}
+
+export function ProgressLinear(props: ProgressLinearProps) {
+  const { style, testID } = props;
+
+  const variant = normalizeVariant(props.variant);
+  const indeterminate = normalizeIndeterminate(props.indeterminate);
+
+  return (
+    <View
+      testID={testID ?? 'progress-linear'}
+      className={cn(rootVariants({ variant }))}
+      style={style}
+    >
+      <View testID="progress-linear-bg" className={cn(backgroundVariants())} />
+      <View
+        testID="progress-linear-bar"
+        className={cn(barVariants({ variant, indeterminate }))}
+      />
+    </View>
+  );
+}
+
+ProgressLinear.displayName = 'ProgressLinear';
+
+export { rootVariants, backgroundVariants, barVariants };
+export type { ProgressLinearProps };

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>
+  );
+}