First draft of adding support for slots in the SDC generator.

Chi-teck · Oct 24, 2024 · 114a489 · 114a489
1 parent eb54b51
commit 114a489
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 38 deletions.
diff --git a/src/Command/SingleDirectoryComponent.php b/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;
+  }
+
 }
diff --git a/templates/_sdc/component.twig b/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 %}
diff --git a/templates/_sdc/template.twig b/templates/_sdc/template.twig
@@ -1,6 +1,8 @@
 <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>
diff --git a/tests/functional/Generator/SingleDirectoryComponentTest.php b/tests/functional/Generator/SingleDirectoryComponentTest.php
@@ -35,52 +35,57 @@ public function testGenerator(): void {
       'A text for CTA button.',
       'String',
       'No',
+      'Yes',
+      'My slot',
+      '',
+      'Some description for slot.',
+      'No'
     ];
     $this->execute(SingleDirectoryComponent::class, $input);
 
     $expected_display = <<< 'TXT'
-    
+
      Welcome to sdc generator!
     –––––––––––––––––––––––––––
-    
+
      Theme machine name:
-     ➤ 
-    
+     ➤
+
      Theme name [Foo]:
-     ➤ 
-    
+     ➤
+
      Component name:
-     ➤ 
-    
+     ➤
+
      Component machine name [bar]:
-     ➤ 
-    
+     ➤
+
      Component description (optional):
-     ➤ 
-    
+     ➤
+
      Library dependencies (optional). [Example: core/once]:
-     ➤ 
+     ➤
 
      Library dependencies (optional). [Example: core/once]:
-     ➤ 
-    
-     Needs CSS? [Yes]:
-     ➤ 
-    
-     Needs JS? [Yes]:
-     ➤ 
-    
-     Needs component props? [Yes]:
-     ➤ 
+     ➤
+
+     Need CSS? [Yes]:
+     ➤
+
+     Need JS? [Yes]:
+     ➤
+
+     Need component props? [Yes]:
+     ➤
 
      Prop title:
-     ➤ 
+     ➤
 
      Prop machine name [cta_text]:
-     ➤ 
+     ➤
 
      Prop description (optional):
-     ➤ 
+     ➤
 
      Prop type [String]:
       [1] String
@@ -89,10 +94,25 @@ public function testGenerator(): void {
       [4] Array
       [5] Object
       [6] Always null
-     ➤ 
+     ➤
 
      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:
     –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

diff --git a/tests/functional/Generator/_sdc/components/bar/bar.component.yml b/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.
diff --git a/tests/functional/Generator/_sdc/components/bar/bar.twig b/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>