IBX-9109: Enabling TypeScript (ts-loader) with Webpack Encore (#1373)

Author: OstafinL

package.json

@@ -5,12 +5,15 @@
     "prettier": "eslint-config-ibexa/prettier",
     "dependencies": {},
     "devDependencies": {
-        "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git#~v1.1.1"
+        "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git#~v1.2.0",
+        "@ibexa/ts-config": "https://github.com/ibexa/ts-config-ibexa#~v1.0.0",
+        "@types/react": "^18.3.11",
+        "@types/react-dom": "^18.3.1"
     },
     "scripts": {
         "test": "yarn prettier-test && yarn eslint-test",
         "fix": "yarn prettier-test --write && yarn eslint-test --fix",
-        "eslint-test": "eslint \"./src/bundle/Resources/**/*.js\" \"./src/bundle/ui-dev/**/*.js\"",
-        "prettier-test": "yarn prettier \"./src/bundle/Resources/**/*.{js,scss}\" \"./src/bundle/ui-dev/**/*.js\" --check"
+        "eslint-test": "eslint \"./src/bundle/Resources/**/*.{js,ts}\" \"./src/bundle/ui-dev/**/*.{js,tsx}\"",
+        "prettier-test": "yarn prettier \"./src/bundle/Resources/**/*.{js,ts,scss}\" \"./src/bundle/ui-dev/**/*.{js,tsx}\" --check"
     }
 }

src/bundle/Resources/encore/ibexa.config.setup.js

@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = (Encore) => {
     Encore.addAliases({
         '@ibexa-admin-ui': path.resolve('./vendor/ibexa/admin-ui'),
+        '@ibexa-admin-ui-helpers': path.resolve('./vendor/ibexa/admin-ui/src/bundle/Resources/public/js/scripts/helpers'),
         '@ibexa-admin-ui-modules': path.resolve('./vendor/ibexa/admin-ui/src/bundle/ui-dev/src/modules'),
     });
 };

src/bundle/Resources/encore/ibexa.js.config.js

@@ -129,7 +129,7 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.filters.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.sorting.js'),
-            path.resolve(__dirname, '../public/js/scripts/admin.search.js'),
+            path.resolve(__dirname, '../public/ts/admin.search.ts'),
             path.resolve(__dirname, '../public/js/scripts/udw/select.location.js'),
             path.resolve(__dirname, '../public/js/scripts/button.translation.edit.js'),
         ])

src/bundle/Resources/public/js/scripts/admin.search.js

@@ -0,0 +1,28 @@
+(function () {
+    const searchForm = document.querySelector<HTMLFormElement>('.ibexa-search-form');
+    const searchInput = document.querySelector<HTMLInputElement>('.ibexa-search-form__search-input');
+    const headerSearchInput = document.querySelector<HTMLInputElement>('.ibexa-global-search__input');
+    const languageSelector = document.querySelector<HTMLSelectElement>('.ibexa-filters__item--language-selector .ibexa-filters__select');
+    const headerSearchSubmitBtn = document.querySelector<HTMLButtonElement>(
+        '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
+    );
+
+    if (!headerSearchInput || !searchInput || !searchForm) {
+        return;
+    }
+
+    const submitForm = () => {
+        searchInput.value = headerSearchInput.value;
+        searchForm.submit();
+    };
+    const handleHeaderSearchBtnClick = (event: MouseEvent) => {
+        event.preventDefault();
+
+        submitForm();
+    };
+
+    headerSearchInput.value = searchInput.value;
+
+    headerSearchSubmitBtn?.addEventListener('click', handleHeaderSearchBtnClick, false);
+    languageSelector?.addEventListener('change', submitForm, false);
+})();

src/bundle/Resources/public/ts/admin.search.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import Icon from '../icon/icon';
+import ThumbnailProps from './thumbnail.types';
 
-const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) => {
-    const renderContentTypeIcon = () => {
+const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }: ThumbnailProps) => {
+    const renderContentTypeIcon = (): React.JSX.Element | null => {
         if (!contentTypeIconPath) {
             return null;
         }
@@ -32,18 +31,4 @@ const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) =>
     );
 };
 
-Thumbnail.propTypes = {
-    thumbnailData: PropTypes.shape({
-        mimeType: PropTypes.string.isRequired,
-        resource: PropTypes.string.isRequired,
-    }).isRequired,
-    iconExtraClasses: PropTypes.string,
-    contentTypeIconPath: PropTypes.string,
-};
-
-Thumbnail.defaultProps = {
-    iconExtraClasses: null,
-    contentTypeIconPath: null,
-};
-
 export default Thumbnail;

src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js renamed to src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx

@@ -0,0 +1,6 @@
+import { ThumbnailData } from '../types/common';
+
+export default interface ThumbnailProps extends ThumbnailData {
+    iconExtraClasses?: string;
+    contentTypeIconPath?: string;
+};

src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.types.ts

@@ -0,0 +1,6 @@
+export interface ThumbnailData {
+    thumbnailData: {
+        mimeType: string;
+        resource: string;
+    }
+}

src/bundle/ui-dev/src/modules/common/types/common.d.ts

@@ -0,0 +1,4 @@
+{
+    "extends": "@ibexa/ts-config",
+    "include": ["src/bundle/**/*"]
+}