looming/ui

Une bibliothèque de composants UI moderne et accessible construite avec Twig et Tailwind CSS

Maintainers

Details

github.com/LoomingPlatform/looming-ui

Source

Issues

Installs: 4

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 0

Forks: 0

Open Issues: 0

Language:Twig

pkg:composer/looming/ui

v1.0.1 2025-06-05 09:25 UTC

Requires

Requires (Dev)

MIT d16954425fe1342c2c85b8a82fd2f8c42b3fcdb1

  • Eric Laugier <devteam.woop@looming.zone>

This package is auto-updated.

Last update: 2025-12-05 12:34:57 UTC

README

Latest Version on Packagist Total Downloads

Une bibliothèque de composants UI moderne et accessible construite avec Twig et Tailwind CSS, inspirée de shadcn/ui.

🚀 Fonctionnalités

  • 🎨 Composants accessibles et personnalisables
  • 🌗 Support du mode sombre
  • 🛠 Construit avec Tailwind CSS pour une personnalisation facile
  • 📦 Légère et performante
  • 🔍 Compatible avec les moteurs de recherche
  • 🎯 Axée sur l'expérience développeur
  • 🧩 Intégration facile avec les frameworks PHP populaires (Symfony, Laravel, etc.)
  • 🔥 Hot-reload pendant le développement

📦 Installation

Prérequis

  • PHP 8.0 ou supérieur
  • Node.js 14+ et npm/yarn
  • Composer

Installation via Composer

composer require looming/ui

Installation des dépendances frontend

npm install --save-dev tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography

🛠 Configuration

Configuration de Tailwind CSS

Créez un fichier tailwind.config.js à la racine de votre projet :

// tailwind.config.js
module.exports = {
  content: [
    "./templates/**/*.html.twig",
    "./assets/**/*.js",
    "./vendor/looming/ui/src/**/*.twig",
    "./vendor/looming/ui/src/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Configuration de Vite/Webpack

Assurez-vous que votre configuration Vite ou Webpack inclut les fichiers de la bibliothèque :

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@looming/ui': path.resolve(__dirname, './vendor/looming/ui/src'),
    },
  },
});

🎯 Utilisation

Intégration dans un projet

  1. Incluez le CSS et le JavaScript dans votre template de base :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Application</title>
    
    {# Inclure le CSS de Looming UI #}
    <link rel="stylesheet" href="{{ asset('build/looming-ui.css') }}">
    
    {# Votre CSS personnalisé #}
    {{ encore_entry_link_tags('app') }}
</head>
<body class="bg-white dark:bg-gray-900">
    {% block body %}{% endblock %}
    
    {# Alpine.js est requis pour les composants interactifs #}
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    
    {# Votre JavaScript personnalisé #}
    {{ encore_entry_script_tags('app') }}
</body>
</html>
  1. Utilisez les composants dans vos templates Twig :
{% extends 'base.html.twig' %}

{% block body %}
    <div class="container mx-auto p-4">
        {# Exemple d'utilisation du composant Button #}
        {% include '@looming/components/Button/Button.twig' with {
            variant: 'primary',
            size: 'md',
            label: 'Cliquez-moi',
            icon: 'plus',
            disabled: false
        } %}
        
        {# Exemple d'utilisation du composant Combobox #}
        {% include '@looming/components/Combobox/Combobox.twig' with {
            name: 'my_combobox',
            options: [
                { value: '1', label: 'Option 1' },
                { value: '2', label: 'Option 2' },
                { value: '3', label: 'Option 3' }
            ],
            placeholder: 'Sélectionnez une option',
            variant: 'primary',
            size: 'md'
        } %}
    </div>
{% endblock %}

📚 Composants disponibles

Composant Description
Button Bouton personnalisable avec différentes variantes et tailles
Combobox Menu déroulant avec recherche et sélection
Sheet Panneau coulissant (drawer)
Slider Curseur de sélection de valeur
Plus à venir...

🎨 Personnalisation

Thèmes

Vous pouvez personnaliser les couleurs, les espacements et plus en modifiant votre configuration Tailwind :

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... jusqu'à 900
        },
      },
    },
  },
  // ...
}

Variables CSS personnalisées

Toutes les variables CSS sont définies dans src/styles/theme.css et peuvent être écrasées dans votre propre CSS :

:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  /* ... autres variables ... */
}

🚀 Développement

  1. Clonez le dépôt :
git clone https://github.com/votre-utilisateur/looming-ui-components.git
cd looming-ui-components
  1. Installez les dépendances :
npm install
composer install
  1. Lancez le serveur de développement :
npm run dev
  1. Construisez pour la production :
npm run build

🤝 Contribution

Les contributions sont les bienvenues ! Voici comment contribuer :

  1. Forkez le projet
  2. Créez une branche pour votre fonctionnalité (git checkout -b feature/AmazingFeature)
  3. Committez vos changements (git commit -m 'Add some AmazingFeature')
  4. Poussez vers la branche (git push origin feature/AmazingFeature)
  5. Ouvrez une Pull Request

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

🙏 Remerciements

{% include '@components/Button/Button.twig' with {
    label: 'Cliquez-moi',
    variant: 'default',
    size: 'default'
} %}

📚 Documentation

Consultez la documentation complète dans le dossier docs/ pour plus de détails sur l'utilisation des composants.

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou à soumettre une pull request.

📝 Licence

MIT