Add remote components

.yarnrc.yml

@@ -4,7 +4,9 @@ enableScripts: false
 
 logFilters:
   - code: YN0086
-    level: error
+    level: warning
+    # @todo: reset to error when packages supporting React 19
+    # level: error
   - code: YN0068
     level: error
   - code: YN0069
@@ -73,4 +75,4 @@ packageExtensions:
     dependencies:
       eslint: "*"
 
-yarnPath: .yarn/releases/yarn-4.5.3.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

demos/remote-dom/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "next/core-web-vitals",
+  "overrides": [
+    {
+      "files": "src/content/**/examples/*.tsx",
+      "rules": {
+        "react/jsx-no-undef": ["off"]
+      }
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": ["error", "packages/docs/src/app/"]
+  }
+}

demos/remote-dom/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/scripts/out/

demos/remote-dom/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  basePath: process.env.NEXT_BASE_PATH ?? "",
+  pageExtensions: ["js", "jsx", "ts", "tsx"],
+};
+
+export default nextConfig;

demos/remote-dom/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mittwald/flow-demo-remote-dom",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "run nx run-many --outputStyle=stream --projects=@mittwald/flow-demo-remote-dom --targets=start,build:deps:watch",
+    "start": "run next dev",
+    "test:compile": "run tsc --noEmit"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.6.0",
+    "@mittwald/flow-design-tokens": "workspace:^",
+    "@mittwald/flow-react-components": "workspace:^",
+    "@mittwald/flow-remote-elements": "workspace:^",
+    "@mittwald/flow-remote-react-components": "workspace:^",
+    "@mittwald/flow-remote-react-renderer": "workspace:^",
+    "@mittwald/react-use-promise": "^2.6.0",
+    "@tabler/icons-react": "^3.28.1",
+    "clsx": "^2.1.1",
+    "next": "~15.1.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-hook-form": "^7.54.2",
+    "remeda": "^2.19.0",
+    "sass": "^1.83.1",
+    "webpack": "^5.97.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@yarnpkg/pnpify": "^4.1.3",
+    "eslint": "^9.17.0",
+    "nx": "^20.3.1",
+    "typescript": "^5.7.3"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
+  },
+  "nx": {
+    "targets": {
+      "dev": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
+  }
+}

demos/remote-dom/src/app/global.css

@@ -0,0 +1,3 @@
+body {
+  padding: var(--size-px--l);
+}

demos/remote-dom/src/app/host/[demo]/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { RemoteRenderer } from "@mittwald/flow-remote-react-renderer";
+import { useParams } from "next/navigation";
+
+export default function Page() {
+  const { demo } = useParams<{ demo: string }>();
+  return (
+    <RemoteRenderer
+      src={`http://localhost:3000/remote/${demo}`}
+      iframeStyle={{
+        border: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "600px",
+        width: "100%",
+      }}
+    />
+  );
+}

demos/remote-dom/src/app/host/layout.module.css

@@ -0,0 +1,10 @@
+.rootContainer {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-px--l);
+}
+
+.mainContainer {
+}

demos/remote-dom/src/app/host/layout.tsx

@@ -0,0 +1,31 @@
+import "@mittwald/flow-react-components/all.css";
+import "@mittwald/flow-remote-react-renderer/polyfill";
+import type { PropsWithChildren } from "react";
+import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation";
+import { Link } from "@mittwald/flow-react-components/Link";
+import styles from "./layout.module.css";
+import { Separator } from "@mittwald/flow-react-components/Separator";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <div className={styles.rootContainer}>
+      <HeaderNavigation>
+        <Link href="/host/non-interactive">Non-interactive</Link>
+        <Link href="/host/event-handler">Event handler</Link>
+        <Link href="/host/modal">Modal</Link>
+        <Link href="/host/simple-form">Simple Form</Link>
+        <Link href="/host/action-form">Action Form</Link>
+        <Link href="/host/react-hook-form">React Hook Form</Link>
+        <Link href="/host/rhf-form">RHF Form</Link>
+        <Link href="/host/suspense">Suspense</Link>
+        <Link href="/host/svg">Icon/SVG</Link>
+        <Link href="/host/list">List</Link>
+        <Link href="/host/performance">Performance</Link>
+      </HeaderNavigation>
+      <Separator />
+      <main className={styles.mainContainer}>
+        <div>{props.children}</div>
+      </main>
+    </div>
+  );
+}

demos/remote-dom/src/app/host/page.tsx

@@ -0,0 +1,5 @@
+import { Text } from "@mittwald/flow-react-components/Text";
+
+export default function Page() {
+  return <Text>Please select a demo</Text>;
+}

demos/remote-dom/src/app/layout.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+import { LinkProvider } from "@mittwald/flow-react-components/nextjs";
+import "./global.css";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <body>
+        <LinkProvider>{props.children}</LinkProvider>
+      </body>
+    </html>
+  );
+}

demos/remote-dom/src/app/local/action-form/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import Button from "@mittwald/flow-react-components/Button";
+import Section from "@mittwald/flow-react-components/Section";
+import TextField from "@mittwald/flow-react-components/TextField";
+import { useActionState } from "react";
+import { formServerAction } from "@/app/remote/actions";
+
+export default function Page() {
+  const [, formAction] = useActionState(formServerAction, null);
+
+  return (
+    <form action={formAction}>
+      <Section>
+        <TextField name="test" aria-label="Test" />
+        <Button type="submit">Submit</Button>
+      </Section>
+    </form>
+  );
+}

demos/remote-dom/src/app/local/layout.tsx

@@ -0,0 +1,7 @@
+"use client";
+import "@mittwald/flow-react-components/all.css";
+import { type PropsWithChildren } from "react";
+
+export default function Page(props: PropsWithChildren) {
+  return <>{props.children}</>;
+}

demos/remote-dom/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  redirect("/host");
+}

demos/remote-dom/src/app/remote/action-form/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+import {
+  Button,
+  Text,
+  Form,
+  Section,
+  TextField,
+  CodeBlock,
+} from "@mittwald/flow-remote-react-components";
+import { formServerAction } from "@/app/remote/actions";
+import type { FC } from "react";
+import { useFormStatus } from "react-dom";
+import { useActionState } from "react";
+
+const FormStatus: FC = () => {
+  const status = useFormStatus();
+  return <CodeBlock code={JSON.stringify(status, undefined, 2)} />;
+};
+
+export default function Page() {
+  const [callCount, dispatchFormServerAction, isPending] = useActionState(
+    formServerAction,
+    0,
+  );
+
+  return (
+    <Form action={dispatchFormServerAction}>
+      <Section>
+        <TextField name="test" aria-label="Test" />
+        <Button type="submit" isPending={isPending}>
+          Submit
+        </Button>
+        <Text>Called {callCount} times</Text>
+        <FormStatus />
+      </Section>
+    </Form>
+  );
+}

demos/remote-dom/src/app/remote/actions.ts

@@ -0,0 +1,32 @@
+"use server";
+
+const sleep = () => new Promise((res) => setTimeout(res, 2000));
+
+export async function getServerData() {
+  await sleep();
+  return "Data from server action";
+}
+
+export async function login(formState: unknown | null, formData: FormData) {
+  await sleep();
+  console.log(formData, "Server");
+
+  return {
+    success: true,
+  };
+}
+
+export async function formServerAction(prevState: number, formData: FormData) {
+  console.log("Calling form server action with data: ", formData);
+  await sleep();
+  console.log("Done");
+  return prevState + 1;
+}
+
+export async function formReactHookServerAction(
+  prevState: unknown,
+  formData: FormData,
+) {
+  await sleep();
+  console.log("action form", formData);
+}

demos/remote-dom/src/app/remote/event-handler/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import {
+  Button,
+  CodeBlock,
+  Section,
+  TextField,
+} from "@mittwald/flow-remote-react-components";
+import { useState } from "react";
+
+export default function Page() {
+  const [event, setEvent] = useState<unknown>();
+
+  return (
+    <Section>
+      <Button onPress={setEvent} color="danger" variant="outline">
+        Press me
+      </Button>
+      <TextField onChange={setEvent} aria-label="Test" />
+      <CodeBlock code={JSON.stringify(event, undefined, 2)} />
+    </Section>
+  );
+}

demos/remote-dom/src/app/remote/layout.css

@@ -0,0 +1,21 @@
+body {
+  background-color: bisque;
+}
+
+script {
+  display: none;
+}
+
+* {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  font-family: sans-serif;
+}
+
+[flr-*] {
+  display: none;
+}
+
+* * {
+  padding-left: 20px;
+}