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

package.json

@@ -10,7 +10,7 @@
     "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

@@ -126,7 +126,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/ts/admin.search.ts

@@ -0,0 +1,30 @@
+(function (document) {
+    const searchForm = document.querySelector('.ibexa-search-form') as HTMLFormElement | null;
+    const searchInput = document.querySelector('.ibexa-search-form__search-input') as HTMLInputElement | null;
+    const headerSearchInput = document.querySelector('.ibexa-global-search__input') as HTMLInputElement | null;
+    const languageSelector = document.querySelector(
+        '.ibexa-filters__item--language-selector .ibexa-filters__select',
+    ) as HTMLSelectElement | null;
+    const headerSearchSubmitBtn = document.querySelector(
+        '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
+    ) as HTMLButtonElement | null;
+
+    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);
+})(document);

src/bundle/ui-dev/src/modules/common/icon/icon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { isExternalInstance } from '@ibexa-admin-ui-helpers/context.helper';
+import { createCssClassNames } from '../helpers/css.class.names';
+
+import UrlIcon from './urlIcon';
+import InculdedIcon from './inculdedIcon';
+
+interface BaseIconProps {
+    extraClasses?: string;
+    useIncludedIcon?: boolean;
+    defaultIconName?: string | null;
+}
+interface NameIconProps extends BaseIconProps {
+    name: string;
+    customPath?: string | null;
+}
+interface CustomPathIconProps extends BaseIconProps {
+    name?: string | null;
+    customPath: string;
+}
+
+type IconProps = NameIconProps | CustomPathIconProps;
+
+const Icon = ({
+    name = null,
+    customPath = null,
+    extraClasses = '',
+    useIncludedIcon = false,
+    defaultIconName = 'about-info',
+}: IconProps) => {
+    const cssClass = createCssClassNames({
+        'ibexa-icon': true,
+        [extraClasses]: true,
+    });
+
+    const isIconIncluded = useIncludedIcon || isExternalInstance();
+
+    if (isIconIncluded) {
+        return <InculdedIcon cssClass={cssClass} name={name} defaultIconName={defaultIconName} />;
+    }
+
+    return <UrlIcon cssClass={cssClass} name={name} customPath={customPath} />;
+};
+
+export default Icon;

src/bundle/ui-dev/src/modules/common/icon/urlIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper';
+
+interface UrlIconProps {
+    cssClass?: string;
+    name?: string | null;
+    customPath?: string | null;
+}
+
+const UrlIcon = ({ cssClass = '', name = null, customPath = null }: UrlIconProps) => {
+    const linkHref = customPath ?? getIconPath(name);
+
+    return (
+        <svg className={cssClass}>
+            <use xlinkHref={linkHref} />
+        </svg>
+    );
+};
+
+export default UrlIcon;

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

@@ -1,9 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import Icon from '../icon/icon';
 
-const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) => {
+interface ThumbnailProps {
+    thumbnailData: {
+        mimeType: string;
+        resource: string;
+    };
+    iconExtraClasses?: string;
+    contentTypeIconPath?: string | null;
+}
+
+const Thumbnail = ({ thumbnailData, iconExtraClasses = '', contentTypeIconPath = null }: ThumbnailProps) => {
     const renderContentTypeIcon = () => {
         if (!contentTypeIconPath) {
             return null;
@@ -32,18 +39,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/sub-items/sub.items.module.js

@@ -10,7 +10,7 @@ import Popup from '../common/popup/popup.component';
 import ActionButton from './components/action-btn/action.btn.js';
 import Pagination from '../common/pagination/pagination.js';
 import NoItemsComponent from './components/no-items/no.items.component.js';
-import Icon from '../common/icon/icon.js';
+import Icon from '../common/icon/icon';
 import PaginationInfo from '../common/pagination/pagination.info.js';
 
 import deepClone from '../common/helpers/deep.clone.helper.js';

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "ts-config-ibexa/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@ibexa-admin-ui/*": ["./*"],
+      "@ibexa-admin-ui-helpers/*": ["src/bundle/Resources/public/js/scripts/helpers/*"]
+    }
+  },
+}