@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/es/ReactNative/commands/check-testing.md

@@ -0,0 +1,258 @@
+---
+description: Verificación de Testing
+---
+
+# Verificación de Testing
+
+Verifica la cobertura y calidad de los tests en React Native.
+
+## 1. Ejecutar Tests
+
+```bash
+# Todos los tests
+npm test
+
+# En modo watch
+npm test -- --watch
+
+# Con cobertura
+npm test -- --coverage
+
+# Tests específicos
+npm test -- UserProfile
+```
+
+## 2. Análisis de Cobertura
+
+```bash
+# Generar reporte de cobertura
+npm test -- --coverage
+
+# Ver reporte HTML
+open coverage/lcov-report/index.html
+```
+
+**Objetivos de Cobertura:**
+- Statements: > 80%
+- Branches: > 80%
+- Functions: > 80%
+- Lines: > 80%
+
+## 3. Tipos de Tests
+
+### Tests Unitarios
+
+```typescript
+// Component.test.tsx
+describe('Button', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Button>Click me</Button>);
+    expect(getByText('Click me')).toBeTruthy();
+  });
+});
+```
+
+**Checklist:**
+- [ ] Componentes críticos testeados
+- [ ] Hooks personalizados testeados
+- [ ] Utils y helpers testeados
+- [ ] Edge cases cubiertos
+
+### Tests de Integración
+
+```typescript
+// Feature.integration.test.tsx
+describe('User Flow', () => {
+  it('completes registration', async () => {
+    const { getByText, getByPlaceholder } = render(<App />);
+
+    // Navegar a registro
+    fireEvent.press(getByText('Sign Up'));
+
+    // Llenar formulario
+    fireEvent.changeText(getByPlaceholder('Email'), 'user@test.com');
+
+    // Submit
+    fireEvent.press(getByText('Submit'));
+
+    // Verificar
+    await waitFor(() => {
+      expect(getByText('Welcome')).toBeTruthy();
+    });
+  });
+});
+```
+
+**Checklist:**
+- [ ] Flujos de usuario críticos testeados
+- [ ] Navegación testeada
+- [ ] Formularios completos testeados
+- [ ] Integración con APIs mockeada
+
+### Tests E2E (Detox)
+
+```typescript
+// e2e/login.e2e.ts
+describe('Login Flow', () => {
+  it('should login successfully', async () => {
+    await element(by.id('email-input')).typeText('user@example.com');
+    await element(by.id('password-input')).typeText('password123');
+    await element(by.id('login-button')).tap();
+
+    await waitFor(element(by.text('Dashboard')))
+      .toBeVisible()
+      .withTimeout(5000);
+  });
+});
+```
+
+**Checklist:**
+- [ ] Flujos críticos E2E
+- [ ] Login/Logout
+- [ ] Flujos de compra/reserva
+- [ ] Configuración Detox correcta
+
+## 4. Calidad de los Tests
+
+### Buenos Tests
+
+```typescript
+// ✅ BIEN - Descripción clara, AAA pattern
+describe('UserProfile', () => {
+  it('displays user name after successful fetch', async () => {
+    // Arrange
+    const mockUser = { name: 'John Doe' };
+    server.use(
+      http.get('/api/user', () => HttpResponse.json(mockUser))
+    );
+
+    // Act
+    const { findByText } = render(<UserProfile />);
+
+    // Assert
+    const nameElement = await findByText('John Doe');
+    expect(nameElement).toBeTruthy();
+  });
+});
+```
+
+**Checklist:**
+- [ ] Nombres descriptivos
+- [ ] Patrón AAA (Arrange, Act, Assert)
+- [ ] Un solo concepto por test
+- [ ] Tests independientes
+- [ ] Sin lógica compleja en tests
+
+## 5. Mocking
+
+```typescript
+// Mock de módulos
+jest.mock('@/services/api', () => ({
+  fetchUser: jest.fn()
+}));
+
+// Mock de hooks
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({
+    navigate: jest.fn()
+  })
+}));
+
+// Mock de AsyncStorage
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);
+```
+
+**Checklist:**
+- [ ] APIs mockeadas con MSW
+- [ ] AsyncStorage mockeado
+- [ ] Navigation mockeada
+- [ ] Módulos nativos mockeados
+
+## 6. Snapshot Tests
+
+```typescript
+it('matches snapshot', () => {
+  const tree = renderer
+    .create(<Button variant="primary">Click me</Button>)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+```
+
+**Checklist:**
+- [ ] Componentes UI críticos con snapshots
+- [ ] Snapshots actualizados regularmente
+- [ ] Cambios de snapshot revisados
+- [ ] No abusar de snapshots
+
+## 7. Tests de Performance
+
+```typescript
+it('renders large list efficiently', () => {
+  const items = Array.from({ length: 1000 }, (_, i) => ({ id: i }));
+
+  const start = performance.now();
+  render(<ItemList items={items} />);
+  const end = performance.now();
+
+  expect(end - start).toBeLessThan(100); // menos de 100ms
+});
+```
+
+## 8. Reporte de Tests
+
+```bash
+# Ver reporte de cobertura
+npm test -- --coverage
+
+# Ver tests fallidos
+npm test -- --onlyFailures
+
+# Ver tests lentos
+npm test -- --verbose
+```
+
+## Métricas Clave
+
+| Métrica | Objetivo | Actual |
+|---------|----------|--------|
+| Cobertura Total | > 80% | ___% |
+| Tests Unitarios | > 500 | ___ |
+| Tests Integración | > 50 | ___ |
+| Tests E2E | > 10 | ___ |
+| Tiempo Ejecución | < 5 min | ___ |
+
+## Problemas Comunes
+
+### Tests Lentos
+```bash
+# Identificar tests lentos
+npm test -- --verbose
+
+# Usar test.concurrent para paralelizar
+it.concurrent('test 1', async () => {});
+```
+
+### Tests Flaky
+- Usar waitFor para esperas asíncronas
+- No usar timeouts arbitrarios
+- Mockear APIs correctamente
+- Limpiar estado entre tests
+
+### Baja Cobertura
+- Identificar archivos sin cobertura
+- Priorizar componentes críticos
+- Escribir tests antes del código (TDD)
+- Refactorizar código no testeable
+
+## Reporte Final
+
+**Estado de Testing:**
+- [ ] Cobertura > 80%
+- [ ] Todos los tests pasando
+- [ ] Sin tests flaky
+- [ ] Tests rápidos (< 5 min)
+- [ ] CI/CD configurado
+- [ ] Tests E2E funcionando

package/Dev/i18n/es/ReactNative/commands/deep-link.md

@@ -0,0 +1,132 @@
+---
+description: Generación de Deep Link
+---
+
+# Generación de Deep Link
+
+Crea e implementa deep links para la aplicación React Native.
+
+## Deep Link Estructura
+
+```
+# URL Scheme
+myapp://screen/id
+
+# Universal Links (iOS)
+https://myapp.com/screen/id
+
+# App Links (Android)
+https://myapp.com/screen/id
+```
+
+## 1. Configuración Expo
+
+```typescript
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "ios": {
+      "associatedDomains": ["applinks:myapp.com"]
+    },
+    "android": {
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "autoVerify": true,
+          "data": [
+            {
+              "scheme": "https",
+              "host": "myapp.com",
+              "pathPrefix": "/"
+            }
+          ],
+          "category": ["BROWSABLE", "DEFAULT"]
+        }
+      ]
+    }
+  }
+}
+```
+
+## 2. Manejo de Deep Links
+
+```typescript
+import * as Linking from 'expo-linking';
+import { useURL } from 'expo-linking';
+
+// Hook personalizado
+export const useDeepLink = () => {
+  const url = useURL();
+
+  useEffect(() => {
+    if (url) {
+      handleDeepLink(url);
+    }
+  }, [url]);
+
+  const handleDeepLink = (url: string) => {
+    const { hostname, path, queryParams } = Linking.parse(url);
+
+    // Navegar según la URL
+    if (path === 'product') {
+      navigation.navigate('Product', { id: queryParams.id });
+    }
+  };
+};
+```
+
+## 3. Generación de Deep Links
+
+```typescript
+// Crear deep link
+const createDeepLink = (screen: string, params?: object) => {
+  return Linking.createURL(screen, { queryParams: params });
+};
+
+// Ejemplo
+const productLink = createDeepLink('product', { id: '123' });
+// Result: myapp://product?id=123
+
+// Compartir
+await Share.share({
+  message: 'Check out this product!',
+  url: productLink
+});
+```
+
+## 4. Testing
+
+```bash
+# iOS
+xcrun simctl openurl booted "myapp://product?id=123"
+
+# Android
+adb shell am start -W -a android.intent.action.VIEW -d "myapp://product?id=123"
+
+# Universal Links
+adb shell am start -W -a android.intent.action.VIEW -d "https://myapp.com/product/123"
+```
+
+## 5. Validación
+
+```typescript
+// Validar deep link
+const isValidDeepLink = (url: string): boolean => {
+  const validSchemes = ['myapp', 'https'];
+  const validHosts = ['myapp.com'];
+
+  const { scheme, hostname } = Linking.parse(url);
+
+  return validSchemes.includes(scheme) &&
+         (!hostname || validHosts.includes(hostname));
+};
+```
+
+## Casos de Uso
+
+- Notificaciones push
+- Compartir contenido
+- Email marketing
+- QR codes
+- Redes sociales

package/Dev/i18n/es/ReactNative/commands/generate-screen.md

@@ -0,0 +1,157 @@
+---
+description: Generación de Screen
+---
+
+# Generación de Screen
+
+Genera una nueva screen con toda su estructura.
+
+## Estructura de Screen
+
+```
+app/
+└── (tabs)/
+    └── profile.tsx          # Screen principal
+
+src/
+└── features/
+    └── profile/
+        ├── components/
+        │   ├── ProfileHeader.tsx
+        │   └── ProfileStats.tsx
+        ├── hooks/
+        │   └── useProfile.ts
+        └── types/
+            └── profile.types.ts
+```
+
+## Template de Screen
+
+```typescript
+// app/(tabs)/profile.tsx
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Stack } from 'expo-router';
+
+import { ProfileHeader } from '@/features/profile/components/ProfileHeader';
+import { ProfileStats } from '@/features/profile/components/ProfileStats';
+import { useProfile } from '@/features/profile/hooks/useProfile';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { ErrorMessage } from '@/components/shared/ErrorMessage';
+
+export default function ProfileScreen() {
+  const { data: profile, isLoading, error } = useProfile();
+
+  if (isLoading) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <LoadingSpinner />
+      </SafeAreaView>
+    );
+  }
+
+  if (error) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <ErrorMessage error={error} />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Stack.Screen
+        options={{
+          title: 'Profile',
+          headerShown: true
+        }}
+      />
+
+      <ScrollView contentContainerStyle={styles.content}>
+        <ProfileHeader profile={profile} />
+        <ProfileStats profile={profile} />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  content: {
+    padding: 16
+  }
+});
+```
+
+## Hook de Datos
+
+```typescript
+// src/features/profile/hooks/useProfile.ts
+import { useQuery } from '@tanstack/react-query';
+import { profileService } from '@/services/profile.service';
+
+export const useProfile = () => {
+  return useQuery({
+    queryKey: ['profile'],
+    queryFn: () => profileService.getProfile()
+  });
+};
+```
+
+## Tests
+
+```typescript
+// __tests__/screens/ProfileScreen.test.tsx
+import { render, screen } from '@testing-library/react-native';
+import ProfileScreen from '@/app/(tabs)/profile';
+
+describe('ProfileScreen', () => {
+  it('renders loading state', () => {
+    const { getByTestId } = render(<ProfileScreen />);
+    expect(getByTestId('loading-spinner')).toBeTruthy();
+  });
+
+  it('renders profile data', async () => {
+    const { findByText } = render(<ProfileScreen />);
+    expect(await findByText('John Doe')).toBeTruthy();
+  });
+});
+```
+
+## Opciones de Screen
+
+```typescript
+// Configurar header
+<Stack.Screen
+  options={{
+    title: 'Profile',
+    headerShown: true,
+    headerRight: () => <Button>Edit</Button>,
+    headerStyle: {
+      backgroundColor: '#f4f4f4'
+    }
+  }}
+/>
+
+// Screen modal
+<Stack.Screen
+  options={{
+    presentation: 'modal',
+    title: 'Edit Profile'
+  }}
+/>
+```
+
+## Checklist
+
+- [ ] Screen creada en app/
+- [ ] Componentes en features/
+- [ ] Hook de datos
+- [ ] Tipos definidos
+- [ ] Loading state
+- [ ] Error state
+- [ ] Tests agregados
+- [ ] Navegación configurada