npm package: @jopijs/jopimod_uicore
Description: This module is the **Standard Library** of the JopiJS framework. It provides the essential building blocks, hooks, and utilities required to build the user interface and handle client-side logic.
Latest version: 1.0.3

# @jopijs/jopimod_uicore

This module is the **Standard Library** of the JopiJS framework. It provides the essential building blocks, hooks, and utilities required to build the user interface and handle client-side logic.

## Role of the Module

The `mod_uicore` module serves as the foundation for:

-   **Routing & Navigation**: Provides standard hooks (`useLocation`, `useNavigate`) and the `<Link>` component.
-   **Client-Server Communication**: Utilities to easily send JSON or Form data to the server (`useSubmit`, `sendJsonData`).
-   **User Session Management**: hooks to access current user info (`useGetInfos`) and check permissions (`useHasAllRoles`, `<CheckRoles>`).
-   **Cross-Tab Communication**: The `CrossTabEvent` class to synchronize state between multiple browser tabs.

## Structure

The module organizes its features through standard aliases:

-   `@alias/hooks`: React hooks for logic (navigation, user session, network).
-   `@alias/lib`: Pure logic classes and functions (CrossTabEvent, string tools).
-   `@alias/ui`: Core UI components (Link, CheckRoles, Composite).

## API Reference

### Navigation (Router)
-   `useNavigate()`: Programmatically change routes.
-   `useLocation()`: Get current location object.
-   `useParams()`: Get route parameters (e.g. `id` in `/product/:id`).
-   `useSearchParams()`: Get query parameters (`?q=search`).
-   `<Link to="...">`: Declarative navigation component.

### User & Authentication
-   `useGetInfos()`: Returns the current user's profile (or anonymous).
-   `useHasAllRoles(roles[])`: Returns `true` if user has all specified roles.
-   `useLogOut()`: Function to log the user out.
-   `<CheckRoles roles={[...]}>`: Conditionally renders content based on permissions.

### Server Interaction
-   `useSubmit(url, options)`: Hook to handle form submissions with loading states.
-   `sendJsonData(url, data)`: Helper to POST JSON data.

### Utilities
-   `CrossTabEvent`: Class to broadcast events to other open tabs of the same application.
-   `Composite`: Component to create "slots" where other modules can inject content.

## Examples

### 1. Navigation

```tsx
import { Link } from "jopijs/router"; // Mapped to @alias/ui/jopijs.page.Link
import useNavigate from "jopijs/router/useNavigate"; // Mapped to hooks

export const MyNav = () => {
    const navigate = useNavigate();

    return (
        <div>
            <Link to="/home">Go Home</Link>
            <button onClick={() => navigate("/dashboard")}>
                Go to Dashboard
            </button>
        </div>
    );
};
```

### 2. Checking Permissions

```tsx
import { CheckRoles } from "jopijs/security"; // Mapped to user components
import useGetInfos from "@/hooks/jopijs.user.useGetInfos";

export const AdminPanel = () => {
    const user = useGetInfos();

    return (
        <CheckRoles roles={["ADMIN"]}>
            <h1>Welcome, {user.login}</h1>
            <p>You have access to the secret panel.</p>
        </CheckRoles>
    );
};
```

### 3. Synchronizing Tabs

```typescript
import { CrossTabEvent } from "@/lib/jopijs.client.CrossTabEvent";

const sync = new CrossTabEvent("my.app.sync");

// Send signal
sync.emit({ some: "data" });

// Listen in another tab
sync.listen((data) => {
    console.log("Received Sync:", data);
});
```