npm package: @onweb/react-lunar-calendar-fr
Description: Un composant React pour afficher un calendrier lunaire en français avec les phases de la lune et des conseils quotidiens.
Latest version: 0.0.7

# React Lunar Calendar (FR)

Un composant React pour afficher un calendrier lunaire en français avec les phases de la lune et des conseils quotidiens.

## Installation

```bash
npm install @onweb/react-lunar-calendar-fr
```

## Configuration Supabase

1. Créez un projet sur [Supabase](https://supabase.com)
2. Ajoutez les variables d'environnement suivantes à votre projet :

```env
VITE_SUPABASE_URL=votre_url_supabase
VITE_SUPABASE_ANON_KEY=votre_clé_anon_supabase
```

3. Exécutez la migration SQL suivante dans votre projet Supabase :

```sql
CREATE TABLE IF NOT EXISTS user_profiles (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES auth.users NOT NULL,
  name text NOT NULL,
  birth_date date NOT NULL,
  created_at timestamptz DEFAULT now(),
  updated_at timestamptz DEFAULT now()
);

ALTER TABLE user_profiles ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can read own profile"
  ON user_profiles FOR SELECT
  TO authenticated
  USING (auth.uid() = user_id);

CREATE POLICY "Users can create own profile"
  ON user_profiles FOR INSERT
  TO authenticated
  WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own profile"
  ON user_profiles FOR UPDATE
  TO authenticated
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = now();
  RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_user_profiles_updated_at
  BEFORE UPDATE ON user_profiles
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();
```

## Configuration Tailwind CSS

1. Assurez-vous d'avoir Tailwind CSS installé dans votre projet :

```bash
npm install -D tailwindcss postcss autoprefixer
```

2. Créez ou mettez à jour votre fichier `tailwind.config.js` :

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@onweb/react-lunar-calendar-fr/dist/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

3. Importez les styles du package dans votre fichier CSS principal :

```css
@import '@onweb/react-lunar-calendar-fr/dist/style.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Utilisation

### Composant autonome

```jsx
import { LunarCalendar } from '@onweb/react-lunar-calendar-fr';

function App() {
  return (
    <LunarCalendar 
      showHomeLink={true} // Optionnel: affiche/masque le lien d'accueil
      homePath="/" // Optionnel: chemin du lien d'accueil
      className="" // Optionnel: classes CSS additionnelles
    />
  );
}
```

### Application complète avec routage

```jsx
import { LunarApp } from '@onweb/react-lunar-calendar-fr';

function App() {
  return (
    <LunarApp calendarPath="/mon-calendrier" /> // Le chemin par défaut est "/calendrier"
  );
}
```

## Prérequis

Ce package nécessite les dépendances suivantes dans votre projet :

- react
- react-dom
- react-router-dom
- @supabase/supabase-js
- lucide-react
- tailwindcss
- postcss
- autoprefixer

## Props

### LunarCalendar

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| showHomeLink | boolean | true | Affiche ou masque le lien de retour à l'accueil |
| homePath | string | "/" | Chemin du lien de retour à l'accueil |
| className | string | "" | Classes CSS additionnelles pour le conteneur principal |

### LunarApp

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| calendarPath | string | "/calendrier" | Chemin d'accès au calendrier lunaire |

## Fonctionnalités

- Authentification utilisateur avec Supabase
- Stockage des profils utilisateurs dans Supabase
- Affichage de la phase lunaire actuelle
- Navigation entre les jours
- Calcul de l'illumination lunaire
- Conseils quotidiens basés sur la phase de la lune
- Interface en français
- Design responsive et moderne
- Intégration avec TailwindCSS
- Routage configurable

## License

MIT