@webstudio-is/react-sdk 0.58.0 → 0.60.0

package/src/components/__generated__/subscript.props.ts

@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
   },
   accessKey: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
   className: { required: false, control: "text", type: "string" },
   contentEditable: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
+  nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   spellCheck: { required: false, control: "boolean", type: "boolean" },
   tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
   radioGroup: { required: false, control: "text", type: "string" },
   role: { required: false, control: "text", type: "string" },
   about: { required: false, control: "text", type: "string" },
+  content: { required: false, control: "text", type: "string" },
   datatype: { required: false, control: "text", type: "string" },
   inlist: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   resource: { required: false, control: "text", type: "string" },
+  rev: { required: false, control: "text", type: "string" },
   typeof: { required: false, control: "text", type: "string" },
   vocab: { required: false, control: "text", type: "string" },
   autoCapitalize: { required: false, control: "text", type: "string" },

package/src/components/__generated__/superscript.props.ts

@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
   },
   accessKey: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
   className: { required: false, control: "text", type: "string" },
   contentEditable: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
+  nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   spellCheck: { required: false, control: "boolean", type: "boolean" },
   tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
   radioGroup: { required: false, control: "text", type: "string" },
   role: { required: false, control: "text", type: "string" },
   about: { required: false, control: "text", type: "string" },
+  content: { required: false, control: "text", type: "string" },
   datatype: { required: false, control: "text", type: "string" },
   inlist: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   resource: { required: false, control: "text", type: "string" },
+  rev: { required: false, control: "text", type: "string" },
   typeof: { required: false, control: "text", type: "string" },
   vocab: { required: false, control: "text", type: "string" },
   autoCapitalize: { required: false, control: "text", type: "string" },

package/src/components/__generated__/text-block.props.ts

@@ -17,6 +17,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
   },
   accessKey: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
   className: { required: false, control: "text", type: "string" },
   contentEditable: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
@@ -25,6 +26,7 @@ export const props: Record<string, PropMeta> = {
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
+  nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   spellCheck: { required: false, control: "boolean", type: "boolean" },
   tabIndex: { required: false, control: "number", type: "number" },
@@ -37,11 +39,14 @@ export const props: Record<string, PropMeta> = {
   radioGroup: { required: false, control: "text", type: "string" },
   role: { required: false, control: "text", type: "string" },
   about: { required: false, control: "text", type: "string" },
+  content: { required: false, control: "text", type: "string" },
   datatype: { required: false, control: "text", type: "string" },
   inlist: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   resource: { required: false, control: "text", type: "string" },
+  rev: { required: false, control: "text", type: "string" },
   typeof: { required: false, control: "text", type: "string" },
   vocab: { required: false, control: "text", type: "string" },
   autoCapitalize: { required: false, control: "text", type: "string" },

package/src/components/body.ws.tsx

@@ -15,11 +15,6 @@ const presetStyle = {
       value: 100,
     },
 
-    backgroundColor: {
-      type: "keyword",
-      value: "white",
-    },
-
     fontFamily: {
       type: "keyword",
       value: "Arial",
@@ -36,11 +31,6 @@ const presetStyle = {
       unit: "number",
       value: 1.5,
     },
-
-    color: {
-      type: "keyword",
-      value: "#232323",
-    },
   },
 } as const satisfies Record<typeof defaultTag, Style>;
 

package/src/components/component-meta.ts

@@ -23,6 +23,13 @@ export const componentCategories = [
   "forms",
 ] as const;
 
+export const ComponentState = z.object({
+  selector: z.string(),
+  label: z.string(),
+});
+
+export type ComponentState = z.infer<typeof ComponentState>;
+
 const WsComponentMeta = z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd
@@ -40,6 +47,7 @@ const WsComponentMeta = z.object({
   label: z.string(),
   Icon: z.function(),
   presetStyle: z.optional(z.any()),
+  states: z.optional(z.array(ComponentState)),
   children: z.optional(z.array(z.string())),
 });
 

package/src/components/link-block.ws.tsx

@@ -1,7 +1,7 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link-block.props";
-import { propsMeta as linkPropsMeta } from "./link.ws";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import type { defaultTag } from "./link-block";
 import type { Style } from "@webstudio-is/css-data";
 import { a } from "../css/normalize";
@@ -21,6 +21,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,
+  states: linkMeta.states,
   presetStyle,
 };
 

package/src/components/link.tsx

@@ -23,7 +23,7 @@ export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
 
   switch (href?.type) {
     case "page":
-      url = href.page.path;
+      url = href.page.path === "" ? "/" : href.page.path;
       if (href.hash !== undefined) {
         url += `#${href.hash}`;
       }

package/src/components/link.ws.tsx

@@ -26,6 +26,7 @@ export const meta: WsComponentMeta = {
   label: "Link Text",
   Icon: LinkIcon,
   presetStyle,
+  states: [{ selector: "[aria-current=page]", label: "Current page" }],
   children: ["Link text you can edit"],
 };
 

package/src/index.ts

@@ -13,5 +13,6 @@ export {
 export {
   type WsComponentPropsMeta,
   type WsComponentMeta,
+  type ComponentState,
   componentCategories,
 } from "./components/component-meta";

package/lib/app/handle-request.server.js

@@ -1,16 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { renderToString } from "react-dom/server";
-import { RemixServer } from "@remix-run/react";
-const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
-  const markup = renderToString(
-    /* @__PURE__ */ jsx(RemixServer, { context: remixContext, url: request.url })
-  );
-  responseHeaders.set("Content-Type", "text/html");
-  return new Response(`<!DOCTYPE html>${markup}`, {
-    status: responseStatusCode,
-    headers: responseHeaders
-  });
-};
-export {
-  handleRequest
-};

package/lib/cjs/app/handle-request.server.js

@@ -1,36 +0,0 @@
-"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 handle_request_server_exports = {};
-__export(handle_request_server_exports, {
-  handleRequest: () => handleRequest
-});
-module.exports = __toCommonJS(handle_request_server_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_server = require("react-dom/server");
-var import_react = require("@remix-run/react");
-const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
-  const markup = (0, import_server.renderToString)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.RemixServer, { context: remixContext, url: request.url })
-  );
-  responseHeaders.set("Content-Type", "text/html");
-  return new Response(`<!DOCTYPE html>${markup}`, {
-    status: responseStatusCode,
-    headers: responseHeaders
-  });
-};

package/lib/types/app/handle-request.server.d.ts

@@ -1,2 +0,0 @@
-import type { EntryContext } from "@remix-run/node";
-export declare const handleRequest: (request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext) => Response;

package/src/app/handle-request.server.tsx

@@ -1,21 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { RemixServer } from "@remix-run/react";
-import type { EntryContext } from "@remix-run/node";
-
-export const handleRequest = (
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) => {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response(`<!DOCTYPE html>${markup}`, {
-    status: responseStatusCode,
-    headers: responseHeaders,
-  });
-};