kwikid-components-react
Version:
KwikID's Component Library in React
214 lines (205 loc) • 6.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* Interface for the EditorMock component props
*/
/**
* Mock component to replace Monaco Editor in Storybook
* This simulates the Monaco Editor interface without the actual editor
*/
const EditorMock = _ref => {
let {
width = "100%",
height = "100%",
defaultValue = "",
value = "",
defaultLanguage = "json",
onMount,
onChange
} = _ref;
const [currentValue, setCurrentValue] = (0, _react.useState)(value || defaultValue);
const [isFormatted, setIsFormatted] = (0, _react.useState)(false);
const [isSyntaxError, setIsSyntaxError] = (0, _react.useState)(false);
const [lineCount, setLineCount] = (0, _react.useState)(1);
// Initialize editor with value
(0, _react.useEffect)(() => {
if (value) {
setCurrentValue(value);
countLines(value);
checkSyntax(value);
}
}, [value]);
// Count lines in the editor
const countLines = text => {
if (!text) return setLineCount(1);
const lines = text.split("\n").length;
setLineCount(lines);
};
// Check JSON syntax
const checkSyntax = text => {
if (!text || defaultLanguage !== "json") {
setIsSyntaxError(false);
return;
}
try {
JSON.parse(text);
setIsSyntaxError(false);
} catch (e) {
setIsSyntaxError(true);
}
};
// Format JSON
const formatJSON = () => {
if (defaultLanguage !== "json" || !currentValue) return;
try {
const parsed = JSON.parse(currentValue);
const formatted = JSON.stringify(parsed, null, 2);
setCurrentValue(formatted);
countLines(formatted);
setIsFormatted(true);
setIsSyntaxError(false);
if (onChange) {
onChange(formatted, {});
}
} catch (e) {
setIsSyntaxError(true);
}
};
// Handle text changes
const handleChange = e => {
const newValue = e.target.value;
setCurrentValue(newValue);
countLines(newValue);
checkSyntax(newValue);
setIsFormatted(false);
if (onChange) {
onChange(newValue, {});
}
};
// Simulate onMount callback when component mounts
(0, _react.useEffect)(() => {
if (onMount) {
const mockEditor = {
getValue: () => currentValue,
setValue: newValue => {
setCurrentValue(newValue);
countLines(newValue);
},
format: formatJSON
};
const mockMonaco = {
languages: {
json: {
format: formatJSON
}
}
};
onMount(mockEditor, mockMonaco);
}
}, []);
// Create line numbers for the editor
const renderLineNumbers = () => {
return Array.from({
length: lineCount
}, (_, i) => i + 1).map(num => /*#__PURE__*/_react.default.createElement("div", {
key: num,
className: "line-number"
}, num));
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: width,
height: height,
display: "flex",
flexDirection: "column",
border: "1px solid #ccc",
overflow: "hidden",
fontFamily: "monospace",
backgroundColor: "#1e1e1e",
// Dark background like VS Code
color: "#d4d4d4"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
padding: "4px 8px",
backgroundColor: "#252526",
borderBottom: "1px solid #333",
alignItems: "center",
justifyContent: "space-between"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
style: {
fontWeight: "bold",
color: "#cccccc"
}
}, "Monaco Editor (Mock) - ", defaultLanguage)), /*#__PURE__*/_react.default.createElement("div", null, defaultLanguage === "json" && /*#__PURE__*/_react.default.createElement("button", {
onClick: formatJSON,
disabled: isFormatted || isSyntaxError,
style: {
background: isFormatted ? "#2d2d2d" : "#0e639c",
color: "#ffffff",
border: "none",
padding: "4px 8px",
borderRadius: "2px",
fontSize: "12px",
cursor: isFormatted ? "default" : "pointer",
opacity: isFormatted ? 0.7 : 1
}
}, isFormatted ? "Formatted" : "Format JSON"))), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flex: 1,
overflow: "hidden"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "40px",
backgroundColor: "#1e1e1e",
color: "#858585",
textAlign: "right",
padding: "8px 5px 8px 0",
overflowY: "hidden",
borderRight: "1px solid #333",
fontSize: "12px",
userSelect: "none"
}
}, renderLineNumbers()), /*#__PURE__*/_react.default.createElement("textarea", {
style: {
flex: 1,
resize: "none",
border: "none",
outline: "none",
padding: "8px",
backgroundColor: "#1e1e1e",
color: "#d4d4d4",
fontSize: "12px",
lineHeight: "1.5",
fontFamily: 'Consolas, "Courier New", monospace',
overflow: "auto"
},
value: currentValue,
onChange: handleChange,
spellCheck: false,
placeholder: "Enter your code here..."
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2px 8px",
backgroundColor: "#007acc",
color: "white",
fontSize: "12px",
display: "flex",
justifyContent: "space-between"
}
}, /*#__PURE__*/_react.default.createElement("div", null, defaultLanguage.toUpperCase(), " • ", "Lines: ", lineCount), /*#__PURE__*/_react.default.createElement("div", null, isSyntaxError && defaultLanguage === "json" && /*#__PURE__*/_react.default.createElement("span", {
style: {
color: "#ff6464"
}
}, "JSON Syntax Error"))));
};
var _default = exports.default = EditorMock;