### Install Storia Bundle with Composer Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Installs the iq2i/storia-bundle package into your Symfony project using Composer. This is the first step to integrate the bundle's functionality. ```bash composer require iq2i/storia-bundle ``` -------------------------------- ### Storia Project Structure for Menu Generation Source: https://context7.com/iq2i/storia-bundle/llms.txt Visualizes the directory structure of a Storia project, showing how components and pages are organized and how this structure translates into the generated navigation menu. ```tree storia/ ├── components/ │ ├── avatar.yaml # Menu: Components > Avatar │ ├── badge.yaml # Menu: Components > Badge │ ├── button/ │ │ ├── button.yaml # Menu: Components > Button > Button │ │ ├── button.md # Documentation for button │ │ └── button_group.yaml # Menu: Components > Button > Button group │ └── form/ │ ├── text.yaml # Menu: Components > Form > Text │ └── textarea.yaml # Menu: Components > Form > Textarea └── pages/ └── homepage/ ├── homepage.yaml # Menu: Pages > Homepage └── homepage.html.twig ``` -------------------------------- ### Configure Storia Bundle Path Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Customizes the default directory where UI Storia looks for YAML files. This allows you to organize your interface definitions in a custom location. ```yaml # config/packages/iq2i_storia.yaml iq2i_storia: default_path: '%kernel.project_dir%/new-folder' ``` -------------------------------- ### Add Storia Bundle Routes Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Defines the routing configuration for the UI Storia bundle. This YAML file specifies the resource for the bundle's routes and sets a base prefix for them. ```yaml # config/routes/is2i_storia.yaml iq2i_storia: resource: '@IQ2iStoriaBundle/config/routes.php' prefix: '/storia' ``` -------------------------------- ### Configure Component Variants and Blocks in YAML Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Shows how to define different variants of a component, including arguments and HTML blocks, using the 'variants', 'args', and 'blocks' keys in a YAML configuration file. The 'content' block is noted as a default block for Twig Components. ```yaml # storia/components/button.yaml component: Button variants: plain: args: class: plain blocks: content: Plain button svg: '' outline: name: My outline button args: class: outline blocks: content: Outline button svg: '' ``` -------------------------------- ### Use Twig Component in YAML Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Demonstrates how to replace the 'template' key with the 'component' key to use Twig Components within a YAML configuration file for UI elements. ```yaml # storia/components/button.yaml component: Button variants: plain: args: class: plain label: Plain button outline: args: class: outline label: Outline button ``` -------------------------------- ### Button Component Documentation (Markdown) Source: https://context7.com/iq2i/storia-bundle/llms.txt Provides Markdown documentation for the Button component, detailing its variants, usage guidelines, and specific properties like icon positioning. ```markdown ## Button Component The button component supports multiple variants for different use cases. ### Usage Guidelines - Use **plain** variant for primary actions - Use **outline** variant for secondary actions - Icons can be positioned left or right using the `icon.position` property > The button automatically handles focus states and accessibility attributes. ``` -------------------------------- ### Configure UI Storia Bundle (PHP) Source: https://context7.com/iq2i/storia-bundle/llms.txt Configure the UI Storia bundle's default path for story files and enable/disable the bundle in your Symfony application's configuration. ```php defaultPath('%kernel.project_dir%/storia') // Directory containing story files ->enabled(true); // Enable/disable the bundle }; ``` -------------------------------- ### Mount UI Storia Routes (PHP) Source: https://context7.com/iq2i/storia-bundle/llms.txt Import the UI Storia bundle's routes into your Symfony application to enable the UI interface at a specified path. This configuration defines the base URL for accessing the UI Storia interface. ```php import('@IQ2iStoriaBundle/config/routes.php') ->prefix('/storia'); // Access UI Storia at /storia }; ``` -------------------------------- ### Twig Functions for Variant Arguments and Blocks Source: https://context7.com/iq2i/storia-bundle/llms.txt Illustrates how to use Storia's Twig functions to retrieve arguments and blocks for a 'button/button' component's 'outline' variant, enabling component reuse. ```twig {# Get variant arguments #} {% set args = iq2i_storia_variant_args('button/button', 'outline') %} {# Returns: { class: 'text-blue-700 border...', ... } #} {# Get variant blocks #} {% set blocks = iq2i_storia_variant_blocks('button/button', 'outline') %} {# Returns: { content: 'Outline' } #} {# Use in component #} {{ blocks.content }} ``` -------------------------------- ### Define Template-Based View (YAML & Twig) Source: https://context7.com/iq2i/storia-bundle/llms.txt Configure a template-based view for UI Storia by creating a YAML file that references a Twig template. This allows defining multiple variants of the template with different arguments for styling and content. ```yaml # storia/components/badge.yaml template: ui/badge.html.twig variants: default: args: class: bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded large: args: class: bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded bordered: args: class: bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 pills: args: class: bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full ``` ```twig {# templates/ui/badge.html.twig #} Default ``` -------------------------------- ### Homepage Content and Component Reuse Source: https://context7.com/iq2i/storia-bundle/llms.txt Defines the homepage content and demonstrates reusing a 'Button' component with specific variants and arguments fetched using Storia Twig functions. ```twig {# storia/pages/homepage/homepage.html.twig #} {% extends 'base.html.twig' %} {% block body %} {% block hero %}

This is the homepage hero

{% endblock %} {% block content %}

{{ message }}

{# Reuse component variants from other stories #} {% set button_args = iq2i_storia_variant_args('button/button', 'plain_icon_right') %} {{ iq2i_storia_variant_blocks('button/button', 'plain_icon_right').content }} {% endblock %} {% endblock %} ``` -------------------------------- ### Configure Form Type View (YAML) Source: https://context7.com/iq2i/storia-bundle/llms.txt Define UI Storia views for Symfony form types using YAML configuration. This allows previewing form fields with automatic variants for default, disabled, and error states. Custom form themes can also be specified. ```yaml # storia/components/form/text.yaml form: Symfony\Component\Form\Extension\Core\Type\TextType # storia/components/form/choice.yaml form: Symfony\Component\Form\Extension\Core\Type\ChoiceType options: choices: Option 1: option1 Option 2: option2 Option 3: option3 form_theme: 'form/custom_theme.html.twig' ``` -------------------------------- ### Enable/Disable Storia Bundle Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Configures whether the UI Storia bundle is enabled or disabled, often controlled by an environment variable. This provides a way to conditionally activate the bundle's routes. ```yaml # config/packages/iq2i_storia.yaml iq2i_storia: # use an environment variable for easier configuration enabled: '%env(IQ2I_STORIA_ENABLED)%' ``` -------------------------------- ### Register Storia Bundle in Symfony Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Registers the IQ2iStoriaBundle class within your Symfony application's configuration. This step is usually automated by Symfony Flex, but manual registration is required otherwise. ```php // config/bundles.php return [ // ... IQ2i\StoriaBundle\IQ2iStoriaBundle::class => ['all' => true], ]; ``` -------------------------------- ### Define UI Storia Component Interface Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Defines a UI Storia interface for a reusable component using a YAML file. It specifies the Twig template to use and various variants with different arguments. ```yaml # storia/components/progress.yaml template: ui/progress.html.twig variants: small: args: height: 1.5 default: args: height: 2.5 large: args: height: 4 extra_large: args: height: 6 ``` -------------------------------- ### Override iframe.html.twig Template (Webpack Encore) Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Overrides the default `iframe.html.twig` template to include your application's stylesheets and JavaScript using Webpack Encore. This allows UI Storia to use your custom assets. ```twig {# templates/bundles/IQ2iStoriaBundle/iframe.html.twig #} {% extends '@!IQ2iStoria/iframe.html.twig' %} {# if you use WebpackEncoreBundle #} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} ``` -------------------------------- ### Override iframe.html.twig Template (AssetMapper) Source: https://github.com/iq2i/storia-bundle/blob/main/doc/pages/index.md Overrides the default `iframe.html.twig` template to include your application's JavaScript using Asset Mapper. This allows UI Storia to use your custom scripts. ```twig {# templates/bundles/IQ2iStoriaBundle/iframe.html.twig #} {% extends '@!IQ2iStoria/iframe.html.twig' %} {# if you use AssetMapper #} {% block javascripts %} {% block importmap %}{{ importmap('app') }}{% endblock %} {% endblock %} ``` -------------------------------- ### Define Twig Component View (YAML & Twig) Source: https://context7.com/iq2i/storia-bundle/llms.txt Configure views using Symfony UX Twig Components within UI Storia. This involves defining variants that can accept arguments and specify block content. The Twig component's props and blocks are utilized for customization. ```yaml # storia/components/button/button.yaml component: Button variants: plain: name: Plain Button blocks: content: Default outline: args: class: text-blue-700 border border-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 blocks: content: Outline with_icon: args: class: text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex items-center icon: svg: ... position: left blocks: content: Buy now ``` ```twig {# templates/components/Button.html.twig #} {% props icon = null %} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.