lin3s / patternlibrarybuilder Goto Github PK

Currently CustomizeThemePass does not have any default values, and all values have to be customized. Having color groups such as 'primary-color' would be nice to have, to avoid writing same color multiple times.

Would be nice too, to extract HTML generation from compiler pass to a twig template.

Allow adding via config a key value array defining colors for each status.

Example config:

lin3s_pattern_library_builder:
    theme:
         status:
             todo: '#f00'
             done: '#0f0'
             deprecated: '#000'

At configuration level we need an option to add company logo with ease.

Suggested configuration:

lin3s_pattern_library_builder:
     theme:
          title: '@AppBundle/svg/logo.svg.twig'
          description: 'Design system'
          custom_styles: []
     templates_config_files_path: 'some-dir'

The goal is to make theme.title flexible to allow a simple string or a twig template that can render whatever the developer wants.

Maybe we can look for @ to paint the twig template, otherwise paint the title as string

We need to add the required stylesheets / javascript files to paint the components easily via configuration instead extending partial/javascript.html.twig or partial/stylesheets.html.twig

This issue is related to the prismjs integration. Classes added by this library may collide with those added by the user

Only basic styling has been applied to some renderers. It will be nice to have some more detailed design for the following renderer templates:

• Colors
• Typography
• Homepage

Right now all the logic to paint the iconography is done based in some "magic" paths and twig extensions. This logic should be extracted to the renderer itself together with a "path" option in the configuration yml

After #12, renderers have been introduced but are not validated at all. To improve the DX configuration validation will be nice to have.

Symfony's Configuration component can fit this use case very well

Tab's icon and text customization variables are needed.

• Add primary_typography and secondary_typography to theme.custom_styles configuration array
• Create a css variable for each new config value.
• Add custom value in custom_styles.html.twig but only print if value defined in config.

Check how main color configuration is implemented in #32

As we have some generic twig extension names such as 'icon' and 'find_icons' we can have some issues when pattern library is integrated in other applications.

Add a namespace (lin3s_pattern_library_*** for example) and replace occurrences of these function names

Currently the following is passed to the template:

    return new Response($this->twig->render('@Lin3sPatternLibraryBuilder/pattern_library.html.twig', [
            'title' => $this->themeConfig->title(),
            'description' => $this->themeConfig->description(),
            'stylesheets' => $this->themeConfig->stylesheets(),
            'javascripts' => $this->themeConfig->javascripts(),
            'custom_styles' => $this->themeConfig->customStyles(),
            'logo' => $this->themeConfig->logo(),
            'menu' => $config->allInHierarchy(),
            'breadcrumbs' => $this->generateBreadcrumbs($slug),
            'content' => $content,
            'item' => $item['config']
        ]));

The values in theme config should be passed within the ThemeConfig class to the view.

Check all templates and renderers such as the TwigRenderer that also used this approach

Add plb-* namespace to js classes

Right now renderers receive an array. To ensure data is valid and to avoid unexpected bugs create ConfigurationItem class.

We need to update pattern_library.html.twig and iframe.html.twig files. They are both getting the locale from the app.request parameter bag.