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

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

Configuration Supabase

1. Créez un projet sur Supabase
2. Ajoutez les variables d'environnement suivantes à votre projet :

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 :

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 :

npm install -D tailwindcss postcss autoprefixer

2. Créez ou mettez à jour votre fichier tailwind.config.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 :

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

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

Utilisation

Composant autonome

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

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