@datamagik/cli 0.1.0

package/templates/showcase/src/dm.generated.ts

@@ -0,0 +1,65 @@
+/* eslint-disable */
+// ----------------------------------------------------------------------------
+// Generated by `dm typegen` — DO NOT EDIT.
+// This is a starter STUB so the showcase type-checks before you connect. Set a
+// real "appId" + resource ids in dm.config.json (use `dm add`) and run
+// `dm typegen`; that overwrites this file with types fetched from your tenant.
+// ----------------------------------------------------------------------------
+import { createDm } from '@datamagik/app-sdk';
+import type { AliasRegistry, ScriptTypeOf } from '@datamagik/app-sdk';
+
+/** Row of lookup table "Parts" (replaced by real columns on `dm typegen`). */
+export interface PartsRow {
+  display_text: string;
+  unit_cost: number;
+  [key: string]: unknown;
+}
+
+/** Parameters of ODBC query "Open Orders". */
+export interface OpenOrdersParams {
+  status?: string;
+}
+
+/** Row of ODBC query "Open Orders" — columns are not statically declared. */
+export type OpenOrdersRow = Record<string, unknown>;
+
+/** Generation context for serial series "Lot Serial". */
+export interface LotSerialContext {
+  PART?: string;
+  LINE?: string;
+}
+
+/**
+ * Typed alias surface for this app. Passed as the generic of `createDm` so
+ * every alias autocompletes in any TypeScript-aware editor.
+ */
+export interface DmGenerated {
+  tables: {
+    parts: PartsRow;
+  };
+  odbc: {
+    openOrders: { params: OpenOrdersParams; row: OpenOrdersRow };
+  };
+  scripts: {
+    // IO comes from the DmScriptTypes augmentation in src/dm-script-types.d.ts.
+    postReceipt: ScriptTypeOf<'postReceipt'>;
+  };
+  serials: {
+    lotSerial: { context: LotSerialContext };
+  };
+  printers: {
+    line1Zebra: { formats: 'zpl' | 'html' };
+  };
+}
+
+/** Runtime alias → { type, id } registry (placeholder ids — replace via `dm add`). */
+export const dmRegistry: AliasRegistry = {
+  line1Zebra: { type: 'printer', id: 1 },
+  lotSerial: { type: 'serial_series', id: 1 },
+  openOrders: { type: 'odbc_query', id: 2 },
+  parts: { type: 'lookup_table', id: 1 },
+  postReceipt: { type: 'script', id: 3 },
+};
+
+/** Ready-to-use, fully typed SDK instance for this app. */
+export const dm = createDm<DmGenerated>(dmRegistry);

package/templates/showcase/src/format.ts

@@ -0,0 +1,13 @@
+import { DmError } from '@datamagik/app-sdk';
+
+/** Human-readable one-liner for any thrown value. */
+export function fmtErr(e: unknown): string {
+  if (e instanceof DmError) return `${e.code}: ${e.message}`;
+  if (e instanceof Error) return e.message;
+  return String(e);
+}
+
+/** Pretty-print a value for a result box. */
+export function pretty(v: unknown): string {
+  return typeof v === 'string' ? v : JSON.stringify(v, null, 2);
+}

package/templates/showcase/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');

package/templates/showcase/src/style.css

@@ -0,0 +1,134 @@
+:root {
+  /* DataMagik brand palette (matches the platform). */
+  --dm-purple: #9333ea;
+  --dm-purple-light: #a855f7;
+  --dm-purple-dark: #7e22ce;
+  --dm-purple-50: #faf5ff;
+  --dm-purple-100: #f3e8ff;
+
+  --dm-bg: #f9fafb;
+  --dm-card: #ffffff;
+  --dm-border: #e5e7eb;
+  --dm-border-soft: #f3f4f6;
+
+  --dm-ink: #111827;
+  --dm-ink-soft: #6b7280;
+  --dm-ink-faint: #9ca3af;
+
+  --dm-ok: #059669;
+  --dm-ok-bg: #ecfdf5;
+  --dm-ok-border: #a7f3d0;
+  --dm-err: #dc2626;
+  --dm-err-bg: #fef2f2;
+  --dm-err-border: #fecaca;
+
+  --dm-code-bg: #1e1b2e;
+  --dm-code-ink: #e9d5ff;
+
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: var(--dm-ink);
+  -webkit-font-smoothing: antialiased;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--dm-bg); }
+code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
+
+.shell { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
+
+/* ---- Header ---- */
+.app-header {
+  display: flex; align-items: center; gap: 1rem;
+  background: linear-gradient(135deg, var(--dm-purple), var(--dm-purple-dark));
+  color: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem;
+  box-shadow: 0 10px 25px -10px rgba(147, 51, 234, 0.5);
+}
+.app-header img.logo { height: 38px; width: auto; }
+.app-header .titles { min-width: 0; flex: 1; }
+.app-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; line-height: 1.2; }
+.app-header p { margin: 0.15rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }
+.app-header .status {
+  display: inline-flex; align-items: center; gap: 0.45rem;
+  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 600;
+  white-space: nowrap;
+}
+.status .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fde68a; }
+.status .dot.ok { background: #6ee7b7; }
+.status .dot.err { background: #fca5a5; }
+
+.notice {
+  margin: 1rem 0 0; padding: 0.75rem 1rem; font-size: 0.85rem;
+  background: var(--dm-purple-50); border: 1px solid var(--dm-purple-100);
+  color: #6b21a8; border-radius: 0.75rem;
+}
+.notice code { color: var(--dm-purple-dark); font-weight: 600; }
+
+/* ---- Panel grid ---- */
+.grid {
+  display: grid; gap: 1rem; margin-top: 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
+
+.panel {
+  background: var(--dm-card); border: 1px solid var(--dm-border-soft);
+  border-radius: 0.85rem; padding: 1.1rem 1.15rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column;
+}
+.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
+.panel-icon {
+  width: 2rem; height: 2rem; border-radius: 0.55rem; flex: none;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--dm-purple-50); color: var(--dm-purple);
+}
+.panel-icon svg { width: 1.05rem; height: 1.05rem; }
+.panel h2 { font-size: 0.98rem; font-weight: 700; margin: 0; }
+.panel .desc { font-size: 0.83rem; color: var(--dm-ink-soft); margin: 0 0 0.75rem; }
+
+.code {
+  background: var(--dm-code-bg); color: var(--dm-code-ink);
+  border-radius: 0.55rem; padding: 0.65rem 0.75rem; margin: 0 0 0.75rem;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.78rem; line-height: 1.5; white-space: pre; overflow-x: auto;
+}
+
+.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
+
+.btn {
+  background: linear-gradient(135deg, var(--dm-purple), var(--dm-purple-dark));
+  color: #fff; border: none; border-radius: 0.5rem;
+  padding: 0.45rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
+}
+.btn:hover { filter: brightness(1.05); }
+.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
+.btn.secondary {
+  background: #fff; color: var(--dm-purple-dark);
+  border: 1px solid var(--dm-border);
+}
+.btn.secondary:hover { background: var(--dm-purple-50); }
+
+input.text {
+  border: 1px solid var(--dm-border); border-radius: 0.5rem;
+  padding: 0.4rem 0.6rem; font-size: 0.82rem; min-width: 0; flex: 1;
+}
+input.text:focus { outline: 2px solid var(--dm-purple-light); border-color: var(--dm-purple); }
+
+.result {
+  margin-top: auto; font-size: 0.82rem; border-radius: 0.55rem;
+  padding: 0.6rem 0.7rem; background: var(--dm-ok-bg);
+  border: 1px solid var(--dm-ok-border); color: #065f46;
+  white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto;
+}
+.result.err { background: var(--dm-err-bg); border-color: var(--dm-err-border); color: var(--dm-err); }
+.result.hint { background: var(--dm-purple-50); border-color: var(--dm-purple-100); color: #6b21a8; }
+
+.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.9rem; font-size: 0.83rem; }
+.kv dt { color: var(--dm-ink-soft); }
+.kv dd { margin: 0; font-weight: 500; word-break: break-word; }
+
+ul.rows { list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 0.82rem; }
+ul.rows li { padding: 0.3rem 0; border-bottom: 1px solid var(--dm-border-soft); }
+ul.rows li:last-child { border-bottom: none; }
+
+.footer { margin-top: 2rem; text-align: center; font-size: 0.78rem; color: var(--dm-ink-faint); }
+.footer a { color: var(--dm-purple); text-decoration: none; }

package/templates/showcase/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "types": []
+  },
+  "include": ["src", "env.d.ts"]
+}

package/templates/showcase/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// base './' is required: published bundles are served under a signed token
+// path prefix, so every asset URL must stay relative.
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+});

package/templates/simple/README.md

@@ -0,0 +1,37 @@
+# __APP_NAME__
+
+A minimal DataMagik SPA app (Vue 3 + Vite + `@datamagik/app-sdk`). It connects
+to the platform, shows the app context, and runs one lookup-table query.
+
+## Get started
+
+```bash
+npm install
+# set "appId" in dm.config.json to your application id (App Studio header)
+npx dm login --url https://staging.data-magik.com   # or https://data-magik.com
+npx dm dev            # run it now — uses the bundled demo types
+```
+
+## Add real resources
+
+The starter ships a placeholder `parts` lookup table. Replace it with your own:
+
+```bash
+npx dm add lookup_table     # search the tenant, pick one, name an alias
+# remove the placeholder `parts` entry from dm.config.json, then:
+npx dm typegen              # refresh the typed surface (src/dm.generated.ts)
+```
+
+`dm add` also handles ODBC queries, scripts, serial series, and printers.
+
+## Ship it
+
+```bash
+npx dm publish --message "first version"   # builds and goes live immediately
+```
+
+## Files
+
+- `dm.config.json` — your app id + declared resources (commit it).
+- `src/dm.generated.ts` — typed alias surface, regenerated by `dm typegen` (commit it).
+- `src/App.vue` — the app.

package/templates/simple/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/simple/dm.config.json

@@ -0,0 +1,10 @@
+{
+  "appId": __APP_ID__,
+  "entry": "index.html",
+  "sources": [
+    { "sourceId": 1, "type": "lookup_table", "alias": "parts" }
+  ],
+  "serialSeries": [],
+  "printers": [],
+  "appContract": { "inputs": [], "outputs": [], "events": [] }
+}

package/templates/simple/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/templates/simple/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__ — DataMagik</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/simple/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "__PKG_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "dm dev",
+    "build": "vue-tsc --noEmit -p tsconfig.json && vite build",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "preview": "vite preview",
+    "typegen": "dm typegen",
+    "deploy": "dm publish"
+  },
+  "dependencies": {
+    "@datamagik/app-sdk": "^0.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@datamagik/cli": "^0.1.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/templates/simple/src/App.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { DmError } from '@datamagik/app-sdk';
+import type { DmContext } from '@datamagik/app-sdk';
+import { dm } from './dm.generated';
+import type { PartsRow } from './dm.generated';
+
+const status = ref<'connecting' | 'ok' | 'error'>('connecting');
+const ctx = ref<DmContext | null>(null);
+const rows = ref<PartsRow[]>([]);
+const dataError = ref('');
+const fatal = ref('');
+
+onMounted(async () => {
+  try {
+    ctx.value = await dm.init();
+    status.value = 'ok';
+  } catch (e) {
+    status.value = 'error';
+    fatal.value = e instanceof DmError ? `${e.code}: ${e.message}` : String(e);
+    return;
+  }
+  try {
+    const result = await dm.data.query('parts', { pageSize: 25 });
+    rows.value = result.rows;
+  } catch (e) {
+    // The starter declares a placeholder `parts` id. Wire a real lookup table
+    // with `dm add lookup_table` (then `dm typegen`) to see live data here.
+    dataError.value = e instanceof DmError ? `${e.code}: ${e.message}` : String(e);
+  }
+});
+
+function rowText(row: PartsRow): string {
+  return typeof row.display_text === 'string' ? row.display_text : JSON.stringify(row);
+}
+</script>
+
+<template>
+  <header>
+    <span class="dot" :class="{ ok: status === 'ok', err: status === 'error' }"></span>
+    <h1>{{ ctx?.appName || '__APP_NAME__' }}</h1>
+  </header>
+
+  <div class="card">
+    <h2>Connection</h2>
+    <p v-if="status === 'connecting'" class="muted">Connecting to the platform…</p>
+    <dl v-else-if="ctx" class="kv">
+      <dt>App</dt>
+      <dd>{{ ctx.appName }} (v{{ ctx.version }})</dd>
+      <dt>Surface</dt>
+      <dd>{{ ctx.surface }}</dd>
+      <dt>User</dt>
+      <dd>{{ ctx.user.name }}</dd>
+      <dt>Company</dt>
+      <dd>{{ ctx.company.name }}</dd>
+    </dl>
+    <p v-else class="error">{{ fatal }}</p>
+  </div>
+
+  <div class="card">
+    <h2><code>parts</code> — lookup table query</h2>
+    <ul v-if="rows.length" class="rows">
+      <li v-for="(row, i) in rows" :key="i">{{ rowText(row) }}</li>
+    </ul>
+    <p v-else-if="dataError" class="error">
+      No data yet — {{ dataError }}.<br />
+      Declare a real lookup table with <code>dm add lookup_table</code>, then run <code>dm typegen</code>.
+    </p>
+    <p v-else class="muted">No rows returned.</p>
+  </div>
+</template>

package/templates/simple/src/dm.generated.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// ----------------------------------------------------------------------------
+// Generated by `dm typegen` — DO NOT EDIT.
+// This is a starter STUB so the project type-checks before you connect. Set a
+// real "appId" + resource ids in dm.config.json and run `dm typegen`; that
+// overwrites this file with types fetched from your tenant.
+// ----------------------------------------------------------------------------
+import { createDm } from '@datamagik/app-sdk';
+import type { AliasRegistry } from '@datamagik/app-sdk';
+
+/** Row of the `parts` lookup table (replaced by real columns on `dm typegen`). */
+export interface PartsRow {
+  display_text: string;
+  [key: string]: unknown;
+}
+
+/** Typed alias surface for this app (the generic of `createDm`). */
+export interface DmGenerated {
+  tables: { parts: PartsRow };
+  odbc: {};
+  scripts: {};
+  serials: {};
+  printers: {};
+}
+
+/** Runtime alias → { type, id } registry. */
+export const dmRegistry: AliasRegistry = {
+  parts: { type: 'lookup_table', id: 1 },
+};
+
+/** Ready-to-use, fully typed SDK instance for this app. */
+export const dm = createDm<DmGenerated>(dmRegistry);

package/templates/simple/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');

package/templates/simple/src/style.css

@@ -0,0 +1,63 @@
+:root {
+  --dm-purple: #9333ea;
+  --dm-purple-dark: #7e22ce;
+  --dm-bg: #f9fafb;
+  --dm-card: #ffffff;
+  --dm-border: #e5e7eb;
+  --dm-ink: #111827;
+  --dm-ink-soft: #6b7280;
+  --dm-err: #dc2626;
+  --dm-err-bg: #fef2f2;
+
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--dm-ink);
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--dm-bg); }
+
+#app { max-width: 720px; margin: 0 auto; padding: 2rem 1rem; }
+
+header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
+header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
+
+.dot {
+  width: 0.6rem; height: 0.6rem; border-radius: 50%;
+  background: var(--dm-ink-soft); flex: none;
+}
+.dot.ok { background: #059669; }
+.dot.err { background: var(--dm-err); }
+
+.card {
+  background: var(--dm-card);
+  border: 1px solid var(--dm-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  margin-bottom: 1rem;
+}
+.card h2 { font-size: 1rem; margin: 0 0 0.75rem; }
+
+.muted { color: var(--dm-ink-soft); font-size: 0.875rem; }
+
+.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
+.kv dt { color: var(--dm-ink-soft); }
+.kv dd { margin: 0; font-weight: 500; }
+
+ul.rows { list-style: none; padding: 0; margin: 0; }
+ul.rows li { padding: 0.4rem 0; border-bottom: 1px solid var(--dm-border); font-size: 0.9rem; }
+ul.rows li:last-child { border-bottom: none; }
+
+.error {
+  background: var(--dm-err-bg); border: 1px solid #fecaca;
+  color: var(--dm-err); border-radius: 0.5rem; padding: 0.75rem;
+  font-size: 0.85rem;
+}
+
+button {
+  background: var(--dm-purple); color: #fff; border: none;
+  border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem;
+  font-weight: 600; cursor: pointer;
+}
+button:hover { background: var(--dm-purple-dark); }
+button:disabled { opacity: 0.5; cursor: default; }

package/templates/simple/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "types": []
+  },
+  "include": ["src", "env.d.ts"]
+}

package/templates/simple/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// base './' is required: published bundles are served under a signed token
+// path prefix, so every asset URL must stay relative.
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+});