Library and stories are useful to see how components can be displayed, but when we found a great display, it's hard to know how to reproduce.
We can add some piece of code in \Drupal\ui_patterns_library\Template\TwigExtension::renderComponentStory() to display more informations about how the component is built, but how to make this pretty and usable ?
Here is an example ugly but working.
and how to render this :
public function renderComponentStory(string $component_id, string $story_id, array $slots = [], array $props = [], bool $with_wrapper = FALSE) {
$component_slots_props = json_encode(['slots' => $slots, 'props' => $props]);
$help = [
'rendered' => [
'#type' => 'container',
'#attributes' => ['class' => ['tab-pane', 'active']],
'component' => [],
],
'settings' => [
'#type' => 'container',
'#attributes' => ['class' => ['tab-pane']],
'content' => [
'#type' => 'markup',
'#markup' => $component_slots_props,
],
]
];
$renderable = [
'#type' => 'component',
'#component' => $component_id,
'#story' => $story_id,
'#slots' => $slots,
'#props' => $props,
];
if (!$with_wrapper) {
$help['rendered']['component'] = $renderable;
return $help;
}
$story = $this->storyPluginManager->getDefinition($component_id . ':' . $story_id);
if (!isset($story["library_wrapper"]) || empty($story["library_wrapper"])) {
$help['rendered']['component'] = $renderable;
return $help;
}
$help['rendered']['component'] = [
[
'#type' => 'inline_template',
'#template' => $story["library_wrapper"],
'#context' => $slots + $props + ['_story' => $renderable],
],
];
return $help;
}
Active
2.0
UI Patterns Library
Hi Goz,
When we will move to entities, views & formatters for the component library, we will be able to do a formatter for that. See 📌 [2.0.0-alpha3] Use Drupal entities & plugins for the Library pages Active (expected late summer 2025)
Until then, is it possible to do it in the template? Something with json_encode() with PRE and/or CODE HTML elements?
I am not pushing this solution, I am just asking.