Merge pull request #848 from matthieulapatate/StyledReactFrontPage

Improve front page react generation

src/main/java/tech/jhipster/lite/generator/client/vite/react/core/application/ViteReactApplicationService.java

@@ -13,7 +13,11 @@ public ViteReactApplicationService(ViteReactService viteReactService) {
     this.viteReactService = viteReactService;
   }
 
-  public void init(Project project) {
-    viteReactService.init(project);
+  public void addViteReact(Project project) {
+    viteReactService.addViteReact(project);
+  }
+
+  public void addStyledViteReact(Project project) {
+    viteReactService.addStyledViteReact(project);
   }
 }

src/main/java/tech/jhipster/lite/generator/client/vite/react/core/domain/ViteReact.java

@@ -52,7 +52,7 @@ public static List<String> files() {
     return List.of("tsconfig.json", "vite.config.ts", "jest.config.ts");
   }
 
-  public static Map<String, String> reactFiles() {
+  public static Map<String, String> reactCommonFiles() {
     String pathApp = "src/main/webapp/app";
     String pathWebapp = "src/main/webapp";
     String pathPrimaryApp = "src/main/webapp/app/common/primary/app";

src/main/java/tech/jhipster/lite/generator/client/vite/react/core/domain/ViteReactDomainService.java

@@ -10,6 +10,7 @@
 public class ViteReactDomainService implements ViteReactService {
 
   public static final String SOURCE = "client/vite/react";
+  public static final String SOURCE_APP = "src/main/webapp/app/common/primary/app";
 
   private final ProjectRepository projectRepository;
   private final NpmService npmService;
@@ -20,13 +21,24 @@ public ViteReactDomainService(ProjectRepository projectRepository, NpmService np
   }
 
   @Override
-  public void init(Project project) {
+  public void addViteReact(Project project) {
+    addCommonViteReact(project);
+    addViteReactUnstyledFiles(project);
+  }
+
+  @Override
+  public void addStyledViteReact(Project project) {
+    addCommonViteReact(project);
+    addViteReactStyledFiles(project);
+  }
+
+  public void addCommonViteReact(Project project) {
     addDevDependencies(project);
     addDependencies(project);
     addScripts(project);
     addFiles(project);
-    addViteReactFiles(project);
     addJestSonar(project);
+    addViteReactCommonFiles(project);
   }
 
   public void addDevDependencies(Project project) {
@@ -67,8 +79,25 @@ public void addFiles(Project project) {
     ViteReact.files().forEach(file -> projectRepository.add(project, SOURCE, file));
   }
 
-  public void addViteReactFiles(Project project) {
-    ViteReact.reactFiles().forEach((file, path) -> projectRepository.template(project, getPath(SOURCE, path), file, path));
+  public void addViteReactCommonFiles(Project project) {
+    ViteReact.reactCommonFiles().forEach((file, path) -> projectRepository.template(project, getPath(SOURCE, path), file, path));
+  }
+
+  public void addViteReactUnstyledFiles(Project project) {
+    projectRepository.template(project, getPath(SOURCE, SOURCE_APP), "App.css", SOURCE_APP);
+    projectRepository.template(project, getPath(SOURCE, SOURCE_APP), "App.tsx", SOURCE_APP);
+  }
+
+  public void addViteReactStyledFiles(Project project) {
+    projectRepository.template(project, getPath(SOURCE, SOURCE_APP), "StyledApp.css", SOURCE_APP, "App.css");
+    projectRepository.template(project, getPath(SOURCE, SOURCE_APP), "StyledApp.tsx", SOURCE_APP, "App.tsx");
+    projectRepository.add(project, getPath(SOURCE, "src/main/webapp/content.images"), "ReactLogo.png", "src/main/webapp/content/images");
+    projectRepository.add(
+      project,
+      getPath(SOURCE, "src/main/webapp/content.images"),
+      "JHipster-Lite-neon-blue.png",
+      "src/main/webapp/content/images"
+    );
   }
 
   public void addJestSonar(Project project) {

src/main/java/tech/jhipster/lite/generator/client/vite/react/core/domain/ViteReactService.java

@@ -3,5 +3,6 @@
 import tech.jhipster.lite.generator.project.domain.Project;
 
 public interface ViteReactService {
-  void init(Project project);
+  void addViteReact(Project project);
+  void addStyledViteReact(Project project);
 }

src/main/java/tech/jhipster/lite/generator/client/vite/react/core/infrastructure/primary/ViteReactResource.java

@@ -29,6 +29,15 @@ public ViteReactResource(ViteReactApplicationService viteReactApplicationService
   @GeneratorStep(id = "vite-react")
   public void init(@RequestBody ProjectDTO projectDTO) {
     Project project = ProjectDTO.toProject(projectDTO);
-    viteReactApplicationService.init(project);
+    viteReactApplicationService.addViteReact(project);
+  }
+
+  @Operation(summary = "Add Vite+React with minimal CSS")
+  @ApiResponse(responseCode = "500", description = "An error occurred while adding Vite+React with minimal CSS")
+  @PostMapping("/styled")
+  @GeneratorStep(id = "vite-react-styled")
+  public void addStyledViteVue(@RequestBody ProjectDTO projectDTO) {
+    Project project = ProjectDTO.toProject(projectDTO);
+    viteReactApplicationService.addStyledViteReact(project);
   }
 }

src/main/java/tech/jhipster/lite/generator/client/vite/vue/core/infrastructure/primary/rest/ViveVueResource.java

@@ -15,11 +15,11 @@
 @RestController
 @RequestMapping("/api/vite/vue")
 @Tag(name = "Vite - Vue")
-class ViveVueResource {
+class ViteVueResource {
 
   private final ViteVueApplicationService viteVueApplicationService;
 
-  public ViveVueResource(ViteVueApplicationService viteVueApplicationService) {
+  public ViteVueResource(ViteVueApplicationService viteVueApplicationService) {
     this.viteVueApplicationService = viteVueApplicationService;
   }
 

src/main/resources/generator/client/vite/react/src/main/webapp/app/common/primary/app/StyledApp.css.mustache

@@ -0,0 +1,23 @@
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+  }
+  a {
+    color: #42b983;
+  }
+
+  label {
+    margin: 0 0.5em;
+    font-weight: bold;
+  }
+
+  code {
+    background-color: #eee;
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: #304455;
+  }

src/main/resources/generator/client/vite/react/src/main/webapp/app/common/primary/app/StyledApp.tsx.mustache

@@ -0,0 +1,35 @@
+import './App.css';
+
+function App() {
+return (
+<div className="App">
+  <div id="app">
+    <img alt="React logo" src="/content/images/ReactLogo.png" />
+    <br/>
+    <img alt="JHipster logo" src="../../../../content/images/JHipster-Lite-neon-blue.png" />
+    <h1> JHipster Lite Vite + React app</h1>
+    <p>
+      Recommended IDE setup:
+      <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+      +
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    </p>
+
+    <p>
+      <a href="https://reactjs.org/docs/" target="_blank">
+        React Documentation
+      </a>
+      |
+      <a href="https://reactjs.org/" target="_blank">React Official</a>
+    </p>
+
+    <p>
+      Edit
+      <code>src/main/webapp/app/common/primary/app/App.vue</code> to test hot module replacement.
+    </p>
+  </div>
+</div>
+);
+}
+
+export default App;

src/main/resources/generator/client/vite/react/src/test/javascript/spec/common/primary/app/App.test.tsx.mustache

@@ -8,7 +8,7 @@ describe('App tests', () => {
 
   test('renders learn react link', () => {
     render(<App />);
-    const linkElement = screen.getByText(/learn react/i);
+    const linkElement = screen.getByText("JHipster Lite Vite + React app");
     expect(linkElement).toBeTruthy();
   });
-})
+})

src/test/java/tech/jhipster/lite/generator/client/vite/react/core/application/ViteReactApplicationServiceIT.java

@@ -17,7 +17,7 @@ class ViteReactApplicationServiceIT {
   void shouldInit() {
     Project project = tmpProjectWithPackageJsonComplete();
 
-    viteReactApplicationService.init(project);
+    viteReactApplicationService.addViteReact(project);
 
     ViteReactAssert.assertDependency(project);
     ViteReactAssert.assertScripts(project);
@@ -26,4 +26,17 @@ void shouldInit() {
     ViteReactAssert.assertReactFiles(project);
     ViteReactAssert.assertJestSonar(project);
   }
+
+  @Test
+  void shouldInitStyled() {
+    Project project = tmpProjectWithPackageJsonComplete();
+
+    viteReactApplicationService.addStyledViteReact(project);
+    ViteReactAssert.assertDependency(project);
+    ViteReactAssert.assertScripts(project);
+    ViteReactAssert.assertConfig(project);
+    ViteReactAssert.assertFiles(project);
+    ViteReactAssert.assertReactFiles(project);
+    ViteReactAssert.assertJestSonar(project);
+  }
 }

src/test/java/tech/jhipster/lite/generator/client/vite/react/core/domain/ViteReactDomainServiceTest.java

@@ -36,7 +36,22 @@ void shouldInit() {
     Project project = tmpProject();
     when(npmService.getVersionInViteReact(anyString())).thenReturn(Optional.of("0.0.0"));
 
-    viteReactDomainService.init(project);
+    viteReactDomainService.addViteReact(project);
+
+    verify(npmService, times(2)).addDependency(any(Project.class), anyString(), anyString());
+    verify(npmService, times(15)).addDevDependency(any(Project.class), anyString(), anyString());
+    verify(npmService, times(6)).addScript(any(Project.class), anyString(), anyString());
+
+    verify(projectRepository, times(3)).add(any(Project.class), anyString(), anyString());
+    verify(projectRepository, times(10)).template(any(Project.class), anyString(), anyString(), anyString());
+  }
+
+  @Test
+  void shouldInitStylesIndex() {
+    Project project = tmpProject();
+    when(npmService.getVersionInViteReact(anyString())).thenReturn(Optional.of("0.0.0"));
+
+    viteReactDomainService.addStyledViteReact(project);
 
     verify(npmService, times(2)).addDependency(any(Project.class), anyString(), anyString());
     verify(npmService, times(15)).addDevDependency(any(Project.class), anyString(), anyString());
@@ -50,7 +65,7 @@ void shouldInit() {
   void shouldNotInit() {
     Project project = tmpProject();
 
-    assertThatThrownBy(() -> viteReactDomainService.init(project)).isExactlyInstanceOf(GeneratorException.class);
+    assertThatThrownBy(() -> viteReactDomainService.addViteReact(project)).isExactlyInstanceOf(GeneratorException.class);
   }
 
   @Test

src/test/java/tech/jhipster/lite/generator/client/vite/react/core/infrastructure/primary/ReactResourceIT.java

@@ -42,4 +42,22 @@ void shouldInit() throws Exception {
     ViteReactAssert.assertReactFiles(project);
     ViteReactAssert.assertFiles(project);
   }
+
+  @Test
+  void shouldInitStyled() throws Exception {
+    ProjectDTO projectDTO = readFileToObject("json/chips.json", ProjectDTO.class).folder(tmpDirForTest());
+    Project project = ProjectDTO.toProject(projectDTO);
+    initApplicationService.init(project);
+
+    mockMvc
+      .perform(
+        post("/api/vite/react/styled").contentType(MediaType.APPLICATION_JSON).content(TestUtils.convertObjectToJsonBytes(projectDTO))
+      )
+      .andExpect(status().isOk());
+
+    ViteReactAssert.assertDependency(project);
+    ViteReactAssert.assertScripts(project);
+    ViteReactAssert.assertReactFiles(project);
+    ViteReactAssert.assertFiles(project);
+  }
 }

src/test/java/tech/jhipster/lite/generator/client/vite/vue/core/infrastructure/primary/rest/ViveVueResourceIT.java

@@ -19,7 +19,7 @@
 
 @IntegrationTest
 @AutoConfigureMockMvc
-class ViveVueResourceIT {
+class ViteVueResourceIT {
 
   @Autowired
   MockMvc mockMvc;

tests-ci/generate.sh

@@ -157,7 +157,7 @@ elif [[ $application == 'reactapp' ]]; then
   sonar_back_front
 
   callApi "/api/frontend-maven-plugin"
-  callApi "/api/vite/react"
+  callApi "/api/vite/react/styled"
 
 elif [[ $application == 'vueapp' ]]; then
   springboot