@astacinco/rn-primitives 0.1.0 → 0.2.0

package/__tests__/Timer.test.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { fireEvent, act } from '@testing-library/react-native';
+import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
+import { Timer } from '../src/Timer';
+
+describe('Timer', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  // Snapshot tests for both themes
+  createThemeSnapshot(<Timer durationMinutes={5} testID="timer" />);
+
+  describe('rendering', () => {
+    it('renders_initial_time', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} testID="timer" />
+      );
+
+      expect(getByText('05:00')).toBeTruthy();
+    });
+
+    it('renders_controls_by_default', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls testID="timer" />
+      );
+
+      expect(getByText('Start')).toBeTruthy();
+    });
+
+    it('hides_controls_when_showControls_false', () => {
+      const { queryByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls={false} testID="timer" />
+      );
+
+      expect(queryByText('Start')).toBeNull();
+    });
+  });
+
+  describe('timer_display', () => {
+    it('shows_correct_format_for_minutes', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={90} testID="timer" />
+      );
+
+      expect(getByText('90:00')).toBeTruthy();
+    });
+
+    it('shows_correct_format_for_1_minute', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={1} testID="timer" />
+      );
+
+      expect(getByText('01:00')).toBeTruthy();
+    });
+  });
+
+  describe('controls', () => {
+    it('shows_Start_button_initially', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls testID="timer" />
+      );
+
+      expect(getByText('Start')).toBeTruthy();
+    });
+
+    it('shows_Pause_button_when_running', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      expect(getByText('Pause')).toBeTruthy();
+    });
+
+    it('shows_Resume_button_when_paused', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      fireEvent.press(getByText('Pause'));
+      expect(getByText('Resume')).toBeTruthy();
+    });
+
+    it('shows_Reset_button_when_not_idle', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      expect(getByText('Reset')).toBeTruthy();
+    });
+  });
+
+  describe('callbacks', () => {
+    it('calls_onStart_when_started', () => {
+      const mockOnStart = jest.fn();
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} onStart={mockOnStart} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      expect(mockOnStart).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls_onPause_when_paused', () => {
+      const mockOnPause = jest.fn();
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} onPause={mockOnPause} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      fireEvent.press(getByText('Pause'));
+      expect(mockOnPause).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls_onReset_when_reset', () => {
+      const mockOnReset = jest.fn();
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={5} onReset={mockOnReset} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+      fireEvent.press(getByText('Reset'));
+      expect(mockOnReset).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('countdown', () => {
+    it('counts_down_when_running', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={1} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      expect(getByText('00:59')).toBeTruthy();
+    });
+
+    it('resets_to_initial_time_when_reset', () => {
+      const { getByText } = renderWithTheme(
+        <Timer durationMinutes={1} showControls testID="timer" />
+      );
+
+      fireEvent.press(getByText('Start'));
+
+      act(() => {
+        jest.advanceTimersByTime(5000);
+      });
+
+      fireEvent.press(getByText('Reset'));
+      expect(getByText('01:00')).toBeTruthy();
+    });
+  });
+
+  describe('autoStart', () => {
+    it('starts_automatically_when_autoStart_true', () => {
+      const mockOnStart = jest.fn();
+      const { getByText } = renderWithTheme(
+        <Timer
+          durationMinutes={1}
+          autoStart
+          onStart={mockOnStart}
+          showControls
+          testID="timer"
+        />
+      );
+
+      expect(mockOnStart).toHaveBeenCalledTimes(1);
+      expect(getByText('Pause')).toBeTruthy();
+    });
+  });
+
+  describe('progress', () => {
+    it('shows_progress_when_showProgress_true', () => {
+      const { getByTestId } = renderWithTheme(
+        <Timer durationMinutes={5} showProgress testID="timer" />
+      );
+
+      expect(getByTestId('timer')).toBeTruthy();
+    });
+  });
+
+  describe('theming', () => {
+    it('uses_different_colors_inDarkMode', () => {
+      const lightResult = renderWithTheme(
+        <Timer durationMinutes={5} testID="timer" />,
+        'light'
+      );
+      const darkResult = renderWithTheme(
+        <Timer durationMinutes={5} testID="timer" />,
+        'dark'
+      );
+
+      expect(lightResult.getByTestId('timer')).toBeTruthy();
+      expect(darkResult.getByTestId('timer')).toBeTruthy();
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astacinco/rn-primitives",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Theme-aware UI primitives for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -21,7 +21,13 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "react-native-markdown-display": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-markdown-display": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@astacinco/rn-theming": "*"
@@ -29,10 +35,8 @@
   "devDependencies": {
     "@astacinco/rn-testing": "*",
     "@testing-library/react-native": "^12.4.3",
-    "@types/react": "^18.2.48",
-    "react": "18.2.0",
-    "react-native": "0.73.4",
-    "react-test-renderer": "18.2.0",
+    "@types/react": "~19.1.0",
+    "react-test-renderer": "19.1.0",
     "typescript": "^5.3.3"
   },
   "keywords": [

package/src/AppFooter/AppFooter.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { View, StyleSheet, Pressable, Linking } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import { HStack } from '../Stack';
+import type { AppFooterProps } from './types';
+
+/**
+ * AppFooter - Consistent footer across apps
+ *
+ * Features:
+ * - SparkLabs branding with Patreon link
+ * - Social links (GitHub, YouTube, etc.)
+ * - Copyright
+ * - Optional version info
+ */
+export function AppFooter({
+  showPatreonLink = true,
+  showGitHub = true,
+  showCopyright = true,
+  version,
+  customLinks,
+  testID,
+}: AppFooterProps) {
+  const { colors, spacing } = useTheme();
+
+  const handleLink = (url: string) => {
+    Linking.openURL(url);
+  };
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface,
+          borderTopColor: colors.border,
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.md,
+        },
+      ]}
+    >
+      {/* Links Row */}
+      <HStack justify="center" spacing="lg" style={styles.linksRow}>
+        {showPatreonLink && (
+          <Pressable onPress={() => handleLink('https://patreon.com/SparkLabs343')}>
+            <Text variant="caption" color={colors.primary}>
+              ⚡ SparkLabs343
+            </Text>
+          </Pressable>
+        )}
+
+        {showGitHub && (
+          <Pressable onPress={() => handleLink('https://github.com/jrudydev')}>
+            <Text variant="caption" color={colors.textSecondary}>
+              GitHub
+            </Text>
+          </Pressable>
+        )}
+
+        {customLinks?.map((link, index) => (
+          <Pressable key={index} onPress={() => handleLink(link.url)}>
+            <Text variant="caption" color={colors.textSecondary}>
+              {link.label}
+            </Text>
+          </Pressable>
+        ))}
+      </HStack>
+
+      {/* Bottom Row */}
+      <HStack justify="center" spacing="sm" style={styles.bottomRow}>
+        {showCopyright && (
+          <Text variant="caption" color={colors.textMuted}>
+            © {new Date().getFullYear()} Rudy Gomez
+          </Text>
+        )}
+
+        {version && (
+          <Text variant="caption" color={colors.textMuted}>
+            · v{version}
+          </Text>
+        )}
+      </HStack>
+
+      {/* Powered by */}
+      <View style={styles.poweredBy}>
+        <Text variant="caption" color={colors.textMuted} style={styles.poweredByText}>
+          Built with @astacinco packages
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: 1,
+  },
+  linksRow: {
+    marginBottom: 8,
+  },
+  bottomRow: {
+    marginBottom: 4,
+  },
+  poweredBy: {
+    alignItems: 'center',
+  },
+  poweredByText: {
+    fontSize: 10,
+    letterSpacing: 1,
+  },
+});

package/src/AppFooter/index.ts

@@ -0,0 +1,2 @@
+export { AppFooter } from './AppFooter';
+export type { AppFooterProps, FooterLink } from './types';

package/src/AppFooter/types.ts

@@ -0,0 +1,39 @@
+export interface FooterLink {
+  label: string;
+  url: string;
+}
+
+export interface AppFooterProps {
+  /**
+   * Show Patreon/SparkLabs link
+   * @default true
+   */
+  showPatreonLink?: boolean;
+
+  /**
+   * Show GitHub link
+   * @default true
+   */
+  showGitHub?: boolean;
+
+  /**
+   * Show copyright
+   * @default true
+   */
+  showCopyright?: boolean;
+
+  /**
+   * App version to display
+   */
+  version?: string;
+
+  /**
+   * Custom links to display
+   */
+  customLinks?: FooterLink[];
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/AppHeader/AppHeader.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import { HStack } from '../Stack';
+import { Avatar } from '../Avatar';
+import type { AppHeaderProps } from './types';
+
+/**
+ * AppHeader - Consistent header across apps
+ *
+ * Features:
+ * - App title with optional glow effect
+ * - Theme variant toggle (default/sparklabs)
+ * - Theme mode toggle (light/dark)
+ * - Optional profile button (top right)
+ * - Optional custom actions
+ */
+export function AppHeader({
+  title = 'SparkLabs',
+  subtitle,
+  showThemeToggle = true,
+  showThemeVariant = false,
+  themeVariant = 'default',
+  onThemeVariantChange,
+  onThemeChange,
+  showProfile = false,
+  profileImageUrl,
+  profileFallback = '?',
+  onProfilePress,
+  glow = false,
+  actions,
+  testID,
+}: AppHeaderProps) {
+  const { colors, mode, setMode, spacing } = useTheme();
+
+  const handleThemeToggle = () => {
+    const newMode = mode === 'light' ? 'dark' : 'light';
+    setMode(newMode);
+    onThemeChange?.(newMode);
+  };
+
+  const handleThemeVariantToggle = () => {
+    const newVariant = themeVariant === 'default' ? 'sparklabs' : 'default';
+    onThemeVariantChange?.(newVariant);
+  };
+
+  const glowStyle = glow && mode === 'dark' ? {
+    textShadowColor: colors.primary,
+    textShadowOffset: { width: 0, height: 0 },
+    textShadowRadius: 10,
+  } : {};
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface,
+          borderBottomColor: colors.border,
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.sm,
+        },
+      ]}
+    >
+      <HStack justify="space-between" align="center">
+        {/* Left: Title */}
+        <View style={styles.titleContainer}>
+          <Text
+            variant="subtitle"
+            style={[
+              styles.title,
+              glowStyle,
+              { color: glow && mode === 'dark' ? colors.primary : colors.text },
+            ]}
+          >
+            {title}
+          </Text>
+          {subtitle && (
+            <Text variant="caption" color={colors.textMuted}>
+              {subtitle}
+            </Text>
+          )}
+        </View>
+
+        {/* Right: Actions */}
+        <HStack spacing="sm" align="center">
+          {/* Custom actions */}
+          {actions}
+
+          {/* Theme variant toggle */}
+          {showThemeVariant && (
+            <Pressable
+              onPress={handleThemeVariantToggle}
+              style={({ pressed }) => [
+                styles.iconButton,
+                {
+                  backgroundColor: pressed ? colors.backgroundSecondary : 'transparent',
+                  borderColor: colors.border,
+                },
+              ]}
+              accessibilityLabel={`Switch to ${themeVariant === 'default' ? 'SparkLabs' : 'Default'} theme`}
+              accessibilityRole="button"
+            >
+              <Text variant="caption" color={colors.primary}>
+                {themeVariant === 'default' ? '✨ Spark' : '🎨 Default'}
+              </Text>
+            </Pressable>
+          )}
+
+          {/* Light/dark mode toggle */}
+          {showThemeToggle && (
+            <Pressable
+              onPress={handleThemeToggle}
+              style={({ pressed }) => [
+                styles.iconButton,
+                {
+                  backgroundColor: pressed ? colors.backgroundSecondary : 'transparent',
+                  borderColor: colors.border,
+                },
+              ]}
+              accessibilityLabel={`Switch to ${mode === 'light' ? 'dark' : 'light'} mode`}
+              accessibilityRole="button"
+            >
+              <Text variant="body">
+                {mode === 'light' ? '🌙' : '☀️'}
+              </Text>
+            </Pressable>
+          )}
+
+          {/* Profile button */}
+          {showProfile && (
+            <Pressable onPress={onProfilePress}>
+              <Avatar
+                source={profileImageUrl ? { uri: profileImageUrl } : undefined}
+                fallback={profileFallback}
+                size="sm"
+              />
+            </Pressable>
+          )}
+        </HStack>
+      </HStack>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderBottomWidth: 1,
+  },
+  titleContainer: {
+    flexDirection: 'column',
+  },
+  title: {
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  iconButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+  },
+});

package/src/AppHeader/index.ts

@@ -0,0 +1,2 @@
+export { AppHeader } from './AppHeader';
+export type { AppHeaderProps, ThemeVariant } from './types';

package/src/AppHeader/types.ts

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react';
+import type { ResolvedThemeMode } from '@astacinco/rn-theming';
+
+export type ThemeVariant = 'default' | 'sparklabs';
+
+export interface AppHeaderProps {
+  /**
+   * App title displayed in the header
+   * @default 'SparkLabs'
+   */
+  title?: string;
+
+  /**
+   * Optional subtitle below the title
+   */
+  subtitle?: string;
+
+  /**
+   * Show light/dark mode toggle
+   * @default true
+   */
+  showThemeToggle?: boolean;
+
+  /**
+   * Show theme variant toggle (default/sparklabs)
+   * @default false
+   */
+  showThemeVariant?: boolean;
+
+  /**
+   * Current theme variant (required if showThemeVariant is true)
+   */
+  themeVariant?: ThemeVariant;
+
+  /**
+   * Callback when theme variant changes
+   */
+  onThemeVariantChange?: (variant: ThemeVariant) => void;
+
+  /**
+   * Callback when theme mode changes
+   */
+  onThemeChange?: (mode: ResolvedThemeMode) => void;
+
+  /**
+   * Show profile button (top right)
+   * @default false
+   */
+  showProfile?: boolean;
+
+  /**
+   * Profile button image URL (optional, shows initials/? if not provided)
+   */
+  profileImageUrl?: string;
+
+  /**
+   * Profile fallback text (initials or ?)
+   * @default '?'
+   */
+  profileFallback?: string;
+
+  /**
+   * Callback when profile button is pressed
+   */
+  onProfilePress?: () => void;
+
+  /**
+   * Enable glow effect on title (SparkLabs aesthetic)
+   * @default false
+   */
+  glow?: boolean;
+
+  /**
+   * Custom action buttons to display (in addition to built-in actions)
+   */
+  actions?: ReactNode;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}