[FEATURE] Add frontend linting (#120)

Co-authored-by: Łukasz Uznański <l.uznanski@macopedia.com>
Co-authored-by: Oliver Klee <typo3-coding@oliverklee.de>

.gitattributes

@@ -8,3 +8,8 @@
 /Tests/ export-ignore
 /codeception.yml export-ignore
 /phpcs.xml export-ignore
+/Resources/Private/.eslintignore export-ignore
+/Resources/Private/.eslintrc.json export-ignore
+/Resources/Private/.prettierrc.js export-ignore
+/Resources/Private/package.json export-ignore
+/Resources/Private/stylelint.config.js export-ignore

.github/workflows/ci.yml

@@ -62,6 +62,26 @@ jobs:
           - "php:codestyle"
         php-version:
           - 7.4
+  code-quality-frontend:
+    name: "Code quality frontend checks"
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        command:
+          - "style"
+          - "js"
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v2
+      -
+        name: "Install modules"
+        working-directory: ./Resources/Private
+        run: yarn
+      -
+        name: "Run command"
+        working-directory: ./Resources/Private
+        run: "yarn lint:${{ matrix.command }}"
   xliff-lint:
     name: "Xliff linter"
     runs-on: ubuntu-latest

.gitignore

@@ -4,3 +4,7 @@
 /composer.lock
 /nbproject
 /var
+/Resources/Private/node_modules/
+/Resources/Private/yarn.lock
+/Resources/Private/yarn-error.log
+/Resources/Private/package-lock.json

Configuration/TCA/Overrides/sys_template.php

@@ -3,3 +3,4 @@
 defined('TYPO3_MODE') || die('Access denied.');
 
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile('tea', 'Configuration/TypoScript', 'Tea');
+\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile('tea', 'Configuration/TypoScript/Frontend/', 'Tea frontend (optional)');

Configuration/TypoScript/Frontend/setup.typoscript

@@ -0,0 +1,8 @@
+page {
+    includeCSS {
+        tea = EXT:tea/Resources/Public/Css/Main.css
+    }
+    includeJSFooter {
+        tea = EXT:tea/Resources/Public/JavaScript/Main.js
+    }
+}

Resources/Private/.eslintignore

@@ -0,0 +1 @@
+node_modules

Resources/Private/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "env": {
+    "browser": true
+  }
+}

Resources/Private/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: "all",
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4
+};

Resources/Private/Language/de.locallang.xlf

@@ -23,6 +23,14 @@
                 <source>Our selection of assorted teas</source>
                 <target>Unsere Auswahl an erlesenen Tees</target>
             </trans-unit>
+            <trans-unit id="tx_tea_domain_model_product_tea.uid">
+                <source>UID</source>
+                <target>UID</target>
+            </trans-unit>
+            <trans-unit id="tx_tea_domain_model_product_tea.title">
+                <source>Title</source>
+                <target>Titel</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Language/locallang.xlf

@@ -18,6 +18,12 @@
             <trans-unit id="index.heading">
                 <source>Our selection of assorted teas</source>
             </trans-unit>
+            <trans-unit id="tx_tea_domain_model_product_tea.uid">
+                <source>UID</source>
+            </trans-unit>
+            <trans-unit id="tx_tea_domain_model_product_tea.title">
+                <source>Title</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Templates/Tea/Index.html

@@ -8,6 +8,12 @@
         </h2>
 
         <table class="table">
+            <thead>
+                <tr>
+                    <th><f:translate key="tx_tea_domain_model_product_tea.uid"/></th>
+                    <th><f:translate key="tx_tea_domain_model_product_tea.title"/></th>
+                </tr>
+            </thead>
             <tbody>
                 <f:for each="{teas}" as="tea">
                     <tr>

Resources/Private/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "tea",
+  "description": "",
+  "repository": {
+    "url": "https://github.com/TYPO3-Documentation/tea.git"
+  },
+  "keywords": [],
+  "author": "",
+  "version": "1.0.0",
+  "license": "ISC",
+  "scripts": {
+    "lint:js": "eslint --config .eslintrc.json '../Public/**/*.js'",
+    "lint:js:fix": "eslint --config .eslintrc.json '../Public/**/*.js' --quiet --fix",
+    "lint:style": "stylelint --config stylelint.config.js ../Public/**/*.css",
+    "lint:style:fix": "stylelint --config stylelint.config.js ../Public/**/*.css --fix"
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "prettier": "^2.0.5",
+    "stylelint": "^13",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-no-browser-hacks": "^1.2.1"
+  }
+}

Resources/Private/stylelint.config.js

@@ -0,0 +1,110 @@
+"use strict";
+
+module.exports = {
+    extends: "stylelint-config-recommended",
+    rules: {
+        "at-rule-empty-line-before": [
+            "always",
+            {
+                except: ["blockless-after-same-name-blockless", "first-nested"],
+                ignore: ["after-comment"],
+            },
+        ],
+        "at-rule-name-case": "lower",
+        "at-rule-name-space-after": "always-single-line",
+        "at-rule-semicolon-newline-after": "always",
+        "block-closing-brace-empty-line-before": "never",
+        "block-closing-brace-newline-after": "always",
+        "block-closing-brace-newline-before": "always-multi-line",
+        "block-closing-brace-space-before": "always-single-line",
+        "block-opening-brace-newline-after": "always-multi-line",
+        "block-opening-brace-space-after": "always-single-line",
+        "block-opening-brace-space-before": "always",
+        "color-hex-case": "lower",
+        "color-hex-length": "short",
+        "comment-empty-line-before": [
+            "always",
+            {
+                except: ["first-nested"],
+                ignore: ["stylelint-commands"],
+            },
+        ],
+        "comment-whitespace-inside": "always",
+        "custom-property-empty-line-before": [
+            "always",
+            {
+                except: ["after-custom-property", "first-nested"],
+                ignore: ["after-comment", "inside-single-line-block"],
+            },
+        ],
+        "declaration-bang-space-after": "never",
+        "declaration-bang-space-before": "always",
+        "declaration-block-semicolon-newline-after": "always-multi-line",
+        "declaration-block-semicolon-space-after": "always-single-line",
+        "declaration-block-semicolon-space-before": "never",
+        "declaration-block-single-line-max-declarations": 1,
+        "declaration-block-trailing-semicolon": "always",
+        "declaration-colon-newline-after": "always-multi-line",
+        "declaration-colon-space-after": "always-single-line",
+        "declaration-colon-space-before": "never",
+        "declaration-empty-line-before": [
+            "always",
+            {
+                except: ["after-declaration", "first-nested"],
+                ignore: ["after-comment", "inside-single-line-block"],
+            },
+        ],
+        "function-comma-newline-after": "always-multi-line",
+        "function-comma-space-after": "always-single-line",
+        "function-comma-space-before": "never",
+        "function-max-empty-lines": 0,
+        "function-name-case": "lower",
+        "function-parentheses-newline-inside": "always-multi-line",
+        "function-parentheses-space-inside": "never-single-line",
+        "function-whitespace-after": "always",
+        indentation: 2,
+        "length-zero-no-unit": true,
+        "max-empty-lines": 1,
+        "media-feature-colon-space-after": "always",
+        "media-feature-colon-space-before": "never",
+        "media-feature-name-case": "lower",
+        "media-feature-parentheses-space-inside": "never",
+        "media-feature-range-operator-space-after": "always",
+        "media-feature-range-operator-space-before": "always",
+        "media-query-list-comma-newline-after": "always-multi-line",
+        "media-query-list-comma-space-after": "always-single-line",
+        "media-query-list-comma-space-before": "never",
+        "no-eol-whitespace": true,
+        "no-missing-end-of-source-newline": true,
+        "number-leading-zero": "always",
+        "number-no-trailing-zeros": true,
+        "property-case": "lower",
+        "rule-empty-line-before": [
+            "always-multi-line",
+            {
+                except: ["first-nested"],
+                ignore: ["after-comment"],
+            },
+        ],
+        "selector-attribute-brackets-space-inside": "never",
+        "selector-attribute-operator-space-after": "never",
+        "selector-attribute-operator-space-before": "never",
+        "selector-combinator-space-after": "always",
+        "selector-combinator-space-before": "always",
+        "selector-descendant-combinator-no-non-space": true,
+        "selector-list-comma-newline-after": "always",
+        "selector-list-comma-space-before": "never",
+        "selector-max-empty-lines": 0,
+        "selector-pseudo-class-case": "lower",
+        "selector-pseudo-class-parentheses-space-inside": "never",
+        "selector-pseudo-element-case": "lower",
+        "selector-pseudo-element-colon-notation": "double",
+        "selector-type-case": "lower",
+        "unit-case": "lower",
+        "value-keyword-case": "lower",
+        "value-list-comma-newline-after": "always-multi-line",
+        "value-list-comma-space-after": "always-single-line",
+        "value-list-comma-space-before": "never",
+        "value-list-max-empty-lines": 0,
+    },
+};

Resources/Public/Css/Main.css

@@ -0,0 +1,15 @@
+.tx-tea table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.tx-tea table,
+.tx-tea th,
+.tx-tea td {
+  border: 1px solid black;
+}
+
+.tx-tea thead th {
+  height: 50px;
+  cursor: pointer;
+}

Resources/Public/JavaScript/Main.js

@@ -0,0 +1,41 @@
+var TYPO3 = TYPO3 || {};
+TYPO3.tea = {};
+
+TYPO3.tea.makeSortable = function (table) {
+    var th = table.tHead,
+        i;
+    th && (th = th.rows[0]) && (th = th.cells);
+    if (th) i = th.length;
+    else return;
+    while (--i >= 0)
+        (function (i) {
+            var dir = 1;
+            th[i].addEventListener("click", function () {
+                TYPO3.tea.sortTable(table, i, (dir = 1 - dir));
+            });
+        })(i);
+};
+
+TYPO3.tea.sortTable = function (table, col, reverse) {
+    var tb = table.tBodies[0],
+        tr = Array.prototype.slice.call(tb.rows, 0),
+        i;
+    reverse = -(+reverse || -1);
+    tr = tr.sort(function (a, b) {
+        return (
+            reverse *
+            a.cells[col].textContent
+                .trim()
+                .localeCompare(b.cells[col].textContent.trim())
+        );
+    });
+    for (i = 0; i < tr.length; ++i) tb.appendChild(tr[i]);
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+    var t = document.querySelectorAll(".tx-tea table"),
+        i = t.length;
+    while (--i >= 0) {
+        TYPO3.tea.makeSortable(t[i]);
+    }
+});