@webstudio-is/react-sdk 0.70.0 → 0.72.0

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

@@ -35,7 +35,8 @@ const componentCategories = [
   "general",
   "text",
   "media",
-  "forms"
+  "forms",
+  "hidden"
 ];
 const stateCategories = ["states", "component-states"];
 const ComponentState = import_zod.z.object({

package/lib/cjs/embed-template.js

@@ -54,6 +54,7 @@ const EmbedTemplateProp = import_zod.z.union([
   })
 ]);
 const EmbedTemplateStyleDeclRaw = import_zod.z.object({
+  // State selector, e.g. :hover
   state: import_zod.z.optional(import_zod.z.string()),
   property: import_zod.z.string(),
   value: import_css_data.StyleValue

package/lib/cjs/index.js

@@ -19,19 +19,21 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  ReactSdkContext: () => import_context.ReactSdkContext,
   componentCategories: () => import_component_meta.componentCategories,
+  defaultStates: () => import_component_meta.defaultStates,
   getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
   stateCategories: () => import_component_meta.stateCategories,
+  usePropAsset: () => import_props.usePropAsset,
   usePropUrl: () => import_props.usePropUrl
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);
 __reExport(src_exports, require("./tree"), module.exports);
-__reExport(src_exports, require("./components"), module.exports);
 __reExport(src_exports, require("./pubsub"), module.exports);
 __reExport(src_exports, require("./app"), module.exports);
-__reExport(src_exports, require("./components/components"), module.exports);
 __reExport(src_exports, require("./components/components-utils"), module.exports);
 var import_component_meta = require("./components/component-meta");
 __reExport(src_exports, require("./embed-template"), module.exports);
 var import_props = require("./props");
+var import_context = require("./context");

package/lib/components/component-meta.js

@@ -9,7 +9,8 @@ const componentCategories = [
   "general",
   "text",
   "media",
-  "forms"
+  "forms",
+  "hidden"
 ];
 const stateCategories = ["states", "component-states"];
 const ComponentState = z.object({

package/lib/embed-template.js

@@ -28,6 +28,7 @@ const EmbedTemplateProp = z.union([
   })
 ]);
 const EmbedTemplateStyleDeclRaw = z.object({
+  // State selector, e.g. :hover
   state: z.optional(z.string()),
   property: z.string(),
   value: StyleValue

package/lib/index.js

@@ -1,19 +1,26 @@
 export * from "./css";
 export * from "./tree";
-export * from "./components";
 export * from "./pubsub";
 export * from "./app";
-export * from "./components/components";
 export * from "./components/components-utils";
 import {
   componentCategories,
-  stateCategories
+  stateCategories,
+  defaultStates
 } from "./components/component-meta";
 export * from "./embed-template";
-import { usePropUrl, getInstanceIdFromComponentProps } from "./props";
+import {
+  usePropUrl,
+  usePropAsset,
+  getInstanceIdFromComponentProps
+} from "./props";
+import { ReactSdkContext } from "./context";
 export {
+  ReactSdkContext,
   componentCategories,
+  defaultStates,
   getInstanceIdFromComponentProps,
   stateCategories,
+  usePropAsset,
   usePropUrl
 };

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

@@ -618,7 +618,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "media", "forms"];
+export declare const componentCategories: readonly ["general", "text", "media", "forms", "hidden"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -636,7 +636,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -1040,7 +1040,7 @@ declare const WsComponentMeta: z.ZodObject<{
     type: "embed" | "control" | "container" | "rich-text" | "rich-text-child";
     label: string;
     icon: string;
-    category?: "text" | "media" | "general" | "forms" | undefined;
+    category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     stylable?: boolean | undefined;
@@ -1243,7 +1243,7 @@ declare const WsComponentMeta: z.ZodObject<{
     type: "embed" | "control" | "container" | "rich-text" | "rich-text-child";
     label: string;
     icon: string;
-    category?: "text" | "media" | "general" | "forms" | undefined;
+    category?: "text" | "hidden" | "media" | "general" | "forms" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     stylable?: boolean | undefined;

package/lib/types/context.d.ts

@@ -3,7 +3,7 @@ import { type ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Pages, PropsByInstanceId } from "./props";
 export declare const ReactSdkContext: import("react").Context<{
-    renderer?: "canvas" | undefined;
+    renderer?: "canvas" | "preview" | undefined;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;

package/lib/types/index.d.ts

@@ -1,10 +1,9 @@
 export * from "./css";
 export * from "./tree";
-export * from "./components";
 export * from "./pubsub";
 export * from "./app";
-export * from "./components/components";
 export * from "./components/components-utils";
-export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
-export { usePropUrl, getInstanceIdFromComponentProps } from "./props";
+export { usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
+export { ReactSdkContext } from "./context";

package/lib/types/tree/create-elements-tree.d.ts

@@ -6,7 +6,7 @@ import type { Components } from "../components/components-utils";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 export declare const createElementsTree: ({ renderer, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, components, }: {
-    renderer?: "canvas" | undefined;
+    renderer?: "canvas" | "preview" | undefined;
     instances: Map<string, {
         type: "instance";
         id: string;

package/package.json

@@ -1,26 +1,23 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.70.0",
+  "version": "0.72.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@babel/core": "^7.21.0",
     "@jest/globals": "^29.3.1",
     "@remix-run/react": "^1.15.0",
-    "@storybook/react": "^6.5.16",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "jest": "^29.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.0.3",
     "type-fest": "^3.7.1",
+    "typescript": "5.0.3",
     "zod": "^3.21.4",
     "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.6"
   },
   "peerDependencies": {
@@ -31,42 +28,32 @@
   },
   "dependencies": {
     "@nanostores/react": "^0.4.1",
-    "@react-aria/utils": "^3.13.3",
     "detect-font": "^0.1.5",
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.70.0",
-    "@webstudio-is/css-data": "^0.70.0",
-    "@webstudio-is/css-engine": "^0.70.0",
-    "@webstudio-is/css-vars": "^0.70.0",
-    "@webstudio-is/fonts": "^0.70.0",
-    "@webstudio-is/form-handlers": "^0.70.0",
-    "@webstudio-is/generate-arg-types": "^0.70.0",
-    "@webstudio-is/icons": "^0.70.0",
-    "@webstudio-is/image": "^0.70.0",
-    "@webstudio-is/prisma-client": "^0.70.0",
-    "@webstudio-is/project-build": "^0.70.0"
+    "@webstudio-is/asset-uploader": "^0.72.0",
+    "@webstudio-is/css-data": "^0.72.0",
+    "@webstudio-is/css-engine": "^0.72.0",
+    "@webstudio-is/fonts": "^0.72.0",
+    "@webstudio-is/generate-arg-types": "^0.72.0",
+    "@webstudio-is/project-build": "^0.72.0"
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "import": "./lib/index.js",
-      "require": "./lib/cjs/index.js"
-    },
-    "./components": {
-      "source": "./src/components/components.ts",
-      "import": "./lib/components/components.js",
-      "require": "./lib/cjs/components/components.js"
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
     },
     "./css-normalize": {
       "source": "./src/css/normalize.ts",
       "import": "./lib/css/normalize.js",
-      "require": "./lib/cjs/css/normalize.js"
+      "require": "./lib/cjs/css/normalize.js",
+      "types": "./lib/types/css/normalize.d.ts"
     }
   },
-  "types": "lib/types/index.d.ts",
   "files": [
     "lib/*",
     "src/*",
@@ -83,8 +70,6 @@
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "pnpm typecheck && pnpm lint && pnpm test",
-    "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "checks": "pnpm typecheck && pnpm lint && pnpm test"
   }
 }

package/src/components/component-meta.ts

@@ -21,6 +21,7 @@ export const componentCategories = [
   "text",
   "media",
   "forms",
+  "hidden",
 ] as const;
 
 export const stateCategories = ["states", "component-states"] as const;

package/src/context.tsx

@@ -4,7 +4,7 @@ import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
-  renderer?: "canvas";
+  renderer?: "canvas" | "preview";
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;

package/src/embed-template.ts

@@ -45,6 +45,7 @@ const EmbedTemplateProp = z.union([
 type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
 
 const EmbedTemplateStyleDeclRaw = z.object({
+  // State selector, e.g. :hover
   state: z.optional(z.string()),
   property: z.string(),
   value: StyleValue,

package/src/index.ts

@@ -1,9 +1,7 @@
 export * from "./css";
 export * from "./tree";
-export * from "./components";
 export * from "./pubsub";
 export * from "./app";
-export * from "./components/components";
 export * from "./components/components-utils";
 export {
   type WsComponentPropsMeta,
@@ -12,6 +10,12 @@ export {
   type PresetStyle,
   componentCategories,
   stateCategories,
+  defaultStates,
 } from "./components/component-meta";
 export * from "./embed-template";
-export { usePropUrl, getInstanceIdFromComponentProps } from "./props";
+export {
+  usePropUrl,
+  usePropAsset,
+  getInstanceIdFromComponentProps,
+} from "./props";
+export { ReactSdkContext } from "./context";

package/src/tree/create-elements-tree.tsx

@@ -20,7 +20,7 @@ export const createElementsTree = ({
   Component,
   components,
 }: {
-  renderer?: "canvas";
+  renderer?: "canvas" | "preview";
   instances: Instances;
   rootInstanceId: Instance["id"];
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;