@motiadev/workbench 0.4.3-beta.96 → 0.4.4-beta.98-640191

package/dist/src/components/endpoints/endpoint-body-panel.js

@@ -16,5 +16,5 @@ export const EndpointBodyPanel = ({ endpoint, onChange, onValidate }) => {
     if (!shouldHaveBody) {
         return null;
     }
-    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema ?? {}), theme: "default", enableClipboard: false })) }));
+    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema), theme: "default", enableClipboard: false, style: { backgroundColor: 'transparent' } })) }));
 };

package/dist/src/components/endpoints/endpoint-path-params-panel.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
 type Props = {
     endpoint: ApiEndpoint;
     onChange?: (pathParamsValues: Record<string, string>) => void;

package/dist/src/components/endpoints/endpoint-path-params-panel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, Panel } from '@motiadev/ui';
-import { Fragment, useMemo, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { usePathParams } from './hooks/use-path-params';
 export const EndpointPathParamsPanel = ({ endpoint, onChange }) => {
     const pathParams = usePathParams(endpoint.path);
@@ -10,19 +10,8 @@ export const EndpointPathParamsPanel = ({ endpoint, onChange }) => {
         setPathParamsValues(newPathParamsValues);
         onChange?.(newPathParamsValues);
     };
-    const subtitle = useMemo(() => {
-        if (onChange) {
-            return Object.entries(pathParamsValues).reduce((acc, [param, value]) => {
-                if (!value) {
-                    return acc;
-                }
-                return acc.replace(`:${param}`, value);
-            }, endpoint.path);
-        }
-        return endpoint.path;
-    }, [pathParamsValues, endpoint.path, onChange]);
     if (!pathParams.length) {
         return null;
     }
-    return (_jsx(Panel, { title: "Path params", subtitle: subtitle, size: "sm", variant: "outlined", children: _jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: '1fr 2fr' }, children: pathParams.map((param) => (_jsxs(Fragment, { children: [_jsx("div", { className: "font-bold leading-[36px] flex text-xs", children: param }), _jsx("div", { className: "flex items-center text-xs", children: onChange ? (_jsx(Input, { className: "w-full text-xs", placeholder: `:${param}`, value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })) : (_jsx("span", { className: "text-xs", children: `:${param}` })) })] }, param))) }) }));
+    return (_jsx(Panel, { title: "Path params", size: "sm", variant: "default", children: _jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: '1fr 2fr' }, children: pathParams.map((param) => (_jsxs(Fragment, { children: [_jsx("div", { className: "font-bold leading-[36px] flex text-xs", children: param }), _jsx("div", { className: "flex items-center text-xs", children: onChange && (_jsx(Input, { className: "w-full text-xs", placeholder: param, value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })) })] }, param))) }) }));
 };

package/dist/src/components/endpoints/hooks/utils.d.ts

@@ -1 +1 @@
-export declare const convertJsonSchemaToJson: (schema: Record<string, any>) => any;
+export declare const convertJsonSchemaToJson: (schema?: Record<string, any>) => any;

package/dist/src/components/endpoints/json-editor.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
 type JsonEditorProps = {
     value: string;
-    schema: Record<string, unknown> | undefined;
+    height?: number | string;
+    schema?: Record<string, unknown>;
     onChange: (value: string) => void;
     onValidate?: (isValid: boolean) => void;
 };

package/dist/src/components/endpoints/json-editor.js

@@ -2,25 +2,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { useThemeStore } from '@/stores/use-theme-store';
-export const JsonEditor = ({ value, schema, onChange, onValidate }) => {
+export const JsonEditor = ({ value, height = 300, schema, onChange, onValidate }) => {
     const monaco = useMonaco();
     const theme = useThemeStore((state) => state.theme);
     const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme]);
     useEffect(() => {
-        if (!monaco || !schema)
+        if (!monaco)
             return;
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
-            schemas: [
-                {
-                    uri: window.location.href,
-                    fileMatch: ['*'],
-                    schema,
-                },
-            ],
+            schemas: schema
+                ? [
+                    {
+                        uri: window.location.href,
+                        fileMatch: ['*'],
+                        schema,
+                    },
+                ]
+                : [],
         });
     }, [monaco, schema]);
-    return (_jsx(Editor, { "data-testid": "json-editor", height: "200px", language: "json", value: value, theme: editorTheme, onChange: (value) => {
+    return (_jsx(Editor, { "data-testid": "json-editor", height: height, language: "json", value: value, theme: editorTheme, onChange: (value) => {
             if (!value) {
                 onValidate?.(false);
             }

package/dist/src/components/states/state-details.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StateItem } from './hooks/states-hooks';
+type Props = {
+    state: StateItem;
+};
+export declare const StateDetails: React.FC<Props>;
+export {};

package/dist/src/components/states/state-details.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import JsonView from 'react18-json-view';
+export const StateDetails = ({ state }) => _jsx(JsonView, { src: state.value, theme: "default" });

package/dist/src/components/states/state-editor.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StateItem } from './hooks/states-hooks';
+type Props = {
+    state: StateItem;
+};
+export declare const StateEditor: React.FC<Props>;
+export {};

package/dist/src/components/states/state-editor.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@motiadev/ui';
+import { AlertCircle, Check, Loader2, Save } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { JsonEditor } from '../endpoints/json-editor';
+export const StateEditor = ({ state }) => {
+    const [isRequestLoading, setIsRequestLoading] = useState(false);
+    const [isValid, setIsValid] = useState(true);
+    const [jsonValue, setJsonValue] = useState(JSON.stringify(state.value, null, 2));
+    const [hasChanges, setHasChanges] = useState(false);
+    const [saveStatus, setSaveStatus] = useState('idle');
+    const lastSavedValue = useRef(JSON.stringify(state.value, null, 2));
+    useEffect(() => {
+        setJsonValue(JSON.stringify(state.value, null, 2));
+    }, [state.value]);
+    const handleJsonChange = useCallback((value) => {
+        setHasChanges(value !== lastSavedValue.current);
+        setJsonValue(value);
+        setSaveStatus('idle');
+    }, []);
+    const handleSave = async () => {
+        if (!isValid || !hasChanges)
+            return;
+        try {
+            setIsRequestLoading(true);
+            setSaveStatus('idle');
+            const response = await fetch('/motia/state', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    key: state.key,
+                    groupId: state.groupId,
+                    value: JSON.parse(jsonValue),
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            lastSavedValue.current = jsonValue;
+            setSaveStatus('success');
+            setHasChanges(false);
+            setTimeout(() => {
+                setSaveStatus('idle');
+            }, 3000);
+        }
+        catch (error) {
+            console.error('Failed to save state:', error);
+            setSaveStatus('error');
+        }
+        finally {
+            setIsRequestLoading(false);
+        }
+    };
+    const resetChanges = useCallback(() => {
+        setJsonValue(JSON.stringify(state.value, null, 2));
+        setHasChanges(false);
+        setSaveStatus('idle');
+    }, [state.value]);
+    const statusView = useMemo(() => {
+        if (saveStatus === 'success') {
+            return (_jsx("div", { className: "bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg p-2", children: _jsxs("div", { className: "flex items-center gap-2 text-green-700 dark:text-green-400 text-sm", children: [_jsx(Check, { className: "w-4 h-4" }), "State saved successfully!"] }) }));
+        }
+        if (saveStatus === 'error') {
+            return (_jsx("div", { className: "bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg p-2", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400 text-sm", children: [_jsx(AlertCircle, { className: "w-4 h-4" }), "Failed to save state. Please try again."] }) }));
+        }
+        return (_jsx("div", { className: "text-xs text-muted-foreground", children: hasChanges ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-orange-500 rounded-full" }), "Unsaved changes"] })) : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }), "Up to date"] })) }));
+    }, [saveStatus, hasChanges]);
+    return (_jsxs("div", { className: "flex flex-col gap-2 h-full", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Modify the state value using the JSON editor below." }), _jsx("div", { className: "space-y-3 pt-2 flex flex-col", children: _jsxs("div", { className: "relative flex-1", children: [_jsx(JsonEditor, { value: jsonValue, onChange: handleJsonChange, onValidate: setIsValid, height: 'calc(100vh - 300px)' }), !isValid && (_jsxs("div", { className: "absolute top-2 right-2 bg-destructive/90 text-destructive-foreground px-2 py-1 rounded text-xs flex items-center gap-1", children: [_jsx(AlertCircle, { className: "w-3 h-3" }), "Invalid JSON"] }))] }) }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [statusView, _jsxs("div", { className: "flex items-center gap-2", children: [hasChanges && (_jsx(Button, { variant: "secondary", onClick: resetChanges, disabled: isRequestLoading, children: "Reset" })), _jsx(Button, { onClick: handleSave, variant: "accent", disabled: isRequestLoading || !isValid || !hasChanges, "data-testid": "state-save-button", children: isRequestLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin mr-1" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-3 h-3 mr-1" }), "Save Changes"] })) })] })] })] }));
+};

package/dist/src/components/states/{state-detail.d.ts → state-sidebar.d.ts}

@@ -4,5 +4,5 @@ type Props = {
     state: StateItem;
     onClose: () => void;
 };
-export declare const StateDetail: React.FC<Props>;
+export declare const StateSidebar: React.FC<Props>;
 export {};

package/dist/src/components/states/state-sidebar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { X } from 'lucide-react';
+import { StateDetails } from './state-details';
+import { StateEditor } from './state-editor';
+export const StateSidebar = ({ state, onClose }) => {
+    return (_jsx(Sidebar, { onClose: onClose, title: "State Details", initialWidth: 500, tabs: [
+            {
+                label: 'Overview',
+                content: _jsx(StateDetails, { state: state }),
+            },
+            {
+                label: 'Editor',
+                content: _jsx(StateEditor, { state: state }),
+            },
+        ], actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }] }));
+};

package/dist/src/components/states/states-page.js

@@ -4,7 +4,7 @@ import { cn } from '@motiadev/ui';
 import { useMemo } from 'react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
 import { useGetStateItems } from './hooks/states-hooks';
-import { StateDetail } from './state-detail';
+import { StateSidebar } from './state-sidebar';
 export const StatesPage = () => {
     const selectedStateId = useGlobalStore((state) => state.selectedStateId);
     const selectStateId = useGlobalStore((state) => state.selectStateId);
@@ -12,7 +12,7 @@ export const StatesPage = () => {
     const selectedItem = useMemo(() => (selectedStateId ? items.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [items, selectedStateId]);
     const handleRowClick = (item) => selectStateId(`${item.groupId}:${item.key}`);
     const onClose = () => selectStateId(undefined);
-    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateDetail, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateSidebar, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
                                 ? 'bg-muted-foreground/10 hover:bg-muted-foreground/20'
                                 : 'hover:bg-muted-foreground/10'), children: [_jsx(TableCell, { className: "hover:bg-transparent", children: item.groupId }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.key }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.type })] }, `${item.groupId}:${item.key}`))) })] })] }));
 };