Tailwindcss V4

Author: qmonmert

src/main/java/tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactory.java

@@ -1,15 +1,6 @@
 package tech.jhipster.lite.generator.client.react.security.jwt.domain;
 
-import static tech.jhipster.lite.module.domain.JHipsterModule.LINE_BREAK;
-import static tech.jhipster.lite.module.domain.JHipsterModule.from;
-import static tech.jhipster.lite.module.domain.JHipsterModule.lineBeforeRegex;
-import static tech.jhipster.lite.module.domain.JHipsterModule.lineBeforeText;
-import static tech.jhipster.lite.module.domain.JHipsterModule.moduleBuilder;
-import static tech.jhipster.lite.module.domain.JHipsterModule.packageName;
-import static tech.jhipster.lite.module.domain.JHipsterModule.path;
-import static tech.jhipster.lite.module.domain.JHipsterModule.regex;
-import static tech.jhipster.lite.module.domain.JHipsterModule.text;
-import static tech.jhipster.lite.module.domain.JHipsterModule.to;
+import static tech.jhipster.lite.module.domain.JHipsterModule.*;
 import static tech.jhipster.lite.module.domain.npm.JHLiteNpmVersionSource.COMMON;
 import static tech.jhipster.lite.module.domain.npm.JHLiteNpmVersionSource.REACT;
 
@@ -54,15 +45,14 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
       .packageJson()
         .addDependency(packageName("react-hook-form"), REACT)
         .addDependency(packageName("axios"), REACT)
-        .addDependency(packageName("@nextui-org/react"), REACT)
+        .addDependency(packageName("@heroui/react"), REACT)
         .addDevDependency(packageName("autoprefixer"), COMMON)
         .addDevDependency(packageName("sass"), REACT)
-        .addDevDependency(packageName("postcss"), COMMON)
+        .addDevDependency(packageName("@tailwindcss/vite"), COMMON)
         .addDevDependency(packageName("tailwindcss"), COMMON)
         .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"))
@@ -87,23 +77,28 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .add(TEST_JAVASCRIPT_SOURCE.template("common/services/storage.test.ts"), TEST_DESTINATION.append("common/services/storage.test.ts"))
         .and()
       .mandatoryReplacements()
+        .in(path("vite.config.ts"))
+          .add(lineAfterRegex("from 'vite';"), "import tailwindcss from '@tailwindcss/vite';")
+          .add(text("plugins: [react(), "), "plugins: [react(), tailwindcss(), ")
+          .and()
         .in(path("src/main/webapp/app/home/infrastructure/primary/HomePage.tsx"))
           .add(lineBeforeText("function HomePage() {"), "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 React from 'react';"), "import { NextUIProvider } from '@nextui-org/react';")
+          .add(lineBeforeText("import React from 'react';"), "import { HeroUIProvider } from '@heroui/react';")
           .add(regex("\\s+<HomePage />"),
                 """
 
-              \t\t<NextUIProvider>
+              \t\t<HeroUIProvider>
               \t\t\t<HomePage />
-              \t\t</NextUIProvider>\
+              \t\t</HeroUIProvider>\
               """.replace("\t", properties.indentation().spaces())
           )
           .and()
         .in(path("src/main/webapp/app/index.css"))
-          .add(lineBeforeText("body {"), "@tailwind base;" + LINE_BREAK + "@tailwind components;" + LINE_BREAK + "@tailwind utilities;" + LINE_BREAK)
+          // .add(lineBeforeText("body {"), "@config '../../../../tailwind.config.js';" + LINE_BREAK + "@import 'tailwindcss';" + LINE_BREAK)
+          .add(lineBeforeText("body {"), "@import 'tailwindcss';" + LINE_BREAK)
         .and()
       .and()
       .optionalReplacements()

src/main/resources/generator/client/react/security/jwt/postcss.config.js

@@ -1,4 +1,4 @@
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { createContext, useCallback, useMemo, useState } from 'react';
 
 import LoginModal from '@/login/primary/loginModal';

src/main/resources/generator/client/react/security/jwt/src/main/webapp/app/login/primary/loginForm/index.tsx.mustache

@@ -1,4 +1,4 @@
-import { Button, Input, Modal, ModalBody, ModalContent, ModalHeader, Spacer } from '@nextui-org/react';
+import { Button, Input, Modal, ModalBody, ModalContent, ModalHeader, Spacer } from '@heroui/react';
 import { useCallback, useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
 

src/main/resources/generator/client/react/security/jwt/src/main/webapp/app/login/primary/loginModal/index.tsx.mustache

@@ -1,10 +1,10 @@
-const { nextui } = require('@nextui-org/react');
+const { nextui } = require('@heroui/react');
 
 module.exports = {
   content: [
     './src/main/webapp/index.html',
     './src/main/webapp/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {},

src/main/resources/generator/client/react/security/jwt/tailwind.config.js

@@ -8,6 +8,7 @@
     "@playwright/test": "1.49.1",
     "@prettier/plugin-pug": "3.2.0",
     "@prettier/plugin-xml": "3.4.1",
+    "@tailwindcss/vite": "4.0.0",
     "@tikui/core": "6.3.0",
     "@tsconfig/recommended": "1.0.8",
     "@types/jest": "29.5.14",
@@ -51,7 +52,7 @@
     "stylelint-config-concentric-order": "5.2.0",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "tikuidoc-tikui": "8.0.1",
     "ts-jest": "29.2.5",
     "typescript": "5.7.3",

src/main/resources/generator/dependencies/common/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@nextui-org/react": "2.6.11",
+    "@heroui/react": "2.6.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@tsconfig/vite-react": "3.4.0",

src/main/resources/generator/dependencies/react/package.json

@@ -20,7 +20,15 @@ class ReactJwtModuleFactoryTest {
   void shouldBuildModule() {
     JHipsterModule module = factory.buildModule(properties());
 
-    JHipsterModuleAsserter asserter = assertThatModuleWithFiles(module, packageJsonFile(), app(), appCss(), indexTsx(), indexCss());
+    JHipsterModuleAsserter asserter = assertThatModuleWithFiles(
+      module,
+      packageJsonFile(),
+      app(),
+      appCss(),
+      indexTsx(),
+      indexCss(),
+      viteReactConfigFile()
+    );
 
     assertReactApp(asserter);
     asserter
@@ -39,9 +47,9 @@ void shouldBuildModule() {
       .containing(
         """
           <React.StrictMode>
-            <NextUIProvider>
+            <HeroUIProvider>
               <HomePage />
-            </NextUIProvider>
+            </HeroUIProvider>
           </React.StrictMode>,
         """
       );
@@ -71,11 +79,11 @@ private void assertReactApp(JHipsterModuleAsserter asserter) {
     asserter
       .hasFile("package.json")
       .containing(nodeDependency("autoprefixer"))
-      .containing(nodeDependency("postcss"))
+      .containing(nodeDependency("@tailwindcss/vite"))
       .containing(nodeDependency("tailwindcss"))
       .containing(nodeDependency("react-hook-form"))
       .containing(nodeDependency("axios"))
-      .containing(nodeDependency("@nextui-org/react"))
+      .containing(nodeDependency("@heroui/react"))
       .containing(nodeDependency("sass"))
       .and()
       .hasPrefixedFiles(

src/test/java/tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactoryTest.java

@@ -75,6 +75,10 @@ public static ModuleFile vitestConfigFile() {
     return file("src/main/resources/generator/typescript/vitest.config.ts.mustache", "vitest.config.ts");
   }
 
+  public static ModuleFile viteReactConfigFile() {
+    return file("src/main/resources/generator/client/react/core/vite.config.ts.mustache", "vite.config.ts");
+  }
+
   public static ModuleFile eslintConfigFile() {
     return file("src/main/resources/generator/typescript/eslint.config.js.mustache", "eslint.config.js");
   }