@j-256/ccam 0.1.0

package/dist/tui/views/ResourceDetailView.js

@@ -0,0 +1,123 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { useClient } from '../context/client.js';
+import { useNav } from '../context/navigation.js';
+import { useResourceDetail } from '../hooks/use-resource-detail.js';
+import { TabBar } from '../components/TabBar.js';
+import { InfoTab } from '../components/InfoTab.js';
+import { SubResourceTab } from '../components/SubResourceTab.js';
+import { AuditTab } from '../components/AuditTab.js';
+import { FooterBar } from '../components/FooterBar.js';
+const INFO_TAB_KEY = '__info__';
+export function ResourceDetailView({ config, id }) {
+    const client = useClient();
+    const nav = useNav();
+    // Fetch the resource detail
+    const fetchFn = useCallback(() => config.detailFn(client, id), [client, config, id]);
+    const { data, loading, error, retry } = useResourceDetail(fetchFn);
+    // Tab state
+    const allTabs = useMemo(() => {
+        const tabs = [{ key: INFO_TAB_KEY, label: 'Info' }];
+        for (const tab of config.tabs) {
+            tabs.push({ key: tab.key, label: tab.label });
+        }
+        return tabs;
+    }, [config.tabs]);
+    const [activeTabKey, setActiveTabKey] = useState(INFO_TAB_KEY);
+    const [activatedTabs, setActivatedTabs] = useState(() => new Set([INFO_TAB_KEY]));
+    const activeTabIndex = allTabs.findIndex((t) => t.key === activeTabKey);
+    const switchToTab = useCallback((index) => {
+        if (index < 0 || index >= allTabs.length)
+            return;
+        const tab = allTabs[index];
+        setActiveTabKey(tab.key);
+        setActivatedTabs((prev) => {
+            if (prev.has(tab.key))
+                return prev;
+            const next = new Set(prev);
+            next.add(tab.key);
+            return next;
+        });
+    }, [allTabs]);
+    useInput((input, key) => {
+        if (loading)
+            return;
+        // Error state: only retry and back
+        if (error) {
+            if (input === 'r')
+                retry();
+            if (key.escape)
+                nav.pop();
+            return;
+        }
+        // Back
+        if (key.escape || input === 'q') {
+            nav.pop();
+            return;
+        }
+        // Tab switching: Tab / Shift-Tab
+        if (key.tab) {
+            if (key.shift) {
+                // Shift-Tab: previous tab
+                const prevIndex = activeTabIndex <= 0 ? allTabs.length - 1 : activeTabIndex - 1;
+                switchToTab(prevIndex);
+            }
+            else {
+                // Tab: next tab
+                const nextIndex = (activeTabIndex + 1) % allTabs.length;
+                switchToTab(nextIndex);
+            }
+            return;
+        }
+        // Number keys 1-9: jump to tab
+        const num = parseInt(input, 10);
+        if (num >= 1 && num <= 9 && num <= allTabs.length) {
+            switchToTab(num - 1);
+            return;
+        }
+    });
+    // -- Error state --
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", error.message] }), _jsx(Text, { dimColor: true, children: "r:retry Esc:back" })] }));
+    }
+    // -- Loading state --
+    if (loading && !data) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" Loading ", config.displayName, "..."] })] }));
+    }
+    if (!data)
+        return null;
+    // Find the active tab config (for non-info tabs)
+    const activeTab = config.tabs.find((t) => t.key === activeTabKey);
+    // Footer hints per active tab type
+    const footerHints = buildFooterHints(activeTabKey, activeTab);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TabBar, { tabs: allTabs, activeKey: activeTabKey }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", children: [activeTabKey === INFO_TAB_KEY && (_jsx(InfoTab, { fields: config.fields, data: data, crossLinks: config.crossLinks })), activeTab && activeTab.type !== 'audit' && activatedTabs.has(activeTab.key) && (_jsx(SubResourceTab, { tab: activeTab, parentId: id })), activeTab && activeTab.type === 'audit' && activatedTabs.has(activeTab.key) && (_jsx(AuditTabWrapper, { tab: activeTab, id: id }))] }), _jsx(FooterBar, { hints: footerHints })] }));
+}
+// Wrapper to adapt TabConfig.fetchFn to AuditTab's expected fetchFn signature.
+// The element-type cast (Record<string, unknown> -> AuditLogRecord) is needed
+// because the tab-level fetchFn is typed against the generic record shape that
+// all tab tables use.
+function AuditTabWrapper({ tab, id }) {
+    const client = useClient();
+    const fetchFn = useCallback((querySize) => tab.fetchFn(client, id, querySize), [client, id, tab]);
+    return _jsx(AuditTab, { fetchFn: fetchFn, columns: tab.columns });
+}
+function buildFooterHints(activeTabKey, activeTab) {
+    const parts = ['[Tab:next]'];
+    if (activeTabKey === INFO_TAB_KEY) {
+        parts.push('[j/k:nav]', '[Enter:link]', '[Esc:back]');
+    }
+    else if (activeTab?.type === 'audit') {
+        parts.push('[j/k:scroll]', '[m:more]', '[Esc:back]');
+    }
+    else {
+        // sub-resource tab
+        parts.push('[j/k:nav]');
+        if (activeTab?.crossLinkTo)
+            parts.push('[Enter:open]');
+        parts.push('[Esc:back]');
+    }
+    return parts.join(' ');
+}
+//# sourceMappingURL=ResourceDetailView.js.map

package/dist/tui/views/ResourceListView.d.ts

@@ -0,0 +1,6 @@
+import { type ResourceConfig } from '../types.js';
+export interface ResourceListViewProps {
+    config: ResourceConfig;
+}
+export declare function ResourceListView({ config }: ResourceListViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourceListView.d.ts.map

package/dist/tui/views/ResourceListView.js

@@ -0,0 +1,140 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { useClient } from '../context/client.js';
+import { useNav } from '../context/navigation.js';
+import { usePaginatedResource } from '../hooks/use-paginated-resource.js';
+import { useScrollWindow } from '../hooks/use-scroll-window.js';
+import { useTerminalSize } from '../context/terminal-size.js';
+import { Table } from '../components/Table.js';
+import { FooterBar } from '../components/FooterBar.js';
+import { getSortableColumns } from '../types.js';
+const BORDER_INSET = 2;
+export function ResourceListView({ config }) {
+    const client = useClient();
+    const nav = useNav();
+    const { cols } = useTerminalSize();
+    const [highlight, setHighlight] = useState(0);
+    const sortableColumns = getSortableColumns(config.columns, 'remote');
+    const fetchFn = useCallback((page, size, sort) => config.listFn(client, { page, size, sort }), [client, config]);
+    const { data, page, totalPages, totalElements, loading, error, paginated, nextPage, prevPage, retry, currentSort, cycleSort, reverseSort, } = usePaginatedResource(fetchFn);
+    const scroll = useScrollWindow(highlight, data.length);
+    useInput((input, key) => {
+        if (loading)
+            return;
+        // Error state: only retry and back
+        if (error) {
+            if (input === 'r')
+                retry();
+            if (key.escape)
+                nav.pop();
+            return;
+        }
+        // Navigation
+        if (key.escape) {
+            nav.pop();
+            return;
+        }
+        // Vertical movement
+        if (input === 'j' || key.downArrow) {
+            setHighlight((i) => Math.min(i + 1, data.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setHighlight((i) => Math.max(i - 1, 0));
+        }
+        // Jump to first/last
+        if (input === 'g') {
+            setHighlight(0);
+        }
+        if (input === 'G') {
+            setHighlight(Math.max(0, data.length - 1));
+        }
+        // Enter: drill into detail
+        if (key.return && data.length > 0) {
+            const item = data[highlight];
+            if (item) {
+                const detailView = `${config.name}-detail`;
+                nav.push({
+                    view: detailView,
+                    label: config.labelFn(item),
+                    params: { id: String(item[config.idField]) },
+                });
+            }
+        }
+        // Pagination / scroll
+        if (input === 'n') {
+            if (paginated) {
+                nextPage();
+                setHighlight(0);
+            }
+            else {
+                setHighlight((i) => Math.min(i + scroll.visibleRows, data.length - 1));
+            }
+        }
+        if (input === 'p') {
+            if (paginated) {
+                prevPage();
+                setHighlight(0);
+            }
+            else {
+                setHighlight((i) => Math.max(i - scroll.visibleRows, 0));
+            }
+        }
+        // Sort
+        if (input === 's' && sortableColumns.length > 0) {
+            cycleSort(sortableColumns);
+            setHighlight(0);
+        }
+        if (input === 'S') {
+            reverseSort();
+            setHighlight(0);
+        }
+        // Refresh
+        if (input === 'r') {
+            retry();
+        }
+    });
+    // -- Error state --
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", error.message] }), _jsx(Text, { dimColor: true, children: "r:retry Esc:back" })] }));
+    }
+    // -- Loading state --
+    if (loading && data.length === 0) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" Loading ", config.displayName, "..."] })] }));
+    }
+    // -- Footer hints --
+    const hintParts = ['[j/k:nav]', '[Enter:open]', '[Esc:back]'];
+    if (paginated) {
+        hintParts.splice(2, 0, '[n/p:page]');
+    }
+    else if (scroll.scrollInfo) {
+        hintParts.splice(2, 0, '[n/p:scroll]');
+    }
+    if (sortableColumns.length > 0) {
+        hintParts.splice(paginated || scroll.scrollInfo ? 3 : 2, 0, '[s:sort]', '[S:reverse]');
+    }
+    const hints = hintParts.join(' ');
+    // -- Sort label --
+    const sortLabel = (() => {
+        if (!currentSort)
+            return undefined;
+        const match = sortableColumns.find((sf) => sf.field === currentSort.field);
+        const label = match ? match.label : currentSort.field;
+        return `Sort: ${label} ${currentSort.direction}`;
+    })();
+    // -- Stats label --
+    const statsLabel = `${totalElements.toLocaleString()} ${config.displayName}`;
+    // -- Page info --
+    let pageInfo;
+    if (paginated) {
+        const start = page * 25 + 1;
+        const end = Math.min(start + data.length - 1, totalElements);
+        pageInfo = `${start}-${end} of ${totalElements} | Page ${page + 1}/${totalPages}`;
+    }
+    else {
+        pageInfo = `${totalElements} results`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: "cyan", bold: true, children: config.displayName }), _jsxs(Text, { dimColor: true, children: ["(", totalElements, ")"] }), loading && (_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }))] }), _jsx(Table, { columns: config.columns, data: data, highlightIndex: highlight, visibleRows: scroll.visibleRows, scrollOffset: scroll.scrollOffset, sortKey: currentSort?.field, sortDirection: currentSort?.direction, contentWidth: cols - BORDER_INSET })] }), _jsx(FooterBar, { hints: hints, pageInfo: pageInfo, loading: loading, sortLabel: sortLabel, statsLabel: statsLabel })] }));
+}
+//# sourceMappingURL=ResourceListView.js.map

package/dist/tui/views/ViewRouter.d.ts

@@ -0,0 +1,2 @@
+export declare function ViewRouter(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewRouter.d.ts.map

package/dist/tui/views/ViewRouter.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useNav } from '../context/navigation.js';
+import { ResourcePicker } from '../components/ResourcePicker.js';
+import { ResourceListView } from './ResourceListView.js';
+import { ResourceDetailView } from './ResourceDetailView.js';
+import { getResourceConfig } from '../resource-configs/index.js';
+/**
+ * Extract resource name from a ViewType string.
+ * Examples:
+ * - 'user-list' -> 'user'
+ * - 'service-type-detail' -> 'service-type'
+ * - 'org-list' -> 'org'
+ */
+function getResourceName(viewType) {
+    // Strip the last '-list' or '-detail' suffix
+    return viewType.replace(/-(?:list|detail)$/, '');
+}
+export function ViewRouter() {
+    const { current } = useNav();
+    const { view, params } = current;
+    // Special case: resource picker
+    if (view === 'resource-picker') {
+        return _jsx(ResourcePicker, {});
+    }
+    // Special case: org-config-detail (singleton resource)
+    if (view === 'org-config-detail') {
+        const config = getResourceConfig('org-configuration');
+        return _jsx(ResourceDetailView, { config: config, id: "singleton" });
+    }
+    // List views: *-list
+    if (view.endsWith('-list')) {
+        const resourceName = getResourceName(view);
+        try {
+            const config = getResourceConfig(resourceName);
+            return _jsx(ResourceListView, { config: config });
+        }
+        catch (err) {
+            return _jsxs(Text, { color: "red", children: ["Error: ", String(err)] });
+        }
+    }
+    // Detail views: *-detail
+    if (view.endsWith('-detail')) {
+        const resourceName = getResourceName(view);
+        const id = params?.id;
+        if (!id) {
+            return _jsx(Text, { color: "red", children: "Error: detail view requires id param" });
+        }
+        try {
+            const config = getResourceConfig(resourceName);
+            return _jsx(ResourceDetailView, { config: config, id: id }, `${resourceName}-${id}`);
+        }
+        catch (err) {
+            return _jsxs(Text, { color: "red", children: ["Error: ", String(err)] });
+        }
+    }
+    // Unknown view type
+    return _jsxs(Text, { color: "red", children: ["Error: unknown view type: ", view] });
+}
+//# sourceMappingURL=ViewRouter.js.map

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@j-256/ccam",
+  "version": "0.1.0",
+  "description": "CLI for the Salesforce Commerce Cloud Account Manager API",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "ccam": "dist/bin.js"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "ccam-sdk": "0.1.0",
+    "chalk": "^5.6.2",
+    "cli-table3": "^0.6.5",
+    "commander": "^14.0.3",
+    "ink": "^7.0.0",
+    "ink-spinner": "^5.0.0",
+    "open": "^10.2.0",
+    "react": "^19.2.5",
+    "yaml": "^2.8.3"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j-256/ccam.git"
+  },
+  "bugs": {
+    "url": "https://github.com/j-256/ccam/issues"
+  },
+  "homepage": "https://github.com/j-256/ccam#readme",
+  "keywords": [
+    "salesforce",
+    "commerce-cloud",
+    "sfcc",
+    "account-manager",
+    "am",
+    "demandware",
+    "cli"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "ink-testing-library": "^4.0.0"
+  }
+}