@webstudio-is/sdk-components-react-remix 0.68.0

package/lib/cjs/link-block.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var link_block_exports = {};
+__export(link_block_exports, {
+  LinkBlock: () => LinkBlock
+});
+module.exports = __toCommonJS(link_block_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_remix_link = require("./shared/remix-link");
+const LinkBlock = (0, import_remix_link.wrapLinkComponent)(import_react_sdk.LinkBlock);

package/lib/cjs/link.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var link_exports = {};
+__export(link_exports, {
+  Link: () => Link
+});
+module.exports = __toCommonJS(link_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_remix_link = require("./shared/remix-link");
+const Link = (0, import_remix_link.wrapLinkComponent)(import_react_sdk.Link);

package/lib/cjs/metas.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var metas_exports = {};
+__export(metas_exports, {
+  Form: () => import_form.meta
+});
+module.exports = __toCommonJS(metas_exports);
+var import_form = require("./form.ws");

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/cjs/props.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var props_exports = {};
+__export(props_exports, {
+  Form: () => import_form.propsMeta
+});
+module.exports = __toCommonJS(props_exports);
+var import_form = require("./form.ws");

package/lib/cjs/rich-text-link.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var rich_text_link_exports = {};
+__export(rich_text_link_exports, {
+  RichTextLink: () => RichTextLink
+});
+module.exports = __toCommonJS(rich_text_link_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_remix_link = require("./shared/remix-link");
+const RichTextLink = (0, import_remix_link.wrapLinkComponent)(import_react_sdk.RichTextLink);

package/lib/cjs/shared/remix-link.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var remix_link_exports = {};
+__export(remix_link_exports, {
+  wrapLinkComponent: () => wrapLinkComponent
+});
+module.exports = __toCommonJS(remix_link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@remix-run/react");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const wrapLinkComponent = (BaseLink) => {
+  const Component = (0, import_react.forwardRef)((props, ref) => {
+    const href = (0, import_react_sdk.usePropUrl)((0, import_react_sdk.getInstanceIdFromComponentProps)(props), "href");
+    if (href?.type === "page") {
+      let to = href.page.path === "" ? "/" : href.page.path;
+      if (href.hash !== void 0) {
+        to += `#${href.hash}`;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.NavLink, { ...props, to, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
+  });
+  Component.displayName = BaseLink.displayName;
+  return Component;
+};

package/lib/components.js

@@ -0,0 +1,10 @@
+import { Link } from "./link";
+import { LinkBlock } from "./link-block";
+import { RichTextLink } from "./rich-text-link";
+import { Form } from "./form";
+export {
+  Form,
+  Link,
+  LinkBlock,
+  RichTextLink
+};

package/lib/form.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  cloneElement,
+  forwardRef
+} from "react";
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
+import { getInstanceIdFromComponentProps } from "@webstudio-is/react-sdk";
+const defaultTag = "form";
+const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
+const onlyErrorMessage = (children) => Children.map(children, (child) => {
+  if (typeof child !== "object" || child === null) {
+    return null;
+  }
+  if (isComponentNode("ErrorMessage", child)) {
+    return child;
+  }
+  if ("props" in child) {
+    const newChildren = onlyErrorMessage(child.props.children);
+    return Children.toArray(newChildren).some((child2) => child2 !== null) ? cloneElement(child, { children: newChildren }) : null;
+  }
+  return onlyErrorMessage(child);
+});
+const onlySuccessMessage = (children) => Children.map(children, (child) => {
+  if (typeof child !== "object" || child === null) {
+    return null;
+  }
+  if (isComponentNode("SuccessMessage", child)) {
+    return child;
+  }
+  if ("props" in child) {
+    const newChildren = onlySuccessMessage(child.props.children);
+    return Children.toArray(newChildren).some((child2) => child2 !== null) ? cloneElement(child, { children: newChildren }) : null;
+  }
+  return onlySuccessMessage(child);
+});
+const withoutMessages = (children) => Children.map(children, (child) => {
+  if (typeof child !== "object" || child === null) {
+    return child;
+  }
+  if (isComponentNode("ErrorMessage", child) || isComponentNode("SuccessMessage", child)) {
+    return null;
+  }
+  if ("props" in child) {
+    return cloneElement(child, {
+      children: withoutMessages(child.props.children)
+    });
+  }
+  return withoutMessages(child);
+});
+const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = getInstanceIdFromComponentProps(props);
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
+Form.displayName = "Form";
+export {
+  Form,
+  defaultTag
+};

package/lib/form.ws.js

@@ -0,0 +1,90 @@
+import { FormIcon } from "@webstudio-is/icons/svg";
+import { form } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/form.props";
+const presetStyle = {
+  form: [
+    ...form,
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Form",
+  icon: FormIcon,
+  presetStyle,
+  order: 0,
+  states: [
+    { selector: "[data-state=error]", label: "Error" },
+    { selector: "[data-state=success]", label: "Success" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Form",
+      children: [
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Name" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "name" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Email" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "email" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Button",
+          children: [{ type: "text", value: "Submit" }]
+        },
+        {
+          type: "instance",
+          component: "SuccessMessage",
+          children: [
+            {
+              type: "instance",
+              component: "TextBlock",
+              children: [
+                { type: "text", value: "Thank you for getting in touch!" }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "ErrorMessage",
+          children: [
+            {
+              type: "instance",
+              component: "TextBlock",
+              children: [
+                { type: "text", value: "Sorry, something went wrong." }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: ["initialState"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/link-block.js

@@ -0,0 +1,6 @@
+import { LinkBlock as BaseLink } from "@webstudio-is/react-sdk";
+import { wrapLinkComponent } from "./shared/remix-link";
+const LinkBlock = wrapLinkComponent(BaseLink);
+export {
+  LinkBlock
+};

package/lib/link.js

@@ -0,0 +1,6 @@
+import { Link as BaseLink } from "@webstudio-is/react-sdk";
+import { wrapLinkComponent } from "./shared/remix-link";
+const Link = wrapLinkComponent(BaseLink);
+export {
+  Link
+};

package/lib/metas.js

@@ -0,0 +1,4 @@
+import { meta } from "./form.ws";
+export {
+  meta as Form
+};

package/lib/props.js

@@ -0,0 +1,4 @@
+import { propsMeta } from "./form.ws";
+export {
+  propsMeta as Form
+};

package/lib/rich-text-link.js

@@ -0,0 +1,6 @@
+import { RichTextLink as BaseLink } from "@webstudio-is/react-sdk";
+import { wrapLinkComponent } from "./shared/remix-link";
+const RichTextLink = wrapLinkComponent(BaseLink);
+export {
+  RichTextLink
+};

package/lib/shared/remix-link.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { NavLink as RemixLink } from "@remix-run/react";
+import {
+  usePropUrl,
+  getInstanceIdFromComponentProps
+} from "@webstudio-is/react-sdk";
+const wrapLinkComponent = (BaseLink) => {
+  const Component = forwardRef((props, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+    if (href?.type === "page") {
+      let to = href.page.path === "" ? "/" : href.page.path;
+      if (href.hash !== void 0) {
+        to += `#${href.hash}`;
+      }
+      return /* @__PURE__ */ jsx(RemixLink, { ...props, to, ref });
+    }
+    return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
+  });
+  Component.displayName = BaseLink.displayName;
+  return Component;
+};
+export {
+  wrapLinkComponent
+};

package/lib/types/__generated__/form.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/link-block.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/link.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/rich-text-link.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components.d.ts

@@ -0,0 +1,4 @@
+export { Link } from "./link";
+export { LinkBlock } from "./link-block";
+export { RichTextLink } from "./rich-text-link";
+export { Form } from "./form";

package/lib/types/form.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const defaultTag = "form";
+export declare const Form: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action" | "method"> & {
+    initialState?: "error" | "initial" | "success" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/form.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/link-block.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const LinkBlock: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    prefetch?: "none" | "intent" | "render" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/link.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    prefetch?: "none" | "intent" | "render" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/metas.d.ts

@@ -0,0 +1 @@
+export { meta as Form } from "./form.ws";

package/lib/types/props.d.ts

@@ -0,0 +1 @@
+export { propsMeta as Form } from "./form.ws";

package/lib/types/rich-text-link.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const RichTextLink: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    prefetch?: "none" | "intent" | "render" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/shared/remix-link.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const wrapLinkComponent: (BaseLink: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    prefetch?: "none" | "intent" | "render" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>) => import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    prefetch?: "none" | "intent" | "render" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@webstudio-is/sdk-components-react-remix",
+  "version": "0.68.0",
+  "description": "Webstudio components for Remix",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "types": "lib/types/index.d.ts",
+  "files": [
+    "lib/*",
+    "src/*"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/components.ts",
+      "import": "./lib/components.js",
+      "require": "./lib/cjs/components.js"
+    },
+    "./metas": {
+      "source": "./src/metas.ts",
+      "import": "./lib/metas.js",
+      "require": "./lib/cjs/metas.js"
+    },
+    "./props": {
+      "source": "./src/props.ts",
+      "import": "./lib/props.js",
+      "require": "./lib/cjs/props.js"
+    }
+  },
+  "peerDependencies": {
+    "@remix-run/react": "^1.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@webstudio-is/form-handlers": "^0.68.0",
+    "@webstudio-is/generate-arg-types": "^0.68.0",
+    "@webstudio-is/icons": "^0.68.0",
+    "@webstudio-is/react-sdk": "^0.68.0"
+  },
+  "devDependencies": {
+    "@remix-run/react": "^1.15.0",
+    "@types/react": "^18.0.35",
+    "@types/react-dom": "^18.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "5.0.3",
+    "@webstudio-is/scripts": "^0.0.0",
+    "@webstudio-is/tsconfig": "^1.0.6"
+  },
+  "scripts": {
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "build:args": "generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "dts": "tsc --declarationDir lib/types",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "checks": "pnpm typecheck && pnpm lint"
+  }
+}