@manojkmfsi/monodog 1.1.38 → 1.1.39

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

@@ -1,163 +0,0 @@
-import { Link } from 'react-router-dom';
-import { ArrowUpIcon, ArrowDownIcon } from '../../../../icons/heroicons';
-import { Package, PackageSorting } from '../types/packages.types';
-import type { PackagesTableProps } from '../../../../types';
-import {
-  getStatusColor,
-  getTypeColor,
-  formatDate,
-  formatVersion,
-  getPackageTypeIcon,
-} from '../utils/packages.utils';
-
-export default function PackagesTable({
-  packages,
-  sorting,
-  onSortChange,
-}: PackagesTableProps) {
-  const handleSort = (field: PackageSorting['field']) => {
-    const newOrder =
-      sorting.field === field && sorting.order === 'asc' ? 'desc' : 'asc';
-    onSortChange({ field, order: newOrder });
-  };
-
-  const getSortIcon = (field: string) => {
-    if (sorting.field !== field) return null;
-    return sorting.order === 'asc' ? (
-      <ArrowUpIcon className="w-4 h-4" />
-    ) : (
-      <ArrowDownIcon className="w-4 h-4" />
-    );
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow border overflow-hidden">
-      <div className="overflow-x-auto">
-        <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 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 cursor-pointer hover:bg-gray-100"
-                onClick={() => handleSort('version')}
-              >
-                <div className="flex items-center space-x-1">
-                  <span>Version</span>
-                  {getSortIcon('version')}
-                </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('lastUpdated')}
-              >
-                <div className="flex items-center space-x-1">
-                  <span>Last Updated</span>
-                  {getSortIcon('lastUpdated')}
-                </div>
-              </th>
-              <th className="hidden px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Maintainers
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {packages.map(pkg => (
-              <tr key={pkg.name} className="hover:bg-gray-50">
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex items-center">
-                    <div className="text-2xl mr-3">
-                      {getPackageTypeIcon(pkg.type)}
-                    </div>
-                    <div>
-                      <Link
-                        to={`/packages/${encodeURIComponent(pkg.name)}`}
-                        className="text-sm font-medium text-blue-600 hover:text-blue-500"
-                      >
-                        {pkg.name}
-                      </Link>
-                      <div className="text-sm text-gray-500">
-                        {pkg.description}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm font-mono text-gray-900">
-                    {formatVersion(pkg.version)}
-                  </span>
-                </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 text-sm text-gray-900">
-                  {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>
-                  )}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {formatDate(pkg.lastUpdated)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex -space-x-1">
-                    {pkg.maintainers.slice(0, 3).map((maintainer, index) => (
-                      <div
-                        key={maintainer}
-                        className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-gray-500 text-xs font-medium text-white"
-                        title={maintainer}
-                      >
-                        {maintainer.charAt(0).toUpperCase()}
-                      </div>
-                    ))}
-                    {pkg.maintainers.length > 3 && (
-                      <div className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-gray-300 text-xs font-medium text-gray-600">
-                        +{pkg.maintainers.length - 3}
-                      </div>
-                    )}
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

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

@@ -1,90 +0,0 @@
-import { PackageDetail } from '../types/packages.types';
-import type { RecentCommitsTabProps } from '../../../../types';
-import { getCommitTypeColor, formatDate } from '../utils/packages.utils';
-
-export default function RecentCommitsTab({
-  packageData,
-}: RecentCommitsTabProps) {
-  return (
-    <div className="py-6">
-      <h3 className="text-lg font-medium text-gray-900 mb-4">Recent Commits</h3>
-
-      <div className="space-y-4">
-        {packageData.commits.map(commit => (
-          <div
-            key={commit.hash}
-            className="bg-white border rounded-lg p-4 hover:shadow-md transition-shadow"
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex-1">
-                <div className="flex items-center space-x-3 mb-2">
-                  <span
-                    className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getCommitTypeColor(commit.type)}`}
-                  >
-                    {commit.type}
-                  </span>
-                  <span className="text-sm font-mono text-gray-500">
-                    {commit.hash}
-                  </span>
-                </div>
-
-                <p className="text-sm font-medium text-gray-900 mb-2">
-                  {commit.message}
-                </p>
-
-                <div className="flex items-center space-x-4 text-sm text-gray-500">
-                  <span>by {commit.author}</span>
-                  <span>{formatDate(commit.date)}</span>
-                </div>
-              </div>
-
-              <div className="hidden ml-4">
-                <button className="text-blue-600 hover:text-blue-500 text-sm">
-                  View Diff
-                </button>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {packageData.commits.length === 0 && (
-        <div className="text-center py-8">
-          <div className="text-gray-400 text-4xl mb-2">📝</div>
-          <p className="text-gray-500">No recent commits found</p>
-        </div>
-      )}
-
-      {/* Commit Summary */}
-      <div className="mt-6 bg-gray-50 border border-gray-200 rounded-lg p-4">
-        <h4 className="font-medium text-gray-900 mb-2">Commit Summary</h4>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-          <div>
-            <span className="font-medium text-gray-800">Features:</span>
-            <span className="ml-2 text-gray-600">
-              {packageData.commits.filter(c => c.type === 'feat').length}
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-gray-800">Fixes:</span>
-            <span className="ml-2 text-gray-600">
-              {packageData.commits.filter(c => c.type === 'fix').length}
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-gray-800">Chores:</span>
-            <span className="ml-2 text-gray-600">
-              {packageData.commits.filter(c => c.type === 'chore').length}
-            </span>
-          </div>
-          <div>
-            <span className="font-medium text-gray-800">Breaking:</span>
-            <span className="ml-2 text-gray-600">
-              {packageData.commits.filter(c => c.type === 'breaking').length}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,66 +0,0 @@
-import { MagnifyingGlassIcon, FunnelIcon } from '../../../../icons/heroicons';
-import { PackageFilters } from '../types/packages.types';
-import type { SearchAndFilterProps } from '../../../../types';
-
-export default function SearchAndFilter({
-  filters,
-  onFiltersChange,
-  availableTypes,
-  availableStatuses,
-}: SearchAndFilterProps) {
-  return (
-    <div className="bg-white p-6 rounded-lg shadow border">
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 md:space-x-4">
-        {/* Search */}
-        <div className="flex-1 relative">
-          <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
-          <input
-            type="text"
-            placeholder="Search packages by name, description, or tags..."
-            value={filters.search}
-            onChange={e =>
-              onFiltersChange({ ...filters, search: e.target.value })
-            }
-            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          />
-        </div>
-
-        {/* Filters */}
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center space-x-2">
-            <FunnelIcon className="h-5 w-5 text-gray-400" />
-            <select
-              value={filters.type}
-              onChange={e =>
-                onFiltersChange({ ...filters, type: e.target.value })
-              }
-              className="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            >
-              <option value="all">All Types</option>
-              {availableTypes.map(type => (
-                <option key={type} value={type}>
-                  {type.charAt(0).toUpperCase() + type.slice(1)}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <select
-            value={filters.status}
-            onChange={e =>
-              onFiltersChange({ ...filters, status: e.target.value })
-            }
-            className="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          >
-            <option value="all">All Status</option>
-            {availableStatuses.map(status => (
-              <option key={status} value={status}>
-                {status.charAt(0).toUpperCase() + status.slice(1)}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/index.ts

@@ -1,12 +0,0 @@
-// Export all packages module components for easier imports
-export { default as LoadingState } from './LoadingState';
-export { default as ErrorState } from './ErrorState';
-export { default as PackageStats } from './PackageStats';
-export { default as SearchAndFilter } from './SearchAndFilter';
-export { default as PackagesTable } from './PackagesTable';
-export { default as PackageDetailHeader } from './PackageDetailHeader';
-export { default as PackageDetailTabs } from './PackageDetailTabs';
-export { default as DependenciesTab } from './DependenciesTab';
-export { default as RecentCommitsTab } from './RecentCommitsTab';
-export { default as HealthMetricsTab } from './HealthMetricsTab';
-export { default as ConfigurationTab } from './ConfigurationTab';

package/monodog-dashboard/src/components/modules/packages/types/packages.types.ts

@@ -1,101 +0,0 @@
-// Shared types for packages module components
-
-import type { DependencyInfo } from '@/services/monorepoService';
-import type { PackageHealth } from '../../health-status/types/health.types';
-
-export interface Package {
-  name: string;
-  version: string;
-  type: 'app' | 'lib' | 'tool' | 'service';
-  status: 'healthy' | 'warning' | 'error' | 'building';
-  lastUpdated: string;
-  dependencies: string[];
-  maintainers: string[];
-  tags: string[];
-  description: string;
-  path: string;
-  private?: boolean;
-  scripts?: Record<string, string>;
-  peerDependencies?: string[];
-  devDependencies?: string[];
-  dependents: string[];
-  packageHealth: PackageHealth;
-}
-
-export interface Dependency {
-  name: string;
-  version: string;
-  latest: string;
-  status: 'up-to-date' | 'outdated' | 'major-update';
-}
-
-export interface Commit {
-  hash: string;
-  message: string;
-  author: string;
-  date: string;
-  type: 'feat' | 'fix' | 'chore' | 'breaking';
-}
-
-export interface PackageDetail {
-  name: string;
-  version: string;
-  type: 'app' | 'lib' | 'tool';
-  status: 'healthy' | 'warning' | 'error';
-  description: string;
-  lastUpdated: string;
-  dependencies: Dependency[];
-  devDependencies: Dependency[];
-  peerDependencies: Dependency[];
-  maintainers: string[];
-  tags: string[];
-  repository: string;
-  license: string;
-  scripts: Record<string, string>;
-  commits: Commit[];
-  packageHealth: PackageHealth;
-  buildStatus: 'success' | 'failed' | 'running' | 'unknown';
-  testCoverage: number;
-  lintStatus: 'pass' | 'fail' | 'warning';
-  dependenciesInfo: DependencyInfo[];
-  path: string;
-}
-
-export interface PackageStats {
-  total: number;
-  healthy: number;
-  warnings: number;
-  errors: number;
-}
-
-export interface PackageFilters {
-  search: string;
-  type: string;
-  status: string;
-}
-
-export interface PackageSorting {
-  field: 'name' | 'version' | 'lastUpdated' | 'dependencies';
-  order: 'asc' | 'desc';
-}
-
-export type PackageDetailTab =
-  | 'overview'
-  | 'dependencies'
-  | 'commits'
-  | 'health'
-  | 'config';
-
-export interface PackageDetailTabsProps {
-  activeTab: PackageDetailTab;
-  onTabChange: (tab: PackageDetailTab) => void;
-}
-
-export interface LoadingStateProps {
-  message?: string;
-}
-
-export interface ErrorStateProps {
-  error: string;
-  onRetry?: () => void;
-}

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

@@ -1,178 +0,0 @@
-import {
-  Package,
-  PackageStats,
-  PackageFilters,
-  PackageSorting,
-} from '../types/packages.types';
-import { BuildingLibraryIcon } from '../../../../icons/heroicons';
-import { RocketLaunchIcon } from '../../../../icons/heroicons';
-import { CubeIcon } from '../../../../icons/heroicons';
-// Calculate package statistics
-export const calculatePackageStats = (packages: Package[]): PackageStats => {
-  return {
-    total: packages.length,
-    healthy: packages.filter(p => p.status === 'healthy').length,
-    warnings: packages.filter(p => p.status === 'warning').length,
-    errors: packages.filter(p => p.status === 'error').length,
-  };
-};
-
-// Get unique package types
-export const getUniquePackageTypes = (packages: Package[]): string[] => {
-  return [...new Set(packages.map(pkg => pkg.type))];
-};
-
-// Get unique package statuses
-export const getUniquePackageStatuses = (packages: Package[]): string[] => {
-  return [...new Set(packages.map(pkg => pkg.status))];
-};
-
-// Filter packages based on search, type, and status
-export const filterPackages = (
-  packages: Package[],
-  filters: PackageFilters
-): Package[] => {
-  return packages.filter(pkg => {
-    const matchesSearch =
-      pkg.name.toLowerCase().includes(filters.search.toLowerCase()) ||
-      pkg.description.toLowerCase().includes(filters.search.toLowerCase());
-    // ||
-    // pkg.tags.some(tag =>
-    //   tag.toLowerCase().includes(filters.search.toLowerCase())
-    // )
-    const matchesType = filters.type === 'all' || pkg.type === filters.type;
-    const matchesStatus =
-      filters.status === 'all' || pkg.status === filters.status;
-
-    return matchesSearch && matchesType && matchesStatus;
-  });
-};
-
-// Sort packages
-export const sortPackages = (
-  packages: Package[],
-  sorting: PackageSorting
-): Package[] => {
-  return [...packages].sort((a, b) => {
-    let aValue: any;
-    let bValue: any;
-
-    switch (sorting.field) {
-      case 'name':
-        aValue = a.name.toLowerCase();
-        bValue = b.name.toLowerCase();
-        break;
-      case 'version':
-        aValue = a.version;
-        bValue = b.version;
-        break;
-      case 'lastUpdated':
-        aValue = new Date(a.lastUpdated);
-        bValue = new Date(b.lastUpdated);
-        break;
-      case 'dependencies':
-        aValue = Object.keys(a.dependencies).length;
-        bValue = Object.keys(b.dependencies).length;
-        break;
-      default:
-        return 0;
-    }
-
-    if (aValue < bValue) return sorting.order === 'asc' ? -1 : 1;
-    if (aValue > bValue) return sorting.order === 'asc' ? 1 : -1;
-    return 0;
-  });
-};
-
-// Get status color classes
-export const getStatusColor = (status: string): string => {
-  switch (status) {
-    case 'healthy':
-      return 'bg-green-100 text-green-800';
-    case 'warning':
-      return 'bg-yellow-100 text-yellow-800';
-    case 'error':
-      return 'bg-red-100 text-red-800';
-    case 'building':
-      return 'bg-blue-100 text-blue-800';
-    default:
-      return 'bg-gray-100 text-gray-800';
-  }
-};
-
-// Get type color classes
-export const getTypeColor = (type: string): string => {
-  switch (type) {
-    case 'app':
-      return 'bg-blue-100 text-blue-800';
-    case 'lib':
-      return 'bg-purple-100 text-purple-800';
-    case 'tool':
-      return 'bg-orange-100 text-orange-800';
-    case 'service':
-      return 'bg-green-100 text-green-800';
-    default:
-      return 'bg-gray-100 text-gray-800';
-  }
-};
-
-// Get dependency status color classes
-export const getDependencyStatusColor = (status: string): string => {
-  switch (status) {
-    case 'up-to-date':
-      return 'bg-green-100 text-green-800';
-    case 'outdated':
-      return 'bg-yellow-100 text-yellow-800';
-    case 'major-update':
-      return 'bg-red-100 text-red-800';
-    default:
-      return 'bg-gray-100 text-gray-800';
-  }
-};
-
-// Get commit type color classes
-export const getCommitTypeColor = (type: string): string => {
-  switch (type) {
-    case 'feature':
-      return 'bg-blue-100 text-blue-800';
-    case 'fix':
-      return 'bg-green-100 text-green-800';
-    case 'chore':
-      return 'bg-gray-100 text-gray-800';
-    case 'breaking':
-      return 'bg-red-100 text-red-800';
-    default:
-      return 'bg-gray-100 text-gray-800';
-  }
-};
-
-// Format date for display
-export const formatDate = (dateString: string): string => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
-// Format version for display
-export const formatVersion = (version: string): string => {
-  return version.startsWith('v') ? version : `v${version}`;
-};
-
-// Get package type icon
-export const getPackageTypeIcon = (type: string): React.ReactNode => {
-  switch (type) {
-    case 'app':
-      return <RocketLaunchIcon className="w-6 h-6 text-primary-600" />;
-    case 'lib':
-      return <BuildingLibraryIcon className="w-6 h-6 text-primary-600" />;
-    case 'tool':
-      return '🔧';
-    case 'service':
-      return '🌐';
-    default:
-      return <CubeIcon className="w-6 h-6 text-primary-600" />;
-  }
-};