@webstudio-is/sdk 0.196.0 → 0.198.0

package/lib/index.js

@@ -470,6 +470,311 @@ var WebstudioFragment = z12.object({
   styles: z12.array(StyleDecl)
 });
 
+// src/schema/prop-meta.ts
+import { z as z13 } from "zod";
+var common = {
+  label: z13.string().optional(),
+  description: z13.string().optional(),
+  required: z13.boolean()
+};
+var Number = z13.object({
+  ...common,
+  control: z13.literal("number"),
+  type: z13.literal("number"),
+  defaultValue: z13.number().optional()
+});
+var Range = z13.object({
+  ...common,
+  control: z13.literal("range"),
+  type: z13.literal("number"),
+  defaultValue: z13.number().optional()
+});
+var Text = z13.object({
+  ...common,
+  control: z13.literal("text"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional(),
+  /**
+   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
+   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
+   */
+  rows: z13.number().optional()
+});
+var Code = z13.object({
+  ...common,
+  control: z13.literal("code"),
+  type: z13.literal("string"),
+  language: z13.union([z13.literal("html"), z13.literal("markdown")]),
+  defaultValue: z13.string().optional()
+});
+var CodeText = z13.object({
+  ...common,
+  control: z13.literal("codetext"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional()
+});
+var Color = z13.object({
+  ...common,
+  control: z13.literal("color"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional()
+});
+var Boolean = z13.object({
+  ...common,
+  control: z13.literal("boolean"),
+  type: z13.literal("boolean"),
+  defaultValue: z13.boolean().optional()
+});
+var Radio = z13.object({
+  ...common,
+  control: z13.literal("radio"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional(),
+  options: z13.array(z13.string())
+});
+var InlineRadio = z13.object({
+  ...common,
+  control: z13.literal("inline-radio"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional(),
+  options: z13.array(z13.string())
+});
+var Select = z13.object({
+  ...common,
+  control: z13.literal("select"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional(),
+  options: z13.array(z13.string())
+});
+var Check = z13.object({
+  ...common,
+  control: z13.literal("check"),
+  type: z13.literal("string[]"),
+  defaultValue: z13.array(z13.string()).optional(),
+  options: z13.array(z13.string())
+});
+var InlineCheck = z13.object({
+  ...common,
+  control: z13.literal("inline-check"),
+  type: z13.literal("string[]"),
+  defaultValue: z13.array(z13.string()).optional(),
+  options: z13.array(z13.string())
+});
+var MultiSelect = z13.object({
+  ...common,
+  control: z13.literal("multi-select"),
+  type: z13.literal("string[]"),
+  defaultValue: z13.array(z13.string()).optional(),
+  options: z13.array(z13.string())
+});
+var File = z13.object({
+  ...common,
+  control: z13.literal("file"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional(),
+  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
+  accept: z13.string().optional()
+});
+var Url = z13.object({
+  ...common,
+  control: z13.literal("url"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional()
+});
+var Json = z13.object({
+  ...common,
+  control: z13.literal("json"),
+  type: z13.literal("json"),
+  defaultValue: z13.unknown().optional()
+});
+var Date = z13.object({
+  ...common,
+  control: z13.literal("date"),
+  // @todo not sure what type should be here
+  // (we don't support Date yet, added for completeness)
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional()
+});
+var Action = z13.object({
+  ...common,
+  control: z13.literal("action"),
+  type: z13.literal("action"),
+  defaultValue: z13.undefined().optional()
+});
+var TextContent = z13.object({
+  ...common,
+  control: z13.literal("textContent"),
+  type: z13.literal("string"),
+  defaultValue: z13.string().optional()
+});
+var PropMeta = z13.union([
+  Number,
+  Range,
+  Text,
+  Code,
+  CodeText,
+  Color,
+  Boolean,
+  Radio,
+  InlineRadio,
+  Select,
+  MultiSelect,
+  Check,
+  InlineCheck,
+  File,
+  Url,
+  Json,
+  Date,
+  Action,
+  TextContent
+]);
+
+// src/schema/embed-template.ts
+import { z as z14 } from "zod";
+import { StyleValue as StyleValue2 } from "@webstudio-is/css-engine";
+var EmbedTemplateText = z14.object({
+  type: z14.literal("text"),
+  value: z14.string(),
+  placeholder: z14.boolean().optional()
+});
+var EmbedTemplateExpression = z14.object({
+  type: z14.literal("expression"),
+  value: z14.string()
+});
+var EmbedTemplateVariable = z14.object({
+  alias: z14.optional(z14.string()),
+  initialValue: z14.unknown()
+});
+var EmbedTemplateProp = z14.union([
+  z14.object({
+    type: z14.literal("number"),
+    name: z14.string(),
+    value: z14.number()
+  }),
+  z14.object({
+    type: z14.literal("string"),
+    name: z14.string(),
+    value: z14.string()
+  }),
+  z14.object({
+    type: z14.literal("boolean"),
+    name: z14.string(),
+    value: z14.boolean()
+  }),
+  z14.object({
+    type: z14.literal("string[]"),
+    name: z14.string(),
+    value: z14.array(z14.string())
+  }),
+  z14.object({
+    type: z14.literal("json"),
+    name: z14.string(),
+    value: z14.unknown()
+  }),
+  z14.object({
+    type: z14.literal("expression"),
+    name: z14.string(),
+    code: z14.string()
+  }),
+  z14.object({
+    type: z14.literal("parameter"),
+    name: z14.string(),
+    variableName: z14.string(),
+    variableAlias: z14.optional(z14.string())
+  }),
+  z14.object({
+    type: z14.literal("action"),
+    name: z14.string(),
+    value: z14.array(
+      z14.object({
+        type: z14.literal("execute"),
+        args: z14.optional(z14.array(z14.string())),
+        code: z14.string()
+      })
+    )
+  })
+]);
+var EmbedTemplateStyleDeclRaw = z14.object({
+  // State selector, e.g. :hover
+  state: z14.optional(z14.string()),
+  property: z14.string(),
+  value: StyleValue2
+});
+var EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
+var EmbedTemplateInstance = z14.lazy(
+  () => z14.object({
+    type: z14.literal("instance"),
+    component: z14.string(),
+    label: z14.optional(z14.string()),
+    variables: z14.optional(z14.record(z14.string(), EmbedTemplateVariable)),
+    props: z14.optional(z14.array(EmbedTemplateProp)),
+    styles: z14.optional(z14.array(EmbedTemplateStyleDecl)),
+    children: WsEmbedTemplate
+  })
+);
+var WsEmbedTemplate = z14.lazy(
+  () => z14.array(
+    z14.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
+  )
+);
+
+// src/schema/component-meta.ts
+import { z as z15 } from "zod";
+var WsComponentPropsMeta = z15.object({
+  props: z15.record(PropMeta),
+  // Props that will be always visible in properties panel.
+  initialProps: z15.array(z15.string()).optional()
+});
+var componentCategories = [
+  "general",
+  "typography",
+  "media",
+  "data",
+  "forms",
+  "localization",
+  "radix",
+  "xml",
+  "hidden",
+  "internal"
+];
+var stateCategories = ["states", "component-states"];
+var ComponentState = z15.object({
+  category: z15.enum(stateCategories).optional(),
+  selector: z15.string(),
+  label: z15.string()
+});
+var defaultStates = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" }
+];
+var WsComponentMeta = z15.object({
+  category: z15.enum(componentCategories).optional(),
+  // container - can accept other components with dnd or be edited as text
+  // control - usually form controls like inputs, without children
+  // embed - images, videos or other embeddable components, without children
+  // rich-text-child - formatted text fragment, not listed in components list
+  type: z15.enum(["container", "control", "embed", "rich-text-child"]),
+  constraints: Matchers.optional(),
+  // when this field is specified component receives
+  // prop with index of same components withiin specified ancestor
+  // important to automatically enumerate collections without
+  // naming every item manually
+  indexWithinAncestor: z15.optional(z15.string()),
+  stylable: z15.optional(z15.boolean()),
+  label: z15.optional(z15.string()),
+  description: z15.string().optional(),
+  icon: z15.string(),
+  presetStyle: z15.optional(
+    z15.record(z15.string(), z15.array(EmbedTemplateStyleDecl))
+  ),
+  states: z15.optional(z15.array(ComponentState)),
+  template: z15.optional(WsEmbedTemplate),
+  order: z15.number().optional()
+});
+
 // src/instances-utils.ts
 var ROOT_INSTANCE_ID = ":root";
 var traverseInstances = (instances, instanceId, callback) => {
@@ -1229,10 +1534,15 @@ export {
   Breakpoint,
   Breakpoints,
   CompilerSettings,
+  ComponentState,
   DataSource,
   DataSourceVariableValue,
   DataSources,
   Deployment,
+  EmbedTemplateInstance,
+  EmbedTemplateProp,
+  EmbedTemplateStyleDecl,
+  EmbedTemplateVariable,
   ExpressionChild,
   Folder,
   FolderName,
@@ -1255,6 +1565,7 @@ export {
   Pages,
   ProjectNewRedirectPath,
   Prop,
+  PropMeta,
   Props,
   ROOT_FOLDER_ID,
   ROOT_INSTANCE_ID,
@@ -1270,8 +1581,12 @@ export {
   Templates,
   TextChild,
   WebstudioFragment,
+  WsComponentMeta,
+  WsEmbedTemplate,
+  componentCategories,
   createScope,
   decodeDataSourceVariable,
+  defaultStates,
   documentTypes,
   encodeDataSourceVariable,
   executeExpression,
@@ -1296,5 +1611,6 @@ export {
   parseComponentName,
   parseObjectExpression,
   replaceFormActionsWithResources,
+  stateCategories,
   transpileExpression
 };

package/lib/types/index.d.ts

@@ -10,6 +10,9 @@ export * from "./schema/style-source-selections";
 export * from "./schema/styles";
 export * from "./schema/deployment";
 export * from "./schema/webstudio";
+export * from "./schema/prop-meta";
+export * from "./schema/embed-template";
+export * from "./schema/component-meta";
 export * from "./instances-utils";
 export * from "./page-utils";
 export * from "./scope";