chore: add docker for local dev purpose

.dockerignore

@@ -0,0 +1,14 @@
+.git/
+.settings
+.buildpath
+.project
+vendor
+nbproject/
+**/nbactions.xml
+**/nb-configuration.xml
+build/
+**/.idea/
+**/composer.lock
+**/*.swp
+website/node_modules
+**/tests/.phpunit.result.cache

.github/workflows/continuous-integration.yml

@@ -27,7 +27,7 @@ jobs:
         uses: shivammathur/setup-php@v2
         with:
           php-version: ${{ matrix.php-versions }}
-          extensions: mbstring
+          extensions: none, json, dom, tokenizer, xml, xmlwriter, simplexml, iconv, mbstring, intl, sodium
           coverage: pcov
 
       - name: ♻️ Get composer cache directory

Dockerfile

@@ -0,0 +1,13 @@
+ARG VERSION=
+
+FROM php:${VERSION}-cli
+
+COPY --from=composer:latest /usr/bin/composer /usr/local/bin/composer
+RUN \
+    apt-get update -yq; \
+    apt-get install -yq unzip libicu-dev libonig-dev libxml2-dev; \
+    pecl install pcov libsodium; \
+    docker-php-ext-enable pcov sodium; \
+    docker-php-ext-install dom tokenizer json mbstring intl xml xmlwriter simplexml iconv
+
+RUN echo 'memory_limit = 512M' >> /usr/local/etc/php/conf.d/docker-php-memlimit.ini;

Makefile

@@ -0,0 +1,40 @@
+.PHONY: help
+
+help:
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+build-php: ## Build PHP image for given version
+	@echo "Build php $(filter-out $@,$(MAKECMDGOALS))"
+	@DOCKER_BUILDKIT=1 docker build -t "twbs-helper-php:$(filter-out $@,$(MAKECMDGOALS))" --build-arg "VERSION=$(filter-out $@,$(MAKECMDGOALS))" .
+
+install:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer install --no-progress --no-suggest --prefer-dist --optimize-autoloader)
+
+shell:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) bash)
+
+test:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer test)
+
+test-update:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer test:update-snapshot)
+
+lint-fix:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer cbf)
+
+ci:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer ci)
+
+generate-docs:
+	@$(call run-php,$(filter-out $@,$(MAKECMDGOALS)) composer generate-docs)
+
+## Run PHP for given version
+define run-php
+	@docker run -it --rm -u $(shell id -u):$(shell id -g) -v ${PWD}:/usr/src/app -w /usr/src/app twbs-helper-php:$(1)
+endef
+
+#############################
+# Argument fix workaround
+#############################
+%:
+	@:

README.md

@@ -32,6 +32,8 @@
 
 ### [Code coverage](https://codecov.io/gh/neilime/twbs-helper-module)
 
+### [Development](https://neilime.github.io/twbs-helper-module/docs/development/)
+
 ## Author
 
 👤 **ESCEMI <[email protected]>**

src/Documentation/Generator/UsagePage/Printer/CodePrinter.php

@@ -67,22 +67,6 @@ private function getRenderResult()
         $snapshotPath = $snapshotService->getSnapshotPathFromTitle($this->testConfig->title);
 
         $snapshotContent = file_get_contents($snapshotPath);
-        $domDocument = new \DOMDocument('1.0');
-        $domDocument->preserveWhiteSpace = false;
-        $domDocument->formatOutput = true;
-        $domDocument->substituteEntities = true;
-
-        @$domDocument->loadHTML($snapshotContent); // to ignore HTML5 errors
-
-        $bodyNode = $domDocument->getElementsByTagName('body')[0];
-
-        $renderResult = '';
-        $children = $bodyNode->childNodes;
-        foreach ($children as $child) {
-            $childNodeContent = $child->ownerDocument->saveXML($child, LIBXML_NOEMPTYTAG);
-            $renderResult .= $childNodeContent;
-        }
-
-        return trim($renderResult);
+        return trim($snapshotContent);
     }
 }

src/Documentation/Test/Config.php

@@ -6,8 +6,14 @@ class Config
 {
     public static $TITLE_SEPARATOR = ' / ';
 
+    /**
+     * @var string
+     */
     public $title;
 
+    /**
+     * @var string
+     */
     public $url;
 
     public $rendering;
@@ -29,7 +35,7 @@ public function getNestedPosition()
 
     public function getTitleParts()
     {
-        return explode(self::$TITLE_SEPARATOR, $this->title);
+        return explode(self::$TITLE_SEPARATOR, $this->title ?? '');
     }
 
     public static function fromArray(

src/Documentation/Test/Snapshots/Drivers/HtmlDriver.php

@@ -6,7 +6,8 @@ class HtmlDriver extends \Spatie\Snapshots\Drivers\HtmlDriver
 {
     public function serialize($data): string
     {
-        return parent::serialize('<?xml encoding="utf-8" ?>' . $data);
+        $serializedData = parent::serialize(mb_convert_encoding($data, 'HTML-ENTITIES', 'UTF-8'));
+        return preg_replace('~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', '', $serializedData);
     }
 
     public function extension(): string

tests/TestSuite/Documentation/Test/Snapshots/Drivers/HtmlDriverTest.php

@@ -17,9 +17,7 @@ protected function setUp(): void
     public function testSerialize()
     {
         $this->assertEquals(
-            '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ' .
-                '"http://www.w3.org/TR/REC-html40/loose.dtd">' . PHP_EOL .
-                '<?xml encoding="utf-8" ?><html><body><p>test</p></body></html>' . PHP_EOL,
+            '<p>test</p>',
             $this->htmlDriver->serialize('test')
         );
     }

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Accordion/Example/Always_open__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div class="accordion" id="accordionPanelsStayOpenExample">
+<div class="accordion" id="accordionPanelsStayOpenExample">
     <div class="accordion-item">
         <h2 class="accordion-header" id="panelsStayOpen-headingOne"><button aria-controls="panelsStayOpen-collapseOne" aria-expanded="true" class="accordion-button" data-bs-target="#panelsStayOpen-collapseOne" data-bs-toggle="collapse" name="button" type="button" value=""></button></h2>
         <div aria-labelledby="panelsStayOpen-headingOne" class="accordion-collapse collapse show" id="panelsStayOpen-collapseOne">
@@ -24,4 +23,4 @@ <h2 class="accordion-header" id="panelsStayOpen-headingThree"><button aria-contr
             </div>
         </div>
     </div>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Accordion/Example/Flush__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div class="accordion accordion-flush" id="accordionFlushExample">
+<div class="accordion accordion-flush" id="accordionFlushExample">
     <div class="accordion-item">
         <h2 class="accordion-header" id="flush-headingOne"><button aria-controls="flush-collapseOne" aria-expanded="true" class="accordion-button" data-bs-target="#flush-collapseOne" data-bs-toggle="collapse" name="button" type="button" value=""></button></h2>
         <div aria-labelledby="flush-headingOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample" id="flush-collapseOne">
@@ -24,4 +23,4 @@ <h2 class="accordion-header" id="flush-headingThree"><button aria-controls="flus
             </div>
         </div>
     </div>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Accordion/Example__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div class="accordion" id="accordionExample">
+<div class="accordion" id="accordionExample">
     <div class="accordion-item">
         <h2 class="accordion-header" id="headingOne"><button aria-controls="collapseOne" aria-expanded="true" class="accordion-button" data-bs-target="#collapseOne" data-bs-toggle="collapse" name="button" type="button" value=""></button></h2>
         <div aria-labelledby="headingOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample" id="collapseOne">
@@ -24,4 +23,4 @@ <h2 class="accordion-header" id="headingThree"><button aria-controls="collapseTh
             </div>
         </div>
     </div>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Alerts/Example/Additional_content__1.html

@@ -1,7 +1,6 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div class="alert alert-success" role="alert">
+<div class="alert alert-success" role="alert">
     <h4 class="alert-heading">Well done!</h4>
     <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
     <hr>
     <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Alerts/Example/Dismissing__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div class="alert alert-dismissible alert-warning fade show" role="alert">
+<div class="alert alert-dismissible alert-warning fade show" role="alert">
     <strong>Holy guacamole!</strong> You should check in on some of those fields below.
     <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" name="button" type="button" value=""></button>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Alerts/Example/Icons__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div class="alert alert-primary align-items-center d-flex" role="alert">
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewbox="0 0 16 16" role="img" aria-label="Warning:">
     <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
@@ -43,4 +41,3 @@
         An example danger alert with an icon
     </div>
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Alerts/Example/Link_color__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div class="alert alert-primary" role="alert">
     A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
 </div>
@@ -24,4 +22,3 @@
 <div class="alert alert-dark" role="alert">
     A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Alerts/Example__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div class="alert alert-primary" role="alert">
     A simple primary alert&mdash;check it out!
 </div>
@@ -24,4 +22,3 @@
 <div class="alert alert-dark" role="alert">
     A simple dark alert&mdash;check it out!
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Badges/Examples/Background_colors__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <span class="badge bg-primary">Primary</span>
 <span class="badge bg-secondary">Secondary</span>
 <span class="badge bg-success">Success</span>
@@ -8,4 +6,3 @@
 <span class="badge bg-info text-dark">Info</span>
 <span class="badge bg-light text-dark">Light</span>
 <span class="badge bg-dark">Dark</span>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Badges/Examples/Buttons__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><button class="btn btn-primary" name="button" type="button" value="">
+<button class="btn btn-primary" name="button" type="button" value="">
     Notifications
     <span class="badge bg-secondary">4</span>
-</button></body></html>
+</button>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Badges/Examples/Headings__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <h1>Example heading <span class="badge bg-secondary">New</span>
 </h1>
 <h2>Example heading <span class="badge bg-secondary">New</span>
@@ -12,4 +10,3 @@ <h5>Example heading <span class="badge bg-secondary">New</span>
 </h5>
 <h6>Example heading <span class="badge bg-secondary">New</span>
 </h6>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Badges/Examples/Pill_badges__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <span class="badge bg-primary rounded-pill">Primary</span>
 <span class="badge bg-secondary rounded-pill">Secondary</span>
 <span class="badge bg-success rounded-pill">Success</span>
@@ -8,4 +6,3 @@
 <span class="badge bg-info rounded-pill text-dark">Info</span>
 <span class="badge bg-light rounded-pill text-dark">Light</span>
 <span class="badge bg-dark rounded-pill">Dark</span>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Badges/Examples/Positioned__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <button class="btn btn-primary position-relative" name="button" type="button" value="">
     Inbox
     <span class="badge bg-danger position-absolute rounded-pill start-100 top-0 translate-middle">
@@ -12,4 +10,3 @@
     Profile
     <span class="bg-danger border border-light p-2 position-absolute rounded-pill start-100 top-0 translate-middle"><span class="visually-hidden">New alerts</span></span>
 </button>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Breadcrumb/Dividers__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '&gt;';">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="/">Home</a></li>
@@ -12,4 +10,3 @@
         <li aria-current="page" class="active breadcrumb-item">Library</li>
     </ol>
 </nav>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Breadcrumb/Example__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb"><li aria-current="page" class="active breadcrumb-item">Home</li></ol>
 </nav>
@@ -16,4 +14,3 @@
         <li aria-current="page" class="active breadcrumb-item">Data</li>
     </ol>
 </nav>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Basic_example__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div aria-label="Basic example" class="btn-group" role="group">
     <button class="btn btn-primary" name="button" type="button" value="">Left</button>
     <button class="btn btn-primary" name="middle" type="button" value="">Middle</button>
@@ -10,4 +8,3 @@
     <a class="btn btn-primary" href="#" role="button">Link</a>
     <a class="btn btn-primary" href="#" role="button">Link</a>
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Button_toolbar/Combine_sets_of_button_groups__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar">
+<div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar">
     <div aria-label="First group" class="btn-group me-2" role="group">
         <button class="btn btn-primary" name="button" type="button" value="">1</button>
         <button class="btn btn-primary" name="button" type="button" value="">2</button>
@@ -14,4 +13,4 @@
     <div aria-label="Third group" class="btn-group me-2" role="group">
         <button class="btn btn-info" name="button" type="button" value="">8</button>
     </div>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Button_toolbar/Mix_input_groups_with_button_groups__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div aria-label="Toolbar with button groups" class="btn-toolbar mb-3" role="toolbar">
     <div aria-label="First group" class="btn-group me-2" role="group">
         <button class="btn btn-outline-secondary" name="button" type="button" value="">1</button>
@@ -24,4 +22,3 @@
         <input aria-describedby="btnGroupAddon" aria-label="Input group example" class="form-control" name="input-group-example" placeholder="Input group example" type="text" value="">
     </div>
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Checkbox_and_radio_button_groups__1.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body>
 <div aria-label="Basic checkbox toggle button group" class="btn-group" role="group">
     <input type="hidden" name="checkbox-1" value="0"><input autocomplete="off" class="btn-check" id="btncheck1" name="checkbox-1" type="checkbox" value="1">
     <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
@@ -17,4 +15,3 @@
     <input autocomplete="off" class="btn-check" id="btnradio3" name="btnradio" type="radio" value="option3">
     <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
 </div>
-</body></html>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Mixed_styles__1.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div aria-label="Basic mixed styles example" class="btn-group" role="group">
+<div aria-label="Basic mixed styles example" class="btn-group" role="group">
     <button class="btn btn-danger" name="button" type="button" value="">Left</button>
     <button class="btn btn-warning" name="button" type="button" value="">Middle</button>
     <button class="btn btn-success" name="button" type="button" value="">Right</button>
-</div></body></html>
+</div>

tests/TestSuite/Documentation/Tests/__snapshots__/Components/Button_group/Nesting__1.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<?xml encoding="utf-8" ?><html><body><div aria-label="Button group with nested dropdown" class="btn-group" role="group">
+<div aria-label="Button group with nested dropdown" class="btn-group" role="group">
     <button class="btn btn-primary" name="button" type="button" value="">1</button>
     <button class="btn btn-primary" name="button" type="button" value="">2</button>
     <div class="btn-group" role="group">
@@ -9,4 +8,4 @@
             <li><a class="dropdown-item" href="#">Dropdown link</a></li>
         </ul>
     </div>
-</div></body></html>
+</div>