kwikid-components-react
Version:
KwikID's Component Library in React
1,051 lines (1,014 loc) • 38.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _kwikidToolkit = require("kwikid-toolkit");
var _Button = _interopRequireDefault(require("../kwikui/button/Button"));
var _hooks = require("../../shared/hooks");
var _DataTree = _interopRequireDefault(require("../data-viewer/data-tree/DataTree"));
var _Configurator = require("./Configurator.defaults");
var _Configurator2 = require("./Configurator.style");
var _EditorMock = _interopRequireDefault(require("./EditorMock"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
// Import mock for Storybook environment
// File icons for different file types
const FileIcon = _ref => {
let {
type,
isDarkTheme
} = _ref;
const iconColor = isDarkTheme ? "#d4d4d4" : "#555555";
switch (type) {
case "json":
return /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
stroke: iconColor,
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M4 1.5v9M4 13.5v1M8 1.5v1M8 5.5v9M12 1.5v9M12 13.5v1"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M2 3.5h4M10 3.5h4M2 11.5h4M10 11.5h4"
}));
case "folder":
return /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
stroke: iconColor,
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M1.5 2.5h5l1 2h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"
}));
default:
return /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
stroke: iconColor,
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M3.5 1.5h6l3 3v10h-9v-13z"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M9.5 1.5v3h3"
}));
}
};
// Theme toggle icons
const DarkModeIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
}));
const LightModeIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2"
}, /*#__PURE__*/_react.default.createElement("circle", {
cx: "12",
cy: "12",
r: "4"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M12 2v2"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M12 20v2"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M5 5l1.5 1.5"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M17.5 17.5l1.5 1.5"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M2 12h2"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M20 12h2"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M5 19l1.5-1.5"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M17.5 6.5l1.5-1.5"
}));
// Status icons
const SuccessIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M20 6L9 17l-5-5"
}));
const ErrorIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2"
}, /*#__PURE__*/_react.default.createElement("circle", {
cx: "12",
cy: "12",
r: "10"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "15",
y1: "9",
x2: "9",
y2: "15"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "9",
y1: "9",
x2: "15",
y2: "15"
}));
// Helpers
const getFileExtension = filename => {
const parts = filename.split(".");
return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : "";
};
// Mock data for when no API is available
const MOCK_DATA = {
user: [{
name: "user_config.json",
path: "config/user/user_config.json",
type: "file",
content: {
name: "User Configuration",
version: "1.0.0",
settings: {
theme: "light",
notifications: true,
language: "en",
timezone: "UTC",
features: {
darkMode: true,
mfa: true,
apiAccess: false
}
}
}
}, {
name: "user_settings.json",
path: "config/user/user_settings.json",
type: "file",
content: {
settings: {
locale: "en-US",
dateFormat: "MM/DD/YYYY",
timeFormat: "12h"
}
}
}],
agent: [{
name: "agent_config.json",
path: "config/agent/agent_config.json",
type: "file",
content: {
name: "Agent Configuration",
version: "1.0.0",
settings: {
maxCalls: 10,
autoAnswer: false,
callRecording: true,
features: {
chatTransfer: true,
videoCall: true,
screenShare: true
}
}
}
}],
admin: [{
name: "system_config.json",
path: "config/admin/system_config.json",
type: "file",
content: {
system: {
maxUsers: 1000,
maxAgents: 100,
maintenance: false,
version: "2.5.0"
}
}
}]
};
// Try to detect if we're in Storybook
const isStorybook = typeof window !== "undefined" && window.__STORYBOOK_CLIENT_API__;
// Try to detect system preference for dark mode
const prefersDarkMode = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
// Conditionally use real editor or mock
const Editor = isStorybook ? _EditorMock.default : require("@monaco-editor/react").default;
// DataTree adapter component to handle both old and new interfaces
const DataTreeAdapter = _ref2 => {
let {
config,
data,
onClickFile,
isDarkTheme = false
} = _ref2;
// Convert config data to TreeNode[] format if config is provided
const convertConfigToData = configData => {
if (!configData || !Array.isArray(configData)) return [];
return configData.map(item => ({
id: item.id || item.path || item.name,
name: item.name,
path: item.path || item.id,
type: item.type || "file",
children: item.children || []
}));
};
// Use data prop if provided, otherwise convert config
const treeData = data || convertConfigToData(config);
// Custom styling for tree component
const treeStyles = {
wrapper: {
fontSize: "0.9rem",
padding: "4px",
borderRadius: "4px"
},
node: {
normal: {
backgroundColor: "transparent",
padding: "4px 8px",
borderRadius: "3px",
color: isDarkTheme ? "#d4d4d4" : "#333333"
},
selected: {
backgroundColor: isDarkTheme ? "#0e639c" : "#e9f5fe",
color: isDarkTheme ? "#ffffff" : "#0e639c"
},
hover: {
backgroundColor: isDarkTheme ? "#333333" : "#e9e9e9"
}
},
icon: {
color: isDarkTheme ? "#d4d4d4" : "#555555",
selectedColor: isDarkTheme ? "#ffffff" : "#0e639c"
}
};
return /*#__PURE__*/_react.default.createElement("div", {
style: treeStyles.wrapper
}, /*#__PURE__*/_react.default.createElement(_DataTree.default, {
data: treeData,
onFileClick: onClickFile
}));
};
/**
* Configurator component provides a way to configure and customize forms and views
* through a visual interface with file browser and code editor.
*/
const KwikIDConfigurator = _ref3 => {
let {
styles = _Configurator.KWIKID__CONFIGURATOR__DEFAULTS.styles,
config = _Configurator.KWIKID__CONFIGURATOR__DEFAULTS.config,
id = _Configurator.KWIKID__CONFIGURATOR__DEFAULTS.id,
value = _Configurator.KWIKID__CONFIGURATOR__DEFAULTS.value,
onEmitEvent = _Configurator.KWIKID__CONFIGURATOR__DEFAULTS.onEmitEvent
} = _ref3;
// Add fallback empty string for APIs to prevent undefined errors
const filesListUrl = (config === null || config === void 0 ? void 0 : config.GET_FILES_LIST) || "";
const configFileGetUrl = (config === null || config === void 0 ? void 0 : config.GET_CONFIG_FILE_URL) || "";
const configFileSetUrl = (config === null || config === void 0 ? void 0 : config.SET_CONFIG_FILE_URL) || "";
// Theme state
const [isDarkTheme, setIsDarkTheme] = (0, _react.useState)(prefersDarkMode);
// Flag to determine if we're using mock data
const [useMockData, setUseMockData] = (0, _react.useState)((0, _kwikidToolkit.isEmptyValue)(filesListUrl) || isStorybook);
const {
loading: configPathLoading,
error: configPathError,
data: configPathData,
post: configPathPost
} = (0, _hooks.useFetch)(filesListUrl);
const {
loading: configFileGetLoading,
error: configFileGetError,
data: configFileGetData,
post: configFileGetPost
} = (0, _hooks.useFetch)(configFileGetUrl);
const {
loading: configFileSetLoading,
error: configFileSetError,
data: configFileSetData,
post: configFileSetPost
} = (0, _hooks.useFetch)(configFileSetUrl);
const [configPaths, setConfigPaths] = (0, _react.useState)({});
const [configFileGet, setConfigFileGet] = (0, _react.useState)("");
const [selectedFile, setSelectedFile] = (0, _react.useState)({});
const [isFirstLoadDone, setIsFirstLoadDone] = (0, _react.useState)(false);
const [isEditorMounted, setIsEditorMounted] = (0, _react.useState)(false);
const [saveSuccess, setSaveSuccess] = (0, _react.useState)(null);
const editorRef = _react.default.useRef(null);
const monacoRef = _react.default.useRef(null);
const getMockFileContent = path => {
let content = null;
Object.keys(MOCK_DATA).forEach(category => {
MOCK_DATA[category].forEach(file => {
if (file.path === path) {
content = file.content;
}
});
});
return content;
};
/**
* Fetches configuration paths from the server or mock data
*/
const fetchConfigPaths = async () => {
if (useMockData) {
// Use mock data
setConfigPaths(MOCK_DATA);
setIsFirstLoadDone(true);
return;
}
try {
await configPathPost({
config_key: config === null || config === void 0 ? void 0 : config.CONFIG_KEY,
portal_names: config === null || config === void 0 ? void 0 : config.PORTAL_NAMES
}, {
"content-type": "application/json",
auth: config === null || config === void 0 ? void 0 : config.apiToken
});
} catch (error) {
console.error("Error fetching configuration paths:", error);
// Fallback to mock data on error
setConfigPaths(MOCK_DATA);
setIsFirstLoadDone(true);
setUseMockData(true);
}
};
/**
* Fetches configuration file content from the server or mock data
* @param {string} configPath - Path to the configuration file
*/
const fetchConfigFileGet = async configPath => {
if (useMockData) {
// Use mock data
const content = getMockFileContent(configPath);
setConfigFileGet(JSON.stringify(content, null, 4));
return;
}
try {
await configFileGetPost({
config_path: configPath
}, {
"content-type": "application/json",
auth: config === null || config === void 0 ? void 0 : config.apiToken
});
} catch (error) {
console.error("Error fetching configuration file:", error);
// Fallback to mock data on error
const content = getMockFileContent(configPath);
if (content) {
setConfigFileGet(JSON.stringify(content, null, 4));
}
}
};
/**
* Saves configuration file content to the server
* @param {string} configPath - Path to the configuration file
* @param {object} configData - Configuration data to save
*/
const fetchConfigFileSet = async (configPath, configData) => {
if (useMockData) {
// Simulate successful save with mock data
setSaveSuccess(true);
// Update the mock data
Object.keys(MOCK_DATA).forEach(category => {
MOCK_DATA[category].forEach(file => {
if (file.path === configPath) {
file.content = configData;
}
});
});
setTimeout(() => {
setSaveSuccess(null);
}, 3000);
return;
}
try {
await configFileSetPost({
config_path: configPath,
config_data: configData
}, {
"content-type": "application/json",
auth: config === null || config === void 0 ? void 0 : config.apiToken
});
// Show success message
setSaveSuccess(true);
// Hide success message after 3 seconds
setTimeout(() => {
setSaveSuccess(null);
}, 3000);
} catch (error) {
console.error("Error saving configuration:", error);
// Show error message
setSaveSuccess(false);
// Hide error message after 3 seconds
setTimeout(() => {
setSaveSuccess(null);
}, 3000);
}
};
// Fetch data on component mount
(0, _react.useEffect)(() => {
fetchConfigPaths();
}, [useMockData]);
// Handle changes to configPathData
(0, _react.useEffect)(() => {
if (!useMockData && configPathData) {
setConfigPaths(configPathData || {});
setIsFirstLoadDone(true);
}
}, [configPathData, useMockData]);
// Handle changes to configFileGetData
(0, _react.useEffect)(() => {
if (!useMockData && (0, _kwikidToolkit.isNotEmptyValue)(configFileGetData)) {
setIsFirstLoadDone(true);
setConfigFileGet(JSON.stringify(configFileGetData, null, 4));
}
}, [configFileGetData, useMockData]);
// Handle errors in configFileGetData
(0, _react.useEffect)(() => {
if (!useMockData && configFileGetError) {
setIsFirstLoadDone(true);
setConfigFileGet("");
}
}, [configFileGetError, useMockData]);
// Handle changes to value prop
(0, _react.useEffect)(() => {
if ((0, _kwikidToolkit.isNotEmptyValue)(value)) {
handleOnInput(value);
}
}, [value]);
/**
* Handles input changes and emits events
* @param {any} newValue - New input value
*/
const handleOnInput = newValue => {
if (onEmitEvent) {
onEmitEvent(id, newValue);
}
};
// Add function to toggle dark/light theme
const toggleTheme = () => {
setIsDarkTheme(prev => !prev);
};
// Editor options for Monaco
const getEditorOptions = () => {
return {
minimap: {
enabled: true
},
scrollBeyondLastLine: false,
scrollbar: {
vertical: "auto",
horizontal: "auto",
useShadows: true,
verticalScrollbarSize: 10,
horizontalScrollbarSize: 10
},
lineNumbers: "on",
renderLineHighlight: "all",
automaticLayout: true,
fontSize: 13,
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
wordWrap: "on",
formatOnPaste: true,
formatOnType: true,
renderWhitespace: "none",
tabSize: 2,
cursorBlinking: "smooth",
cursorSmoothCaretAnimation: true,
roundedSelection: true
};
};
// Monaco editor configuration and theme setup
const handleBeforeEditorMount = monaco => {
// Dark theme (VS Code-like)
monaco.editor.defineTheme("vs-dark-enhanced", {
base: "vs-dark",
inherit: true,
rules: [{
token: "string",
foreground: "ce9178"
}, {
token: "keyword",
foreground: "569cd6"
}, {
token: "comment",
foreground: "6A9955"
}, {
token: "number",
foreground: "b5cea8"
}],
colors: {
"editor.background": "#1e1e1e",
"editor.foreground": "#d4d4d4",
"editorLineNumber.foreground": "#858585",
"editorLineNumber.activeForeground": "#c6c6c6",
"editor.lineHighlightBackground": "#2c313a",
"editorCursor.foreground": "#aeafad"
}
});
// Light theme
monaco.editor.defineTheme("vs-light-enhanced", {
base: "vs",
inherit: true,
rules: [{
token: "string",
foreground: "a31515"
}, {
token: "keyword",
foreground: "0000ff"
}, {
token: "comment",
foreground: "008000"
}, {
token: "number",
foreground: "098658"
}],
colors: {
"editor.background": "#ffffff",
"editor.foreground": "#000000",
"editorLineNumber.foreground": "#909090",
"editorLineNumber.activeForeground": "#000000",
"editor.lineHighlightBackground": "#f3f3f3",
"editorCursor.foreground": "#000000"
}
});
};
/**
* Handles editor mounting
* @param {any} editor - Editor instance
* @param {any} monaco - Monaco instance
*/
function handleEditorDidMount(editor, monaco) {
editorRef.current = editor;
monacoRef.current = monaco;
setIsEditorMounted(true);
// Format the JSON if possible
try {
if (editor.getAction && typeof editor.getAction === "function") {
// Only works in real Monaco editor
const formatAction = editor.getAction("editor.action.formatDocument");
if (formatAction) {
formatAction.run();
}
} else if (editor.format && typeof editor.format === "function") {
// Works with our mock editor
editor.format();
}
} catch (e) {
console.log("Could not format document automatically");
}
}
/**
* Handles saving the current file
*/
function handleOnClickSaveFile() {
if ((0, _kwikidToolkit.isNotEmptyValue)(editorRef === null || editorRef === void 0 ? void 0 : editorRef.current)) {
try {
const currentEditedConfig = editorRef.current.getValue();
const parsedConfig = JSON.parse(currentEditedConfig);
fetchConfigFileSet(selectedFile.path, parsedConfig);
} catch (e) {
setSaveSuccess(false);
setTimeout(() => {
setSaveSuccess(null);
}, 3000);
console.error("Invalid JSON, cannot save", e);
}
}
}
/**
* Handles refreshing the file list
*/
const handleOnClickRefreshFiles = () => {
fetchConfigPaths();
};
/**
* Handles file selection
* @param {any} file - Selected file
*/
const handleOnClickFile = file => {
setSelectedFile(file);
fetchConfigFileGet(file.path);
};
/**
* Handles editor content changes
* @param {any} value - New editor content
* @param {any} event - Editor event
*/
const handleEditorChange = (value, event) => {
// This function is called on each keystroke
// We can use it for additional validation if needed
};
// Render the component
return /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorWrapper, {
paramName: "m",
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayout, null, /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutHeader, {
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
gap: "0.75rem"
}
}, /*#__PURE__*/_react.default.createElement(ThemeToggleButton, {
onClick: toggleTheme,
isDarkTheme: isDarkTheme,
type: "button",
"aria-label": isDarkTheme ? "Switch to light mode" : "Switch to dark mode"
}, isDarkTheme ? /*#__PURE__*/_react.default.createElement(LightModeIcon, null) : /*#__PURE__*/_react.default.createElement(DarkModeIcon, null)), useMockData && /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "0.8rem",
padding: "0.25rem 0.5rem",
backgroundColor: isDarkTheme ? "#3a3a3a" : "#f5f5f5",
color: isDarkTheme ? "#cccccc" : "#666666",
borderRadius: "4px"
}
}, "Using Mock Data")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
gap: "0.75rem"
}
}, saveSuccess !== null && /*#__PURE__*/_react.default.createElement(StatusIndicator, {
status: saveSuccess ? "success" : "error",
isDarkTheme: isDarkTheme
}, saveSuccess ? /*#__PURE__*/_react.default.createElement(SuccessIcon, null) : /*#__PURE__*/_react.default.createElement(ErrorIcon, null), saveSuccess ? "Saved Successfully" : "Save Failed"), /*#__PURE__*/_react.default.createElement(_Button.default, {
size: "s",
disabled: !isFirstLoadDone,
loading: !useMockData && configPathLoading,
onClick: handleOnClickRefreshFiles
}, "Refresh Files"), /*#__PURE__*/_react.default.createElement(_Button.default, {
size: "s",
disabled: !isFirstLoadDone || (0, _kwikidToolkit.isEmptyValue)(configFileGet) || !useMockData && configFileGetLoading,
onClick: handleOnClickSaveFile,
color: saveSuccess === true ? "success" : saveSuccess === false ? "danger" : "primary"
}, "Save File"))), /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutBody, null, (0, _kwikidToolkit.isNotEmptyValue)(configPaths) && (!configPathLoading || useMockData) ? /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutTreeContainer, {
isDarkTheme: isDarkTheme
}, (0, _kwikidToolkit.isNotEmptyValue)(configPaths.user) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "User Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.user,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.agent) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "Agent Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.agent,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.admin) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "Admin Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.admin,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.forms) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "Form Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.forms,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.themes) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "Theme Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.themes,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.workflows) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "Workflow Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.workflows,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
}), /*#__PURE__*/_react.default.createElement("hr", null)), (0, _kwikidToolkit.isNotEmptyValue)(configPaths.api) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", null, "API Configuration"), /*#__PURE__*/_react.default.createElement(DataTreeAdapter, {
config: configPaths.api,
onClickFile: handleOnClickFile,
isDarkTheme: isDarkTheme
})), !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.user) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.agent) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.admin) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.forms) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.themes) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.workflows) && !(0, _kwikidToolkit.isNotEmptyValue)(configPaths.api) && /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#cccccc" : "#666666"
}
}, /*#__PURE__*/_react.default.createElement("p", null, "No configuration files found."), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "0.5rem"
}
}, "Check your API settings or try refreshing."))) : /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutTreeContainer, {
isDarkTheme: isDarkTheme
}, !useMockData && configPathLoading ? /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#cccccc" : "#666666",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}
}, /*#__PURE__*/_react.default.createElement("p", null, "Loading files..."), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1rem",
width: "100%",
height: "4px",
background: isDarkTheme ? "linear-gradient(to right, #333333, #0e639c, #333333)" : "linear-gradient(to right, #f0f0f0, #007acc, #f0f0f0)",
backgroundSize: "200% 100%",
animation: "loading-animation 1.5s infinite"
}
}), /*#__PURE__*/_react.default.createElement("style", null, "\n @keyframes loading-animation {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\n }\n ")) : !useMockData && configPathError ? /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#f44336" : "#d32f2f",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
textAlign: "center"
}
}, /*#__PURE__*/_react.default.createElement("p", null, "Error loading files."), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "0.5rem",
fontSize: "0.9rem",
color: isDarkTheme ? "#cccccc" : "#666666"
}
}, "Please check your connection and API settings."), /*#__PURE__*/_react.default.createElement("button", {
onClick: () => setUseMockData(true),
style: {
marginTop: "1rem",
padding: "0.5rem 1rem",
backgroundColor: isDarkTheme ? "#444444" : "#f5f5f5",
color: isDarkTheme ? "#ffffff" : "#333333",
border: isDarkTheme ? "1px solid #555555" : "1px solid #ddd",
borderRadius: "4px",
cursor: "pointer"
},
type: "button"
}, "Use Mock Data Instead")) : /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#cccccc" : "#666666",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
textAlign: "center"
}
}, /*#__PURE__*/_react.default.createElement("p", null, "No files available."))), (0, _kwikidToolkit.isNotEmptyValue)(configFileGet) && (!configFileGetLoading || useMockData) ? /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutEditorContainer, {
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement("div", {
className: "editor-header"
}, /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(FileIcon, {
type: getFileExtension(selectedFile.name || ""),
isDarkTheme: isDarkTheme
}), selectedFile.name), /*#__PURE__*/_react.default.createElement("span", {
className: "file-path"
}, selectedFile.path)), /*#__PURE__*/_react.default.createElement("div", {
className: "editor-container"
}, /*#__PURE__*/_react.default.createElement(Editor, {
defaultLanguage: "json",
defaultValue: "Please select a file from file manager",
value: configFileGet,
onMount: handleEditorDidMount,
onChange: handleEditorChange,
beforeMount: handleBeforeEditorMount,
theme: isDarkTheme ? "vs-dark-enhanced" : "vs-light-enhanced",
options: getEditorOptions(),
width: "100%",
height: "100%"
}))) : isFirstLoadDone && !useMockData && configFileGetLoading ? /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutEditorContainer, {
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#cccccc" : "#666666",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: "1.5rem",
marginBottom: "1rem"
}
}, "Loading File..."), /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "50%",
height: "4px",
background: isDarkTheme ? "linear-gradient(to right, #333333, #0e639c, #333333)" : "linear-gradient(to right, #f0f0f0, #007acc, #f0f0f0)",
backgroundSize: "200% 100%",
animation: "loading-animation 1.5s infinite"
}
}))) : !useMockData && configFileGetError ? /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutEditorContainer, {
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1rem",
color: isDarkTheme ? "#f44336" : "#d32f2f",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
textAlign: "center"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: "1.5rem",
marginBottom: "1rem"
}
}, "Error Loading File"), /*#__PURE__*/_react.default.createElement("p", null, "There was a problem loading the selected file."), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "0.5rem",
color: isDarkTheme ? "#cccccc" : "#666666"
}
}, "Please try again or select a different file."))) : /*#__PURE__*/_react.default.createElement(_Configurator2.KwikIDStyleConfiguratorLayoutEditorContainer, {
isDarkTheme: isDarkTheme
}, /*#__PURE__*/_react.default.createElement("div", {
className: "editor-header"
}, /*#__PURE__*/_react.default.createElement("h3", null, "Configurator Editor"), /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("div", {
style: {
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
padding: "2rem",
textAlign: "center",
color: isDarkTheme ? "#cccccc" : "#666666",
backgroundColor: isDarkTheme ? "#1e1e1e" : "#ffffff"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: "2rem",
backgroundColor: isDarkTheme ? "#252526" : "#f5f5f5",
borderRadius: "8px",
padding: "1.5rem",
maxWidth: "500px",
boxShadow: isDarkTheme ? "0 4px 6px rgba(0, 0, 0, 0.4)" : "0 4px 6px rgba(0, 0, 0, 0.1)"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: isDarkTheme ? "#ffffff" : "#333333",
fontSize: "1.2rem"
}
}, "Welcome to the Configurator"), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginBottom: "1rem"
}
}, "Please select a file from the File Manager to edit."), /*#__PURE__*/_react.default.createElement("ul", {
style: {
marginTop: "1rem",
paddingLeft: "1.5rem",
textAlign: "left",
lineHeight: "1.6"
}
}, /*#__PURE__*/_react.default.createElement("li", null, "View and edit configuration files"), /*#__PURE__*/_react.default.createElement("li", null, "JSON content with syntax highlighting"), /*#__PURE__*/_react.default.createElement("li", null, "Save changes with a single click"), /*#__PURE__*/_react.default.createElement("li", null, "Manage multiple configuration types"))), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "center",
gap: "2rem",
marginTop: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
opacity: 0.7
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "64px",
height: "64px",
padding: "1rem",
backgroundColor: isDarkTheme ? "#252526" : "#f5f5f5",
borderRadius: "8px",
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: "0.5rem"
}
}, /*#__PURE__*/_react.default.createElement("svg", {
width: "32",
height: "32",
viewBox: "0 0 24 24",
fill: "none",
stroke: isDarkTheme ? "#cccccc" : "#666666",
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
}), /*#__PURE__*/_react.default.createElement("polyline", {
points: "14 2 14 8 20 8"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "16",
y1: "13",
x2: "8",
y2: "13"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "16",
y1: "17",
x2: "8",
y2: "17"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "10",
y1: "9",
x2: "8",
y2: "9"
}))), /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "0.85rem"
}
}, "Browse Files")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
opacity: 0.7
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "64px",
height: "64px",
padding: "1rem",
backgroundColor: isDarkTheme ? "#252526" : "#f5f5f5",
borderRadius: "8px",
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: "0.5rem"
}
}, /*#__PURE__*/_react.default.createElement("svg", {
width: "32",
height: "32",
viewBox: "0 0 24 24",
fill: "none",
stroke: isDarkTheme ? "#cccccc" : "#666666",
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("polyline", {
points: "16 18 22 12 16 6"
}), /*#__PURE__*/_react.default.createElement("polyline", {
points: "8 6 2 12 8 18"
}), /*#__PURE__*/_react.default.createElement("line", {
x1: "15",
y1: "12",
x2: "3",
y2: "12"
}))), /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "0.85rem"
}
}, "Edit Code")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
opacity: 0.7
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "64px",
height: "64px",
padding: "1rem",
backgroundColor: isDarkTheme ? "#252526" : "#f5f5f5",
borderRadius: "8px",
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: "0.5rem"
}
}, /*#__PURE__*/_react.default.createElement("svg", {
width: "32",
height: "32",
viewBox: "0 0 24 24",
fill: "none",
stroke: isDarkTheme ? "#cccccc" : "#666666",
strokeWidth: "1.5"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
}), /*#__PURE__*/_react.default.createElement("polyline", {
points: "17 21 17 13 7 13 7 21"
}), /*#__PURE__*/_react.default.createElement("polyline", {
points: "7 3 7 8 15 8"
}))), /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "0.85rem"
}
}, "Save Changes"))))))));
};
var _default = exports.default = KwikIDConfigurator;