refactor: add sdk-components-react-router package

This is 1:1 from sdk remix but with react-router imports
to unlock step-by-step migration to react-router v7

Author: TrySound

packages/sdk-components-react-remix/src/remix-form.tsx

@@ -1,11 +1,5 @@
-import {
-  type ElementRef,
-  type ComponentProps,
-  forwardRef,
-  useContext,
-} from "react";
+import { type ElementRef, type ComponentProps, forwardRef } from "react";
 import { Form, type FormProps } from "@remix-run/react";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 
 export const defaultTag = "form";
 
@@ -19,27 +13,21 @@ export const RemixForm = forwardRef<
       action?: string;
     }
 >(({ action, ...props }, ref) => {
-  const { renderer } = useContext(ReactSdkContext);
   // remix casts action to relative url
   if (
     action === undefined ||
     action === "" ||
     (typeof action === "string" && action?.startsWith("/"))
   ) {
-    // remix forms specifies own action instead of provided one
-    // which makes it hard to handle intercepted submit events
-    // render remix form only in published sites
-    if (renderer !== "canvas" && renderer !== "preview") {
-      return (
-        <Form
-          action={action}
-          {...props}
-          ref={ref}
-          // Preserve scroll position for navigation on the same path, as it's used for filtering and sorting
-          preventScrollReset={action === undefined || action === ""}
-        />
-      );
-    }
+    return (
+      <Form
+        action={action}
+        {...props}
+        ref={ref}
+        // Preserve scroll position for navigation on the same path, as it's used for filtering and sorting
+        preventScrollReset={action === undefined || action === ""}
+      />
+    );
   }
   return <form {...props} ref={ref} />;
 });

packages/sdk-components-react-remix/src/shared/remix-link.tsx

@@ -16,7 +16,7 @@ type Props = Omit<ComponentPropsWithoutRef<typeof Link>, "target"> & {
 
 export const wrapLinkComponent = (BaseLink: typeof Link) => {
   const Component = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
-    const { assetBaseUrl, renderer } = useContext(ReactSdkContext);
+    const { assetBaseUrl } = useContext(ReactSdkContext);
     // cast to string when invalid value type is provided with binding
     const href = String(props.href ?? "");
 
@@ -29,14 +29,9 @@ export const wrapLinkComponent = (BaseLink: typeof Link) => {
       href.startsWith("#") ||
       (href.startsWith("/") && href.startsWith(assetBaseUrl) === false)
     ) {
-      // remix links behave in unexpected way when delete in content editable
-      // always render simple <a> in canvas and preview
-      // since remix links do not affect it
-      if (renderer !== "canvas" && renderer !== "preview") {
-        // In the future, we will switch to the :local-link pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link). (aria-current="page" is used now)
-        // Therefore, we decided to use end={true} (exact route matching) for all links to facilitate easier migration.
-        return <RemixLink {...props} to={href} ref={ref} end />;
-      }
+      // In the future, we will switch to the :local-link pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link). (aria-current="page" is used now)
+      // Therefore, we decided to use end={true} (exact route matching) for all links to facilitate easier migration.
+      return <RemixLink {...props} to={href} ref={ref} end />;
     }
 
     const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } =

packages/sdk-components-react-router/LICENSE

@@ -0,0 +1,3 @@
+# Webstudio SDK Components
+
+Webstudio SDK is a TypeScript API that lets you use your Webstudio project or some components in your custom codebase or just render a complete Remix Document.

packages/sdk-components-react-router/README.md

@@ -0,0 +1,58 @@
+{
+  "name": "@webstudio-is/sdk-components-react-router",
+  "version": "0.0.0-webstudio-version",
+  "description": "Webstudio components for React Router",
+  "author": "Webstudio <[email protected]>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "files": [
+    "lib/*",
+    "!*.{test,stories}.*"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "webstudio": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js"
+    },
+    "./metas": {
+      "webstudio": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js"
+    },
+    "./props": {
+      "webstudio": "./src/props.ts",
+      "types": "./lib/types/props.d.ts",
+      "import": "./lib/props.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.ts' && prettier --write \"**/*.props.ts\"",
+    "dts": "tsc --project tsconfig.dts.json",
+    "typecheck": "tsc"
+  },
+  "peerDependencies": {
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "dependencies": {
+    "@webstudio-is/icons": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "react-router": "^7.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.3",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "@webstudio-is/generate-arg-types": "workspace:*",
+    "@webstudio-is/tsconfig": "workspace:*",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  }
+}