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

hdbt.libraries.yml

@@ -138,3 +138,12 @@ disable_genesys_button:
   - core/jquery
   - core/drupal
   - core/drupalSettings
+
+event-list:
+  version: 1.x
+  js:
+    dist/js/linkedevents.min.js: {}
+  dependencies:
+    - core/drupalSettings
+    - core/jquery
+    - core/drupal

hdbt.theme

@@ -23,6 +23,7 @@ use Drupal\menu_link_content\Plugin\Menu\MenuLinkContent;
 use Drupal\node\NodeInterface;
 use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 use Drupal\views\ViewExecutable;
+use Drupal\helfi_react_search\LinkedEvents;
 
 /**
  * Implements hook_preprocess().
@@ -1474,3 +1475,58 @@ function _hdbt_eu_cookie_compliance_get_privacy_policy_url(): Url {
     ? Url::fromUri($link)
     : Url::fromUserInput($link === '<front>' ? '/' : $link);
 }
+
+/**
+ * Implements hook_preprocess_paragraph().
+ */
+function hdbt_preprocess_paragraph__event_list(&$variables) {
+  // Expose event list variables to frontend.
+  if (isset($variables['paragraph'])) {
+    $paragraph = $variables['paragraph'];
+    $linkedEvents = Drupal::service('helfi_react_search_linked_events');
+    $settings = [];
+
+    if ($paragraph->hasField('field_event_count') && !$paragraph->get('field_event_count')->isEmpty()) {
+      $settings['field_event_count'] = $paragraph->get('field_event_count')->first()->getValue()['value'];
+    }
+    else {
+      $settings['field_event_count'] = '3';
+    }
+
+    if ($paragraph->hasField('field_api_url') && !$paragraph->get('field_api_url')->isEmpty()) {
+      $initialUrl = $paragraph->get('field_api_url')->first()->getUrl()->toString();
+      $params = $linkedEvents->parseParams($initialUrl);
+      $eventUrl = $linkedEvents->getEventsRequest($params, $settings['field_event_count']);
+      $settings['events_api_url'] = $eventUrl;
+      $settings['request_url'] = $eventUrl;
+      $settings['places'] = $linkedEvents->getPlaceslist($eventUrl);
+    }
+
+    $booleanFields = [
+      'field_event_location',
+      'field_event_time',
+      'field_free_events',
+      'field_remote_events',
+    ];
+
+    foreach ($booleanFields as $field) {
+      if ($paragraph->hasField($field) && !$paragraph->get($field)->isEmpty()) {
+        $settings[$field] = (boolean) $paragraph->get($field)->first()->getValue()['value'];
+      }
+    }
+
+    $variables['#attached']['drupalSettings']['helfi_events']['data'][$paragraph->id()] = $settings;
+  }
+
+  // Render image placeholder for use in frontend.
+  $variables['#attached']['drupalSettings']['helfi_events']['imagePlaceholder'] = twig_render_template(
+    drupal_get_path('theme', 'hdbt') . '/templates/misc/image-placeholder.twig',
+    [
+      'image_placeholder' => 'calendar-clock',
+      'theme_hook_original' => '',
+    ]
+  );
+
+  $variables['#attached']['library'][] = 'hdbt/event-list';
+  $variables['#attached']['drupalSettings']['helfi_events']['baseUrl'] = LinkedEvents::BASE_URL;
+}