Добавление новой фичи

Пошаговый гайд по добавлению нового feature-модуля в saas-mobile.

1. Создать директорию фичи

src/features/{feature-name}/
├── hooks/              # React хуки фичи
├── stores/             # Zustand stores (если нужен клиентский стейт)
├── ui/                 # UI-компоненты фичи
└── types.ts            # Типы (если не покрываются saas-api/types.ts)

2. Добавить API-методы

Добавить методы в src/features/saas-api/client.ts:

// В классе SaasApiClient
async getItems(companyId: string, pagination?: IPagination) {
  return this.request<IItemsResponse>(`/companies/${companyId}/items`, {
    params: pagination,
  });
}

async createItem(payload: ICreateItemPayload) {
  return this.request<IItem>('/items', {
    method: 'POST',
    body: payload,
  });
}

Типы добавить в src/features/saas-api/types.ts.

3. Создать экраны

Добавить файлы в app/(app)/:

app/(app)/{feature-name}/
├── index.tsx           # Список
├── [id].tsx            # Детали (если нужно)
└── create.tsx          # Создание (если нужно)

4. Добавить Zustand store (если нужно)

// src/features/{feature-name}/stores/featureStore.ts
import { create } from 'zustand';

interface FeatureState {
  items: Item[];
  setItems: (items: Item[]) => void;
}

export const useFeatureStore = create<FeatureState>((set) => ({
  items: [],
  setItems: (items) => set({ items }),
}));

Для персистенции добавить persist middleware:

import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useFeatureStore = create<FeatureState>()(
  persist(
    (set) => ({
      items: [],
      setItems: (items) => set({ items }),
    }),
    {
      name: 'feature-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

5. Добавить TanStack Query хуки

// src/features/{feature-name}/hooks/useItems.ts
import { useQuery } from '@tanstack/react-query';
import { saasApi } from '../../saas-api/client';

export function useItems(companyId: string) {
  return useQuery({
    queryKey: ['items', companyId],
    queryFn: () => saasApi.getItems(companyId),
    enabled: !!companyId,
  });
}

6. Добавить навигацию

Если нужен таб — добавить в (tabs)/_layout.tsx. Если экран из меню — добавить ссылку в соответствующий экран.

7. Добавить WebSocket обработчики (если real-time)

// В хуке или компоненте
useEffect(() => {
  const handler = (data) => {
    useFeatureStore.getState().updateItem(data);
  };
  wsClient.on('item:updated', handler);
  return () => wsClient.off('item:updated', handler);
}, []);

8. Добавить haptic feedback

Использовать HapticService из src/lib/haptics.ts:

import { HapticService } from '../../lib/haptics';

HapticService.impactLight();     // Нажатие, отправка
HapticService.impactMedium();    // Long press
HapticService.selectionAsync();  // Переключение, swipe
HapticService.notificationSuccess(); // Успешное действие
HapticService.notificationWarning(); // Удаление

Чеклист

• [ ] API-методы в saas-api/client.ts
• [ ] Типы в saas-api/types.ts
• [ ] Экраны в app/(app)/
• [ ] UI-компоненты в src/features/{name}/ui/
• [ ] Zustand store (если нужен)
• [ ] TanStack Query хуки
• [ ] WebSocket обработчики (если real-time)
• [ ] Haptic feedback
• [ ] i18n переводы
• [ ] Навигация (таб или ссылка)