@webstudio-is/react-sdk 0.74.0 → 0.75.0

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

@@ -63,6 +63,7 @@ const WsComponentMeta = import_zod.z.object({
   invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
   stylable: import_zod.z.optional(import_zod.z.boolean()),
   label: import_zod.z.string(),
+  description: import_zod.z.string().optional(),
   icon: import_zod.z.string(),
   presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
   states: import_zod.z.optional(import_zod.z.array(ComponentState)),

package/lib/cjs/css/global-rules.js

@@ -23,7 +23,7 @@ __export(global_rules_exports, {
 module.exports = __toCommonJS(global_rules_exports);
 var import_fonts = require("@webstudio-is/fonts");
 const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
-  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
     if (asset?.type === "font") {

package/lib/cjs/css/normalize.js

@@ -93,18 +93,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [
-  ...baseStyle,
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/components/component-meta.js

@@ -37,6 +37,7 @@ const WsComponentMeta = z.object({
   invalidAncestors: z.optional(z.array(z.string())),
   stylable: z.optional(z.boolean()),
   label: z.string(),
+  description: z.string().optional(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),

package/lib/css/global-rules.js

@@ -1,6 +1,6 @@
 import { getFontFaces } from "@webstudio-is/fonts";
 const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
-  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
     if (asset?.type === "font") {

package/lib/css/normalize.js

@@ -24,18 +24,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [
-  ...baseStyle,
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

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

@@ -642,6 +642,7 @@ declare const WsComponentMeta: z.ZodObject<{
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     stylable: z.ZodOptional<z.ZodBoolean>;
     label: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
     icon: z.ZodString;
     presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodType<{
         value: {
@@ -1044,6 +1045,7 @@ declare const WsComponentMeta: z.ZodObject<{
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     stylable?: boolean | undefined;
+    description?: string | undefined;
     presetStyle?: Record<string, {
         value: {
             type: "unit";
@@ -1247,6 +1249,7 @@ declare const WsComponentMeta: z.ZodObject<{
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     stylable?: boolean | undefined;
+    description?: string | undefined;
     presetStyle?: Record<string, {
         value: {
             type: "unit";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,25 +33,25 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.74.0",
-    "@webstudio-is/css-data": "^0.74.0",
-    "@webstudio-is/css-engine": "^0.74.0",
-    "@webstudio-is/fonts": "^0.74.0",
-    "@webstudio-is/generate-arg-types": "^0.74.0",
-    "@webstudio-is/project-build": "^0.74.0"
+    "@webstudio-is/asset-uploader": "^0.75.0",
+    "@webstudio-is/css-data": "^0.75.0",
+    "@webstudio-is/css-engine": "^0.75.0",
+    "@webstudio-is/fonts": "^0.75.0",
+    "@webstudio-is/generate-arg-types": "^0.75.0",
+    "@webstudio-is/project-build": "^0.75.0"
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
+      "types": "./lib/types/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib/cjs/index.js",
-      "types": "./lib/types/index.d.ts"
+      "require": "./lib/cjs/index.js"
     },
     "./css-normalize": {
       "source": "./src/css/normalize.ts",
+      "types": "./lib/types/css/normalize.d.ts",
       "import": "./lib/css/normalize.js",
-      "require": "./lib/cjs/css/normalize.js",
-      "types": "./lib/types/css/normalize.d.ts"
+      "require": "./lib/cjs/css/normalize.js"
     }
   },
   "files": [
@@ -66,7 +66,7 @@
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx ./src/app/custom-components/*.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",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",

package/src/components/component-meta.ts

@@ -54,6 +54,7 @@ const WsComponentMeta = z.object({
   invalidAncestors: z.optional(z.array(z.string())),
   stylable: z.optional(z.boolean()),
   label: z.string(),
+  description: z.string().optional(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),

package/src/css/global-rules.ts

@@ -9,7 +9,8 @@ export const addGlobalRules = (
   // @todo we need to figure out all global resets while keeping
   // the engine aware of all of them.
   // Ideally, the user is somehow aware and in control of the reset
-  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  // Layout source https://twitter.com/ChallengesCss/status/1471128244720181258
+  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
 
   const fontAssets: FontAsset[] = [];
   for (const asset of assets.values()) {

package/src/css/normalize.ts

@@ -63,18 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = [
-  ...baseStyle,
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
-  },
-] satisfies Styles;
+export const a = baseStyle;
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;