@astacinco/rn-primitives 0.1.0 → 0.2.0

package/README.md

@@ -172,6 +172,201 @@ Themed horizontal divider.
 - `variant` - `'thin' | 'thick'` (default: `'thin'`)
 - `color` - Override divider color
 
+### Switch
+
+Themed toggle switch.
+
+```typescript
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+/>
+
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+  label="Enable notifications"
+  labelPosition="right"
+  size="lg"
+/>
+```
+
+**Props:**
+- `value` - Current switch state (required)
+- `onValueChange` - Callback when toggled (required)
+- `label` - Optional label text
+- `labelPosition` - `'left' | 'right'` (default: `'right'`)
+- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)
+- `disabled` - Disable the switch
+- `activeColor` - Override active track color
+- `inactiveColor` - Override inactive track color
+
+### Avatar
+
+User avatar with image or fallback initials.
+
+```typescript
+// With image
+<Avatar
+  source={{ uri: 'https://example.com/photo.jpg' }}
+  size="md"
+/>
+
+// With fallback initials
+<Avatar
+  fallback="John Doe"
+  size="lg"
+/>
+```
+
+**Props:**
+- `source` - Image source (same as RN Image)
+- `fallback` - Name to generate initials from
+- `size` - `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)
+- `rounded` - Circular shape (default: `true`)
+- `borderWidth` - Border width in pixels
+- `customSize` - Override size with exact pixels
+
+### Badge
+
+Notification badge, positioned on children or standalone.
+
+```typescript
+// Count badge on avatar
+<Badge count={5} position="top-right">
+  <Avatar source={...} />
+</Badge>
+
+// Dot badge
+<Badge dot variant="error">
+  <Icon name="bell" />
+</Badge>
+
+// Standalone badge
+<Badge count={99} maxCount={99} standalone />
+```
+
+**Props:**
+- `count` - Number to display
+- `dot` - Show as dot instead of count
+- `variant` - `'default' | 'primary' | 'error' | 'success' | 'warning'`
+- `position` - `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'`
+- `size` - `'sm' | 'md' | 'lg'`
+- `maxCount` - Max number before showing "99+"
+- `showZero` - Show badge when count is 0
+- `standalone` - Render without positioning on children
+- `offset` - `[x, y]` fine-tune position
+
+### Tag
+
+Inline label for categories, status, or attributes.
+
+```typescript
+// Basic usage
+<Tag label="New" />
+
+// With color
+<Tag label="Success" color="success" />
+<Tag label="Warning" color="warning" />
+<Tag label="Error" color="error" />
+
+// Filled variant
+<Tag label="Active" color="primary" variant="filled" />
+
+// Sizes
+<Tag label="Small" size="sm" />
+<Tag label="Large" size="lg" />
+```
+
+**Props:**
+- `label` - Tag text (required)
+- `color` - `'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'`
+- `variant` - `'outlined' | 'filled'` (default: `'outlined'`)
+- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)
+
+### Timer
+
+Countdown timer with controls.
+
+```typescript
+// Basic timer
+<Timer durationMinutes={5} />
+
+// With callbacks
+<Timer
+  durationMinutes={90}
+  onStart={() => console.log('Started')}
+  onComplete={() => console.log('Done!')}
+  onPause={() => console.log('Paused')}
+  showProgress
+  showControls
+/>
+
+// Auto-start timer
+<Timer durationMinutes={60} autoStart />
+```
+
+**Props:**
+- `durationMinutes` - Timer duration in minutes (required)
+- `autoStart` - Start automatically (default: `false`)
+- `showControls` - Show start/pause/reset buttons (default: `true`)
+- `showProgress` - Show progress bar (default: `true`)
+- `lowTimeThreshold` - Seconds remaining for low-time warning (default: `300`)
+- `onStart` - Callback when timer starts
+- `onPause` - Callback when timer pauses
+- `onReset` - Callback when timer resets
+- `onComplete` - Callback when timer reaches zero
+- `onTick` - Callback each second with remaining time
+
+### Tabs
+
+Horizontal tab selector.
+
+```typescript
+const options = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'completed', label: 'Completed' },
+];
+
+<Tabs
+  options={options}
+  selected={selectedTab}
+  onSelect={setSelectedTab}
+/>
+
+// Variants
+<Tabs options={options} selected={tab} onSelect={setTab} variant="pills" />
+<Tabs options={options} selected={tab} onSelect={setTab} variant="outlined" />
+<Tabs options={options} selected={tab} onSelect={setTab} variant="filled" />
+
+// Sizes
+<Tabs options={options} selected={tab} onSelect={setTab} size="sm" />
+<Tabs options={options} selected={tab} onSelect={setTab} size="lg" />
+```
+
+**Props:**
+- `options` - Array of `{ value: T, label: string }` (required)
+- `selected` - Currently selected value (required)
+- `onSelect` - Callback when tab is selected (required)
+- `variant` - `'pills' | 'outlined' | 'filled'` (default: `'pills'`)
+- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)
+- `scrollable` - Enable horizontal scrolling (default: `true`)
+
+### MarkdownViewer
+
+Render markdown content with theme styling.
+
+```typescript
+<MarkdownViewer content="# Hello\n\nThis is **bold** text." />
+```
+
+**Props:**
+- `content` - Markdown string to render (required)
+- `style` - Override container style
+
+**Note:** Requires `react-native-markdown-display` as an optional peer dependency. Falls back to plain text if not installed.
+
 ## Theme Integration
 
 All components use the `useTheme()` hook from `@astacinco/rn-theming`. They automatically:

package/__tests__/Tabs.test.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Tabs, type TabOption } from '../src/Tabs';
+
+const mockOptions: TabOption<string>[] = [
+  { value: 'tab1', label: 'Tab 1' },
+  { value: 'tab2', label: 'Tab 2' },
+  { value: 'tab3', label: 'Tab 3' },
+];
+
+describe('Tabs', () => {
+  const mockOnSelect = jest.fn();
+
+  beforeEach(() => {
+    mockOnSelect.mockClear();
+  });
+
+  // Snapshot tests for both themes
+  createThemeSnapshot(
+    <Tabs
+      options={mockOptions}
+      selected="tab1"
+      onSelect={() => {}}
+      testID="tabs"
+    />
+  );
+
+  describe('rendering', () => {
+    it('renders_all_tabs', () => {
+      const { getByText } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+
+      expect(getByText('Tab 1')).toBeTruthy();
+      expect(getByText('Tab 2')).toBeTruthy();
+      expect(getByText('Tab 3')).toBeTruthy();
+    });
+
+    it('highlights_selected_tab', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab2"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+  });
+
+  describe('variants', () => {
+    it('renders_pills_variant_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+
+    it('renders_outlined_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          variant="outlined"
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+
+    it('renders_filled_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          variant="filled"
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+  });
+
+  describe('sizes', () => {
+    it('renders_sm_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          size="sm"
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+
+    it('renders_md_size_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+
+    it('renders_lg_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          size="lg"
+          testID="tabs"
+        />
+      );
+      expect(getByTestId('tabs')).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    it('calls_onSelect_when_tab_pressed', () => {
+      const { getByText } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+
+      fireEvent.press(getByText('Tab 2'));
+      expect(mockOnSelect).toHaveBeenCalledWith('tab2');
+    });
+
+    it('calls_onSelect_with_correct_value', () => {
+      const { getByText } = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />
+      );
+
+      fireEvent.press(getByText('Tab 3'));
+      expect(mockOnSelect).toHaveBeenCalledWith('tab3');
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Tabs
+          options={mockOptions}
+          selected="tab1"
+          onSelect={mockOnSelect}
+          testID="tabs"
+        />,
+        'dark'
+      );
+
+      expect(lightResult.getByTestId('tabs')).toBeTruthy();
+      expect(darkResult.getByTestId('tabs')).toBeTruthy();
+    });
+  });
+});

package/__tests__/Tag.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Tag } from '../src/Tag';
+
+describe('Tag', () => {
+  // Snapshot tests for both themes
+  createThemeSnapshot(<Tag label="Default Tag" testID="tag" />);
+
+  describe('colors', () => {
+    it('renders_default_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Default" color="default" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_primary_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Primary" color="primary" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_success_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Success" color="success" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_warning_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Warning" color="warning" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_error_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Error" color="error" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_info_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Info" color="info" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_secondary_color', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Secondary" color="secondary" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+  });
+
+  describe('variants', () => {
+    it('renders_outlined_variant_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Outlined" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_filled_variant', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Filled" variant="filled" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+  });
+
+  describe('sizes', () => {
+    it('renders_sm_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Small" size="sm" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_md_size_byDefault', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Medium" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+
+    it('renders_lg_size', () => {
+      const { getByTestId } = renderWithTheme(
+        <Tag label="Large" size="lg" testID="tag" />
+      );
+      expect(getByTestId('tag')).toBeTruthy();
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Tag label="Test" testID="tag" />,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Tag label="Test" testID="tag" />,
+        'dark'
+      );
+
+      expect(lightResult.getByTestId('tag')).toBeTruthy();
+      expect(darkResult.getByTestId('tag')).toBeTruthy();
+    });
+  });
+
+  describe('label', () => {
+    it('renders_label_text', () => {
+      const { getByText } = renderWithTheme(
+        <Tag label="My Tag Label" testID="tag" />
+      );
+      expect(getByText('My Tag Label')).toBeTruthy();
+    });
+  });
+});