qossmic/twig-doc-bundle

Storybook with twig components

v0.0.3 2024-04-22 07:55 UTC

Requires

• php: >=8.2
• nelmio/alice: ^3.13
• symfony/framework-bundle: ^6.4|^7.0
• symfony/twig-bundle: ^6.4|^7.0
• symfony/validator: ^6.4|^7.0
• symfony/yaml: ^6.4|^7.0

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.51
• phpunit/phpunit: ^10.5
• symfony/browser-kit: ^6.4|^7.0
• symfony/css-selector: ^6.4|^7.0
• symfony/dom-crawler: ^6.4|^7.0
• symfony/ux-twig-component: ^2.16.0

Suggests

• symfony/ux-live-component: Create truly reactive frontend components and document them with this bundle
• symfony/ux-twig-component: Create native UX components with twig and document them with this bundle

MIT

README

Brought to you by qossmic!

1. Ye be warned!
2. Installation
3. Configuration
   1. Bundle Configuration
   2. Component Configuration
4. Routing
5. Customization
6. Usage

Experimental Package

Important: This is an experimental version and might change drastically. Therefore, you might encounter breaking changes when updating until we release a stable version.

• bad templates: due to the lack of frontend capacities, the templates are very "basic"
  • but as in every Symfony bundle, you can easily overwrite them and create your own :-)
• incomplete documentation
• no translations (yet)

Allows you to create an overview for your Twig Components, be it either UX-Components, UX-Live-Components or simple snippet templates.

Components will be grouped in categories and optional sub-categories.

Installation

As long as the bundle is not publicly released, you need to add a repository to your composer.json file:

{
  "repositories": [
    {
      "type": "git",
      "url": "https://github.com/qossmic/twig-doc-bundle.git"
    }
  ]
}

Install the bundle

composer req qossmic/twig-doc-bundle

Routing

As symfony never creates routes for bundles, you need to configure this on your own!

Create a config file: config/routes/twig_doc.yaml

twig_doc:
  resource: '@TwigDocBundle/config/routing/documentation.xml'
  prefix: /twig/doc
  # or for localized: prefix: /{_locale}/twig/doc/

Customizing the design

To customize the design of the documentation, you can override any template of the bundle in your project.

See: How to override any Part of a Bundle