@making-sense/antlr-editor
Version:
ANTLR Typescript editor
190 lines • 15 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorBoundaryTest = exports.LayoutChangeTest = exports.ResizingTest = exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Editor_1 = __importDefault(require("../Editor"));
const tools = __importStar(require("@making-sense/vtl-2-1-antlr-tools-ts"));
const vtl_2_1_monaco_tools_ts_1 = require("@making-sense/vtl-2-1-monaco-tools-ts");
const customTools = { ...tools, getSuggestionsFromRange: vtl_2_1_monaco_tools_ts_1.getSuggestionsFromRange, monarchDefinition: vtl_2_1_monaco_tools_ts_1.monarchDefinition };
const EditorForStories = (props) => {
const { initialRule = "start" } = props;
return (0, jsx_runtime_1.jsx)(Editor_1.default, { ...props, tools: { ...customTools, initialRule } });
};
exports.default = {
title: "EnhancedEditor",
component: EditorForStories,
tags: ["autodocs"]
};
exports.Default = {
args: { initialRule: "start" },
argTypes: {
initialRule: { control: "select", options: ["start", "expr"] }
}
};
// Story with resizing test
exports.ResizingTest = {
render: () => {
const [height, setHeight] = (0, react_1.useState)("300px");
const [width, setWidth] = (0, react_1.useState)("100%");
const [script, setScript] = (0, react_1.useState)(`ds_out := ds_in [calc r := random(150, 20)]
[calc c := case when r < 0.2 then "Low" when r > 0.8 then "High" else "Medium"];
a := datediff(cast("2022Q1", time_period), cast("2023Q2", time_period));
b := dateadd(cast("2022Q1", time_period), 5, "M");
c := getyear(cast("2022Q1", time_period));
d := getmonth(cast("2020-12-14", date));
e := dayofmonth(cast("2020-12-14", date));
f := dayofyear(cast("2020-12-14", date));
g := daytoyear(422);
h := daytomonth(146);
i := yeartoday(cast("P1Y20D", duration));
j := monthtoday(cast("P3M10D", duration));`);
const resizeButtons = [
{ label: "Small", height: "200px", width: "50%" },
{ label: "Medium", height: "300px", width: "75%" },
{ label: "Large", height: "400px", width: "100%" },
{ label: "Extra Large", height: "500px", width: "100%" }
];
return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "20px" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Enhanced Editor Resizing Test" }), (0, jsx_runtime_1.jsx)("p", { children: "Test that the editor resizes without remounting. The editor should maintain its state (cursor position, selection, etc.) when resizing." }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "20px" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Resize Controls:" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" }, children: resizeButtons.map(button => ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
setHeight(button.height);
setWidth(button.width);
}, style: {
padding: "8px 16px",
backgroundColor: "#007acc",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
}, children: button.label }, button.label))) })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: "20px" }, children: (0, jsx_runtime_1.jsxs)("h4", { children: ["Current Size: ", width, " x ", height] }) }), (0, jsx_runtime_1.jsx)("div", { style: { border: "2px solid #ccc", borderRadius: "4px", overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)(EditorForStories, { script: script, setScript: setScript, height: height, width: width, theme: "vs-dark", tools: { ...customTools, initialRule: "start" }, shortcuts: {
"ctrl+s, meta+s": () => console.log("Save triggered"),
"ctrl+enter, meta+enter": () => console.log("Run triggered")
}, displayFooter: true, options: {
lineNumbers: "on",
minimap: { enabled: true },
readOnly: false
} }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
marginTop: "20px",
padding: "10px",
backgroundColor: "#f5f5f5",
borderRadius: "4px"
}, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Test Instructions:" }), (0, jsx_runtime_1.jsxs)("ol", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Click in the editor and position your cursor somewhere in the middle" }), (0, jsx_runtime_1.jsx)("li", { children: "Select some text" }), (0, jsx_runtime_1.jsx)("li", { children: "Click the resize buttons above" }), (0, jsx_runtime_1.jsx)("li", { children: "Verify that your cursor position and selection are preserved" }), (0, jsx_runtime_1.jsx)("li", { children: "Check the browser console - there should be no \"Monaco InstantiationService disposal\" errors" })] })] })] }));
}
};
// Story with layout change simulation
exports.LayoutChangeTest = {
render: () => {
const [layout, setLayout] = (0, react_1.useState)("horizontal");
const [script, setScript] = (0, react_1.useState)(`ds_out := ds_in [calc r := random(150, 20)]
[calc c := case when r < 0.2 then "Low" when r > 0.8 then "High" else "Medium"];`);
return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "20px" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Layout Change Test" }), (0, jsx_runtime_1.jsx)("p", { children: "Simulate layout changes that might occur in a real application. The editor should not remount when the layout changes." }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "20px" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Layout Controls:" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setLayout("horizontal"), style: {
padding: "8px 16px",
backgroundColor: layout === "horizontal" ? "#007acc" : "#ccc",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
}, children: "Horizontal Layout" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setLayout("vertical"), style: {
padding: "8px 16px",
backgroundColor: layout === "vertical" ? "#007acc" : "#ccc",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
}, children: "Vertical Layout" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
display: layout === "horizontal" ? "flex" : "block",
gap: "10px",
height: "400px"
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
flex: layout === "horizontal" ? "1" : "none",
height: layout === "vertical" ? "200px" : "100%"
}, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Editor Panel" }), (0, jsx_runtime_1.jsx)("div", { style: {
border: "2px solid #ccc",
borderRadius: "4px",
overflow: "hidden",
height: "calc(100% - 30px)"
}, children: (0, jsx_runtime_1.jsx)(EditorForStories, { script: script, setScript: setScript, height: "100%", width: "100%", theme: "vs-dark", tools: { ...customTools, initialRule: "start" }, shortcuts: {
"ctrl+s, meta+s": () => console.log("Save triggered"),
"ctrl+enter, meta+enter": () => console.log("Run triggered")
}, displayFooter: true, options: {
lineNumbers: "on",
minimap: { enabled: true },
readOnly: false
} }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
flex: layout === "horizontal" ? "1" : "none",
height: layout === "vertical" ? "200px" : "100%",
backgroundColor: "#f5f5f5",
padding: "10px",
borderRadius: "4px"
}, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Side Panel" }), (0, jsx_runtime_1.jsx)("p", { children: "This panel simulates other UI elements that might cause layout changes." }), (0, jsx_runtime_1.jsxs)("p", { children: ["Current layout: ", (0, jsx_runtime_1.jsx)("strong", { children: layout })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
marginTop: "20px",
padding: "10px",
backgroundColor: "#f5f5f5",
borderRadius: "4px"
}, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Test Instructions:" }), (0, jsx_runtime_1.jsxs)("ol", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Click in the editor and position your cursor" }), (0, jsx_runtime_1.jsx)("li", { children: "Type some text or select existing text" }), (0, jsx_runtime_1.jsx)("li", { children: "Switch between horizontal and vertical layouts" }), (0, jsx_runtime_1.jsx)("li", { children: "Verify that the editor content and cursor position are preserved" }), (0, jsx_runtime_1.jsx)("li", { children: "Check the browser console for any disposal errors" })] })] })] }));
}
};
// Story with error boundary test
exports.ErrorBoundaryTest = {
render: () => {
const [script, setScript] = (0, react_1.useState)(`ds_out := ds_in [calc r := random(150, 20)]`);
const [forceError, setForceError] = (0, react_1.useState)(false);
return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "20px" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Error Boundary Test" }), (0, jsx_runtime_1.jsx)("p", { children: "Test the error handling capabilities of the Enhanced Editor." }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: "20px" }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setForceError(!forceError), style: {
padding: "8px 16px",
backgroundColor: forceError ? "#ff4444" : "#007acc",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
}, children: forceError ? "Disable Error Simulation" : "Simulate Monaco Error" }) }), forceError && ((0, jsx_runtime_1.jsxs)("div", { style: {
padding: "10px",
backgroundColor: "#fff3cd",
border: "1px solid #ffeaa7",
borderRadius: "4px",
marginBottom: "20px"
}, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error Simulation Active:" }), " This will trigger Monaco disposal errors to test the error handling and recovery mechanisms."] })), (0, jsx_runtime_1.jsx)("div", { style: {
border: "2px solid #ccc",
borderRadius: "4px",
overflow: "hidden",
height: "400px"
}, children: (0, jsx_runtime_1.jsx)(EditorForStories, { script: script, setScript: setScript, height: "100%", width: "100%", theme: "vs-dark", tools: { ...customTools, initialRule: "start" }, shortcuts: {
"ctrl+s, meta+s": () => console.log("Save triggered"),
"ctrl+enter, meta+enter": () => console.log("Run triggered")
}, displayFooter: true, options: {
lineNumbers: "on",
minimap: { enabled: true },
readOnly: false
} }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
marginTop: "20px",
padding: "10px",
backgroundColor: "#f5f5f5",
borderRadius: "4px"
}, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Test Instructions:" }), (0, jsx_runtime_1.jsxs)("ol", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Position your cursor and type some text" }), (0, jsx_runtime_1.jsx)("li", { children: "Click \"Simulate Monaco Error\" to trigger disposal errors" }), (0, jsx_runtime_1.jsx)("li", { children: "Verify that the editor recovers gracefully" }), (0, jsx_runtime_1.jsx)("li", { children: "Check that your content and cursor position are preserved" }), (0, jsx_runtime_1.jsx)("li", { children: "Monitor the browser console for error handling messages" })] })] })] }));
}
};
//# sourceMappingURL=ImprovedEditor.stories.js.map