Ziama Component Library

Une bibliothèque de composants React/TypeScript prête pour la production, construite avec Tailwind CSS.

Installation

npm install ziama-component-library

ou

yarn add ziama-component-library

Prérequis

Cette bibliothèque nécessite :

• React 18+ et React DOM 18+ comme dépendances peer
• Pour les composants de graphiques (BarChart, PieChart, LineChart, AreaBump, Bump) :
  • @nivo/core@^0.87.0
  • @nivo/bar@^0.87.0 (pour BarChart)
  • @nivo/pie@^0.87.0 (pour PieChart)
  • @nivo/line@^0.87.0 (pour LineChart)
  • @nivo/bump@^0.87.0 (pour AreaBump et Bump)

Installez les dépendances Nivo nécessaires selon les composants que vous utilisez :

npm install @nivo/core @nivo/bar @nivo/pie @nivo/line @nivo/bump

Utilisation

import { BarChart, PieChart, LineChart } from "ziama-component-library";
import "ziama-component-library/dist/index.css"; // Importez les styles

function App() {
  // Données pour BarChart
  const barData = [
    { country: "France", vente: 145 },
    { country: "USA", vente: 175 },
    { country: "Espagne", vente: 98 },
  ];

  // Données pour PieChart
  const pieData = [
    { id: "React", label: "React", value: 420 },
    { id: "Vue", label: "Vue", value: 280 },
    { id: "Angular", label: "Angular", value: 200 },
  ];

  // Données pour LineChart
  const lineData = [
    {
      id: "Ventes",
      data: [
        { x: "Jan", y: 120 },
        { x: "Fév", y: 145 },
        { x: "Mar", y: 98 },
        { x: "Avr", y: 167 },
      ],
    },
  ];

  return (
    <div>
      <BarChart
        data={barData}
        keys={["vente"]}
        indexBy="country"
        height={400}
      />

      <PieChart data={pieData} height={400} />

      <LineChart data={lineData} height={400} />
    </div>
  );
}

Composants

Button

Un composant bouton avec plusieurs variantes et tailles.

<Button variant="primary" size="medium" onClick={() => console.log("clicked")}>
  Cliquer
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'danger' (défaut: 'primary')
• size: 'small' | 'medium' | 'large' (défaut: 'medium')
• disabled: boolean (défaut: false)
• onClick: () => void
• type: 'button' | 'submit' | 'reset' (défaut: 'button')
• className: string

Card

Un composant carte pour afficher du contenu structuré.

<Card title="Titre" shadow onClick={() => console.log("card clicked")}>
  <p>Contenu</p>
</Card>

Props:

• title: string (optionnel)
• shadow: boolean (défaut: true)
• onClick: () => void (optionnel)
• className: string

Input

Un composant input avec support du label et des erreurs.

<Input
  label="Email"
  type="email"
  placeholder="[email protected]"
  required
  error={errors.email}
  onChange={(e) => setEmail(e.target.value)}
/>

Props:

• value: string (contrôlé)
• defaultValue: string (non contrôlé)
• placeholder: string
• type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' (défaut: 'text')
• disabled: boolean (défaut: false)
• required: boolean (défaut: false)
• label: string
• error: string
• onChange: (e: React.ChangeEvent) => void
• onBlur: (e: React.FocusEvent) => void
• name: string
• id: string
• className: string

Développement

Installation des dépendances

npm install

Build

npm run build

Développement en mode watch

npm run dev

Vérification des types

npm run type-check

Linting

npm run lint

Tester avec Storybook

Storybook est configuré pour visualiser et tester tous vos composants :

npm run storybook

Cela ouvrira Storybook dans votre navigateur à http://localhost:6006 où vous pourrez :

• Voir tous vos composants avec leurs différentes variantes
• Tester les props en temps réel avec les contrôles interactifs
• Consulter la documentation automatique
• Tester les interactions et les états

Pour plus de détails, consultez STORYBOOK.md

Publication sur npm

1. Assurez-vous que votre code est prêt et testé
2. Mettez à jour la version dans package.json
3. Exécutez npm run build
4. Publiez avec npm publish

Licence

MIT