@webstudio-is/sdk-components-react-remix 0.189.0 → 0.191.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.189.0",
+  "version": "0.191.4",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,24 +35,23 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@webstudio-is/react-sdk": "0.189.0",
-    "@webstudio-is/sdk": "0.189.0",
-    "@webstudio-is/sdk-components-react": "0.189.0",
-    "@webstudio-is/icons": "0.189.0"
+    "@webstudio-is/icons": "0.191.4",
+    "@webstudio-is/react-sdk": "0.191.4",
+    "@webstudio-is/sdk": "0.191.4",
+    "@webstudio-is/sdk-components-react": "0.191.4"
   },
   "devDependencies": {
-    "@remix-run/react": "^2.12.1",
-    "@types/node": "^22.8.1",
+    "@remix-run/react": "^2.15.0",
+    "@types/node": "^22.9.3",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "typescript": "5.6.3",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
+    "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"

package/lib/components.js

@@ -1,165 +0,0 @@
-// src/body.tsx
-import { forwardRef } from "react";
-import { Scripts, ScrollRestoration } from "@remix-run/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Body = forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxs("body", { ...props, ref, children: [
-    children,
-    /* @__PURE__ */ jsx(Scripts, {}),
-    /* @__PURE__ */ jsx(ScrollRestoration, {})
-  ] })
-);
-Body.displayName = "Body";
-
-// src/link.tsx
-import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
-
-// src/shared/remix-link.tsx
-import { forwardRef as forwardRef2, useContext } from "react";
-import { NavLink as RemixLink } from "@remix-run/react";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var wrapLinkComponent = (BaseLink3) => {
-  const Component = forwardRef2((props, ref) => {
-    const { assetBaseUrl, renderer } = useContext(ReactSdkContext);
-    const href = String(props.href ?? "");
-    if (
-      // remix appends ?index in runtime but not in ssr
-      href === "" || href.startsWith("?") || href.startsWith("#") || href.startsWith("/") && href.startsWith(assetBaseUrl) === false
-    ) {
-      if (renderer !== "canvas" && renderer !== "preview") {
-        return /* @__PURE__ */ jsx2(RemixLink, { ...props, to: href, ref, end: true });
-      }
-    }
-    const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } = props;
-    return /* @__PURE__ */ jsx2(BaseLink3, { ...rest, ref });
-  });
-  Component.displayName = BaseLink3.displayName;
-  return Component;
-};
-
-// src/link.tsx
-var Link = wrapLinkComponent(BaseLink);
-
-// src/rich-text-link.tsx
-import { RichTextLink as BaseLink2 } from "@webstudio-is/sdk-components-react";
-var RichTextLink = wrapLinkComponent(BaseLink2);
-
-// src/webhook-form.tsx
-import {
-  forwardRef as forwardRef3,
-  useRef,
-  useEffect
-} from "react";
-import { useFetcher } from "@remix-run/react";
-import { formIdFieldName, formBotFieldName } from "@webstudio-is/sdk";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var useOnFetchEnd = (fetcher, handler) => {
-  const latestHandler = useRef(handler);
-  latestHandler.current = handler;
-  const prevFetcher = useRef(fetcher);
-  useEffect(() => {
-    if (prevFetcher.current.state !== fetcher.state && fetcher.state === "idle" && fetcher.data !== void 0) {
-      latestHandler.current(fetcher.data);
-    }
-    prevFetcher.current = fetcher;
-  }, [fetcher]);
-};
-var gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
-var getAspectRatioString = (width, height) => {
-  const r = gcd(width, height);
-  const aspectRatio = `${width / r}/${height / r}`;
-  return aspectRatio;
-};
-var isJSDom = () => {
-  if (typeof matchMedia === "undefined") {
-    return true;
-  }
-  const { width, height } = screen;
-  const deviceAspectRatio = getAspectRatioString(width, height);
-  const matchAspectRatio = matchMedia(
-    `(device-aspect-ratio: ${deviceAspectRatio})`
-  ).matches;
-  const matchWidthHeight = matchMedia(
-    `(device-width: ${width}px) and (device-height: ${height}px)`
-  ).matches;
-  const matchWidthHeightFail = matchMedia(
-    `(device-width: ${width - 1}px) and (device-height: ${height}px)`
-  ).matches;
-  const matchLight = matchMedia("(prefers-color-scheme: light)").matches;
-  const matchDark = matchMedia("(prefers-color-scheme: dark)").matches;
-  const hasMatchMedia = matchAspectRatio && matchWidthHeight && !matchWidthHeightFail && matchLight !== matchDark;
-  return hasMatchMedia === false;
-};
-var WebhookForm = forwardRef3(
-  ({ children, action, method, state = "initial", onStateChange, ...rest }, ref) => {
-    const fetcher = useFetcher();
-    useOnFetchEnd(fetcher, (data) => {
-      const state2 = data?.success === true ? "success" : "error";
-      onStateChange?.(state2);
-    });
-    const handleSubmitAndAddHiddenJsField = (event) => {
-      const hiddenInput = document.createElement("input");
-      hiddenInput.type = "hidden";
-      hiddenInput.name = formBotFieldName;
-      hiddenInput.value = isJSDom() ? "jsdom" : Date.now().toString(16);
-      event.currentTarget.appendChild(hiddenInput);
-    };
-    return /* @__PURE__ */ jsxs2(
-      fetcher.Form,
-      {
-        ...rest,
-        method: "post",
-        "data-state": state,
-        ref,
-        onSubmit: handleSubmitAndAddHiddenJsField,
-        children: [
-          /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "hidden",
-              name: formIdFieldName,
-              value: action?.toString()
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
-WebhookForm.displayName = "WebhookForm";
-
-// src/remix-form.tsx
-import {
-  forwardRef as forwardRef4,
-  useContext as useContext2
-} from "react";
-import { Form } from "@remix-run/react";
-import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var RemixForm = forwardRef4(({ action, ...props }, ref) => {
-  const { renderer } = useContext2(ReactSdkContext2);
-  if (action === void 0 || action === "" || typeof action === "string" && action?.startsWith("/")) {
-    if (renderer !== "canvas" && renderer !== "preview") {
-      return /* @__PURE__ */ jsx4(
-        Form,
-        {
-          action,
-          ...props,
-          ref,
-          preventScrollReset: action === void 0 || action === ""
-        }
-      );
-    }
-  }
-  return /* @__PURE__ */ jsx4("form", { ...props, ref });
-});
-RemixForm.displayName = "Form";
-export {
-  Body,
-  WebhookForm as Form,
-  Link,
-  RemixForm,
-  RichTextLink
-};