Docs(web-twig): Introduce demo page for form validations

refs #DS-812

apps/web-twig-demo/assets/app.ts

@@ -9,3 +9,47 @@
 import './styles/app.scss';
 // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions
 import '@lmc-eu/spirit-web/src/js/index.esm';
+// eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions, no-unused-vars
+import FormValidations from '@lmc-eu/spirit-form-validations/src';
+
+window.onload = () => {
+  FormValidations.addValidator(
+    'my-range',
+    (value, param1, param2) => {
+      return parseInt(param1, 10) <= value && value <= parseInt(param2, 10);
+    },
+    'The value (${0}) must be between ${1} and ${2}',
+    5,
+    false,
+  );
+
+  const specificElement = document.getElementById('custom-field-specific-validator');
+
+  const demoFormIds = ['form1', 'form2', 'form3', 'form4', 'form5'];
+
+  demoFormIds.forEach((id) => {
+    const form = document.getElementById(id);
+    // create the form validations instance
+    const formValidations = new FormValidations(form);
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+
+      // check if the form is valid
+      formValidations.validate(); // returns true or false
+    });
+  });
+
+  FormValidations.addElementValidator(
+    specificElement,
+    (value, element) => {
+      if (value.length && value[0] === value[0].toUpperCase()) {
+        return true;
+      }
+
+      return false;
+    },
+    'The first character must be capitalized',
+    2,
+    false,
+  );
+};

apps/web-twig-demo/config/routes.yaml

@@ -17,3 +17,7 @@ helpers_index:
 helper_view:
   path: /helpers/{helper}
   controller: App\Controller\HelpersController::show
+
+validations_index:
+  path: /validations
+  controller: App\Controller\ValidationsController::index

apps/web-twig-demo/docker/docker-compose.override.yml

@@ -30,6 +30,7 @@ services:
     volumes:
       - ./../:/srv/spirit-web-twig-demo/:delegated
       - ./../../../packages/web:/srv/spirit-web/:delegated
+      - ./../../../packages/form-validations:/srv/spirit-form-validations/:delegated
       # If you develop on Mac or Windows you can remove the node_modules/ directory
       #  from the bind-mount for better performance by enabling the next line:
       - /srv/spirit-web-twig-demo/node_modules

apps/web-twig-demo/package.json

@@ -10,6 +10,7 @@
     "@csstools/normalize.css": "^12.0.0",
     "@hotwired/stimulus": "3.2.1",
     "@lmc-eu/spirit-web": "^0.46.0",
+    "@lmc-eu/spirit-form-validations": "^0.2.0",
     "@symfony/stimulus-bridge": "3.2.1",
     "@symfony/webpack-encore": "4.2.0",
     "core-js": "^3.30.1",

apps/web-twig-demo/src/Controller/ValidationsController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ValidationsController extends AbstractController
+{
+    #[Route('/validations')]
+    public function index(): Response
+    {
+        return $this->render('validations.html.twig');
+    }
+}

apps/web-twig-demo/templates/partials/tabs.html.twig

@@ -10,4 +10,7 @@
   <li class="Tabs__item">
     <a href="helpers/" class="Tabs__link{% if routeName == 'helpers_index' %} is-selected" aria-selected="true{% endif %}">Helpers</a>
   </li>
+  <li class="Tabs__item">
+    <a href="validations/" class="Tabs__link{% if routeName == 'validations_index' %} is-selected" aria-selected="true{% endif %}">Validations</a>
+  </li>
 </ul>

apps/web-twig-demo/templates/validations.html.twig

@@ -0,0 +1,44 @@
+{% extends 'layout/default.html.twig' %}
+
+{% block content %}
+
+  <section class="docs-Section">
+
+    <Grid UNSAFE_className="mb-1200">
+      <GridSpan over="10" tablet="6" desktop="4">
+        <h2 class="docs-Heading">Real-World examples</h2>
+
+        <form id="form1" method="get" novalidate>
+          <Stack hasSpacing>
+            {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%}
+            <TextField isFluid name="username" id="username" label="Username" isRequired data-spirit-validate inputProps={ usernameInputProps } />
+            {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%}
+            <TextField isFluid name="zipcode" id="zipcode" label="Zip code" placeholder="123" data-spirit-validate inputProps={ zipcodeInputProps } />
+            {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%}
+            <TextField isFluid name="age" id="age" label="Your age (min. 14)" isRequired min="14" data-spirit-validate inputProps={ ageInputProps } />
+            {% set passwordInputProps = {
+              "data-spirit-required-message": "Please choose a password",
+              "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/",
+              "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number"
+            } %}
+            <TextField isFluid name="password" id="password" type="password" label="Password" isRequired  data-spirit-validate inputProps={ passwordInputProps } />
+            {% set retypepasswordInputProps = {
+              "data-spirit-equals": "#password",
+              "data-spirit-equals-message": "Passwords don't match",
+            } %}
+            <TextField isFluid name="retypepassword" id="retypepassword" type="password" label="Retype password" isRequired  data-spirit-validate inputProps={ retypepasswordInputProps } />
+            {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %}
+            <TextField isFluid name="email" id="email" type="email" label="Email" isRequired  data-spirit-validate inputProps={ emailInputProps } />
+            {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %}
+            <TextField isFluid name="phone" id="phone" type="tel" label="phone" isRequired placeholder="+420 733 333 333" data-spirit-validate inputProps={ phoneInputProps } />
+            <CheckboxField isFluid name="checkboxfield1" id="checkboxfield1" label="I accept the terms and conditions (required)" isRequired  data-spirit-validate />
+            <div>
+              <Button type="submit" color="primary" isBlock>Submit</Button>
+            </div>
+          </Stack>
+        </form>
+      </GridSpan>
+    </Grid>
+  </section>
+
+{% endblock %}

apps/web-twig-demo/yarn.lock

@@ -1004,6 +1004,11 @@
   resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-design-tokens/-/spirit-design-tokens-0.25.4.tgz#99d641714db7bbd8d69f54debf8bfe1c3b3d30b7"
   integrity sha512-uOW1d9nyq4/q3YnKAxFRTBIjZUmkWFakTHsCbd13kG2RQDrWDtgPOtrZSttY+3q4Jrg+u08abOOj6VeyTyGxTw==
 
+"@lmc-eu/spirit-form-validations@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-form-validations/-/spirit-form-validations-0.2.0.tgz#158366c15f2b0ee0a7cd7cc35d4fd90163b772c6"
+  integrity sha512-Ty+eheys31CdTgezULlVYSBzZ8Z6GybOtlgHqV63Vy0DUAkiLG6m+brd0ZITqcuIN7RFks85QJgp9GgdTtqZlA==
+
 "@lmc-eu/spirit-icons@^0.10.1":
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-icons/-/spirit-icons-0.10.1.tgz#fc80e769b1d4eb3d76fb27ad0449487433084396"

packages/web-twig/Makefile

@@ -59,7 +59,7 @@ encore-install: ## Install demo dependencies
 	cd $(APP_DOCKER_DIR) && $(DOCKER_COMP) exec $(DOCKER_ENCORE_SERVICE) yarn install
 
 encore-link: ## Link demo dependencies
-	cd $(APP_DOCKER_DIR) && $(DOCKER_COMP) exec $(DOCKER_ENCORE_SERVICE) sh -c "cd /srv/spirit-web && yarn link && cd /srv/spirit-web-twig-demo && yarn link @lmc-eu/spirit-web"
+	cd $(APP_DOCKER_DIR) && $(DOCKER_COMP) exec $(DOCKER_ENCORE_SERVICE) sh -c "cd /srv/spirit-web && yarn link && cd /srv/spirit-web-twig-demo && yarn link @lmc-eu/spirit-web && cd /srv/spirit-form-validations && yarn link && cd /srv/spirit-web-twig-demo && yarn link @lmc-eu/spirit-form-validations"
 
 encore-build: ## Build demo assets
 	cd $(APP_DOCKER_DIR) && $(DOCKER_COMP) exec $(DOCKER_ENCORE_SERVICE) yarn build