@hed-hog/developer-mode 0.0.194 → 0.0.197

package/hedhog/frontend/app/components/types.ts.ejs

@@ -0,0 +1,86 @@
+export type FrameworkType =
+  | 'nestjs'
+  | 'nextjs'
+  | 'angular'
+  | 'vue'
+  | 'react-native'
+  | 'expo';
+
+export interface AppInfo {
+  name: string;
+  path: string;
+  framework: FrameworkType;
+  database?: string;
+  description: string;
+  port?: number;
+  status: 'running' | 'stopped' | 'error';
+  scripts?: string[];
+}
+
+export interface LibraryScript {
+  name: string;
+  command: string;
+}
+
+export interface LibraryInfo {
+  name: string;
+  version: string;
+  latestVersion?: string;
+  installed: boolean;
+  description: string;
+  scripts: LibraryScript[];
+}
+
+export interface CommitInfo {
+  hash: string;
+  message: string;
+  author: string;
+  authorAvatar?: string;
+  date: string;
+  branch: string;
+}
+
+export interface WizardStep {
+  id: string;
+  title: string;
+  description: string;
+  type: 'info' | 'form' | 'progress' | 'select';
+}
+
+export interface WizardFormField {
+  name: string;
+  label: string;
+  placeholder?: string;
+  type?: string;
+  required?: boolean;
+}
+
+export interface WizardSelectOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export interface WizardConfig {
+  id: string;
+  title: string;
+  description?: string;
+  icon: React.ReactNode;
+  steps: WizardStep[];
+  formFields?: WizardFormField[];
+  selectOptions?: WizardSelectOption[];
+  selectMultiple?: boolean;
+  scriptExecution?: {
+    targetType: 'app' | 'library';
+    targetName: string;
+    scriptName: string;
+  };
+}
+
+export interface QuickAction {
+  id: string;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+  variant: 'default' | 'warning' | 'info' | 'accent';
+}

package/hedhog/frontend/app/layout.tsx.ejs

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DeveloperModeProvider } from './provider';
+
+export default function DeveloperModeLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <DeveloperModeProvider>{children}</DeveloperModeProvider>;
+}

package/hedhog/frontend/app/page.tsx.ejs

@@ -0,0 +1,247 @@
+'use client';
+
+import { PageHeader } from '@/components/entity-list';
+import { FileCode, Package, RefreshCw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import * as React from 'react';
+import { getWizardConfig } from './components/data';
+import {
+  AppsGrid,
+  DatabaseInfoCard,
+  GitInfo,
+  LibrariesList,
+  QuickActionsBar,
+  StatsCards,
+  WizardDialog,
+} from './components/sections';
+import { QuickAction, WizardConfig } from './components/types';
+import { useDeveloperMode, type AppInfo, type LibraryInfo } from './provider';
+
+export default function DeveloperDashboard() {
+  const t = useTranslations('developer-mode.Page');
+  const [wizardOpen, setWizardOpen] = React.useState(false);
+  const [currentWizard, setCurrentWizard] = React.useState<WizardConfig | null>(
+    null
+  );
+
+  // Obter dados do developer-mode
+  const { data: developerModeData, isLoading, error } = useDeveloperMode();
+
+  const openWizard = (config: WizardConfig) => {
+    setCurrentWizard(config);
+    setWizardOpen(true);
+  };
+
+  const handleAction = (action: QuickAction) => {
+    const config = getWizardConfig(action.id, t);
+    if (config) openWizard(config);
+  };
+
+  const handleRunScript = (library: LibraryInfo, scriptName: string) => {
+    openWizard({
+      id: `run-script-${library.name}-${scriptName}`,
+      title: t('wizard.runScript.title', { scriptName }),
+      icon: <FileCode className="h-5 w-5" />,
+      scriptExecution: {
+        targetType: 'library',
+        targetName: library.name,
+        scriptName,
+      },
+      steps: [
+        {
+          id: 'progress',
+          title: t('wizard.runScript.progressTitle', { scriptName }),
+          description: t('wizard.runScript.progressDescription', {
+            scriptName,
+            libraryName: library.name,
+          }),
+          type: 'progress',
+        },
+      ],
+    });
+  };
+
+  const handleInstallLibrary = (library: LibraryInfo) => {
+    openWizard({
+      id: `install-${library.name}`,
+      title: t('wizard.installLibrary.title', { libraryName: library.name }),
+      icon: <Package className="h-5 w-5" />,
+      steps: [
+        {
+          id: 'info',
+          title: t('wizard.installLibrary.infoTitle'),
+          description: t('wizard.installLibrary.infoDescription', {
+            libraryName: library.name,
+            libraryDescription: library.description || '',
+          }),
+          type: 'info',
+        },
+        {
+          id: 'progress',
+          title: t('wizard.installLibrary.progressTitle'),
+          description: t('wizard.installLibrary.progressDescription'),
+          type: 'progress',
+        },
+      ],
+    });
+  };
+
+  const handleUpdateLibrary = (library: LibraryInfo) => {
+    openWizard({
+      id: `update-${library.name}`,
+      title: t('wizard.updateLibrary.title', { libraryName: library.name }),
+      icon: <RefreshCw className="h-5 w-5" />,
+      steps: [
+        {
+          id: 'info',
+          title: t('wizard.updateLibrary.infoTitle'),
+          description: t('wizard.updateLibrary.infoDescription', {
+            libraryName: library.name,
+            version: library.version,
+          }),
+          type: 'info',
+        },
+        {
+          id: 'progress',
+          title: t('wizard.updateLibrary.progressTitle'),
+          description: t('wizard.updateLibrary.progressDescription'),
+          type: 'progress',
+        },
+      ],
+    });
+  };
+
+  const handleAppScript = (app: AppInfo, script: string) => {
+    openWizard({
+      id: `app-script-${app.name}-${script}`,
+      title: t('wizard.appScript.title', { script, appName: app.name }),
+      icon: <FileCode className="h-5 w-5" />,
+      scriptExecution: {
+        targetType: 'app',
+        targetName: app.name,
+        scriptName: script,
+      },
+      steps: [
+        {
+          id: 'progress',
+          title: t('wizard.appScript.progressTitle', { script }),
+          description: t('wizard.appScript.progressDescription', {
+            script,
+            appPath: app.path,
+          }),
+          type: 'progress',
+        },
+      ],
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('header.breadcrumbs.home'), href: '/' },
+          { label: t('header.breadcrumbs.current') },
+        ]}
+      />
+
+      {/* Main Content */}
+      <main className="container mx-auto py-6 space-y-6">
+        {/* Loading State */}
+        {isLoading && (
+          <div className="flex items-center justify-center py-12">
+            <div className="text-center">
+              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              <p className="mt-4 text-muted-foreground">
+                {t('states.loading')}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && (
+          <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-destructive">
+            <p>{t('states.error', { message: error.message })}</p>
+          </div>
+        )}
+
+        {/* Content */}
+        {developerModeData && !isLoading && (
+          <>
+            {/* Quick Actions */}
+            <QuickActionsBar onAction={handleAction} />
+
+            {/* Main Grid */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-2">
+                <AppsGrid
+                  apps={developerModeData.apps}
+                  onRunScript={handleAppScript}
+                />
+              </div>
+              <div>
+                <DatabaseInfoCard
+                  name={
+                    developerModeData.database.database ||
+                    developerModeData.database.name
+                  }
+                  host={`${developerModeData.database.host}:${developerModeData.database.port}`}
+                  tables={developerModeData.database.tables || 0}
+                  size={developerModeData.database.size || t('fallback.na')}
+                  connections={
+                    developerModeData.database.connections || {
+                      active: 0,
+                      max: 0,
+                    }
+                  }
+                  lastMigration={developerModeData.database.lastMigration}
+                />
+              </div>
+            </div>
+
+            {/* Second Row */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div className="lg:col-span-1">
+                <LibrariesList
+                  libraries={developerModeData.libraries}
+                  onRunScript={handleRunScript}
+                  onInstall={handleInstallLibrary}
+                  onUpdate={handleUpdateLibrary}
+                  onCreateLibrary={() => {
+                    const config = getWizardConfig('create-module', t);
+                    if (config) openWizard(config);
+                  }}
+                />
+              </div>
+              <div className="lg:col-span-1">
+                <GitInfo
+                  repoName={
+                    developerModeData.git.repoName || t('fallback.repository')
+                  }
+                  currentBranch={developerModeData.git.currentBranch}
+                  totalBranches={developerModeData.git.totalBranches}
+                  openPRs={developerModeData.git.openPRs}
+                  recentCommits={developerModeData.git.recentCommits}
+                />
+              </div>
+            </div>
+
+            {/* Stats (less important, at the bottom) */}
+            <StatsCards stats={developerModeData.stats} />
+          </>
+        )}
+      </main>
+
+      {/* Wizard Dialog */}
+      {currentWizard && (
+        <WizardDialog
+          open={wizardOpen}
+          onOpenChange={setWizardOpen}
+          config={currentWizard}
+        />
+      )}
+    </div>
+  );
+}

package/hedhog/frontend/app/provider.tsx.ejs

@@ -0,0 +1,95 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ReactNode, createContext, useContext } from 'react';
+import type { AppInfo, CommitInfo, LibraryInfo } from './components/types';
+
+export interface DatabaseInfo {
+  name: string;
+  host: string;
+  port: number;
+  type: 'postgresql' | 'mysql' | 'unknown';
+  user?: string;
+  database?: string;
+  tables?: number;
+  size?: string;
+  connections?: { active: number; max: number };
+  lastMigration?: {
+    name: string;
+    date: string;
+    status: 'success' | 'failed' | 'pending';
+  };
+  connected?: boolean;
+}
+
+export interface ProjectStats {
+  nodeVersion: string;
+  diskUsage: string;
+  totalApps: number;
+  totalLibraries: number;
+  dbConnections: number;
+  gitBranch: string;
+  lastCommit: string;
+  uptime: string;
+}
+
+export interface GitInfo {
+  repoName?: string;
+  currentBranch: string;
+  totalBranches: number;
+  openPRs: number;
+  recentCommits: CommitInfo[];
+}
+
+export interface DeveloperModeData {
+  apps: AppInfo[];
+  libraries: LibraryInfo[];
+  database: DatabaseInfo;
+  git: GitInfo;
+  stats: ProjectStats;
+}
+
+interface DeveloperModeContextType {
+  data: DeveloperModeData | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const DeveloperModeContext = createContext<
+  DeveloperModeContextType | undefined
+>(undefined);
+
+export function DeveloperModeProvider({ children }: { children: ReactNode }) {
+  const { request } = useApp();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['developer-mode'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/developer-mode',
+        method: 'GET',
+      });
+      return response.data as DeveloperModeData;
+    },
+  });
+
+  return (
+    <DeveloperModeContext.Provider
+      value={{ data: data || null, isLoading, error }}
+    >
+      {children}
+    </DeveloperModeContext.Provider>
+  );
+}
+
+export function useDeveloperMode() {
+  const context = useContext(DeveloperModeContext);
+  if (context === undefined) {
+    throw new Error(
+      'useDeveloperMode must be used within a DeveloperModeProvider'
+    );
+  }
+  return context;
+}
+
+export type { AppInfo, CommitInfo, LibraryInfo };