[Updated - v0.4.0]

- Updated [Pantone Color of the year 2024](https://www.pantone.com/color-of-the-year/2024) - Updated dependencies - Update free content `storage.js`, a closure utility, access web storage api or cookie with a single command - Update free content `sonar-project.properties` for supporting SonarQube after initialized - Code Refactored
owlsome-official · Dec 27, 2023 · 1e4b600 · 1e4b600
1 parent 84da98f
commit 1e4b600
Show file tree

Hide file tree

Showing 25 changed files with 1,878 additions and 1,734 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Version History
 
+### [v0.4.0] - `2023-12-26`
+
+- Updated [Pantone Color of the year 2024](https://www.pantone.com/color-of-the-year/2024)
+- Updated dependencies
+- Update free content `storage.js`, a closure utility, access web storage api or cookie with a single command
+- Update free content `sonar-project.properties` for supporting SonarQube after initialized
+- Code Refactored
+
 ### [v0.3.0] - `2023-06-16`
 
 - Added vitest for testing tool
@@ -22,6 +30,7 @@
 
 - First time ever, it contains a lot of dir/files but it was needed.
 
+[v0.4.0]: https://github.com/buildingwatsize/vite-react-tailwind-antd/releases/tag/v0.4.0
 [v0.3.0]: https://github.com/buildingwatsize/vite-react-tailwind-antd/releases/tag/v0.3.0
 [v0.2.1]: https://github.com/buildingwatsize/vite-react-tailwind-antd/releases/tag/v0.2.1
 [v0.2.0]: https://github.com/buildingwatsize/vite-react-tailwind-antd/releases/tag/v0.2.0

diff --git a/README.md b/README.md
@@ -11,9 +11,8 @@ The Vite template with react plugin and tools for scaffolding your project
   - [📝 Table of Contents](#-table-of-contents)
   - [📦 Template contains](#-template-contains)
   - [📝 Versions (Last 2 Minor Version)](#-versions-last-2-minor-version)
+    - [v0.4.0 - `2023-12-26`](#v040---2023-12-26)
     - [v0.3.0 - `2023-06-16`](#v030---2023-06-16)
-    - [v0.2.1 - `2023-05-22`](#v021---2023-05-22)
-    - [v0.2.0 - `2023-01-30`](#v020---2023-01-30)
     - [Version History](#version-history)
   - [📌 Get Started](#-get-started)
     - [Want some more ?](#want-some-more-)
@@ -29,22 +28,20 @@ The Vite template with react plugin and tools for scaffolding your project
 
 ## 📝 Versions (Last 2 Minor Version)
 
-### v0.3.0 - `2023-06-16`
+### v0.4.0 - `2023-12-26`
 
-- Added vitest for testing tool
-- Updated "All-in-one" files and structures
+- Updated [Pantone Color of the year 2024](https://www.pantone.com/color-of-the-year/2024)
 - Updated dependencies
+- Update free content `storage.js`, a closure utility, access web storage api or cookie with a single command
+- Update free content `sonar-project.properties` for supporting SonarQube after initialized
+- Code Refactored
 
-### v0.2.1 - `2023-05-22`
+### v0.3.0 - `2023-06-16`
 
+- Added vitest for testing tool
+- Updated "All-in-one" files and structures
 - Updated dependencies
 
-### v0.2.0 - `2023-01-30`
-
-- Added `prettier`, and `prettier-plugin-tailwindcss`
-- Re-formatted all files
-- Added some necessary files for yarn v3
-
 ### Version History
 
 ... [more](./CHANGELOG.md)

diff --git a/README.md.example b/README.md.example
@@ -22,8 +22,8 @@ REPLACE_WITH_YOUR_PROJECT_NAME is ...
 
 - [x] React 18
 - [x] Vite with Vitest
-- [x] TailwindCSS (Class name tools)
-- [x] Ant Design v5 (Styled Component)
+- [x] TailwindCSS
+- [x] Ant Design v5
 - [x] Containerized with Docker (`nginx-alpine` image)
 - [x] CI/CD supported (`Jenkins` & `SonarQube`)
 
@@ -70,7 +70,7 @@ REPLACE_WITH_YOUR_PROJECT_NAME is ...
     cd REPLACE_WITH_YOUR_PROJECT_NAME
     ```
 
-3. Create new `.env.local` with contents from [FAQ](https://g.i.t/group/project/-/wikis/FAQ)
+3. (Optional) Rename `.env.local.example` to `.env.local` with contents from Wiki / Snippet
 
 4. Set up environment by command
 

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
       href="https://github.com/buildingwatsize"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#FFBE98" />
     <meta
       name="template-info"
       content="vite-react-tailwind-antd by buildingwatsize"

diff --git a/package.json b/package.json
@@ -1,30 +1,29 @@
 {
   "name": "buildingwatsize.vite-react-tailwind-antd",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest",
-    "test-coverage": "vitest run --coverage",
     "test:ci": "vitest run --coverage"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
-    "@vitest/coverage-c8": "^0.32.0",
-    "antd": "^5.6.1",
-    "autoprefixer": "^10.4.14",
-    "axios": "^1.4.0",
+    "@ant-design/icons": "^5.2.6",
+    "antd": "^5.12.5",
+    "autoprefixer": "^10.4.16",
+    "axios": "^1.6.2",
     "js-base64": "^3.7.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.32",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-loadinggg": "^1.8.1",
-    "react-router-dom": "^6.13.0",
-    "tailwindcss": "^3.3.2",
-    "vitest": "^0.32.0"
+    "react-loading-randomizable": "^1.0.0",
+    "react-router-dom": "^6.21.1",
+    "tailwindcss": "^3.4.0",
+    "vitest": "^1.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -33,6 +32,7 @@
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^1.1.0",
     "jsdom": "^22.1.0",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",

diff --git a/sonar-project.properties b/sonar-project.properties
@@ -0,0 +1,8 @@
+sonar.projectKey=REPLACE_WITH_YOUR_PROJECT_NAME
+sonar.projectName=REPLACE_WITH_YOUR_PROJECT_NAME
+sonar.projectVersion=1.0
+sonar.sources=.
+sonar.exclusions=**/node_modules/**, **.test.*, src/index.*, src/utils/constants.*
+sonar.sourceEncoding=UTF-8
+sonar.javascript.file.suffixes=.js,.jsx
+sonar.javascript.lcov.reportPaths=./coverage/lcov.info
diff --git a/src/components/AfterInstallation.jsx b/src/components/AfterInstallation.jsx
@@ -6,49 +6,50 @@ import { version } from "../../package.json";
 
 const AfterInstallation = () => {
   return (
-    <div className="w-full bg-gradient-to-l from-[#e2d6bf] to-[#e2a9a9] p-1.5">
-      <div className="bg-base-100 relative p-8">
-        <div className="absolute top-2.5 right-4">
-          <div className="text-neutral flex gap-1 rounded-full bg-gradient-to-r from-[#e2d6bf] to-[#e2a9a9] py-0.5 px-4 text-small">
-            <img src={ViteIcon} width="16px" alt="vite-icon" />
-            <img src={ReactIcon} width="16px" alt="react-icon" />
-            <strong>Template v{version}</strong>
+    <div className="w-full bg-gradient-to-l from-[#fff] to-[#fff] p-1.5">
+      <div className="relative p-8">
+        <div className="mb-4 flex flex-col justify-between sm:flex-row">
+          <div className="bg-gradient-to-l from-[#964F4C] to-[#964F4C] bg-clip-text text-h3 font-bold text-transparent">
+            After Installation
+          </div>
+          <div className="flex flex-col items-end gap-0.5 text-small">
+            <div className="text-neutral flex gap-1 rounded-full bg-gradient-to-r from-[#CA848A] to-[#FFBE98] px-4 py-0.5">
+              <img src={ViteIcon} width="16px" alt="vite-icon" />
+              <img src={ReactIcon} width="16px" alt="react-icon" />
+              <strong>Template v{version}</strong>
+            </div>
+            <sup className="flex items-center gap-2 text-right font-bold">
+              <a
+                href="https://www.pantone.com/color-of-the-year/2024"
+                target="_blank"
+                className="flex items-center gap-1"
+              >
+                <div className="h-2 w-2 bg-[#FFBE98]" />
+                Pantone Color of the Year 2024 - Peach Fuzz
+              </a>
+            </sup>
           </div>
         </div>
-
-        <sup className="absolute top-10 right-6 flex items-center gap-2 font-bold">
-          <div className="h-2 w-2 bg-[#be3455]" />
-          Pantone color of the year 2023 - Viva Magenta
-        </sup>
-
-        <div className="bg-gradient-to-l from-[#be3455] to-[#be3455] bg-clip-text text-h3 font-bold text-transparent">
-          After Installation
-        </div>
-
-        <div className="mx-auto mb-4 w-full max-w-xs rounded-xl bg-gradient-to-r from-[#e2d6bf] to-[#e2a9a9] p-1.5 text-center shadow-lg">
+        <div className="mx-auto mb-4 w-full max-w-xs rounded-xl bg-gradient-to-r from-[#CA848A] to-[#FFBE98] p-1.5 text-center shadow-lg">
           <div className="flex flex-col items-center">
-            <img src={LogoImage} alt="logo" />
+            <img src={LogoImage} alt="logo" className="w-[30vw] max-w-40" />
             <div className="bg-neutral w-full rounded-lg p-1">
-              <div>
-                <strong>App Version: </strong>
-                {version}
-              </div>
-              <div>
+              <div>This is the way -- Mandalorian</div>
+              <marquee>
                 <strong>Mode: </strong>
                 {GetEnv("MODE")}
-              </div>
+              </marquee>
             </div>
           </div>
         </div>
-
-        <div className="py-2">
+        <div className="py-4">
           <strong>
             You have to edit text by name below this{" "}
-            <span className="text-[#be3455]">
-              (Trick: use "Find All and Replace")
+            <span className="text-[#964F4C]">
+              (Spoiled Alert!, use "Find All and Replace")
             </span>
           </strong>
-          <ul className="list-[upper-roman] pl-8 pt-4">
+          <ul className="list-[upper-roman] pl-8">
             <li>REPLACE_WITH_YOUR_PROJECT_NAME</li>
             <li>REPLACE_WITH_YOUR_PROJECT_DESCRIPTION</li>
             <li>REPLACE_WITH_YOUR_APP_API</li>
@@ -58,8 +59,7 @@ const AfterInstallation = () => {
             <li>REPLACE_WITH_YOUR_DOCKER_REGISTRY</li>
           </ul>
         </div>
-
-        <div className="pt-4 text-small leading-tight text-[#be3455]">
+        <div className="text-small leading-tight text-[#964F4C]">
           Note: REPLACE_WITH_YOUR_SONARQUBE_IP_AND_PORT should be like
           "sub.host.com:9000" or "172.1.2.3:9000"
         </div>

diff --git a/src/components/Common/NavBar.jsx b/src/components/Common/NavBar.jsx
@@ -15,24 +15,29 @@ const NavBar = ({ fullSize }) => {
   return (
     <Header
       data-testid="navbarContainer"
-      className="fixed flex z-10 w-full"
+      className="fixed z-10 flex w-full drop-shadow-md"
       style={{
         backgroundColor: colorPrimary,
         paddingInline: 0,
       }}
     >
-      <div className="h-full pl-[5%] flex items-center gap-4 w-full">
+      <div className="flex h-full w-full items-center gap-4 pl-[5%]">
         <a href="/">
-          <div data-testid="navbarLogo" className="w-48 h-12 bg-white text-center">LOGO</div>
+          <div
+            data-testid="navbarLogo"
+            className="h-12 w-48 bg-white text-center"
+          >
+            LOGO
+          </div>
         </a>
         <div
           data-testid="navbarTitle"
           className={fullSize ? styles.navbarTitleFullSize : styles.navbarTitle}
         >
-          <div className="leading-8 font-bold text-[2.9vw] sm:text-h5">
+          <div className="text-[2.9vw] font-bold leading-8 sm:text-h5">
             {import.meta.env.VITE_PROJECT_NAME}
           </div>
-          <div className="leading-3 font-bold text-[2vw] sm:text-small uppercase pb-1">
+          <div className="pb-1 text-[2vw] font-bold uppercase leading-3 sm:text-small">
             {import.meta.env.VITE_PROJECT_DESCRIPTION}
           </div>
         </div>