configuration-management 0.1.4 → 0.1.8

package/README.md

@@ -82,22 +82,34 @@ async function main (params) {
 Spectrum-based Commerce Admin extension UI for schema-driven system configuration.
 
 ```js
+import React from 'react'
 import { createRoot } from 'react-dom/client'
 import {
   ConfigurationManagementApp,
-  configureWeb,
-  SystemConfig
+  configureWeb
 } from 'configuration-management/web'
-import actionUrls from './config.json' // deploy-time URLs from aio app deploy
+import actionUrls from './config.json'
 import 'configuration-management/web/styles.css'
 
 configureWeb({ actionUrls })
 
 createRoot(document.getElementById('root')).render(
-  <ConfigurationManagementApp runtime={runtime} ims={ims} />
+  React.createElement(ConfigurationManagementApp, { runtime, ims })
 )
 ```
 
+The web UI is **pre-built** in the package. Import the JS entry — styles load automatically:
+
+```js
+import { ConfigurationManagementApp, configureWeb } from 'configuration-management/web'
+```
+
+Or import styles separately:
+
+```js
+import 'configuration-management/web/styles.css'
+```
+
 | Export | Description |
 |--------|-------------|
 | `ConfigurationManagementApp` | Full app shell (router + Spectrum provider + UIX registration) |
@@ -115,7 +127,7 @@ OpenWhisk runtime actions and the Commerce Admin extension manifest ship with th
 #### Automatic wiring on `npm install`
 
 The package runs a **postinstall** script that patches your project's `app.config.yaml`
-(if it exists) with:
+(if present) with:
 
 ```yaml
 extensions:
@@ -123,7 +135,8 @@ extensions:
     $include: node_modules/configuration-management/actions/configurations/ext.config.yaml
 ```
 
-Requirements:
+It does **not** modify your `web-src/` files. Add the UI to your existing App Builder
+bootstrap manually (see React Admin UI above).
 
 - Run `npm install` from your App Builder project root (where `app.config.yaml` lives).
 - Do not use `npm install --ignore-scripts` (that skips postinstall).
@@ -159,11 +172,10 @@ The bundled `ext.config.yaml` declares all actions under the `ConfigurationManag
 
 ```
 my-app/
-├── app.config.yaml          ← $include ext.config from node_modules (above)
+├── app.config.yaml          ← $include ext.config (auto-patched on npm install)
 ├── web-src/
-│   ├── index.html
 │   └── src/
-│       ├── index.js         ← import ConfigurationManagementApp + configureWeb
+│       ├── index.js         ← your app bootstrap + package imports (see above)
 │       └── config.json      ← generated by aio app deploy
 ├── .env
 └── package.json             ← depends on configuration-management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "configuration-management",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "Schema-driven system configuration for Adobe Commerce App Builder sync apps. Magento-style scoped config in Adobe App Builder Database (ABDB) with encryption, Commerce REST helpers, and React Admin UI.",
   "license": "Apache-2.0",
   "author": "Adobe Inc.",
@@ -16,10 +16,12 @@
   ],
   "main": "./src/index.js",
   "bin": {
-    "configuration-management-setup": "./scripts/setup-app-config.js"
+    "configuration-management-setup": "./scripts/setup.js"
   },
   "scripts": {
-    "postinstall": "node ./scripts/setup-app-config.js"
+    "build": "node ./scripts/build-web.js",
+    "prepublishOnly": "node ./scripts/build-web.js",
+    "postinstall": "node ./scripts/build-web.js && node ./scripts/setup.js"
   },
   "exports": {
     ".": "./src/index.js",
@@ -30,7 +32,8 @@
     "./oauth1a": "./src/oauth1a.js",
     "./web": "./web/index.js",
     "./web/index.js": "./web/index.js",
-    "./web/styles.css": "./web/src/styles/index.css",
+    "./web/styles.css": "./web/styles.css",
+    "./web/dist/index.css": "./web/dist/index.css",
     "./web/src/styles/index.css": "./web/src/styles/index.css",
     "./actions/utils": "./actions/utils.js",
     "./actions/ext.config.yaml": "./actions/configurations/ext.config.yaml"
@@ -61,6 +64,7 @@
     "react-router-dom": "^6.8.1"
   },
   "dependencies": {
+    "esbuild": "^0.25.12",
     "got": "^11.8.5",
     "oauth-1.0a": "^2.2.6"
   },

package/scripts/build-web.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+const fs = require('fs')
+const path = require('path')
+
+async function main () {
+  let esbuild
+  try {
+    esbuild = require('esbuild')
+  } catch {
+    console.error('[configuration-management] esbuild is required to build the web UI. Run npm install in the package directory.')
+    process.exit(1)
+  }
+
+  const pkgRoot = path.join(__dirname, '..')
+  const entry = path.join(pkgRoot, 'web/src/index.js')
+  const outdir = path.join(pkgRoot, 'web/dist')
+  const outfile = path.join(outdir, 'index.js')
+  const stylesSrc = path.join(pkgRoot, 'web/src/styles/index.css')
+  const stylesFlat = path.join(pkgRoot, 'web/styles.css')
+
+  fs.mkdirSync(outdir, { recursive: true })
+
+  await esbuild.build({
+    entryPoints: [entry],
+    bundle: true,
+    format: 'esm',
+    platform: 'browser',
+    outfile,
+    packages: 'external',
+    jsx: 'automatic',
+    loader: { '.js': 'jsx', '.css': 'css' },
+    target: ['chrome79', 'firefox85', 'safari13'],
+    logLevel: 'info'
+  })
+
+  // Parcel does not resolve nested @import inside node_modules — ship a flat file.
+  fs.copyFileSync(stylesSrc, stylesFlat)
+
+  console.log('[configuration-management] built web/dist/index.js')
+  if (fs.existsSync(path.join(outdir, 'index.css'))) {
+    console.log('[configuration-management] built web/dist/index.css')
+  }
+  console.log('[configuration-management] copied web/styles.css')
+}
+
+if (require.main === module) {
+  main().catch((err) => {
+    console.error('[configuration-management] build-web failed:', err.message)
+    process.exit(1)
+  })
+}
+
+module.exports = { main }

package/scripts/{setup-app-config.js → setup.js}

@@ -52,9 +52,6 @@ function buildExtensionBlock () {
   ].join('\n')
 }
 
-/**
- * Update an existing `commerce/backend-ui/1` block in place (never add a duplicate key).
- */
 function updateExistingExtensionBlock (content) {
   const match = content.match(/^([ \t]*)commerce\/backend-ui\/1:/m)
   if (!match) return null
@@ -106,6 +103,22 @@ function patchAppConfig (content) {
   return { content, changed: false, reason: 'no-change' }
 }
 
+function setupAppConfig (projectRoot) {
+  const appConfigPath = path.join(projectRoot, 'app.config.yaml')
+  if (!fs.existsSync(appConfigPath)) {
+    return { changed: false, reason: 'no-app-config' }
+  }
+
+  const original = fs.readFileSync(appConfigPath, 'utf8')
+  const { content, changed, reason } = patchAppConfig(original)
+  if (!changed) {
+    return { changed: false, reason }
+  }
+
+  fs.writeFileSync(appConfigPath, content, 'utf8')
+  return { changed: true, reason, detail: INCLUDE_REL }
+}
+
 function main () {
   if (process.env.CONFIGURATION_MANAGEMENT_SKIP_SETUP === '1') {
     return
@@ -114,26 +127,22 @@ function main () {
   const projectRoot = resolveProjectRoot()
   if (!projectRoot) {
     console.log(
-      '[configuration-management] No app.config.yaml found — skip auto-link. ' +
-        'Run `npx configuration-management-setup` after creating your App Builder app.'
+      '[configuration-management] No App Builder project found — skip setup. ' +
+        'Run `npx configuration-management-setup` from your project root after `aio app init`.'
     )
     return
   }
 
-  const appConfigPath = path.join(projectRoot, 'app.config.yaml')
-  const original = fs.readFileSync(appConfigPath, 'utf8')
-  const { content, changed, reason } = patchAppConfig(original)
-
-  if (!changed) {
-    console.log(`[configuration-management] app.config.yaml unchanged (${reason}).`)
+  const app = setupAppConfig(projectRoot)
+  if (app.changed) {
+    console.log(
+      `[configuration-management] Updated app.config.yaml (${app.reason}):\n` +
+        `  $include: ${app.detail}`
+    )
     return
   }
 
-  fs.writeFileSync(appConfigPath, content, 'utf8')
-  console.log(
-    `[configuration-management] Updated app.config.yaml (${reason}):\n` +
-      `  $include: ${INCLUDE_REL}`
-  )
+  console.log('[configuration-management] app.config.yaml already configured.')
 }
 
 if (require.main === module) {
@@ -147,8 +156,7 @@ if (require.main === module) {
 
 module.exports = {
   patchAppConfig,
+  setupAppConfig,
   INCLUDE_REL,
-  EXTENSION_POINT,
-  alreadyLinked,
-  hasExtensionPoint
+  EXTENSION_POINT
 }

package/web/dist/index.css

@@ -0,0 +1,294 @@
+/* web/src/styles/index.css */
+:root {
+  --sm-color-bg: #f7f8fa;
+  --sm-color-surface: #ffffff;
+  --sm-color-surface-muted: #f3f4f6;
+  --sm-color-surface-subtle: #fafbfc;
+  --sm-color-border: #e5e7eb;
+  --sm-color-border-strong: #d1d5db;
+  --sm-color-text: #111827;
+  --sm-color-text-muted: #6b7280;
+  --sm-color-text-inverse: #ffffff;
+  --sm-color-accent: #1473e6;
+  --sm-color-accent-hover: #0f5fc4;
+  --sm-color-accent-soft: #e8f1fc;
+  --sm-color-success: #22863a;
+  --sm-color-success-hover: #1a6e2f;
+  --sm-color-success-soft: #ecfdf5;
+  --sm-color-warning: #b58105;
+  --sm-color-warning-hover: #946c04;
+  --sm-color-warning-soft: #fff7ed;
+  --sm-color-warning-border: #fde68a;
+  --sm-color-warning-text: #92400e;
+  --sm-color-warning-tint: #fef3c7;
+  --sm-color-danger: #c0392b;
+  --sm-color-danger-hover: #a32d20;
+  --sm-color-danger-soft: #fef2f2;
+  --sm-color-danger-tint: #fee2e2;
+  --sm-color-accent-tint: #dbeafe;
+  --sm-color-neutral-soft: #eef2f7;
+  --sm-color-neutral-text: #374151;
+  --sm-color-text-strong: #1f2937;
+  --sm-color-text-soft: #475569;
+  --sm-color-surface-panel: #f9fafb;
+  --sm-color-overlay: rgba(15, 23, 42, 0.45);
+  --sm-radius-sm: 4px;
+  --sm-radius-md: 8px;
+  --sm-radius-lg: 10px;
+  --sm-radius-xl: 12px;
+  --sm-radius-2xl: 14px;
+  --sm-radius-pill: 999px;
+  --sm-space-1: 4px;
+  --sm-space-2: 8px;
+  --sm-space-3: 12px;
+  --sm-space-4: 16px;
+  --sm-space-5: 20px;
+  --sm-space-6: 24px;
+  --sm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
+  --sm-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.04);
+  --sm-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-pill: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-floating: 0 4px 14px rgba(15, 23, 42, 0.08);
+  --sm-shadow-dropdown: 0 12px 28px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.06);
+  --sm-shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.25), 0 2px 8px rgba(15, 23, 42, 0.08);
+  --sm-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.04);
+  --sm-font-family:
+    adobe-clean,
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  --sm-font-mono:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace;
+  --sm-font-size-xs: 11px;
+  --sm-font-size-sm: 12px;
+  --sm-font-size-md: 13px;
+  --sm-font-size-lg: 14px;
+  --sm-font-weight-regular: 400;
+  --sm-font-weight-medium: 500;
+  --sm-font-weight-semibold:600;
+  --sm-font-weight-bold: 700;
+  --sm-control-height-sm: 28px;
+  --sm-control-height-md: 32px;
+  --sm-control-height-lg: 40px;
+  --sm-control-padding-x: 16px;
+  --sm-z-nav: 30;
+  --sm-z-sticky: 20;
+  --sm-z-modal: 100;
+  --spectrum-accent-color-900: var(--sm-color-accent);
+  --spectrum-accent-color-1000: var(--sm-color-accent-hover);
+  color-scheme: light;
+}
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+  background: var(--sm-color-bg);
+  color: var(--sm-color-text);
+  font-family: var(--sm-font-family);
+}
+.sm-provider {
+  background: var(--sm-color-bg);
+  min-height: 100vh;
+}
+.sm-card {
+  background: var(--sm-color-surface);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-lg);
+  box-shadow: var(--sm-shadow-xs);
+  padding: var(--sm-space-5);
+}
+.sm-card--flush {
+  padding: 0;
+}
+.sm-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-1);
+  padding: 2px var(--sm-space-2);
+  border-radius: var(--sm-radius-pill);
+  background: var(--sm-color-neutral-soft);
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-xs);
+  font-weight: var(--sm-font-weight-semibold);
+  line-height: 16px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+.sm-pill--accent {
+  background: var(--sm-color-accent-soft);
+  color: var(--sm-color-accent);
+}
+.sm-pill--success {
+  background: var(--sm-color-success-soft);
+  color: var(--sm-color-success);
+}
+.sm-pill--warning {
+  background: var(--sm-color-warning-soft);
+  color: var(--sm-color-warning);
+}
+.sm-pill--danger {
+  background: var(--sm-color-danger-soft);
+  color: var(--sm-color-danger);
+}
+.sm-tab-bar {
+  position: sticky;
+  top: 0;
+  z-index: var(--sm-z-nav);
+  background: var(--sm-color-surface);
+  border-bottom: 1px solid var(--sm-color-border);
+  padding: 10px var(--sm-space-4);
+  box-shadow: var(--sm-shadow-sm);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.sm-tab-bar__track {
+  display: inline-flex;
+  padding: var(--sm-space-1);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-pill);
+  box-shadow: var(--sm-shadow-inset);
+  gap: 2px;
+  font-family: var(--sm-font-family);
+}
+.sm-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-2);
+  padding: var(--sm-space-2) var(--sm-control-padding-x);
+  border: 0;
+  border-radius: var(--sm-radius-pill);
+  background: transparent;
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-md);
+  font-weight: var(--sm-font-weight-semibold);
+  letter-spacing: 0.1px;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
+}
+.sm-tab:hover {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-text);
+}
+.sm-tab.is-active {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-accent);
+  font-weight: var(--sm-font-weight-bold);
+  box-shadow: var(--sm-shadow-pill);
+  cursor: default;
+}
+.sm-tab__icon {
+  display: inline-flex;
+  opacity: 0.75;
+}
+.sm-tab.is-active .sm-tab__icon {
+  opacity: 1;
+}
+.sm-textarea textarea {
+  height: 160px !important;
+  max-height: 160px !important;
+  min-height: 160px !important;
+  overflow-y: auto !important;
+  resize: none !important;
+  font-family: var(--sm-font-mono);
+  font-size: var(--sm-font-size-sm);
+}
+.sm-note {
+  margin-top: var(--sm-space-3);
+  padding: var(--sm-space-3);
+  border-radius: var(--sm-radius-md);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  color: var(--sm-color-text);
+  font-size: var(--sm-font-size-md);
+  white-space: pre-line;
+  font-family: var(--sm-font-mono);
+}
+.sm-note--warning {
+  background: var(--sm-color-warning-soft);
+  border-color: var(--sm-color-warning-border);
+  color: var(--sm-color-warning-text);
+  font-family: var(--sm-font-family);
+}
+@keyframes sm-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes sm-indeterminate {
+  0% {
+    left: -40%;
+    width: 40%;
+  }
+  50% {
+    left: 30%;
+    width: 40%;
+  }
+  100% {
+    left: 100%;
+    width: 40%;
+  }
+}
+@keyframes sm-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sm-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.SideNav {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  height: 100%;
+}
+.SideNav-item {
+  list-style-type: none;
+  margin: var(--spectrum-global-dimension-size-50) 0;
+}
+.SideNav-itemLink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--sm-space-2) var(--sm-space-3);
+  border-radius: var(--sm-radius-sm);
+  font-size: var(--sm-font-size-lg);
+  font-weight: var(--sm-font-weight-regular);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: pointer;
+  background: transparent;
+  color: var(--sm-color-text);
+}
+.SideNav-itemLink.is-selected {
+  color: var(--sm-color-accent);
+  background: var(--sm-color-accent-soft);
+}