@maka/maka-cli 5.122.1 → 5.123.1

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

@@ -1,153 +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 %> };
+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 +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 %> };
+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 %> };