@maka/maka-cli 5.2.10 → 5.3.0

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

@@ -1,32 +0,0 @@
-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

@@ -1,63 +0,0 @@
-#<%= 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

@@ -1,153 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,105 +0,0 @@
-.<%= 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

@@ -1,158 +0,0 @@
-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 };