Static Fake Design Bundle

The core purpose of this bundle is to generate realistic-looking static HTML/CSS/JS based on fake data.
It aims to save developers and designers time by providing a visual representation of their application with placeholder content, even before the backend is fully built by providing tools to:

StaticFakeDesignBundle is a Symfony bundle designed to streamline the development of UI components and templates with auto-generated fake data. It bridges the gap between design and development by providing tools to:

• Generate realistic fake data for UI prototyping
• Define reusable components with typed parameters
• View components in an integrated showroom interface
• Create static versions of templates for demonstration purposes

This bundle is particularly useful for frontend development, to streamline the development of UI components and templates.

Table of Contents

• Installation
• Features
  • Showroom Interface
  • Static Template Rendering
• Usage
  • Fake Data Generation
  • Component Declaration
  • Service Integration
• Complex Value Objects
  • Content Definitions
  • Taxonomy Entry Definitions
  • Pager Definitions
  • Block Definitions
  • Layout Definitions
• Documentation
• Contributing
• License

Installation

1. First, require the package using Composer:

composer require erdnaxelaweb/staticfakedesign:dev-main

2. Add the bundle to your config/bundles.php file:

return [
    // ...
    ErdnaxelaWeb\StaticFakeDesignBundle\StaticFakeDesignBundle::class => ['all' => true],
];

Features

Fake Data Generation

The bundle provides a powerful system for generating fake variables that mimic real data. This allows you to develop UI components with realistic data structures before your backend is fully implemented.

Component Declaration

Create reusable, self-documenting UI components with typed parameters, making your frontend development more structured and maintainable.

Showroom

The bundle provides a "showroom" interface which allows you to navigate and display the components you have created. This makes it easy to test and demonstrate your UI components in isolation.

To access this interface on the URL /showroom, add the following route configuration:

# config/routes.yaml
showroom:
    resource: "@StaticFakeDesignBundle/Resources/config/routing/showroom.yaml"

Static Version of a Template

The bundle allows you to create static versions of your templates for demonstration purposes. To access these examples at /static/{path to template}, add the following route:

# config/routes.yaml
static:
    path: /static/{path}
    controller: ErdnaxelaWeb\StaticFakeDesignBundle\Controller\StaticController::viewAction
    requirements:
        path: .*

Usage

There are three ways to use fake generated variables:

Fake Data Generation

Twig comment:

{# @fake variable_name value_type #}

More information on fake variables

Component Declaration

Twig template declared as component:

{% component {
    name: 'Component name',
    specifications: 'Optional link to the component specification',
    description: 'Optional component description',
    properties: {
        display_summary: {
            label: 'Display the summary',
            type: 'boolean',
            required: false,
            default: true
        },
        // Other properties...
    },
    parameters: {
        title: {
            label: 'Title',
            type: 'string',
            required: true,
            default: 'Default title'
        },
        // Other parameters...
    }
} %}

More information on component declaration

Symfony Service

Use the ErdnaxelaWeb\StaticFakeDesign\Fake\ChainGenerator service to programmatically generate fake data in your controllers or services:

// Example usage in a controller
public function exampleAction(ChainGenerator $fakeGenerator)
{
    $fakeArticle = $fakeGenerator->generate('content', ['type' => 'article']);
    
    return $this->render('example.html.twig', [
        'article' => $fakeArticle
    ]);
}

Complex Value Objects

The bundle provides support for generating complex value objects commonly used in CMS and web applications:

• Content - Article, Page, etc.
• Taxonomy Entry - Categories, Tags, etc.
• Pager - Paginated content listings
• Block - Hero, CTA, Feature blocks, etc.

These objects are managed through the concept of "definitions". These definitions are specifications that allow the bundle to generate thoses complex, structured data.

Content Definitions

Content definitions specify the structure of content objects:

# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.content_definition:
    article:
        models:
            - 
                name: "First article model"
                image: "article1.jpg"
            - 
                name: "Second article model"
                image: "article2.jpg"
        fields:
            title:
                required: true
                type: string
            body:
                required: true
                type: richtext
            image:
                required: false
                type: image
            related_articles:
                required: false
                type: content
                options:
                    type: "article"
                    max: 3

Taxonomy Entry Definitions

Taxonomy entries follow a similar definition pattern:

# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.taxonomy_entry_definition:
    category:
        fields:
            name:
                required: true
                type: string
            description:
                required: false
                type: text
            icon:
                required: false
                type: string

Pager Definitions

Pagers are configured with content types, filters, and sorting options:

# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.pager_definition:
    articles:
        contentTypes: ["article"]
        filters:
            category:
                type: checkbox
            date:
                type: date_range
        maxPerPage: 10
        headlineCount: 3
        sorts:
            publish_date:
                type: publish_date

Block Definitions

Blocks are configured with views, attributes, and optional models:

# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.block_definition:
    hero:
        views:
            default: "blocks/hero/default.html.twig"
            centered: "blocks/hero/centered.html.twig"
        attributes:
            title:
                required: true
                type: string
            subtitle:
                required: false
                type: string
            background_image:
                required: true
                type: image

Layout Definitions

Block layouts group blocks together by sections:

# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.block_layout_definition:
    landing_page:
        sections:
            header:
                max: 1
                blocks: ["hero"]
            content:
                blocks: ["text", "image_text", "gallery"]
            sidebar:
                blocks: ["cta", "related_content"]

Documentation

For more detailed documentation on specific features:

• Fake Variables
• Component Declaration
• Content Value Type
• Taxonomy Entry Value Type
• Block Value Type
• Pager Value Type

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development

composer create-project symfony/skeleton:"7.4.*" web
cd web
composer config repositories.staticfakedesign '{"type": "path", "url": "../src", "options": {"symlink": true}}' --json
composer require erdnaxelaweb/staticfakedesign:dev-main
yarn install --cwd ../
cp ../doc/example/* ./ -R

then go to https://staticfakedesign.ddev.site/showroom

License

This bundle is released under the MIT License.