open-index/open-npm huggingface dataset:
npm package: @hayitbek/realpay-utils
Description: Utilities for RealPay
Latest version: 0.4.0

# realpay-utils

## Installation

```bash
npm install realpay-utils
```
```bash
pnpm install realpay-utils
```
```bash
yarn add realpay-utils
```

## Usage

### Hooks

#### useComponentVisible

```tsx
import { useComponentVisible } from '@hayitbek/realpay-utils'

const Component = () => {
  const [isOpen, setIsOpen] = useState(false);
  const {ref} = useComponentVisible({ setVisible: setIsOpen })

  return <div ref={ref}></div>
}
```

#### useCountDown

```tsx
import { useCountDown } from "@hayitbek/realpay-utils";

const Component = () => {
  const { timer, setTimer } = useCountDown(59);

  return (
    <button onClick={() => setTimer(59)}>
      {timer < 10 ? `00:0${timer}` : `00:${timer}`}
    </button>
  )
}
```

#### useDebounce

```tsx
import { useDebounce } from "@hayitbek/realpay-utils";

const Component = () => {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}
```

#### useFocus

```tsx
import { useFocus } from "@hayitbek/realpay-utils";

const Component = () => {
  const ref = useRef<HTMLInputElement>(null);

const [isFocused, setIsFocused] = useState(false);
  const {ref} = useFocus(ref,!isFocused)

  return <div>
    <input ref={ref} />
    <button onClick={() => setIsFocused(!isFocused)}>
      {isFocused ? "Unfocus" : "Focus"}
    </button>
  </div>
}
```

#### useInput

```tsx
import { useInput } from "@hayitbek/realpay-utils";

const Component = () => {
  const [value, setValue] = useState({
    name: "",
  });
  const { handleChange, ref} = useInput(value)

  return <input ref={ref} onChange={handleChange} />
}
```

#### useRequestOnEnter

```tsx
import { useRequestOnEnter } from "@hayitbek/realpay-utils";

const Component = () => {
  const [isRequestEnabled, setIsRequestEnabled] = useState(false);
  const [shouldFilter, setShouldFilter] = useState(false);

  useRequestOnEnter(shouldFilter, setIsRequestEnabled);
}
```

### Helper functions

#### classnames

```tsx
import {classnames} from "@hayitbek/realpay-utils"

const Component = () => {
  const [isBlue, setIsBlue] = useState(false);

  return (
    <div className={classnames("bg-white", isBlue && "bg-blue-500")}>
      <button onClick={() => setIsBlue(!isBlue)}>
        {isBlue ? "Close" : "Open"}
      </button>
    </div>
  )
}
```

#### formatDate

```tsx
import {formatDate} from "@hayitbek/realpay-utils"

const Component = () => {
  return <div>
    {formatDate("2024-07-17T09:59:26.249Z")}
  </div>
}
```

#### formatToAmount

```tsx
import {formatToAmount} from "@hayitbek/realpay-utils"

const Component = () => {
  return <div>
    {formatToAmount(1000000)}
  </div>
}

```

#### getBaseUrl

```tsx
import {getBaseUrl} from "@hayitbek/realpay-utils"

const baseUrl = getBaseUrl(import.meta.env,import.meta.env.MODE);
```

#### memoize

```tsx
import {memoize} from "@hayitbek/realpay-utils"

const memoizedFn = memoize(fn);
```

### Types

## License

[MIT](LICENSE)
npm package: @haykal/app-shell-native
Description: @haykal/app-shell-native package
Latest version: 1.0.0

# @haykal/app-shell-native

@haykal/app-shell-native package

## Install

```bash
pnpm add @haykal/app-shell-native
```

## Usage

```ts
import {} from '@haykal/app-shell-native';
```

## Exported subpaths

- `@haykal/app-shell-native/layouts`
- `@haykal/app-shell-native/screens`
- `@haykal/app-shell-native/hooks`
- `@haykal/app-shell-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/audit-ui
Description: Haykal Audit UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/audit-ui

Reusable UI components, forms, and screens for the **Audit** domain in the Haykal platform.

## Features

- 🎨 **Components** — Presentational building blocks
- 📝 **Forms** — React Hook Form + Zod validation
- 🖥️ **Screens** — Smart components with business logic
- 🪝 **Hooks** — Reusable React hooks
- ✅ **Schemas** — Zod validation schemas
- 📦 **TypeScript** — Full type safety

## Installation

This package is internal to the Haykal monorepo and installed automatically.

```bash
pnpm install
```

## Usage

### Import components

```typescript
import {} from /* YourComponent */ '@haykal/audit-ui';
// or from sub-paths:
import {} from /* YourForm */ '@haykal/audit-ui/forms';
import {} from /* YourScreen */ '@haykal/audit-ui/screens';
```

### Example usage

```tsx
import {} from /* YourScreen */ '@haykal/audit-ui/screens';

export default function AuditPage() {
  return <YourScreen />;
}
```

## Structure

```
src/
├── index.ts              # Main barrel export
└── lib/
    ├── components/       # Presentational components
    ├── forms/            # Form components (React Hook Form + Zod)
    ├── screens/          # Smart components with business logic
    ├── hooks/            # Reusable React hooks
    ├── schemas/          # Zod validation schemas
    └── types/            # TypeScript types and interfaces
```

## Development

### Type checking

```bash
nx typecheck @haykal/audit-ui
```

### Linting

```bash
nx lint @haykal/audit-ui
```

## Dependencies

- `@haykal/ui` — Shared UI components (shadcn/ui)
- `@haykal/audit-client` — Domain client SDK
- `@haykal/core-client` — Core client utilities
- `react-hook-form` — Form state management
- `zod` — Schema validation
- `@hookform/resolvers` — Zod resolver for RHF

## License

MIT
npm package: @haykal/auth-client
Description: Auth domain client package for Haykal applications. Provides type-safe React Query hooks auto-generated from the backend OpenAPI spec, plus high-level hooks for authentication workflows.
Latest version: 1.0.0

# @haykal/auth-client

Auth domain client package for Haykal applications. Provides type-safe React Query hooks auto-generated from the backend OpenAPI spec, plus high-level hooks for authentication workflows.

## Features

- **Auto-generated hooks** — `useAuthControllerLogin`, `useAuthControllerRegister`, etc. via Orval
- **High-level `useAuth()` hook** — login, register, logout with automatic token management
- **`useCurrentUser()` hook** — fetch and cache the authenticated user profile
- **`useAuthToken()` hook** — JWT inspection (decode, expiry check, time remaining)
- **MSW mocks** — auto-generated mock handlers for testing
- **Type-safe errors** — generated error types for each endpoint

## Setup

```ts
import { HaykalClient } from '@haykal/core-client';
import { initMutator } from '@haykal/auth-client';

// 1. Initialize the shared client
const client = HaykalClient.getInstance({ baseURL: '/api' });

// 2. Link auth-client to the shared client
initMutator(client.axios);
```

## Usage

### Login

```tsx
import { useAuth } from '@haykal/auth-client';
import { ApiError } from '@haykal/core-client';

function LoginForm() {
  const { login, isLoggingIn, loginError } = useAuth();

  const handleSubmit = async (email: string, password: string) => {
    try {
      const { user, accessToken } = await login({ email, password });
      navigate('/dashboard');
    } catch (error) {
      if (ApiError.isApiError(error) && error.is('AUTH_INVALID_CREDENTIALS')) {
        showToast('Invalid email or password');
      }
    }
  };
}
```

### Current User

```tsx
import { useCurrentUser } from '@haykal/auth-client';

function Dashboard() {
  const { user, isAuthenticated, isLoading } = useCurrentUser();

  if (isLoading) return <Spinner />;
  if (!isAuthenticated) return <Navigate to="/login" />;

  return <h1>Welcome, {user.name ?? user.email}</h1>;
}
```

### Auth Guard

```tsx
import { useAuthToken } from '@haykal/auth-client';

function AuthGuard({ children }) {
  const { hasToken, isExpired } = useAuthToken();
  if (!hasToken || isExpired) return <Navigate to="/login" />;
  return children;
}
```

## Regenerating

```bash
# Regenerate from the running backend
nx generate auth-client

# Or directly
cd packages/auth/client && npx orval --config ./orval.config.ts
```

## Further Reading

- [Client SDK Generation](../../../docs/client-sdk-generation.md) — Orval pipeline, configuration, and troubleshooting
- [Admin App Development](../../../docs/admin-app-development.md) — Using client hooks in the admin dashboard
- [API Reference](../../../docs/api-reference.md) — Backend endpoints these hooks call
npm package: @haykal/auth-email-backend
Description: @haykal/auth-email-backend package
Latest version: 1.0.0

# @haykal/auth-email-backend

@haykal/auth-email-backend package

## Install

```bash
pnpm add @haykal/auth-email-backend
```

## Usage

```ts
import {} from '@haykal/auth-email-backend';
```

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/auth-ui-native
Description: Haykal Auth UI Native — Reusable authentication screens, forms, and hooks for React Native / Expo
Latest version: 1.0.0

# @haykal/auth-ui-native

Haykal Auth UI Native — Reusable authentication screens, forms, and hooks for React Native / Expo

## Install

```bash
pnpm add @haykal/auth-ui-native
```

## Usage

```ts
import {} from '@haykal/auth-ui-native';
```

## Exported subpaths

- `@haykal/auth-ui-native/components`
- `@haykal/auth-ui-native/forms`
- `@haykal/auth-ui-native/screens`
- `@haykal/auth-ui-native/hooks`
- `@haykal/auth-ui-native/schemas`
- `@haykal/auth-ui-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/core-client
Description: Shared HTTP client infrastructure for Haykal frontend applications.
Latest version: 1.0.0

# @haykal/core-client

Shared HTTP client infrastructure for Haykal frontend applications.

## Features

- **Singleton HTTP client** — single Axios instance shared across all domain packages
- **Interceptor pipeline** — auth token injection, response envelope unwrap, RFC 7807 error transform, retry with exponential backoff
- **Platform-agnostic token storage** — auto-detects Web (`localStorage`) / React Native (`AsyncStorage`) / Node (`in-memory`)
- **React Query integration** — pre-configured `QueryClient` factory with smart retry logic
- **React Provider** — `<HaykalProvider>` wraps both client init and `QueryClientProvider`
- **Custom Orval mutator** — bridges Orval-generated hooks with the shared client
- **Event system** — observe requests, errors, and auth events for analytics/debugging
- **Typed errors** — `ApiError` class with convenience helpers (`isValidationError`, `getFieldErrors()`, etc.)

## Quick Start

```tsx
import { HaykalProvider } from '@haykal/core-client';

function App() {
  return (
    <HaykalProvider config={{ baseURL: '/api' }}>
      <YourApp />
    </HaykalProvider>
  );
}
```

Or initialize manually:

```ts
import { HaykalClient, createHaykalQueryClient } from '@haykal/core-client';

// Initialize once at app startup
const client = HaykalClient.getInstance({
  baseURL: 'https://api.example.com',
  retry: { enabled: true, maxRetries: 3 },
  onTokenRefresh: async () => {
    /* refresh logic */
  },
  onAuthFailure: () => {
    /* redirect to login */
  },
});

const queryClient = createHaykalQueryClient();
```

## Error Handling

```ts
import { ApiError } from '@haykal/core-client';

try {
  await someApiCall();
} catch (error) {
  if (ApiError.isApiError(error)) {
    if (error.isValidationError) {
      const fields = error.getFieldErrors();
      // { email: 'must be valid', password: 'too short' }
    }
    if (error.is('RESOURCE_NOT_FOUND')) {
      // handle specific error code
    }
    console.log(error.getUserMessage()); // user-friendly message
  }
}
```

## Token Storage

```ts
import { tokenStorage } from '@haykal/core-client';

// Tokens are managed automatically by the auth interceptor,
// but you can also access them directly:
const token = await tokenStorage.getAccessToken();

// Use a custom storage adapter (e.g., expo-secure-store):
tokenStorage.setAdapter(mySecureStorageAdapter);
```
npm package: @haykal/core-native
Description: Haykal Core Native — Foundation provider, hooks, and utilities for React Native / Expo apps
Latest version: 1.0.0

# @haykal/core-native

Haykal Core Native — Foundation provider, hooks, and utilities for React Native / Expo apps

## Install

```bash
pnpm add @haykal/core-native
```

## Usage

```ts
import {} from '@haykal/core-native';
```

## Exported subpaths

- `@haykal/core-native/provider`
- `@haykal/core-native/storage`
- `@haykal/core-native/hooks`
- `@haykal/core-native/components`
- `@haykal/core-native/config`
- `@haykal/core-native/deep-linking`
- `@haykal/core-native/biometrics`
- `@haykal/core-native/analytics`
- `@haykal/core-native/error-boundary`
- `@haykal/core-native/updates`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/dashboard-kit
Description: Reusable dashboard widgets, chart components, KPI cards, stat grids, activity feeds, and analytics views
Latest version: 1.0.0

# @haykal/dashboard-kit

Reusable dashboard widgets, chart components, KPI cards, stat grids, activity feeds, and analytics views

## Install

```bash
pnpm add @haykal/dashboard-kit
```

## Usage

```ts
import {} from '@haykal/dashboard-kit';
```

## Exported subpaths

- `@haykal/dashboard-kit/charts`
- `@haykal/dashboard-kit/hooks`
- `@haykal/dashboard-kit/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/device-native
Description: Haykal Device Native — Device info, app metadata, capabilities detection, session-device linking, update prompts, and debug overlays for React Native / Expo apps
Latest version: 1.0.0

# @haykal/device-native

Haykal Device Native — Device info, app metadata, capabilities detection, session-device linking, update prompts, and debug overlays for React Native / Expo apps

## Install

```bash
pnpm add @haykal/device-native
```

## Usage

```ts
import {} from '@haykal/device-native';
```

## Exported subpaths

- `@haykal/device-native/providers`
- `@haykal/device-native/hooks`
- `@haykal/device-native/components`
- `@haykal/device-native/utils`
- `@haykal/device-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/email-backend
Description: Reusable email sending package with provider abstraction, template rendering, and queue integration.
Latest version: 1.0.0

# @haykal/email-backend

Reusable email sending package with provider abstraction, template rendering, and queue integration.

## Features

- **Provider abstraction** — SMTP (nodemailer), Resend, Mailhog (development)
- **Template rendering** — Handlebars with file-based & database template sources
- **Email logging** — Track all sent emails with status and provider info
- **Admin API** — Template management and preview endpoints
- **Queue-ready** — Optional integration with `@haykal/jobs-backend` for reliable delivery

## Usage

```typescript
import { EmailModule } from '@haykal/email-backend';

@Module({
  imports: [
    EmailModule.forRoot({
      provider: 'smtp',
      from: { name: 'My App', email: 'noreply@example.com' },
      smtp: {
        host: 'localhost',
        port: 1025,
        secure: false,
      },
      enableLogging: true,
    }),
  ],
})
export class AppModule {}
```

## Key Exports

| Export                    | Type          | Description                                     |
| ------------------------- | ------------- | ----------------------------------------------- |
| `EmailModule`             | NestJS Module | Main module with `forRoot()` / `forRootAsync()` |
| `EMAIL_CONFIG`            | Symbol        | Inject the config object                        |
| `EmailService`            | Service       | Send emails (raw or template-rendered)          |
| `EmailTemplatesService`   | Service       | Template CRUD                                   |
| `TemplateRendererService` | Service       | Handlebars template rendering                   |
| `EmailLogEntity`          | Entity        | Email send log records                          |
| `EmailTemplateEntity`     | Entity        | Email templates                                 |
| `EMAIL_ENTITIES`          | Array         | Entities for migration discovery                |

## Related Packages

- `@haykal/email-client` — React Query hooks for email management
- `@haykal/jobs-backend` — Queue integration for reliable delivery
- `@haykal/notifications-backend` — Uses email as a notification channel
- `@haykal/core-backend` — Base infrastructure

## Further Reading

- [API Reference](../../../docs/api-reference.md) — Full endpoint listing
- [Backend Style Guide](../../../docs/backend-styleguide.md) — Coding conventions
npm package: @haykal/email-client
Description: > React Query hooks for email management — send emails, manage templates, and preview rendered templates.
Latest version: 1.0.0

# @haykal/email-client

> React Query hooks for email management — send emails, manage templates, and preview rendered templates.

## Installation

```bash
pnpm add @haykal/email-client
```

## Setup

```typescript
import { initMutator } from '@haykal/email-client';

initMutator(); // Connects to HaykalClient singleton
```

## Hooks

### Email Sending

| Hook                     | Description                          |
| ------------------------ | ------------------------------------ |
| `useSendEmail()`         | Send a raw email (to, subject, body) |
| `useSendTemplateEmail()` | Send email using a template          |

### Template Management

| Hook                        | Description                              |
| --------------------------- | ---------------------------------------- |
| `useEmailTemplates()`       | List all email templates                 |
| `useEmailTemplate(id)`      | Get template by ID                       |
| `useCreateEmailTemplate()`  | Create a new template                    |
| `useUpdateEmailTemplate()`  | Update an existing template              |
| `useDeleteEmailTemplate()`  | Delete a template                        |
| `usePreviewEmailTemplate()` | Render template preview with sample data |

### Query Keys

| Export                      | Description                   |
| --------------------------- | ----------------------------- |
| `getEmailTemplatesQueryKey` | Cache key for template list   |
| `getEmailTemplateQueryKey`  | Cache key for single template |

## Usage Examples

### Sending a Template Email

```tsx
import { useSendTemplateEmail } from '@haykal/email-client';

function SendButton({ templateId, userId }: Props) {
  const { mutate, isPending } = useSendTemplateEmail();

  return (
    <button
      disabled={isPending}
      onClick={() =>
        mutate({
          templateId,
          to: 'user@example.com',
          variables: { name: 'John' },
        })
      }
    >
      Send Email
    </button>
  );
}
```

### Managing Templates

```tsx
import {
  useEmailTemplates,
  useCreateEmailTemplate,
} from '@haykal/email-client';

function TemplateList() {
  const { data } = useEmailTemplates();
  const { mutate: create } = useCreateEmailTemplate();

  return (
    <ul>
      {data?.data?.map((t) => (
        <li key={t.id}>{t.name}</li>
      ))}
    </ul>
  );
}
```

## Regenerating

```bash
nx run @haykal/email-client:generate
```

> **Never edit files in `src/generated/`** — they are auto-generated by Orval.

## Related Packages

- `@haykal/email-backend` — Backend API with provider abstraction
- `@haykal/core-client` — HTTP client and React Query provider

## Further Reading

- [Client SDK Generation](../../../docs/client-sdk-generation.md) — Orval pipeline and regeneration
- [API Reference](../../../docs/api-reference.md) — Backend endpoints these hooks call
npm package: @haykal/email-ui
Description: Haykal Email UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/email-ui

Reusable UI components, forms, and screens for the **Email** domain in the Haykal platform.

## Features

- 🎨 **Components** — Presentational building blocks
- 📝 **Forms** — React Hook Form + Zod validation
- 🖥️ **Screens** — Smart components with business logic
- 🪝 **Hooks** — Reusable React hooks
- ✅ **Schemas** — Zod validation schemas
- 📦 **TypeScript** — Full type safety

## Installation

This package is internal to the Haykal monorepo and installed automatically.

```bash
pnpm install
```

## Usage

### Import components

```typescript
import {} from /* YourComponent */ '@haykal/email-ui';
// or from sub-paths:
import {} from /* YourForm */ '@haykal/email-ui/forms';
import {} from /* YourScreen */ '@haykal/email-ui/screens';
```

### Example usage

```tsx
import {} from /* YourScreen */ '@haykal/email-ui/screens';

export default function EmailPage() {
  return <YourScreen />;
}
```

## Structure

```
src/
├── index.ts              # Main barrel export
└── lib/
    ├── components/       # Presentational components
    ├── forms/            # Form components (React Hook Form + Zod)
    ├── screens/          # Smart components with business logic
    ├── hooks/            # Reusable React hooks
    ├── schemas/          # Zod validation schemas
    └── types/            # TypeScript types and interfaces
```

## Development

### Type checking

```bash
nx typecheck @haykal/email-ui
```

### Linting

```bash
nx lint @haykal/email-ui
```

## Dependencies

- `@haykal/ui` — Shared UI components (shadcn/ui)
- `@haykal/email-client` — Domain client SDK
- `@haykal/core-client` — Core client utilities
- `react-hook-form` — Form state management
- `zod` — Schema validation
- `@hookform/resolvers` — Zod resolver for RHF

## License

MIT
npm package: @haykal/eslint-config
Description: Centralized ESLint configurations for the Haykal monorepo.
Latest version: 1.0.0

# @haykal/eslint-config

Centralized ESLint configurations for the Haykal monorepo.

## Available Configurations

| Config       | Import Path                      | Description                      |
| ------------ | -------------------------------- | -------------------------------- |
| **base**     | `@haykal/eslint-config/base`     | Shared TypeScript/Prettier rules |
| **backend**  | `@haykal/eslint-config/backend`  | NestJS-specific rules            |
| **frontend** | `@haykal/eslint-config/frontend` | React/Next.js rules              |
| **mobile**   | `@haykal/eslint-config/mobile`   | React Native/Expo rules          |

## Usage

In your project's `eslint.config.mjs`:

```js
const backendConfig = require('@haykal/eslint-config/backend');

module.exports = [
  ...backendConfig,
  // project-specific overrides
];
```

## Key Rules

- **No `any`** - `@typescript-eslint/no-explicit-any: error`
- **Naming conventions** - PascalCase for classes, camelCase for functions, UPPER_CASE for constants
- **Consistent type imports** - Enforces `import { type Foo }` syntax
- **No console.log** - Use logger service in backend/frontend/mobile (warn level)
- **Explicit return types** - Required in backend, optional in frontend/mobile

## Test Files

Test files (`*.spec.ts`, `*.test.ts`, `*.e2e-spec.ts`) have relaxed rules:

- `any` is allowed
- Explicit return types not required
- Console logging allowed
npm package: @haykal/feature-flags-backend
Description: Domain backend package for the **FeatureFlags** domain.
Latest version: 1.0.0

# @haykal/feature-flags-backend

Domain backend package for the **FeatureFlags** domain.

## Usage

```typescript
import { FeatureFlagsModule } from '@haykal/feature-flags-backend';

@Module({
  imports: [
    FeatureFlagsModule.forRoot({
      // configuration
    }),
  ],
})
export class AppModule {}
```

## Exports

- `FeatureFlagsModule` — Dynamic NestJS module
- `FeatureFlagEntity` — TypeORM entity
- `FEATURE_FLAGS_ENTITIES` — Entity array for migrations
- `FeatureFlagsService` — Business logic
- `FeatureFlagsRepository` — Data access layer
- `FeatureFlagsController` — HTTP endpoints
- DTOs, errors, and config types

## API Endpoints

| Method | Path                 | Description              |
| ------ | -------------------- | ------------------------ |
| POST   | `/feature-flags`     | Create a new featureFlag |
| GET    | `/feature-flags`     | List all feature-flags   |
| GET    | `/feature-flags/:id` | Get a featureFlag by ID  |
| PATCH  | `/feature-flags/:id` | Update a featureFlag     |
| DELETE | `/feature-flags/:id` | Delete a featureFlag     |
npm package: @haykal/feature-flags-client
Description: Domain client package for the **FeatureFlags** domain.
Latest version: 1.0.0

# @haykal/feature-flags-client

Domain client package for the **FeatureFlags** domain.

## Usage

```typescript
import { useFeatureflags } from '@haykal/feature-flags-client';

function FeatureflagsList() {
  const { data, isLoading } = useFeatureflags();

  if (isLoading) return <div>Loading...</div>;

  return (
    <ul>
      {data?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
```

## Generating the Client

Make sure the backend is running, then:

```bash
nx generate @haykal/feature-flags-client
```

This generates React Query hooks and TypeScript types from the OpenAPI spec.
npm package: @haykal/feature-flags-native
Description: Feature gating components, A/B test wrappers, remote config, and gradual rollout utilities for React Native.
Latest version: 1.0.0

# @haykal/feature-flags-native

Feature gating components, A/B test wrappers, remote config, and gradual rollout utilities for React Native.

## Install

```bash
pnpm add @haykal/feature-flags-native
```

## Usage

```ts
import {} from '@haykal/feature-flags-native';
```

## Exported subpaths

- `@haykal/feature-flags-native/hooks`
- `@haykal/feature-flags-native/components`
- `@haykal/feature-flags-native/providers`
- `@haykal/feature-flags-native/types`
- `@haykal/feature-flags-native/core`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/feature-flags-ui
Description: Haykal FeatureFlags UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/feature-flags-ui

Reusable UI components, forms, and screens for the **FeatureFlags** domain in the Haykal platform.

## Features

- 🎨 **Components** — Presentational building blocks
- 📝 **Forms** — React Hook Form + Zod validation
- 🖥️ **Screens** — Smart components with business logic
- 🪝 **Hooks** — Reusable React hooks
- ✅ **Schemas** — Zod validation schemas
- 📦 **TypeScript** — Full type safety

## Installation

This package is internal to the Haykal monorepo and installed automatically.

```bash
pnpm install
```

## Usage

### Import components

```typescript
import {} from /* YourComponent */ '@haykal/feature-flags-ui';
// or from sub-paths:
import {} from /* YourForm */ '@haykal/feature-flags-ui/forms';
import {} from /* YourScreen */ '@haykal/feature-flags-ui/screens';
```

### Example usage

```tsx
import {} from /* YourScreen */ '@haykal/feature-flags-ui/screens';

export default function FeatureFlagsPage() {
  return <YourScreen />;
}
```

## Structure

```
src/
├── index.ts              # Main barrel export
└── lib/
    ├── components/       # Presentational components
    ├── forms/            # Form components (React Hook Form + Zod)
    ├── screens/          # Smart components with business logic
    ├── hooks/            # Reusable React hooks
    ├── schemas/          # Zod validation schemas
    └── types/            # TypeScript types and interfaces
```

## Development

### Type checking

```bash
nx typecheck @haykal/feature-flags-ui
```

### Linting

```bash
nx lint @haykal/feature-flags-ui
```

## Dependencies

- `@haykal/ui` — Shared UI components (shadcn/ui)
- `@haykal/feature-flags-client` — Domain client SDK
- `@haykal/core-client` — Core client utilities
- `react-hook-form` — Form state management
- `zod` — Schema validation
- `@hookform/resolvers` — Zod resolver for RHF

## License

MIT
npm package: @haykal/form-builder
Description: Dynamic form generation from JSON schemas — configurable field registry, conditional fields, repeatable sections, and multi-step wizards on top of React Hook Form + Zod
Latest version: 1.0.0

# @haykal/form-builder

Dynamic form generation from JSON schemas — configurable field registry, conditional fields, repeatable sections, and multi-step wizards on top of React Hook Form + Zod

## Install

```bash
pnpm add @haykal/form-builder
```

## Usage

```ts
import {} from '@haykal/form-builder';
```

## Exported subpaths

- `@haykal/form-builder/types`
- `@haykal/form-builder/core`
- `@haykal/form-builder/hooks`
- `@haykal/form-builder/fields`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/i18n-client
Description: > React Query hooks for internationalization — fetch locales, translations, and manage translation entries.
Latest version: 1.0.0

# @haykal/i18n-client

> React Query hooks for internationalization — fetch locales, translations, and manage translation entries.

## Installation

```bash
pnpm add @haykal/i18n-client
```

## Setup

```typescript
import { initMutator } from '@haykal/i18n-client';

initMutator(); // Connects to HaykalClient singleton
```

## Hooks

### Public (i18n)

| Hook                         | Description                               |
| ---------------------------- | ----------------------------------------- |
| `useLocales()`               | List available locales                    |
| `useTranslations()`          | Get translations for a locale             |
| `useNamespaceTranslations()` | Get translations for a locale + namespace |

### Admin (i18n-admin)

| Hook                       | Description                   |
| -------------------------- | ----------------------------- |
| `useCreateTranslation()`   | Create a translation entry    |
| `useUpdateTranslation()`   | Update a translation entry    |
| `useDeleteTranslation()`   | Delete a translation entry    |
| `useMissingTranslations()` | Find missing translation keys |
| `useExportTranslations()`  | Export translations           |
| `useImportTranslations()`  | Import translations           |

### Imperative Functions

| Function                     | Description                                |
| ---------------------------- | ------------------------------------------ |
| `getLocales()`               | Fetch locales outside React                |
| `getTranslations()`          | Fetch translations outside React           |
| `getNamespaceTranslations()` | Fetch namespace translations outside React |

## Usage Examples

### Loading Translations

```tsx
import { useTranslations } from '@haykal/i18n-client';

function TranslatedPage() {
  const { data, isLoading } = useTranslations({ locale: 'en' });

  if (isLoading) return <div>Loading...</div>;

  return <h1>{data?.data?.['welcome.title']}</h1>;
}
```

### Managing Translations (Admin)

```tsx
import {
  useCreateTranslation,
  useMissingTranslations,
} from '@haykal/i18n-client';

function TranslationAdmin() {
  const { data: missing } = useMissingTranslations();
  const { mutate: create } = useCreateTranslation();

  return (
    <div>
      <h2>Missing Keys: {missing?.data?.length}</h2>
      <button
        onClick={() => create({ key: 'new.key', locale: 'en', value: 'Hello' })}
      >
        Add Translation
      </button>
    </div>
  );
}
```

## Regenerating

```bash
nx run @haykal/i18n-client:generate
```

> **Never edit files in `src/generated/`** — they are auto-generated by Orval.

## Related Packages

- `@haykal/i18n-backend` — Backend API
- `@haykal/core-client` — HTTP client and React Query provider

## Further Reading

- [Client SDK Generation](../../../docs/client-sdk-generation.md) — Orval pipeline and regeneration
- [API Reference](../../../docs/api-reference.md) — Backend endpoints these hooks call
npm package: @haykal/i18n-native
Description: Haykal I18n Native — Internationalization for React Native with RTL support, locale detection, language picker, and formatted components
Latest version: 1.0.0

# @haykal/i18n-native

Haykal I18n Native — Internationalization for React Native with RTL support, locale detection, language picker, and formatted components

## Install

```bash
pnpm add @haykal/i18n-native
```

## Usage

```ts
import {} from '@haykal/i18n-native';
```

## Exported subpaths

- `@haykal/i18n-native/hooks`
- `@haykal/i18n-native/screens`
- `@haykal/i18n-native/components`
- `@haykal/i18n-native/providers`
- `@haykal/i18n-native/utils`
- `@haykal/i18n-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/i18n-ui
Description: Haykal I18n UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/i18n-ui

Haykal I18n UI — Reusable UI components, forms, and screens

## Install

```bash
pnpm add @haykal/i18n-ui
```

## Usage

```ts
import {} from '@haykal/i18n-ui';
```

## Exported subpaths

- `@haykal/i18n-ui/components`
- `@haykal/i18n-ui/forms`
- `@haykal/i18n-ui/screens`
- `@haykal/i18n-ui/hooks`
- `@haykal/i18n-ui/schemas`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/jobs-client
Description: > React Query hooks for job queue management — inspect queues, monitor jobs, and control queue operations.
Latest version: 1.0.0

# @haykal/jobs-client

> React Query hooks for job queue management — inspect queues, monitor jobs, and control queue operations.

## Installation

```bash
pnpm add @haykal/jobs-client
```

## Setup

```typescript
import { initMutator } from '@haykal/jobs-client';

initMutator(); // Connects to HaykalClient singleton
```

## Hooks

### Queue Inspection

| Hook                        | Description                                 |
| --------------------------- | ------------------------------------------- |
| `useQueues()`               | List all queues with stats                  |
| `useQueue(name)`            | Get queue details                           |
| `useJobs(queueName, query)` | List jobs in a queue (filterable by status) |
| `useJob(queueName, jobId)`  | Get job details                             |

### Queue Control

| Hook                | Description                 |
| ------------------- | --------------------------- |
| `usePauseQueue()`   | Pause a queue               |
| `useResumeQueue()`  | Resume a paused queue       |
| `useRetryAllJobs()` | Retry all failed jobs       |
| `useCleanQueue()`   | Clean completed/failed jobs |

## Usage Examples

### Queue Dashboard

```tsx
import { useQueues } from '@haykal/jobs-client';

function QueueDashboard() {
  const { data, isLoading } = useQueues();

  if (isLoading) return <div>Loading...</div>;

  return (
    <table>
      <thead>
        <tr>
          <th>Queue</th>
          <th>Active</th>
          <th>Waiting</th>
          <th>Failed</th>
        </tr>
      </thead>
      <tbody>
        {data?.data?.map((q) => (
          <tr key={q.name}>
            <td>{q.name}</td>
            <td>{q.active}</td>
            <td>{q.waiting}</td>
            <td>{q.failed}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

### Retrying Failed Jobs

```tsx
import { useRetryAllJobs } from '@haykal/jobs-client';

function RetryButton({ queueName }: { queueName: string }) {
  const { mutate, isPending } = useRetryAllJobs();

  return (
    <button disabled={isPending} onClick={() => mutate({ name: queueName })}>
      Retry All Failed
    </button>
  );
}
```

## Regenerating

```bash
nx run @haykal/jobs-client:generate
```

> **Never edit files in `src/generated/`** — they are auto-generated by Orval.

## Related Packages

- `@haykal/jobs-backend` — Backend API with BullMQ
- `@haykal/core-client` — HTTP client and React Query provider

## Further Reading

- [Client SDK Generation](../../../docs/client-sdk-generation.md) — Orval pipeline and regeneration
- [API Reference](../../../docs/api-reference.md) — Backend endpoints these hooks call
npm package: @haykal/jobs-ui
Description: Haykal Jobs UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/jobs-ui

Reusable UI components, forms, and screens for the **Jobs** domain in the Haykal platform.

## Features

- 🎨 **Components** — Presentational building blocks
- 📝 **Forms** — React Hook Form + Zod validation
- 🖥️ **Screens** — Smart components with business logic
- 🪝 **Hooks** — Reusable React hooks
- ✅ **Schemas** — Zod validation schemas
- 📦 **TypeScript** — Full type safety

## Installation

This package is internal to the Haykal monorepo and installed automatically.

```bash
pnpm install
```

## Usage

### Import components

```typescript
import {} from /* YourComponent */ '@haykal/jobs-ui';
// or from sub-paths:
import {} from /* YourForm */ '@haykal/jobs-ui/forms';
import {} from /* YourScreen */ '@haykal/jobs-ui/screens';
```

### Example usage

```tsx
import {} from /* YourScreen */ '@haykal/jobs-ui/screens';

export default function JobsPage() {
  return <YourScreen />;
}
```

## Structure

```
src/
├── index.ts              # Main barrel export
└── lib/
    ├── components/       # Presentational components
    ├── forms/            # Form components (React Hook Form + Zod)
    ├── screens/          # Smart components with business logic
    ├── hooks/            # Reusable React hooks
    ├── schemas/          # Zod validation schemas
    └── types/            # TypeScript types and interfaces
```

## Development

### Type checking

```bash
nx typecheck @haykal/jobs-ui
```

### Linting

```bash
nx lint @haykal/jobs-ui
```

## Dependencies

- `@haykal/ui` — Shared UI components (shadcn/ui)
- `@haykal/jobs-client` — Domain client SDK
- `@haykal/core-client` — Core client utilities
- `react-hook-form` — Form state management
- `zod` — Schema validation
- `@hookform/resolvers` — Zod resolver for RHF

## License

MIT
npm package: @haykal/navigation-native
Description: @haykal/navigation-native package
Latest version: 1.0.0

# @haykal/navigation-native

@haykal/navigation-native package

## Install

```bash
pnpm add @haykal/navigation-native
```

## Usage

```ts
import {} from '@haykal/navigation-native';
```

## Exported subpaths

- `@haykal/navigation-native/guards`
- `@haykal/navigation-native/components`
- `@haykal/navigation-native/hooks`
- `@haykal/navigation-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/notifications-backend
Description: Multi-channel notification system for the Haykal platform.
Latest version: 1.0.0

# @haykal/notifications-backend

Multi-channel notification system for the Haykal platform.

## Features

- **Multi-channel delivery**: Email, Push, SMS, and In-App notifications
- **Template system**: Handlebars-based notification templates with variable interpolation
- **User preferences**: Per-type, per-channel notification preferences
- **Pluggable channels**: Implement `NotificationChannel` interface to add custom channels
- **Event-driven**: Trigger notifications via domain events or direct service API
- **Real-time**: SSE support for in-app notification streaming

## Usage

```typescript
import { NotificationsModule } from '@haykal/notifications-backend';

@Module({
  imports: [
    NotificationsModule.forRoot({
      channels: {
        inApp: { enabled: true },
        email: { enabled: false },
        push: { enabled: false },
        sms: { enabled: false },
      },
      defaultChannels: ['in_app'],
      retentionDays: 90,
    }),
  ],
})
export class AppModule {}
```

## Sending Notifications

```typescript
@Injectable()
export class OrdersService {
  constructor(private readonly notifications: NotificationSenderService) {}

  async shipOrder(orderId: string) {
    await this.notifications.send({
      userId: order.userId,
      type: 'order.shipped',
      data: { orderId, trackingNumber },
    });
  }
}
```

## Key Exports

| Export                         | Type          | Description                                     |
| ------------------------------ | ------------- | ----------------------------------------------- |
| `NotificationsModule`          | NestJS Module | Main module with `forRoot()` / `forRootAsync()` |
| `NotificationSenderService`    | Service       | Send notifications across channels              |
| `NotificationEntity`           | Entity        | Notification records                            |
| `NotificationPreferenceEntity` | Entity        | User notification preferences                   |
| `NotificationTemplateEntity`   | Entity        | Notification templates                          |
| `NOTIFICATION_ENTITIES`        | Array         | Entities for migration discovery                |
| `EmailChannel`                 | Channel       | Email notification delivery                     |
| `InAppChannel`                 | Channel       | In-app notification (SSE)                       |
| `PushChannel`                  | Channel       | Push notification delivery                      |
| `SmsChannel`                   | Channel       | SMS notification delivery                       |

## Related Packages

- `@haykal/notifications-client` — React Query hooks for notifications
- `@haykal/email-backend` — Email delivery provider
- `@haykal/jobs-backend` — Queue integration for async delivery
- `@haykal/core-backend` — Base infrastructure

## Further Reading

- [API Reference](../../../docs/api-reference.md) — Full endpoint listing
- [Backend Style Guide](../../../docs/backend-styleguide.md) — Coding conventions
npm package: @haykal/notifications-client
Description: > React Query hooks for notifications — list, read, manage preferences, and track unread counts.
Latest version: 1.0.0

# @haykal/notifications-client

> React Query hooks for notifications — list, read, manage preferences, and track unread counts.

## Installation

```bash
pnpm add @haykal/notifications-client
```

## Setup

```typescript
import { initMutator } from '@haykal/notifications-client';

initMutator(); // Connects to HaykalClient singleton
```

## Hooks

### Notifications

| Hook                              | Description                        |
| --------------------------------- | ---------------------------------- |
| `useNotifications()`              | List notifications (paginated)     |
| `useUnreadNotificationCount()`    | Get unread notification count      |
| `useMarkNotificationAsRead()`     | Mark a single notification as read |
| `useMarkAllNotificationsAsRead()` | Mark all notifications as read     |
| `useDeleteNotification()`         | Delete a notification              |

### Preferences

| Hook                                 | Description                                |
| ------------------------------------ | ------------------------------------------ |
| `useNotificationPreferences()`       | Get user's notification preferences        |
| `useUpdateNotificationPreferences()` | Update preferences (per-type, per-channel) |

## Usage Examples

### Notification Bell

```tsx
import {
  useUnreadNotificationCount,
  useNotifications,
} from '@haykal/notifications-client';

function NotificationBell() {
  const { data: count } = useUnreadNotificationCount();
  const { data: notifications } = useNotifications();

  return (
    <div>
      <span>Unread: {count?.data ?? 0}</span>
      <ul>
        {notifications?.data?.map((n) => (
          <li key={n.id}>{n.title}</li>
        ))}
      </ul>
    </div>
  );
}
```

### Managing Preferences

```tsx
import {
  useNotificationPreferences,
  useUpdateNotificationPreferences,
} from '@haykal/notifications-client';

function PreferencesPanel() {
  const { data } = useNotificationPreferences();
  const { mutate } = useUpdateNotificationPreferences();

  return (
    <label>
      <input
        type="checkbox"
        checked={data?.data?.emailEnabled}
        onChange={(e) => mutate({ emailEnabled: e.target.checked })}
      />
      Email notifications
    </label>
  );
}
```

## Regenerating

```bash
nx run @haykal/notifications-client:generate
```

> **Never edit files in `src/generated/`** — they are auto-generated by Orval.

## Related Packages

- `@haykal/notifications-backend` — Backend API with multi-channel delivery
- `@haykal/core-client` — HTTP client and React Query provider

## Further Reading

- [Client SDK Generation](../../../docs/client-sdk-generation.md) — Orval pipeline and regeneration
- [API Reference](../../../docs/api-reference.md) — Backend endpoints these hooks call
npm package: @haykal/notifications-native
Description: @haykal/notifications-native package
Latest version: 1.0.0

# @haykal/notifications-native

@haykal/notifications-native package

## Install

```bash
pnpm add @haykal/notifications-native
```

## Usage

```ts
import {} from '@haykal/notifications-native';
```

## Exported subpaths

- `@haykal/notifications-native/hooks`
- `@haykal/notifications-native/screens`
- `@haykal/notifications-native/components`
- `@haykal/notifications-native/providers`
- `@haykal/notifications-native/types`

## Notes

- This package is published from the Haykal monorepo.
- Runtime code is shipped from the published package contents instead of workspace-only source paths.
npm package: @haykal/notifications-ui
Description: Haykal Notifications UI — Reusable UI components, forms, and screens
Latest version: 1.0.0

# @haykal/notifications-ui

Reusable UI components, forms, and screens for the **Notifications** domain in the Haykal platform.

## Features

- 🎨 **Components** — Presentational building blocks
- 📝 **Forms** — React Hook Form + Zod validation
- 🖥️ **Screens** — Smart components with business logic
- 🪝 **Hooks** — Reusable React hooks
- ✅ **Schemas** — Zod validation schemas
- 📦 **TypeScript** — Full type safety

## Installation

This package is internal to the Haykal monorepo and installed automatically.

```bash
pnpm install
```

## Usage

### Import components

```typescript
import {} from /* YourComponent */ '@haykal/notifications-ui';
// or from sub-paths:
import {} from /* YourForm */ '@haykal/notifications-ui/forms';
import {} from /* YourScreen */ '@haykal/notifications-ui/screens';
```

### Example usage

```tsx
import {} from /* YourScreen */ '@haykal/notifications-ui/screens';

export default function NotificationsPage() {
  return <YourScreen />;
}
```

## Structure

```
src/
├── index.ts              # Main barrel export
└── lib/
    ├── components/       # Presentational components
    ├── forms/            # Form components (React Hook Form + Zod)
    ├── screens/          # Smart components with business logic
    ├── hooks/            # Reusable React hooks
    ├── schemas/          # Zod validation schemas
    └── types/            # TypeScript types and interfaces
```

## Development

### Type checking

```bash
nx typecheck @haykal/notifications-ui
```

### Linting

```bash
nx lint @haykal/notifications-ui
```

## Dependencies

- `@haykal/ui` — Shared UI components (shadcn/ui)
- `@haykal/notifications-client` — Domain client SDK
- `@haykal/core-client` — Core client utilities
- `react-hook-form` — Form state management
- `zod` — Schema validation
- `@hookform/resolvers` — Zod resolver for RHF

## License

MIT