@manojkmfsi/monodog 1.1.38 → 1.1.39

package/monodog-dashboard/src/components/modules/packages/components/ConfigurationTab.tsx

@@ -1,311 +0,0 @@
-import {
-  DocumentTextIcon,
-  ClipboardIcon,
-  ClipboardDocumentCheckIcon,
-} from '../../../../icons/heroicons';
-import { type PackageDetail } from '../types/packages.types';
-import type { ConfigurationTabProps } from '../../../../types';
-import { useState } from 'react';
-import { monorepoService } from '../../../../services/monorepoService';
-
-export default function ConfigurationTab({
-  packageData,
-}: ConfigurationTabProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedConfig, setEditedConfig] = useState('');
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveMessage, setSaveMessage] = useState('');
-  const [copiedScript, setCopiedScript] = useState<string | null>(null); // Track which script was copied
-  const [isConfigCopied, setIsConfigCopied] = useState(false);
-
-  // console.log('Package Data:', packageData);
-  const generatePackageJson = () => {
-    // Create a proper JavaScript object
-    const configObject = {
-      name: packageData.name,
-      version: packageData.version,
-      description: packageData.description || '',
-      license: packageData.license || '',
-      repository: packageData.repository || {},
-      scripts: packageData.scripts || {},
-      dependencies: packageData.dependencies || {},
-      devDependencies: packageData.devDependencies || {},
-      peerDependencies: packageData.peerDependencies || {},
-    };
-
-    // Convert to properly formatted JSON string
-    return JSON.stringify(configObject, null, 2);
-  };
-
-  // Initialize editedConfig when component mounts or packageData changes
-  useState(() => {
-    setEditedConfig(generatePackageJson());
-  });
-
-  const handleEditClick = () => {
-    setIsEditing(true);
-    setEditedConfig(generatePackageJson());
-    setSaveMessage('');
-  };
-
-  const handleCancelClick = () => {
-    setIsEditing(false);
-    setEditedConfig(generatePackageJson());
-    setSaveMessage('');
-  };
-
-  const handleSaveClick = async () => {
-    if (!editedConfig.trim()) {
-      setSaveMessage('Configuration cannot be empty');
-      return;
-    }
-
-    setIsSaving(true);
-    setSaveMessage('');
-
-    try {
-      // console.log('Saving package configuration...');
-
-      // Use the MonorepoService to update the package configuration
-      const result = await monorepoService.updatePackageConfiguration(
-        packageData.name,
-        editedConfig,
-        packageData.path as string
-      );
-
-      if (result.success) {
-        setSaveMessage('Configuration updated successfully!');
-        setIsEditing(false);
-        // console.log('Update successful:', result);
-
-        // Optionally trigger a refresh of package data
-        // You might want to call a callback prop here to refresh parent state
-      } else {
-        throw new Error(result.message || 'Update failed');
-      }
-    } catch (error) {
-      console.error('Error saving configuration:', error);
-      setSaveMessage(
-        error instanceof Error
-          ? error.message
-          : 'Failed to save configuration. Please try again.'
-      );
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleConfigChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setEditedConfig(e.target.value);
-    // Clear message when user starts typing again
-    if (saveMessage) setSaveMessage('');
-  };
-
-  const handleCopyToClipboard = async (
-    content: string,
-    type: 'config' | 'script',
-    scriptName?: string
-  ) => {
-    try {
-      await navigator.clipboard.writeText(content);
-
-      if (type === 'config') {
-        setIsConfigCopied(true);
-        setTimeout(() => setIsConfigCopied(false), 4000);
-      } else if (type === 'script' && scriptName) {
-        setCopiedScript(scriptName);
-        setTimeout(() => setCopiedScript(null), 4000);
-      }
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = content;
-      document.body.appendChild(textArea);
-      textArea.select();
-      try {
-        document.execCommand('copy');
-
-        if (type === 'config') {
-          setIsConfigCopied(true);
-          setTimeout(() => setIsConfigCopied(false), 2000);
-        } else if (type === 'script' && scriptName) {
-          setCopiedScript(scriptName);
-          setTimeout(() => setCopiedScript(null), 2000);
-        }
-      } catch (fallbackError) {
-        console.error('Fallback copy failed:', fallbackError);
-        if (type === 'config') {
-          setSaveMessage('Failed to copy to clipboard');
-        }
-      }
-      document.body.removeChild(textArea);
-    }
-  };
-
-  return (
-    <div className="py-6">
-      {/* Scripts Section - Unchanged */}
-      <div className="bg-white border rounded-lg p-6 mb-6">
-        <div className="flex items-center space-x-2 mb-4">
-          <DocumentTextIcon className="w-5 h-5 text-gray-600" />
-          <h3 className="text-lg font-medium text-gray-900">Package Scripts</h3>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {Object.entries(packageData.scripts).map(([scriptName, command]) => (
-            <div
-              key={scriptName}
-              className="border border-gray-200 rounded-lg p-4"
-            >
-              <div className="flex items-center justify-between mb-2">
-                <h4 className="text-sm font-medium text-gray-900">
-                  {scriptName}
-                </h4>
-
-                <div className="flex items-center space-x-2">
-                  <button
-                    onClick={() =>
-                      handleCopyToClipboard(command, 'script', scriptName)
-                    }
-                    className={`text-sm flex items-center space-x-1 ${
-                      copiedScript === scriptName
-                        ? 'text-green-600'
-                        : 'text-gray-600 hover:text-gray-700'
-                    }`}
-                    title="Copy command to clipboard"
-                  >
-                    {copiedScript === scriptName ? (
-                      <>
-                        <ClipboardDocumentCheckIcon className="w-4 h-4" />
-                        <span>Copied!</span>
-                      </>
-                    ) : (
-                      <>
-                        <ClipboardIcon className="w-4 h-4" />
-                        <span>Copy</span>
-                      </>
-                    )}
-                  </button>
-                  <button className="hidden text-blue-600 hover:text-blue-500 text-sm">
-                    Run
-                  </button>
-                </div>
-              </div>
-              <code className="text-xs text-gray-600 bg-gray-100 p-2 rounded block overflow-x-auto">
-                {command}
-              </code>
-            </div>
-          ))}
-        </div>
-
-        {Object.keys(packageData.scripts).length === 0 && (
-          <div className="text-center py-8">
-            <div className="text-gray-400 text-4xl mb-2">📝</div>
-            <p className="text-gray-500">No scripts configured</p>
-          </div>
-        )}
-      </div>
-
-      {/* Package.json Preview/Editor */}
-      <div className="bg-white border rounded-lg p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-gray-900">
-            Package Configuration
-          </h3>
-          {!isEditing && (
-            <div className="text-sm text-gray-500">Read-only preview</div>
-          )}
-        </div>
-
-        {isEditing ? (
-          // Editable Textarea
-          <div className="space-y-4">
-            <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
-              <textarea
-                value={editedConfig}
-                onChange={handleConfigChange}
-                className="w-full h-96 bg-gray-900 text-gray-100 text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
-                spellCheck="false"
-              />
-            </div>
-
-            {/* Save Message */}
-            {saveMessage && (
-              <div
-                className={`p-3 rounded-lg text-sm ${
-                  saveMessage.includes('successfully')
-                    ? 'bg-green-50 text-green-700 border border-green-200'
-                    : 'bg-red-50 text-red-700 border border-red-200'
-                }`}
-              >
-                {saveMessage}
-              </div>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex space-x-3">
-              <button
-                onClick={handleSaveClick}
-                disabled={isSaving}
-                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed text-sm flex items-center space-x-2"
-              >
-                {isSaving ? (
-                  <>
-                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                    <span>Saving...</span>
-                  </>
-                ) : (
-                  <span>Save Changes</span>
-                )}
-              </button>
-              <button
-                onClick={handleCancelClick}
-                disabled={isSaving}
-                className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        ) : (
-          <>
-            <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
-              <pre className="text-sm">{editedConfig}</pre>
-            </div>
-
-            <div className="mt-4 flex space-x-3">
-              <button
-                onClick={handleEditClick}
-                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm"
-              >
-                Edit Configuration
-              </button>
-              <button
-                onClick={() =>
-                  handleCopyToClipboard(
-                    isEditing ? editedConfig : generatePackageJson(),
-                    'config'
-                  )
-                }
-                className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 text-sm flex items-center space-x-2"
-              >
-                {isConfigCopied ? (
-                  <>
-                    <ClipboardDocumentCheckIcon className="w-4 h-4 text-green-600" />
-                    <span>Copied!</span>
-                  </>
-                ) : (
-                  <>
-                    <ClipboardIcon className="w-4 h-4" />
-                    <span>Copy</span>
-                  </>
-                )}
-              </button>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/DependenciesTab.tsx

@@ -1,154 +0,0 @@
-import { ArrowUpIcon } from '../../../../icons/heroicons';
-import { PackageDetail } from '../types/packages.types';
-import type { DependenciesTabProps } from '../../../../types';
-import { getDependencyStatusColor } from '../utils/packages.utils';
-
-export default function DependenciesTab({ packageData }: DependenciesTabProps) {
-  if (!packageData.dependenciesInfo.length) {
-    return <p className="py-6 text-gray-600">No dependency found.</p>;
-  }
-  const renderDependencyTable = (
-    dependencies: PackageDetail['dependenciesInfo'],
-    title: string
-  ) => (
-    <div className="mb-8">
-      <h3 className="text-lg font-medium text-gray-900 mb-4">{title}</h3>
-      <div className="bg-white border rounded-lg overflow-hidden">
-        <table className="w-full">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Package
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Current
-              </th>
-              <th className="hidden px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Latest
-              </th>
-              <th className="hidden px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
-              </th>
-              <th className="hidden px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {dependencies.map(dep => (
-              <tr key={dep.name} className="hover:bg-gray-50">
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm font-medium text-gray-900">
-                    {dep.name}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm font-mono text-gray-700">
-                    {dep.version}
-                  </span>
-                </td>
-                <td className="hidden px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm font-mono text-gray-700">
-                    {dep.latest}
-                  </span>
-                </td>
-                <td className="hidden px-6 py-4 whitespace-nowrap">
-                  <span
-                    className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getDependencyStatusColor(dep.status)}`}
-                  >
-                    {dep.status.replace('-', ' ')}
-                  </span>
-                </td>
-                <td className="hidden px-6 py-4 whitespace-nowrap text-sm">
-                  {dep.status !== 'up-to-date' && (
-                    <button className="text-blue-600 hover:text-blue-500 flex items-center space-x-1">
-                      <ArrowUpIcon className="w-4 h-4" />
-                      <span>Update</span>
-                    </button>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="py-6">
-      {renderDependencyTable(
-        packageData.dependenciesInfo.filter(d => d.type == 'dependency'),
-        'Dependencies'
-      )}
-      {renderDependencyTable(
-        packageData.dependenciesInfo.filter(d => d.type == 'devDependency'),
-        'Dev Dependencies'
-      )}
-      {renderDependencyTable(
-        packageData.dependenciesInfo.filter(d => d.type == 'peerDependency'),
-        'Peer Dependencies'
-      )}
-
-      {/* Dependency Summary */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-        <h4 className="font-medium text-blue-900 mb-2">Dependency Summary</h4>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-          <div>
-            <span className="font-medium text-blue-800">
-              Total Dependencies:
-            </span>
-            <span className="ml-2 text-blue-700">
-              {
-                packageData.dependenciesInfo.filter(d => d.type == 'dependency')
-                  .length
-              }
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-blue-800">Dev Dependencies:</span>
-            <span className="ml-2 text-blue-700">
-              {
-                packageData.dependenciesInfo.filter(
-                  d => d.type == 'devDependency'
-                ).length
-              }
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-blue-800">
-              Peer Dependencies:
-            </span>
-            <span className="ml-2 text-blue-700">
-              {
-                packageData.dependenciesInfo.filter(
-                  d => d.type == 'peerDependency'
-                ).length
-              }
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-blue-800">Outdated:</span>
-            <span className="ml-2 text-blue-700">
-              {
-                packageData.dependenciesInfo.filter(
-                  d => d.status === 'outdated'
-                ).length
-              }
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-blue-800">Major Updates:</span>
-            <span className="ml-2 text-blue-700">
-              {
-                packageData.dependenciesInfo.filter(
-                  d => d.status === 'major-update'
-                ).length
-              }
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/ErrorState.tsx

@@ -1,21 +0,0 @@
-import { ExclamationTriangleIcon } from '../../../../icons/heroicons';
-import { ErrorStateProps } from '../types/packages.types';
-
-export default function ErrorState({ error, onRetry }: ErrorStateProps) {
-  return (
-    <div className="flex items-center justify-center h-64">
-      <div className="text-center">
-        <ExclamationTriangleIcon className="w-12 h-12 text-red-500 mx-auto" />
-        <p className="mt-4 text-red-600">{error}</p>
-        {onRetry && (
-          <button
-            onClick={onRetry}
-            className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            Retry
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}