@webstudio-is/react-sdk 0.62.0 → 0.64.0

package/lib/types/components/italic.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/label.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/link.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/list-item.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/list.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/paragraph.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/radio-button-field.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/radio-button.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/separator.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/span.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/subscript.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/superscript.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/text-block.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/textarea.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "./component-meta";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/css/normalize.d.ts

@@ -14,6 +14,8 @@
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
  */
+import type { EmbedTemplateStyleDecl } from "../embed-template";
+export type Styles = EmbedTemplateStyleDecl[];
 export declare const div: ({
     state?: string | undefined;
     value: {

package/lib/types/css/presets.d.ts

@@ -1,2 +1,2 @@
-import type { EmbedTemplateStyleDecl } from "../embed-template";
-export declare const borders: EmbedTemplateStyleDecl[];
+import type { Styles } from "./normalize";
+export declare const borders: Styles;

package/lib/types/index.d.ts

@@ -6,5 +6,5 @@ export * from "./app";
 export * from "./components/components";
 export * from "./components/components-utils";
 export { customComponents, customComponentMetas, customComponentPropsMetas, } from "./app/custom-components";
-export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, componentCategories, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, componentCategories, stateCategories, } from "./components/component-meta";
 export * from "./embed-template";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.62.0",
+  "version": "0.64.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,16 +35,17 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.62.0",
-    "@webstudio-is/css-data": "^0.62.0",
-    "@webstudio-is/css-engine": "^0.62.0",
-    "@webstudio-is/css-vars": "^0.62.0",
-    "@webstudio-is/fonts": "^0.62.0",
-    "@webstudio-is/generate-arg-types": "^0.62.0",
-    "@webstudio-is/icons": "^0.62.0",
-    "@webstudio-is/image": "^0.62.0",
-    "@webstudio-is/prisma-client": "^0.62.0",
-    "@webstudio-is/project-build": "^0.62.0"
+    "@webstudio-is/asset-uploader": "^0.64.0",
+    "@webstudio-is/css-data": "^0.64.0",
+    "@webstudio-is/css-engine": "^0.64.0",
+    "@webstudio-is/css-vars": "^0.64.0",
+    "@webstudio-is/fonts": "^0.64.0",
+    "@webstudio-is/generate-arg-types": "^0.64.0",
+    "@webstudio-is/icons": "^0.64.0",
+    "@webstudio-is/image": "^0.64.0",
+    "@webstudio-is/prisma-client": "^0.64.0",
+    "@webstudio-is/project-build": "^0.64.0",
+    "@webstudio-is/form-handlers": "^0.64.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/__generated__/form.props.ts

@@ -5,10 +5,8 @@ export const props: Record<string, PropMeta> = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -452,6 +450,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"],
   },
 };

package/src/app/custom-components/form.tsx

@@ -1,3 +1,5 @@
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
@@ -6,6 +8,7 @@ import {
   type ElementRef,
   type ComponentProps,
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 
 export const defaultTag = "form";
 
@@ -78,17 +81,31 @@ const withoutMessages = (children: ReactNode) =>
 
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
+  Omit<ComponentProps<typeof defaultTag>, "method" | "action"> & {
     initialState?: "initial" | "success" | "error";
   }
->(({ children, initialState = "initial", ...props }, ref) => (
-  <form {...props} data-state={initialState} ref={ref}>
-    {initialState === "success"
-      ? onlySuccessMessage(children)
-      : initialState === "error"
-      ? onlyErrorMessage(children)
-      : withoutMessages(children)}
-  </form>
-));
+>(({ 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 (
+    <fetcher.Form {...props} method="post" data-state={state} ref={ref}>
+      <input type="hidden" name={formIdFieldName} value={instanceId} />
+      {state === "success"
+        ? onlySuccessMessage(children)
+        : state === "error"
+        ? onlyErrorMessage(children)
+        : withoutMessages(children)}
+    </fetcher.Form>
+  );
+});
 
 Form.displayName = "Form";

package/src/components/blockquote.ws.tsx

@@ -1,9 +1,10 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./blockquote";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/blockquote.props";
 
@@ -63,6 +64,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }],
 };

package/src/components/body.ws.tsx

@@ -1,9 +1,10 @@
 import { BodyIcon } from "@webstudio-is/icons";
 import { body } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/body.props";
 import type { defaultTag } from "./body";
@@ -41,6 +42,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Body",
   Icon: BodyIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/bold.ws.tsx

@@ -1,8 +1,9 @@
 import { BoldIcon } from "@webstudio-is/icons";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/bold.props";
 import { b } from "../css/normalize";
@@ -16,6 +17,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: BoldIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/box.ws.ts

@@ -1,8 +1,9 @@
 import { BoxIcon } from "@webstudio-is/icons";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/box.props";
 import type { Box } from "./box";
@@ -40,6 +41,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Box",
   Icon: BoxIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/button.ws.tsx

@@ -1,9 +1,10 @@
 import { ButtonElementIcon } from "@webstudio-is/icons";
 import { button } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/button.props";
 import type { defaultTag } from "./button";
@@ -19,7 +20,7 @@ export const meta: WsComponentMeta = {
   Icon: ButtonElementIcon,
   presetStyle,
   states: [
-    { selector: ":active", label: "Active" },
+    ...defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" },
   ],

package/src/components/checkbox-field.ws.tsx

@@ -1,8 +1,9 @@
 import { CheckboxCheckedIcon } from "@webstudio-is/icons";
-import type {
-  WsComponentMeta,
-  WsComponentPropsMeta,
-  PresetStyle,
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
 } from "./component-meta";
 import { props } from "./__generated__/checkbox-field.props";
 import type { defaultTag } from "./checkbox-field";
@@ -20,6 +21,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Checkbox Field",
   Icon: CheckboxCheckedIcon,
+  states: defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "Checkbox", props: [], children: [] },

package/src/components/checkbox.ws.tsx

@@ -1,8 +1,9 @@
 import { CheckboxCheckedIcon } from "@webstudio-is/icons";
-import type {
-  WsComponentMeta,
-  WsComponentPropsMeta,
-  PresetStyle,
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
 } from "./component-meta";
 import type { defaultTag } from "./checkbox";
 import { input } from "../css/normalize";
@@ -24,6 +25,7 @@ export const meta: WsComponentMeta = {
   Icon: CheckboxCheckedIcon,
   presetStyle,
   states: [
+    ...defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },

package/src/components/code.ws.tsx

@@ -1,8 +1,9 @@
 import { CodeIcon } from "@webstudio-is/icons";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { type defaultTag, displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
@@ -39,6 +40,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Code",
   Icon: CodeIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }],
 };

package/src/components/component-meta.ts

@@ -25,13 +25,24 @@ export const componentCategories = [
   "forms",
 ] as const;
 
+export const stateCategories = ["states", "component-states"] as const;
+
 export const ComponentState = z.object({
+  category: z.enum(stateCategories).optional(),
   selector: z.string(),
   label: z.string(),
 });
 
 export type ComponentState = z.infer<typeof ComponentState>;
 
+export const defaultStates: ComponentState[] = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" },
+];
+
 const WsComponentMeta = z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd

package/src/components/form.ws.tsx

@@ -1,9 +1,10 @@
 import { FormIcon } from "@webstudio-is/icons";
 import { form } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./form";
 import { props } from "./__generated__/form.props";
@@ -20,6 +21,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
+  states: defaultStates,
   presetStyle,
   children: [
     {

package/src/components/heading.ws.tsx

@@ -1,10 +1,11 @@
 import { HeadingIcon } from "@webstudio-is/icons";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { Heading } from "./heading";
 import { props } from "./__generated__/heading.props";
@@ -26,6 +27,7 @@ export const meta: WsComponentMeta = {
   label: "Heading",
   Icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/image.ws.tsx

@@ -1,9 +1,10 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./image";
 import { props } from "./__generated__/image.props";
@@ -31,6 +32,7 @@ export const meta: WsComponentMeta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/input.ws.tsx

@@ -1,9 +1,10 @@
 import { FormTextFieldIcon } from "@webstudio-is/icons";
 import { input } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
@@ -19,6 +20,7 @@ export const meta: WsComponentMeta = {
   Icon: FormTextFieldIcon,
   presetStyle,
   states: [
+    ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

package/src/components/italic.ws.tsx

@@ -1,9 +1,10 @@
 import { TextItalicIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./italic";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/italic.props";
 import { i } from "../css/normalize";
@@ -22,6 +23,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: TextItalicIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/label.ws.tsx

@@ -1,8 +1,9 @@
 import { TextBlockIcon } from "@webstudio-is/icons";
-import type {
-  WsComponentMeta,
-  WsComponentPropsMeta,
-  PresetStyle,
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
 } from "./component-meta";
 import { props } from "./__generated__/label.props";
 import type { defaultTag } from "./label";
@@ -20,6 +21,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Input Label",
   Icon: TextBlockIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }],
 };

package/src/components/link.ws.tsx

@@ -1,9 +1,10 @@
 import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./link";
 import { props } from "./__generated__/link.props";
@@ -28,7 +29,18 @@ export const meta: WsComponentMeta = {
   label: "Link Text",
   Icon: LinkIcon,
   presetStyle,
-  states: [{ selector: "[aria-current=page]", label: "Current page" }],
+  states: [
+    ...defaultStates,
+    {
+      selector: ":visited",
+      label: "Visited",
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page",
+    },
+  ],
   children: [{ type: "text", value: "Link text you can edit" }],
 };
 

package/src/components/list-item.ws.tsx

@@ -1,9 +1,10 @@
 import { ListItemIcon } from "@webstudio-is/icons";
 import { li } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./list-item";
 import { props } from "./__generated__/list-item.props";
@@ -19,6 +20,7 @@ export const meta: WsComponentMeta = {
   label: "List Item",
   Icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
+  states: defaultStates,
   presetStyle,
 };