Merge pull request #862 from pascalgrimaud/react-fix-styled-page

React: fix styled page

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

@@ -89,15 +89,11 @@ public void addViteReactUnstyledFiles(Project project) {
   }
 
   public void addViteReactStyledFiles(Project project) {
+    String imagesPath = "src/main/webapp/content/images";
     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"
-    );
+    projectRepository.add(project, getPath(SOURCE, imagesPath), "ReactLogo.png", imagesPath);
+    projectRepository.add(project, getPath(SOURCE, imagesPath), "JHipster-Lite-neon-blue.png", imagesPath);
   }
 
   public void addJestSonar(Project project) {

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

@@ -1,23 +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;
-  }
+#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: #64dafb;
+}
 
-  label {
-    margin: 0 0.5em;
-    font-weight: bold;
-  }
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
 
-  code {
-    background-color: #eee;
-    padding: 2px 4px;
-    border-radius: 4px;
-    color: #304455;
-  }
+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

@@ -1,35 +1,41 @@
 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>
+  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>React + TypeScript + Vite</h1>
+        <p>
+          Recommended IDE setup:&nbsp;
+          <a href="https://code.visualstudio.com/" target="_blank">
+            VSCode
+          </a>
+          &nbsp;+&nbsp;
+          <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>
+          <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">
+            Vite Documentation
+          </a>
+          &nbsp;|&nbsp;
+          <a href="https://reactjs.org/docs/" target="_blank">
+            React Documentation
+          </a>
+        </p>
 
-    <p>
-      Edit
-      <code>src/main/webapp/app/common/primary/app/App.vue</code> to test hot module replacement.
-    </p>
-  </div>
-</div>
-);
+        <p>
+          Edit&nbsp;
+          <code>src/main/webapp/app/common/primary/app/App.tsx</code> to test hot module replacement.
+        </p>
+      </div>
+    </div>
+  );
 }
 
 export default App;

src/main/resources/generator/client/vite/react/src/main/webapp/app/index.css.mustache

@@ -1,13 +1,7 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/main/resources/generator/client/vite/react/src/main/webapp/index.html.mustache

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <title>Jhipster Lite Vite+React</title>
+    <title>JHipster Lite Vite+React</title>
   </head>
   <body>
     <div id="root"></div>

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

@@ -1,14 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from '@/common/primary/app/App';
 
 describe('App tests', () => {
   it('renders without crashing', () => {
     render(<App />);
   });
-
-  test('renders learn react link', () => {
-    render(<App />);
-    const linkElement = screen.getByText("JHipster Lite Vite + React app");
-    expect(linkElement).toBeTruthy();
-  });
-})
+});