From 3b9617eb850e2c13732d032d3da99411b6403160 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Ostafin?= Date: Mon, 9 Dec 2024 11:25:27 +0100 Subject: [PATCH] IBX-9109: Enabling TypeScript (ts-loader) with Webpack Encore (#1373) --- package.json | 9 ++++-- .../Resources/encore/ibexa.config.setup.js | 1 + .../Resources/encore/ibexa.js.config.js | 2 +- .../public/js/scripts/admin.search.js | 21 -------------- .../Resources/public/ts/admin.search.ts | 28 +++++++++++++++++++ .../thumbnail/{thumbnail.js => thumbnail.tsx} | 21 ++------------ .../common/thumbnail/thumbnail.types.ts | 6 ++++ .../src/modules/common/types/common.d.ts | 6 ++++ tsconfig.eslint.json | 4 +++ 9 files changed, 55 insertions(+), 43 deletions(-) delete mode 100644 src/bundle/Resources/public/js/scripts/admin.search.js create mode 100644 src/bundle/Resources/public/ts/admin.search.ts rename src/bundle/ui-dev/src/modules/common/thumbnail/{thumbnail.js => thumbnail.tsx} (65%) create mode 100644 src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.types.ts create mode 100644 src/bundle/ui-dev/src/modules/common/types/common.d.ts create mode 100644 tsconfig.eslint.json diff --git a/package.json b/package.json index b4c58df2bd..4fd0df3ebc 100644 --- a/package.json +++ b/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" } } diff --git a/src/bundle/Resources/encore/ibexa.config.setup.js b/src/bundle/Resources/encore/ibexa.config.setup.js index 940ab5c287..b4a3b7f6f2 100644 --- a/src/bundle/Resources/encore/ibexa.config.setup.js +++ b/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'), }); }; diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js index 25a21db5cf..8f1246f1fc 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/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'), ]) diff --git a/src/bundle/Resources/public/js/scripts/admin.search.js b/src/bundle/Resources/public/js/scripts/admin.search.js deleted file mode 100644 index c9f05d7917..0000000000 --- a/src/bundle/Resources/public/js/scripts/admin.search.js +++ /dev/null @@ -1,21 +0,0 @@ -(function (global, doc) { - const headerSearchInput = doc.querySelector('.ibexa-global-search__input'); - const headerSearchSubmitBtn = doc.querySelector('.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search'); - const searchForm = doc.querySelector('.ibexa-search-form'); - const searchInput = doc.querySelector('.ibexa-search-form__search-input'); - const languageSelector = doc.querySelector('.ibexa-filters__item--language-selector .ibexa-filters__select'); - const submitForm = () => { - searchInput.value = headerSearchInput.value; - searchForm.submit(); - }; - const handleHeaderSearchBtnClick = (event) => { - event.preventDefault(); - - submitForm(); - }; - - headerSearchInput.value = searchInput.value; - - headerSearchSubmitBtn.addEventListener('click', handleHeaderSearchBtnClick, false); - languageSelector?.addEventListener('change', submitForm, false); -})(window, document); diff --git a/src/bundle/Resources/public/ts/admin.search.ts b/src/bundle/Resources/public/ts/admin.search.ts new file mode 100644 index 0000000000..52b7f673ec --- /dev/null +++ b/src/bundle/Resources/public/ts/admin.search.ts @@ -0,0 +1,28 @@ +(function () { + const searchForm = document.querySelector('.ibexa-search-form'); + const searchInput = document.querySelector('.ibexa-search-form__search-input'); + const headerSearchInput = document.querySelector('.ibexa-global-search__input'); + const languageSelector = document.querySelector('.ibexa-filters__item--language-selector .ibexa-filters__select'); + const headerSearchSubmitBtn = document.querySelector( + '.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); +})(); diff --git a/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx similarity index 65% rename from src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js rename to src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx index 3f6b1b2ac2..3e1e8e653a 100644 --- a/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js +++ b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx @@ -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; diff --git a/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.types.ts b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.types.ts new file mode 100644 index 0000000000..4d9a3562a3 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.types.ts @@ -0,0 +1,6 @@ +import { ThumbnailData } from '../types/common'; + +export default interface ThumbnailProps extends ThumbnailData { + iconExtraClasses?: string; + contentTypeIconPath?: string; +}; diff --git a/src/bundle/ui-dev/src/modules/common/types/common.d.ts b/src/bundle/ui-dev/src/modules/common/types/common.d.ts new file mode 100644 index 0000000000..7cf53bf4a7 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/types/common.d.ts @@ -0,0 +1,6 @@ +export interface ThumbnailData { + thumbnailData: { + mimeType: string; + resource: string; + } +} diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json new file mode 100644 index 0000000000..508b168029 --- /dev/null +++ b/tsconfig.eslint.json @@ -0,0 +1,4 @@ +{ + "extends": "@ibexa/ts-config", + "include": ["src/bundle/**/*"] +}