Feat(web-twig): Add Components into bundle & refactoring (refs #DS-87)

lmc-eu · Jul 30, 2022 · f9e20ee · f9e20ee
1 parent eceb775
commit f9e20ee
Show file tree

Hide file tree

Showing 19 changed files with 352 additions and 73 deletions.
diff --git a/packages/web-twig/CHANGELOG.md b/packages/web-twig/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 <!-- There should always be "Unreleased" section at the beginning. -->
 ## Unreleased
+- [BC] Add possible link multiple components path into same alias in configuration
+- [BC] Rename config param `path` into `paths`
+- [BC] Rename config param `path_alias` into `paths_alias`
+- [BC] Add configuration param `spirit_css_class_prefix` to define prefixes in class components
+- Add Twig implementation of spirit component [Button](https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button) and [Tag](https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Tag)
+- configuration enabling html like-syntax into twig with config param `html_syntax_lexer`
+- Add PHPStan into QA and refactoring
+- Add `square` and `onClick` properties into Button component
 
 ## 0.1.0 - 2021-11-29
 - Drop support php 7.3

diff --git a/packages/web-twig/Jenkinsfile-qa.groovy b/packages/web-twig/Jenkinsfile-qa.groovy
@@ -31,9 +31,28 @@ pipeline {
           }
         }
 
+        stage('PHPStan') {
+          steps {
+            sh "composer run phpstan"
+          }
+        }
+
         stage('UT') {
           steps {
-            sh "composer run tests";
+            sh "composer run phpunit:coverage";
+          }
+
+          post {
+            success {
+              step([
+                $class: "CloverPublisher",
+                cloverReportDir: "coverage",
+                cloverReportFileName: "clover.xml",
+                healthyTarget: [methodCoverage: 70, conditionalCoverage: 80, statementCoverage: 80],
+                unhealthyTarget: [methodCoverage: 50, conditionalCoverage: 50, statementCoverage: 50],
+                failingTarget: [methodCoverage: 0, conditionalCoverage: 0, statementCoverage: 0]
+            ])
+            }
           }
         }
 
@@ -55,20 +74,7 @@ pipeline {
 
         stage('UT') {
           steps {
-            sh "composer run tests:coverage";
-          }
-
-          post {
-            success {
-              step([
-                $class: "CloverPublisher",
-                cloverReportDir: "coverage",
-                cloverReportFileName: "clover.xml",
-                healthyTarget: [methodCoverage: 70, conditionalCoverage: 80, statementCoverage: 80],
-                unhealthyTarget: [methodCoverage: 50, conditionalCoverage: 50, statementCoverage: 50],
-                failingTarget: [methodCoverage: 0, conditionalCoverage: 0, statementCoverage: 0]
-            ])
-            }
+            sh "composer run phpunit";
           }
         }
       }

diff --git a/packages/web-twig/README.md b/packages/web-twig/README.md
@@ -1,7 +1,9 @@
 Spirit Web Twig Bundle
 =================
+![QA](https://jenkins-seduo-ci.prod.internal.lmc/job/Spirit-web-twig-bundle-qa/badge/icon?subject=QA&link=https://jenkins-seduo-ci.prod.internal.lmc/job/Spirit-web-twig-bundle-qa/)
+![Version](https://img.shields.io/badge/version-0.1.0-blue.svg)
 
-This is Symfony bundle with twig implementation [Spirit Design System](https://github.com/lmc-eu/spirit-design-system) components and extends the twig implementation with an HTML syntax-like.
+This is a Symfony bundle with Twig implementation of [Spirit Design System] components, extended with HTML-like syntax.
 
 ## Requirements
 - PHP 7.4
@@ -18,7 +20,7 @@ See [CHANGELOG](./CHANGELOG.md)
 Download using *composer*
 
     "require": {
-        "lmc/lmc/spirit-web-twig-bundle" : "~1.0.0"
+        "lmc/lmc/spirit-web-twig-bundle" : "~0.1.0"
     },
     "repositories": [
         {
@@ -40,19 +42,24 @@ Add `SpiritWebTwigBundle` into bundles (under `all` bundles). If you use Symfony
     ];
 ```
 
-### Step 3
+### Step 3 (optional)
 
-Configure parameters for this bundle.
+If you want to change the default settings, create a config
 
-**config.yml**
+**config/packages/spirit_web_twig.yml**
 ```yaml
+    # all parameters are optional
     spirit_web_twig:
-        path: "%kernel.project_dir%/templates/components"
-        path_alias: 'ui-components'
+        # define one or more paths to expand or overload components
+        paths:
+            - "%kernel.project_dir%/templates/components"
+        paths_alias: 'jobs-ui' # default is 'spirit'
+        html_syntax_lexer: false # default is true
+        spirit_css_class_prefix: 'jobs' # default is null
 ```
 
 ## Usage
-After this configuration it will be possible to use components in your symfony project syntax-like Html. The only rule compared to html is that tags start in capital letters.
+Now you can use Twig components with HTML-like syntax in your Symfony project. You only need to remember that, unlike in HTML, component tags must always start with a capital letter:
 
 ```html
 <ComponentName attr="value">Some other content</ComponentName>
@@ -73,3 +80,22 @@ isOpen  // if no value is defined, it is set to true
     Submit
 </ComponentName>
 ```
+
+or pure original implementation
+
+```twig
+{% embed "@spirit/componentName.twig" with { props: {
+    attr: 'value'
+}} %}
+    {% block content %}
+        Some other content
+    {% endblock %}
+{% endembed %}
+```
+
+# Spirit Components
+
+- [Button](./docs/Button.md)
+- [Tag](./docs/Tag.md)
+
+[Spirit Design System]: https://github.com/lmc-eu/spirit-design-system
diff --git a/packages/web-twig/composer.json b/packages/web-twig/composer.json
@@ -34,12 +34,22 @@
     "mockery/mockery": "^1.4",
     "doctrine/cache": "^1.10",
     "lmc/coding-standard": "^3.2",
-    "symfony/yaml": "^4.2 || ^5.0"
+    "symfony/yaml": "^4.2 || ^5.0",
+    "phpstan/phpstan": "^1.2",
+    "phpstan/phpstan-mockery": "^1.0",
+    "phpstan/extension-installer": "^1.1",
+    "phpstan/phpstan-symfony": "^1.0"
   },
   "scripts": {
     "ecs": "vendor/bin/ecs check --no-progress-bar --ansi  src/ tests/",
     "ecs:fix": "vendor/bin/ecs check --no-progress-bar --ansi --fix  src/ tests/",
-    "tests": "vendor/bin/phpunit",
-    "tests:coverage": "XDEBUG_MODE=coverage vendor/bin/phpunit"
+    "phpunit": "vendor/bin/phpunit",
+    "phpunit:coverage": "XDEBUG_MODE=coverage vendor/bin/phpunit",
+    "phpstan" : "vendor/bin/phpstan analyze",
+    "tests": [
+      "@ecs",
+      "@phpunit",
+      "@phpstan"
+    ]
   }
 }
diff --git a/packages/web-twig/docs/Button.md b/packages/web-twig/docs/Button.md
@@ -0,0 +1,34 @@
+# Button
+
+This is Twig implementation of the [Button] component.
+
+## Examples
+pure implementation:
+```twig
+{% embed "@spirit/button.twig" with { props: {
+    color: 'primary'
+}} %}
+    {% block content %}
+        Primary buttom
+    {% endblock %}
+{% endembed %}
+```
+
+With Html syntax lexer (enabled by default):
+```twig
+<Button color="primary">Primary buttom</Button>
+```
+
+## Available props
+
+| name       | type      | default value | description                                     |
+|------------|-----------|---------------|-------------------------------------------------|
+| color      | `string`  | primary       | its possible to use all theme colors            |
+| block      | `boolean` | false         | span the full width of a parent                 |
+| square     | `boolean` | false         | if the button only has an icon                  |
+| disabled   | `boolean` | false         | it specifies that the button should be disabled.|                                              |
+| type       | `string`  | button        | type of button (submit or button)               |
+| ariaLabel  | `string`  | undefined     | Accessible Rich Internet Applications label     |
+| onClick    | `string`  | undefined     | Execute a JavaScript when a button is clicked   |
+
+[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button
diff --git a/packages/web-twig/docs/Tag.md b/packages/web-twig/docs/Tag.md
@@ -0,0 +1,30 @@
+# Tag
+
+This is Twig implementation of the [Tag] component.
+
+## Examples
+pure implementation:
+```twig
+{% embed "@spirit/tag.twig" with { props: {
+    color: 'default'
+    theme: 'dark'
+}} %}
+    {% block content %}
+        Tag content
+    {% endblock %}
+{% endembed %}
+```
+
+With Html syntax lexer (enabled by default):
+```twig
+<Tag color="default" theme="dark">Tag content</Tag>
+```
+
+## Available props
+
+| name       | type      | default value |
+|------------|-----------|---------------|
+| color      | `string`  | default       |
+| theme      | `string`  | dark          |
+
+[Tag]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Tag
diff --git a/packages/web-twig/phpstan.neon.dist b/packages/web-twig/phpstan.neon.dist
@@ -0,0 +1,5 @@
+parameters:
+	level: 9
+	paths:
+		- src
+		- tests
diff --git a/packages/web-twig/src/Compiler/ComponentLexer.php b/packages/web-twig/src/Compiler/ComponentLexer.php
@@ -13,6 +13,9 @@ class ComponentLexer extends Lexer
 {
     private string $twigPathAlias;
 
+    /**
+     * @param array<string, mixed> $options
+     */
     public function __construct(Environment $env, array $options, string $twigPathAlias)
     {
         parent::__construct($env, $options);

diff --git a/packages/web-twig/src/Compiler/ComponentTagCompiler.php b/packages/web-twig/src/Compiler/ComponentTagCompiler.php
@@ -67,7 +67,7 @@ protected function compileOpeningTags(string $value): string
             >
         /x";
 
-        return preg_replace_callback(
+        return (string) preg_replace_callback(
             $pattern,
             function (array $matches) {
                 $attributes = $this->getAttributesFromAttributeString($matches['attributes']);
@@ -89,7 +89,7 @@ protected function componentStartString(string $component, string $attributes):
      */
     protected function compileClosingTags(string $value): string
     {
-        return preg_replace("/<\/\s*([[A-Z]\w+]*)\s*>/", '{% endblock %}{% endembed %}', $value);
+        return (string) preg_replace("/<\/\s*([[A-Z]\w+]*)\s*>/", '{% endblock %}{% endembed %}', $value);
     }
 
     /**
@@ -129,7 +129,7 @@ protected function compileSelfClosingTags(string $value): string
             \/>
         /x";
 
-        return preg_replace_callback(
+        return (string) preg_replace_callback(
             $pattern,
             function (array $matches) {
                 $attributes = $this->getAttributesFromAttributeString($matches['attributes']);
@@ -141,7 +141,7 @@ function (array $matches) {
         );
     }
 
-    protected function getAttributesFromAttributeString(string $attributeString)
+    protected function getAttributesFromAttributeString(string $attributeString): string
     {
         $attributeString = $this->parseAttributeBag($attributeString);
 
@@ -219,6 +219,6 @@ protected function parseAttributeBag(string $attributeString): string
             \{\{\s*(\\\$attributes(?:[^}]+?(?<!\s))?)\s*\}\} # exact match of attributes variable being echoed
         /x";
 
-        return preg_replace($pattern, ' :attributes="$1"', $attributeString);
+        return (string) preg_replace($pattern, ' :attributes="$1"', $attributeString);
     }
 }
diff --git a/packages/web-twig/src/DependencyInjection/Configuration.php b/packages/web-twig/src/DependencyInjection/Configuration.php
@@ -16,11 +16,17 @@ public function getConfigTreeBuilder(): TreeBuilder
 
         $rootNode
             ->children()
-            ->scalarNode('path')
-            ->defaultValue('%kernel.project_dir%/templates/components')
+            ->arrayNode('paths')
+            ->scalarPrototype()->end()
             ->end()
-            ->scalarNode('path_alias')
-            ->defaultValue('ui-components')
+            ->scalarNode('paths_alias')
+            ->defaultValue('spirit')
+            ->end()
+            ->scalarNode('spirit_css_class_prefix')
+            ->defaultNull()
+            ->end()
+            ->scalarNode('html_syntax_lexer')
+            ->defaultTrue()
             ->end()
             ->end();
 

diff --git a/packages/web-twig/src/DependencyInjection/SpiritWebTwigExtension.php b/packages/web-twig/src/DependencyInjection/SpiritWebTwigExtension.php
@@ -16,9 +16,13 @@
  */
 class SpiritWebTwigExtension extends Extension
 {
-    public const PARAMETER_PATH = 'spirit_web_twig.path';
+    public const PARAMETER_PATHS = 'spirit_web_twig.paths';
 
-    public const PARAMETER_PATH_ALIAS = 'spirit_web_twig.path_alias';
+    public const PARAMETER_SPIRIT_CSS_CLASS_PREFIX = 'spirit_web_twig.spirit_css_class_prefix';
+
+    public const PARAMETER_PATH_ALIAS = 'spirit_web_twig.paths_alias';
+
+    public const PARAMETER_HTML_SYNTAX_LEXER = 'spirit_web_twig.html_syntax_lexer';
 
     public function load(array $configs, ContainerBuilder $container): void
     {
@@ -28,7 +32,11 @@ 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_PATH, $config['path']);
-        $container->setParameter(self::PARAMETER_PATH_ALIAS, $config['path_alias']);
+        $defaultComponentsPath = __DIR__ . '/../Resources/components';
+
+        $container->setParameter(self::PARAMETER_PATHS, array_merge($config['paths'], [$defaultComponentsPath]));
+        $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']);
     }
 }