Collaboration with UI Patterns 2

Adopting render arrays for slots may also be a nice way of expressing this kind of values:

name: Card grid with variable cards
description: This shows a card with a video that comes from vimeo
properties:
  title: 'My card grid'
  description: 'This is a demo card grid that reuses demos to generate the cards in the grid.'
slots:
  cards: "{{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.image' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.video' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.vimeo_video' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.image' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.video' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.vimeo_video' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.image' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.video' } }}
          {{ {'#theme': 'styleguide_demo', '#demo': 'sdc_styleguide_demo_components:card.demo.vimeo_video' } }}

https://git.drupalcode.org/project/sdc_styleguide/-/blob/1.0.x/modules/s...

in a cleaner way:

name: Card grid with variable cards
description: This shows a card with a video that comes from vimeo
properties:
  title: 'My card grid'
  description: 'This is a demo card grid that reuses demos to generate the cards in the grid.'
slots:
  cards:
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.image' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.video' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.vimeo_video' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.image' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.video' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.vimeo_video' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.image' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.video' 
    - theme: styleguide_demo
       demo:  'sdc_styleguide_demo_components:card.demo.vimeo_video' 

But this example raise another issue. What about styleguide_demo theme hook? In UI Patterns 2, we are doing something similar but a bit differently. We are adding a #story key to the regular SDC component render element.

So, this sdc_styleguide example:

{
  '#theme': 'styleguide_demo', 
  '#demo': 'sdc_styleguide_demo_components:card.demo.image'
}

is written like that:

{
  '#type': 'component',
   '#component': 'card',
  '#story': 'image'
}

If we agree on a single story format, we may need to also agree on a shared renderable.

Hi Alejandro,

Of course I do. And I am happy to collaborate with you.

I was busy on other tasks those days.

As a quick note, I think it is better to have demos or stories live outside the component definition. This because down the road it is something added next to a component definition instead of adding more clutter within the same file.

I am OK with that. So, our shared format could be:

• in its own file like sdc_styleguide do
• using render arrays in slots, like ui_pattens_library do

I will share a collaborative document for us soon. Shared 😉: https://docs.google.com/document/d/1wCQLXrK1lrV2gYlqmqD2pybTql6_H1dByWIK...

Congratulation Alejandro for your new 1.1.0 release 🎉

I see it is not following yet the shared SDC Stories format proposal we were working on.

Do you have some plan to follow it in a future release? How will you manage the backward compatibility?

Maybe you want to propose some changes to it? In UI Patterns 2 side, we are open to any modification of our format which will fill the gap between us without compromising the quality.

In my opinion, the sdc_styleguide YAML format still has those 2 issues:

• the slots are not compliant with the SDC render element because they are accepting markup string instead of render arrays (SDC render element accept only plain text scalars in slots)
• the filename structure may not be compatible with plugin managers YML discoveries (sdc_styleguide is not using a plugin manager but a custom discovery service, but UI Patterns 2 will do, and I believe this will be the expected way if we move the format to core one day)

Hi Alejandro,

This is our current implementation of the proposal: #3455354: [2.0.0-beta4] Add a stories specific discovery

Stories are plugins with a YAML discovery looking for component/{component_id}.{story_id}.story.yml:

• StoryPluginManager
• Discovery (the discovery is a bit complex because of a core issue #3475153: Make DirectoryWithMetadataDiscovery generic and reusable)

If the story YML is inside a SDC folder, it get "attached" automatically to the component. If it is elsewhere, we need an explicit property in the definition. That's very useful if a theme or module want to add stories to existing components.

Slots are accepting:

• scalars, loaded as plain text as expected by the SDC's render element
• render arrays, which can be written written without "#" thanks to StoriesSyntaxConverter

Stories can be loaded from the SDC render element, thanks to the additional #story render property: ComponentElementAlter

It seems to work well, we may merge this work soon in UI Patterns 2 codebase. Don't hesitate to have a look.

Up :)

Don't hesitate to ask for help if needed.