README

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

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>

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

Clonez le dépôt :

git clone https://github.com/votre-utilisateur/looming-ui-components.git
cd looming-ui-components

Installez les dépendances :

npm install
composer install

Lancez le serveur de développement :

npm run dev

Construisez pour la production :

npm run build

🤝 Contribution

Les contributions sont les bienvenues ! Voici comment contribuer :

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

📄 Licence

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

🙏 Remerciements

Tailwind CSS
Alpine.js
shadcn/ui pour l'inspiration

{% 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

looming/ui

包简介

README 文档

README

🚀 Fonctionnalités

📦 Installation

Prérequis

Installation via Composer

Installation des dépendances frontend

🛠 Configuration

Configuration de Tailwind CSS

Configuration de Vite/Webpack

🎯 Utilisation

Intégration dans un projet

📚 Composants disponibles

🎨 Personnalisation

Thèmes

Variables CSS personnalisées

🚀 Développement

🤝 Contribution

📄 Licence

🙏 Remerciements

📚 Documentation

🤝 Contribution

📝 Licence

统计信息

GitHub 信息

其他信息