@astacinco/rn-primitives 0.1.0

package/README.md

@@ -0,0 +1,195 @@
+# @astacinco/rn-primitives
+
+Theme-aware UI primitives for React Native. All components automatically adapt to light/dark modes.
+
+## Installation
+
+```bash
+npm install @astacinco/rn-primitives @astacinco/rn-theming
+```
+
+## Quick Start
+
+```typescript
+import { ThemeProvider } from '@astacinco/rn-theming';
+import { Text, Button, Card, VStack } from '@astacinco/rn-primitives';
+
+function App() {
+  return (
+    <ThemeProvider mode="auto">
+      <VStack spacing="md">
+        <Text variant="title">Welcome</Text>
+        <Card>
+          <Text>This is a themed card</Text>
+        </Card>
+        <Button label="Get Started" onPress={() => {}} />
+      </VStack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Components
+
+### Text
+
+Themed text with variants.
+
+```typescript
+<Text variant="title">Title Text</Text>
+<Text variant="subtitle">Subtitle Text</Text>
+<Text variant="body">Body Text</Text>
+<Text variant="caption">Caption Text</Text>
+<Text variant="label">Label Text</Text>
+```
+
+**Props:**
+- `variant` - `'title' | 'subtitle' | 'body' | 'caption' | 'label'` (default: `'body'`)
+- `color` - Override text color (uses theme colors by default)
+- All standard `Text` props from React Native
+
+### Button
+
+Themed button with variants.
+
+```typescript
+<Button label="Primary" variant="primary" onPress={handlePress} />
+<Button label="Secondary" variant="secondary" onPress={handlePress} />
+<Button label="Outline" variant="outline" onPress={handlePress} />
+<Button label="Ghost" variant="ghost" onPress={handlePress} />
+<Button label="Disabled" disabled onPress={handlePress} />
+```
+
+**Props:**
+- `label` - Button text (required)
+- `variant` - `'primary' | 'secondary' | 'outline' | 'ghost'` (default: `'primary'`)
+- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)
+- `disabled` - Disable the button
+- `loading` - Show loading state
+- `onPress` - Press handler (required)
+
+### Card
+
+Themed card container.
+
+```typescript
+<Card>
+  <Text>Card content</Text>
+</Card>
+
+<Card variant="outlined">
+  <Text>Outlined card</Text>
+</Card>
+
+<Card variant="elevated">
+  <Text>Elevated card with shadow</Text>
+</Card>
+```
+
+**Props:**
+- `variant` - `'filled' | 'outlined' | 'elevated'` (default: `'filled'`)
+- `padding` - Override padding
+
+### Stack (VStack, HStack)
+
+Layout components for vertical and horizontal stacking.
+
+```typescript
+<VStack spacing="md" align="center">
+  <Text>Item 1</Text>
+  <Text>Item 2</Text>
+</VStack>
+
+<HStack spacing="sm" justify="space-between">
+  <Button label="Cancel" variant="ghost" />
+  <Button label="Save" />
+</HStack>
+```
+
+**Props:**
+- `spacing` - Gap between items: `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+- `align` - Align items: `'start' | 'center' | 'end' | 'stretch'`
+- `justify` - Justify content: `'start' | 'center' | 'end' | 'space-between' | 'space-around'`
+
+### Container
+
+Themed container with padding and optional max width.
+
+```typescript
+<Container>
+  <Text>Full width content</Text>
+</Container>
+
+<Container maxWidth={600} centered>
+  <Text>Centered content with max width</Text>
+</Container>
+```
+
+**Props:**
+- `padding` - Override padding
+- `maxWidth` - Maximum width in pixels
+- `centered` - Center the container horizontally
+
+### Input
+
+Themed text input.
+
+```typescript
+<Input
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChangeText={setEmail}
+/>
+
+<Input
+  label="Password"
+  secureTextEntry
+  value={password}
+  onChangeText={setPassword}
+  error="Password is required"
+/>
+```
+
+**Props:**
+- `label` - Input label
+- `placeholder` - Placeholder text
+- `error` - Error message to display
+- `disabled` - Disable the input
+- All standard `TextInput` props
+
+### Divider
+
+Themed horizontal divider.
+
+```typescript
+<Divider />
+<Divider variant="thick" />
+<Divider color="#FF0000" />
+```
+
+**Props:**
+- `variant` - `'thin' | 'thick'` (default: `'thin'`)
+- `color` - Override divider color
+
+## Theme Integration
+
+All components use the `useTheme()` hook from `@astacinco/rn-theming`. They automatically:
+
+- Adapt colors to light/dark mode
+- Use consistent spacing tokens
+- Apply proper typography styles
+- Support scoped theming
+
+## Testing
+
+Use `@astacinco/rn-testing` for testing primitives:
+
+```typescript
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Button } from '@astacinco/rn-primitives';
+
+describe('Button', () => {
+  createThemeSnapshot(<Button label="Click" onPress={() => {}} />);
+});
+```

package/__tests__/Button.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Button } from '../src/Button';
+
+describe('Button', () => {
+  const mockOnPress = jest.fn();
+
+  beforeEach(() => {
+    mockOnPress.mockClear();
+  });
+
+  // Snapshot tests for both themes
+  createThemeSnapshot(<Button label="Click Me" onPress={() => {}} testID="button" />);
+
+  describe('variants', () => {
+    it('renders_primary_variant_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Primary" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+
+    it('renders_secondary_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Secondary" variant="secondary" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+
+    it('renders_outline_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Outline" variant="outline" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+
+    it('renders_ghost_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Ghost" variant="ghost" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+  });
+
+  describe('sizes', () => {
+    it('renders_sm_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Small" size="sm" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+
+    it('renders_md_size_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Medium" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+
+    it('renders_lg_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Large" size="lg" onPress={mockOnPress} testID="button" />
+      );
+      expect(getByTestId('button')).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    it('calls_onPress_whenPressed', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Press Me" onPress={mockOnPress} testID="button" />
+      );
+
+      fireEvent.press(getByTestId('button'));
+      expect(mockOnPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does_notCall_onPress_whenDisabled', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Disabled" disabled onPress={mockOnPress} testID="button" />
+      );
+
+      fireEvent.press(getByTestId('button'));
+      expect(mockOnPress).not.toHaveBeenCalled();
+    });
+
+    it('does_notCall_onPress_whenLoading', () => {
+      const { getByTestId } = renderWithTheme(
+        <Button label="Loading" loading onPress={mockOnPress} testID="button" />
+      );
+
+      fireEvent.press(getByTestId('button'));
+      expect(mockOnPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Button label="Test" onPress={mockOnPress} testID="button" />,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Button label="Test" onPress={mockOnPress} testID="button" />,
+        'dark'
+      );
+
+      // Both should render without errors
+      expect(lightResult.getByTestId('button')).toBeTruthy();
+      expect(darkResult.getByTestId('button')).toBeTruthy();
+    });
+  });
+});

package/__tests__/Card.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Card } from '../src/Card';
+
+describe('Card', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <Card testID="card">
+      <Text>Card content</Text>
+    </Card>
+  );
+
+  describe('variants', () => {
+    it('renders_filled_variant_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Card testID="card">
+          <Text>Content</Text>
+        </Card>
+      );
+      expect(getByTestId('card')).toBeTruthy();
+    });
+
+    it('renders_outlined_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Card variant="outlined" testID="card">
+          <Text>Content</Text>
+        </Card>
+      );
+      expect(getByTestId('card')).toBeTruthy();
+    });
+
+    it('renders_elevated_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Card variant="elevated" testID="card">
+          <Text>Content</Text>
+        </Card>
+      );
+      expect(getByTestId('card')).toBeTruthy();
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Card testID="card">
+          <Text>Test</Text>
+        </Card>,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Card testID="card">
+          <Text>Test</Text>
+        </Card>,
+        'dark'
+      );
+
+      const lightBg = lightResult.getByTestId('card').props.style[1].backgroundColor;
+      const darkBg = darkResult.getByTestId('card').props.style[1].backgroundColor;
+
+      expect(lightBg).not.toBe(darkBg);
+    });
+  });
+
+  it('accepts_custom_padding', () => {
+    const { getByTestId } = renderWithTheme(
+      <Card padding={32} testID="card">
+        <Text>Content</Text>
+      </Card>
+    );
+    expect(getByTestId('card').props.style[1].padding).toBe(32);
+  });
+});

package/__tests__/Container.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Container } from '../src/Container';
+
+describe('Container', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <Container testID="container">
+      <Text>Content</Text>
+    </Container>
+  );
+
+  it('renders_children', () => {
+    const { getByText } = renderWithTheme(
+      <Container testID="container">
+        <Text>Hello</Text>
+      </Container>
+    );
+    expect(getByText('Hello')).toBeTruthy();
+  });
+
+  it('applies_maxWidth', () => {
+    const { getByTestId } = renderWithTheme(
+      <Container maxWidth={600} testID="container">
+        <Text>Content</Text>
+      </Container>
+    );
+    expect(getByTestId('container').props.style[1].maxWidth).toBe(600);
+  });
+
+  it('applies_custom_padding', () => {
+    const { getByTestId } = renderWithTheme(
+      <Container padding={32} testID="container">
+        <Text>Content</Text>
+      </Container>
+    );
+    expect(getByTestId('container').props.style[1].padding).toBe(32);
+  });
+
+  it('centers_whenCenteredProp', () => {
+    const { getByTestId } = renderWithTheme(
+      <Container centered testID="container">
+        <Text>Content</Text>
+      </Container>
+    );
+    expect(getByTestId('container').props.style[1].alignSelf).toBe('center');
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Container testID="container">
+          <Text>Test</Text>
+        </Container>,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Container testID="container">
+          <Text>Test</Text>
+        </Container>,
+        'dark'
+      );
+
+      const lightBg = lightResult.getByTestId('container').props.style[1].backgroundColor;
+      const darkBg = darkResult.getByTestId('container').props.style[1].backgroundColor;
+
+      expect(lightBg).not.toBe(darkBg);
+    });
+  });
+});

package/__tests__/Divider.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Divider } from '../src/Divider';
+
+describe('Divider', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(<Divider testID="divider" />);
+
+  describe('variants', () => {
+    it('renders_thin_variant_byDefault', () => {
+      const { getByTestId } = renderWithTheme(<Divider testID="divider" />);
+      expect(getByTestId('divider').props.style[1].height).toBe(1);
+    });
+
+    it('renders_thick_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Divider variant="thick" testID="divider" />
+      );
+      expect(getByTestId('divider').props.style[1].height).toBe(2);
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(<Divider testID="divider" />, 'light');
+      const darkResult = renderWithTheme(<Divider testID="divider" />, 'dark');
+
+      const lightColor = lightResult.getByTestId('divider').props.style[1].backgroundColor;
+      const darkColor = darkResult.getByTestId('divider').props.style[1].backgroundColor;
+
+      expect(lightColor).not.toBe(darkColor);
+    });
+  });
+
+  it('accepts_custom_color', () => {
+    const { getByTestId } = renderWithTheme(
+      <Divider color="#FF0000" testID="divider" />
+    );
+    expect(getByTestId('divider').props.style[1].backgroundColor).toBe('#FF0000');
+  });
+});

package/__tests__/Input.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Input } from '../src/Input';
+
+describe('Input', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <Input testID="input" placeholder="Enter text" />
+  );
+
+  it('renders_withLabel', () => {
+    const { getByText } = renderWithTheme(
+      <Input label="Email" testID="input" />
+    );
+    expect(getByText('Email')).toBeTruthy();
+  });
+
+  it('renders_withError', () => {
+    const { getByText } = renderWithTheme(
+      <Input error="This field is required" testID="input" />
+    );
+    expect(getByText('This field is required')).toBeTruthy();
+  });
+
+  it('renders_withPlaceholder', () => {
+    const { getByTestId } = renderWithTheme(
+      <Input placeholder="Enter email" testID="input" />
+    );
+    expect(getByTestId('input').props.placeholder).toBe('Enter email');
+  });
+
+  describe('interactions', () => {
+    it('calls_onChangeText_whenTyping', () => {
+      const mockOnChangeText = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <Input onChangeText={mockOnChangeText} testID="input" />
+      );
+
+      fireEvent.changeText(getByTestId('input'), 'hello');
+      expect(mockOnChangeText).toHaveBeenCalledWith('hello');
+    });
+
+    it('is_notEditable_whenDisabled', () => {
+      const { getByTestId } = renderWithTheme(
+        <Input disabled testID="input" />
+      );
+      expect(getByTestId('input').props.editable).toBe(false);
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Input testID="input" />,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Input testID="input" />,
+        'dark'
+      );
+
+      const lightBorder = lightResult.getByTestId('input').props.style[1].borderColor;
+      const darkBorder = darkResult.getByTestId('input').props.style[1].borderColor;
+
+      expect(lightBorder).not.toBe(darkBorder);
+    });
+  });
+});

package/__tests__/Stack.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { VStack, HStack } from '../src/Stack';
+
+describe('VStack', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <VStack testID="vstack" spacing="md">
+      <Text>Item 1</Text>
+      <Text>Item 2</Text>
+    </VStack>,
+    'VStack'
+  );
+
+  it('renders_children_vertically', () => {
+    const { getByTestId } = renderWithTheme(
+      <VStack testID="vstack">
+        <Text>Item 1</Text>
+        <Text>Item 2</Text>
+      </VStack>
+    );
+    expect(getByTestId('vstack').props.style[1].flexDirection).toBe('column');
+  });
+
+  it('applies_spacing', () => {
+    const { getByTestId } = renderWithTheme(
+      <VStack testID="vstack" spacing="md">
+        <Text>Item 1</Text>
+        <Text>Item 2</Text>
+      </VStack>
+    );
+    expect(getByTestId('vstack').props.style[1].gap).toBe(16); // md = 16
+  });
+
+  it('applies_alignment', () => {
+    const { getByTestId } = renderWithTheme(
+      <VStack testID="vstack" align="center">
+        <Text>Item</Text>
+      </VStack>
+    );
+    expect(getByTestId('vstack').props.style[1].alignItems).toBe('center');
+  });
+
+  it('applies_justification', () => {
+    const { getByTestId } = renderWithTheme(
+      <VStack testID="vstack" justify="space-between">
+        <Text>Item 1</Text>
+        <Text>Item 2</Text>
+      </VStack>
+    );
+    expect(getByTestId('vstack').props.style[1].justifyContent).toBe('space-between');
+  });
+});
+
+describe('HStack', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <HStack testID="hstack" spacing="sm">
+      <Text>Left</Text>
+      <Text>Right</Text>
+    </HStack>,
+    'HStack'
+  );
+
+  it('renders_children_horizontally', () => {
+    const { getByTestId } = renderWithTheme(
+      <HStack testID="hstack">
+        <Text>Left</Text>
+        <Text>Right</Text>
+      </HStack>
+    );
+    expect(getByTestId('hstack').props.style[1].flexDirection).toBe('row');
+  });
+
+  it('applies_spacing', () => {
+    const { getByTestId } = renderWithTheme(
+      <HStack testID="hstack" spacing="lg">
+        <Text>Left</Text>
+        <Text>Right</Text>
+      </HStack>
+    );
+    expect(getByTestId('hstack').props.style[1].gap).toBe(24); // lg = 24
+  });
+});