[React] Upgrade NextUI 2 (#7105)

jhipster · Aug 9, 2023 · d0b6f11 · d0b6f11
1 parent 0a1f4cd
commit d0b6f11
Show file tree

Hide file tree

Showing 16 changed files with 294 additions and 66 deletions.
diff --git a/.../tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactory.java b/.../tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactory.java
@@ -12,6 +12,8 @@
 
 public class ReactJwtModuleFactory {
 
+  private static final JHipsterSource ROOT = from("client/react");
+
   private static final JHipsterSource SOURCE = from("client/react/src");
 
   private static final JHipsterSource APP_SOURCE = SOURCE.append("main/webapp/app");
@@ -40,15 +42,26 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
     //@formatter:off
     return moduleBuilder(properties)
       .packageJson()
+        .addType("module")
         .addDependency(packageName("react-hook-form"), REACT)
         .addDependency(packageName("axios"), REACT)
+        .addDependency(packageName("framer-motion"), REACT)
         .addDependency(packageName("@nextui-org/react"), REACT)
+        .addDevDependency(packageName("autoprefixer"), REACT)
         .addDevDependency(packageName("sass"), REACT)
+        .addDevDependency(packageName("postcss"), REACT)
+        .addDevDependency(packageName("tailwindcss"), REACT)
         .and()
       .files()
+        .batch(ROOT, to("."))
+          .addFile("postcss.config.js")
+          .addFile("tailwind.config.js")
+          .and()
         .add(APP_SOURCE.template("common/services/storage.ts"), COMMON_DESTINATION.append("services/storage.ts"))
         .add(APP_SOURCE.append("login/primary/loginForm").template("index.tsx"), APP_DESTINATION.append("login/primary/loginForm/index.tsx"))
         .batch(APP_SOURCE.append("login/primary/loginModal"), APP_DESTINATION.append("login/primary/loginModal/"))
+          .addTemplate("EyeSlashFilledIcon.tsx")
+          .addTemplate("EyeFilledIcon.tsx")
           .addTemplate("index.tsx")
           .addTemplate("interface.d.ts")
           .addTemplate("LoginModal.scss")
@@ -70,7 +83,15 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .add(lineBeforeText("function App() {"), "import LoginForm from '@/login/primary/loginForm';" + LINE_BREAK)
           .add(LOGIN_FORM_MATCHER, properties.indentation().times(4) + "<LoginForm />")
           .and()
+        .in(path("src/main/webapp/app/index.tsx"))
+          .add(lineBeforeText("import { createRoot } from 'react-dom/client';"), "import { NextUIProvider } from '@nextui-org/react';")
+          .add(lineBeforeText("<App />"), "<NextUIProvider>")
+          .add(lineBeforeText("</React.StrictMode>"), "</NextUIProvider>")
+          .and()
+        .in(path("src/main/webapp/app/index.css"))
+          .add(lineBeforeText("body {"), "@tailwind base;" + LINE_BREAK + "@tailwind components;" + LINE_BREAK + "@tailwind utilities;" + LINE_BREAK)
         .and()
+      .and()
       .optionalReplacements()
         .in(path("src/main/webapp/app/common/primary/app/App.css"))
           .add(text("  -moz-osx-font-smoothing: grayscale;"), AUTHENTICATION_STYLE)

diff --git a/src/main/java/tech/jhipster/lite/module/domain/packagejson/JHipsterModulePackageJson.java b/src/main/java/tech/jhipster/lite/module/domain/packagejson/JHipsterModulePackageJson.java
@@ -12,13 +12,15 @@ public class JHipsterModulePackageJson {
   private final PackageJsonDependencies dependenciesToRemove;
   private final PackageJsonDependencies devDependencies;
   private final PackageJsonDependencies devDependenciesToRemove;
+  private final PackageJsonType type;
 
   private JHipsterModulePackageJson(JHipsterModulePackageJsonBuilder builder) {
     scripts = new Scripts(builder.scripts);
     dependencies = new PackageJsonDependencies(builder.dependencies);
     dependenciesToRemove = new PackageJsonDependencies(builder.dependenciesToRemove);
     devDependencies = new PackageJsonDependencies(builder.devDependencies);
     devDependenciesToRemove = new PackageJsonDependencies(builder.devDependenciesToRemove);
+    type = new PackageJsonType(builder.type);
   }
 
   public static JHipsterModulePackageJsonBuilder builder(JHipsterModuleBuilder module) {
@@ -55,6 +57,10 @@ public PackageJsonDependencies dependenciesToRemove() {
     return dependenciesToRemove;
   }
 
+  public PackageJsonType type() {
+    return type;
+  }
+
   public static class JHipsterModulePackageJsonBuilder {
 
     private final JHipsterModuleBuilder module;
@@ -63,6 +69,7 @@ public static class JHipsterModulePackageJsonBuilder {
     private final Collection<PackageJsonDependency> devDependencies = new ArrayList<>();
     private final Collection<PackageJsonDependency> dependenciesToRemove = new ArrayList<>();
     private final Collection<PackageJsonDependency> devDependenciesToRemove = new ArrayList<>();
+    private String type;
 
     private JHipsterModulePackageJsonBuilder(JHipsterModuleBuilder module) {
       Assert.notNull("module", module);
@@ -98,6 +105,12 @@ public JHipsterModulePackageJsonBuilder removeDevDependency(PackageName packageN
       return this;
     }
 
+    public JHipsterModulePackageJsonBuilder addType(String t) {
+      type = t;
+
+      return this;
+    }
+
     public JHipsterModuleBuilder and() {
       return module;
     }

diff --git a/src/main/java/tech/jhipster/lite/module/domain/packagejson/PackageJsonType.java b/src/main/java/tech/jhipster/lite/module/domain/packagejson/PackageJsonType.java
@@ -0,0 +1,3 @@
+package tech.jhipster.lite.module.domain.packagejson;
+
+public record PackageJsonType(String type) {}
diff --git a/...java/tech/jhipster/lite/module/infrastructure/secondary/FileSystemPackageJsonHandler.java b/...java/tech/jhipster/lite/module/infrastructure/secondary/FileSystemPackageJsonHandler.java
@@ -23,6 +23,7 @@
 import tech.jhipster.lite.module.domain.packagejson.JHipsterModulePackageJson;
 import tech.jhipster.lite.module.domain.packagejson.PackageJsonDependencies;
 import tech.jhipster.lite.module.domain.packagejson.PackageJsonDependency;
+import tech.jhipster.lite.module.domain.packagejson.PackageJsonType;
 import tech.jhipster.lite.module.domain.packagejson.Scripts;
 import tech.jhipster.lite.module.domain.properties.JHipsterProjectFolder;
 
@@ -52,6 +53,7 @@ public void handle(Indentation indentation, JHipsterProjectFolder projectFolder,
     Path file = getPackageJsonFile(projectFolder);
 
     String content = readContent(file);
+    content = replaceType(indentation, packageJson.type(), content);
     content = replaceScripts(indentation, packageJson.scripts(), content);
     content = replaceDevDependencies(indentation, packageJson.devDependencies(), content);
     content = replaceDependencies(indentation, packageJson.dependencies(), content);
@@ -124,6 +126,10 @@ private String removeDependencies(Indentation indentation, PackageJsonDependenci
       .apply();
   }
 
+  private String replaceType(Indentation indentation, PackageJsonType packageJsonType, String content) {
+    return JsonAction.replace().blocName("type").jsonContent(content).indentation(indentation).blocValue(packageJsonType.type()).apply();
+  }
+
   private List<JsonEntry> dependenciesEntries(PackageJsonDependencies devDependencies) {
     return devDependencies.stream().map(dependency -> new JsonEntry(dependency.packageName().get(), getNpmVersion(dependency))).toList();
   }
@@ -157,13 +163,15 @@ private static class JsonAction {
     private final Indentation indentation;
     private final Collection<JsonEntry> entries;
     private final JsonActionType action;
+    private final String blocValue;
 
     private JsonAction(JsonActionBuilder builder) {
       blocName = builder.blocName;
       jsonContent = builder.jsonContent;
       indentation = builder.indentation;
       entries = builder.entries;
       action = builder.action;
+      blocValue = builder.blocValue;
     }
 
     public static JsonActionBuilder replace() {
@@ -178,7 +186,11 @@ public static JsonActionBuilder remove() {
     public String handle() {
       Assert.notNull("action", action);
 
-      if (entries.isEmpty()) {
+      if (blocValue != null) {
+        return appendNewRootEntry(jsonContent);
+      }
+
+      if (entries == null || entries.isEmpty()) {
         return jsonContent;
       }
 
@@ -217,6 +229,22 @@ private String appendEntries(Matcher blocMatcher) {
       });
     }
 
+    private String appendNewRootEntry(String result) {
+      String jsonBloc = new StringBuilder()
+        .append(LINE_SEPARATOR)
+        .append(indentation.spaces())
+        .append(QUOTE)
+        .append(blocName)
+        .append(QUOTE)
+        .append(": ")
+        .append(QUOTE)
+        .append(blocValue)
+        .append(QUOTE)
+        .toString();
+
+      return result.replaceFirst("(\\s{1,10})\\}(\\s{1,10})$", jsonBloc + "$1}$2");
+    }
+
     private String appendNewBlock(String result) {
       String jsonBloc = new StringBuilder()
         .append(LINE_SEPARATOR)
@@ -274,6 +302,7 @@ private static class JsonActionBuilder {
       private Indentation indentation;
       private Collection<JsonEntry> entries;
       private JsonActionType action;
+      private String blocValue;
 
       private JsonActionBuilder(JsonActionType action) {
         this.action = action;
@@ -306,6 +335,12 @@ private JsonActionBuilder entries(Collection<JsonEntry> entries) {
       private String apply() {
         return new JsonAction(this).handle();
       }
+
+      public JsonActionBuilder blocValue(String blocValue) {
+        this.blocValue = blocValue;
+
+        return this;
+      }
     }
   }
 

diff --git a/src/main/resources/generator/client/react/postcss.config.js b/src/main/resources/generator/client/react/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/...ces/generator/client/react/src/main/webapp/app/login/primary/loginForm/index.tsx.mustache b/...ces/generator/client/react/src/main/webapp/app/login/primary/loginForm/index.tsx.mustache
@@ -28,7 +28,7 @@ const LoginForm = () => {
     <div>
       {!token ?
         (
-          <Button data-testid="login-button" css={{ backgroundColor: '$blue700' }} auto shadow onPress={onPressLoginButton}>
+          <Button data-testid="login-button" variant="shadow" onPress={onPressLoginButton}>
             Log in
           </Button>
         )
@@ -38,7 +38,7 @@ const LoginForm = () => {
             <p>
               Welcome <strong>{username}</strong>!
             </p>
-            <Button css={{ backgroundColor: '$blue700' }} size="sm" shadow onPress={onPressLogoutButton}>
+            <Button variant="shadow" onPress={onPressLogoutButton}>
               Log out
             </Button>
           </>

diff --git a/...ator/client/react/src/main/webapp/app/login/primary/loginModal/EyeFilledIcon.tsx.mustache b/...ator/client/react/src/main/webapp/app/login/primary/loginModal/EyeFilledIcon.tsx.mustache
@@ -0,0 +1,21 @@
+export const EyeFilledIcon = (props: any) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/...client/react/src/main/webapp/app/login/primary/loginModal/EyeSlashFilledIcon.tsx.mustache b/...client/react/src/main/webapp/app/login/primary/loginModal/EyeSlashFilledIcon.tsx.mustache
@@ -0,0 +1,33 @@
+export const EyeSlashFilledIcon = (props: any) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z"
+      fill="currentColor"
+    />
+    <path
+      d="M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z"
+      fill="currentColor"
+    />
+  </svg>
+);