Refactor(web-twig): Refactor directory structure of components

  * hold context of each component in the same directory

packages/web-twig/CHANGELOG.md

@@ -10,6 +10,7 @@
 - Introduce `Pill` component
 - Introduce `Tabs` component
 - Refactor components and update their readme
+- Refactor components directory tree
 
 ## 1.7.0 - 2022-05-09
 - Add Svg twig extension for optimal loading of svg files as inline

packages/web-twig/CONTRIBUTING.md

@@ -2,5 +2,52 @@
 
 > Guide for contributors.
 
+## Components definition
+In order to maintain the uniformity of writing and functioning of components in HTML-like syntax, it is necessary to accept the following rules in the implementation.
+
+## Rules in components
+
+1. Name of components must be camelCase with first letter small.
+2. New components must contain a property class so that they can be extended according to the [instructions](./docs/extendComponents.md)
+```twig
+{% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
+```
+
+2. Components must have block content when is not self-closing. This block is in HTML-like syntax used to define children.
+3. Components must contain attribute props. This is so that it resembles the React components as much as possible.
+4. All internal twig variables should start by underscore (this represents private variables).
+
+```twig
+{% set _privateAttr = (props.attr is defined) ? pros.attr : '' %}
+```
+
+### Example of component definition
+
+```twig
+{# This represent main component class and prepend class prefix #}
+{% set _className = _spiritClassPrefix ~ 'MainComponentClass' %}
+
+{# This represent extendable component #}
+{% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
+
+<span class="{{ _className }}{{ _class }}">
+
+{# This represent children #}
+{%- block content %}{% endblock %}
+</span>
+```
+
+### Example of component usage
+
+```twig
+{% embed "@spirit/button.twig" with { props: {
+    attr: 'value'
+}} %}
+    {% block content %}
+        Some children content
+    {% endblock %}
+{% endembed %}
+```
+
 ## Release new version
 * run script `. ./newVersion.sh <version>`

packages/web-twig/docs/extendComponents.md

@@ -33,4 +33,4 @@ After the previous change, we can now call the Button component with additional
 <Button color="primary" size="small">Primary buttom</Button>
 ```
 
-[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button
+[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button

packages/web-twig/docs/inlineSVG.md

@@ -20,4 +20,4 @@ then it is possible to call in the component
 {{ inlineSvg('@icons-assets/iconName.svg', { class: ..., title: ... }) }}
 ```
 
-if the icon does not exist, an empty string is returned and messages are sent to the symfony error logger.
+if the icon does not exist, an empty string is returned and messages are sent to the symfony error logger.

packages/web-twig/src/DependencyInjection/SpiritWebTwigExtension.php

@@ -28,6 +28,8 @@ class SpiritWebTwigExtension extends Extension
 
     public const PARAMETER_ICONS_PATH_ALIAS = 'spirit_web_twig.icons.alias';
 
+    public const DEFAULT_TWIG_COMPONENTS_PATH = __DIR__ . '/../Resources/twig-components';
+
     public const DEFAULT_COMPONENTS_PATH = __DIR__ . '/../Resources/components';
 
     public const DEFAULT_PATH_ALIAS = 'spirit';
@@ -46,7 +48,7 @@ public function load(array $configs, ContainerBuilder $container): void
         $loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__ . '/../Resources/config'));
         $loader->load('services.yml');
 
-        $container->setParameter(self::PARAMETER_PATHS, array_merge($config['paths'], [self::DEFAULT_COMPONENTS_PATH]));
+        $container->setParameter(self::PARAMETER_PATHS, array_merge($config['paths'], [self::DEFAULT_TWIG_COMPONENTS_PATH, self::DEFAULT_COMPONENTS_PATH]));
         $container->setParameter(self::PARAMETER_SPIRIT_CSS_CLASS_PREFIX, isset($config['spirit_css_class_prefix']) ? $config['spirit_css_class_prefix'] . '-' : null);
         $container->setParameter(self::PARAMETER_PATH_ALIAS, $config['paths_alias']);
         $container->setParameter(self::PARAMETER_HTML_SYNTAX_LEXER, (bool) $config['html_syntax_lexer']);

packages/web-twig/src/Resources/twig-components/alert.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Alert/Alert.twig' %}

packages/web-twig/src/Resources/twig-components/button.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Button/Button.twig' %}

packages/web-twig/src/Resources/twig-components/buttonLink.twig

@@ -0,0 +1 @@
+{% extends '@spirit/ButtonLink/ButtonLink.twig' %}

packages/web-twig/src/Resources/twig-components/checkboxField.twig

@@ -0,0 +1 @@
+{% extends '@spirit/CheckboxField/CheckboxField.twig' %}

packages/web-twig/src/Resources/twig-components/container.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Container/Container.twig' %}

packages/web-twig/src/Resources/twig-components/grid.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Grid/Grid.twig' %}

packages/web-twig/src/Resources/twig-components/header.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/Header.twig' %}

packages/web-twig/src/Resources/twig-components/heading.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Heading/Heading.twig' %}

packages/web-twig/src/Resources/twig-components/link.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Link/Link.twig' %}

packages/web-twig/src/Resources/twig-components/nav.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/Nav.twig' %}

packages/web-twig/src/Resources/twig-components/navItem.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/NavItem.twig' %}

packages/web-twig/src/Resources/twig-components/navLink.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/NavLink.twig' %}

packages/web-twig/src/Resources/twig-components/navbar.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/Navbar.twig' %}

packages/web-twig/src/Resources/twig-components/navbarActions.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/NavbarActions.twig' %}

packages/web-twig/src/Resources/twig-components/navbarClose.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/NavbarClose.twig' %}

packages/web-twig/src/Resources/twig-components/navbarToggle.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Header/NavbarToggle.twig' %}

packages/web-twig/src/Resources/twig-components/pill.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Pill/Pill.twig' %}

packages/web-twig/src/Resources/twig-components/stack.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Stack/Stack.twig' %}

packages/web-twig/src/Resources/twig-components/tabs.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/index.twig' %}

packages/web-twig/src/Resources/twig-components/tabsItem.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabsItem.twig' %}

packages/web-twig/src/Resources/twig-components/tabsLink.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabsLink.twig' %}

packages/web-twig/src/Resources/twig-components/tabsPane.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabsPane.twig' %}

packages/web-twig/src/Resources/twig-components/tag.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Tag/Tag.twig' %}

packages/web-twig/src/Resources/twig-components/text.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Text/Text.twig' %}

packages/web-twig/src/Resources/twig-components/textField.twig

@@ -0,0 +1 @@
+{% extends '@spirit/TextField/TextField.twig' %}

packages/web-twig/tests/DependencyInjection/CompilerPass/OverrideServiceCompilerPassTest.php

@@ -60,7 +60,7 @@ public function testShouldRegisterTwigPaths(array $paths, int $expectedCalls): v
      */
     public function registerTwigPathsDataProvider(): array
     {
-        $defaultPath = realpath(__DIR__ . '/../../../src/DependencyInjection') . '/../Resources/components';
+        $defaultPath = realpath(__DIR__ . '/../../../src/DependencyInjection') . '/../Resources/twig-components';
 
         return [
             'test should register random one path' => [
@@ -70,7 +70,7 @@ public function registerTwigPathsDataProvider(): array
                 ['dir1/', 'dir2'], 2,
             ],
             'test should register paths with default' => [
-                ['dir1/', 'dir2', $defaultPath], 4,
+                ['dir1/', 'dir2', $defaultPath], 3,
             ],
         ];
     }

packages/web-twig/tests/Helper/TwigHelper.php

@@ -23,13 +23,14 @@ public static function setup(
         array $extendedComponentsPath = []
     ): Environment {
         $loader = new FilesystemLoader($defaultTemplatePath);
-        $paths = array_merge($extendedComponentsPath, [SpiritWebTwigExtension::DEFAULT_COMPONENTS_PATH]);
+        $paths = array_merge($extendedComponentsPath, [SpiritWebTwigExtension::DEFAULT_TWIG_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_COMPONENTS_PATH]);
 
         foreach ($paths as $path) {
             $loader->addPath($path, $defaultAlias);
         }
 
         $loader->addPath(SpiritWebTwigExtension::DEFAULT_PARTIALS_PATH, SpiritWebTwigExtension::DEFAULT_PARTIALS_ALIAS);
+        $loader->addPath(SpiritWebTwigExtension::DEFAULT_TWIG_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_PATH_ALIAS);
         $loader->addPath(SpiritWebTwigExtension::DEFAULT_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_PATH_ALIAS);
 
         $twig = new Environment($loader, [

packages/web-twig/tests/components-fixtures/checkboxFieldDefaultPure.twig

@@ -5,4 +5,4 @@
     isRequired: "true",
     validationState: "error",
     message: "validation failed",
-}} %}
+}} %}

packages/web-twig/tests/components-fixtures/gridDefaultPure.twig

@@ -11,4 +11,4 @@
         <span>col 5</span>
         <span>col 6</span>
     {% endblock %}
-{% endembed %}
+{% endembed %}

packages/web-twig/tests/components-fixtures/stackDefaultPure.twig

@@ -20,4 +20,4 @@
             <div>List item 1</div>
         </li>
     {% endblock %}
-{% endembed %}
+{% endembed %}

packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig

@@ -5,4 +5,4 @@
     isRequired: "true",
     validationState: "error",
     message: "validation failed",
-}} %}
+}} %}

packages/web-twig/tests/test-extends-components/button.twig

@@ -1,4 +1,4 @@
 {% set _sizeClass = props.size is defined ? _spiritClassPrefix ~ 'Button--' ~ props.size %}
 {% set props = props|merge({ 'class': _sizeClass }) %}
 
-{% extends "@spirit/button.twig" %}
+{% extends "@spirit/button.twig" %}