@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.3

package/dist/components/core/kanban/KanbanColumn.js

@@ -10,25 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import { Droppable } from "@hello-pangea/dnd";
-import { Button } from "primereact/button";
 import KanbanCard from "./KanbanCard";
-import { OverlayPanel } from "primereact/overlaypanel";
+import { SolidButton, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuTrigger, SolidIcon, } from "../../shad-cn-ui";
 // @ts-ignore
 var KanbanColumn = function (_a) {
-    var groupedView = _a.groupedView, groupByField = _a.groupByField, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, group = _a.group, groupData = _a.groupData, toggleFold = _a.toggleFold, handleLoadMore = _a.handleLoadMore, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl;
-    var op = useRef(null);
-    return (_jsxs("div", { className: group.folded ? (groupedView === false ? "kanban-column kanban-ungrouped-column kanban-column-folded" : "kanban-column kanban-column-folded") : (groupedView === false ? "kanban-column kanban-ungrouped-column" : "kanban-column"), children: [groupedView !== false &&
-                _jsxs("div", { className: "kaban-heading-area", children: [group.folded &&
-                            _jsx("a", { onClick: function (e) { return toggleFold(groupByField); }, children: _jsxs("div", { className: "flex align-items-center", children: [_jsxs("div", { className: "kanban-arrow-icon-container", children: [_jsx("i", { className: "pi pi-sort-up-fill" }), _jsx("i", { className: "pi pi-sort-down-fill" })] }), _jsxs("p", { className: "kanban-group-heading", children: ["".concat(group.label), _jsx("span", { className: "kanban-count-badge", children: group.count })] })] }) }), !group.folded &&
-                            _jsx("div", { className: "flex align-items-center", children: _jsxs("p", { className: "kanban-group-heading", children: ["".concat(group.label), _jsx("span", { className: "kanban-count-badge", children: group.count })] }) }), !group.folded &&
-                            _jsx(Button, { onClick: function (e) { var _a; return (_a = op === null || op === void 0 ? void 0 : op.current) === null || _a === void 0 ? void 0 : _a.toggle(e); }, icon: 'pi pi-cog', text: true, className: "p-0 kanban-column-cogwheel", rounded: true, severity: "secondary" }), _jsx(OverlayPanel, { ref: op, className: "kanban-options-panel", children: _jsx("div", { className: "w-full md:w-10rem p-menu p-component", "data-pc-name": "menu", "data-pc-section": "root", children: _jsx("ul", { className: "p-menu-list p-reset", id: "pr_id_11_list", role: "menu", "data-pc-section": "menu", children: _jsx("li", { className: "p-menuitem", role: "menuitem", "data-pc-section": "menuitem", "data-p-focused": "false", "data-p-disabled": "false", children: _jsxs("button", { className: "p-menuitem-link w-full p-link flex align-items-center md:pl-2 text-color hover:surface-200 border-noround", children: [_jsx("div", { className: "mr-2 p-avatar p-component p-avatar-image p-avatar-circle hidden md:flex", "data-pc-name": "avatar", "data-pc-section": "root" }), _jsx("div", { className: "flex flex-column align px-4 md:px-0 ", children: _jsx("a", { className: "flex align-items-center p-menuitem-link", onClick: function (e) { var _a; toggleFold(groupByField); (_a = op === null || op === void 0 ? void 0 : op.current) === null || _a === void 0 ? void 0 : _a.toggle(e); }, children: _jsx("span", { className: "", children: "Fold" }) }) })] }) }) }) }) })] }), !group.folded && (_jsx(Droppable, { droppableId: groupByField, isDropDisabled: !groupedView, children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.droppableProps, { style: { minHeight: "100px" }, 
-                    // @ts-ignore
-                    className: groupedView === false && "kanban-ungrouped-column-content", children: [groupData.map(function (data, index) { return (
+    var groupByField = _a.groupByField, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, group = _a.group, groupData = _a.groupData, cardNode = _a.cardNode, DynamicCardWidget = _a.DynamicCardWidget, toggleFold = _a.toggleFold, handleLoadMore = _a.handleLoadMore, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl;
+    return (_jsxs("div", { className: group.folded ? "kanban-column kanban-column-folded" : "kanban-column", children: [_jsxs("div", { className: "kaban-heading-area", children: [group.folded &&
+                        _jsx("a", { onClick: function (e) { return toggleFold(groupByField); }, children: _jsxs("div", { className: "flex align-items-center", children: [_jsxs("div", { className: "kanban-arrow-icon-container", children: [_jsx(SolidIcon, { name: "si-sort-up-fill", "aria-hidden": true }), _jsx(SolidIcon, { name: "si-sort-down-fill", "aria-hidden": true })] }), _jsxs("p", { className: "kanban-group-heading", children: ["".concat(group.label), _jsx("span", { className: "kanban-count-badge", children: group.count })] })] }) }), !group.folded &&
+                        _jsx("div", { className: "flex align-items-center", children: _jsxs("p", { className: "kanban-group-heading", children: ["".concat(group.label), _jsx("span", { className: "kanban-count-badge", children: group.count })] }) }), !group.folded &&
+                        _jsxs(SolidDropdownMenu, { children: [_jsx(SolidDropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "solid-header-cog-trigger kanban-column-cogwheel", "aria-label": "Open ".concat(group.label, " lane options"), children: _jsx(SolidIcon, { name: "si-cog", "aria-hidden": true }) }) }), _jsx(SolidDropdownMenuContent, { className: "solid-custom-overlay kanban-options-panel", align: "start", children: _jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item kanban-fold-action-button", onSelect: function () { return toggleFold(groupByField); }, children: [_jsx(SolidIcon, { name: "si-angle-double-left", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Fold" })] }) })] })] }), !group.folded && (_jsx(Droppable, { droppableId: groupByField, children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.droppableProps, { style: { minHeight: "100px" }, children: [groupData.map(function (data, index) { return (
                         // @ts-ignore
-                        _jsx(KanbanCard, { groupedView: groupedView, data: data, solidKanbanViewMetaData: solidKanbanViewMetaData, index: index, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editButtonUrl }, data.id)); }), provided.placeholder, group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
-                            _jsx(Button, { text: true, className: "kaban-load-more", size: "small", onClick: function () { return handleLoadMore(groupByField); }, label: "Load more data... ( ".concat(group.count - (group.limit * group.currentPage), " remaining)") })] }))); } }))] }));
+                        _jsx(KanbanCard, { data: data, solidKanbanViewMetaData: solidKanbanViewMetaData, index: index, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editButtonUrl, groupByFieldName: groupByField, group: group, cardNode: cardNode, DynamicCardWidget: DynamicCardWidget }, data.id)); }), provided.placeholder, group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
+                            _jsx(SolidButton, { type: "button", variant: "ghost", size: "sm", className: "kaban-load-more", onClick: function () { return handleLoadMore(groupByField); }, children: "Load more data... (".concat(group.count - (group.limit * group.currentPage), " remaining)") })] }))); } }))] }));
 };
 export default KanbanColumn;
 //# sourceMappingURL=KanbanColumn.js.map

package/dist/components/core/kanban/KanbanColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumn.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from \"react\";\nimport { Droppable, DroppableProvided } from \"@hello-pangea/dnd\";\nimport { Button } from \"primereact/button\";\nimport KanbanCard from \"./KanbanCard\";\nimport { OverlayPanel } from \"primereact/overlaypanel\";\n\n// Define types for props\ninterface Group {\n  label: string;\n  count: number;\n  folded: boolean;\n  limit: number;\n  currentPage: number;\n}\n\ninterface GroupData {\n  id: string;\n  title: string;\n  groupByField: string;\n}\n\ninterface KanbanColumnProps {\n  groupedView: boolean;\n  groupByField: string;\n  group: Group;\n  groupData: GroupData[];\n  toggleFold: (groupByField: string) => void;\n  handleLoadMore: (groupByField: string) => void;\n  setLightboxUrls: any,\n  setOpenLightbox: any\n}\n\n// @ts-ignore\nconst KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, group, groupData, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox, editButtonUrl }: KanbanColumnProps) => {\n  const op = useRef<any>(null);\n\n\n  return (\n    <div className={group.folded ? (groupedView === false ? \"kanban-column kanban-ungrouped-column kanban-column-folded\" : \"kanban-column kanban-column-folded\") : (groupedView === false ? \"kanban-column kanban-ungrouped-column\" : \"kanban-column\")}>\n      {groupedView !== false &&\n        <div className=\"kaban-heading-area\">\n          {group.folded &&\n            <a onClick={e => toggleFold(groupByField)}>\n              <div className=\"flex align-items-center\">\n                <div className=\"kanban-arrow-icon-container\">\n                  <i className=\"pi pi-sort-up-fill\"></i>\n                  <i className=\"pi pi-sort-down-fill\"></i>\n                </div>\n                <p className=\"kanban-group-heading\">{`${group.label}`}<span className=\"kanban-count-badge\">{group.count}</span></p>\n              </div>\n            </a>\n          }\n\n          {!group.folded &&\n            <div className=\"flex align-items-center\">\n              <p className=\"kanban-group-heading\">{`${group.label}`}<span className=\"kanban-count-badge\">{group.count}</span></p>\n            </div>\n          }\n          {!group.folded &&\n            <Button\n              onClick={(e: any) => op?.current?.toggle(e)}\n              icon='pi pi-cog'\n              text\n              className=\"p-0 kanban-column-cogwheel\"\n              rounded\n              severity=\"secondary\"\n            />\n          }\n          <OverlayPanel ref={op} className=\"kanban-options-panel\">\n\n            <div\n              className=\"w-full md:w-10rem p-menu p-component\"\n              data-pc-name=\"menu\"\n              data-pc-section=\"root\"\n            >\n              <ul\n                className=\"p-menu-list p-reset\"\n                id=\"pr_id_11_list\"\n                role=\"menu\"\n                data-pc-section=\"menu\"\n              >\n                <li\n                  className=\"p-menuitem\"\n                  role=\"menuitem\"\n                  data-pc-section=\"menuitem\"\n                  data-p-focused=\"false\"\n                  data-p-disabled=\"false\"\n                >\n                  <button className=\"p-menuitem-link w-full p-link flex align-items-center md:pl-2 text-color hover:surface-200 border-noround\">\n                    <div\n                      className=\"mr-2 p-avatar p-component p-avatar-image p-avatar-circle hidden md:flex\"\n                      data-pc-name=\"avatar\"\n                      data-pc-section=\"root\"\n                    >\n                    </div>\n                    <div className=\"flex flex-column align px-4 md:px-0 \">\n\n                      <a className=\"flex align-items-center p-menuitem-link\" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>\n                        <span className=\"\">Fold</span>\n                      </a>\n                    </div>\n                  </button>\n                </li>\n              </ul>\n            </div>\n          </OverlayPanel>\n        </div>\n      }\n      {!group.folded && (\n        <Droppable droppableId={groupByField} isDropDisabled={!groupedView}>\n          {(provided: DroppableProvided) => (\n            <div\n              ref={provided.innerRef}\n              {...provided.droppableProps}\n              style={{ minHeight: \"100px\" }}\n              // @ts-ignore\n              className={groupedView === false && \"kanban-ungrouped-column-content\"}\n            >\n              {groupData.map((data, index) => (\n                // @ts-ignore\n                <KanbanCard groupedView={groupedView} key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} />\n              ))}\n              {provided.placeholder}\n              {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&\n                <Button text className=\"kaban-load-more\" size=\"small\"\n                  onClick={() => handleLoadMore(groupByField)}\n                  label={`Load more data... ( ${group.count - (group.limit * group.currentPage)} remaining)`}\n                />\n              }\n            </div>\n          )}\n        </Droppable>\n      )}\n    </div>\n  );\n};\n\nexport default KanbanColumn;\n"]}
+{"version":3,"file":"KanbanColumn.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Droppable, DroppableProvided } from \"@hello-pangea/dnd\";\nimport KanbanCard from \"./KanbanCard\";\nimport {\n  SolidButton,\n  SolidDropdownMenu,\n  SolidDropdownMenuContent,\n  SolidDropdownMenuItem,\n  SolidDropdownMenuTrigger,\n  SolidIcon,\n} from \"../../shad-cn-ui\";\n\n// Define types for props\ninterface Group {\n  label: string;\n  count: number;\n  folded: boolean;\n  limit: number;\n  currentPage: number;\n}\n\ninterface GroupData {\n  id: string;\n  title: string;\n  groupByField: string;\n}\n\ninterface KanbanColumnProps {\n  groupByField: string;\n  group: Group;\n  groupData: GroupData[];\n  cardNode?: any;\n  DynamicCardWidget?: any;\n  toggleFold: (groupByField: string) => void;\n  handleLoadMore: (groupByField: string) => void;\n  setLightboxUrls: any,\n  setOpenLightbox: any\n}\n\n// @ts-ignore\nconst KanbanColumn = ({ groupByField, solidKanbanViewMetaData, group, groupData, cardNode, DynamicCardWidget, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox, editButtonUrl }: KanbanColumnProps) => {\n  return (\n    <div className={group.folded ? \"kanban-column kanban-column-folded\" : \"kanban-column\"}>\n      <div className=\"kaban-heading-area\">\n        {group.folded &&\n          <a onClick={e => toggleFold(groupByField)}>\n            <div className=\"flex align-items-center\">\n              <div className=\"kanban-arrow-icon-container\">\n                <SolidIcon name=\"si-sort-up-fill\" aria-hidden />\n                <SolidIcon name=\"si-sort-down-fill\" aria-hidden />\n              </div>\n              <p className=\"kanban-group-heading\">{`${group.label}`}<span className=\"kanban-count-badge\">{group.count}</span></p>\n            </div>\n          </a>\n        }\n\n        {!group.folded &&\n          <div className=\"flex align-items-center\">\n            <p className=\"kanban-group-heading\">{`${group.label}`}<span className=\"kanban-count-badge\">{group.count}</span></p>\n          </div>\n        }\n        {!group.folded &&\n          <SolidDropdownMenu>\n            <SolidDropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className=\"solid-header-cog-trigger kanban-column-cogwheel\"\n                aria-label={`Open ${group.label} lane options`}\n              >\n                <SolidIcon name=\"si-cog\" aria-hidden />\n              </button>\n            </SolidDropdownMenuTrigger>\n            <SolidDropdownMenuContent className=\"solid-custom-overlay kanban-options-panel\" align=\"start\">\n              <SolidDropdownMenuItem\n                className=\"solid-header-dropdown-item kanban-fold-action-button\"\n                onSelect={() => toggleFold(groupByField)}\n              >\n                <SolidIcon name=\"si-angle-double-left\" className=\"solid-header-action-button-icon\" aria-hidden />\n                <span className=\"solid-header-action-button-label\">Fold</span>\n              </SolidDropdownMenuItem>\n            </SolidDropdownMenuContent>\n          </SolidDropdownMenu>\n        }\n      </div>\n      {!group.folded && (\n        <Droppable droppableId={groupByField}>\n          {(provided: DroppableProvided) => (\n            <div\n              ref={provided.innerRef}\n              {...provided.droppableProps}\n              style={{ minHeight: \"100px\" }}\n            >\n              {groupData.map((data, index) => (\n                // @ts-ignore\n                <KanbanCard key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} groupByFieldName={groupByField} group={group} cardNode={cardNode} DynamicCardWidget={DynamicCardWidget} />\n              ))}\n              {provided.placeholder}\n              {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&\n                <SolidButton\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"kaban-load-more\"\n                  onClick={() => handleLoadMore(groupByField)}\n                >\n                  {`Load more data... (${group.count - (group.limit * group.currentPage)} remaining)`}\n                </SolidButton>\n              }\n            </div>\n          )}\n        </Droppable>\n      )}\n    </div>\n  );\n};\n\nexport default KanbanColumn;\n"]}

package/dist/components/core/kanban/KanbanColumn.tsx

@@ -1,8 +1,14 @@
-import React, { useRef } from "react";
+import React from "react";
 import { Droppable, DroppableProvided } from "@hello-pangea/dnd";
-import { Button } from "primereact/button";
 import KanbanCard from "./KanbanCard";
-import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  SolidButton,
+  SolidDropdownMenu,
+  SolidDropdownMenuContent,
+  SolidDropdownMenuItem,
+  SolidDropdownMenuTrigger,
+  SolidIcon,
+} from "../../shad-cn-ui";
 
 // Define types for props
 interface Group {
@@ -20,10 +26,11 @@ interface GroupData {
 }
 
 interface KanbanColumnProps {
-  groupedView: boolean;
   groupByField: string;
   group: Group;
   groupData: GroupData[];
+  cardNode?: any;
+  DynamicCardWidget?: any;
   toggleFold: (groupByField: string) => void;
   handleLoadMore: (groupByField: string) => void;
   setLightboxUrls: any,
@@ -31,101 +38,73 @@ interface KanbanColumnProps {
 }
 
 // @ts-ignore
-const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, group, groupData, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox, editButtonUrl }: KanbanColumnProps) => {
-  const op = useRef<any>(null);
-
-
+const KanbanColumn = ({ groupByField, solidKanbanViewMetaData, group, groupData, cardNode, DynamicCardWidget, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox, editButtonUrl }: KanbanColumnProps) => {
   return (
-    <div className={group.folded ? (groupedView === false ? "kanban-column kanban-ungrouped-column kanban-column-folded" : "kanban-column kanban-column-folded") : (groupedView === false ? "kanban-column kanban-ungrouped-column" : "kanban-column")}>
-      {groupedView !== false &&
-        <div className="kaban-heading-area">
-          {group.folded &&
-            <a onClick={e => toggleFold(groupByField)}>
-              <div className="flex align-items-center">
-                <div className="kanban-arrow-icon-container">
-                  <i className="pi pi-sort-up-fill"></i>
-                  <i className="pi pi-sort-down-fill"></i>
-                </div>
-                <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
-              </div>
-            </a>
-          }
-
-          {!group.folded &&
+    <div className={group.folded ? "kanban-column kanban-column-folded" : "kanban-column"}>
+      <div className="kaban-heading-area">
+        {group.folded &&
+          <a onClick={e => toggleFold(groupByField)}>
             <div className="flex align-items-center">
+              <div className="kanban-arrow-icon-container">
+                <SolidIcon name="si-sort-up-fill" aria-hidden />
+                <SolidIcon name="si-sort-down-fill" aria-hidden />
+              </div>
               <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
             </div>
-          }
-          {!group.folded &&
-            <Button
-              onClick={(e: any) => op?.current?.toggle(e)}
-              icon='pi pi-cog'
-              text
-              className="p-0 kanban-column-cogwheel"
-              rounded
-              severity="secondary"
-            />
-          }
-          <OverlayPanel ref={op} className="kanban-options-panel">
+          </a>
+        }
 
-            <div
-              className="w-full md:w-10rem p-menu p-component"
-              data-pc-name="menu"
-              data-pc-section="root"
-            >
-              <ul
-                className="p-menu-list p-reset"
-                id="pr_id_11_list"
-                role="menu"
-                data-pc-section="menu"
+        {!group.folded &&
+          <div className="flex align-items-center">
+            <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
+          </div>
+        }
+        {!group.folded &&
+          <SolidDropdownMenu>
+            <SolidDropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="solid-header-cog-trigger kanban-column-cogwheel"
+                aria-label={`Open ${group.label} lane options`}
               >
-                <li
-                  className="p-menuitem"
-                  role="menuitem"
-                  data-pc-section="menuitem"
-                  data-p-focused="false"
-                  data-p-disabled="false"
-                >
-                  <button className="p-menuitem-link w-full p-link flex align-items-center md:pl-2 text-color hover:surface-200 border-noround">
-                    <div
-                      className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle hidden md:flex"
-                      data-pc-name="avatar"
-                      data-pc-section="root"
-                    >
-                    </div>
-                    <div className="flex flex-column align px-4 md:px-0 ">
-
-                      <a className="flex align-items-center p-menuitem-link" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>
-                        <span className="">Fold</span>
-                      </a>
-                    </div>
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </OverlayPanel>
-        </div>
-      }
+                <SolidIcon name="si-cog" aria-hidden />
+              </button>
+            </SolidDropdownMenuTrigger>
+            <SolidDropdownMenuContent className="solid-custom-overlay kanban-options-panel" align="start">
+              <SolidDropdownMenuItem
+                className="solid-header-dropdown-item kanban-fold-action-button"
+                onSelect={() => toggleFold(groupByField)}
+              >
+                <SolidIcon name="si-angle-double-left" className="solid-header-action-button-icon" aria-hidden />
+                <span className="solid-header-action-button-label">Fold</span>
+              </SolidDropdownMenuItem>
+            </SolidDropdownMenuContent>
+          </SolidDropdownMenu>
+        }
+      </div>
       {!group.folded && (
-        <Droppable droppableId={groupByField} isDropDisabled={!groupedView}>
+        <Droppable droppableId={groupByField}>
           {(provided: DroppableProvided) => (
             <div
               ref={provided.innerRef}
               {...provided.droppableProps}
               style={{ minHeight: "100px" }}
-              // @ts-ignore
-              className={groupedView === false && "kanban-ungrouped-column-content"}
             >
               {groupData.map((data, index) => (
                 // @ts-ignore
-                <KanbanCard groupedView={groupedView} key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} />
+                <KanbanCard key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} groupByFieldName={groupByField} group={group} cardNode={cardNode} DynamicCardWidget={DynamicCardWidget} />
               ))}
               {provided.placeholder}
               {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
-                <Button text className="kaban-load-more" size="small"
+                <SolidButton
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="kaban-load-more"
                   onClick={() => handleLoadMore(groupByField)}
-                  label={`Load more data... ( ${group.count - (group.limit * group.currentPage)} remaining)`}
-                />
+                >
+                  {`Load more data... (${group.count - (group.limit * group.currentPage)} remaining)`}
+                </SolidButton>
               }
             </div>
           )}

package/dist/components/core/kanban/KanbanUserViewLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanUserViewLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanUserViewLayout.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,wDAAyD,GAAG,mDA4D5F,CAAC"}
+{"version":3,"file":"KanbanUserViewLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanUserViewLayout.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB,wDAAyD,GAAG,mDA8D5F,CAAC"}

package/dist/components/core/kanban/KanbanUserViewLayout.js

@@ -36,14 +36,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormik } from "formik";
-import { Button } from "primereact/button";
 import { useDispatch } from "react-redux";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { javascript } from "@codemirror/lang-javascript";
-import { oneDark } from "@codemirror/theme-one-dark";
-import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { showToast } from "../../../redux/features/toastSlice";
+import { SolidButton, SolidCodeEditor } from "../../shad-cn-ui";
 export var KanbanUserViewLayout = function (_a) {
     var _b;
     var solidKanbanViewMetaData = _a.solidKanbanViewMetaData, setLayoutDialogVisible = _a.setLayoutDialogVisible;
@@ -90,8 +87,8 @@ export var KanbanUserViewLayout = function (_a) {
             });
         }); },
     });
-    return (_jsx(_Fragment, { children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsx(CodeMirror, { value: formik.values.layoutString, height: "500px", theme: oneDark, style: { fontSize: '10px' }, extensions: [javascript(), EditorView.lineWrapping], onChange: function (value) {
-                        formik.setFieldValue("layoutString", value);
-                    } }), _jsxs("div", { className: "pt-3 flex gap-2", children: [_jsx(Button, { type: "submit", label: "Apply", size: "small" }), _jsx(Button, { type: "button", outlined: true, label: "Cancel", size: "small", onClick: function () { return setLayoutDialogVisible(false); } })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsx(SolidCodeEditor, { value: formik.values.layoutString, height: "500px", fontSize: "10px", language: "json", onChange: function (value) {
+                        formik.setFieldValue("layoutString", value !== null && value !== void 0 ? value : "");
+                    } }), _jsxs("div", { className: "pt-3 flex gap-2", children: [_jsx(SolidButton, { type: "submit", size: "sm", children: "Apply" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", onClick: function () { return setLayoutDialogVisible(false); }, children: "Cancel" })] })] }) }));
 };
 //# sourceMappingURL=KanbanUserViewLayout.js.map

package/dist/components/core/kanban/KanbanUserViewLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanUserViewLayout.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanUserViewLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormik } from \"formik\";\nimport { Button } from \"primereact/button\";\nimport { useDispatch } from \"react-redux\";\nimport { createSolidEntityApi } from \"../../../redux/api/solidEntityApi\";\nimport { javascript } from \"@codemirror/lang-javascript\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { showToast } from \"../../../redux/features/toastSlice\";\n\nexport const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {\n    const dispatch = useDispatch();\n    const entityApi = createSolidEntityApi(\"userViewMetadata\");\n    const { useUpsertSolidEntityMutation } = entityApi;\n    const [upsertUserView] = useUpsertSolidEntityMutation();\n\n    if (!solidKanbanViewMetaData?.data?.solidView) return null;\n\n    const solidView = solidKanbanViewMetaData.data.solidView;\n\n    const formik = useFormik({\n        initialValues: {\n            layoutString: JSON.stringify(solidView.layout, null, 2),\n        },\n        onSubmit: async (values) => {\n            const parsedLayout = JSON.parse(values.layoutString);\n            try {\n                if (solidView.id) {\n                    const response = await upsertUserView({\n                        viewMetadataId: solidView.id,\n                        layout: JSON.stringify(parsedLayout),\n                    }).unwrap();\n                    if (response.statusCode === 200) {\n                        dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.FORM_LAYOUT_UPDATE }));\n                        setLayoutDialogVisible(false);\n                        window.location.reload();\n                    }\n                }\n            } catch (error) {\n                console.error(ERROR_MESSAGES.UPDATE_FAILED, error);\n            }\n        },\n    });\n\n    return (\n        <>\n            <form onSubmit={formik.handleSubmit}>\n                <CodeMirror\n                    value={formik.values.layoutString}\n                    height=\"500px\"\n                    theme={oneDark}\n                    style={{ fontSize: '10px' }}\n                    extensions={[javascript(), EditorView.lineWrapping]}\n                    onChange={(value) => {\n                        formik.setFieldValue(\"layoutString\", value);\n                    }}\n                />\n                <div className=\"pt-3 flex gap-2\">\n                    <Button type=\"submit\" label=\"Apply\" size=\"small\" />\n                    <Button\n                        type=\"button\"\n                        outlined\n                        label=\"Cancel\"\n                        size=\"small\"\n                        onClick={() => setLayoutDialogVisible(false)}\n                    />\n                </div>\n            </form>\n        </>\n    );\n};"]}
+{"version":3,"file":"KanbanUserViewLayout.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanUserViewLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormik } from \"formik\";\nimport { useDispatch } from \"react-redux\";\nimport { createSolidEntityApi } from \"../../../redux/api/solidEntityApi\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { showToast } from \"../../../redux/features/toastSlice\";\nimport { SolidButton, SolidCodeEditor } from \"../../shad-cn-ui\";\n\nexport const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {\n    const dispatch = useDispatch();\n    const entityApi = createSolidEntityApi(\"userViewMetadata\");\n    const { useUpsertSolidEntityMutation } = entityApi;\n    const [upsertUserView] = useUpsertSolidEntityMutation();\n\n    if (!solidKanbanViewMetaData?.data?.solidView) return null;\n\n    const solidView = solidKanbanViewMetaData.data.solidView;\n\n    const formik = useFormik({\n        initialValues: {\n            layoutString: JSON.stringify(solidView.layout, null, 2),\n        },\n        onSubmit: async (values) => {\n            const parsedLayout = JSON.parse(values.layoutString);\n            try {\n                if (solidView.id) {\n                    const response = await upsertUserView({\n                        viewMetadataId: solidView.id,\n                        layout: JSON.stringify(parsedLayout),\n                    }).unwrap();\n                    if (response.statusCode === 200) {\n                        dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.LAYOUT, detail: ERROR_MESSAGES.FORM_LAYOUT_UPDATE }));\n                        setLayoutDialogVisible(false);\n                        window.location.reload();\n                    }\n                }\n            } catch (error) {\n                console.error(ERROR_MESSAGES.UPDATE_FAILED, error);\n            }\n        },\n    });\n\n    return (\n        <>\n            <form onSubmit={formik.handleSubmit}>\n                <SolidCodeEditor\n                    value={formik.values.layoutString}\n                    height=\"500px\"\n                    fontSize=\"10px\"\n                    language=\"json\"\n                    onChange={(value) => {\n                        formik.setFieldValue(\"layoutString\", value ?? \"\");\n                    }}\n                />\n                <div className=\"pt-3 flex gap-2\">\n                    <SolidButton type=\"submit\" size=\"sm\">\n                        Apply\n                    </SolidButton>\n                    <SolidButton\n                        type=\"button\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => setLayoutDialogVisible(false)}\n                    >\n                        Cancel\n                    </SolidButton>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}

package/dist/components/core/kanban/KanbanUserViewLayout.tsx

@@ -1,12 +1,9 @@
 import { useFormik } from "formik";
-import { Button } from "primereact/button";
 import { useDispatch } from "react-redux";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { javascript } from "@codemirror/lang-javascript";
-import { oneDark } from "@codemirror/theme-one-dark";
-import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { showToast } from "../../../redux/features/toastSlice";
+import { SolidButton, SolidCodeEditor } from "../../shad-cn-ui";
 
 export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {
     const dispatch = useDispatch();
@@ -45,27 +42,29 @@ export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogV
     return (
         <>
             <form onSubmit={formik.handleSubmit}>
-                <CodeMirror
+                <SolidCodeEditor
                     value={formik.values.layoutString}
                     height="500px"
-                    theme={oneDark}
-                    style={{ fontSize: '10px' }}
-                    extensions={[javascript(), EditorView.lineWrapping]}
+                    fontSize="10px"
+                    language="json"
                     onChange={(value) => {
-                        formik.setFieldValue("layoutString", value);
+                        formik.setFieldValue("layoutString", value ?? "");
                     }}
                 />
                 <div className="pt-3 flex gap-2">
-                    <Button type="submit" label="Apply" size="small" />
-                    <Button
+                    <SolidButton type="submit" size="sm">
+                        Apply
+                    </SolidButton>
+                    <SolidButton
                         type="button"
-                        outlined
-                        label="Cancel"
-                        size="small"
+                        variant="outline"
+                        size="sm"
                         onClick={() => setLayoutDialogVisible(false)}
-                    />
+                    >
+                        Cancel
+                    </SolidButton>
                 </div>
             </form>
         </>
     );
-};
+};

package/dist/components/core/kanban/SolidKanbanView.d.ts

@@ -1,5 +1,3 @@
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
 type SolidKanbanViewParams = {
     moduleName: string;
     modelName: string;

package/dist/components/core/kanban/SolidKanbanView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidKanbanView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidKanbanView.tsx"],"names":[],"mappings":"AAoBA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAWxD,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAGF,eAAO,MAAM,eAAe,WAAY,qBAAqB,4CA+yB5D,CAAC"}
+{"version":3,"file":"SolidKanbanView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidKanbanView.tsx"],"names":[],"mappings":"AAyCA,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAGF,eAAO,MAAM,eAAe,WAAY,qBAAqB,4CAw3B5D,CAAC"}