Add basic frontend

.dockerignore

@@ -1,2 +1,3 @@
 .secrets.yaml
 identity.json
+node_modules

.gitignore

@@ -27,6 +27,9 @@ share/python-wheels/
 MANIFEST
 charges_file_folder
 
+# dependencies
+/node_modules
+
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

esbuild.config.js

@@ -0,0 +1,32 @@
+import { context } from 'esbuild';
+import { sassPlugin } from 'esbuild-sass-plugin';
+
+const watch = process.argv.includes("--watch");
+const env = process?.env?.NODE_ENV ?? JSON.stringify("production");
+
+const ctx = await context({
+  entryPoints: ['./mextmock-ui/index.tsx'],
+  outdir: './static',
+  bundle: true,
+  platform: 'browser',
+  mainFields: ["browser", "module", "main"],
+  format: 'esm',
+  sourcemap: true,
+  allowOverwrite: true,
+  define: {
+    "process.env.NODE_ENV": env,
+  },
+  plugins: [sassPlugin({
+    filter: /\.scss$/,
+    type: 'style',
+  })],
+});
+
+if (watch) {
+  await ctx.watch();
+  console.log('watching...');
+} else {
+  await ctx.rebuild();
+  await ctx.dispose();
+}
+

mextmock-ui/App.tsx

@@ -0,0 +1,56 @@
+import { useMemo, useCallback } from 'react';
+import { useMPTContext, useMPTModal } from '@mpt-extension/sdk-react';
+
+import './styles.scss';
+
+export default () => {
+    const { auth, data } = useMPTContext();
+    const { open, close } = useMPTModal();
+
+    const openModal = useCallback(() => {
+        open('modal', {
+            context: {
+                ...data,
+                isOpenedAsModal: 'TRUE',
+            },
+
+            onClose: (data) => {
+                console.log(`📢 Requested modal was closed with ${JSON.stringify(data)}`);
+            },
+        });
+    }, [open, data]);
+
+    const closeModal = useCallback((key) => {
+        close(key);
+    }, [close]);
+
+    const contextAuthSnapshot = useMemo(() => {
+        if (!auth) return [];
+        return Object.keys(auth).map(k => [k, auth[k]?.id ?? JSON.stringify(auth[k])])
+    }, [data]);
+
+    const contextDataSnapshot = useMemo(() => {
+        if (!data) return [];
+        return Object.keys(data).map(k => [k, data[k]?.id ?? JSON.stringify(data[k])])
+    }, [data]);
+
+    return <div className='container'>
+        <h1>A brave lil extension</h1>
+
+        <h3>{contextAuthSnapshot.length ? 'You are browsing extension as:' : 'Your identity is undetected' }</h3>
+        <p className="mono">
+            {contextAuthSnapshot.map(([key, value]) => <>{`${key}: ${value}`}<br /></>)}
+        </p>
+
+        <h3>{contextDataSnapshot.length ? 'You are in context of:' : 'There is no meaningful context' }</h3>
+        <p className="mono">
+            {contextDataSnapshot.map(([key, value]) => <>{`${key}: ${value}`}<br /></>)}
+        </p>
+
+        <div className='row'>
+            <button onClick={openModal}>Open modal</button>
+            <button onClick={() => closeModal('foo')}>Say FOO</button>
+            <button onClick={() => closeModal('bar')}>Say BAR </button>
+        </div>
+    </div>
+};

mextmock-ui/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { setup } from '@mpt-extension/sdk';
+import App from './App';
+
+setup((element: Element) => {
+    const root = createRoot(element);
+    root.render(<App />);
+});

mextmock-ui/styles.scss

@@ -0,0 +1,18 @@
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 300;
+}
+
+.container {
+  padding: 15px;
+}
+
+.mono {
+  padding: 7px 15px;
+  font-family: monospace;
+  background: #e4e4e4;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+}

mextmock/app.py

@@ -30,7 +30,7 @@
 app.mount(
     "/static",
     StaticFiles(
-        directory=Path(__file__).parent.resolve() / "static",
+        directory=Path(__file__).parent.parent.resolve() / "static",
         html=True,
     ),
     name="static",

mextmock/main.py

@@ -49,7 +49,146 @@ def bootstrap():
                     "task": True,
                 }
             ],
+            "plugs": [
+                {
+                    "id": "subs-actions",
+                    "name": "Subscriptions Actions Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.subscriptions.actions",
+                    "href": "/static/index.js"
+                },
+                {
+                   "id": "subs-lines-actions",
+                   "name": "Subscriptions Lines Actions Demo",
+                   "description": "Check sockets",
+                   "icon": "adobe.png",
+                   "socket": "portal.commerce.subscriptions.line.actions",
+                   "href": "/static/index.js"
+                },
+                {
+                    "id": "sub-tabs",
+                    "name": "Subscription Tab Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.subscriptions.subscription",
+                    "href": "/static/index.js"
+                },
+                {
+                    "id": "sub-actions",
+                    "name": "Subscription Actions Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.subscriptions.subscription.actions",
+                    "href": "/static/index.js"
+                },
+
+                {
+                    "id": "agrs-actions",
+                    "name": "Agreements Actions Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.agreements.actions",
+                    "href": "/static/index.js"
+                },
+                {
+                   "id": "agrs-lines-actions",
+                   "name": "Agreements Lines Actions Demo",
+                   "description": "Check sockets",
+                   "icon": "adobe.png",
+                   "socket": "portal.commerce.agreements.line.actions",
+                   "href": "/static/index.js"
+                },
+                {
+                    "id": "agr-tabs",
+                    "name": "Agreement Tab Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.agreements.agreement",
+                    "href": "/static/index.js"
+                },
+                {
+                    "id": "agr-actions",
+                    "name": "Agreement Actions Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.agreements.agreement.actions",
+                    "href": "/static/index.js"
+                },
+
+                {
+                     "id": "ords-actions",
+                     "name": "Orders Actions Demo",
+                     "description": "Check sockets",
+                     "icon": "adobe.png",
+                     "socket": "portal.commerce.orders.actions",
+                     "href": "/static/index.js"
+                },
+                {
+                    "id": "ords-lines-actions",
+                    "name": "Orders Lines Actions Demo",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "socket": "portal.commerce.orders.line.actions",
+                    "href": "/static/index.js"
+                },
+                {
+                     "id": "ord-tabs",
+                     "name": "Order Tab Demo",
+                     "description": "Check sockets",
+                     "icon": "adobe.png",
+                     "socket": "portal.commerce.orders.order",
+                     "href": "/static/index.js"
+                },
+                {
+                     "id": "ord-actions",
+                     "name": "Order Actions Demo",
+                     "description": "Check sockets",
+                     "icon": "adobe.png",
+                     "socket": "portal.commerce.orders.order.actions",
+                     "href": "/static/index.js"
+                },
 
+                {
+                  "id": "asts-actions",
+                  "name": "Assets Actions Demo",
+                  "description": "Check sockets",
+                  "icon": "adobe.png",
+                  "socket": "portal.commerce.assets.actions",
+                  "href": "/static/index.js"
+                },
+                {
+                 "id": "asts-lines-actions",
+                 "name": "Assets Lines Actions Demo",
+                 "description": "Check sockets",
+                 "icon": "adobe.png",
+                 "socket": "portal.commerce.assets.line.actions",
+                 "href": "/static/index.js"
+                },
+                {
+                  "id": "ast-tabs",
+                  "name": "Asset Tab Demo",
+                  "description": "Check sockets",
+                  "icon": "adobe.png",
+                  "socket": "portal.commerce.assets.asset",
+                  "href": "/static/index.js"
+                },
+                {
+                  "id": "ast-actions",
+                  "name": "Asset Actions Demo",
+                  "description": "Check sockets",
+                  "icon": "adobe.png",
+                  "socket": "portal.commerce.assets.asset.actions",
+                  "href": "/static/index.js"
+                },
+                {
+                    "id": "modal",
+                    "name": "Just a modal",
+                    "description": "Check sockets",
+                    "icon": "adobe.png",
+                    "href": "/static/index.js"
+                }
+            ]
         },
     }
     for evtinfo in data["meta"]["events"]: