Merge pull request #508 from City-of-Helsinki/UHF-7791-tsconfig

UHF-7791: Add react search and typescript support

.babelrc.json

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-react"],
+    "plugins": ["@babel/plugin-syntax-jsx"]
+}

.eslintrc.json

@@ -5,20 +5,13 @@
     "node": true,
     "es6": true
   },
-
-
-  "extends": [ 
-  "airbnb-base",
-  // "plugin:prettier/recommended",
-  "prettier"
-  // "drupal"
-  // "plugin:yml/recommended"
-],
-
+  "extends": [
+    "airbnb",
+    "prettier"
+  ],
   "parserOptions": {
     "ecmaVersion": 2020
   },
-  // "plugins": ["prettier"],
   "globals": {
     "Drupal": true,
     "drupalSettings": true,
@@ -38,7 +31,6 @@
   "rules": {
     // "prettier/prettier": "error",
     "prefer-arrow-callback":["off"],
-
     "quotes": ["warn", "single"],
     "semi": ["error", "always"],
     "consistent-return": ["off"],
@@ -74,5 +66,81 @@
     "react": {
       "version": "17.x"
     }
-  }
+  },
+  // Using ts overrides rules from eslint-config-react-app.
+  // Finetune these if needed.
+  "overrides": [
+    {
+      "files": ["*.ts?(x)"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module",
+        "ecmaFeatures": {
+          "jsx": true
+        },
+      // typescript-eslint specific options
+      "warnOnUnsupportedTypeScriptVersion": true
+      },
+      "plugins": ["@typescript-eslint"],
+      // If adding a typescript-eslint version of an existing ESLint rule,
+      // make sure to disable the ESLint rule here.
+      "rules": {
+        // TypeScript"s `noFallthroughCasesInSwitch` option is more robust (#6906)
+        "default-case": "off",
+        // "tsc" already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
+        "no-dupe-class-members": "off",
+        // "tsc" already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
+        "no-undef": "off",
+        // Add TypeScript specific rules (and turn off ESLint equivalents)
+        "no-array-constructor": "off",
+        "no-redeclare": "off",
+        "no-use-before-define": "off",
+        "@typescript-eslint/consistent-type-assertions": "warn",
+        "@typescript-eslint/no-array-constructor": "warn",
+        "@typescript-eslint/no-redeclare": "warn",
+        "@typescript-eslint/no-use-before-define": [
+          "warn",
+          {
+            "functions": false,
+            "classes": false,
+            "variables": false,
+            "typedefs": false
+          }
+        ],
+        "no-unused-expressions": "off",
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          {
+            "allowShortCircuit": true,
+            "allowTernary": true,
+            "allowTaggedTemplates": true
+          }
+        ],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "args": "none",
+            "ignoreRestSiblings": true
+          }
+        ],
+        "no-useless-constructor": "off",
+        "no-console": ["warn", { "allow": ["warn", "error"] }],
+        "camelcase": "off",
+        "@typescript-eslint/no-useless-constructor": "warn",
+        "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx", ".tsx"] }],
+        "react/require-default-props": "off",
+        "react/jsx-props-no-spreading": "off",
+        "react/no-array-index-key": "off",
+        "react/function-component-definition": [1, { "namedComponents": ["arrow-function", "function-declaration"] }],
+        "react/self-closing-comp": 0,
+        "import/extensions": 0,
+        "import/no-unresolved": 0,
+        // These rules are not needed with react 17 JSX transform.
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+      }
+    }
+  ]
 }

README.md

@@ -1,5 +1,4 @@
 # HDBT-theme
-
 ## Introduction
 
 HDBT theme is a base theme for the City of Helsinki. It is based on the core theme stable9. The abbrevation comes from
@@ -21,7 +20,7 @@ Requirements for developing:
 | nvm use       | Uses correct Node version chosen for the theme compiler.                          |
 | npm i         | Install dependencies and link local packages.                                     |
 | npm ci        | Install a project with a clean slate. Use especially in travis like environments. |
-| npm run dev   | Compile styles for development environment. and watch file changes.               |
+| npm run dev   | Compile styles and js for development environment. and watch file changes.        |
 | npm run build | Build packages for production. Minify CSS/JS.                                     |
 
 Setup the developing environment by running
@@ -53,6 +52,27 @@ hdbt
     └───icons
 ```
 
+## Webpack entries
+
+Any .js file in /src/js/ will be compiled to separate entry and minified into the /dist folder.
+Typescript entrypoints must be added separately. See webpack.config.js.
+
+
+### How to use entries in Drupal libraries
+
+```
+component-library:
+  version: 1.x
+  css:
+    theme:
+      dist/css/component-library.min.css: {}
+  js:
+    dist/js/component-library.min.js: {}
+```
+
+Library must be loaded on the page where it's used.
+It can be added via preprocess function or in a twig template.
+
 ## Component library
 
 Ready to use components can be explored from component library.
@@ -171,6 +191,17 @@ To fix
 vendor/bin/phpcbf public/themes/contrib/hdbt --extensions=php,module,theme,inc --ignore="*.js,*.css" --standard=Drupal
 ```
 
+### How to develop React apps
+
+Add new REACT_SEARCHES entrypoint into webpack.config.js.
+
+Add new library to libraries.yml file.
+
+Inside Drupal: Load correct Drupal library to the page. Run `npm run dev` and make sure caches are disabled.
+Outside Drupal: Open React app index.html file in browser and run `npm run dev`.
+
+To build minified js file into the /dist folder run `npm run build`.
+
 ## Component documentation
 
 ### Accordion paragraph
@@ -190,8 +221,8 @@ it on the block layout, make sure that there is a block with the correct id on t
 
 ## ESLint
 
-We are using the airbnb-base which will be changed to full airbnb when there is react stuff.
-The current eslint config is the bare minimum that should pass always everywhere. Extend as necessary.
+We are using the airbnb. The current eslint config is the bare minimum that should pass always everywhere.
+Extend as necessary.
 
 ### Why is it so hard?
  - the eslint rules might be used from root (or beyond root) due to husky being funny