@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/Input/Select/Select.tsx

@@ -0,0 +1,366 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+  View as RNView,
+  Text as RNText,
+  Pressable as RNPressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+/* -----------------------------------------------------
+ * NativeWind interop (className -> style)
+ * --------------------------------------------------- */
+const View = cssInterop(RNView, { className: 'style' });
+const Text = cssInterop(RNText, { className: 'style' });
+const Pressable = cssInterop(RNPressable, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Variants (matches Figma props)
+ * --------------------------------------------------- */
+export const SelectVariants = {
+  state: ['default', 'disabled', 'focused'] as const,
+  open: ['false', 'true'] as const,
+  value: ['placeholder', 'filled'] as const,
+} as const;
+
+export type SelectState = (typeof SelectVariants.state)[number];
+export type SelectOpen = (typeof SelectVariants.open)[number];
+export type SelectValue = (typeof SelectVariants.value)[number];
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+export type SelectOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+export interface SelectProps {
+  state: SelectState;
+  open: SelectOpen;
+  value: SelectValue;
+
+  showLabel?: boolean;
+  showHelpText?: boolean;
+  showLeftIcon?: boolean;
+
+  label?: string;
+  helperText?: string;
+  placeholderText?: string;
+  filledText?: string;
+
+  leftIcon?: React.ReactNode;
+
+  /** Dropdown items (for real usage) */
+  options?: SelectOption[];
+  selectedValue?: string;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: SelectOpen) => void;
+
+  /** Override outer style (RN style only) */
+  style?: StyleProp<ViewStyle>;
+
+  /** E2E */
+  testID?: string;
+
+  /** Do NOT allow className from consumers */
+  className?: never;
+}
+
+/* -----------------------------------------------------
+ * CVA styles
+ * --------------------------------------------------- */
+
+const rootVariants = cva('w-full flex-col', {
+  variants: {
+    showLabel: { true: 'gap-2', false: 'gap-2' }, // keep spacing consistent
+  },
+  defaultVariants: { showLabel: true },
+});
+
+const labelVariants = cva('text-xs font-medium text-muted-foreground', {});
+
+const triggerVariants = cva(
+  cn(
+    'flex-row items-center justify-between',
+    'rounded-md border border-input bg-background',
+    'px-3 py-3'
+  ),
+  {
+    variants: {
+      state: {
+        default: '',
+        focused: 'border-foreground',
+        disabled: 'opacity-50',
+      },
+    },
+    defaultVariants: {
+      state: 'default',
+    },
+  }
+);
+
+const triggerContentVariants = cva('flex-row items-center flex-1', {
+  variants: {
+    showLeftIcon: {
+      true: 'gap-2',
+      false: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    showLeftIcon: false,
+  },
+});
+
+const leftIconWrapVariants = cva('w-4 h-4 items-center justify-center', {});
+
+const leftIconPlaceholderVariants = cva('w-4 h-4 rounded-[4px] bg-muted', {});
+
+const valueTextVariants = cva('text-base font-medium flex-1 text-foreground', {
+  variants: {
+    value: {
+      placeholder: 'text-muted-foreground',
+      filled: 'text-foreground',
+    },
+    state: {
+      default: '',
+      focused: '',
+      disabled: '',
+    },
+  },
+  defaultVariants: {
+    value: 'placeholder',
+    state: 'default',
+  },
+});
+
+const chevronVariants = cva('text-base text-foreground ml-2', {
+  variants: {
+    open: {
+      false: '',
+      true: 'rotate-180',
+    },
+    state: {
+      default: '',
+      focused: '',
+      disabled: '',
+    },
+  },
+  defaultVariants: {
+    open: 'false',
+    state: 'default',
+  },
+});
+
+const helperTextVariants = cva('text-xs font-medium text-muted-foreground', {
+  variants: {
+    state: {
+      default: '',
+      focused: '',
+      disabled: 'opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+const dropdownVariants = cva(
+  cn('border border-input bg-background rounded-md', 'p-2 gap-1'),
+  {}
+);
+
+const optionVariants = cva(
+  cn('flex-row items-center justify-between', 'rounded-md px-4 py-3'),
+  {
+    variants: {
+      selected: {
+        true: 'bg-muted',
+        false: '',
+      },
+      disabled: {
+        true: 'opacity-50',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      selected: false,
+      disabled: false,
+    },
+  }
+);
+
+const optionTextVariants = cva(
+  'text-sm font-medium text-foreground flex-1',
+  {}
+);
+
+const optionCheckVariants = cva('text-sm font-bold text-foreground ml-2', {});
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Select(props: SelectProps) {
+  const {
+    state,
+    open,
+    value,
+
+    showLabel = true,
+    showHelpText = true,
+    showLeftIcon = false,
+
+    label = 'Field Label',
+    helperText = 'This is a helper text',
+    placeholderText = 'Placeholder text',
+    filledText = 'Select item',
+
+    leftIcon,
+
+    options = [
+      { label: 'Select item', value: '1' },
+      { label: 'Select item', value: '2' },
+      { label: 'Select item', value: '3' },
+    ],
+    selectedValue,
+    onValueChange,
+    onOpenChange,
+
+    style,
+    testID,
+  } = props;
+
+  const isDisabled = state === 'disabled';
+  const isOpen = open === 'true';
+
+  const displayText =
+    value === 'filled'
+      ? (options.find((o) => o.value === selectedValue)?.label ?? filledText)
+      : placeholderText;
+
+  const toggleOpen = () => {
+    if (isDisabled) return;
+    onOpenChange?.(isOpen ? 'false' : 'true');
+  };
+
+  return (
+    <View
+      testID={testID ?? 'select'}
+      className={cn(rootVariants({ showLabel }))}
+      style={style}
+    >
+      {showLabel ? (
+        <Text testID="select-label" className={cn(labelVariants())}>
+          {label}
+        </Text>
+      ) : null}
+
+      <Pressable
+        testID="select-trigger"
+        disabled={isDisabled}
+        onPress={toggleOpen}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled, expanded: isOpen }}
+        className={cn(triggerVariants({ state }))}
+      >
+        <View
+          testID="select-trigger-content"
+          className={cn(triggerContentVariants({ showLeftIcon }))}
+        >
+          {showLeftIcon ? (
+            <View
+              testID="select-left-icon"
+              className={cn(leftIconWrapVariants())}
+            >
+              {leftIcon ?? (
+                <View className={cn(leftIconPlaceholderVariants())} />
+              )}
+            </View>
+          ) : null}
+
+          <Text
+            testID="select-value"
+            numberOfLines={1}
+            className={cn(valueTextVariants({ value, state }))}
+          >
+            {displayText}
+          </Text>
+        </View>
+
+        <Text
+          testID="select-chevron"
+          className={cn(
+            chevronVariants({ open: isOpen ? 'true' : 'false', state })
+          )}
+        >
+          ⌄
+        </Text>
+      </Pressable>
+
+      {!isOpen && showHelpText ? (
+        <Text
+          testID="select-helper"
+          className={cn(helperTextVariants({ state }))}
+        >
+          {helperText}
+        </Text>
+      ) : null}
+
+      {isOpen && !isDisabled ? (
+        <View testID="select-dropdown" className={cn(dropdownVariants())}>
+          {options.map((opt) => {
+            const selected = opt.value === selectedValue;
+            const optDisabled = !!opt.disabled;
+
+            return (
+              <Pressable
+                key={opt.value}
+                testID={`select-option-${opt.value}`}
+                disabled={optDisabled}
+                onPress={() => {
+                  if (optDisabled) return;
+                  onValueChange?.(opt.value);
+                  onOpenChange?.('false');
+                }}
+                className={cn(
+                  optionVariants({ selected, disabled: optDisabled })
+                )}
+              >
+                <Text numberOfLines={1} className={cn(optionTextVariants())}>
+                  {opt.label}
+                </Text>
+
+                {selected ? (
+                  <Text className={cn(optionCheckVariants())}>✓</Text>
+                ) : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+Select.displayName = 'Select';
+
+/* -----------------------------------------------------
+ * (Optional) Exports for testing / composition
+ * --------------------------------------------------- */
+export {
+  rootVariants,
+  labelVariants,
+  triggerVariants,
+  valueTextVariants,
+  chevronVariants,
+  helperTextVariants,
+  dropdownVariants,
+  optionVariants,
+};

package/src/components/Input/Text/Text.tsx

@@ -0,0 +1,73 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from '../../../lib/utils';
+
+cssInterop(RNText, { className: 'style' });
+
+/**
+ * Context for sharing text class styles with child Text components
+ * Used by components like Button, Card, Badge to automatically style nested Text
+ */
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+/**
+ * Enhanced Text component with NativeWind styling support
+ *
+ * Extends React Native's Text with:
+ * - Automatic style inheritance from TextClassContext
+ * - NativeWind className support
+ * - Slot pattern support for composition
+ * - Web-specific selection styling
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic text
+ * <Text>Hello World</Text>
+ *
+ * // With custom styling
+ * <Text className="text-lg font-bold">Title</Text>
+ *
+ * // Inside a styled context (e.g., Button)
+ * <Button variant="default">
+ *   <Text>Button Text</Text> // Automatically inherits button text styling
+ * </Button>
+ *
+ * // Using asChild for composition
+ * <Text asChild>
+ *   <Link href="/home">Home</Link>
+ * </Text>
+ * ```
+ *
+ * @property {string} [className] - Additional Tailwind classes
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ */
+const Text = React.forwardRef<
+  TextRef,
+  SlottableTextProps & {
+    className?: string;
+    children?: React.ReactNode;
+  }
+>(({ className, asChild = false, style, ...props }, ref) => {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+
+  const finalClassName = textClass
+    ? cn('text-base web:select-text', textClass, className)
+    : cn('text-base text-foreground web:select-text', className);
+
+  return (
+    <Component
+      className={finalClassName}
+      style={style}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+Text.displayName = 'Text';
+
+export { Text, TextClassContext };

package/src/components/Input/TextField/Textfield.figma.tsx

@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect';
+import { TextField } from './Textfield';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=290-6846';
+
+figma.connect(TextField, FIGMA_URL, {
+  props: {
+    // State
+    state: figma.enum('state', {
+      default: 'default',
+      focused: 'focused',
+      success: 'success',
+      error: 'error',
+      disabled: 'disabled',
+      loading: 'loading',
+    }),
+
+    // Content
+    content: figma.enum('content', {
+      placeholder: 'placeholder',
+      filled: 'filled',
+    }),
+
+    // Type
+    type: figma.enum('type', {
+      text: 'text',
+      search: 'search',
+      ai: 'ai',
+      composer: 'composer',
+      code: 'code',
+    }),
+
+    // Visibility
+    showLabel: figma.boolean('Show label'),
+    showHelpText: figma.boolean('Show helpText'),
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon'),
+  },
+
+  example: (props) => (
+    <TextField
+      state={props.state}
+      content={props.content}
+      type={props.type}
+      showLabel={props.showLabel}
+      showHelpText={props.showHelpText}
+      showLeftIcon={props.showLeftIcon}
+      showRightIcon={props.showRightIcon}
+      label="Field Label"
+      helpText="Helper text"
+      successMessage="Success message"
+      errorMessage="Error message"
+    />
+  ),
+});