Getting Started

Minimal Setup

Installation Add the bundle via Composer:

composer require codedmonkey/semantic-ui-bundle

Enable the bundle in config/bundles.php:

return [
    // ...
    CodedMonkey\SemanticUIBundle\CodedMonkeySemanticUIBundle::class => ['all' => true],
];

Basic Usage Include the CSS/JS assets in your base template (base.html.twig):
```
{{ semantic_ui_css() }}
{{ semantic_ui_js() }}
```

First Form Integration Use the form_theme directive in your Twig template:

{% form_theme form 'CodedMonkeySemanticUIBundle:Form:fields.html.twig' %}

Render a form:

{{ form_start(form) }}
    {{ form_row(form.field) }}
    {{ form_row(form.submit) }}
{{ form_end(form) }}

Implementation Patterns

Form Theming Workflow

Extend Default Themes Override the default theme files in templates/bundles/CodedMonkeySemanticUIBundle/Form/:

{% extends 'CodedMonkeySemanticUIBundle:Form:fields.html.twig' %}
{% block form_row %}
    <div class="ui {{ form.vars.field_type }} field">
        {{ form_label(form) }}
        {{ form_widget(form) }}
        {{ form_errors(form) }}
    </div>
{% endblock %}

Dynamic Field Classes Use form_row_attr to add custom classes:

{{ form_row(form.field, {'attr': {'class': 'ui fluid input'}}) }}

Menu Integration Generate Semantic UI menus via Twig:

{{ semantic_ui_menu({
    'items': [
        {'label': 'Home', 'link': path('home')},
        {'label': 'About', 'link': path('about')},
    ],
    'class': 'ui secondary menu'
}) }}

Common Use Cases

Form Validation: Leverage form_errors() to display Semantic UI error messages.
Responsive Design: Use ui fluid classes for full-width forms/inputs.
Custom Components: Extend with custom Twig functions (e.g., semantic_ui_button()).

Gotchas and Tips

Pitfalls

Archived Status The package is archived—expect no updates. Fork or migrate to alternatives like symfony/semantic-ui if critical features are missing.
CSS/JS Conflicts Semantic UI’s default JS may conflict with other libraries (e.g., jQuery plugins). Load assets last in <head>/</body>.
Twig Caching Clear Twig cache after theming changes:
```
php bin/console cache:clear
```

Debugging Tips

Inspect Rendered HTML: Use browser dev tools to verify classes (e.g., .ui input).
Check Asset Paths: Ensure semantic_ui_css()/semantic_ui_js() point to valid paths (default: @CodedMonkeySemanticUIBundle/Resources/public/).

Extension Points

Custom Assets Override asset paths in config/packages/coded_monkey_semantic_ui.yaml:

coded_monkey_semantic_ui:
    css_path: '/custom/path/semantic.min.css'
    js_path: '/custom/path/semantic.min.js'

Twig Extensions Extend the bundle’s SemanticUIExtension to add custom functions:

// src/Twig/SemanticUIExtension.php
class CustomSemanticUIExtension extends \CodedMonkey\SemanticUIBundle\Twig\SemanticUIExtension
{
    public function getCustomFunction()
    {
        return 'custom output';
    }
}

services:
    App\Twig\CustomSemanticUIExtension:
        tags: ['twig.extension']

Symfony 5+ Compatibility The bundle may require manual adjustments for Symfony 5.3+ (e.g., form_theme syntax). Test thoroughly.

Semantic Ui Bundle Laravel Package