@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

package/dist/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx

@@ -1,9 +1,10 @@
 
+import { useMemo, useState } from "react";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import MarkdownViewer from "../../../../../components/common/MarkdownViewer";
-import { Accordion, AccordionTab } from "primereact/accordion";
-import { Button } from "primereact/button";
-import { TabView, TabPanel } from "primereact/tabview";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidIcon } from "../../../../shad-cn-ui";
+import { SolidTabGroup } from "../../../../../components/shad-cn-ui/SolidTabs";
 import ReactCodeMirror, { EditorView, oneDark } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 
@@ -15,130 +16,115 @@ export const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext
     const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
     const value = formik.values[fieldLayoutInfo.attrs.name];
 
-    return (
-        <div className="mt-2 flex-column">
-            {/* <p className="m-0 form-field-label font-medium">{fieldLabel}</p> */}
+    const [activeTab, setActiveTab] = useState("chunks");
 
-            <TabView>
-                {/* -------------------- Tab 1: Metadata & Prompts -------------------- */}
-                <TabPanel header="Chunks">
-                    <div className="solid-layout-accordion">
-                        <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[0]}>
-                            {value?.chunks?.map((c: any) => {
-                                let processedText = c.text || '';
-                                const meta = c.metadata || {};
+    const chunkContent = useMemo(() => {
+        if (!value?.chunks?.length) return null;
+        return (
+            <div className="solid-layout-accordion flex flex-col gap-2">
+                {value.chunks.map((c: any, index: number) => {
+                    let processedText = c.text || '';
+                    const meta = c.metadata || {};
 
-                                // 🧠 Identify type
-                                const isDoc = !!meta.path || meta.source === "docusaurus";
-                                const isModule = meta.type === "module";
-                                const isModel = meta.type === "model";
+                    const isDoc = !!meta.path || meta.source === "docusaurus";
+                    const isModule = meta.type === "module";
+                    const isModel = meta.type === "model";
 
-                                // 🧹 Clean text for docs
-                                if (isDoc) {
-                                    processedText = processedText
-                                        .replace(/^Document Title:\s*/i, "")
-                                        .replace(/^Text:\s*/i, "")
-                                        .trim();
-                                }
+                    if (isDoc) {
+                        processedText = processedText
+                            .replace(/^Document Title:\s*/i, "")
+                            .replace(/^Text:\s*/i, "")
+                            .trim();
+                    }
 
-                                // 🧩 Extract "Full model metadata json" if present
-                                if (isModel) {
-                                    const match = processedText.match(/Full model metadata json:\s*\n?({[\s\S]+})/);
-                                    if (match) {
-                                        try {
-                                            // Format the JSON nicely
-                                            const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);
-                                            // Replace the raw JSON text with a fenced code block
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json:**\n\n\`\`\`json\n${pretty}\n\`\`\``
-                                            );
-                                        } catch {
-                                            // Fallback: wrap raw text if JSON invalid
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json (raw):**\n\n\`\`\`\n${match[1]}\n\`\`\``
-                                            );
-                                        }
-                                    }
-                                }
+                    if (isModel) {
+                        const match = processedText.match(/Full model metadata json:\s*\n?({[\s\S]+})/);
+                        if (match) {
+                            try {
+                                const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);
+                                processedText = processedText.replace(
+                                    match[0],
+                                    `**Full model metadata json:**\n\n\`\`\`json\n${pretty}\n\`\`\``
+                                );
+                            } catch {
+                                processedText = processedText.replace(
+                                    match[0],
+                                    `**Full model metadata json (raw):**\n\n\`\`\`\n${match[1]}\n\`\`\``
+                                );
+                            }
+                        }
+                    }
 
-                                // 🏷️ Header label
-                                let headerTitle = "Unknown";
-                                if (isModule) {
-                                    headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;
-                                } else if (isModel) {
-                                    headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;
-                                } else if (isDoc) {
-                                    headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;
-                                }
+                    let headerTitle = "Unknown";
+                    if (isModule) {
+                        headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;
+                    } else if (isModel) {
+                        headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;
+                    } else if (isDoc) {
+                        headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;
+                    }
 
-                                // 🌐 External link (docs only)
-                                const openDoc = (e: any) => {
-                                    e.stopPropagation();
-                                    if (isDoc) {
-                                        const cleanPath = (meta.path || "").replace(/\.md$/, "");
-                                        const url = `https://docs.solidxai.com/docs/${cleanPath}`;
-                                        window.open(url, "_blank");
-                                    }
-                                };
+                    const openDoc = (e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (isDoc) {
+                            const cleanPath = (meta.path || "").replace(/\.md$/, "");
+                            const url = `https://docs.solidxai.com/docs/${cleanPath}`;
+                            window.open(url, "_blank");
+                        }
+                    };
 
-                                return (
-                                    <AccordionTab
-                                        key={c.id}
-                                        header={
-                                            <div className="flex justify-between items-center w-full">
-                                                <span className="font-medium">{headerTitle}</span>
-                                                {isDoc && (
-                                                    <Button
-                                                        icon="pi pi-external-link"
-                                                        rounded
-                                                        text
-                                                        outlined
-                                                        style={{ height: "1.5rem" }}
-                                                        onClick={openDoc}
-                                                    />
-                                                )}
-                                            </div>
-                                        }
-                                    >
-                                        <div key={c.id} className="shadow-1 bg-bluegray-50 p-3">
-                                            <MarkdownViewer data={processedText} />
-                                        </div>
-                                    </AccordionTab>
-                                );
-                            })}
-                        </Accordion>
-                    </div>
-                </TabPanel>
-                <TabPanel header="System Prompt">
-                    {value?.system_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.system_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="User Prompt">
-                    {value?.user_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.user_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="Token Usage">
-                    {value?.tokenUsage && (
-                        <div className={`p-3 `} style={{ width: '100%' }}>
-                            <ReactCodeMirror
-                                value={JSON.stringify(value.tokenUsage, null, 2)}
-                                style={{ fontSize: '10px' }}
-                                theme={oneDark}
-                                extensions={[javascript(), EditorView.lineWrapping]}
-                            />
-                        </div>
-                    )}
-                </TabPanel>
-            </TabView>
+                    return (
+                        <details key={c.id ?? index} className="solid-accordion-item rounded-md border border-border bg-card" open={index === 0}>
+                            <summary className="solid-accordion-header flex justify-between items-center gap-2 p-3 cursor-pointer">
+                                <span className="font-medium">{headerTitle}</span>
+                                {isDoc && (
+                                    <SolidButton variant="ghost" size="sm" onClick={openDoc} aria-label="Open documentation">
+                                        <SolidIcon name="si-external-link" aria-hidden />
+                                    </SolidButton>
+                                )}
+                            </summary>
+                            <div className="solid-accordion-content p-3 pt-0">
+                                <MarkdownViewer data={processedText} />
+                            </div>
+                        </details>
+                    );
+                })}
+            </div>
+        );
+    }, [value?.chunks]);
+
+    const tabs = [
+        { value: "chunks", label: "Chunks", content: chunkContent },
+        {
+            value: "system",
+            label: "System Prompt",
+            content: value?.system_prompt ? <MarkdownViewer data={value.system_prompt} /> : null,
+        },
+        {
+            value: "user",
+            label: "User Prompt",
+            content: value?.user_prompt ? <MarkdownViewer data={value.user_prompt} /> : null,
+        },
+        {
+            value: "usage",
+            label: "Token Usage",
+            content: value?.tokenUsage ? (
+                <div className="p-3 w-full">
+                    <ReactCodeMirror
+                        value={JSON.stringify(value.tokenUsage, null, 2)}
+                        style={{ fontSize: '10px' }}
+                        theme={oneDark}
+                        extensions={[javascript(), EditorView.lineWrapping]}
+                    />
+                </div>
+            ) : null,
+        },
+    ];
+
+    return (
+        <div className="mt-2 flex-column">
+            <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} />
         </div>
     );
 }
-

package/dist/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const SolidChatterMessageCoModelEntityIdFormViewWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidChatterMessageCoModelEntityIdFormViewWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidChatterMessageCoModelEntityIdFormViewWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,eAAO,MAAM,gDAAgD,6BAA8B,yBAAyB,4CA6DnH,CAAC"}

package/dist/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.js

@@ -0,0 +1,92 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { solidGet } from "../../../../../http/solidHttp";
+import { snakeCase } from "lodash";
+export var SolidChatterMessageCoModelEntityIdFormViewWidget = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var fieldName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.name;
+    var _h = useState('#'), redirectUrl = _h[0], setRedirectUrl = _h[1];
+    var value = (_d = formik.values) === null || _d === void 0 ? void 0 : _d[fieldName];
+    var coModelName = (_e = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.data) === null || _e === void 0 ? void 0 : _e.coModelName;
+    var modelDisplayName = (_f = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.data) === null || _f === void 0 ? void 0 : _f.modelDisplayName;
+    var modelUserKey = (_g = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.data) === null || _g === void 0 ? void 0 : _g.modelUserKey;
+    useEffect(function () {
+        if (coModelName) {
+            var fetchModel = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var qs, res, model, module_1, moduleName, modelSingularName, modelSlug, redirectUrl_1;
+                var _a, _b, _c, _d, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            qs = "offset=0&limit=25&filters[$and][0][$or][0][singularName][$eq]=".concat(coModelName, "&populate[0]=module&locale=en&sort[0]=id%3Adesc");
+                            return [4 /*yield*/, solidGet("/model-metadata?".concat(qs))];
+                        case 1:
+                            res = _f.sent();
+                            if (((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                                model = (_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.records[0];
+                                module_1 = model === null || model === void 0 ? void 0 : model.module;
+                                moduleName = module_1 === null || module_1 === void 0 ? void 0 : module_1.name;
+                                modelSingularName = model === null || model === void 0 ? void 0 : model.singularName;
+                                modelSlug = snakeCase(model === null || model === void 0 ? void 0 : model.singularName).replace(/_/g, '-');
+                                redirectUrl_1 = "/admin/core/".concat(moduleName, "/").concat(modelSlug, "/form/").concat(value);
+                                setRedirectUrl(redirectUrl_1);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchModel();
+        }
+    }, [coModelName]);
+    return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), _jsx("div", { className: "mt-2", children: value ? (_jsxs("a", { href: redirectUrl, target: "_blank", rel: "noopener noreferrer", style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '6px',
+                        textDecoration: 'none',
+                        fontSize: '12px',
+                        color: '#2563eb',
+                        fontWeight: 500
+                    }, children: [_jsxs("span", { children: [value, " (", modelUserKey || modelDisplayName || coModelName, ")"] }), _jsx(ExternalLink, { size: 16 })] })) : (_jsx("span", { className: "text-muted", children: "\u2014" })) })] }));
+};
+//# sourceMappingURL=SolidChatterMessageCoModelEntityIdFormViewWidget.js.map

package/dist/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidChatterMessageCoModelEntityIdFormViewWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { ExternalLink } from \"lucide-react\";\nimport { solidGet } from \"../../../../../http/solidHttp\";\nimport { snakeCase } from \"lodash\";\n\nexport const SolidChatterMessageCoModelEntityIdFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const [redirectUrl, setRedirectUrl] = useState<string>('#');\n    const value = formik.values?.[fieldName];\n\n    const coModelName = fieldContext?.data?.coModelName;\n    const modelDisplayName = fieldContext?.data?.modelDisplayName;\n    const modelUserKey = fieldContext?.data?.modelUserKey;\n\n    useEffect(() => {\n        if (coModelName) {\n            const fetchModel = async () => {\n                const qs = `offset=0&limit=25&filters[$and][0][$or][0][singularName][$eq]=${coModelName}&populate[0]=module&locale=en&sort[0]=id%3Adesc`;\n                const res = await solidGet(`/model-metadata?${qs}`);\n                if (res?.data?.data?.records?.length > 0) {\n                    const model = res?.data?.data?.records[0];\n                    const module = model?.module;\n                    const moduleName = module?.name;\n                    const modelSingularName = model?.singularName;\n                    const modelSlug = snakeCase(model?.singularName).replace(/_/g, '-');\n                    const redirectUrl = `/admin/core/${moduleName}/${modelSlug}/form/${value}`;\n                    setRedirectUrl(redirectUrl);\n                }\n            }\n            fetchModel();\n        }\n    }, [coModelName]);\n\n    return (\n        <div>\n            <label className=\"form-field-label\">{fieldLabel}</label>\n            <div className=\"mt-2\">\n                {value ? (\n                    <a\n                        href={redirectUrl}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        style={{\n                            display: 'inline-flex',\n                            alignItems: 'center',\n                            gap: '6px',\n                            textDecoration: 'none',\n                            fontSize: '12px',\n                            color: '#2563eb',\n                            fontWeight: 500\n                        }}\n                    >\n                        <span>{value} ({modelUserKey || modelDisplayName || coModelName})</span>\n                        <ExternalLink size={16} />\n                    </a>\n                ) : (\n                    <span className=\"text-muted\">—</span>\n                )}\n            </div>\n        </div>\n    );\n};"]}

package/dist/components/core/form/fields/widgets/SolidChatterMessageCoModelEntityIdFormViewWidget.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+import { ExternalLink } from "lucide-react";
+import { solidGet } from "../../../../../http/solidHttp";
+import { snakeCase } from "lodash";
+
+export const SolidChatterMessageCoModelEntityIdFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldName = fieldLayoutInfo?.attrs?.name;
+
+    const [redirectUrl, setRedirectUrl] = useState<string>('#');
+    const value = formik.values?.[fieldName];
+
+    const coModelName = fieldContext?.data?.coModelName;
+    const modelDisplayName = fieldContext?.data?.modelDisplayName;
+    const modelUserKey = fieldContext?.data?.modelUserKey;
+
+    useEffect(() => {
+        if (coModelName) {
+            const fetchModel = async () => {
+                const qs = `offset=0&limit=25&filters[$and][0][$or][0][singularName][$eq]=${coModelName}&populate[0]=module&locale=en&sort[0]=id%3Adesc`;
+                const res = await solidGet(`/model-metadata?${qs}`);
+                if (res?.data?.data?.records?.length > 0) {
+                    const model = res?.data?.data?.records[0];
+                    const module = model?.module;
+                    const moduleName = module?.name;
+                    const modelSingularName = model?.singularName;
+                    const modelSlug = snakeCase(model?.singularName).replace(/_/g, '-');
+                    const redirectUrl = `/admin/core/${moduleName}/${modelSlug}/form/${value}`;
+                    setRedirectUrl(redirectUrl);
+                }
+            }
+            fetchModel();
+        }
+    }, [coModelName]);
+
+    return (
+        <div>
+            <label className="form-field-label">{fieldLabel}</label>
+            <div className="mt-2">
+                {value ? (
+                    <a
+                        href={redirectUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            textDecoration: 'none',
+                            fontSize: '12px',
+                            color: '#2563eb',
+                            fontWeight: 500
+                        }}
+                    >
+                        <span>{value} ({modelUserKey || modelDisplayName || coModelName})</span>
+                        <ExternalLink size={16} />
+                    </a>
+                ) : (
+                    <span className="text-muted">—</span>
+                )}
+            </div>
+        </div>
+    );
+};

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIconEditWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAO5E,eAAO,MAAM,mBAAmB,6BAA8B,yBAAyB,4CA+PtF,CAAC"}
+{"version":3,"file":"SolidIconEditWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAa5E,eAAO,MAAM,mBAAmB,6BAA8B,yBAAyB,4CA6PtF,CAAC"}

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.js

@@ -9,14 +9,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { solidIcons } from "../../../../../helpers/solidIcons";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { InputText } from "primereact/inputtext";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogFooter, SolidDialogHeader, SolidDialogTitle, } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidInput } from "../../../../shad-cn-ui/SolidInput";
 import { useEffect, useState } from "react";
 export var SolidIconEditWidget = function (_a) {
     var _b, _c, _d;
     var formik = _a.formik, fieldContext = _a.fieldContext;
-    console.log("SolidIconWidget", "formik : ", formik, "fieldContext : ", fieldContext);
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
@@ -61,6 +60,12 @@ export var SolidIconEditWidget = function (_a) {
         formik.setFieldValue(fieldName, "", true);
         // formik.setFieldValue("iconVariant", null);
     };
+    var formatIconLabel = function (icon) {
+        return icon
+            .split('_')
+            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+            .join(' ');
+    };
     return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), _jsxs("div", { className: "flex align-items-end gap-3 mt-2", children: [_jsx("div", { style: { display: 'inline-block' }, children: selectedIcon ? (
                         // <Button
                         //     type="button"
@@ -68,36 +73,21 @@ export var SolidIconEditWidget = function (_a) {
                         //     onClick={() => setOpenIconDialog(true)}
                         //     outlined
                         // />
-                        _jsxs("div", { children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, onClick: function () { return setOpenIconDialog(true); }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: selectedIcon
-                                        .split('_')
-                                        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                        .join(' ') })] })) : (_jsx(Button, { type: "button", size: "small", label: "Select Icon", onClick: function () { return setOpenIconDialog(true); }, outlined: true })) }), selectedIcon && (_jsx("div", { children: _jsx(Button, { type: "button", label: "Remove", className: "p-button-text p-button-danger ml-2", onClick: function () {
-                                setSelectedIcon("");
-                                formik.setFieldValue(fieldName, "");
-                            } }) }))] }), _jsx(Dialog, { contentClassName: "p-0", className: "solid-icon-dialog", contentStyle: { borderRadius: 6 }, showHeader: false, header: false, closable: false, visible: openIconDialog, style: { width: '70vw', height: '70vh' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { return setOpenIconDialog(false); }, children: _jsx("div", { children: _jsxs("div", { className: "grid m-0 flex-column md:flex-row ", children: [_jsx("div", { className: "col-12 lg:col-3 p-0", children: _jsxs("div", { className: "flex flex-column justify-content-between p-3 lg:p-4", style: { height: '100%' }, children: [_jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(Button, { type: 'button', size: "small", onClick: function () {
+                        _jsxs("div", { children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, onClick: function () { return setOpenIconDialog(true); }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: formatIconLabel(selectedIcon) })] })) : (_jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(true); }, children: "Select Icon" })) }), selectedIcon && (_jsx("div", { children: _jsx(SolidButton, { type: "button", variant: "ghost", className: "ml-2", onClick: handleRemoveIcon, children: "Remove" }) }))] }), _jsxs(SolidDialog, { open: openIconDialog, onOpenChange: setOpenIconDialog, className: "solid-icon-dialog p-0", style: { width: '70vw', height: '70vh', borderRadius: 6 }, showHeader: false, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Select Icon" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "p-0", children: _jsxs("div", { className: "grid m-0 flex-column md:flex-row ", children: [_jsx("div", { className: "col-12 lg:col-3 p-0", children: _jsx("div", { className: "flex flex-column justify-content-between p-3 lg:p-4", style: { height: '100%' }, children: _jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(SolidButton, { type: 'button', size: "sm", onClick: function () {
                                                             setSelectedCategory(tab);
                                                             setSearchIcon("");
-                                                        }, outlined: selectedCategory === tab ? false : true, style: {
+                                                        }, variant: selectedCategory === tab ? "primary" : "outline", style: {
                                                             padding: "8px 16px",
                                                             fontSize: 12
-                                                        }, className: "solid-icon-category", severity: "secondary", children: tab }, tab)); }) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", size: "small", label: "Select", onClick: function () { return setOpenIconDialog(false); } }), _jsx(Button, { type: "button", size: "small", outlined: true, label: "Cancel", onClick: function () { return setOpenIconDialog(false); } })] })] }) }), _jsx("div", { className: "col-6 p-0 flex lg:hidden", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: selectedIcon
-                                                        .split('_')
-                                                        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                                        .join(' ') })] }))] }) }), _jsxs("div", { className: "col-12 lg:col-6 p-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-3 lg:px-4 pt-3 lg:pt-4", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(InputText, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-4 pb-3 mt-4", children: _jsx("div", { className: "grid", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
-                                                var icon = _a.icon, category = _a.category;
-                                                return (_jsx("div", { className: "col-3", children: _jsxs("div", { className: "w-full flex flex-column align-items-center justify-content-center gap-3", children: [_jsx("span", { className: "material-symbols-outlined", style: {
-                                                                    fontSize: 32,
-                                                                    cursor: "pointer",
-                                                                    padding: "8px",
-                                                                    border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
-                                                                    borderRadius: "6px",
-                                                                }, onClick: function () { return handleSelectIcon(icon); }, title: "".concat(icon, " (").concat(category, ")"), children: icon }), _jsx("p", { className: 'mb-0 mt-1 text-center', children: icon
-                                                                    .split('_')
-                                                                    .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                                                    .join(' ') })] }) }, icon));
-                                            })) : (_jsx("p", { className: "mt", children: "No icons found." })) }) })] }), _jsx("div", { className: "col-3 p-0 hidden lg:flex", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: selectedIcon
-                                                        .split('_')
-                                                        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                                        .join(' ') })] }))] }) })] }) }) })] }));
+                                                        }, className: "solid-icon-category", children: tab }, tab)); }) })] }) }) }), _jsx("div", { className: "col-6 p-0 flex lg:hidden", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) }), _jsxs("div", { className: "col-12 lg:col-6 p-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-3 lg:px-4 pt-3 lg:pt-4", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(SolidInput, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-4 pb-3 mt-4", children: _jsx("div", { className: "grid", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
+                                                    var icon = _a.icon, category = _a.category;
+                                                    return (_jsx("div", { className: "col-3", children: _jsxs("div", { className: "w-full flex flex-column align-items-center justify-content-center gap-3", children: [_jsx("span", { className: "material-symbols-outlined", style: {
+                                                                        fontSize: 32,
+                                                                        cursor: "pointer",
+                                                                        padding: "8px",
+                                                                        border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
+                                                                        borderRadius: "6px",
+                                                                    }, onClick: function () { return handleSelectIcon(icon); }, title: "".concat(icon, " (").concat(category, ")"), children: icon }), _jsx("p", { className: 'mb-0 mt-1 text-center', children: formatIconLabel(icon) })] }) }, icon));
+                                                })) : (_jsx("p", { className: "mt", children: "No icons found." })) }) })] }), _jsx("div", { className: "col-3 p-0 hidden lg:flex", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: formatIconLabel(selectedIcon) })] }))] }) })] }) }), _jsxs(SolidDialogFooter, { className: "gap-3", children: [_jsx(SolidButton, { type: "button", size: "sm", onClick: function () { return setOpenIconDialog(false); }, children: "Select" }), _jsx(SolidButton, { type: "button", size: "sm", variant: "outline", onClick: function () { return setOpenIconDialog(false); }, children: "Cancel" })] })] })] }));
 };
 //# sourceMappingURL=SolidIconEditWidget.js.map