Add support for SDC slots (#191)

Co-authored-by: chesn0k <[email protected]>

Author: PierrePaul

src/Command/SingleDirectoryComponent.php

@@ -85,16 +85,25 @@ private function askQuestions(array &$vars): void {
     } while ($library !== NULL);
 
     $vars['component_libraries'] = \array_filter($vars['component_libraries']);
-    $vars['component_has_css'] = $ir->confirm('Needs CSS?');
-    $vars['component_has_js'] = $ir->confirm('Needs JS?');
-    if ($ir->confirm('Needs component props?')) {
+    $vars['component_has_css'] = $ir->confirm('Need CSS?');
+    $vars['component_has_js'] = $ir->confirm('Need JS?');
+    if ($ir->confirm('Need component props?')) {
       $vars['component_props'] = [];
       do {
         $prop = $this->askProp($vars, $ir);
         $vars['component_props'][] = $prop;
       } while ($ir->confirm('Add another prop?'));
     }
     $vars['component_props'] = \array_filter($vars['component_props'] ?? []);
+
+    if ($ir->confirm('Need slots?')) {
+      $vars['component_slots'] = [];
+      do {
+        $slot = $this->askSlot($vars, $ir);
+        $vars['component_slots'][] = $slot;
+      } while ($ir->confirm('Add another slot?'));
+    }
+    $vars['component_slots'] = \array_filter($vars['component_slots'] ?? []);
   }
 
   /**
@@ -191,4 +200,22 @@ protected function askProp(array $vars, Interviewer $ir): array {
     return $prop;
   }
 
+  /**
+   * Asks for multiple questions to define a slot.
+   *
+   * @psalm-param array{component_machine_name: mixed, ...<array-key, mixed>} $vars
+   *   The answers to the CLI questions.
+   *
+   * @return array
+   *   The slot data, if any.
+   */
+  protected function askSlot(array $vars, Interviewer $ir): array {
+    $slot = [];
+    $slot['title'] = $ir->ask('Slot title', '', new Required());
+    $default = Utils::human2machine($slot['title']);
+    $slot['name'] = $ir->ask('Slot machine name', $default, new RequiredMachineName());
+    $slot['description'] = $ir->ask('Slot description (optional)');
+    return $slot;
+  }
+
 }

templates/_sdc/component.twig

@@ -26,3 +26,13 @@ props:
       examples: []
     {% endfor %}
 {% endif %}
+{% if component_slots|length > 0 %}
+slots:
+  {% for slot in component_slots %}
+  {{ slot.name }}:
+    title: {{ slot.title }}
+    {% if slot.description %}
+    description: {{ slot.description }}
+    {% endif %}
+  {% endfor %}
+{% endif %}

templates/_sdc/template.twig

@@ -1,6 +1,7 @@
 <div {{ '{{ attributes }}' }}>
-  {{ '{# ' }}Keep the outer div whenever possible it is a nice way to ensure the presence of "attributes" {{ '#}' }}
-  {{ '{% ' }}block example_block {{ '%}' }}
-    The contents of the example block
-  {{ '{% ' }}endblock {{ '%}' }}
+  {% if component_slots|length > 0 %}
+    {% for slot in component_slots %}
+  {{ '{% block ' }}{{ slot.name }}{{ ' %}' }}{{ '{% endblock %}' }}
+    {% endfor %}
+  {% endif %}
 </div>

tests/functional/Generator/SingleDirectoryComponentTest.php

@@ -35,6 +35,11 @@ public function testGenerator(): void {
       'A text for CTA button.',
       'String',
       'No',
+      'Yes',
+      'My slot',
+      '',
+      'Some description for slot.',
+      'No',
     ];
     $this->execute(SingleDirectoryComponent::class, $input);
 
@@ -64,13 +69,13 @@ public function testGenerator(): void {
      Library dependencies (optional). [Example: core/once]:
      ➤ 
     
-     Needs CSS? [Yes]:
+     Need CSS? [Yes]:
      ➤ 
     
-     Needs JS? [Yes]:
+     Need JS? [Yes]:
      ➤ 
     
-     Needs component props? [Yes]:
+     Need component props? [Yes]:
      ➤ 
 
      Prop title:
@@ -94,6 +99,21 @@ public function testGenerator(): void {
      Add another prop? [Yes]:
      ➤ 
 
+     Need slots? [Yes]:
+     ➤ 
+
+     Slot title:
+     ➤ 
+
+     Slot machine name [my_slot]:
+     ➤ 
+
+     Slot description (optional):
+     ➤ 
+
+     Add another slot? [Yes]:
+     ➤ 
+
      The following directories and files have been created or updated:
     –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
      • components/bar/bar.component.yml

tests/functional/Generator/_sdc/components/bar/bar.component.yml

@@ -14,3 +14,7 @@ props:
       description: A text for CTA button.
       # @todo Add examples here.
       examples: []
+slots:
+  my_slot:
+    title: My slot
+    description: Some description for slot.

tests/functional/Generator/_sdc/components/bar/bar.twig

@@ -1,6 +1,3 @@
 <div {{ attributes }}>
-  {# Keep the outer div whenever possible it is a nice way to ensure the presence of "attributes" #}
-  {% block example_block %}
-    The contents of the example block
-  {% endblock %}
+  {% block my_slot %}{% endblock %}
 </div>