@maka/maka-cli 5.2.6 → 5.2.7

package/bundle/typescript/src/templates/react/kit/esri/map/basic-map.js.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { Map } from '@esri/react-arcgis';
+import { loadCss } from 'esri-loader';
+
+if (module.hot) {
+  module.hot.decline();
+}
+
+const <%= componentName %> = () => {
+  const [mapHeight, setMapHeight] = useState('100vh');
+
+  useEffect(() => {
+    loadCss();
+
+    // Check if an element with id "app-bar" exists
+    const appBar = document.getElementById('app-bar');
+    const footer = document.getElementById('footer');
+    if (appBar) {
+      const appBarHeight = appBar ? appBar.getBoundingClientRect().height : 0;
+      const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
+      const windowHeight = window.innerHeight;
+      const adjustedHeight = windowHeight - appBarHeight - footerHeight;
+      setMapHeight(`${adjustedHeight}px`);
+    }
+  }, []); // Empty dependency array means this useEffect runs once, similar to componentDidMount
+
+  return (
+    <Map style={{ width: '100%', height: mapHeight }} />
+  );
+};
+
+export { <%= componentName %> }

package/bundle/typescript/src/templates/react/kit/frames/frames-demo.css

@@ -0,0 +1,63 @@
+#<%= fileName %> {
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.<%= fileName %>-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 15px 25px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.<%= fileName %>-header h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #333;
+  font-weight: 600;
+}
+
+.frames-container {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 120px);
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.frame-content {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.frame-content h3 {
+  margin-top: 0;
+  color: #333;
+  font-size: 18px;
+}
+
+.frame-content p {
+  margin: 10px 0;
+  color: #666;
+  line-height: 1.6;
+}
+
+.frame-content code {
+  background: #f4f4f4;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+  color: #e83e8c;
+}

package/bundle/typescript/src/templates/react/kit/frames/frames-demo.jsx

@@ -0,0 +1,153 @@
+import './<%= fileName %>.css';
+import React, { Component } from 'react';
+import { withTracker } from 'meteor/maka:react-tracker';
+import { Frame, FramesContainer, Workspace, FrameManagerBar } from 'meteor/maka:maka-frames';
+import { WorkspaceManagerComponent } from '../../components/workspace-manager/workspace-manager';
+import PropTypes from 'prop-types';
+
+class <%= className %> extends Component {
+  static propTypes = {};
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentWorkspaceId: 'demo-workspace',
+      showFrameManager: true
+    };
+  }
+
+  toggleFrameManager = () => {
+    this.setState({ showFrameManager: !this.state.showFrameManager });
+  }
+
+  handleWorkspaceSwitch = (workspaceId) => {
+    this.setState({ currentWorkspaceId: workspaceId });
+  }
+
+  // Custom frame menu items
+  getFrameMenuItems = () => {
+    return [];
+  }
+
+  // Workspace context menu items
+  getWorkspaceMenuItems = (toggleFrame, resetWorkspace) => {
+    return [
+      {
+        label: 'New Frame',
+        icon: '➕',
+        action: () => {
+          const newId = `demo-frame-${Date.now()}`;
+          toggleFrame(newId, {
+            title: 'New Frame',
+            x: Math.random() * 300 + 100,
+            y: Math.random() * 300 + 100,
+            width: 400,
+            height: 300
+          });
+        }
+      },
+      { divider: true },
+      {
+        label: 'Reset Workspace',
+        icon: '🔄',
+        action: () => {
+          resetWorkspace();
+        }
+      }
+    ];
+  }
+
+  render() {
+    const { currentWorkspaceId } = this.state;
+
+    return (
+      <Workspace
+        workspaceId={currentWorkspaceId}
+        workspaceName={currentWorkspaceId === 'demo-workspace' ? 'Demo Workspace' : `Workspace ${currentWorkspaceId.split('-')[1]}`}
+        contextMenuItems={this.getFrameMenuItems()}
+        enableContextMenu={true}
+        workspaceContextMenuItems={({ toggleFrame, resetWorkspace }) => this.getWorkspaceMenuItems(toggleFrame, resetWorkspace)}
+        enableWorkspaceContextMenu={true}
+      >
+        {({ workspace, allWorkspaces, updateFrame, handleFrameMenu, handleWorkspaceContextMenu, minimizeFrame, onFrameManagerClick, onFrameManagerClose }) => {
+          return (
+            <div id="<%= fileName %>">
+              <div className="<%= fileName %>-header">
+                <h1>Maka Frames Demo</h1>
+
+                <WorkspaceManagerComponent
+                  currentWorkspaceId={this.state.currentWorkspaceId}
+                  allWorkspaces={allWorkspaces}
+                  user={this.props.user}
+                  onWorkspaceSwitch={this.handleWorkspaceSwitch}
+                />
+
+                <button onClick={this.toggleFrameManager} style={{ padding: '8px 16px', cursor: 'pointer', borderRadius: '4px', border: 'none', background: '#fff', fontWeight: 'bold' }}>
+                  {this.state.showFrameManager ? 'Hide' : 'Show'} Toolbar
+                </button>
+              </div>
+
+              <FramesContainer
+                className="frames-container"
+                onContextMenu={handleWorkspaceContextMenu}
+              >
+                {/* Render all frames dynamically */}
+                {workspace.frames.map(frame => (
+                  frame.display && (
+                    <Frame
+                      key={frame.id}
+                      id={frame.id}
+                      title={frame.title}
+                      x={frame.x}
+                      y={frame.y}
+                      width={frame.width}
+                      height={frame.height}
+                      display={frame.display}
+                      zIndex={frame.zIndex}
+                      onMenuClick={handleFrameMenu}
+                      onFrameUpdate={updateFrame}
+                      onMinimize={minimizeFrame}
+                    >
+                      <div className="frame-content">
+                        <h3>{frame.title}</h3>
+                        <p>Frame content goes here.</p>
+                        <p>ID: <code>{frame.id}</code></p>
+                        <p>Position: ({frame.x}, {frame.y})</p>
+                        <p>Size: {frame.width} × {frame.height}</p>
+                      </div>
+                    </Frame>
+                  )
+                ))
+                }
+              </FramesContainer>
+              {this.state.showFrameManager && (
+                <FrameManagerBar
+                  workspace={workspace}
+                  allWorkspaces={allWorkspaces}
+                  onFrameClick={onFrameManagerClick}
+                  onFrameClose={onFrameManagerClose}
+                  onWorkspaceClick={this.handleWorkspaceSwitch}
+                  position="bottom"
+                  showClosed={true}
+                  maxItems={20}
+                />
+              )}
+            </div>
+          );
+        }}
+      </Workspace>
+    );
+  }
+}
+
+const <%= className %>WithData = withTracker(() => {
+  const user = Meteor.user();
+
+  return {
+    user
+  };
+})(<%= className %>);
+
+export { <%= className %>WithData as <%= className %> };

package/bundle/typescript/src/templates/react/kit/frames/frames-demo.tsx

@@ -0,0 +1,164 @@
+import './<%= fileName %>.css';
+import * as React from 'react';
+import { Component } from 'react';
+import { withTracker } from 'meteor/maka:react-tracker';
+import { Frame, FramesContainer, Workspace, FrameManagerBar } from 'meteor/maka:maka-frames';
+import { WorkspaceManagerComponent } from '../../components/workspace-manager/workspace-manager';
+import PropTypes from 'prop-types';
+
+interface <%= className %>Props {
+  user?: any;
+  allWorkspaces: any[];
+}
+
+interface <%= className %>State {
+  currentWorkspaceId: string;
+  showFrameManager: boolean;
+}
+
+class <%= className %> extends Component<<%= className %>Props, <%= className %>State> {
+  static propTypes = {};
+
+  static defaultProps = {};
+
+  constructor(props: <%= className %>Props) {
+    super(props);
+    this.state = {
+      currentWorkspaceId: 'demo-workspace',
+      showFrameManager: true
+    };
+  }
+
+  toggleFrameManager = () => {
+    this.setState({ showFrameManager: !this.state.showFrameManager });
+  }
+
+  handleWorkspaceSwitch = (workspaceId: string) => {
+    this.setState({ currentWorkspaceId: workspaceId });
+  }
+
+  // Custom frame menu items
+  getFrameMenuItems = () => {
+    return [];
+  }
+
+  // Workspace context menu items
+  getWorkspaceMenuItems = (toggleFrame: any, resetWorkspace: any) => {
+    return [
+      {
+        label: 'New Frame',
+        icon: '➕',
+        action: () => {
+          const newId = `demo-frame-${Date.now()}`;
+          toggleFrame(newId, {
+            title: 'New Frame',
+            x: Math.random() * 300 + 100,
+            y: Math.random() * 300 + 100,
+            width: 400,
+            height: 300
+          });
+        }
+      },
+      { divider: true },
+      {
+        label: 'Reset Workspace',
+        icon: '🔄',
+        action: () => {
+          resetWorkspace();
+        }
+      }
+    ];
+  }
+
+  render() {
+    const { currentWorkspaceId } = this.state;
+
+    return (
+      <Workspace
+        workspaceId={currentWorkspaceId}
+        workspaceName={currentWorkspaceId === 'demo-workspace' ? 'Demo Workspace' : `Workspace ${currentWorkspaceId.split('-')[1]}`}
+        contextMenuItems={this.getFrameMenuItems()}
+        enableContextMenu={true}
+        workspaceContextMenuItems={({ toggleFrame, resetWorkspace }) => this.getWorkspaceMenuItems(toggleFrame, resetWorkspace)}
+        enableWorkspaceContextMenu={true}
+      >
+        {({ workspace, allWorkspaces, updateFrame, handleFrameMenu, handleWorkspaceContextMenu, minimizeFrame, onFrameManagerClick, onFrameManagerClose }) => {
+          return (
+            <div id="<%= fileName %>">
+              <div className="<%= fileName %>-header">
+                <h1>Maka Frames Demo</h1>
+
+                <WorkspaceManagerComponent
+                  currentWorkspaceId={this.state.currentWorkspaceId}
+                  allWorkspaces={allWorkspaces}
+                  user={this.props.user}
+                  onWorkspaceSwitch={this.handleWorkspaceSwitch}
+                />
+
+                <button onClick={this.toggleFrameManager} style={{ padding: '8px 16px', cursor: 'pointer', borderRadius: '4px', border: 'none', background: '#fff', fontWeight: 'bold' }}>
+                  {this.state.showFrameManager ? 'Hide' : 'Show'} Toolbar
+                </button>
+              </div>
+
+              <FramesContainer
+                className="frames-container"
+                onContextMenu={handleWorkspaceContextMenu}
+              >
+                {/* Render all frames dynamically */}
+                {workspace.frames.map((frame: any) => (
+                  frame.display && (
+                    <Frame
+                      key={frame.id}
+                      id={frame.id}
+                      title={frame.title}
+                      x={frame.x}
+                      y={frame.y}
+                      width={frame.width}
+                      height={frame.height}
+                      display={frame.display}
+                      zIndex={frame.zIndex}
+                      onMenuClick={handleFrameMenu}
+                      onFrameUpdate={updateFrame}
+                      onMinimize={minimizeFrame}
+                    >
+                      <div className="frame-content">
+                        <h3>{frame.title}</h3>
+                        <p>Frame content goes here.</p>
+                        <p>ID: <code>{frame.id}</code></p>
+                        <p>Position: ({frame.x}, {frame.y})</p>
+                        <p>Size: {frame.width} × {frame.height}</p>
+                      </div>
+                    </Frame>
+                  )
+                ))
+                }
+              </FramesContainer>
+              {this.state.showFrameManager && (
+                <FrameManagerBar
+                  workspace={workspace}
+                  allWorkspaces={allWorkspaces}
+                  onFrameClick={onFrameManagerClick}
+                  onFrameClose={onFrameManagerClose}
+                  onWorkspaceClick={this.handleWorkspaceSwitch}
+                  position="bottom"
+                  showClosed={true}
+                  maxItems={20}
+                />
+              )}
+            </div>
+          );
+        }}
+      </Workspace>
+    );
+  }
+}
+
+const <%= className %>WithData = withTracker(() => {
+  const user = Meteor.user();
+
+  return {
+    user
+  };
+})(<%= className %>);
+
+export { <%= className %>WithData as <%= className %> };

package/bundle/typescript/src/templates/react/kit/frames/workspace-manager.css

@@ -0,0 +1,105 @@
+.<%= fileName %> {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.workspace-selector {
+  display: flex;
+  align-items: center;
+}
+
+.workspace-select {
+  padding: 8px 12px;
+  border: 2px solid #667eea;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 180px;
+}
+
+.workspace-select:hover {
+  border-color: #764ba2;
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
+}
+
+.workspace-select:focus {
+  outline: none;
+  border-color: #764ba2;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.workspace-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.workspace-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.workspace-create-btn {
+  background: #667eea;
+  color: white;
+}
+
+.workspace-create-btn:hover {
+  background: #5568d3;
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+}
+
+.workspace-rename-btn {
+  background: #48bb78;
+  color: white;
+}
+
+.workspace-rename-btn:hover {
+  background: #38a169;
+  box-shadow: 0 2px 4px rgba(72, 187, 120, 0.3);
+}
+
+.workspace-delete-btn {
+  background: #f56565;
+  color: white;
+}
+
+.workspace-delete-btn:hover {
+  background: #e53e3e;
+  box-shadow: 0 2px 4px rgba(245, 101, 101, 0.3);
+}
+
+.workspace-btn:active {
+  transform: translateY(1px);
+}
+
+@media (max-width: 768px) {
+  .<%= fileName %> {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .workspace-select {
+    width: 100%;
+  }
+
+  .workspace-actions {
+    width: 100%;
+  }
+
+  .workspace-btn {
+    flex: 1;
+  }
+}

package/bundle/typescript/src/templates/react/kit/frames/workspace-manager.jsx

@@ -0,0 +1,158 @@
+import './<%= fileName %>.css';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { WorkspaceManager, WorkspaceStore } from 'meteor/maka:maka-frames';
+
+/**
+ * <%= className %> Component
+ *
+ * UI component for managing workspaces in the maka-frames package.
+ * Provides controls for creating, switching, renaming, and deleting workspaces.
+ */
+class <%= className %>Component extends Component {
+  static propTypes = {
+    currentWorkspaceId: PropTypes.string.isRequired,
+    allWorkspaces: PropTypes.array.isRequired,
+    user: PropTypes.object,
+    onWorkspaceSwitch: PropTypes.func
+  };
+
+  handleCreateWorkspace = () => {
+    const { user, onWorkspaceSwitch } = this.props;
+
+    const workspaceName = prompt('Enter workspace name:', `Workspace ${new Date().toLocaleTimeString()}`);
+    if (!workspaceName) return;
+
+    const workspaceId = `workspace-${Date.now()}`;
+    const workspaceData = {
+      id: workspaceId,
+      name: workspaceName,
+      frames: [],
+      createdAt: new Date(),
+      updatedAt: new Date()
+    };
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.createWorkspace(workspaceData.id, workspaceData.name)
+        .then(() => {
+          console.log('Workspace created:', workspaceData.id);
+          if (onWorkspaceSwitch) onWorkspaceSwitch(workspaceData.id);
+        })
+        .catch((error) => {
+          console.error('Error creating workspace:', error);
+        });
+    } else {
+      WorkspaceStore.setWorkspace(workspaceData);
+      if (onWorkspaceSwitch) onWorkspaceSwitch(workspaceData.id);
+    }
+  }
+
+  handleDeleteWorkspace = (workspaceId) => {
+    const { user, allWorkspaces, onWorkspaceSwitch } = this.props;
+
+    const workspace = allWorkspaces.find(ws => ws.id === workspaceId);
+    if (!workspace) return;
+
+    const confirmed = confirm(`Are you sure you want to delete "${workspace.name}"?`);
+    if (!confirmed) return;
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.deleteWorkspace(workspaceId)
+        .then(() => {
+          console.log('Workspace deleted:', workspaceId);
+          // Switch to first available workspace
+          const remainingWorkspaces = allWorkspaces.filter(ws => ws.id !== workspaceId);
+          if (remainingWorkspaces.length > 0 && onWorkspaceSwitch) {
+            onWorkspaceSwitch(remainingWorkspaces[0].id);
+          }
+        })
+        .catch((error) => {
+          // Handle error (e.g., last workspace can't be deleted)
+          alert(error.message || 'Cannot delete workspace');
+          console.error('Error deleting workspace:', error);
+        });
+    } else {
+      const success = WorkspaceStore.deleteWorkspace(workspaceId);
+      if (success) {
+        // Switch to first available workspace
+        const remainingWorkspaces = allWorkspaces.filter(ws => ws.id !== workspaceId);
+        if (remainingWorkspaces.length > 0 && onWorkspaceSwitch) {
+          onWorkspaceSwitch(remainingWorkspaces[0].id);
+        }
+      } else {
+        alert('Cannot delete the last workspace');
+      }
+    }
+  }
+
+  handleRenameWorkspace = (workspaceId) => {
+    const { user, allWorkspaces } = this.props;
+
+    const workspace = allWorkspaces.find(ws => ws.id === workspaceId);
+    if (!workspace) return;
+
+    const newName = prompt('Enter new workspace name:', workspace.name);
+    if (!newName || newName === workspace.name) return;
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.updateWorkspace(workspaceId, { name: newName });
+    } else {
+      const localWorkspace = WorkspaceStore.getWorkspace(workspaceId);
+      if (localWorkspace) {
+        localWorkspace.name = newName;
+        localWorkspace.updatedAt = new Date();
+        WorkspaceStore.setWorkspace(localWorkspace);
+      }
+    }
+  }
+
+  render() {
+    const { currentWorkspaceId, allWorkspaces, onWorkspaceSwitch } = this.props;
+
+    return (
+      <div className="<%= fileName %>">
+        <div className="workspace-selector">
+          <select
+            value={currentWorkspaceId}
+            onChange={(e) => onWorkspaceSwitch && onWorkspaceSwitch(e.target.value)}
+            className="workspace-select"
+          >
+            {allWorkspaces.map(ws => (
+              <option key={ws.id} value={ws.id}>{ws.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="workspace-actions">
+          <button
+            onClick={this.handleCreateWorkspace}
+            className="workspace-btn workspace-create-btn"
+          >
+            + New Workspace
+          </button>
+
+          <button
+            onClick={() => this.handleRenameWorkspace(currentWorkspaceId)}
+            className="workspace-btn workspace-rename-btn"
+          >
+            Rename Workspace
+          </button>
+
+          {allWorkspaces.length > 1 && (
+            <button
+              onClick={() => this.handleDeleteWorkspace(currentWorkspaceId)}
+              className="workspace-btn workspace-delete-btn"
+            >
+              Delete Workspace
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { <%= className %>Component };