From 293f38b7e48c4729c58bd200afcc81451bbb19c8 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sat, 22 Feb 2025 12:03:32 +0800 Subject: [PATCH 1/4] chore: update Dockerfile and README for pnpm support and Node.js version --- Dockerfile | 24 ++++++++++++++---------- README.md | 53 ++++++++++++++++++++-------------------------------- package.json | 4 ++++ 3 files changed, 38 insertions(+), 43 deletions(-) diff --git a/Dockerfile b/Dockerfile index 207bf93..eabb397 100644 --- a/Dockerfile +++ b/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 -COPY ./package.json package-lock.json /app/ +FROM node:22.13.1-alpine AS production-dependencies-env +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 -COPY ./package.json package-lock.json /app/ +FROM node:22.13.1-alpine +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"] \ No newline at end of file +CMD ["pnpm", "start"] diff --git a/README.md b/README.md index e0d2066..bd4ca3b 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 4aafede..99d8da8 100644 --- a/package.json +++ b/package.json @@ -55,5 +55,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" } } From 531871d3490cc63c8039e6983839869f12a2b93a Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sat, 22 Feb 2025 12:07:29 +0800 Subject: [PATCH 2/4] chore: update package.json to use minimum version constraints for Node.js and pnpm --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 99d8da8..02e7448 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "vite-tsconfig-paths": "^5.1.4" }, "engines": { - "node": ">22.13.1", - "pnpm": ">9.15.4" + "node": ">=22.13.1", + "pnpm": ">=9.15.4" } } From 54faf5726241d76b691938a07495088ee4ab6145 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sat, 22 Feb 2025 15:17:46 +0800 Subject: [PATCH 3/4] feat: refactor PopupModal to use Headless UI components and update FormLogin layout --- app/components/popup/modal.tsx | 24 +++--- app/components/ui/form-login.tsx | 17 +--- package.json | 1 + pnpm-lock.yaml | 139 +++++++++++++++++++++++++++++++ 4 files changed, 154 insertions(+), 27 deletions(-) diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx index a41ffea..2aec6a7 100644 --- a/app/components/popup/modal.tsx +++ b/app/components/popup/modal.tsx @@ -1,3 +1,4 @@ +import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react' import type { ReactNode } from 'react' interface ModalProperties { @@ -13,18 +14,17 @@ export default function PopupModal({ }: ModalProperties) { if (!isOpen) return return ( - <> -
- -
- {children} -
+ + +
+ +
{children}
+
- + ) } diff --git a/app/components/ui/form-login.tsx b/app/components/ui/form-login.tsx index bd69933..d8379d2 100644 --- a/app/components/ui/form-login.tsx +++ b/app/components/ui/form-login.tsx @@ -2,27 +2,14 @@ import { useState } from 'react' import { Link } from 'react-router' -import { LeftArrow } from '~/components/icons/left-arrow' import { APP } from '~/data/meta' const FormLogin = () => { const [showPassword, setShowPassword] = useState(false) return ( -
-
-
- - - -
- +
+
=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react@0.26.28': + resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@floating-ui/utils@0.2.9': resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} + '@headlessui/react@2.2.0': + resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==} + engines: {node: '>=10'} + peerDependencies: + react: ^18 || ^19 || ^19.0.0-rc + react-dom: ^18 || ^19 || ^19.0.0-rc + '@humanwhocodes/config-array@0.13.0': resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -1016,6 +1032,30 @@ packages: '@radix-ui/rect@1.0.1': resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} + '@react-aria/focus@3.19.1': + resolution: {integrity: sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + + '@react-aria/interactions@3.23.0': + resolution: {integrity: sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + + '@react-aria/ssr@3.9.7': + resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==} + engines: {node: '>= 12'} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + + '@react-aria/utils@3.27.0': + resolution: {integrity: sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + '@react-router/dev@7.1.3': resolution: {integrity: sha512-BPdIk4m8shjfynnkFeR30eH6aawpFHZiWqccWXNFgmFjKBcTQe/j7QTKi6gchceXDau0j2fSLciQ07rYrIGdhw==} engines: {node: '>=20.0.0'} @@ -1072,6 +1112,16 @@ packages: peerDependencies: react-router: 7.1.3 + '@react-stately/utils@3.10.5': + resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + + '@react-types/shared@3.27.0': + resolution: {integrity: sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + '@rollup/rollup-android-arm-eabi@4.32.1': resolution: {integrity: sha512-/pqA4DmqyCm8u5YIDzIdlLcEmuvxb0v8fZdFhVMszSpDTgbQKdw3/mB3eMUHIbubtJ6F9j+LtmyCnHTEqIHyzA==} cpu: [arm] @@ -1175,6 +1225,9 @@ packages: engines: {node: '>=8.10'} hasBin: true + '@swc/helpers@0.5.15': + resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} + '@tailwindcss/node@4.0.1': resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==} @@ -1258,6 +1311,15 @@ packages: peerDependencies: vite: ^5.2.0 || ^6 + '@tanstack/react-virtual@3.13.0': + resolution: {integrity: sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + + '@tanstack/virtual-core@3.13.0': + resolution: {integrity: sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==} + '@types/conventional-commits-parser@5.0.1': resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==} @@ -3653,6 +3715,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + tailwind-merge@3.0.1: resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==} @@ -4469,8 +4534,25 @@ snapshots: react: 19.0.0 react-dom: 19.0.0(react@19.0.0) + '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@floating-ui/utils': 0.2.9 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + tabbable: 6.2.0 + '@floating-ui/utils@0.2.9': {} + '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@tanstack/react-virtual': 3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -4925,6 +5007,40 @@ snapshots: dependencies: '@babel/runtime': 7.26.7 + '@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-types/shared': 3.27.0(react@19.0.0) + '@swc/helpers': 0.5.15 + clsx: 2.1.1 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + + '@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@react-aria/ssr': 3.9.7(react@19.0.0) + '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-types/shared': 3.27.0(react@19.0.0) + '@swc/helpers': 0.5.15 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + + '@react-aria/ssr@3.9.7(react@19.0.0)': + dependencies: + '@swc/helpers': 0.5.15 + react: 19.0.0 + + '@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@react-aria/ssr': 3.9.7(react@19.0.0) + '@react-stately/utils': 3.10.5(react@19.0.0) + '@react-types/shared': 3.27.0(react@19.0.0) + '@swc/helpers': 0.5.15 + clsx: 2.1.1 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + '@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))': dependencies: '@babel/core': 7.26.7 @@ -5013,6 +5129,15 @@ snapshots: - supports-color - typescript + '@react-stately/utils@3.10.5(react@19.0.0)': + dependencies: + '@swc/helpers': 0.5.15 + react: 19.0.0 + + '@react-types/shared@3.27.0(react@19.0.0)': + dependencies: + react: 19.0.0 + '@rollup/rollup-android-arm-eabi@4.32.1': optional: true @@ -5078,6 +5203,10 @@ snapshots: ignore: 5.3.2 p-map: 4.0.0 + '@swc/helpers@0.5.15': + dependencies: + tslib: 2.8.1 + '@tailwindcss/node@4.0.1': dependencies: enhanced-resolve: 5.18.0 @@ -5147,6 +5276,14 @@ snapshots: tailwindcss: 4.0.1 vite: 5.4.14(@types/node@20.17.16)(lightningcss@1.29.1) + '@tanstack/react-virtual@3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@tanstack/virtual-core': 3.13.0 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + + '@tanstack/virtual-core@3.13.0': {} + '@types/conventional-commits-parser@5.0.1': dependencies: '@types/node': 20.17.16 @@ -7700,6 +7837,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + tabbable@6.2.0: {} + tailwind-merge@3.0.1: {} tailwindcss@4.0.1: {} From 9e50f8c7dcdc2250b31e4e40989dbf0f056d9e63 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sat, 22 Feb 2025 16:08:40 +0800 Subject: [PATCH 4/4] feat: enhance PopupModal with improved transition effects and backdrop styling --- app/components/popup/modal.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx index 2aec6a7..c072f5b 100644 --- a/app/components/popup/modal.tsx +++ b/app/components/popup/modal.tsx @@ -18,10 +18,14 @@ export default function PopupModal({ open={isOpen} onClose={onClose} className="relative z-50" + transition > - +
- +
{children}