Merge remote-tracking branch 'origin/master' into feature/slicing

Dockerfile

@@ -1,22 +1,26 @@
-FROM node:20-alpine AS development-dependencies-env
+FROM node:22.13.1-alpine AS development-dependencies-env
+RUN npm install -g pnpm@9.15.4
 COPY . /app
 WORKDIR /app
-RUN npm ci
+RUN pnpm install
 
-FROM node:20-alpine AS production-dependencies-env
+FROM node:22.13.1-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
+RUN npm install -g pnpm@9.15.4
+COPY ./package.json pnpm-lock.yaml /app/
 WORKDIR /app
-RUN npm ci --omit=dev
+RUN pnpm install --prod
 
-FROM node:20-alpine AS build-env
+FROM node:22.13.1-alpine AS build-env
+RUN npm install -g pnpm@9.15.4
 COPY . /app/
 COPY --from=development-dependencies-env /app/node_modules /app/node_modules
 WORKDIR /app
-RUN npm run build
+RUN pnpm build
 
-FROM node:20-alpine
+FROM node:22.13.1-alpine
-COPY ./package.json package-lock.json /app/
+RUN npm install -g pnpm@9.15.4
+COPY ./package.json pnpm-lock.yaml /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
-CMD ["npm", "run", "start"]
+CMD ["pnpm", "start"]

README.md

@@ -1,27 +1,26 @@
-# Welcome to React Router!
-
-A modern, production-ready template for building full-stack React applications using React Router.
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
-
-## Features
-
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
-
 ## Getting Started
 
+### Prerequisite
+
+This project requires:
+
+- Node.js version 22.13.1
+- pnpm version 9.15.4
+
+To install Node.js, visit [nodejs.org](https://nodejs.org/)
+
+To install pnpm, run:
+
+```bash
+npm install -g pnpm@9.15.4
+```
+
 ### Installation
 
 Install the dependencies:
 
 ```bash
-npm install
+pnpm install
 ```
 
 ### Development
@@ -29,7 +28,7 @@ npm install
 Start the development server with HMR:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Your application will be available at `http://localhost:5173`.
@@ -39,31 +38,19 @@ Your application will be available at `http://localhost:5173`.
 Create a production build:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 ## Deployment
 
 ### Docker Deployment
 
-This template includes three Dockerfiles optimized for different package managers:
-
-- `Dockerfile` - for npm
-- `Dockerfile.pnpm` - for pnpm
-- `Dockerfile.bun` - for bun
-
 To build and run using Docker:
 
 ```bash
-# For npm
+# Build the docker
 docker build -t my-app .
 
-# For pnpm
-docker build -f Dockerfile.pnpm -t my-app .
-
-# For bun
-docker build -f Dockerfile.bun -t my-app .
-
 # Run the container
 docker run -p 3000:3000 my-app
 ```
@@ -81,7 +68,7 @@ The containerized application can be deployed to any platform that supports Dock
 
 If you're familiar with deploying Node applications, the built-in app server is production-ready.
 
-Make sure to deploy the output of `npm run build`
+Make sure to deploy the output of `pnpm build`
 
 ```
 ├── package.json

app/components/popup/modal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogPanel } from '@headlessui/react'
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
 type ModalProperties = {
@@ -16,20 +16,19 @@ export default function PopupModal({
   return (
     <Dialog
       open={isOpen}
-      as="div"
-      className="relative z-30 focus:outline-none"
       onClose={onClose}
-    >
+      className="relative z-50"
-      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
-        <div className="flex min-h-full items-center justify-center sm:p-4">
-          <DialogPanel
       transition
-            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
     >
-            {children}
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+          <div className="relative">{children}</div>
         </DialogPanel>
       </div>
-      </div>
     </Dialog>
   )
 }

app/components/ui/form-login.tsx

@@ -4,18 +4,30 @@ import { useState } from 'react'
 import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
-import HeaderModal from '~/components/popup/header-modal'
+import { APP } from '~/data/meta'
 
 const FormLogin = () => {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="relative flex flex-col items-center justify-center">
+    <div className="flex items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
+          </p>
+        </div>
+
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">

package.json

@@ -57,5 +57,9 @@
     "typescript-eslint": "^8.22.0",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.4"
+  },
+  "engines": {
+    "node": ">=22.13.1",
+    "pnpm": ">=9.15.4"
   }
 }