refactor(javascript): replace DsComponent with UiComponent #319

Deleted DsComponent.kt and introduced UiComponent.kt in a shared module. Updated all references to use the new UiComponent class, ensuring consistency across the codebase. This change centralizes the component model definition and improves maintainability.

Author: phodal

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/model/DsComponent.kt renamed to core/src/main/kotlin/cc/unitmesh/devti/bridge/tools/UiComponent.kt

@@ -1,12 +1,9 @@
-package cc.unitmesh.ide.javascript.flow.model
+package cc.unitmesh.devti.bridge.tools
 
 import kotlinx.serialization.Serializable
 
-/**
- * the Design System Component
- */
 @Serializable
-data class DsComponent(
+data class UiComponent(
     val name: String,
     val path: String,
     val signature: String = "",

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/AutoPage.kt

@@ -1,7 +1,7 @@
 package cc.unitmesh.ide.javascript.flow
 
 import cc.unitmesh.devti.flow.TaskFlow
-import cc.unitmesh.ide.javascript.flow.model.DsComponent
+import cc.unitmesh.devti.bridge.tools.UiComponent
 
 /**
  * FrontendFlow is an interface that represents the flow of tasks in a frontend application.
@@ -28,20 +28,20 @@ interface AutoPage : TaskFlow<String> {
      * Get all pages in the project, based on the naming convention, like the PascalCase under `src/pages`
      * @return list of pages
      */
-    fun getPages(): List<DsComponent>
+    fun getPages(): List<UiComponent>
 
     /**
      * Get all components in the project, based on the naming convention, like the PascalCase under `src/components`
      * @return list of components
      */
-    fun getComponents(): List<DsComponent>
+    fun getComponents(): List<UiComponent>
 
     /**
      * Get the design system components, like the Ant Design in React.
      * Which will load the design system components from the remote
      * @return list of design system components
      */
-    fun getDesignSystemComponents(): List<DsComponent>
+    fun getDesignSystemComponents(): List<UiComponent>
 
     /**
      * Get remote call as a sample, like the axios in Vue, the fetch in React

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/AutoPageFlow.kt

@@ -7,7 +7,7 @@ import cc.unitmesh.devti.llms.LLMProvider
 import cc.unitmesh.devti.template.GENIUS_PAGE
 import cc.unitmesh.devti.template.TemplateRender
 import cc.unitmesh.ide.javascript.flow.model.AutoPageContext
-import cc.unitmesh.ide.javascript.flow.model.DsComponent
+import cc.unitmesh.devti.bridge.tools.UiComponent
 import kotlinx.coroutines.runBlocking
 
 class AutoPageFlow(val context: AutoPageContext, val panel: ChatCodingPanel, val llm: LLMProvider) :
@@ -36,7 +36,7 @@ class AutoPageFlow(val context: AutoPageContext, val panel: ChatCodingPanel, val
 
 
     override fun design(context: Any): List<String> {
-        val componentList = context as List<DsComponent>
+        val componentList = context as List<UiComponent>
         val stepTwoPrompt = generateStepTwoPrompt(componentList)
 
         panel.addMessage(stepTwoPrompt, true, stepTwoPrompt)
@@ -48,7 +48,7 @@ class AutoPageFlow(val context: AutoPageContext, val panel: ChatCodingPanel, val
         }.let { listOf(it) }
     }
 
-    private fun generateStepTwoPrompt(selectedComponents: List<DsComponent>): String {
+    private fun generateStepTwoPrompt(selectedComponents: List<UiComponent>): String {
         val templateRender = TemplateRender(GENIUS_PAGE)
         val template = templateRender.getTemplate("page-gen-design.vm")
 

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/ReactAutoPage.kt

@@ -1,6 +1,6 @@
 package cc.unitmesh.ide.javascript.flow
 
-import cc.unitmesh.ide.javascript.flow.model.DsComponent
+import cc.unitmesh.devti.bridge.tools.UiComponent
 import cc.unitmesh.ide.javascript.util.ReactPsiUtil
 import com.intellij.lang.javascript.JavaScriptFileType
 import com.intellij.lang.javascript.TypeScriptJSXFileType
@@ -32,10 +32,8 @@ class ReactAutoPage(
 ) : AutoPage {
     // todo: add post routes design
     private val routes: MutableMap<RouterFile, JSFile> = mutableMapOf()
-    private val pages: MutableList<DsComponent> = mutableListOf()
-    private val components: MutableList<DsComponent> = mutableListOf()
-
-    // config files
+    private val pages: MutableList<UiComponent> = mutableListOf()
+    private val components: MutableList<UiComponent> = mutableListOf()
     private val configs: MutableList<JSFile> = mutableListOf()
 
     init {
@@ -55,6 +53,10 @@ class ReactAutoPage(
             if (jsFile.isTestFile) return@forEach
 
             when {
+                path.contains("views") -> buildComponent(jsFile)?.let {
+                    pages += it
+                }
+
                 path.contains("pages") -> buildComponent(jsFile)?.let {
                     pages += it
                 }
@@ -65,7 +67,7 @@ class ReactAutoPage(
 
                 else -> {
                     if (root.findChild(file.name) != null) {
-                        RouterFile.values().filter { it.filename == file.name }.map {
+                        RouterFile.entries.filter { it.filename == file.name }.map {
                             routes += it to jsFile
                         }
 
@@ -76,11 +78,11 @@ class ReactAutoPage(
         }
     }
 
-    override fun getPages(): List<DsComponent> = pages
+    override fun getPages(): List<UiComponent> = pages
 
-    override fun getComponents(): List<DsComponent> = components
+    override fun getComponents(): List<UiComponent> = components
 
-    private fun buildComponent(jsFile: JSFile): List<DsComponent>? {
+    private fun buildComponent(jsFile: JSFile): List<UiComponent>? {
         return when (jsFile.language) {
             is TypeScriptJSXLanguageDialect,
             is ECMA6LanguageDialect
@@ -116,34 +118,36 @@ class ReactAutoPage(
     }
 
     // load prompts/context/ds.json from project root
-    override fun getDesignSystemComponents(): List<DsComponent> {
+    override fun getDesignSystemComponents(): List<UiComponent> {
         val rootConfig = project.guessProjectDir()
             ?.findChild("prompts")
             ?.findChild("context")
             ?.findChild("ds.json") ?: return emptyList()
 
         val json = rootConfig.inputStream.reader().readText()
         return try {
-            val result: List<DsComponent> = Json.decodeFromString(json)
+            val result: List<UiComponent> = Json.decodeFromString(json)
             result
         } catch (e: Exception) {
             emptyList()
         }
     }
 
     override fun sampleRemoteCall(): String {
+        // search for axios usage if exist package.json in code
         TODO("Not yet implemented")
     }
 
     override fun sampleStateManagement(): String? {
+        // lookup for redux usage if exist package.json in code
         TODO("Not yet implemented")
     }
 
     override fun clarify(): String {
         TODO("Not yet implemented")
     }
 
-    fun filterComponents(components: List<String>): List<DsComponent> {
+    fun filterComponents(components: List<String>): List<UiComponent> {
         val comps = this.pages + this.components
         return components.mapNotNull { component ->
             comps.find { it.name == component }

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/util/ReactPsiUtil.kt

@@ -1,6 +1,6 @@
 package cc.unitmesh.ide.javascript.util
 
-import cc.unitmesh.ide.javascript.flow.model.DsComponent
+import cc.unitmesh.devti.bridge.tools.UiComponent
 import com.intellij.lang.ecmascript6.psi.ES6ExportDeclaration
 import com.intellij.lang.ecmascript6.psi.ES6ExportDefaultAssignment
 import com.intellij.lang.javascript.presentable.JSFormatUtil
@@ -36,7 +36,7 @@ object ReactPsiUtil {
         return map + defaultAssignment
     }
 
-    fun tsxComponentToComponent(jsFile: JSFile): List<DsComponent> = getExportElements(jsFile).map { psiElement ->
+    fun tsxComponentToComponent(jsFile: JSFile): List<UiComponent> = getExportElements(jsFile).map { psiElement ->
         val name = psiElement.name
         if (name == null) {
             logger<ReactPsiUtil>().warn("name is null")
@@ -50,11 +50,11 @@ object ReactPsiUtil {
 
         return@map when (psiElement) {
             is TypeScriptFunction -> {
-                DsComponent(name = name, path)
+                UiComponent(name = name, path)
             }
 
             is TypeScriptClass -> {
-                DsComponent(name = name, path)
+                UiComponent(name = name, path)
             }
 
             is TypeScriptVariable, is JSVariable -> {
@@ -77,11 +77,11 @@ object ReactPsiUtil {
                     }
                 } ?: emptyList()
 
-                DsComponent(name = name, path, props = props, signature = signature)
+                UiComponent(name = name, path, props = props, signature = signature)
             }
 
             else -> {
-                println("unknown type: ${psiElement::class.java}")
+                logger<ReactPsiUtil>().warn("unknown type: ${psiElement::class.java}")
                 null
             }
         }