create-component

Create UI Component

Scaffold a UI component following the project's exact unistyles variant pattern.

Gather Information

Ask the user for:

1. Component name (PascalCase, e.g., "ProductCard", "StatusBadge")
2. Location: common (src/common/components/) or feature-specific (src/features/<feature>/components/)
3. Key props and whether it needs variants (size, variant, etc.)
4. Interactive? Does it handle press events?

Steps

1. Create Component Directory

<ComponentName>/
├── <ComponentName>.tsx
├── <ComponentName>.types.ts
├── <ComponentName>.styles.ts
└── index.ts

2. Generate Types File

// <ComponentName>.types.ts
import type { ViewProps } from 'react-native';
import type { <ComponentName>StyleVariants } from './<ComponentName>.styles';

export interface <ComponentName>Props extends ViewProps, <ComponentName>StyleVariants {
  // Required props
  // Optional props with defaults documented
}

Type rules:

• Extend appropriate RN base props (ViewProps, PressableProps, etc.)
• Intersect with the style variants type from the .styles.ts file
• Use import type for all type imports
• Use project types from @/common/components/shared.types (e.g., ComponentSize)

3. Generate Styles File

Follow the exact pattern from Button.styles.ts:

// <ComponentName>.styles.ts
import { StyleSheet, type UnistylesVariants } from 'react-native-unistyles';

export const styles = StyleSheet.create((theme) => ({
  container: {
    // Base styles using theme tokens
    backgroundColor: theme.colors.background.surface,
    borderRadius: theme.metrics.borderRadius.md,
    padding: theme.metrics.spacing.p16,
    // Variants block for prop-driven style changes
    variants: {
      variant: {
        primary: { /* ... */ },
        secondary: { /* ... */ },
      },
      size: {
        sm: { padding: theme.metrics.spacing.p8 },
        md: { padding: theme.metrics.spacing.p12 },
        lg: { padding: theme.metrics.spacing.p16 },
      },
      disabled: {
        true: { opacity: 0.5 },
      },
    },
  },
  // Additional style targets with their own variants if needed
}));

export type <ComponentName>StyleVariants = UnistylesVariants<typeof styles>;