# @hero-design/rn

React Native component library for Hero Design. Built with TypeScript and emotion (`@emotion/native`).

## File Organization

- Entry: `ComponentName/index.tsx` (exports main component, often compound)
- Component: `ComponentName/ComponentName.tsx` (main implementation)
- Styled: `ComponentName/StyledComponentName.tsx`
- Sub-components: `ComponentName/SubComponentName/index.tsx`
- Types: `ComponentName/types.ts` (if needed)
- Tests: `ComponentName/__tests__/ComponentName.spec.tsx`

## Conventions

- Import `styled` from `@emotion/native`; use `useTheme()` hook (no prop drilling)
- Styled props: `themeButtonVariant`, `themeIsPressed`, `themeIsCompact` pattern
- Use `theme.__hd__.componentName.*` tokens (component-specific) over global tokens
- JSDoc on each prop; include `testID?: string` for testing
- Functional components; React Native primitives (`Text`, `View`, not HTML); strict TypeScript

## Testing

- Use `renderWithTheme()` from `'../../../testHelpers/renderWithTheme'` for theme context
- Use `@testing-library/react-native` + `jest` + `@testing-library/jest-native`
- Handle nested styles with `StyleSheet.flatten()` when needed

## Commands

```bash
yarn turbo run test --filter=@hero-design/rn -- ComponentName [--watch|--updateSnapshot]
yarn workspace @hero-design/rn lint
yarn workspace @hero-design/rn type-check
yarn build:watch:rn
```