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.

Hello!

I'm super interested in discussing this. You should be able to find me in the components slack channel.

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.

Let me know your thoughts.

Hello!

Just checking in if you are still interested in discussing further.

Hi Alejandro,

Of course I do. I am 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.

Congratulation 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 conform to the SDC render element because they 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

Hi Alejandro,

This is our current implementation of the proposal: ✨ [2.0.0-beta4] Add a stories specific discovery Needs work

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 📌 Make DirectoryWithMetadataDiscovery generic and reusable Active )

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.

Thanks pdureau, I will try to take a look soon.