@adfinitas.fr/adfinitas-ui NPM

Adfinitas UI

📋 Vue d'ensemble

Adfinitas UI est une bibliothèque de composants Svelte développée par et pour l'équipe d'Adfinitas. Elle propose un ensemble cohérent de composants réutilisables pour accélérer et standardiser le développement des interfaces utilisateur dans les projets web de l'agence.

✨ Points clés

🎯 Composants optimisés : Ensemble de composants UI prêts à l'emploi, testés et optimisés
📦 Architecture modulaire : Organisation par modules (Spa, Shared, etc.) pour une meilleure maintenabilité
🔧 Intégration simple : Compatible avec les projets Svelte/SvelteKit existants
🎨 Personnalisable : Utilise TailwindCSS pour une personnalisation flexible
📱 Responsive : Composants adaptables à tous les formats d'écran

🚀 Pour commencer

Prérequis

Node.js (version 16 ou supérieure)
npm ou yarn
Un projet Svelte/SvelteKit existant

Configuration de TailwindCSS

Installation des dépendances

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration de PostCSS dans svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

Configuration des chemins dans tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configuration des styles dans app.css

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

Import des styles dans +layout.svelte

<script>
  import "../app.css";
</script>

<slot />

Installation d'Adfinitas UI

Configuration de l'authentification npm
Ajoutez votre token d'authentification dans .npmrc :
```
//registry.npmjs.org/:_authToken=votre_token
```
Installation du package
```
npm install @adfinitas.fr/adfinitas-ui
```

Mise à jour de tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@adfinitas.fr/adfinitas-ui/dist/components/**/*.{svelte,js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

💻 Utilisation

Import et utilisation des composants

Les composants sont organisés en modules pour une meilleure organisation. Voici un exemple d'utilisation :

<script>
    import { Modal } from "@adfinitas.fr/adfinitas-ui/shared";
    import { RangeSlider } from "@adfinitas.fr/adfinitas-ui/la-spa.fr";
</script>

<Modal
    class="flex flex-col items-center justify-center overflow-hidden bg-slate-200 p-8"
    isOpen
    animate
>
    <RangeSlider
       itemsColor="#363027"
       amountsToDisplay={[10, 20, 30]}
       thankSentence="Merci pour votre don !"
       formIconUrl="https://fundraisers.be/images/-2023-5/Adfinitas-logo-OK.png"
       classes="my-custom-class"
       submit={(amount) => console.log('submit', amount)}
       amountChange={(amount) => console.log('amountChange', amount)}
    />
</Modal>

📚 Documentation

Documentation complète : Storybook Adfinitas UI
Guide de contribution : Consultez README-ISSUES.md

🤝 Contribution

Nous encourageons les contributions ! Voici comment participer :

Fork du projet
Création d'une branche pour votre fonctionnalité (git checkout -b feature/AmazingFeature)
Commit de vos changements (git commit -m 'Add: Amazing Feature')
Push vers la branche (git push origin feature/AmazingFeature)
Ouverture d'une Pull Request

Pour plus de détails, consultez notre guide de contribution dans README-ISSUES.md.