@webstudio-is/react-sdk 0.58.0 → 0.59.0

package/lib/cjs/components/component-meta.js

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var component_meta_exports = {};
 __export(component_meta_exports, {
+  ComponentState: () => ComponentState,
   componentCategories: () => componentCategories
 });
 module.exports = __toCommonJS(component_meta_exports);
@@ -33,6 +34,10 @@ const componentCategories = [
   "media",
   "forms"
 ];
+const ComponentState = import_zod.z.object({
+  selector: import_zod.z.string(),
+  label: import_zod.z.string()
+});
 const WsComponentMeta = import_zod.z.object({
   category: import_zod.z.enum(componentCategories).optional(),
   // container - can accept other components with dnd
@@ -50,5 +55,6 @@ const WsComponentMeta = import_zod.z.object({
   label: import_zod.z.string(),
   Icon: import_zod.z.function(),
   presetStyle: import_zod.z.optional(import_zod.z.any()),
+  states: import_zod.z.optional(import_zod.z.array(ComponentState)),
   children: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))
 });

package/lib/cjs/components/link-block.ws.js

@@ -40,6 +40,7 @@ const meta = {
   type: "container",
   label: "Link Block",
   Icon: import_icons.BoxLinkIcon,
+  states: import_link.meta.states,
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/link.ws.js

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

package/lib/components/component-meta.js

@@ -10,6 +10,10 @@ const componentCategories = [
   "media",
   "forms"
 ];
+const ComponentState = z.object({
+  selector: z.string(),
+  label: z.string()
+});
 const WsComponentMeta = z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd
@@ -27,8 +31,10 @@ 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()))
 });
 export {
+  ComponentState,
   componentCategories
 };

package/lib/components/link-block.ws.js

@@ -1,6 +1,6 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 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 { a } from "../css/normalize";
 const presetStyle = {
   a: {
@@ -16,6 +16,7 @@ const meta = {
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,
+  states: linkMeta.states,
   presetStyle
 };
 const propsMeta = {

package/lib/components/link.ws.js

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

package/lib/types/components/component-meta.d.ts

@@ -581,17 +581,42 @@ declare const WsComponentPropsMeta: z.ZodObject<{
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
 export declare const componentCategories: readonly ["general", "typography", "media", "forms"];
+export declare const ComponentState: z.ZodObject<{
+    selector: z.ZodString;
+    label: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    label: string;
+    selector: string;
+}, {
+    label: string;
+    selector: string;
+}>;
+export type ComponentState = z.infer<typeof ComponentState>;
 declare const WsComponentMeta: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "forms"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text", "rich-text-child"]>;
     label: z.ZodString;
     Icon: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>;
     presetStyle: z.ZodOptional<z.ZodAny>;
+    states: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        selector: z.ZodString;
+        label: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        label: string;
+        selector: string;
+    }, {
+        label: string;
+        selector: string;
+    }>, "many">>;
     children: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
 }, "strip", z.ZodTypeAny, {
     children?: string[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
     presetStyle?: any;
+    states?: {
+        label: string;
+        selector: string;
+    }[] | undefined;
     type: "embed" | "control" | "container" | "rich-text" | "rich-text-child";
     label: string;
     Icon: (...args: unknown[]) => unknown;
@@ -599,6 +624,10 @@ declare const WsComponentMeta: z.ZodObject<{
     children?: string[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
     presetStyle?: any;
+    states?: {
+        label: string;
+        selector: string;
+    }[] | undefined;
     type: "embed" | "control" | "container" | "rich-text" | "rich-text-child";
     label: string;
     Icon: (...args: unknown[]) => unknown;

package/lib/types/index.d.ts

@@ -6,4 +6,4 @@ 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, componentCategories, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, componentCategories, } from "./components/component-meta";

package/package.json

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

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.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";