From d88f9442f386f5a892e67ac53f6d4b5ff72a9b83 Mon Sep 17 00:00:00 2001 From: Lucas Werkmeister Date: Tue, 10 Sep 2024 17:22:03 +0200 Subject: [PATCH 1/3] Set up Codex MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This sets up Codex components and design tokens so we can start using them. No actual components are migrated to Codex yet. Components from Wikit can be used directly in our own components. The build is set up so that, when Special:NewLexeme is used within MediaWiki, Codex will be imported from there; this means that our build should get substantially smaller once we don’t need Wikit anymore. In the dev entry point, Codex comes from node_modules/ as expected. (Notice that the styles are only imported in index.html, so they won’t be included in our build output either. As far as I could tell, Vite doesn’t have a CSS equivalent of `external` JS packages in vite.config.ts yet.) Design tokens from Codex will have to be imported directly into each component that uses them, where they will end up being included in the build. I would’ve liked to use them as CSS variables instead (aka custom properties), but only a small subset of design tokens is actually made available as a CSS variable in MediaWiki (and even then it depends on the skin), so I don’t think this is possible. Combined, this means that when MediaWiki upgrades to a new Codex version, Special:NewLexeme will use the new versions of the Codex components (and their styles) immediately, but the design tokens used in our own components will stay outdated until this repository is updated and a new build is pushed in WikibaseLexeme.git. Bug: T369505 --- index.html | 2 + package-lock.json | 152 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + vite.config.ts | 2 +- 4 files changed, 157 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 08ff8706..e84d4edd 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,8 @@

New Lexeme

import DevLexemeCreator from './src/data-access/DevLexemeCreator'; import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever'; import LanguageItemSearcher from './src/data-access/LanguageItemSearcher'; + import '@wikimedia/codex/dist/codex.style.css'; + import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css'; const config = { rootSelector: '#app', diff --git a/package-lock.json b/package-lock.json index bdbb6a0b..f54b1780 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.1", "license": "GPL-2.0-or-later", "dependencies": { + "@wikimedia/codex": "^1.12.0", + "@wikimedia/codex-design-tokens": "^1.12.0", "@wmde/wikibase-datamodel-types": "^0.2.0", "@wmde/wikit-tokens": "^3.0.0-alpha.12", "@wmde/wikit-vue-components": "^3.0.0-alpha.12", @@ -1232,6 +1234,63 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, + "node_modules/@floating-ui/vue": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz", + "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==", + "dependencies": { + "@floating-ui/dom": "^1.6.1", + "@floating-ui/utils": "^0.2.1", + "vue-demi": ">=0.13.0" + } + }, + "node_modules/@floating-ui/vue/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -3138,6 +3197,40 @@ } } }, + "node_modules/@wikimedia/codex": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz", + "integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==", + "dependencies": { + "@floating-ui/vue": "1.0.6", + "@wikimedia/codex-icons": "1.12.0" + }, + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + }, + "peerDependencies": { + "vue": "3.4.27" + } + }, + "node_modules/@wikimedia/codex-design-tokens": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz", + "integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q==", + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + } + }, + "node_modules/@wikimedia/codex-icons": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz", + "integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA==", + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + } + }, "node_modules/@wmde/eslint-config-wikimedia-typescript": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz", @@ -15467,6 +15560,46 @@ "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", "dev": true }, + "@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "requires": { + "@floating-ui/utils": "^0.2.7" + } + }, + "@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "requires": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, + "@floating-ui/vue": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz", + "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==", + "requires": { + "@floating-ui/dom": "^1.6.1", + "@floating-ui/utils": "^0.2.1", + "vue-demi": ">=0.13.0" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "requires": {} + } + } + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -16884,6 +17017,25 @@ "tsconfig": "^7.0.0" } }, + "@wikimedia/codex": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz", + "integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==", + "requires": { + "@floating-ui/vue": "1.0.6", + "@wikimedia/codex-icons": "1.12.0" + } + }, + "@wikimedia/codex-design-tokens": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz", + "integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q==" + }, + "@wikimedia/codex-icons": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz", + "integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA==" + }, "@wmde/eslint-config-wikimedia-typescript": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz", diff --git a/package.json b/package.json index 27adfa88..61efcde8 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,8 @@ "node": ">=16" }, "dependencies": { + "@wikimedia/codex": "^1.12.0", + "@wikimedia/codex-design-tokens": "^1.12.0", "@wmde/wikibase-datamodel-types": "^0.2.0", "@wmde/wikit-tokens": "^3.0.0-alpha.12", "@wmde/wikit-vue-components": "^3.0.0-alpha.12", diff --git a/vite.config.ts b/vite.config.ts index 003e3b5e..11cf4453 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,7 +21,7 @@ function getBuildConfig( isAppBuild: boolean ): BuildOptions { formats: [ 'cjs' ], }, rollupOptions: { - external: [ 'vue', 'vuex' ], + external: [ 'vue', 'vuex', '@wikimedia/codex' ], }, }; } From bc773e68f35dab7c068cba0179796f0ddb2b36a6 Mon Sep 17 00:00:00 2001 From: Lucas Werkmeister Date: Tue, 10 Sep 2024 17:34:45 +0200 Subject: [PATCH 2/3] POC: Use Codex in NewLexemeForm MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Using the Button component from Codex instead of Wikit is straightforward – we just need to rename a few props. Using the variables is a bit more involved. Not only do we need replacement variables from Codex that aren’t always clear, but the small-text mixin used for the copyright notice also relies on the Wikit variables. So for now, this change just keeps importing the Wikit variables and lets Codex override them wherever they both use the same name. Bug: T369505 --- src/components/NewLexemeForm.vue | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue index 05a2a405..b0bd3849 100644 --- a/src/components/NewLexemeForm.vue +++ b/src/components/NewLexemeForm.vue @@ -6,7 +6,7 @@ import { ref, } from 'vue'; import { useStore } from 'vuex'; -import { Button as WikitButton } from '@wmde/wikit-vue-components'; +import { CdxButton } from '@wikimedia/codex'; import { useConfig } from '@/plugins/ConfigPlugin/Config'; import { useMessages } from '@/plugins/MessagesPlugin/Messages'; import LemmaInput from '@/components/LemmaInput.vue'; @@ -176,21 +176,22 @@ export default {
- {{ submitButtonText }} - +
diff --git a/src/components/LanguageInput.vue b/src/components/LanguageInput.vue index bab445d3..d632bde5 100644 --- a/src/components/LanguageInput.vue +++ b/src/components/LanguageInput.vue @@ -79,11 +79,11 @@ export default { diff --git a/src/components/LexicalCategoryInput.vue b/src/components/LexicalCategoryInput.vue index 54427801..b93ead0b 100644 --- a/src/components/LexicalCategoryInput.vue +++ b/src/components/LexicalCategoryInput.vue @@ -73,10 +73,10 @@ export default { diff --git a/src/components/RequiredAsterisk.vue b/src/components/RequiredAsterisk.vue index a1018c16..c7ea9669 100644 --- a/src/components/RequiredAsterisk.vue +++ b/src/components/RequiredAsterisk.vue @@ -21,18 +21,18 @@ export default { diff --git a/src/components/SearchExisting.vue b/src/components/SearchExisting.vue index 3bd87532..9f140393 100644 --- a/src/components/SearchExisting.vue +++ b/src/components/SearchExisting.vue @@ -24,13 +24,19 @@ const searchMessage = computed( () => messages.get( diff --git a/src/components/SpellingVariantInput.vue b/src/components/SpellingVariantInput.vue index 7e873a1c..1b5f7f3e 100644 --- a/src/components/SpellingVariantInput.vue +++ b/src/components/SpellingVariantInput.vue @@ -128,17 +128,17 @@ export default {