draggable-dashboard-lete-pro 1.5.4

package/dist/components/AddTileModal.js

@@ -0,0 +1,160 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { TileType } from '../types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AddTileModal = function AddTileModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onAdd = _ref.onAdd;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState(TileType.NUMBER),
+    _useState4 = _slicedToArray(_useState3, 2),
+    type = _useState4[0],
+    setType = _useState4[1];
+  if (!isOpen) return null;
+  var handleAdd = function handleAdd() {
+    var newTile = {
+      id: "tile-".concat(Date.now()),
+      title: title || "New ".concat(type),
+      type: type,
+      x: 0,
+      y: 0,
+      w: type === TileType.NUMBER ? 4 : 6,
+      h: type === TileType.NUMBER ? 4 : 6,
+      numberValue: type === TileType.NUMBER ? 1200 : undefined,
+      textValue: type === TileType.TEXT ? 'New workspace memo...' : undefined
+    };
+    onAdd(newTile);
+    onClose();
+    setTitle('');
+  };
+  var widgetOptions = [{
+    label: 'Number',
+    type: TileType.NUMBER
+  }, {
+    label: 'Table',
+    type: TileType.TABLE
+  }, {
+    label: 'Chart',
+    type: TileType.CHART
+  }, {
+    label: 'Image',
+    type: TileType.IMAGE
+  }, {
+    label: 'Text',
+    type: TileType.TEXT
+  }, {
+    label: 'Recent',
+    type: TileType.RECENT
+  }, {
+    label: 'Docs',
+    type: TileType.DOCS
+  }, {
+    label: 'Folders',
+    type: TileType.FOLDERS
+  }, {
+    label: 'Custom',
+    type: TileType.CUSTOM
+  }];
+  return /*#__PURE__*/_jsx("div", {
+    className: "fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden scale-100 zoom-in-95 animate-out fade-out zoom-out-95",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "p-6 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/_jsx("h2", {
+            className: "text-xl font-bold text-slate-800 dark:text-white leading-tight",
+            children: "Add New Widget"
+          }), /*#__PURE__*/_jsx("p", {
+            className: "text-xs text-slate-500 dark:text-slate-400",
+            children: "Choose a widget to customize your workspace."
+          })]
+        }), /*#__PURE__*/_jsx("button", {
+          onClick: onClose,
+          className: "p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors",
+          children: /*#__PURE__*/_jsx("svg", {
+            className: "w-6 h-6",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/_jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "p-6 space-y-6",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "space-y-1.5",
+          children: [/*#__PURE__*/_jsx("label", {
+            className: "block text-[10px] font-bold text-slate-400 uppercase tracking-widest",
+            children: "Widget Name"
+          }), /*#__PURE__*/_jsx("input", {
+            type: "text",
+            value: title,
+            onChange: function onChange(e) {
+              return setTitle(e.target.value);
+            },
+            placeholder: "e.g. Q4 Growth Roadmap",
+            className: "w-full px-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none dark:text-white transition-all"
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "space-y-1.5",
+          children: [/*#__PURE__*/_jsx("label", {
+            className: "block text-[10px] font-bold text-slate-400 uppercase tracking-widest",
+            children: "Select Widget Type"
+          }), /*#__PURE__*/_jsx("div", {
+            className: "grid grid-cols-2 sm:grid-cols-4 gap-2",
+            children: widgetOptions.map(function (opt) {
+              return /*#__PURE__*/_jsxs("button", {
+                onClick: function onClick() {
+                  return setType(opt.type);
+                },
+                className: "px-3 py-4 rounded-xl text-xs font-bold transition-all flex flex-col items-center gap-2 border-2 ".concat(type === opt.type ? 'bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-900/20 dark:border-indigo-500' : 'bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:border-slate-300'),
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "p-2 rounded-lg ".concat(type === opt.type ? 'bg-indigo-600 text-white' : 'bg-slate-100 dark:bg-slate-800'),
+                  children: /*#__PURE__*/_jsx("svg", {
+                    className: "w-4 h-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /*#__PURE__*/_jsx("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+                    })
+                  })
+                }), opt.label]
+              }, opt.type);
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "p-6 bg-slate-50 dark:bg-slate-900 flex justify-end gap-3",
+        children: [/*#__PURE__*/_jsx("button", {
+          onClick: onClose,
+          className: "px-6 py-2.5 text-xs font-bold text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors",
+          children: "CANCEL"
+        }), /*#__PURE__*/_jsx("button", {
+          onClick: handleAdd,
+          className: "px-6 py-2.5 text-xs font-bold bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shadow-lg shadow-indigo-500/20 transition-all",
+          children: "CREATE WIDGET"
+        })]
+      })]
+    })
+  });
+};

package/dist/components/DashboardTile.js

@@ -0,0 +1,159 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["tile", "cellSize", "editMode", "onDragStart", "onResizeStart", "onDelete", "onMaximize", "isDragging", "isResizing"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { GRID_GAP } from '../constants';
+import { TileContent } from './TileContent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var DashboardTile = function DashboardTile(_ref) {
+  var tile = _ref.tile,
+    cellSize = _ref.cellSize,
+    editMode = _ref.editMode,
+    onDragStart = _ref.onDragStart,
+    onResizeStart = _ref.onResizeStart,
+    onDelete = _ref.onDelete,
+    onMaximize = _ref.onMaximize,
+    isDragging = _ref.isDragging,
+    isResizing = _ref.isResizing,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var x = tile.x,
+    y = tile.y,
+    w = tile.w,
+    h = tile.h;
+  var left = x * (cellSize + GRID_GAP);
+  var top = y * (cellSize + GRID_GAP);
+  var width = w * cellSize + (w - 1) * GRID_GAP;
+  var height = h * cellSize + (h - 1) * GRID_GAP;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "absolute tile-transition bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col group overflow-hidden ".concat(isDragging ? 'dragging ring-4 ring-indigo-500/20' : '', " ").concat(isResizing ? 'resizing' : '', " ").concat(editMode ? 'hover:border-indigo-300 dark:hover:border-indigo-800' : ''),
+    style: {
+      left: left,
+      top: top,
+      width: width,
+      height: height
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "px-4 py-2.5 flex items-center justify-between border-b border-slate-100 dark:border-slate-700/50 select-none bg-white dark:bg-slate-800 transition-colors ".concat(isDragging ? 'bg-indigo-50 dark:bg-indigo-900/10' : ''),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2 overflow-hidden flex-1",
+        children: [editMode && /*#__PURE__*/_jsx("div", {
+          onPointerDown: function onPointerDown(e) {
+            return onDragStart(e, tile.id);
+          },
+          className: "p-1.5 hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-600 rounded-lg cursor-move text-slate-400 shrink-0 transition-all active:scale-95 shadow-sm bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-700",
+          title: "Drag to move",
+          children: /*#__PURE__*/_jsxs("svg", {
+            className: "w-4 h-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            children: [/*#__PURE__*/_jsx("circle", {
+              cx: "9",
+              cy: "5",
+              r: "1"
+            }), /*#__PURE__*/_jsx("circle", {
+              cx: "9",
+              cy: "12",
+              r: "1"
+            }), /*#__PURE__*/_jsx("circle", {
+              cx: "9",
+              cy: "19",
+              r: "1"
+            }), /*#__PURE__*/_jsx("circle", {
+              cx: "15",
+              cy: "5",
+              r: "1"
+            }), /*#__PURE__*/_jsx("circle", {
+              cx: "15",
+              cy: "12",
+              r: "1"
+            }), /*#__PURE__*/_jsx("circle", {
+              cx: "15",
+              cy: "19",
+              r: "1"
+            })]
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "flex flex-col truncate",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "flex items-center gap-1.5",
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "text-[9px] text-slate-400 font-black uppercase tracking-widest hidden sm:inline",
+              children: "TILE"
+            }), /*#__PURE__*/_jsx("svg", {
+              className: "w-2.5 h-2.5 text-slate-300",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /*#__PURE__*/_jsx("path", {
+                d: "M9 5l7 7-7 7",
+                strokeWidth: 3
+              })
+            }), /*#__PURE__*/_jsx("h3", {
+              className: "text-[11px] font-bold text-slate-700 dark:text-slate-200 truncate uppercase tracking-tight",
+              children: tile.title
+            })]
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-1.5",
+        children: [/*#__PURE__*/_jsx("button", {
+          onClick: function onClick() {
+            return onMaximize(tile.id);
+          },
+          className: "p-1.5 text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-all",
+          title: "Maximize View",
+          children: /*#__PURE__*/_jsx("svg", {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2.5,
+            children: /*#__PURE__*/_jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M15 3h6m0 0v6m0-6L14 10M9 21H3m0 0v-6m0 6l7-7"
+            })
+          })
+        }), editMode && /*#__PURE__*/_jsx("button", {
+          onClick: function onClick() {
+            return onDelete(tile.id);
+          },
+          className: "p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all",
+          title: "Remove widget",
+          children: /*#__PURE__*/_jsx("svg", {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2.5,
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex-1 p-5 overflow-auto scrollbar-hide bg-white dark:bg-slate-800",
+      children: /*#__PURE__*/_jsx(TileContent, _objectSpread({
+        tile: tile,
+        editMode: editMode
+      }, rest))
+    }), editMode && /*#__PURE__*/_jsx("div", {
+      className: "absolute bottom-0 right-0 w-6 h-6 cursor-nwse-resize flex items-end justify-end p-1 z-10",
+      onPointerDown: function onPointerDown(e) {
+        return onResizeStart(e, tile.id);
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "w-3 h-3 border-r-4 border-b-4 border-slate-200 dark:border-slate-700 rounded-br-md group-hover:border-indigo-400 transition-colors"
+      })
+    })]
+  });
+};