Set up Codex (#746)

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.) When MediaWiki upgrades to a new Codex version,
Special:NewLexeme will use the new versions of the Codex components (and
their styles) immediately.

For the design tokens from Codex, we will start by directly importing
them into each component that uses them, where they will end up being
included (inlined) in the build. This means that design tokens used in
our own components will be outdated after a MediaWiki upgrade to a new
Codex version until we update this repository and push a new build to
WikibaseLexeme. We will continue to investigate whether we can use them
in some way that will automatically update them instead. (The solution
will almost certainly involve using the tokens via CSS variables, but
currently only a subset of the design tokens is available as CSS
variables, and even then this depends on the skin. We might be able to
get more variables added by MediaWiki, or we might add the variables in
WikibaseLexeme ourselves.)

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' ],
 		},
 	};
 }