From 103b255e5b17eae13e6a9844c808c3b341a9012d Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 17 Oct 2024 13:36:53 +0200 Subject: [PATCH] IBX-9109: Enabling TypeScript (ts-loader) with Webpack Encore --- dependencies.json | 4 +++ package.json | 6 ++-- .../Resources/encore/ibexa.config.setup.js | 1 + .../Resources/encore/ibexa.js.config.js | 2 +- .../Resources/public/ts/admin.search.ts | 28 ++++++++++++++++++ .../thumbnail/{thumbnail.js => thumbnail.tsx} | 29 +++++++------------ 6 files changed, 48 insertions(+), 22 deletions(-) create mode 100644 dependencies.json 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%) diff --git a/dependencies.json b/dependencies.json new file mode 100644 index 0000000000..0215f662e3 --- /dev/null +++ b/dependencies.json @@ -0,0 +1,4 @@ +{ + "recipesEndpoint": "https://api.github.com/repos/ibexa/recipes-dev/contents/index.json?ref=flex/pull-145", + "packages": [] +} \ No newline at end of file diff --git a/package.json b/package.json index b4c58df2bd..f172bf5eb1 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,12 @@ "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#IBX-9109-enabling-typescript" }, "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 0e715c8ce7..4d08405671 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/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'), ]) 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..f8227b0729 --- /dev/null +++ b/src/bundle/Resources/public/ts/admin.search.ts @@ -0,0 +1,28 @@ +(function (document: Document) { + 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); +})(document); 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..106d2588e7 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,17 @@ import React from 'react'; -import PropTypes from 'prop-types'; - import Icon from '../icon/icon'; -const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) => { - const renderContentTypeIcon = () => { +interface ThumbnailProps { + thumbnailData: { + mimeType: string; + resource: string; + }; + iconExtraClasses?: string; + contentTypeIconPath?: string; +} + +const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }: ThumbnailProps) => { + const renderContentTypeIcon = (): JSX.Element | null => { 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;