@webstudio-is/sdk-components-react 0.74.0 → 0.76.0

package/lib/props.js

@@ -23,24 +23,21 @@ import { propsMeta as propsMeta22 } from "./list-item.ws";
 import { propsMeta as propsMeta23 } from "./separator.ws";
 import { propsMeta as propsMeta24 } from "./code-text.ws";
 import { propsMeta as propsMeta25 } from "./label.ws";
-import { propsMeta as propsMeta26 } from "./success-message.ws";
-import { propsMeta as propsMeta27 } from "./error-message.ws";
-import { propsMeta as propsMeta28 } from "./textarea.ws";
-import { propsMeta as propsMeta29 } from "./radio-button.ws";
-import { propsMeta as propsMeta30 } from "./checkbox.ws";
-import { propsMeta as propsMeta31 } from "./vimeo.ws";
-import { propsMeta as propsMeta32 } from "./vimeo-preview-image.ws";
-import { propsMeta as propsMeta33 } from "./vimeo-play-button.ws";
-import { propsMeta as propsMeta34 } from "./vimeo-spinner.ws";
+import { propsMeta as propsMeta26 } from "./textarea.ws";
+import { propsMeta as propsMeta27 } from "./radio-button.ws";
+import { propsMeta as propsMeta28 } from "./checkbox.ws";
+import { propsMeta as propsMeta29 } from "./vimeo.ws";
+import { propsMeta as propsMeta30 } from "./vimeo-preview-image.ws";
+import { propsMeta as propsMeta31 } from "./vimeo-play-button.ws";
+import { propsMeta as propsMeta32 } from "./vimeo-spinner.ws";
 export {
   propsMeta20 as Blockquote,
   propsMeta4 as Body,
   propsMeta12 as Bold,
   propsMeta5 as Box,
   propsMeta16 as Button,
-  propsMeta30 as Checkbox,
+  propsMeta28 as Checkbox,
   propsMeta24 as CodeText,
-  propsMeta27 as ErrorMessage,
   propsMeta18 as Form,
   propsMeta2 as Fragment,
   propsMeta7 as Heading,
@@ -53,18 +50,17 @@ export {
   propsMeta21 as List,
   propsMeta22 as ListItem,
   propsMeta8 as Paragraph,
-  propsMeta29 as RadioButton,
+  propsMeta27 as RadioButton,
   propsMeta10 as RichTextLink,
   propsMeta23 as Separator,
   propsMeta as Slot,
   propsMeta11 as Span,
   propsMeta15 as Subscript,
-  propsMeta26 as SuccessMessage,
   propsMeta14 as Superscript,
   propsMeta6 as Text,
-  propsMeta28 as Textarea,
-  propsMeta31 as Vimeo,
-  propsMeta33 as VimeoPlayButton,
-  propsMeta32 as VimeoPreviewImage,
-  propsMeta34 as VimeoSpinner
+  propsMeta26 as Textarea,
+  propsMeta29 as Vimeo,
+  propsMeta31 as VimeoPlayButton,
+  propsMeta30 as VimeoPreviewImage,
+  propsMeta32 as VimeoSpinner
 };

package/lib/slot.ws.js

@@ -3,6 +3,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Slot",
+  description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   stylable: false,
   order: 6

package/lib/types/code-text.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from "react";
 export declare const defaultTag = "code";
-export declare const displayVarNamespace: `code-display-${number}`;
+export declare const displayVarNamespace: "--code-display-w7ovd";
 type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
     inline?: boolean;
     meta?: string;

package/lib/types/components.d.ts

@@ -23,8 +23,6 @@ export { ListItem } from "./list-item";
 export { Separator } from "./separator";
 export { CodeText } from "./code-text";
 export { Label } from "./label";
-export { SuccessMessage } from "./success-message";
-export { ErrorMessage } from "./error-message";
 export { Textarea } from "./textarea";
 export { RadioButton } from "./radio-button";
 export { Checkbox } from "./checkbox";

package/lib/types/metas.d.ts

@@ -23,8 +23,6 @@ export { meta as ListItem } from "./list-item.ws";
 export { meta as Separator } from "./separator.ws";
 export { meta as CodeText } from "./code-text.ws";
 export { meta as Label } from "./label.ws";
-export { meta as SuccessMessage } from "./success-message.ws";
-export { meta as ErrorMessage } from "./error-message.ws";
 export { meta as Textarea } from "./textarea.ws";
 export { meta as RadioButton } from "./radio-button.ws";
 export { meta as Checkbox } from "./checkbox.ws";

package/lib/types/props.d.ts

@@ -23,8 +23,6 @@ export { propsMeta as ListItem } from "./list-item.ws";
 export { propsMeta as Separator } from "./separator.ws";
 export { propsMeta as CodeText } from "./code-text.ws";
 export { propsMeta as Label } from "./label.ws";
-export { propsMeta as SuccessMessage } from "./success-message.ws";
-export { propsMeta as ErrorMessage } from "./error-message.ws";
 export { propsMeta as Textarea } from "./textarea.ws";
 export { propsMeta as RadioButton } from "./radio-button.ws";
 export { propsMeta as Checkbox } from "./checkbox.ws";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -15,21 +15,21 @@
   "exports": {
     ".": {
       "source": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
       "import": "./lib/components.js",
-      "require": "./lib/cjs/components.js",
-      "types": "./lib/types/components.d.ts"
+      "require": "./lib/cjs/components.js"
     },
     "./metas": {
       "source": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js",
-      "require": "./lib/cjs/metas.js",
-      "types": "./lib/types/metas.d.ts"
+      "require": "./lib/cjs/metas.js"
     },
     "./props": {
       "source": "./src/props.ts",
+      "types": "./lib/types/props.d.ts",
       "import": "./lib/props.js",
-      "require": "./lib/cjs/props.js",
-      "types": "./lib/types/props.d.ts"
+      "require": "./lib/cjs/props.js"
     }
   },
   "peerDependencies": {
@@ -40,14 +40,14 @@
     "@react-aria/utils": "^3.13.3",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.74.0",
-    "@webstudio-is/generate-arg-types": "^0.74.0",
-    "@webstudio-is/icons": "^0.74.0",
-    "@webstudio-is/image": "^0.74.0",
-    "@webstudio-is/react-sdk": "^0.74.0"
+    "@webstudio-is/css-vars": "^0.76.0",
+    "@webstudio-is/generate-arg-types": "^0.76.0",
+    "@webstudio-is/icons": "^0.76.0",
+    "@webstudio-is/image": "^0.76.0",
+    "@webstudio-is/react-sdk": "^0.76.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.0.23",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
@@ -61,11 +61,10 @@
     "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",
+    "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "pnpm typecheck && pnpm lint",
-    "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "checks": "pnpm typecheck",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   }
 }

package/src/__generated__/blockquote.props.ts

@@ -1,96 +1,8 @@
 import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
-  cite: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  style: { required: false, control: "text", type: "string" },
-  title: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    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" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  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" },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-  },
-  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" },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoSave: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  itemID: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  security: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"],
-  },
-  inputMode: {
-    description:
-      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "none",
-      "search",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal",
-    ],
-  },
-  is: {
-    description:
-      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
-    required: false,
-    control: "text",
-    type: "string",
-  },
+  accessKey: { required: false, control: "text", type: "string" },
   "aria-activedescendant": {
     description:
       "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -441,4 +353,88 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoSave: { required: false, control: "text", type: "string" },
+  cite: { required: false, control: "text", type: "string" },
+  className: { required: false, control: "text", type: "string" },
+  color: { required: false, control: "color", type: "string" },
+  content: { required: false, control: "text", type: "string" },
+  contextMenu: { required: false, control: "text", type: "string" },
+  datatype: { required: false, control: "text", type: "string" },
+  defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  dir: { required: false, control: "text", type: "string" },
+  draggable: { required: false, control: "boolean", type: "boolean" },
+  hidden: { required: false, control: "boolean", type: "boolean" },
+  id: { required: false, control: "text", type: "string" },
+  inputMode: {
+    description:
+      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "text",
+      "none",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal",
+    ],
+  },
+  is: {
+    description:
+      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string",
+  },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { 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" },
+  prefix: { required: false, control: "text", type: "string" },
+  property: { required: false, control: "text", type: "string" },
+  radioGroup: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
+  resource: { required: false, control: "text", type: "string" },
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: { required: false, control: "text", type: "string" },
+  security: { required: false, control: "text", type: "string" },
+  slot: { required: false, control: "text", type: "string" },
+  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  suppressContentEditableWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  suppressHydrationWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  tabIndex: { required: false, control: "number", type: "number" },
+  title: { required: false, control: "text", type: "string" },
+  translate: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
+  },
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"],
+  },
+  vocab: { required: false, control: "text", type: "string" },
 };

package/src/__generated__/body.props.ts

@@ -1,95 +1,8 @@
 import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
-  slot: { required: false, control: "text", type: "string" },
-  style: { required: false, control: "text", type: "string" },
-  title: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    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" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  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" },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-  },
-  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" },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoSave: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  itemID: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  security: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"],
-  },
-  inputMode: {
-    description:
-      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "none",
-      "search",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal",
-    ],
-  },
-  is: {
-    description:
-      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
-    required: false,
-    control: "text",
-    type: "string",
-  },
+  accessKey: { required: false, control: "text", type: "string" },
   "aria-activedescendant": {
     description:
       "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -440,4 +353,87 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoSave: { required: false, control: "text", type: "string" },
+  className: { required: false, control: "text", type: "string" },
+  color: { required: false, control: "color", type: "string" },
+  content: { required: false, control: "text", type: "string" },
+  contextMenu: { required: false, control: "text", type: "string" },
+  datatype: { required: false, control: "text", type: "string" },
+  defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  dir: { required: false, control: "text", type: "string" },
+  draggable: { required: false, control: "boolean", type: "boolean" },
+  hidden: { required: false, control: "boolean", type: "boolean" },
+  id: { required: false, control: "text", type: "string" },
+  inputMode: {
+    description:
+      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "text",
+      "none",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal",
+    ],
+  },
+  is: {
+    description:
+      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string",
+  },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { 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" },
+  prefix: { required: false, control: "text", type: "string" },
+  property: { required: false, control: "text", type: "string" },
+  radioGroup: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
+  resource: { required: false, control: "text", type: "string" },
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: { required: false, control: "text", type: "string" },
+  security: { required: false, control: "text", type: "string" },
+  slot: { required: false, control: "text", type: "string" },
+  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  suppressContentEditableWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  suppressHydrationWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  tabIndex: { required: false, control: "number", type: "number" },
+  title: { required: false, control: "text", type: "string" },
+  translate: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
+  },
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"],
+  },
+  vocab: { required: false, control: "text", type: "string" },
 };