diff --git a/.moon/tasks/tag-react-router.yml b/.moon/tasks/tag-react-router.yml index f647bf3..58d1b3e 100644 --- a/.moon/tasks/tag-react-router.yml +++ b/.moon/tasks/tag-react-router.yml @@ -4,8 +4,8 @@ fileGroups: react-router-config: - react-router.config.ts - vite.config.ts - react-router-app: - - app/**/* + react-router-src: + - src/**/* react-router-public: - public/**/* react-router-target: @@ -19,7 +19,7 @@ tasks: command: yarn dev inputs: - "@group(react-router-config)" - - "@group(react-router-app)" + - "@group(react-router-src)" - "@group(react-router-public)" react-router-build: env: @@ -37,7 +37,7 @@ tasks: command: yarn build inputs: - "@group(react-router-config)" - - "@group(react-router-app)" + - "@group(react-router-src)" - "@group(react-router-public)" outputs: - "@group(react-router-build)" @@ -47,10 +47,10 @@ tasks: - ~:react-router-build options: runDepsInParallel: false - command: yarn serve ./build/client + command: yarn serve -s ./build/client react-router-typecheck: command: yarn typecheck inputs: - "@group(react-router-config)" - - "@group(react-router-app)" + - "@group(react-router-src)" - tsconfig.json diff --git a/apps/ext-e2e-test-app/app/app.css b/apps/ext-e2e-test-app/app/app.css deleted file mode 100644 index ea1e941..0000000 --- a/apps/ext-e2e-test-app/app/app.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - margin: 0; - padding: 0; -} diff --git a/apps/ext-e2e-test-app/app/routes.ts b/apps/ext-e2e-test-app/app/routes.ts deleted file mode 100644 index 4b88aee..0000000 --- a/apps/ext-e2e-test-app/app/routes.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { index, type RouteConfig } from "@react-router/dev/routes"; - -export default [ - index("routes/home.tsx"), -] satisfies RouteConfig; diff --git a/apps/ext-e2e-test-app/app/routes/home.tsx b/apps/ext-e2e-test-app/app/routes/home.tsx deleted file mode 100644 index fefd66c..0000000 --- a/apps/ext-e2e-test-app/app/routes/home.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Route } from "./+types/home"; - -export function meta(_args: Route.MetaArgs) { - return [ - { - title: "Home", - }, - ]; -} - -export default function Home() { - return
Home
; -} diff --git a/apps/ext-e2e-test-app/app/welcome/welcome.tsx b/apps/ext-e2e-test-app/app/welcome/welcome.tsx deleted file mode 100644 index e710769..0000000 --- a/apps/ext-e2e-test-app/app/welcome/welcome.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Welcome() { - return
Welcome
; -} diff --git a/apps/ext-e2e-test-app/react-router.config.ts b/apps/ext-e2e-test-app/react-router.config.ts index 1fd7d96..561d30b 100644 --- a/apps/ext-e2e-test-app/react-router.config.ts +++ b/apps/ext-e2e-test-app/react-router.config.ts @@ -1,7 +1,6 @@ import type { Config } from "@react-router/dev/config"; export default { - // Config options... - // Server-side render by default, to enable SPA mode set this to `false` + appDirectory: "src", ssr: false, } satisfies Config; diff --git a/apps/ext-e2e-test-app/src/app.css b/apps/ext-e2e-test-app/src/app.css new file mode 100644 index 0000000..f1d8c73 --- /dev/null +++ b/apps/ext-e2e-test-app/src/app.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/apps/ext-e2e-test-app/src/components/layouts/test-screen-layout.tsx b/apps/ext-e2e-test-app/src/components/layouts/test-screen-layout.tsx new file mode 100644 index 0000000..5ce56af --- /dev/null +++ b/apps/ext-e2e-test-app/src/components/layouts/test-screen-layout.tsx @@ -0,0 +1,20 @@ +import { Link } from "react-router"; + +interface TestScreenLayoutProps { + children: React.ReactNode; +} + +export function TestScreenLayout({ children }: TestScreenLayoutProps) { + return ( + <> + + ← Back to Home + + {children} + + ); +} diff --git a/apps/ext-e2e-test-app/src/components/screens/click-test-screen.tsx b/apps/ext-e2e-test-app/src/components/screens/click-test-screen.tsx new file mode 100644 index 0000000..0b4917a --- /dev/null +++ b/apps/ext-e2e-test-app/src/components/screens/click-test-screen.tsx @@ -0,0 +1,169 @@ +import { useState } from "react"; +import { TestScreenLayout } from "../layouts/test-screen-layout"; + +export function meta() { + return [ + { + title: "Click Test", + }, + ]; +} + +export function ClickTestScreen() { + const [clickCount, setClickCount] = useState(0); + const [lastClicked, setLastClicked] = useState(null); + + const handleButtonClick = (name: string) => { + setClickCount((prev) => prev + 1); + setLastClicked(name); + }; + + return ( +
+ +

+ Click Test Screen +

+ +
+

+ Click Count: {clickCount} +

+

+ Last Clicked: {lastClicked ?? "None"} +

+
+ +
+

Basic Buttons

+
+ + + +
+
+ +
+

Links

+
+ + +
+
+ +
+

Positioned Elements

+
+ + + + + +
+
+ +
+

Nested Elements

+ +
+ +
+ +
+
+
+
+
+ ); +} diff --git a/apps/ext-e2e-test-app/src/components/screens/form-test-screen.tsx b/apps/ext-e2e-test-app/src/components/screens/form-test-screen.tsx new file mode 100644 index 0000000..d3f18aa --- /dev/null +++ b/apps/ext-e2e-test-app/src/components/screens/form-test-screen.tsx @@ -0,0 +1,213 @@ +import { useState } from "react"; +import { TestScreenLayout } from "../layouts/test-screen-layout"; + +export function meta() { + return [ + { + title: "Form Test", + }, + ]; +} + +interface FormData { + username: string; + email: string; + password: string; + search: string; + message: string; + selectOption: string; +} + +export function FormTestScreen() { + const [formData, setFormData] = useState({ + username: "", + email: "", + password: "", + search: "", + message: "", + selectOption: "", + }); + const [submittedData, setSubmittedData] = useState(null); + const [searchSubmitted, setSearchSubmitted] = useState(null); + + const handleChange = ( + e: React.ChangeEvent< + HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement + >, + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setSubmittedData({ + ...formData, + }); + }; + + const handleSearchSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setSearchSubmitted(formData.search); + }; + + return ( +
+ +

+ Form Test Screen +

+ + {submittedData && ( +
+

Submitted Data:

+
{JSON.stringify(submittedData, null, 2)}
+
+ )} + +
+

+ Search Form (Enter to Submit) +

+
+
+ + +
+
+ {searchSubmitted && ( +

+ Search submitted: {searchSubmitted} +

+ )} +
+ +
+

Registration Form

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +