Set up Codex

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

@@ -17,6 +17,8 @@ <h1>New Lexeme</h1>
 				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',

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",

vite.config.ts

@@ -21,7 +21,7 @@ function getBuildConfig( isAppBuild: boolean ): BuildOptions {
 			formats: [ 'cjs' ],
 		},
 		rollupOptions: {
-			external: [ 'vue', 'vuex' ],
+			external: [ 'vue', 'vuex', '@wikimedia/codex' ],
 		},
 	};
 }