diff --git a/backend/src/build-system/node/frontend-file-structure/index.ts b/backend/src/build-system/node/frontend-file-structure/index.ts new file mode 100644 index 00000000..3d32c3d9 --- /dev/null +++ b/backend/src/build-system/node/frontend-file-structure/index.ts @@ -0,0 +1,35 @@ +import { BuildHandler, BuildResult } from 'src/build-system/types'; +import { BuilderContext } from 'src/build-system/context'; +import { ModelProvider } from 'src/common/model-provider'; +import { prompts } from './prompt'; + +export class FileStructureHandler implements BuildHandler { + readonly id = 'op:File_Structure::STATE:GENERATE'; + + async run(context: BuilderContext, args: unknown): Promise { + console.log('Generating File Structure Document...'); + + // extract relevant data from the context + const projectName = + context.getData('projectName') || 'Default Project Name'; + + const prompt = prompts.generateFileStructurePrompt( + projectName, + args as string, + // TODO: change later + args as string, + 'FrameWork Holder', + ); + + const fileStructureContent = await context.model.chatSync( + { + content: prompt, + }, + 'gpt-4o-mini', + ); + return { + success: true, + data: fileStructureContent, + }; + } +} diff --git a/backend/src/build-system/node/frontend-file-structure/prompt.ts b/backend/src/build-system/node/frontend-file-structure/prompt.ts new file mode 100644 index 00000000..b8a445dd --- /dev/null +++ b/backend/src/build-system/node/frontend-file-structure/prompt.ts @@ -0,0 +1,64 @@ +export const prompts = { + generateFileStructurePrompt: ( + projectName: string, + sitemapDoc: string, + DataAnalysisDoc: string, + framework: string, + ): string => { + return `You are an expert frontend developer. Your task is to generate a complete folder and file structure for the src directory of a frontend project. Include all necessary files and folders to cover UI, API calls, and local state management while ensuring scalability and maintainability. + Based on following input + + - Project name: ${projectName} + - Sitemap Documentation: ${sitemapDoc} + - Data Analysis Doc ${DataAnalysisDoc} + + ### Instructions and Rules: + +Include: + Folder Structure: + components: Reusable UI elements grouped by category (e.g., common, layout, specific). + contexts: Global state management (e.g., auth, theme, player). + hooks: Custom hooks for data fetching and state management. + pages: Route-specific views (e.g., Home, Search, Playlist). + utils: Utility functions (e.g., constants, helpers, validators). + api: Organized API logic (e.g., auth, music, user). + router.ts: Central routing configuration. + index.ts: Application entry point. + + Files: + Include placeholder files in each folder to illustrate their purpose. + Add example filenames for components, hooks, APIs, etc. + +Do Not Include: + + Asset folders (e.g., images, icons, fonts). + Test folders or files. + Service folders unrelated to API logic. + +File Naming Guidelines: + + Use meaningful and descriptive file names. + For components, include an index.tsx file in each folder to simplify imports. + Each component should have its own folder named after the component (e.g., Button/). + Use index.tsx as the main file inside the component folder. + Component-specific styles must be in index.css within the same folder as the component. + +File Comments: + + Include comments describing the purpose of each file or folder to improve readability. + +Self check: + 1, Are you consider all the cases based on the sitemap doc? If not add new folder or file + +This final result must be 100% complete. Will be directly use in the production + +Output Format: + + Start with: "\`\`\`FolderStructure" + Tree format: + Include folder names with placeholder/example files inside. + Add comments to describe the purpose of each file/folder. + End with: "\`\`\`" + `; + }, +};