refactor: add sdk-components-react-router package (#4596)

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/package.json

@@ -31,7 +31,6 @@
   },
   "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"
   },
@@ -41,7 +40,6 @@
     "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:*"
@@ -50,7 +48,6 @@
     "@remix-run/react": "^2.15.2",
     "@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"

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 } =