@smartenergyarlep/ui-componentsv2 v0.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

npm install @smartenergyarlep/ui-componentsv2

Configuration dans votre widget Mendix

1. Installez les dépendances Tailwind :

npm install -D tailwindcss postcss autoprefixer

2. Créez un fichier tailwind.config.js :

/** @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 :

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

4. Ajoutez les styles Tailwind dans votre CSS :

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

Utilisation

EnergyPriceForm

import { EnergyPriceForm } from "@smartenergyarlep/ui-componentsv2";

export function MyWidget() {
  const handleSubmit = (price) => {
    console.log(price);
  };

  return (
    <EnergyPriceForm
      type="electricite"
      onSubmit={handleSubmit}
    />
  );
}

DateRangePicker personnalisé

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é

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

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

# Installation des dépendances
npm install

# Mode développement
npm run dev

# Build
npm run build

# Lint
npm run lint

License

MIT