From 5d802886570c7c0751925c98eaf7135c347aa9fb Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 9 Sep 2024 18:17:28 +0200
Subject: [PATCH] POC: Start using Codex

I thought the TextInput would be an easy component to start with. I was
wrong, but hey, at least this mostly works. I also left some TODOs in
the code as a treat.

Bug: T369505
---
 package-lock.json             | 137 ++++++++++++++++++++++++++++++++++
 package.json                  |   1 +
 src/App.vue                   |   1 +
 src/components/LemmaInput.vue |  45 ++++++-----
 vite.config.ts                |   2 +-
 5 files changed, 167 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdbb6a0b..264310bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"@wikimedia/codex": "^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 +1233,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 +3196,31 @@
 				}
 			}
 		},
+		"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-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 +15550,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 +17007,20 @@
 				"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-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..97ceae7b 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
 		"node": ">=16"
 	},
 	"dependencies": {
+		"@wikimedia/codex": "^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/src/App.vue b/src/App.vue
index b2eb49fd..c124427b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import AnonymousEditWarning from '@/components/AnonymousEditWarning.vue';
 import NewLexemeForm from '@/components/NewLexemeForm.vue';
 import SearchExisting from '@/components/SearchExisting.vue';
 import '@wmde/wikit-vue-components/dist/wikit-vue-components.css';
+import '@wikimedia/codex/dist/codex.style.css';
 
 </script>
 
diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
index addb0515..1fdfdc1d 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TextInput } from '@wmde/wikit-vue-components';
-import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
+import { CdxField, CdxTextInput } from '@wikimedia/codex';
+import RequiredAsterisk from '@/components/RequiredAsterisk.vue'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
 import { useStore } from 'vuex';
@@ -51,23 +51,32 @@ export default {
 </script>
 
 <template>
-	<text-input
-		class="wbl-snl-lemma-input"
-		:label="messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' )"
-		:placeholder="messages.getUnescaped(
-			'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
-			exampleLemma
-		)"
-		name="lemma"
-		aria-required="true"
-		:error="error"
-		:value="modelValue"
-		@input="$emit( 'update:modelValue', $event )"
+	<!-- TODO should :status and :messages be separate computeds? -->
+	<cdx-field
+		:status="error !== null ? 'error' : 'default'"
+		:messages="error !== null ? { error: error.message } : {}"
 	>
-		<template #suffix>
-			<required-asterisk />
-		</template>
-	</text-input>
+		<!-- TODO check escaping of :placeholder -->
+		<cdx-text-input
+			class="wbl-snl-lemma-input"
+			:placeholder="messages.getUnescaped(
+				'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
+				exampleLemma
+			)"
+			name="lemma"
+			aria-required="true"
+			:model-value="modelValue"
+			@update:modelValue="$emit( 'update:modelValue', $event )"
+		>
+			<!-- TODO codex docs say don’t mark required labels with an asterisk…
+			<template #suffix>
+				<required-asterisk />
+			</template>
+			-->
+		</cdx-text-input>
+		<template #label>{{ messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' ) }}</template><!-- TODO check escaping -->
+	</cdx-field>
+
 </template>
 
 <style lang="scss">
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' ],
 		},
 	};
 }