@adobedjangir/commerce-admin-management 0.0.2

package/web/src/index.js

@@ -0,0 +1,46 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import './styles/index.css'
+
+import App from './components/App'
+import { MainPage } from './components/MainPage'
+import ExtensionRegistration from './components/ExtensionRegistration'
+import SystemConfig from './components/SystemConfig'
+import SystemConfigSchemaEditor from './components/SystemConfigSchemaEditor'
+import AppSectionNav from './components/AppSectionNav'
+
+export { useSystemConfig } from './hooks/useSystemConfig'
+export { useSystemConfigSchema } from './hooks/useSystemConfigSchema'
+export { useConfirm } from './hooks/useConfirm'
+
+export * from './schema/systemConfigSchema'
+export { buildStoreMappingsFromCommercePayload } from './utils/storeMappingsFromCommerceRest'
+export { callAction } from './utils'
+export {
+  configureWeb,
+  getExtensionId,
+  getActionKey,
+  getNavItems,
+  getPageComponent,
+  DEFAULT_ACTION_KEYS
+} from './settings'
+export { NAV_ICONS, getNavIcon } from './nav-icons'
+export { BUILT_IN_PAGES } from './pages'
+export { THEME, PALETTE, RADIUS, SHADOW, SPACE, FONT } from './theme'
+
+export {
+  App,
+  MainPage,
+  ExtensionRegistration,
+  SystemConfig,
+  SystemConfigSchemaEditor,
+  AppSectionNav
+}
+
+/** Full Commerce Admin extension shell (router + Spectrum provider). */
+export { default as CommerceAdminManagementApp } from './components/App'

package/web/src/nav-icons.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Registry of Spectrum workflow icons that nav.json can reference by name.
+// To use a new icon: import it here and add it to the map. nav.json then
+// references it as `"icon": "<Name>"`.
+
+import Settings from '@spectrum-icons/workflow/Settings'
+import Properties from '@spectrum-icons/workflow/Properties'
+import Data from '@spectrum-icons/workflow/Data'
+import User from '@spectrum-icons/workflow/User'
+import ShoppingCart from '@spectrum-icons/workflow/ShoppingCart'
+import Box from '@spectrum-icons/workflow/Box'
+import Folder from '@spectrum-icons/workflow/Folder'
+
+export const NAV_ICONS = {
+  Settings,
+  Properties,
+  Data,
+  User,
+  ShoppingCart,
+  Box,
+  Folder
+}
+
+export function getNavIcon (name) {
+  return NAV_ICONS[name] || Settings
+}

package/web/src/nav.json

@@ -0,0 +1,10 @@
+{
+  "items": [
+    {
+      "id": "system-config",
+      "path": "/",
+      "label": "System Configurations",
+      "icon": "Settings"
+    }
+  ]
+}

package/web/src/pages/index.js

@@ -0,0 +1,17 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Built-in page registry. Maps `nav.json` entry `id` → React component.
+// To add a new built-in page:
+//   1. Drop the component into ../components (or ./<file>.js here)
+//   2. Import it and add it to BUILT_IN_PAGES below
+//   3. Add a matching entry to ../nav.json
+// Host apps add additional pages via `configureWeb({ extraPages })`.
+
+import SystemConfig from '../components/SystemConfig'
+
+export const BUILT_IN_PAGES = {
+  'system-config': SystemConfig
+}

package/web/src/schema/systemConfigSchema.js

@@ -0,0 +1,82 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+/**
+ * Schema is no longer defined statically — it is stored in App Builder DB
+ * and managed entirely through the Schema Designer UI. This module only
+ * exposes helpers for working with whatever schema shape is loaded at runtime.
+ *
+ * Schema shape (returned from the system-config-schema action):
+ * {
+ *   sections: [{
+ *     id, label,
+ *     groups: [{
+ *       id, label,
+ *       fields: [{
+ *         id, label, type, default,
+ *         showIn: ['default' | 'websites' | 'stores'],
+ *         sensitive?: boolean,
+ *         options?: [{ value, label }]   // type === 'select'
+ *       }]
+ *     }]
+ *   }]
+ * }
+ */
+
+export const FIELD_TYPES = ['text', 'textarea', 'password', 'number', 'select', 'boolean']
+export const SCOPES = ['default', 'websites', 'stores']
+
+const SENSITIVE_FIELD_TYPES = new Set(['password'])
+
+export function emptySchema () {
+  return { sections: [] }
+}
+
+export function getFieldPath (sectionId, groupId, fieldId) {
+  return `${sectionId}/${groupId}/${fieldId}`
+}
+
+export function isFieldSensitive (field) {
+  return !!field?.sensitive || SENSITIVE_FIELD_TYPES.has(field?.type)
+}
+
+export function isFieldVisibleAtScope (field, scope) {
+  const allowed = field?.showIn || ['default']
+  return allowed.includes(scope)
+}
+
+export function flattenFields (schema) {
+  const out = []
+  if (!schema || !Array.isArray(schema.sections)) return out
+  for (const section of schema.sections) {
+    if (!Array.isArray(section.groups)) continue
+    for (const group of section.groups) {
+      if (!Array.isArray(group.fields)) continue
+      for (const field of group.fields) {
+        out.push({
+          section,
+          group,
+          field,
+          path: getFieldPath(section.id, group.id, field.id),
+          sensitive: isFieldSensitive(field)
+        })
+      }
+    }
+  }
+  return out
+}
+
+export function coerceDefault (field) {
+  switch (field?.type) {
+    case 'boolean':
+      return !!field.default
+    case 'number':
+      return typeof field.default === 'number' ? field.default : Number(field.default) || 0
+    default:
+      return field?.default ?? ''
+  }
+}

package/web/src/settings.js

@@ -0,0 +1,101 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import builtinNav from './nav.json'
+import { BUILT_IN_PAGES } from './pages'
+
+/** Default OpenWhisk action keys (must match keys in deploy-time config.json). */
+export const DEFAULT_ACTION_KEYS = {
+  commerceRestGet: 'CommerceAdminManagement/commerce-rest-get',
+  systemConfigList: 'CommerceAdminManagement/system-config-list',
+  systemConfigSave: 'CommerceAdminManagement/system-config-save',
+  systemConfigSchema: 'CommerceAdminManagement/system-config-schema',
+  exportConfig: 'CommerceAdminManagement/export-config',
+  importConfig: 'CommerceAdminManagement/import-config',
+  syncStoreMappings: 'CommerceAdminManagement/sync-store-mappings-from-commerce',
+  commerceConnectionStatus: 'CommerceAdminManagement/commerce-connection-status',
+  commerceConnectionTest: 'CommerceAdminManagement/commerce-connection-test',
+  commerceConnectionSave: 'CommerceAdminManagement/commerce-connection-save'
+}
+
+let extensionId = 'CommerceAdminManagement'
+let actionUrls = {}
+let actionKeys = { ...DEFAULT_ACTION_KEYS }
+
+// Nav + page registries. Built-ins from this package merge with whatever the
+// host app passes via configureWeb({ extraNav, extraPages }). Host entries win
+// on id collisions so consumers can override built-in pages.
+const builtinNavItems = Array.isArray(builtinNav && builtinNav.items) ? builtinNav.items : []
+let extraNavItems = []
+let extraPages = {}
+
+export function getExtensionId () {
+  return extensionId
+}
+
+export function getActionKey (name) {
+  return actionKeys[name] || name
+}
+
+export function getActionUrl (actionKey) {
+  return actionUrls[actionKey]
+}
+
+/**
+ * Resolved nav list = built-in followed by host extras. Duplicate `id`s
+ * (host overriding built-in) keep the host's entry but the built-in slot.
+ */
+export function getNavItems () {
+  const byId = new Map()
+  for (const it of builtinNavItems) byId.set(it.id, it)
+  for (const it of extraNavItems) byId.set(it.id, { ...byId.get(it.id), ...it })
+  return Array.from(byId.values())
+}
+
+/**
+ * Resolve a nav id to its React component. Host extras override built-ins.
+ */
+export function getPageComponent (id) {
+  if (extraPages && extraPages[id]) return extraPages[id]
+  return BUILT_IN_PAGES[id] || null
+}
+
+/**
+ * Configure the web UI before rendering.
+ *
+ * @param {object} [options]
+ * @param {string} [options.extensionId]
+ * @param {Record<string, string>} [options.actionUrls]
+ * @param {Partial<typeof DEFAULT_ACTION_KEYS>} [options.actionKeys]
+ * @param {Array<{ id: string, path: string, label: string, icon?: string }>} [options.extraNav]
+ *        Additional nav entries appended after the package's built-ins.
+ * @param {Record<string, import('react').ComponentType<any>>} [options.extraPages]
+ *        Map of nav `id` → React component, registered from the host app.
+ */
+export function configureWeb ({
+  extensionId: nextExtensionId,
+  actionUrls: nextActionUrls,
+  actionKeys: nextActionKeys,
+  extraNav: nextExtraNav,
+  extraPages: nextExtraPages
+} = {}) {
+  if (nextExtensionId != null) {
+    extensionId = String(nextExtensionId)
+  }
+  if (nextActionUrls) {
+    actionUrls = { ...nextActionUrls }
+  }
+  if (nextActionKeys) {
+    actionKeys = { ...actionKeys, ...nextActionKeys }
+  }
+  if (Array.isArray(nextExtraNav)) {
+    extraNavItems = nextExtraNav.filter((it) => it && it.id && it.path)
+  }
+  if (nextExtraPages && typeof nextExtraPages === 'object') {
+    extraPages = { ...nextExtraPages }
+  }
+}

package/web/src/styles/index.css

@@ -0,0 +1,337 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+/* =========================================================================
+   sync-management — single source of truth for the UI theme.
+
+   To re-skin the app, change values under :root. Components consume these
+   tokens either directly via CSS classes (.sm-*) or via the JS facade in
+   `web-src/src/theme.js` which re-exports them as `var(--sm-*)` strings.
+
+   Token naming:
+     --sm-color-*      colors
+     --sm-radius-*     border radii
+     --sm-space-*      spacing scale
+     --sm-shadow-*     elevation
+     --sm-font-*       typography
+     --sm-control-*    interactive control sizing
+   ========================================================================= */
+
+:root {
+  /* ---- Colors --------------------------------------------------------- */
+  --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;
+
+  /* Surfaces used by the modal scaffolding (header text, body text, panel). */
+  --sm-color-text-strong:    #1f2937;
+  --sm-color-text-soft:      #475569;
+  --sm-color-surface-panel:  #f9fafb;
+
+  /* Modal / overlay scrim */
+  --sm-color-overlay:        rgba(15, 23, 42, 0.45);
+
+  /* ---- Radii ---------------------------------------------------------- */
+  --sm-radius-sm:    4px;
+  --sm-radius-md:    8px;
+  --sm-radius-lg:    10px;
+  --sm-radius-xl:    12px;
+  --sm-radius-2xl:   14px;
+  --sm-radius-pill:  999px;
+
+  /* ---- Spacing -------------------------------------------------------- */
+  --sm-space-1:  4px;
+  --sm-space-2:  8px;
+  --sm-space-3:  12px;
+  --sm-space-4:  16px;
+  --sm-space-5:  20px;
+  --sm-space-6:  24px;
+
+  /* ---- Shadows -------------------------------------------------------- */
+  --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);
+
+  /* ---- Typography ----------------------------------------------------- */
+  --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;
+
+  /* ---- Control sizing ------------------------------------------------- */
+  --sm-control-height-sm: 28px;
+  --sm-control-height-md: 32px;
+  --sm-control-height-lg: 40px;
+  --sm-control-padding-x: 16px;
+
+  /* ---- Z-index -------------------------------------------------------- */
+  --sm-z-nav: 30;
+  --sm-z-sticky: 20;
+  --sm-z-modal: 100;
+
+  /* =====================================================================
+     Spectrum token overrides — re-skin React-Spectrum widgets without
+     forking the theme. Keep these in sync with the --sm-* tokens above
+     so default Buttons / TextField / Picker pick up our accent automatically.
+     ===================================================================== */
+  --spectrum-accent-color-900: var(--sm-color-accent);
+  --spectrum-accent-color-1000: var(--sm-color-accent-hover);
+  /* Text colours are left to Spectrum so secondary/quiet buttons keep
+     their proper contrast on both light and dark surfaces. */
+
+  color-scheme: light;
+}
+
+/* =========================================================================
+   Base
+   ========================================================================= */
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+  background: var(--sm-color-bg);
+  color: var(--sm-color-text);
+  font-family: var(--sm-font-family);
+}
+
+/* React-Spectrum's <Provider> wraps its tree in a div. We mark it with
+   `UNSAFE_className="sm-provider"` and set its background here so the page
+   bg fills the whole iframe — but we only paint the wrapper, NOT any
+   descendants. Painting descendants stomps on inputs / buttons / pickers. */
+.sm-provider {
+  background: var(--sm-color-bg);
+  min-height: 100vh;
+}
+
+/* =========================================================================
+   Cards
+   ========================================================================= */
+.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; }
+
+/* =========================================================================
+   Pills
+   ========================================================================= */
+.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); }
+
+/* =========================================================================
+   Tab bar (used by AppSectionNav)
+   ========================================================================= */
+.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%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  gap: var(--sm-space-3);
+}
+.sm-tab-bar__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-2);
+  flex-shrink: 0;
+}
+.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; }
+
+/* =========================================================================
+   Spectrum textareas inside the system-config field renderer
+   ========================================================================= */
+.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);
+}
+
+/* =========================================================================
+   Note banner (used by ComingSoon, info callouts, etc.)
+   ========================================================================= */
+.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);
+}
+
+/* =========================================================================
+   Animations (used by progress / status indicators)
+   ========================================================================= */
+@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); }
+}
+
+/* =========================================================================
+   Legacy SideNav classes (kept for backwards compat with any remaining
+   menu markup; safe to delete once nothing references them).
+   ========================================================================= */
+.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);
+}