# Orphic UI Search Bar Builder

Application React autonome pour configurer et personnaliser les barres de recherche Orphic UI.

## Structure du projet

```
features/react-search-bar/
├── build/               # Fichiers compilés (générés)
├── src/                 # Code source React
│   ├── index.js         # Point d'entrée de l'application
│   ├── App.js           # Composant principal
│   └── App.css          # Styles CSS
├── package.json         # Dépendances et scripts
└── webpack.config.js    # Configuration webpack
```

## Intégration WordPress

Le script est chargé dans l'admin WordPress via la fonction `load_search_builder_script` dans `admin/class-orphic-ui-admin.php`. Cette fonction:

- Détecte si l'utilisateur est sur la page d'édition/création d'une barre de recherche
- Charge les scripts React et ReactDOM (si nécessaire)
- Charge le script compilé depuis `features/react-search-bar/build/search-builder.js`

Le hook pour charger les CPT "search_bar_orphic_ui" est dans `public/class-orphic-ui-public.php` dans la fonction `create_search_bar_post_type`

## Installation et build

### Prérequis

- Node.js (v14+)
- npm

### Installation

```bash
# Naviguer vers le dossier du projet
cd features/react-search-bar

# Installer les dépendances
npm install
```

### Commandes disponibles

```bash
# Build de production
npm run build

# Mode développement avec watch (recompile à chaque changement)
npm start
```

Le fichier compilé (`search-builder.js`) sera généré dans le dossier `build/`.

## Données transmises de WordPress à React

WordPress transmet plusieurs paramètres à l'application React via `wp_localize_script`. Ces données sont accessibles dans le code React via l'objet global `window.page_data`.
Non les passons a un store pour decoupler les données de la vue et garder une consitance dans les données niveau application.

```php
wp_localize_script(
  'orphic-ui-search-builder',
  'page_data',
  array(
    'restUrl' => rest_url('orphic-ui/v1/'),
    'nonce' => wp_create_nonce('wp_rest'),
    'postId' => isset($post) ? $post->ID : 0,
    'isNewPost' => $is_new_post,
    'postStatus' => isset($post) ? $post->post_status : '',
    'postType' => 'search_bar_orphic_ui'
  )
);
```

### Description des paramètres

| Paramètre    | Description                                    | Utilisation dans React                                                          |
| ------------ | ---------------------------------------------- | ------------------------------------------------------------------------------- |
| `restUrl`    | URL de base pour les appels à l'API REST WP    | Construction des endpoints pour les requêtes API                                |
| `nonce`      | Jeton de sécurité pour l'authentification WP   | Authentification des requêtes API (en-tête `X-WP-Nonce`)                        |
| `postId`     | ID du post en cours d'édition                  | Chargement et sauvegarde de la configuration de la barre de recherche           |
| `isNewPost`  | Indique s'il s'agit d'un nouveau post          | Adaptation de l'interface (configuration par défaut vs configuration existante) |
| `postStatus` | Statut du post (auto-draft, publish, etc.)     | Logique conditionnelle et messages utilisateur selon l'état                     |
| `postType`   | Type de post (toujours 'search_bar_orphic_ui') | Validation et construction d'URLs                                               |

## Personnalisation

### Modifier les options disponibles

Les options de personnalisation sont définies dans le composant `App.js`. Ajoutez ou modifiez les éléments dans la section `search-builder-sidebar`.

### Styles

Les styles CSS sont définis dans `App.css`. Le fichier est importé dans l'application React et sera inclus dans le bundle final.

## Endpoints API

Pour sauvegarder les configurations, créez des endpoints REST API dans WordPress:

```php
register_rest_route('orphic-ui/v1', '/search-bar/(?P<id>\d+)', array(
  'methods' => 'GET',
  'callback' => 'get_search_bar_config',
  'permission_callback' => function() {
    return current_user_can('edit_posts');
  }
));

register_rest_route('orphic-ui/v1', '/search-bar/(?P<id>\d+)', array(
  'methods' => 'POST',
  'callback' => 'update_search_bar_config',
  'permission_callback' => function() {
    return current_user_can('edit_posts');
  }
));
```
