@manojkmfsi/monodog 1.1.38 → 1.1.39

package/monodog-dashboard/src/components/modules/dependency-graph/components/DependencyList.tsx

@@ -1,177 +0,0 @@
-import { Link } from 'react-router-dom';
-import { ArrowUpIcon, ArrowDownIcon } from '../../../../icons/heroicons';
-import { CubeIcon } from '../../../../icons/heroicons';
-import { DependencyListProps } from '../types/dependency.types';
-import {
-  getStatusColor,
-  getTypeColor,
-  getPackageTypeIcon,
-} from '../utils/dependency.utils';
-
-export default function DependencyList({
-  packages,
-  selectedPackage,
-  onPackageSelect,
-  sortBy,
-  sortOrder,
-  onSortChange,
-}: DependencyListProps) {
-  const handleSort = (field: string) => {
-    const newOrder = sortBy === field && sortOrder === 'asc' ? 'desc' : 'asc';
-    onSortChange(field, newOrder);
-  };
-
-  const getSortIcon = (field: string) => {
-    if (sortBy !== field) return null;
-    return sortOrder === 'asc' ? (
-      <ArrowUpIcon className="w-4 h-4" />
-    ) : (
-      <ArrowDownIcon className="w-4 h-4" />
-    );
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-      <div className="p-6 border-b border-gray-200">
-        <h3 className="text-lg font-medium text-gray-900">
-          Package Dependencies
-        </h3>
-        <p className="text-sm text-gray-600 mt-1">
-          Click on a view details to explore its dependencies, commits,
-          configuration and health
-        </p>
-      </div>
-
-      <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-                onClick={() => handleSort('name')}
-              >
-                <div className="flex items-center space-x-1">
-                  <span>Package</span>
-                  {getSortIcon('name')}
-                </div>
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Type
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
-              </th>
-              <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-                onClick={() => handleSort('dependencies')}
-              >
-                <div className="flex items-center space-x-1">
-                  <span>Dependencies</span>
-                  {getSortIcon('dependencies')}
-                </div>
-              </th>
-              <th
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-                onClick={() => handleSort('dependents')}
-              >
-                <div className="flex items-center space-x-1">
-                  <span>Dependents</span>
-                  {getSortIcon('dependents')}
-                </div>
-              </th>
-              <th className="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">
-            {packages.map(pkg => (
-              <tr
-                key={pkg.name}
-                className={`hover:bg-gray-50 cursor-pointer transition-colors ${
-                  selectedPackage === pkg.name ? 'bg-blue-50' : ''
-                }`}
-                onClick={() => onPackageSelect(pkg.name)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex items-center">
-                    <div className="text-2xl mr-3">
-                      {getPackageTypeIcon(pkg.type)}
-                    </div>
-                    <div>
-                      <div className="text-sm font-medium text-gray-900">
-                        {pkg.name}
-                      </div>
-                      <div className="text-sm text-gray-500">
-                        v{pkg.version}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span
-                    className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getTypeColor(pkg.type)}`}
-                  >
-                    {pkg.type}
-                  </span>
-                </td>
-
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span
-                    className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(pkg.status)}`}
-                  >
-                    {pkg.status}
-                  </span>
-                </td>
-
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-gray-900">
-                    {Object.keys(pkg.dependencies).length}
-                    {Object.keys(pkg.dependencies).length > 0 && (
-                      <div className="text-xs text-gray-500 mt-1">
-                        {Object.keys(pkg.dependencies).slice(0, 3).join(', ')}
-                        {Object.keys(pkg.dependencies).length > 3 &&
-                          ` +${Object.keys(pkg.dependencies).length - 3} more`}
-                      </div>
-                    )}
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-gray-900">
-                    {pkg.dependents.length}
-                    {pkg.dependents.length > 0 && (
-                      <div className="text-xs text-gray-500 mt-1">
-                        {pkg.dependents.slice(0, 3).join(', ')}
-                        {pkg.dependents.length > 3 &&
-                          ` +${pkg.dependents.length - 3} more`}
-                      </div>
-                    )}
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 whitespace-nowrap text-sm">
-                  <Link
-                    to={`/packages/${encodeURIComponent(pkg.name)}`}
-                    className="text-blue-600 hover:text-blue-500"
-                    onClick={e => e.stopPropagation()}
-                  >
-                    View Details
-                  </Link>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {packages.length === 0 && (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-4xl mb-2 flex justify-center"><CubeIcon className="w-6 h-6 text-primary-600" /></div>
-          <p className="text-gray-500">No packages found</p>
-        </div>
-      )}
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/ErrorState.tsx

@@ -1,25 +0,0 @@
-import { ExclamationTriangleIcon } from '../../../../icons/heroicons';
-
-interface ErrorStateProps {
-  error: string;
-  onRetry?: () => void;
-}
-
-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>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/GraphLegend.tsx

@@ -1,89 +0,0 @@
-import type { GraphLegendProps } from '../../../../types';
-import { ArrowLongRightIcon } from '../../../../icons'
-
-export default function GraphLegend({ show }: GraphLegendProps) {
-  if (!show) return null;
-
-  return (
-    <div className="bg-white p-4 rounded-lg shadow border">
-      <h4 className="text-sm font-medium text-gray-900 mb-3">Legend</h4>
-
-      <div className="space-y-4">
-        {/* Package Types */}
-        <div>
-          <h5 className="text-xs font-medium text-gray-700 mb-2">
-            Package Types
-          </h5>
-          <div className="grid grid-cols-3 gap-2 text-xs">
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-2 bg-blue-500 rounded"></div>
-              <span>App</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-2 bg-purple-500 rounded"></div>
-              <span>Library</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-2 bg-orange-500 rounded"></div>
-              <span>Tool</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Status Indicators */}
-        <div>
-          <h5 className="text-xs font-medium text-gray-700 mb-2">
-            Health Status
-          </h5>
-          <div className="grid grid-cols-3 gap-2 text-xs">
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-              <span>Healthy</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
-              <span>Warning</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-red-500 rounded-full"></div>
-              <span>Error</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Visual Elements */}
-        <div>
-          <h5 className="text-xs font-medium text-gray-700 mb-2">
-            Visual Elements
-          </h5>
-          <div className="space-y-1 text-xs">
-            <div className="flex items-center space-x-2">
-              <ArrowLongRightIcon></ArrowLongRightIcon>
-              <span>Dependency</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-6 h-4 border-2 border-blue-500 rounded bg-white"></div>
-              <span>Selected</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="w-6 h-4 border-2 border-green-500 rounded bg-white"></div>
-              <span>Connected</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Interaction Guide */}
-        <div>
-          <h5 className="text-xs font-medium text-gray-700 mb-2">
-            Interactions
-          </h5>
-          <div className="space-y-1 text-xs text-gray-600">
-            <div>• Click a package to select and view details</div>
-            <div>• Hover to highlight connections</div>
-            <div>• Use toolbar to change layout and zoom</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/GraphStats.tsx

@@ -1,141 +0,0 @@
-import {
-  CubeIcon,
-  ArrowPathIcon,
-  ExclamationTriangleIcon,
-  ChartBarIcon,
-  LinkIcon,
-} from '../../../../icons/heroicons';
-import { GraphStatsProps } from '../types/dependency.types';
-
-export default function GraphStats({ stats, packages }: GraphStatsProps) {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-      {/* Total Packages */}
-      <div className="bg-gray-100 p-4 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 rounded-lg">
-            <CubeIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Total Packages</p>
-            <p className="text-2xl font-semibold text-gray-900">
-              {stats.totalPackages}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Total Dependencies */}
-      <div className="bg-blue-100 p-4 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 rounded-lg">
-            <LinkIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Dependencies</p>
-            <p className="text-2xl font-semibold text-gray-900">
-              {stats.totalDependencies}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Circular Dependencies */}
-      <div className={`${
-                stats.circularDependencies > 0
-                  ? 'bg-red-100'
-                  : 'bg-green-100'
-              } p-4 rounded-lg shadow border`} >
-        <div className="flex items-center">
-          <div
-            className={`p-2 rounded-lg ${
-              stats.circularDependencies > 0 ? 'bg-red-100' : 'bg-green-100'
-            }`}
-          >
-            <ExclamationTriangleIcon
-              className={`w-6 h-6 ${
-                stats.circularDependencies > 0
-                  ? 'text-red-600'
-                  : 'text-primary-600'
-              }`}
-            />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Circular Deps</p>
-            <p
-              className={`text-2xl font-semibold ${
-                stats.circularDependencies > 0
-                  ? 'text-red-600'
-                  : 'text-gray-600'
-              }`}
-            >
-              {stats.circularDependencies}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Max Depth */}
-      <div className="bg-purple-100 p-4 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 bg-purple-100 rounded-lg">
-            <ChartBarIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Max Depth</p>
-            <p className="text-2xl font-semibold text-gray-900">
-              {stats.maxDepth}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Detailed Stats */}
-      <div className="md:col-span-4 bg-white p-4 rounded-lg shadow border">
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
-          Dependency Analysis
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="text-center bg-gray-100 p-2">
-            <div className="text-2xl font-bold text-blue-600">
-              {stats.leafPackages}
-            </div>
-            <div className="text-sm text-gray-600">Leaf Packages</div>
-            <div className="text-xs text-gray-500">No dependencies</div>
-          </div>
-
-          <div className="text-center bg-gray-100 p-2">
-            <div className="text-2xl font-bold text-green-600">
-              {stats.rootPackages}
-            </div>
-            <div className="text-sm text-gray-600">Root Packages</div>
-            <div className="text-xs text-gray-500">No dependents</div>
-          </div>
-
-          <div className="text-center bg-gray-100 p-2">
-            <div className="text-2xl font-bold text-purple-600">
-              {stats.avgDependencies}
-            </div>
-            <div className="text-sm text-gray-600">Avg Dependencies</div>
-            <div className="text-xs text-gray-500">Per package</div>
-          </div>
-
-          <div className="text-center bg-gray-100 p-2">
-            <div className="text-2xl font-bold text-orange-600">
-              {packages.filter(p => p.status === 'healthy').length}
-            </div>
-            <div className="text-sm text-gray-600">Healthy Packages</div>
-            <div className="text-xs text-gray-500">
-              {Math.round(
-                (packages.filter(p => p.status === 'healthy').length /
-                  packages.length) *
-                  100
-              )}
-              % of total
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/GraphToolbar.tsx

@@ -1,107 +0,0 @@
-import {
-  Squares2X2Icon,
-  ListBulletIcon,
-  InformationCircleIcon,
-  MagnifyingGlassMinusIcon,
-  MagnifyingGlassPlusIcon,
-} from '../../../../icons/heroicons';
-import { GraphToolbarProps } from '../types/dependency.types';
-
-export default function GraphToolbar({
-  viewMode,
-  onViewModeChange,
-  layout,
-  onLayoutChange,
-  showLegend,
-  onToggleLegend,
-  zoomLevel,
-  onZoomChange,
-}: GraphToolbarProps) {
-  return (
-    <div className="bg-white p-4 rounded-lg shadow border flex items-center justify-between">
-      {/* View Mode Toggle */}
-      <div className="flex items-center space-x-2">
-        <span className="text-sm font-medium text-gray-700">View:</span>
-        <div className="flex rounded-lg border border-gray-300 overflow-hidden">
-          <button
-            onClick={() => onViewModeChange('graph')}
-            className={`px-3 py-2 text-sm font-medium flex items-center space-x-1 ${
-              viewMode === 'graph'
-                ? 'bg-blue-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50'
-            }`}
-          >
-            <Squares2X2Icon className="w-4 h-4" />
-            <span>Graph</span>
-          </button>
-          <button
-            onClick={() => onViewModeChange('list')}
-            className={`px-3 py-2 text-sm font-medium flex items-center space-x-1 ${
-              viewMode === 'list'
-                ? 'bg-blue-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50'
-            }`}
-          >
-            <ListBulletIcon className="w-4 h-4" />
-            <span>List</span>
-          </button>
-        </div>
-      </div>
-
-      {/* Graph Layout Controls (only show in graph view) */}
-      {viewMode === 'graph' && (
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center space-x-2">
-            <span className="text-sm font-medium text-gray-700">Layout:</span>
-            <select
-              value={layout}
-              onChange={e => onLayoutChange(e.target.value as any)}
-              className="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            >
-              <option value="hierarchical">Hierarchical</option>
-              <option value="circular">Circular</option>
-              <option value="force">Force-Directed</option>
-            </select>
-          </div>
-
-          {/* Zoom Controls */}
-          <div className="flex items-center space-x-2">
-            <span className="text-sm font-medium text-gray-700">Zoom:</span>
-            <div className="flex items-center space-x-1">
-              <button
-                onClick={() => onZoomChange(Math.max(0.5, zoomLevel - 0.1))}
-                className="p-1 text-gray-600 hover:text-gray-800 disabled:opacity-50"
-                disabled={zoomLevel <= 0.5}
-              >
-                <MagnifyingGlassMinusIcon className="w-4 h-4" />
-              </button>
-              <span className="text-sm text-gray-600 min-w-[3rem] text-center">
-                {Math.round(zoomLevel * 100)}%
-              </span>
-              <button
-                onClick={() => onZoomChange(Math.min(2, zoomLevel + 0.1))}
-                className="p-1 text-gray-600 hover:text-gray-800 disabled:opacity-50"
-                disabled={zoomLevel >= 2}
-              >
-                <MagnifyingGlassPlusIcon className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Legend Toggle */}
-      <button
-        onClick={onToggleLegend}
-        className={`px-3 py-2 text-sm font-medium rounded-lg flex items-center space-x-1 transition-colors ${
-          showLegend
-            ? 'bg-blue-100 text-blue-700'
-            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-        }`}
-      >
-        <InformationCircleIcon className="w-4 h-4" />
-        <span>Legend</span>
-      </button>
-    </div>
-  );
-}