WordPress · adamziel · Sep 14, 2024 · Jul 12, 2024 · Jul 12, 2024 · Jul 12, 2024
diff --git a/packages/playground/components/.eslintrc.json b/packages/playground/components/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+"extends": ["../../../.eslintrc.json"],
+"ignorePatterns": ["!**/*"],
+"overrides": [
+{
+"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+"rules": {}
+},
+{
+"files": ["*.ts", "*.tsx"],
+"rules": {}
+},
+{
+"files": ["*.js", "*.jsx"],
+"rules": {}
+}
+]
+}
diff --git a/packages/playground/components/README.md b/packages/playground/components/README.md
@@ -0,0 +1,17 @@
+## Playground components
+
+A library of reusable, dependency-free components (well, React is a dependency) that can be reused between Playground webapp, WordPress plugins, WordPress blocks, and the Blueprints builder. For example, the PathMappingControl will make a good fit for all these places.
+
+## Design decisions
+
+The components in this package use `@wordpress/components` under the hood. Web components were considered for portability, but ultimately weren't used because they:
+
+- Wouldn't have the native WordPress look and feel
+- Couldn't easily mix with WordPress components
+- Had some issues around focus management
+
+## Development Instructions (or ideally a Blueprint)
+
+1. Run `nx dev playground-components`
+2. Go to http://localhost:5173/
+3. Play with the widgets and confirm they work intuitively
diff --git a/packages/playground/components/index.html b/packages/playground/components/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Components demo</title>
+<base href="/" />
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="./src/demos.tsx"></script>
+</body>
+</html>
diff --git a/packages/playground/components/package.json b/packages/playground/components/package.json
@@ -0,0 +1,29 @@
+{
+"name": "@wp-playground/components",
+"version": "0.9.18",
+"exports": {
+".": {
+"import": "./index.js",
+"require": "./index.cjs"
+},
+"./package.json": "./package.json"
+},
+"type": "module",
+"main": "./index.cjs",
+"module": "./index.js",
+"typedoc": {
+"entryPoint": "./src/index.ts",
+"readmeFile": "./README.md",
+"displayName": "@wp-playground/components",
+"tsconfig": "./tsconfig.lib.json"
+},
+"publishConfig": {
+"access": "public",
+"directory": "../../../dist/packages/playground/components"
+},
+"gitHead": "2f8d8f3cea548fbd75111e8659a92f601cddc593",
+"engines": {
+"node": ">=18.18.0",
+"npm": ">=8.11.0"
+}
+}
diff --git a/packages/playground/components/project.json b/packages/playground/components/project.json
@@ -0,0 +1,81 @@
+{
+"name": "playground-components",
+"$schema": "../../../node_modules/nx/schemas/project-schema.json",
+"sourceRoot": "packages/playground/components/src",
+"projectType": "library",
+"targets": {
+"build": {
+"executor": "@nx/vite:build",
+"outputs": ["{options.outputPath}"],
+"defaultConfiguration": "production",
+"options": {
+"outputPath": "dist/packages/playground/components"
+},
+"configurations": {
+"development": {
+"mode": "development"
+},
+"production": {
+"mode": "production",
+"logLevel": "info"
+}
+},
+"dependsOn": ["^build"]
+},
+"dev": {
+"executor": "@nx/vite:dev-server",
+"defaultConfiguration": "development",
+"options": {
+"buildTarget": "playground-components:build"
+},
+"configurations": {
+"development": {
+"buildTarget": "playground-components:build:development",
+"hmr": true
+},
+"production": {
+"buildTarget": "playground-components:build:production",
+"hmr": false
+}
+}
+},
+"test": {
+"executor": "nx:noop",
+"dependsOn": ["test:vite"]
+},
+"test:esmcjs": {
+"executor": "@wp-playground/nx-extensions:assert-built-esm-and-cjs",
+"options": {
+"outputPath": "dist/packages/playground/components"
+},
+"dependsOn": ["build"]
+},
+"test:vite": {
+"executor": "@nx/vite:test",
+"outputs": [
+"{workspaceRoot}/coverage/packages/playground/components"
+],
+"options": {
+"passWithNoTests": true,
+"reportsDirectory": "../../../coverage/packages/playground/components"
+}
+},
+"lint": {
+"executor": "@nx/linter:eslint",
+"outputs": ["{options.outputFile}"],
+"options": {
+"lintFilePatterns": ["packages/playground/components/**/*.ts"]
+}
+},
+"typecheck": {
+"executor": "nx:run-commands",
+"options": {
+"commands": [
+"tsc -p packages/playground/remote/tsconfig.spec.json --noEmit",
+"tsc -p packages/playground/remote/tsconfig.lib.json --noEmit"
+]
+}
+}
+},
+"tags": []
+}