Widgets: Declare dependencies in a per-widget package.json

.npmpackagejsonlintignore

@@ -4,3 +4,4 @@ build
 vendor
 wordpress
 routes
+widgets

package.json

@@ -242,6 +242,7 @@
 		"test/performance",
 		"test/storybook-playwright",
 		"test/unit",
-		"tools/*"
+		"tools/*",
+		"widgets/*"
 	]
 }

widgets/hello-world/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "@wordpress/hello-world-widget",
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@wordpress/icons": "file:../../packages/icons",
+		"@wordpress/ui": "file:../../packages/ui",
+		"clsx": "^2.1.1"
+	}
+}

widgets/hello-world/render.tsx

@@ -1,16 +1,24 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
 import { Stack, Text } from '@wordpress/ui';
 
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.css';
+
 export default function HelloWorld() {
 	return (
 		<Stack
 			align="center"
 			justify="center"
-			style={ {
-				height: '100%',
-				padding: 'var(--wpds-dimension-padding-2xl)',
-				backgroundColor: 'var(--wpds-color-bg-surface-brand)',
-				color: 'var(--wpds-color-fg-interactive-brand)',
-			} }
+			className={ clsx( styles.root ) }
 		>
 			<Text variant="heading-2xl">Hello World</Text>
 		</Stack>

widgets/hello-world/style.module.css

@@ -0,0 +1,6 @@
+.root {
+	height: 100%;
+	padding: var(--wpds-dimension-padding-2xl);
+	background-color: var(--wpds-color-bg-surface-brand);
+	color: var(--wpds-color-fg-interactive-brand);
+}