npm package: @smartenergyarlep/ui-componentsv2
Description: Bibliothèque de composants UI réutilisables pour les widgets Mendix React
Author: Arthur Lepley
Latest version: 0.1.3

# @smartenergyarlep/ui-componentsv2

Bibliothèque de composants UI réutilisables pour les widgets Mendix React, avec un thème spécifique pour l'énergie.

## Installation

```bash
npm install @smartenergyarlep/ui-componentsv2
```

## Configuration dans votre widget Mendix

1. Installez les dépendances Tailwind :
```bash
npm install -D tailwindcss postcss autoprefixer
```

2. Créez un fichier `tailwind.config.js` :
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@smartenergyarlep/ui-componentsv2/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        electricite: "#38a13c",
        gaz: "#f9be01",
        eau: "#3293f3",
        air: "#66d8e6",
        primary: "#18213e"
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
}
```

3. Créez un fichier `postcss.config.js` :
```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

4. Ajoutez les styles Tailwind dans votre CSS :
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Utilisation

### EnergyPriceForm

```tsx
import { EnergyPriceForm } from "@smartenergyarlep/ui-componentsv2";

export function MyWidget() {
  const handleSubmit = (price) => {
    console.log(price);
  };

  return (
    <EnergyPriceForm
      type="electricite"
      onSubmit={handleSubmit}
    />
  );
}
```

### DateRangePicker personnalisé

```tsx
import { DateRangePicker } from "@smartenergyarlep/ui-componentsv2";

export function MyWidget() {
  const [dateRange, setDateRange] = useState();

  return (
    <DateRangePicker
      label="Période"
      value={dateRange}
      onChange={setDateRange}
      variant="electricite"
      required
    />
  );
}
```

### PriceInput personnalisé

```tsx
import { PriceInput } from "@smartenergyarlep/ui-componentsv2";

export function MyWidget() {
  const [price, setPrice] = useState("");

  return (
    <PriceInput
      label="Prix"
      value={price}
      onChange={setPrice}
      variant="electricite"
      required
    />
  );
}
```

## Composants disponibles

### Composants primitifs
- Button
- Calendar
- Card
- Input
- Label
- Popover
- Et bien plus...

### Composants personnalisés
- DateRangePicker
- PriceInput

### Composants métier
- EnergyPriceForm

## Thèmes

La bibliothèque inclut des thèmes spécifiques pour différents types d'énergie :
- Électricité (#38a13c)
- Gaz (#f9be01)
- Eau (#3293f3)
- Air (#66d8e6)

## Types disponibles

```typescript
interface EnergyPrice {
  id?: string;
  startDate: Date;
  endDate: Date;
  price: number;
  type: "electricite" | "gaz" | "eau" | "air";
}

interface DateRangePickerProps {
  value?: DateRange;
  onChange?: (date: DateRange | undefined) => void;
  variant?: "electricite" | "gaz" | "eau" | "air";
  // ...autres props
}

interface PriceInputProps {
  value?: string;
  onChange?: (value: string) => void;
  variant?: "electricite" | "gaz" | "eau" | "air";
  // ...autres props
}
```

## Développement

```bash
# Installation des dépendances
npm install

# Mode développement
npm run dev

# Build
npm run build

# Lint
npm run lint
```

## License

MIT