@manojkmfsi/monodog 1.1.35 → 1.1.37

package/monodog-dashboard/src/components/configuration/components/MonorepoSettings.tsx

@@ -0,0 +1,179 @@
+import { SettingsComponentProps } from '../types/config.types';
+import { stringToArray, arrayToString } from '../utils/config.utils';
+
+export default function MonorepoSettings({
+  config,
+  onConfigChange,
+}: SettingsComponentProps) {
+  const handleMonorepoChange = (field: string, value: any) => {
+    onConfigChange({
+      monorepo: { ...config.monorepo, [field]: value },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium text-gray-900 mb-4">
+          Monorepo Configuration
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Structure Type
+            </label>
+            <select
+              value={config.monorepo?.structure || 'standard'}
+              onChange={e => handleMonorepoChange('structure', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              <option value="standard">Standard (apps/packages/libs)</option>
+              <option value="custom">Custom Structure</option>
+            </select>
+            <p className="text-xs text-gray-500 mt-1">
+              Choose your monorepo directory structure
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Package Manager
+            </label>
+            <select
+              value={config.monorepo?.packageManager || 'pnpm'}
+              onChange={e =>
+                handleMonorepoChange('packageManager', e.target.value)
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              <option value="pnpm">pnpm</option>
+              <option value="npm">npm</option>
+              <option value="yarn">Yarn</option>
+              <option value="lerna">Lerna</option>
+              <option value="nx">Nx</option>
+            </select>
+            <p className="text-xs text-gray-500 mt-1">
+              Package manager used in your monorepo
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Package Directories
+            </label>
+            <input
+              type="text"
+              value={arrayToString(config.monorepo?.directories)}
+              onChange={e =>
+                handleMonorepoChange(
+                  'directories',
+                  stringToArray(e.target.value)
+                )
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="apps, packages, libs, services"
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Directories containing packages
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Ignore Patterns
+            </label>
+            <input
+              type="text"
+              value={arrayToString(config.monorepo?.ignorePatterns)}
+              onChange={e =>
+                handleMonorepoChange(
+                  'ignorePatterns',
+                  stringToArray(e.target.value)
+                )
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="node_modules, dist, .git"
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Patterns to ignore when scanning
+            </p>
+          </div>
+        </div>
+
+        {/* Configuration Preview */}
+        <div className="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
+          <h4 className="text-sm font-medium text-gray-900 mb-3">
+            Configuration Preview
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="font-medium text-gray-700">Structure:</span>
+              <span className="ml-2 text-gray-600 capitalize">
+                {config.monorepo?.structure || 'standard'}
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">
+                Package Manager:
+              </span>
+              <span className="ml-2 text-gray-600">
+                {config.monorepo?.packageManager || 'pnpm'}
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">Directories:</span>
+              <span className="ml-2 text-gray-600">
+                {config.monorepo?.directories?.length || 0} configured
+              </span>
+            </div>
+            <div>
+              <span className="font-medium text-gray-700">
+                Ignore Patterns:
+              </span>
+              <span className="ml-2 text-gray-600">
+                {config.monorepo?.ignorePatterns?.length || 0} patterns
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Package Manager Specific Tips */}
+        {config.monorepo?.packageManager && (
+          <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+            <h4 className="text-sm font-medium text-blue-900 mb-2">
+              {config.monorepo.packageManager.toUpperCase()} Configuration Tips
+            </h4>
+            <div className="text-xs text-blue-800">
+              {config.monorepo.packageManager === 'pnpm' && (
+                <p>
+                  Make sure you have a pnpm-workspace.yaml file in your root
+                  directory.
+                </p>
+              )}
+              {config.monorepo.packageManager === 'npm' && (
+                <p>
+                  Configure workspaces in your package.json with the
+                  "workspaces" field.
+                </p>
+              )}
+              {config.monorepo.packageManager === 'yarn' && (
+                <p>
+                  Ensure you have workspaces configured in your package.json.
+                </p>
+              )}
+              {config.monorepo.packageManager === 'lerna' && (
+                <p>
+                  Make sure you have a lerna.json configuration file in your
+                  root.
+                </p>
+              )}
+              {config.monorepo.packageManager === 'nx' && (
+                <p>
+                  Ensure you have an nx.json configuration file in your
+                  workspace root.
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/monodog-dashboard/src/components/configuration/components/index.ts

@@ -0,0 +1,8 @@
+// Export all configuration components for easier imports
+export { default as ConfigurationModal } from './ConfigurationModal';
+export { default as ConfigurationHeader } from './ConfigurationHeader';
+export { default as ConfigurationTabs } from './ConfigurationTabs';
+export { default as GeneralSettings } from './GeneralSettings';
+export { default as FeatureToggles } from './FeatureToggles';
+export { default as BrandingSettings } from './BrandingSettings';
+export { default as MonorepoSettings } from './MonorepoSettings';

package/monodog-dashboard/src/components/configuration/types/config.types.ts

@@ -0,0 +1,52 @@
+// Shared types for configuration components
+
+export interface DashboardConfig {
+  title?: string;
+  description?: string;
+  packageTypes?: string[];
+  customFields?: string[];
+  features?: {
+    healthChecks?: boolean;
+    ciIntegration?: boolean;
+    dependencyGraph?: boolean;
+    publishControl?: boolean;
+    searchAndFilter?: boolean;
+    configurationInspector?: boolean;
+  };
+  branding?: {
+    logo?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+  };
+  monorepo?: {
+    structure?: 'standard' | 'custom';
+    packageManager?: 'pnpm' | 'npm' | 'yarn' | 'lerna' | 'nx';
+    directories?: string[];
+    ignorePatterns?: string[];
+  };
+}
+
+export interface ConfigurationProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (config: DashboardConfig) => void;
+  currentConfig: DashboardConfig;
+}
+
+export type ConfigurationTab = 'general' | 'features' | 'branding' | 'monorepo';
+
+export interface TabDefinition {
+  id: ConfigurationTab;
+  label: string;
+  icon: string|React.ReactNode;
+}
+
+export interface ConfigurationTabsProps {
+  activeTab: ConfigurationTab;
+  onTabChange: (tab: ConfigurationTab) => void;
+}
+
+export interface SettingsComponentProps {
+  config: DashboardConfig;
+  onConfigChange: (updates: Partial<DashboardConfig>) => void;
+}

package/monodog-dashboard/src/components/configuration/utils/config.utils.tsx

@@ -0,0 +1,115 @@
+import type {
+  DashboardConfig,
+  TabDefinition,
+  ConfigurationTab,
+} from '../types/config.types';
+import { RocketLaunchIcon, CubeIcon, Cog6ToothIcon } from '../../../icons/heroicons';
+
+// Get tab definitions
+export const getTabDefinitions = (): TabDefinition[] => [
+  { id: 'general', label: 'General', icon: <Cog6ToothIcon className="w-6 h-6 text-primary-600" /> },
+  { id: 'features', label: 'Features', icon: <RocketLaunchIcon className="w-6 h-6 text-primary-600" /> },
+  { id: 'branding', label: 'Branding', icon: '🎨' },
+  { id: 'monorepo', label: 'Monorepo', icon: <CubeIcon className="w-6 h-6 text-primary-600" /> },
+];
+
+// Get default configuration
+export const getDefaultConfig = (): DashboardConfig => ({
+  title: 'monodog Dashboard',
+  description: 'Visual management of our monorepo packages',
+  packageTypes: ['app', 'lib', 'tool', 'service'],
+  customFields: ['team', 'priority', 'environment'],
+  features: {
+    healthChecks: true,
+    ciIntegration: true,
+    dependencyGraph: true,
+    publishControl: true,
+    searchAndFilter: true,
+    configurationInspector: true,
+  },
+  branding: {
+    logo: '',
+    primaryColor: '#3B82F6',
+    secondaryColor: '#1E40AF',
+  },
+  monorepo: {
+    structure: 'standard',
+    packageManager: 'pnpm',
+    directories: ['apps', 'packages', 'libs'],
+    ignorePatterns: ['node_modules', 'dist', '.git'],
+  },
+});
+
+// Merge configurations with defaults
+export const mergeWithDefaults = (
+  config: Partial<DashboardConfig>
+): DashboardConfig => {
+  const defaults = getDefaultConfig();
+  return {
+    ...defaults,
+    ...config,
+    features: { ...defaults.features, ...config.features },
+    branding: { ...defaults.branding, ...config.branding },
+    monorepo: { ...defaults.monorepo, ...config.monorepo },
+  };
+};
+
+// Validate configuration
+export const validateConfig = (
+  config: DashboardConfig
+): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+
+  if (!config.title || config.title.trim() === '') {
+    errors.push('Dashboard title is required');
+  }
+
+  if (
+    config.monorepo?.directories &&
+    config.monorepo.directories.length === 0
+  ) {
+    errors.push('At least one package directory is required');
+  }
+
+  if (
+    config.branding?.primaryColor &&
+    !isValidHexColor(config.branding.primaryColor)
+  ) {
+    errors.push('Primary color must be a valid hex color');
+  }
+
+  if (
+    config.branding?.secondaryColor &&
+    !isValidHexColor(config.branding.secondaryColor)
+  ) {
+    errors.push('Secondary color must be a valid hex color');
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+};
+
+// Helper function to validate hex colors
+const isValidHexColor = (color: string): boolean => {
+  return /^#[0-9A-F]{6}$/i.test(color);
+};
+
+// Convert comma-separated string to array
+export const stringToArray = (value: string): string[] => {
+  return value
+    .split(',')
+    .map(s => s.trim())
+    .filter(s => s.length > 0);
+};
+
+// Convert array to comma-separated string
+export const arrayToString = (arr: string[] | undefined): string => {
+  return arr ? arr.join(', ') : '';
+};
+
+// Format feature key for display
+export const formatFeatureKey = (key: string): string => {
+  return key.replace(/([A-Z])/g, ' $1').trim();
+};

package/monodog-dashboard/src/components/main-dashboard/Dashboard.tsx

@@ -0,0 +1,242 @@
+import { useState, useEffect } from 'react';
+import Configuration, { DashboardConfig } from '../configuration/Configuration';
+import SetupGuide from '../setup-guide/SetupGuide';
+import { DASHBOARD_ERROR_MESSAGES } from '../../constants/messages';
+import { cookieUtils } from '../../utils/cookies';
+
+// Import sub-components
+import {
+  Header,
+  StatsCards,
+  PackageDistribution,
+  QuickActions,
+  PackageSearchFilter,
+  PackageTable,
+} from './components';
+import { monorepoService } from '../../services/monorepoService';
+// Import types and utilities
+import { Package, PackageStats } from './types/dashboard.types';
+import {
+  calculatePackageStats,
+  getUniquePackageTypes,
+  filterPackages,
+  getStatusColor,
+  getTypeIcon,
+} from './utils/dashboard.utils';
+import { LoadingState, ErrorState } from '../modules/packages/components';
+
+// Configuration interface for customization - imported from Configuration component
+
+// Default configuration that can be overridden
+const defaultConfig: DashboardConfig = {
+  title: 'Monorepo Dashboard',
+  description: 'Visual management and monitoring of your monorepo packages',
+  packageTypes: ['app', 'lib', 'tool'],
+  features: {
+    healthChecks: true,
+    ciIntegration: true,
+    dependencyGraph: true,
+    publishControl: true,
+    searchAndFilter: true,
+    configurationInspector: true,
+  },
+  branding: {
+    primaryColor: '#3B82F6',
+    secondaryColor: '#1E40AF',
+  },
+};
+
+// Mock data - this would be replaced by actual monorepo scanning
+// const mockPackages: Package[] = [
+//   {
+//     name: 'dashboard',
+//     version: '1.0.0',
+//     type: 'app',
+//     path: 'apps/dashboard',
+//     dependencies: { react: '^18.0.0', utils: 'workspace:*' },
+//     devDependencies: { typescript: '^5.0.0' },
+//     scripts: { dev: 'vite', build: 'tsc', test: 'jest' },
+//     description: 'Main dashboard application',
+//     license: 'MIT',
+//     maintainers: ['team@company.com'],
+//   },
+//   {
+//     name: 'utils',
+//     version: '1.0.0',
+//     type: 'lib',
+//     path: 'libs/utils',
+//     dependencies: {},
+//     devDependencies: { typescript: '^5.0.0' },
+//     scripts: { build: 'tsc', test: 'jest' },
+//     description: 'Shared utility functions',
+//     license: 'MIT',
+//     maintainers: ['team@company.com'],
+//   },
+//   {
+//     name: 'backend',
+//     version: '1.0.0',
+//     type: 'app',
+//     path: 'packages/backend',
+//     dependencies: { express: '^4.18.0', utils: 'workspace:*' },
+//     devDependencies: { typescript: '^5.0.0' },
+//     scripts: { dev: 'tsx watch', start: 'tsx', build: 'tsc' },
+//     description: 'Backend API server',
+//     license: 'MIT',
+//     maintainers: ['team@company.com'],
+//   },
+// ];
+
+export default function Dashboard() {
+  const [packages, setPackages] = useState<Package[]>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedType, setSelectedType] = useState<string>('all');
+  const [config, setConfig] = useState<DashboardConfig>(defaultConfig);
+  const [showConfig, setShowConfig] = useState(false);
+  const [showSetupGuide, setShowSetupGuide] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // Fetch packages
+  useEffect(() => {
+    const fetchPackages = async () => {
+      try {
+        setLoading(true);
+        const data = await monorepoService.getPackages();
+        setPackages(data);
+        setError(null);
+      } catch (err) {
+        setError(DASHBOARD_ERROR_MESSAGES.FAILED_TO_FETCH_PACKAGES);
+        console.error('Error fetching packages:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPackages();
+  }, []);
+
+  // Load configuration from cookies or environment
+  useEffect(() => {
+    const savedConfig = cookieUtils.get('monodog-config');
+    if (savedConfig) {
+      setConfig({ ...defaultConfig, ...JSON.parse(savedConfig) });
+    }
+  }, []);
+
+  // Save configuration to cookies
+  const handleConfigSave = (newConfig: DashboardConfig) => {
+    setConfig(newConfig);
+    cookieUtils.set('monodog-config', JSON.stringify(newConfig));
+  };
+
+  // Handle refresh action
+  const handleRefresh = async () => {
+    try {
+      setRefreshing(true);
+      setError(null);
+      setLoading(true);
+      try {
+        const data = await monorepoService.refreshPackages();
+        // console.log('package data:', data);
+        setPackages(data);
+        setError(null);
+      } catch (err) {
+        setError(DASHBOARD_ERROR_MESSAGES.FAILED_TO_FETCH_PACKAGES);
+        console.error('Error fetching package data:', err);
+      } finally {
+        setLoading(false);
+      }
+    } catch (err) {
+      setError(DASHBOARD_ERROR_MESSAGES.FAILED_TO_FETCH_PACKAGES);
+      console.error('Error refreshing package data:', err);
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+ // Loading state
+  if (loading && !packages) {
+    return <LoadingState />;
+  }
+
+  // Error state
+  if (error) {
+    return <ErrorState error={error} onRetry={handleRefresh} />;
+  }
+
+  // Calculate derived data using utility functions
+  const filteredPackages = filterPackages(
+    packages ?? [],
+    searchTerm,
+    selectedType
+  );
+  const packageTypes = getUniquePackageTypes(packages ?? []);
+  const stats = calculatePackageStats(packages ?? []);
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Show refreshing overlay when refreshing with existing data */}
+      {refreshing && packages && (
+        <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+            <p className="mt-4 text-gray-700">Refreshing packages...</p>
+          </div>
+        </div>
+      )}
+      {/* Header Section */}
+      <Header
+        config={config}
+        onShowSetupGuide={() => setShowSetupGuide(true)}
+        onShowConfig={() => setShowConfig(true)}
+        onRefresh={handleRefresh}
+      />
+
+      {/* Statistics Cards */}
+      <StatsCards stats={stats} />
+
+      {/* Package Type Distribution */}
+      {/* <PackageDistribution
+        packages={packages ?? []}
+        packageTypes={packageTypes}
+        getTypeIcon={getTypeIcon}
+      /> */}
+
+      {/* Quick Actions */}
+      <QuickActions />
+
+      {/* Search, Filter and Package Table */}
+      <div className="bg-white p-6 rounded-lg shadow border">
+        <PackageSearchFilter
+          searchTerm={searchTerm}
+          selectedType={selectedType}
+          packageTypes={packageTypes}
+          onSearchChange={setSearchTerm}
+          onTypeChange={setSelectedType}
+        />
+
+        <PackageTable
+          packages={filteredPackages}
+          getTypeIcon={getTypeIcon}
+          getStatusColor={getStatusColor}
+        />
+      </div>
+
+      {/* Configuration Modal */}
+      <Configuration
+        isOpen={showConfig}
+        onClose={() => setShowConfig(false)}
+        onSave={handleConfigSave}
+        currentConfig={config}
+      />
+
+      {/* Setup Guide Modal */}
+      <SetupGuide
+        isOpen={showSetupGuide}
+        onClose={() => setShowSetupGuide(false)}
+        onComplete={() => setShowSetupGuide(false)}
+      />
+    </div>
+  );
+}