@mohantn/gate-keeper 2.2.3 → 2.2.4

package/.github/instructions/react-development.instructions.md

@@ -1,315 +0,0 @@
-# React 17 Development Instructions
-
-**Scope**: All `.tsx`/`.ts` files | **Version**: 3.0 | **Tags**: `react`, `typescript`, `hooks`, `emotion`, `react-query`
-
-**Related Files**: See [react-testing-optimization.instructions.md](./react-testing-optimization.instructions.md) for testing & optimization
-
-## 🔴 MANDATORY: Import Organization
-Group: **React** → **Third-party** → **dh-component-library/store-components** → **Local Components** → **Hooks** → **Utils/API** → **Types**
-
-```typescript
-import { useState, useCallback } from 'react';
-import { useQuery } from 'react-query';
-import styled from '@emotion/styled';
-import { Button, Flex } from 'dh-component-library';
-import { PageCard } from 'store-components';
-import { FormElementText } from 'src/Components/Forms/FormElements';
-import { useGetActivationPrice } from 'src/Hooks/query/pricingData';
-import { activationPrice } from 'src/api';
-import { t } from 'src/I18n';
-import { Activation, ThemeType } from 'src/types';
-```
-
-## Core Patterns
-
-| Pattern | Usage |
-|---------|-------|
-| **Functional Components** | `export function Component({ prop }: Props)` OR `const Component: React.FC<Props>` |
-| **Emotion Styling** | `styled(Component)<Props>(({ theme }) => ({ ... }))` with ThemeType |
-| **React Query v3** | `useQuery(['key', id, adAccountId], fn, { onError: onErrorPopToast })` |
-| **Context Providers** | Cascade: Theme → User → Configuration → PostHog → Domain contexts |
-| **Custom Hooks** | Prefix `use*`, return object: `{ data, isLoading, error }` |
-| **Test IDs** | Hierarchical: `DATA_TEST_ID.section.field.name` |
-| **i18n** | All text: `t('translationKey')` from `src/I18n` |
-
-## Functional Components
-
-```typescript
-interface ProductProps {
-  productId: string;
-  onSelect?: (id: string) => void;
-}
-
-const Product: React.FC<ProductProps> = ({ productId, onSelect }) => {
-  const [isLoading, setIsLoading] = React.useState(false);
-  
-  const handleClick = React.useCallback(() => {
-    setIsLoading(true);
-    onSelect?.(productId);
-  }, [productId, onSelect]);
-
-  return (
-    <div onClick={handleClick} className={isLoading ? 'loading' : ''}>
-      {productId}
-    </div>
-  );
-};
-
-export default Product;
-```
-
-## Custom Hooks
-
-```typescript
-interface UseProductReturn {
-  product: Product | null;
-  loading: boolean;
-  error: Error | null;
-  refetch: () => Promise<void>;
-}
-
-export const useProduct = (productId: string): UseProductReturn => {
-  const [product, setProduct] = React.useState<Product | null>(null);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState<Error | null>(null);
-
-  const fetchProduct = React.useCallback(async () => {
-    setLoading(true);
-    try {
-      const response = await fetch(`/api/products/${productId}`);
-      if (!response.ok) throw new Error('Failed to fetch');
-      const data = await response.json();
-      setProduct(data);
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Unknown error'));
-    } finally {
-      setLoading(false);
-    }
-  }, [productId]);
-
-  React.useEffect(() => {
-    fetchProduct();
-  }, [fetchProduct]);
-
-  return { product, loading, error, refetch: fetchProduct };
-};
-```
-
-## Context API
-
-```typescript
-interface ProductContextType {
-  selectedProduct: Product | null;
-  selectProduct: (product: Product) => void;
-}
-
-const ProductContext = React.createContext<ProductContextType | undefined>(undefined);
-
-export const ProductProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [selectedProduct, setSelectedProduct] = React.useState<Product | null>(null);
-
-  const value: ProductContextType = {
-    selectedProduct,
-    selectProduct: (product) => setSelectedProduct(product),
-  };
-
-  return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
-};
-
-export const useProductContext = () => {
-  const context = React.useContext(ProductContext);
-  if (!context) throw new Error('useProductContext must be used within ProductProvider');
-  return context;
-};
-```
-
-## React Query v3 (Project Standard)
-
-```typescript
-import { useQuery, UseQueryOptions } from 'react-query';
-import { AxiosError } from 'axios';
-import { onErrorPopToast } from './helpers/onErrorPopToast';
-import { t } from 'src/I18n';
-
-// Query hook pattern
-export function useGetActivationPrice(options?: UseQueryOptions<Pricing, AxiosError>) {
-  const { activationMerged } = useStoreMediaContext();
-  const { adAccountId } = useUserContext();
-
-  const { data, isLoading, error, isError } = useQuery<Pricing, AxiosError>(
-    ['activationPrice', activationMerged.activationId, adAccountId],
-    () => activationPrice(activationMerged.activationId),
-    {
-      onError: (err) => onErrorPopToast(err, t('getPricingError')),
-      enabled: !!activationMerged.activationId,
-      ...options,
-    }
-  );
-
-  return { dataActivationPrice: data, isLoadingActivationPrice: isLoading, isErrorActivationPrice: isError };
-}
-
-// CRITICAL: Always include adAccountId in query keys for multi-tenancy
-// Use descriptive return names: data{EntityName}, isLoading{EntityName}
-```
-
-## Emotion Styling (Project Standard)
-
-```typescript
-import styled from '@emotion/styled';
-import { Flex } from 'dh-component-library';
-import { ThemeType } from 'src/types';
-
-// Styled component with theme
-const FilterActions = styled(Flex)<{ theme?: ThemeType }>(({ theme }) => ({
-  gap: '16px',
-  justifyContent: 'flex-end',
-  marginTop: '24px',
-  paddingTop: '16px',
-  borderTop: `1px solid ${theme?.palette?.greyscale?.[200] || '#e5e7eb'}`,
-
-  '& button': {
-    minWidth: '44px',
-    minHeight: '44px',
-  },
-
-  '@media (max-width: 768px)': {
-    flexDirection: 'column',
-    gap: '12px',
-  },
-}));
-
-// Always use optional chaining for theme properties
-// Include responsive breakpoints: 768px (tablet), 1024px (desktop)
-// Ensure touch targets ≥ 44px for accessibility
-```
-
-## Type Safety
-
-```typescript
-// ✅ Good: Proper typing with interfaces and generics
-interface Product {
-  id: string;
-  name: string;
-  price: number;
-  retailerId: string;
-}
-
-interface UseAsyncState<T> {
-  data: T | null;
-  loading: boolean;
-  error: Error | null;
-}
-
-const useAsync = <T,>(fn: () => Promise<T>): UseAsyncState<T> => {
-  // implementation
-  return { data: null, loading: false, error: null };
-};
-
-// ❌ Bad: No typing, unclear props/returns
-const useAsync = (fn) => {
-  return { data: null, loading: false, error: null };
-};
-```
-
-## Project Dependencies
-
-```bash
-# Core (React 17 - DO NOT upgrade to 18)
-yarn add react@^17.0.2 react-dom@^17.0.2
-
-# State & Data Fetching
-yarn add react-query@^3.39.3 axios@^1.12.0
-
-# Styling
-yarn add @emotion/react @emotion/styled
-yarn add dh-component-library@5.37.47 store-components@^0.0.47
-
-# Routing (Dual setup required for portal integration)
-yarn add react-router-dom@5.1.2
-yarn add react-router-dom6@npm:react-router-dom@^6.2.1
-
-# Testing
-yarn add -D @testing-library/react @testing-library/user-event
-yarn add -D msw@^1.1.0 cypress dh-cypress-support
-
-# Utilities
-yarn add lodash ramda react-toastify file-saver react-error-boundary
-```
-
-## Project-Specific Patterns
-
-### Context Cascading Order
-```typescript
-App → ThemeProvider → UserContext → ConfigurationProvider → PostHogProvider
-  → StoreMediaProvider → RegionsEstatesProvider → SelectedStoresProvider
-```
-
-### Multi-Step Navigation
-```typescript
-// Each step: { title, route, component, provider, isValid?, subSteps? }
-const step = {
-  title: t('stepTitle'),
-  route: 'step-route',
-  component: StepComponent,
-  provider: StepProvider,
-};
-```
-
-### API Call Pattern
-```typescript
-import { apiCall } from 'src/api/utils';
-
-export const getActivation = (id: string): Promise<Activation> =>
-  apiCall({ url: `/api/booking-store/${id}`, method: 'GET' });
-```
-
-### Test ID Convention
-```typescript
-export const DATA_TEST_ID = {
-  stepName: {
-    section: 'section-step-name',
-    field: { fieldName: 'field-name' },
-    button: { submit: 'step-submit-button' },
-  },
-};
-```
-
-## Quick Checklist ✅
-
-- Imports: React → Third-party → Components → Hooks/Utils → Types
-- Props typed with interfaces
-- Components are `React.FC<Props>`
-- All handlers wrapped in `useCallback`
-- `useEffect` dependencies correct
-- Custom hooks follow naming: `use*`
-- State lifted appropriately or use Context
-- React Query for server state
-- Forms use validation
-- Error boundary wraps app/sections
-- Memoization with `React.memo()`, `useMemo()`, `useCallback()`
-- No `any` types
-- No side effects in render
-
-## Common Mistakes ❌
-
-- Import order not organized
-- Missing TypeScript types
-- useCallback missing dependencies
-- useEffect infinite loops (missing/wrong dependencies)
-- Mixing server & client state management
-- Inline object/array in props (creates new refs each render)
-- Props mutation directly
-- useEffect with async directly (use wrapper function)
-- Missing error boundary
-- Not memoizing expensive computations
-- Rendering without keys in lists
-- `console.log()` left in production code
-
-## Resources
-
-- [React Query v3](https://react-query-v3.tanstack.com)
-- [Emotion](https://emotion.sh)
-- [dh-component-library](https://dh-component-library-docs)
-- [TypeScript React](https://react-typescript-cheatsheet.netlify.app/)

package/.github/instructions/react-testing-optimization.instructions.md

@@ -1,373 +0,0 @@
-# React 17 Testing & Optimization Instructions
-
-**Scope**: Testing, Performance, Error Handling | **Version**: 3.0 | **Tags**: `testing`, `msw`, `performance`, `error-handling`
-
-**Related Files**: See [react-development.instructions.md](./react-development.instructions.md) for core patterns, [uiux.instructions.md](./uiux.instructions.md) for UI patterns
-
-## Error Handling
-
-### Error Boundary Pattern
-```typescript
-import { ErrorBoundary } from 'react-error-boundary';
-import { ErrorPage } from 'dh-component-library';
-import { onErrorPopToast } from 'src/Hooks/query/helpers/onErrorPopToast';
-import { t } from 'src/I18n';
-
-// Wrap routes with ErrorBoundary
-<ErrorBoundary FallbackComponent={ErrorPage}>
-  <Routes>...</Routes>
-</ErrorBoundary>
-
-// API error handling pattern
-const { data, isLoading } = useQuery(
-  ['key', id, adAccountId],
-  () => apiCall(),
-  { onError: (err) => onErrorPopToast(err, t('errorMessageKey')) }
-);
-
-// Always use i18n keys for error messages, never hardcoded strings
-```
-
-## Suspense & Lazy Loading
-
-```typescript
-const ProductDetails = React.lazy(() => import('./ProductDetails'));
-
-const App: React.FC = () => (
-  <ErrorBoundary>
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <ProductDetails productId="123" />
-    </React.Suspense>
-  </ErrorBoundary>
-);
-```
-
-## Memoization & Optimization
-
-```typescript
-interface ProductListItemProps {
-  product: Product;
-  onSelect: (id: string) => void;
-}
-
-const ProductListItem = React.memo<ProductListItemProps>(({ product, onSelect }) => {
-  const handleClick = React.useCallback(() => {
-    onSelect(product.id);
-  }, [product.id, onSelect]);
-
-  const displayPrice = React.useMemo(() => {
-    return `$${(product.price / 100).toFixed(2)}`;
-  }, [product.price]);
-
-  return (
-    <div onClick={handleClick}>
-      {product.name} - {displayPrice}
-    </div>
-  );
-});
-
-export default ProductListItem;
-```
-
-### When to Memoize
-
-**Use `React.memo`**:
-- Component renders often with same props
-- Component is expensive to render
-- Parent re-renders frequently
-
-**Use `useMemo`**:
-- Expensive calculations
-- Creating objects/arrays passed as props
-- Filtering/transforming large datasets
-
-**Use `useCallback`**:
-- Functions passed as props to memoized components
-- Functions in dependency arrays
-- Event handlers passed to child components
-
-**DON'T memoize**:
-- Cheap calculations
-- Primitive values
-- Components that always render with different props
-
-## Testing (MSW + React Testing Library)
-
-### Test Setup with MSW
-```typescript
-import { render, screen } from 'src/test/app-test-utils';
-import { ComponentTestContainer } from 'src/test/app-test-utils';
-import { server } from 'src/test/msw-api/server/test-server';
-import { rest } from 'msw';
-import { DATA_TEST_ID } from 'src/test/generic-ids';
-
-describe('Component', () => {
-  it('renders with context', () => {
-    const mockActivation = { activationId: '123', name: 'Test' };
-    
-    render(
-      <ComponentTestContainer state={{ activationMerged: mockActivation }}>
-        <Component />
-      </ComponentTestContainer>
-    );
-    
-    expect(screen.getByTestId(DATA_TEST_ID.section.field)).toBeInTheDocument();
-  });
-
-  it('overrides MSW response', () => {
-    server.use(
-      rest.get('/api/booking-store/:id', (req, res, ctx) => 
-        res(ctx.json({ data: 'override' }))
-      )
-    );
-    
-    render(<Component />);
-    // Test with overridden response
-  });
-});
-
-// Use app-test-utils for pre-configured providers
-// MSW automatically mocked in setupTests.ts
-```
-
-### Testing Hooks
-```typescript
-import { renderHook, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-describe('useProduct', () => {
-  it('fetches product data', async () => {
-    const queryClient = new QueryClient();
-    const wrapper = ({ children }) => (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    );
-    
-    const { result } = renderHook(() => useProduct('123'), { wrapper });
-    
-    await waitFor(() => expect(result.current.loading).toBe(false));
-    expect(result.current.product).toBeDefined();
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-### Testing User Interactions
-```typescript
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-describe('ProductForm', () => {
-  it('submits form with valid data', async () => {
-    const mockSubmit = jest.fn();
-    render(<ProductForm onSubmit={mockSubmit} />);
-    
-    // Type into inputs
-    await userEvent.type(screen.getByLabelText(/name/i), 'Test Product');
-    await userEvent.type(screen.getByLabelText(/price/i), '99.99');
-    
-    // Click submit
-    fireEvent.click(screen.getByRole('button', { name: /submit/i }));
-    
-    // Assert
-    await waitFor(() => {
-      expect(mockSubmit).toHaveBeenCalledWith({
-        name: 'Test Product',
-        price: 99.99,
-      });
-    });
-  });
-  
-  it('shows validation errors', async () => {
-    render(<ProductForm onSubmit={jest.fn()} />);
-    
-    // Submit without filling
-    fireEvent.click(screen.getByRole('button', { name: /submit/i }));
-    
-    // Assert errors shown
-    expect(await screen.findByText(/name is required/i)).toBeInTheDocument();
-  });
-});
-```
-
-### Testing Async Operations
-```typescript
-describe('ProductList', () => {
-  it('shows loading state', () => {
-    render(<ProductList />);
-    expect(screen.getByTestId(DATA_TEST_ID.loadingSpinner)).toBeInTheDocument();
-  });
-  
-  it('displays products after loading', async () => {
-    render(<ProductList />);
-    
-    await waitFor(() => {
-      expect(screen.queryByTestId(DATA_TEST_ID.loadingSpinner)).not.toBeInTheDocument();
-    });
-    
-    expect(screen.getByText(/Product 1/i)).toBeInTheDocument();
-    expect(screen.getByText(/Product 2/i)).toBeInTheDocument();
-  });
-  
-  it('shows error message on failure', async () => {
-    server.use(
-      rest.get('/api/products', (req, res, ctx) => 
-        res(ctx.status(500), ctx.json({ error: 'Server error' }))
-      )
-    );
-    
-    render(<ProductList />);
-    
-    expect(await screen.findByText(/failed to load/i)).toBeInTheDocument();
-  });
-});
-```
-
-## Performance Best Practices
-
-### Code Splitting
-```typescript
-// Lazy load step components
-const LazyStepComponent = lazy(() => import('./StepComponent'));
-
-// Use in router
-<Route 
-  path="/step" 
-  element={
-    <Suspense fallback={<LoadingSpinner />}>
-      <LazyStepComponent />
-    </Suspense>
-  } 
-/>
-```
-
-### Bundle Optimization
-```typescript
-// ✅ Tree-shakeable imports
-import { Button } from 'dh-component-library'; 
-import { map, filter } from 'lodash';
-
-// ❌ Avoid full imports
-import * as DH from 'dh-component-library';
-import _ from 'lodash';
-```
-
-### Virtualization for Long Lists
-```typescript
-import { FixedSizeList } from 'react-window';
-
-const VirtualizedList: React.FC<{ items: Product[] }> = ({ items }) => (
-  <FixedSizeList
-    height={600}
-    itemCount={items.length}
-    itemSize={50}
-    width="100%"
-  >
-    {({ index, style }) => (
-      <div style={style}>{items[index].name}</div>
-    )}
-  </FixedSizeList>
-);
-```
-
-### Debouncing & Throttling
-```typescript
-import { useMemo } from 'react';
-import debounce from 'lodash/debounce';
-
-const SearchInput: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  
-  const debouncedSearch = useMemo(
-    () => debounce((value: string) => {
-      // API call here
-      console.log('Searching for:', value);
-    }, 300),
-    []
-  );
-  
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-    debouncedSearch(e.target.value);
-  };
-  
-  return <input value={searchTerm} onChange={handleChange} />;
-};
-```
-
-## Common Performance Issues
-
-### ❌ Creating Functions in Render
-```typescript
-// ❌ BAD: New function every render
-<Button onClick={() => handleClick(id)} />
-
-// ✅ GOOD: Memoized with useCallback
-const handleButtonClick = useCallback(() => handleClick(id), [id]);
-<Button onClick={handleButtonClick} />
-```
-
-### ❌ Creating Objects/Arrays in Render
-```typescript
-// ❌ BAD: New array every render
-<Component items={products.filter(p => p.active)} />
-
-// ✅ GOOD: Memoized with useMemo
-const activeProducts = useMemo(() => products.filter(p => p.active), [products]);
-<Component items={activeProducts} />
-```
-
-### ❌ Not Memoizing Expensive Calculations
-```typescript
-// ❌ BAD: Recalculates every render
-const total = products.reduce((sum, p) => sum + p.price, 0);
-
-// ✅ GOOD: Memoized
-const total = useMemo(() => 
-  products.reduce((sum, p) => sum + p.price, 0), 
-  [products]
-);
-```
-
-## Testing Checklist ✅
-
-- All components have test coverage
-- User interactions tested with userEvent
-- Async operations tested with waitFor
-- Error states tested
-- Loading states tested
-- MSW handlers for all API calls
-- Test IDs used for querying elements
-- No hardcoded waits (use waitFor)
-- Tests isolated (no shared state)
-- Cleanup after tests
-
-## Performance Checklist ✅
-
-- Lazy load route components
-- Memoize expensive calculations
-- Use React.memo for frequently re-rendering components
-- useCallback for functions in dependency arrays
-- Code splitting for large features
-- Tree-shakeable imports
-- Virtualization for long lists
-- Debounce user input
-- Optimize images (lazy loading, compression)
-
-## Common Testing Mistakes ❌
-
-- Using `getBy*` instead of `findBy*` for async elements
-- Not waiting for async operations
-- Testing implementation details instead of behavior
-- Hardcoded waits (`setTimeout`)
-- Not cleaning up after tests
-- Missing act() warnings
-- Not mocking external dependencies
-- Snapshot tests for everything
-
-## Resources
-
-- [React Testing Library](https://testing-library.com/react)
-- [MSW](https://mswjs.io/docs)
-- [React Query Testing](https://react-query-v3.tanstack.com/guides/testing)
-- [React Performance](https://reactjs.org/docs/optimizing-performance.html)
-- [Web.dev React Performance](https://web.dev/react/)