create-mcp-use-app 0.4.8 → 0.4.9

package/dist/templates/mcp-ui/resources/kanban-board.tsx

@@ -1,47 +1,83 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
 
 interface Task {
-  id: string
-  title: string
-  description: string
-  status: 'todo' | 'in-progress' | 'done'
-  priority: 'low' | 'medium' | 'high'
-  assignee?: string
+  id: string;
+  title: string;
+  description: string;
+  status: "todo" | "in-progress" | "done";
+  priority: "low" | "medium" | "high";
+  assignee?: string;
 }
 
 interface KanbanBoardProps {
-  initialTasks?: Task[]
+  initialTasks?: Task[];
 }
 
 const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
-  const [tasks, setTasks] = useState<Task[]>(initialTasks)
-  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
+  const [tasks, setTasks] = useState<Task[]>(initialTasks);
+  const [newTask, setNewTask] = useState({
+    title: "",
+    description: "",
+    priority: "medium" as Task["priority"],
+  });
 
   // Load tasks from URL parameters or use defaults
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const tasksParam = urlParams.get('tasks')
+    const urlParams = new URLSearchParams(window.location.search);
+    const tasksParam = urlParams.get("tasks");
 
     if (tasksParam) {
       try {
-        const parsedTasks = JSON.parse(decodeURIComponent(tasksParam))
-        setTasks(parsedTasks)
+        const parsedTasks = JSON.parse(decodeURIComponent(tasksParam));
+        setTasks(parsedTasks);
+      } catch (error) {
+        console.error("Error parsing tasks from URL:", error);
       }
-      catch (error) {
-        console.error('Error parsing tasks from URL:', error)
-      }
-    }
-    else {
+    } else {
       // Default tasks for demo
       setTasks([
-        { id: '1', title: 'Design UI mockups', description: 'Create wireframes for the new dashboard', status: 'todo', priority: 'high', assignee: 'Alice' },
-        { id: '2', title: 'Implement authentication', description: 'Add login and registration functionality', status: 'in-progress', priority: 'high', assignee: 'Bob' },
-        { id: '3', title: 'Write documentation', description: 'Document the API endpoints', status: 'done', priority: 'medium', assignee: 'Charlie' },
-        { id: '4', title: 'Setup CI/CD', description: 'Configure automated testing and deployment', status: 'todo', priority: 'medium' },
-        { id: '5', title: 'Code review', description: 'Review pull requests from the team', status: 'in-progress', priority: 'low', assignee: 'David' },
-      ])
+        {
+          id: "1",
+          title: "Design UI mockups",
+          description: "Create wireframes for the new dashboard",
+          status: "todo",
+          priority: "high",
+          assignee: "Alice",
+        },
+        {
+          id: "2",
+          title: "Implement authentication",
+          description: "Add login and registration functionality",
+          status: "in-progress",
+          priority: "high",
+          assignee: "Bob",
+        },
+        {
+          id: "3",
+          title: "Write documentation",
+          description: "Document the API endpoints",
+          status: "done",
+          priority: "medium",
+          assignee: "Charlie",
+        },
+        {
+          id: "4",
+          title: "Setup CI/CD",
+          description: "Configure automated testing and deployment",
+          status: "todo",
+          priority: "medium",
+        },
+        {
+          id: "5",
+          title: "Code review",
+          description: "Review pull requests from the team",
+          status: "in-progress",
+          priority: "low",
+          assignee: "David",
+        },
+      ]);
     }
-  }, [])
+  }, []);
 
   const addTask = () => {
     if (newTask.title.trim()) {
@@ -49,93 +85,109 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
         id: Date.now().toString(),
         title: newTask.title,
         description: newTask.description,
-        status: 'todo',
+        status: "todo",
         priority: newTask.priority,
-      }
-      setTasks([...tasks, task])
-      setNewTask({ title: '', description: '', priority: 'medium' })
+      };
+      setTasks([...tasks, task]);
+      setNewTask({ title: "", description: "", priority: "medium" });
     }
-  }
+  };
 
-  const moveTask = (taskId: string, newStatus: Task['status']) => {
-    setTasks(tasks.map(task =>
-      task.id === taskId ? { ...task, status: newStatus } : task,
-    ))
-  }
+  const moveTask = (taskId: string, newStatus: Task["status"]) => {
+    setTasks(
+      tasks.map((task) =>
+        task.id === taskId ? { ...task, status: newStatus } : task
+      )
+    );
+  };
 
   const deleteTask = (taskId: string) => {
-    setTasks(tasks.filter(task => task.id !== taskId))
-  }
+    setTasks(tasks.filter((task) => task.id !== taskId));
+  };
 
-  const getTasksByStatus = (status: Task['status']) => {
-    return tasks.filter(task => task.status === status)
-  }
+  const getTasksByStatus = (status: Task["status"]) => {
+    return tasks.filter((task) => task.status === status);
+  };
 
-  const getPriorityColor = (priority: Task['priority']) => {
+  const getPriorityColor = (priority: Task["priority"]) => {
     switch (priority) {
-      case 'high': return '#ff4757'
-      case 'medium': return '#ffa502'
-      case 'low': return '#2ed573'
-      default: return '#57606f'
+      case "high":
+        return "#ff4757";
+      case "medium":
+        return "#ffa502";
+      case "low":
+        return "#2ed573";
+      default:
+        return "#57606f";
     }
-  }
+  };
 
   const columns = [
-    { id: 'todo', title: 'To Do', color: '#57606f' },
-    { id: 'in-progress', title: 'In Progress', color: '#ffa502' },
-    { id: 'done', title: 'Done', color: '#2ed573' },
-  ] as const
+    { id: "todo", title: "To Do", color: "#57606f" },
+    { id: "in-progress", title: "In Progress", color: "#ffa502" },
+    { id: "done", title: "Done", color: "#2ed573" },
+  ] as const;
 
   return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Kanban Board</h1>
+    <div style={{ padding: "20px" }}>
+      <div style={{ marginBottom: "30px" }}>
+        <h1 style={{ margin: "0 0 20px 0", color: "#2c3e50" }}>Kanban Board</h1>
 
         {/* Add new task form */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
+        <div
+          style={{
+            background: "white",
+            padding: "20px",
+            borderRadius: "8px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            marginBottom: "20px",
+          }}
         >
-          <h3 style={{ margin: '0 0 15px 0' }}>Add New Task</h3>
-          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <h3 style={{ margin: "0 0 15px 0" }}>Add New Task</h3>
+          <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
             <input
               type="text"
               placeholder="Task title"
               value={newTask.title}
-              onChange={e => setNewTask({ ...newTask, title: e.target.value })}
+              onChange={(e) =>
+                setNewTask({ ...newTask, title: e.target.value })
+              }
               style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                flex: '1',
-                minWidth: '200px',
+                padding: "8px 12px",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+                flex: "1",
+                minWidth: "200px",
               }}
             />
             <input
               type="text"
               placeholder="Description"
               value={newTask.description}
-              onChange={e => setNewTask({ ...newTask, description: e.target.value })}
+              onChange={(e) =>
+                setNewTask({ ...newTask, description: e.target.value })
+              }
               style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                flex: '1',
-                minWidth: '200px',
+                padding: "8px 12px",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+                flex: "1",
+                minWidth: "200px",
               }}
             />
             <select
               title="Priority"
               value={newTask.priority}
-              onChange={e => setNewTask({ ...newTask, priority: e.target.value as Task['priority'] })}
+              onChange={(e) =>
+                setNewTask({
+                  ...newTask,
+                  priority: e.target.value as Task["priority"],
+                })
+              }
               style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
+                padding: "8px 12px",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
               }}
             >
               <option value="low">Low Priority</option>
@@ -145,12 +197,12 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
             <button
               onClick={addTask}
               style={{
-                padding: '8px 16px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
+                padding: "8px 16px",
+                background: "#3498db",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
               }}
             >
               Add Task
@@ -160,82 +212,94 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
       </div>
 
       {/* Kanban columns */}
-      <div style={{ display: 'flex', gap: '20px', overflowX: 'auto' }}>
-        {columns.map(column => (
+      <div style={{ display: "flex", gap: "20px", overflowX: "auto" }}>
+        {columns.map((column) => (
           <div
             key={column.id}
             style={{
-              flex: '1',
-              minWidth: '300px',
-              background: 'white',
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              overflow: 'hidden',
+              flex: "1",
+              minWidth: "300px",
+              background: "white",
+              borderRadius: "8px",
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+              overflow: "hidden",
             }}
           >
             <div
               style={{
                 background: column.color,
-                color: 'white',
-                padding: '15px 20px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
+                color: "white",
+                padding: "15px 20px",
+                fontWeight: "bold",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
               }}
             >
               <span>{column.title}</span>
-              <span style={{
-                background: 'rgba(255,255,255,0.2)',
-                padding: '4px 8px',
-                borderRadius: '12px',
-                fontSize: '12px',
-              }}
+              <span
+                style={{
+                  background: "rgba(255,255,255,0.2)",
+                  padding: "4px 8px",
+                  borderRadius: "12px",
+                  fontSize: "12px",
+                }}
               >
                 {getTasksByStatus(column.id).length}
               </span>
             </div>
 
-            <div style={{ padding: '20px', minHeight: '400px' }}>
-              {getTasksByStatus(column.id).map(task => (
+            <div style={{ padding: "20px", minHeight: "400px" }}>
+              {getTasksByStatus(column.id).map((task) => (
                 <div
                   key={task.id}
                   style={{
-                    background: '#f8f9fa',
-                    border: '1px solid #e9ecef',
-                    borderRadius: '6px',
-                    padding: '15px',
-                    marginBottom: '10px',
-                    cursor: 'grab',
+                    background: "#f8f9fa",
+                    border: "1px solid #e9ecef",
+                    borderRadius: "6px",
+                    padding: "15px",
+                    marginBottom: "10px",
+                    cursor: "grab",
                   }}
                   draggable
                   onDragStart={(e) => {
-                    e.dataTransfer.setData('text/plain', task.id)
+                    e.dataTransfer.setData("text/plain", task.id);
                   }}
-                  onDragOver={e => e.preventDefault()}
+                  onDragOver={(e) => e.preventDefault()}
                   onDrop={(e) => {
-                    e.preventDefault()
-                    const taskId = e.dataTransfer.getData('text/plain')
+                    e.preventDefault();
+                    const taskId = e.dataTransfer.getData("text/plain");
                     if (taskId === task.id) {
                       // Move to next column
-                      const currentIndex = columns.findIndex(col => col.id === column.id)
-                      const nextColumn = columns[currentIndex + 1]
+                      const currentIndex = columns.findIndex(
+                        (col) => col.id === column.id
+                      );
+                      const nextColumn = columns[currentIndex + 1];
                       if (nextColumn) {
-                        moveTask(taskId, nextColumn.id)
+                        moveTask(taskId, nextColumn.id);
                       }
                     }
                   }}
                 >
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
-                    <h4 style={{ margin: '0', color: '#2c3e50' }}>{task.title}</h4>
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "flex-start",
+                      marginBottom: "8px",
+                    }}
+                  >
+                    <h4 style={{ margin: "0", color: "#2c3e50" }}>
+                      {task.title}
+                    </h4>
                     <button
                       onClick={() => deleteTask(task.id)}
                       style={{
-                        background: 'none',
-                        border: 'none',
-                        color: '#e74c3c',
-                        cursor: 'pointer',
-                        fontSize: '16px',
+                        background: "none",
+                        border: "none",
+                        color: "#e74c3c",
+                        cursor: "pointer",
+                        fontSize: "16px",
                       }}
                     >
                       ×
@@ -243,33 +307,46 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
                   </div>
 
                   {task.description && (
-                    <p style={{ margin: '0 0 10px 0', color: '#6c757d', fontSize: '14px' }}>
+                    <p
+                      style={{
+                        margin: "0 0 10px 0",
+                        color: "#6c757d",
+                        fontSize: "14px",
+                      }}
+                    >
                       {task.description}
                     </p>
                   )}
 
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                    }}
+                  >
                     <div
                       style={{
                         background: getPriorityColor(task.priority),
-                        color: 'white',
-                        padding: '2px 8px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        fontWeight: 'bold',
+                        color: "white",
+                        padding: "2px 8px",
+                        borderRadius: "12px",
+                        fontSize: "12px",
+                        fontWeight: "bold",
                       }}
                     >
                       {task.priority.toUpperCase()}
                     </div>
 
                     {task.assignee && (
-                      <span style={{
-                        background: '#e9ecef',
-                        padding: '2px 8px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        color: '#495057',
-                      }}
+                      <span
+                        style={{
+                          background: "#e9ecef",
+                          padding: "2px 8px",
+                          borderRadius: "12px",
+                          fontSize: "12px",
+                          color: "#495057",
+                        }}
                       >
                         {task.assignee}
                       </span>
@@ -279,12 +356,13 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
               ))}
 
               {getTasksByStatus(column.id).length === 0 && (
-                <div style={{
-                  textAlign: 'center',
-                  color: '#6c757d',
-                  padding: '40px 20px',
-                  fontStyle: 'italic',
-                }}
+                <div
+                  style={{
+                    textAlign: "center",
+                    color: "#6c757d",
+                    padding: "40px 20px",
+                    fontStyle: "italic",
+                  }}
                 >
                   No tasks in this column
                 </div>
@@ -294,7 +372,7 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default KanbanBoard
+export default KanbanBoard;

package/dist/templates/mcp-ui/tsconfig.json

@@ -22,4 +22,3 @@
   "include": ["index.ts", "src/**/*", "resources/**/*", "server.ts"],
   "exclude": ["node_modules", "dist"]
 }
-