@webstudio-is/react-sdk 0.68.0 → 0.70.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (184) hide show
  1. package/lib/cjs/components/__generated__/image.props.js +6 -3
  2. package/lib/cjs/components/__generated__/text-block.props.js +7 -0
  3. package/lib/cjs/components/blockquote.ws.js +9 -2
  4. package/lib/cjs/components/box.ws.js +2 -1
  5. package/lib/cjs/components/button.ws.js +3 -1
  6. package/lib/cjs/components/checkbox-field.ws.js +12 -6
  7. package/lib/cjs/components/checkbox.ws.js +1 -0
  8. package/lib/cjs/components/code-text.ws.js +8 -1
  9. package/lib/cjs/components/component-meta.js +6 -3
  10. package/lib/cjs/components/components-utils.js +0 -28
  11. package/lib/cjs/components/form.ws.js +32 -25
  12. package/lib/cjs/components/fragment.ws.js +2 -1
  13. package/lib/cjs/components/heading.ws.js +10 -3
  14. package/lib/cjs/components/html-embed.ws.js +3 -1
  15. package/lib/cjs/components/image.js +27 -19
  16. package/lib/cjs/components/image.ws.js +4 -2
  17. package/lib/cjs/components/index.js +1 -29
  18. package/lib/cjs/components/input.ws.js +1 -0
  19. package/lib/cjs/components/label.ws.js +8 -1
  20. package/lib/cjs/components/link-block.ws.js +2 -1
  21. package/lib/cjs/components/link.ws.js +8 -1
  22. package/lib/cjs/components/list-item.ws.js +11 -4
  23. package/lib/cjs/components/list.ws.js +2 -2
  24. package/lib/cjs/components/paragraph.ws.js +10 -3
  25. package/lib/cjs/components/radio-button-field.ws.js +12 -6
  26. package/lib/cjs/components/radio-button.ws.js +1 -0
  27. package/lib/cjs/components/rich-text-link.ws.js +1 -1
  28. package/lib/cjs/components/separator.ws.js +1 -1
  29. package/lib/cjs/components/slot.ws.js +3 -1
  30. package/lib/cjs/components/text-block.js +5 -2
  31. package/lib/cjs/components/text-block.ws.js +11 -3
  32. package/lib/cjs/components/textarea.ws.js +1 -0
  33. package/lib/cjs/embed-template.js +2 -1
  34. package/lib/cjs/index.js +4 -5
  35. package/lib/cjs/tree/create-elements-tree.js +8 -8
  36. package/lib/cjs/tree/root.js +2 -6
  37. package/lib/cjs/tree/webstudio-component.js +2 -2
  38. package/lib/components/__generated__/image.props.js +6 -3
  39. package/lib/components/__generated__/text-block.props.js +7 -0
  40. package/lib/components/blockquote.ws.js +9 -2
  41. package/lib/components/box.ws.js +2 -1
  42. package/lib/components/button.ws.js +3 -1
  43. package/lib/components/checkbox-field.ws.js +12 -6
  44. package/lib/components/checkbox.ws.js +1 -0
  45. package/lib/components/code-text.ws.js +8 -1
  46. package/lib/components/component-meta.js +6 -3
  47. package/lib/components/components-utils.js +0 -14
  48. package/lib/components/form.ws.js +32 -25
  49. package/lib/components/fragment.ws.js +2 -1
  50. package/lib/components/heading.ws.js +10 -3
  51. package/lib/components/html-embed.ws.js +3 -1
  52. package/lib/components/image.js +34 -20
  53. package/lib/components/image.ws.js +4 -2
  54. package/lib/components/index.js +1 -29
  55. package/lib/components/input.ws.js +1 -0
  56. package/lib/components/label.ws.js +8 -1
  57. package/lib/components/link-block.ws.js +2 -1
  58. package/lib/components/link.ws.js +8 -1
  59. package/lib/components/list-item.ws.js +11 -4
  60. package/lib/components/list.ws.js +2 -2
  61. package/lib/components/paragraph.ws.js +10 -3
  62. package/lib/components/radio-button-field.ws.js +12 -6
  63. package/lib/components/radio-button.ws.js +1 -0
  64. package/lib/components/rich-text-link.ws.js +1 -1
  65. package/lib/components/separator.ws.js +1 -1
  66. package/lib/components/slot.ws.js +3 -1
  67. package/lib/components/text-block.js +9 -3
  68. package/lib/components/text-block.ws.js +11 -3
  69. package/lib/components/textarea.ws.js +1 -0
  70. package/lib/embed-template.js +2 -1
  71. package/lib/index.js +4 -9
  72. package/lib/tree/create-elements-tree.js +8 -8
  73. package/lib/tree/root.js +2 -6
  74. package/lib/tree/webstudio-component.js +2 -2
  75. package/lib/types/components/component-meta.d.ts +363 -1356
  76. package/lib/types/components/components-utils.d.ts +2 -17
  77. package/lib/types/components/image.d.ts +5 -1
  78. package/lib/types/components/image.stories.d.ts +10 -2
  79. package/lib/types/components/index.d.ts +0 -15
  80. package/lib/types/components/text-block.d.ts +6 -2
  81. package/lib/types/components/text-block.stories.d.ts +6 -2
  82. package/lib/types/css/css.d.ts +14 -4
  83. package/lib/types/css/global-rules.d.ts +14 -4
  84. package/lib/types/css/normalize.d.ts +611 -611
  85. package/lib/types/css/style-rules.d.ts +2 -187
  86. package/lib/types/embed-template.d.ts +543 -167
  87. package/lib/types/index.d.ts +2 -2
  88. package/lib/types/props.d.ts +44 -18
  89. package/lib/types/tree/create-elements-tree.d.ts +4 -4
  90. package/lib/types/tree/root.d.ts +3 -5
  91. package/lib/types/tree/webstudio-component.d.ts +3 -3
  92. package/package.json +24 -13
  93. package/src/components/__generated__/image.props.ts +5 -2
  94. package/src/components/__generated__/text-block.props.ts +7 -0
  95. package/src/components/blockquote.ws.tsx +9 -2
  96. package/src/components/box.tsx +1 -1
  97. package/src/components/box.ws.ts +1 -0
  98. package/src/components/button.ws.tsx +2 -0
  99. package/src/components/checkbox-field.ws.tsx +12 -6
  100. package/src/components/checkbox.ws.tsx +1 -0
  101. package/src/components/code-text.ws.tsx +8 -1
  102. package/src/components/component-meta.ts +6 -3
  103. package/src/components/components-utils.ts +2 -31
  104. package/src/components/form.ws.tsx +32 -25
  105. package/src/components/fragment.ws.ts +1 -0
  106. package/src/components/heading.tsx +1 -1
  107. package/src/components/heading.ws.tsx +9 -2
  108. package/src/components/html-embed.ws.ts +2 -0
  109. package/src/components/image.tsx +54 -26
  110. package/src/components/image.ws.tsx +5 -1
  111. package/src/components/index.ts +0 -48
  112. package/src/components/input.ws.tsx +1 -0
  113. package/src/components/label.ws.tsx +8 -1
  114. package/src/components/link-block.ws.tsx +1 -0
  115. package/src/components/link.ws.tsx +8 -1
  116. package/src/components/list-item.ws.tsx +10 -3
  117. package/src/components/list.ws.tsx +2 -2
  118. package/src/components/paragraph.ws.tsx +9 -2
  119. package/src/components/radio-button-field.ws.tsx +12 -6
  120. package/src/components/radio-button.ws.tsx +1 -0
  121. package/src/components/rich-text-link.ws.tsx +1 -1
  122. package/src/components/separator.ws.tsx +1 -1
  123. package/src/components/slot.ws.ts +2 -0
  124. package/src/components/text-block.tsx +16 -5
  125. package/src/components/text-block.ws.tsx +10 -2
  126. package/src/components/textarea.ws.tsx +1 -0
  127. package/src/embed-template.ts +11 -3
  128. package/src/index.ts +2 -5
  129. package/src/props.test.ts +0 -1
  130. package/src/tree/create-elements-tree.tsx +12 -12
  131. package/src/tree/root.ts +4 -9
  132. package/src/tree/webstudio-component.tsx +4 -4
  133. package/lib/app/custom-components/__generated__/form.props.js +0 -411
  134. package/lib/app/custom-components/__generated__/image.props.js +0 -442
  135. package/lib/app/custom-components/__generated__/link-block.props.js +0 -432
  136. package/lib/app/custom-components/__generated__/link.props.js +0 -432
  137. package/lib/app/custom-components/__generated__/rich-text-link.props.js +0 -432
  138. package/lib/app/custom-components/form.js +0 -65
  139. package/lib/app/custom-components/form.ws.js +0 -81
  140. package/lib/app/custom-components/image.js +0 -40
  141. package/lib/app/custom-components/index.js +0 -29
  142. package/lib/app/custom-components/link-block.js +0 -6
  143. package/lib/app/custom-components/link.js +0 -6
  144. package/lib/app/custom-components/rich-text-link.js +0 -6
  145. package/lib/app/custom-components/shared/remix-link.js +0 -22
  146. package/lib/cjs/app/custom-components/__generated__/form.props.js +0 -431
  147. package/lib/cjs/app/custom-components/__generated__/image.props.js +0 -462
  148. package/lib/cjs/app/custom-components/__generated__/link-block.props.js +0 -452
  149. package/lib/cjs/app/custom-components/__generated__/link.props.js +0 -452
  150. package/lib/cjs/app/custom-components/__generated__/rich-text-link.props.js +0 -452
  151. package/lib/cjs/app/custom-components/form.js +0 -81
  152. package/lib/cjs/app/custom-components/form.ws.js +0 -101
  153. package/lib/cjs/app/custom-components/image.js +0 -54
  154. package/lib/cjs/app/custom-components/index.js +0 -49
  155. package/lib/cjs/app/custom-components/link-block.js +0 -26
  156. package/lib/cjs/app/custom-components/link.js +0 -26
  157. package/lib/cjs/app/custom-components/rich-text-link.js +0 -26
  158. package/lib/cjs/app/custom-components/shared/remix-link.js +0 -42
  159. package/lib/types/app/custom-components/__generated__/form.props.d.ts +0 -2
  160. package/lib/types/app/custom-components/__generated__/image.props.d.ts +0 -2
  161. package/lib/types/app/custom-components/__generated__/link-block.props.d.ts +0 -2
  162. package/lib/types/app/custom-components/__generated__/link.props.d.ts +0 -2
  163. package/lib/types/app/custom-components/__generated__/rich-text-link.props.d.ts +0 -2
  164. package/lib/types/app/custom-components/form.d.ts +0 -5
  165. package/lib/types/app/custom-components/form.ws.d.ts +0 -3
  166. package/lib/types/app/custom-components/image.d.ts +0 -6
  167. package/lib/types/app/custom-components/index.d.ts +0 -31
  168. package/lib/types/app/custom-components/link-block.d.ts +0 -6
  169. package/lib/types/app/custom-components/link.d.ts +0 -6
  170. package/lib/types/app/custom-components/rich-text-link.d.ts +0 -6
  171. package/lib/types/app/custom-components/shared/remix-link.d.ts +0 -10
  172. package/src/app/custom-components/__generated__/form.props.ts +0 -456
  173. package/src/app/custom-components/__generated__/image.props.ts +0 -487
  174. package/src/app/custom-components/__generated__/link-block.props.ts +0 -477
  175. package/src/app/custom-components/__generated__/link.props.ts +0 -477
  176. package/src/app/custom-components/__generated__/rich-text-link.props.ts +0 -477
  177. package/src/app/custom-components/form.tsx +0 -111
  178. package/src/app/custom-components/form.ws.tsx +0 -86
  179. package/src/app/custom-components/image.tsx +0 -55
  180. package/src/app/custom-components/index.ts +0 -28
  181. package/src/app/custom-components/link-block.tsx +0 -4
  182. package/src/app/custom-components/link.tsx +0 -4
  183. package/src/app/custom-components/rich-text-link.tsx +0 -4
  184. package/src/app/custom-components/shared/remix-link.tsx +0 -28
@@ -1,22 +1,7 @@
1
1
  /// <reference types="react" />
2
- import * as components from "./components";
3
2
  import { componentAttribute, idAttribute } from "../tree";
4
- export type ComponentName = keyof typeof components;
5
- type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
3
+ export type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
6
4
  [componentAttribute]: string;
7
5
  [idAttribute]: string;
8
6
  } & React.RefAttributes<HTMLElement>>;
9
- /**
10
- * Now used only in builder app
11
- * @todo Consider using the same approach in the builder app as in the published apps . A dynamic import is needed
12
- */
13
- export declare const getComponent: (name: string) => undefined | AnyComponent;
14
- /**
15
- * The application imports only the components it uses, then pass them to createGetComponent i.e.
16
- * getComponent = createGetComponent({ Box, BlaBla })
17
- * <RootInstance data={data} getComponent={getComponent} />
18
- * see example /packages/sdk-size-test/app/routes/$.tsx
19
- **/
20
- export declare const createGetComponent: (comps: Partial<typeof components>) => (name: string) => undefined | AnyComponent;
21
- export type GetComponent = typeof getComponent;
22
- export {};
7
+ export type Components = Map<string, AnyComponent>;
@@ -1,3 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export declare const defaultTag = "img";
3
- export declare const Image: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
3
+ export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
4
+ quality?: number | undefined;
5
+ optimize?: boolean | undefined;
6
+ loader: import("@webstudio-is/image").ImageLoader;
7
+ }, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
@@ -1,5 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import type { ComponentMeta, ComponentStory } from "@storybook/react";
3
- declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
3
+ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
4
+ quality?: number | undefined;
5
+ optimize?: boolean | undefined;
6
+ loader: import("@webstudio-is/image").ImageLoader;
7
+ }, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
4
8
  export default _default;
5
- export declare const Image: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
9
+ export declare const Image: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
10
+ quality?: number | undefined;
11
+ optimize?: boolean | undefined;
12
+ loader: import("@webstudio-is/image").ImageLoader;
13
+ }, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
@@ -1,18 +1,3 @@
1
1
  import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
2
- import type { ComponentName } from "./components-utils";
3
2
  export declare const defaultMetas: Record<string, WsComponentMeta>;
4
- export declare const getComponentMeta: (name: string) => WsComponentMeta | undefined;
5
- export declare const registerComponentMetas: (overrides: Record<string, Partial<WsComponentMeta>>) => void;
6
3
  export declare const defaultPropsMetas: Record<string, WsComponentPropsMeta>;
7
- type RegisteredComponents = Partial<{
8
- [name in ComponentName]: {};
9
- }>;
10
- export declare let registeredComponents: RegisteredComponents | undefined;
11
- /**
12
- * @todo: Allow register any component.
13
- * Now we can register only existings Components, as all our type system would
14
- * break otherwise, see getComponent etc. So its overwriteComponent now
15
- **/
16
- export declare const registerComponents: (components: RegisteredComponents) => void;
17
- export declare const canAcceptComponent: (parentComponent: string, childComponent: string) => boolean;
18
- export {};
@@ -1,3 +1,7 @@
1
- /// <reference types="react" />
1
+ import { type ComponentProps } from "react";
2
2
  export declare const defaultTag = "div";
3
- export declare const TextBlock: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
3
+ type Props = ComponentProps<typeof defaultTag> & {
4
+ tag?: "div" | "span" | "figcaption";
5
+ };
6
+ export declare const TextBlock: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
7
+ export {};
@@ -1,5 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import type { ComponentStory, ComponentMeta } from "@storybook/react";
3
- declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
3
+ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
4
+ tag?: "div" | "figcaption" | "span" | undefined;
5
+ }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
4
6
  export default _default;
5
- export declare const TextBlock: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
7
+ export declare const TextBlock: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
8
+ tag?: "div" | "figcaption" | "span" | undefined;
9
+ }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
@@ -20,9 +20,8 @@ export declare const createImageValueTransformer: (assets: Map<string, {
20
20
  projectId: string;
21
21
  size: number;
22
22
  description: string | null;
23
- location: "FS" | "REMOTE";
24
23
  createdAt: string;
25
- meta: {
24
+ meta: ({
26
25
  style: "normal" | "italic" | "oblique";
27
26
  weight: number;
28
27
  family: string;
@@ -34,7 +33,19 @@ export declare const createImageValueTransformer: (assets: Map<string, {
34
33
  max: number;
35
34
  }>>;
36
35
  family: string;
37
- };
36
+ }) & ({
37
+ style: "normal" | "italic" | "oblique";
38
+ weight: number;
39
+ family: string;
40
+ } | {
41
+ variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
42
+ name: string;
43
+ min: number;
44
+ default: number;
45
+ max: number;
46
+ }>>;
47
+ family: string;
48
+ } | undefined);
38
49
  } | {
39
50
  name: string;
40
51
  type: "image";
@@ -43,7 +54,6 @@ export declare const createImageValueTransformer: (assets: Map<string, {
43
54
  projectId: string;
44
55
  size: number;
45
56
  description: string | null;
46
- location: "FS" | "REMOTE";
47
57
  createdAt: string;
48
58
  meta: {
49
59
  width: number;
@@ -9,9 +9,8 @@ export declare const addGlobalRules: (engine: CssEngine, { assets, assetBaseUrl
9
9
  projectId: string;
10
10
  size: number;
11
11
  description: string | null;
12
- location: "FS" | "REMOTE";
13
12
  createdAt: string;
14
- meta: {
13
+ meta: ({
15
14
  style: "normal" | "italic" | "oblique";
16
15
  weight: number;
17
16
  family: string;
@@ -23,7 +22,19 @@ export declare const addGlobalRules: (engine: CssEngine, { assets, assetBaseUrl
23
22
  max: number;
24
23
  }>>;
25
24
  family: string;
26
- };
25
+ }) & ({
26
+ style: "normal" | "italic" | "oblique";
27
+ weight: number;
28
+ family: string;
29
+ } | {
30
+ variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
31
+ name: string;
32
+ min: number;
33
+ default: number;
34
+ max: number;
35
+ }>>;
36
+ family: string;
37
+ } | undefined);
27
38
  } | {
28
39
  name: string;
29
40
  type: "image";
@@ -32,7 +43,6 @@ export declare const addGlobalRules: (engine: CssEngine, { assets, assetBaseUrl
32
43
  projectId: string;
33
44
  size: number;
34
45
  description: string | null;
35
- location: "FS" | "REMOTE";
36
46
  createdAt: string;
37
47
  meta: {
38
48
  width: number;