@webstudio-is/sdk-components-react 0.90.0 → 0.92.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 (387) hide show
  1. package/lib/__generated__/blockquote.props.js +2 -4
  2. package/lib/__generated__/body.props.js +2 -4
  3. package/lib/__generated__/bold.props.js +2 -4
  4. package/lib/__generated__/box.props.js +2 -4
  5. package/lib/__generated__/button.props.js +2 -4
  6. package/lib/__generated__/checkbox.props.js +2 -4
  7. package/lib/__generated__/code-text.props.js +2 -4
  8. package/lib/__generated__/form.props.js +2 -4
  9. package/lib/__generated__/fragment.props.js +2 -4
  10. package/lib/__generated__/heading.props.js +2 -4
  11. package/lib/__generated__/html-embed.props.js +2 -4
  12. package/lib/__generated__/image.props.js +2 -4
  13. package/lib/__generated__/input.props.js +2 -4
  14. package/lib/__generated__/italic.props.js +2 -4
  15. package/lib/__generated__/label.props.js +2 -4
  16. package/lib/__generated__/link.props.js +2 -4
  17. package/lib/__generated__/list-item.props.js +2 -4
  18. package/lib/__generated__/list.props.js +2 -4
  19. package/lib/__generated__/paragraph.props.js +2 -4
  20. package/lib/__generated__/radio-button.props.js +2 -4
  21. package/lib/__generated__/rich-text-link.props.js +2 -4
  22. package/lib/__generated__/separator.props.js +2 -4
  23. package/lib/__generated__/slot.props.js +2 -4
  24. package/lib/__generated__/span.props.js +2 -4
  25. package/lib/__generated__/subscript.props.js +2 -4
  26. package/lib/__generated__/superscript.props.js +2 -4
  27. package/lib/__generated__/text.props.js +2 -4
  28. package/lib/__generated__/textarea.props.js +2 -4
  29. package/lib/__generated__/vimeo-play-button.props.js +2 -4
  30. package/lib/__generated__/vimeo-preview-image.props.js +2 -4
  31. package/lib/__generated__/vimeo-spinner.props.js +2 -4
  32. package/lib/__generated__/vimeo.props.js +2 -4
  33. package/lib/blockquote.js +3 -6
  34. package/lib/blockquote.stories.js +11 -0
  35. package/lib/blockquote.ws.js +3 -6
  36. package/lib/body.js +3 -6
  37. package/lib/body.stories.js +11 -0
  38. package/lib/body.ws.js +3 -6
  39. package/lib/bold.js +3 -6
  40. package/lib/bold.stories.js +11 -0
  41. package/lib/bold.ws.js +3 -6
  42. package/lib/box.js +3 -6
  43. package/lib/box.stories.js +11 -0
  44. package/lib/box.ws.js +3 -6
  45. package/lib/button.js +3 -6
  46. package/lib/button.stories.js +11 -0
  47. package/lib/button.ws.js +3 -6
  48. package/lib/checkbox.js +3 -6
  49. package/lib/checkbox.ws.js +3 -6
  50. package/lib/code-text.js +3 -6
  51. package/lib/code-text.stories.js +11 -0
  52. package/lib/code-text.ws.js +3 -6
  53. package/lib/components.js +33 -66
  54. package/lib/form.js +3 -6
  55. package/lib/form.stories.js +11 -0
  56. package/lib/form.ws.js +3 -6
  57. package/lib/fragment.js +2 -4
  58. package/lib/fragment.ws.js +3 -6
  59. package/lib/heading.js +2 -4
  60. package/lib/heading.stories.js +11 -0
  61. package/lib/heading.ws.js +3 -6
  62. package/lib/html-embed.js +2 -4
  63. package/lib/html-embed.stories.js +11 -0
  64. package/lib/html-embed.ws.js +3 -6
  65. package/lib/image.js +3 -6
  66. package/lib/image.stories.js +7 -0
  67. package/lib/image.ws.js +4 -8
  68. package/lib/input.js +3 -6
  69. package/lib/input.stories.js +9 -0
  70. package/lib/input.ws.js +9 -11
  71. package/lib/italic.js +3 -6
  72. package/lib/italic.stories.js +11 -0
  73. package/lib/italic.ws.js +3 -6
  74. package/lib/label.js +3 -6
  75. package/lib/label.ws.js +3 -6
  76. package/lib/link.js +3 -6
  77. package/lib/link.stories.js +11 -0
  78. package/lib/link.ws.js +3 -6
  79. package/lib/list-item.js +3 -6
  80. package/lib/list-item.stories.js +11 -0
  81. package/lib/list-item.ws.js +3 -6
  82. package/lib/list.js +2 -4
  83. package/lib/list.stories.js +13 -0
  84. package/lib/list.ws.js +3 -6
  85. package/lib/metas.js +33 -66
  86. package/lib/paragraph.js +3 -6
  87. package/lib/paragraph.stories.js +11 -0
  88. package/lib/paragraph.ws.js +3 -6
  89. package/lib/props.js +33 -66
  90. package/lib/radio-button.js +3 -6
  91. package/lib/radio-button.ws.js +9 -11
  92. package/lib/rich-text-link.js +2 -4
  93. package/lib/rich-text-link.stories.js +11 -0
  94. package/lib/rich-text-link.ws.js +3 -6
  95. package/lib/separator.js +3 -6
  96. package/lib/separator.stories.js +7 -0
  97. package/lib/separator.ws.js +3 -6
  98. package/lib/slot.js +2 -4
  99. package/lib/slot.stories.js +11 -0
  100. package/lib/slot.ws.js +3 -6
  101. package/lib/span.js +3 -6
  102. package/lib/span.stories.js +11 -0
  103. package/lib/span.ws.js +3 -6
  104. package/lib/subscript.js +3 -6
  105. package/lib/subscript.stories.js +11 -0
  106. package/lib/subscript.ws.js +3 -6
  107. package/lib/superscript.js +3 -6
  108. package/lib/superscript.stories.js +11 -0
  109. package/lib/superscript.ws.js +3 -6
  110. package/lib/text.js +3 -6
  111. package/lib/text.stories.js +11 -0
  112. package/lib/text.ws.js +3 -6
  113. package/lib/textarea.js +3 -6
  114. package/lib/textarea.ws.js +9 -11
  115. package/lib/types/__generated__/blockquote.props.d.ts +1 -1
  116. package/lib/types/__generated__/body.props.d.ts +1 -1
  117. package/lib/types/__generated__/bold.props.d.ts +1 -1
  118. package/lib/types/__generated__/box.props.d.ts +1 -1
  119. package/lib/types/__generated__/button.props.d.ts +1 -1
  120. package/lib/types/__generated__/checkbox.props.d.ts +1 -1
  121. package/lib/types/__generated__/code-text.props.d.ts +1 -1
  122. package/lib/types/__generated__/form.props.d.ts +1 -1
  123. package/lib/types/__generated__/fragment.props.d.ts +1 -1
  124. package/lib/types/__generated__/heading.props.d.ts +1 -1
  125. package/lib/types/__generated__/html-embed.props.d.ts +1 -1
  126. package/lib/types/__generated__/image.props.d.ts +1 -1
  127. package/lib/types/__generated__/input.props.d.ts +1 -1
  128. package/lib/types/__generated__/italic.props.d.ts +1 -1
  129. package/lib/types/__generated__/label.props.d.ts +1 -1
  130. package/lib/types/__generated__/link.props.d.ts +1 -1
  131. package/lib/types/__generated__/list-item.props.d.ts +1 -1
  132. package/lib/types/__generated__/list.props.d.ts +1 -1
  133. package/lib/types/__generated__/paragraph.props.d.ts +1 -1
  134. package/lib/types/__generated__/radio-button.props.d.ts +1 -1
  135. package/lib/types/__generated__/rich-text-link.props.d.ts +1 -1
  136. package/lib/types/__generated__/separator.props.d.ts +1 -1
  137. package/lib/types/__generated__/slot.props.d.ts +1 -1
  138. package/lib/types/__generated__/span.props.d.ts +1 -1
  139. package/lib/types/__generated__/subscript.props.d.ts +1 -1
  140. package/lib/types/__generated__/superscript.props.d.ts +1 -1
  141. package/lib/types/__generated__/text.props.d.ts +1 -1
  142. package/lib/types/__generated__/textarea.props.d.ts +1 -1
  143. package/lib/types/__generated__/vimeo-play-button.props.d.ts +1 -1
  144. package/lib/types/__generated__/vimeo-preview-image.props.d.ts +1 -1
  145. package/lib/types/__generated__/vimeo-spinner.props.d.ts +1 -1
  146. package/lib/types/__generated__/vimeo.props.d.ts +1 -1
  147. package/lib/types/vimeo-preview-image.d.ts +1 -1
  148. package/lib/vimeo-play-button.js +3 -5
  149. package/lib/vimeo-play-button.stories.js +11 -0
  150. package/lib/vimeo-play-button.ws.js +3 -6
  151. package/lib/vimeo-preview-image.js +2 -4
  152. package/lib/vimeo-preview-image.stories.js +11 -0
  153. package/lib/vimeo-preview-image.ws.js +3 -6
  154. package/lib/vimeo-spinner.js +2 -4
  155. package/lib/vimeo-spinner.stories.js +11 -0
  156. package/lib/vimeo-spinner.ws.js +3 -6
  157. package/lib/vimeo.js +3 -6
  158. package/lib/vimeo.stories.js +11 -0
  159. package/lib/vimeo.ws.js +3 -6
  160. package/package.json +16 -20
  161. package/lib/cjs/__generated__/blockquote.props.js +0 -536
  162. package/lib/cjs/__generated__/body.props.js +0 -530
  163. package/lib/cjs/__generated__/bold.props.js +0 -530
  164. package/lib/cjs/__generated__/box.props.js +0 -549
  165. package/lib/cjs/__generated__/button.props.js +0 -586
  166. package/lib/cjs/__generated__/checkbox.props.js +0 -688
  167. package/lib/cjs/__generated__/code-text.props.js +0 -530
  168. package/lib/cjs/__generated__/form.props.js +0 -578
  169. package/lib/cjs/__generated__/fragment.props.js +0 -24
  170. package/lib/cjs/__generated__/heading.props.js +0 -538
  171. package/lib/cjs/__generated__/html-embed.props.js +0 -31
  172. package/lib/cjs/__generated__/image.props.js +0 -603
  173. package/lib/cjs/__generated__/input.props.js +0 -695
  174. package/lib/cjs/__generated__/italic.props.js +0 -530
  175. package/lib/cjs/__generated__/label.props.js +0 -542
  176. package/lib/cjs/__generated__/link.props.js +0 -584
  177. package/lib/cjs/__generated__/list-item.props.js +0 -530
  178. package/lib/cjs/__generated__/list.props.js +0 -556
  179. package/lib/cjs/__generated__/paragraph.props.js +0 -530
  180. package/lib/cjs/__generated__/radio-button.props.js +0 -688
  181. package/lib/cjs/__generated__/rich-text-link.props.js +0 -584
  182. package/lib/cjs/__generated__/separator.props.js +0 -530
  183. package/lib/cjs/__generated__/slot.props.js +0 -24
  184. package/lib/cjs/__generated__/span.props.js +0 -530
  185. package/lib/cjs/__generated__/subscript.props.js +0 -530
  186. package/lib/cjs/__generated__/superscript.props.js +0 -530
  187. package/lib/cjs/__generated__/text.props.js +0 -538
  188. package/lib/cjs/__generated__/textarea.props.js +0 -597
  189. package/lib/cjs/__generated__/vimeo-play-button.props.js +0 -585
  190. package/lib/cjs/__generated__/vimeo-preview-image.props.js +0 -602
  191. package/lib/cjs/__generated__/vimeo-spinner.props.js +0 -530
  192. package/lib/cjs/__generated__/vimeo.props.js +0 -687
  193. package/lib/cjs/blockquote.js +0 -32
  194. package/lib/cjs/blockquote.ws.js +0 -96
  195. package/lib/cjs/body.js +0 -29
  196. package/lib/cjs/body.ws.js +0 -52
  197. package/lib/cjs/bold.js +0 -29
  198. package/lib/cjs/bold.ws.js +0 -42
  199. package/lib/cjs/box.js +0 -32
  200. package/lib/cjs/box.ws.js +0 -54
  201. package/lib/cjs/button.js +0 -31
  202. package/lib/cjs/button.ws.js +0 -57
  203. package/lib/cjs/checkbox.js +0 -29
  204. package/lib/cjs/checkbox.ws.js +0 -78
  205. package/lib/cjs/code-text.js +0 -30
  206. package/lib/cjs/code-text.ws.js +0 -75
  207. package/lib/cjs/components.js +0 -86
  208. package/lib/cjs/form.js +0 -29
  209. package/lib/cjs/form.ws.js +0 -84
  210. package/lib/cjs/fragment.js +0 -29
  211. package/lib/cjs/fragment.ws.js +0 -33
  212. package/lib/cjs/heading.js +0 -31
  213. package/lib/cjs/heading.ws.js +0 -58
  214. package/lib/cjs/html-embed.js +0 -80
  215. package/lib/cjs/html-embed.ws.js +0 -51
  216. package/lib/cjs/image.js +0 -86
  217. package/lib/cjs/image.ws.js +0 -70
  218. package/lib/cjs/input.js +0 -29
  219. package/lib/cjs/input.ws.js +0 -63
  220. package/lib/cjs/italic.js +0 -29
  221. package/lib/cjs/italic.ws.js +0 -48
  222. package/lib/cjs/label.js +0 -29
  223. package/lib/cjs/label.ws.js +0 -61
  224. package/lib/cjs/link.js +0 -52
  225. package/lib/cjs/link.ws.js +0 -81
  226. package/lib/cjs/list-item.js +0 -32
  227. package/lib/cjs/list-item.ws.js +0 -53
  228. package/lib/cjs/list.js +0 -31
  229. package/lib/cjs/list.ws.js +0 -74
  230. package/lib/cjs/metas.js +0 -86
  231. package/lib/cjs/package.json +0 -1
  232. package/lib/cjs/paragraph.js +0 -29
  233. package/lib/cjs/paragraph.ws.js +0 -53
  234. package/lib/cjs/props.js +0 -86
  235. package/lib/cjs/radio-button.js +0 -29
  236. package/lib/cjs/radio-button.ws.js +0 -78
  237. package/lib/cjs/rich-text-link.js +0 -28
  238. package/lib/cjs/rich-text-link.ws.js +0 -32
  239. package/lib/cjs/separator.js +0 -32
  240. package/lib/cjs/separator.ws.js +0 -71
  241. package/lib/cjs/slot.js +0 -36
  242. package/lib/cjs/slot.ws.js +0 -37
  243. package/lib/cjs/span.js +0 -29
  244. package/lib/cjs/span.ws.js +0 -42
  245. package/lib/cjs/subscript.js +0 -29
  246. package/lib/cjs/subscript.ws.js +0 -42
  247. package/lib/cjs/superscript.js +0 -29
  248. package/lib/cjs/superscript.ws.js +0 -42
  249. package/lib/cjs/text.js +0 -32
  250. package/lib/cjs/text.ws.js +0 -58
  251. package/lib/cjs/textarea.js +0 -29
  252. package/lib/cjs/textarea.ws.js +0 -64
  253. package/lib/cjs/vimeo-play-button.js +0 -38
  254. package/lib/cjs/vimeo-play-button.ws.js +0 -46
  255. package/lib/cjs/vimeo-preview-image.js +0 -40
  256. package/lib/cjs/vimeo-preview-image.ws.js +0 -37
  257. package/lib/cjs/vimeo-spinner.js +0 -37
  258. package/lib/cjs/vimeo-spinner.ws.js +0 -44
  259. package/lib/cjs/vimeo.js +0 -294
  260. package/lib/cjs/vimeo.ws.js +0 -348
  261. package/src/LICENSE +0 -661
  262. package/src/__generated__/blockquote.props.ts +0 -580
  263. package/src/__generated__/body.props.ts +0 -573
  264. package/src/__generated__/bold.props.ts +0 -573
  265. package/src/__generated__/box.props.ts +0 -593
  266. package/src/__generated__/button.props.ts +0 -636
  267. package/src/__generated__/checkbox.props.ts +0 -748
  268. package/src/__generated__/code-text.props.ts +0 -573
  269. package/src/__generated__/form.props.ts +0 -628
  270. package/src/__generated__/fragment.props.ts +0 -3
  271. package/src/__generated__/heading.props.ts +0 -582
  272. package/src/__generated__/html-embed.props.ts +0 -10
  273. package/src/__generated__/image.props.ts +0 -648
  274. package/src/__generated__/input.props.ts +0 -756
  275. package/src/__generated__/italic.props.ts +0 -573
  276. package/src/__generated__/label.props.ts +0 -586
  277. package/src/__generated__/link.props.ts +0 -630
  278. package/src/__generated__/list-item.props.ts +0 -573
  279. package/src/__generated__/list.props.ts +0 -601
  280. package/src/__generated__/paragraph.props.ts +0 -573
  281. package/src/__generated__/radio-button.props.ts +0 -748
  282. package/src/__generated__/rich-text-link.props.ts +0 -630
  283. package/src/__generated__/separator.props.ts +0 -573
  284. package/src/__generated__/slot.props.ts +0 -3
  285. package/src/__generated__/span.props.ts +0 -573
  286. package/src/__generated__/subscript.props.ts +0 -573
  287. package/src/__generated__/superscript.props.ts +0 -573
  288. package/src/__generated__/text.props.ts +0 -582
  289. package/src/__generated__/textarea.props.ts +0 -645
  290. package/src/__generated__/vimeo-play-button.props.ts +0 -634
  291. package/src/__generated__/vimeo-preview-image.props.ts +0 -647
  292. package/src/__generated__/vimeo-spinner.props.ts +0 -573
  293. package/src/__generated__/vimeo.props.ts +0 -751
  294. package/src/blockquote.stories.tsx +0 -13
  295. package/src/blockquote.tsx +0 -18
  296. package/src/blockquote.ws.tsx +0 -84
  297. package/src/body.stories.tsx +0 -13
  298. package/src/body.tsx +0 -10
  299. package/src/body.ws.tsx +0 -37
  300. package/src/bold.stories.tsx +0 -13
  301. package/src/bold.tsx +0 -10
  302. package/src/bold.ws.tsx +0 -27
  303. package/src/box.stories.tsx +0 -13
  304. package/src/box.tsx +0 -32
  305. package/src/box.ws.ts +0 -54
  306. package/src/button.stories.tsx +0 -13
  307. package/src/button.tsx +0 -15
  308. package/src/button.ws.tsx +0 -43
  309. package/src/checkbox.tsx +0 -13
  310. package/src/checkbox.ws.tsx +0 -64
  311. package/src/code-text.stories.tsx +0 -13
  312. package/src/code-text.tsx +0 -17
  313. package/src/code-text.ws.tsx +0 -61
  314. package/src/components.ts +0 -32
  315. package/src/form.stories.tsx +0 -13
  316. package/src/form.tsx +0 -14
  317. package/src/form.ws.tsx +0 -69
  318. package/src/fragment.tsx +0 -11
  319. package/src/fragment.ws.ts +0 -15
  320. package/src/heading.stories.tsx +0 -13
  321. package/src/heading.tsx +0 -21
  322. package/src/heading.ws.tsx +0 -47
  323. package/src/html-embed.stories.tsx +0 -13
  324. package/src/html-embed.tsx +0 -99
  325. package/src/html-embed.ws.ts +0 -34
  326. package/src/image.stories.tsx +0 -9
  327. package/src/image.tsx +0 -91
  328. package/src/image.ws.tsx +0 -58
  329. package/src/input.stories.tsx +0 -11
  330. package/src/input.tsx +0 -13
  331. package/src/input.ws.tsx +0 -49
  332. package/src/italic.stories.tsx +0 -13
  333. package/src/italic.tsx +0 -10
  334. package/src/italic.ws.tsx +0 -33
  335. package/src/label.tsx +0 -10
  336. package/src/label.ws.tsx +0 -46
  337. package/src/link.stories.tsx +0 -13
  338. package/src/link.tsx +0 -43
  339. package/src/link.ws.tsx +0 -67
  340. package/src/list-item.stories.tsx +0 -13
  341. package/src/list-item.tsx +0 -18
  342. package/src/list-item.ws.tsx +0 -38
  343. package/src/list.stories.tsx +0 -14
  344. package/src/list.tsx +0 -27
  345. package/src/list.ws.tsx +0 -59
  346. package/src/metas.ts +0 -32
  347. package/src/paragraph.stories.tsx +0 -13
  348. package/src/paragraph.tsx +0 -10
  349. package/src/paragraph.ws.tsx +0 -38
  350. package/src/props.ts +0 -32
  351. package/src/radio-button.tsx +0 -13
  352. package/src/radio-button.ws.tsx +0 -64
  353. package/src/rich-text-link.stories.tsx +0 -13
  354. package/src/rich-text-link.tsx +0 -8
  355. package/src/rich-text-link.ws.tsx +0 -14
  356. package/src/separator.stories.tsx +0 -9
  357. package/src/separator.tsx +0 -18
  358. package/src/separator.ws.tsx +0 -58
  359. package/src/slot.stories.tsx +0 -13
  360. package/src/slot.tsx +0 -17
  361. package/src/slot.ws.ts +0 -20
  362. package/src/span.stories.tsx +0 -13
  363. package/src/span.tsx +0 -10
  364. package/src/span.ws.tsx +0 -27
  365. package/src/subscript.stories.tsx +0 -13
  366. package/src/subscript.tsx +0 -10
  367. package/src/subscript.ws.tsx +0 -27
  368. package/src/superscript.stories.tsx +0 -13
  369. package/src/superscript.tsx +0 -10
  370. package/src/superscript.ws.tsx +0 -27
  371. package/src/text.stories.tsx +0 -13
  372. package/src/text.tsx +0 -22
  373. package/src/text.ws.tsx +0 -44
  374. package/src/textarea.tsx +0 -13
  375. package/src/textarea.ws.tsx +0 -50
  376. package/src/vimeo-play-button.stories.tsx +0 -13
  377. package/src/vimeo-play-button.tsx +0 -24
  378. package/src/vimeo-play-button.ws.ts +0 -30
  379. package/src/vimeo-preview-image.stories.tsx +0 -13
  380. package/src/vimeo-preview-image.tsx +0 -30
  381. package/src/vimeo-preview-image.ws.ts +0 -22
  382. package/src/vimeo-spinner.stories.tsx +0 -13
  383. package/src/vimeo-spinner.tsx +0 -25
  384. package/src/vimeo-spinner.ws.ts +0 -28
  385. package/src/vimeo.stories.tsx +0 -13
  386. package/src/vimeo.tsx +0 -431
  387. package/src/vimeo.ws.ts +0 -335
package/src/blockquote.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Blockquote as BlockquotePrimitive } from "./blockquote";
3
-
4
- export default {
5
- title: "Components/Blockquote",
6
- component: BlockquotePrimitive,
7
- } satisfies Meta<typeof BlockquotePrimitive>;
8
-
9
- export const Blockquote: StoryObj<typeof BlockquotePrimitive> = {
10
- args: {
11
- children: "Blockquote",
12
- },
13
- };
package/src/blockquote.tsx DELETED
@@ -1,18 +0,0 @@
1
- import {
2
- forwardRef,
3
- createElement,
4
- type ElementRef,
5
- type ComponentProps,
6
- } from "react";
7
-
8
- export const defaultTag = "blockquote";
9
-
10
- type Props = ComponentProps<typeof defaultTag>;
11
-
12
- export const Blockquote = forwardRef<ElementRef<typeof defaultTag>, Props>(
13
- (props, ref) => {
14
- return createElement(defaultTag, { ...props, ref });
15
- }
16
- );
17
-
18
- Blockquote.displayName = "Blockquote";
package/src/blockquote.ws.tsx DELETED
@@ -1,84 +0,0 @@
1
- import { BlockquoteIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import type { defaultTag } from "./blockquote";
9
- import { props } from "./__generated__/blockquote.props";
10
-
11
- const presetStyle = {
12
- blockquote: [
13
- {
14
- property: "marginTop",
15
- value: { type: "unit", value: 0, unit: "number" },
16
- },
17
- {
18
- property: "marginRight",
19
- value: { type: "unit", value: 0, unit: "number" },
20
- },
21
- {
22
- property: "marginBottom",
23
- value: { type: "unit", value: 10, unit: "px" },
24
- },
25
- {
26
- property: "marginLeft",
27
- value: { type: "unit", value: 0, unit: "number" },
28
- },
29
-
30
- {
31
- property: "paddingTop",
32
- value: { type: "unit", value: 10, unit: "px" },
33
- },
34
- {
35
- property: "paddingBottom",
36
- value: { type: "unit", value: 10, unit: "px" },
37
- },
38
- {
39
- property: "paddingLeft",
40
- value: { type: "unit", value: 20, unit: "px" },
41
- },
42
- {
43
- property: "paddingRight",
44
- value: { type: "unit", value: 20, unit: "px" },
45
- },
46
-
47
- {
48
- property: "borderLeftWidth",
49
- value: { type: "unit", value: 5, unit: "px" },
50
- },
51
- {
52
- property: "borderLeftStyle",
53
- value: { type: "keyword", value: "solid" },
54
- },
55
- {
56
- property: "borderLeftColor",
57
- value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
58
- },
59
- ],
60
- } satisfies PresetStyle<typeof defaultTag>;
61
-
62
- export const meta: WsComponentMeta = {
63
- category: "text",
64
- type: "container",
65
- label: "Blockquote",
66
- description:
67
- "Use to style a quote from an external source like an article or book.",
68
- icon: BlockquoteIcon,
69
- states: defaultStates,
70
- presetStyle,
71
- template: [
72
- {
73
- type: "instance",
74
- component: "Blockquote",
75
- children: [{ type: "text", value: "Blockquote you can edit" }],
76
- },
77
- ],
78
- order: 3,
79
- };
80
-
81
- export const propsMeta: WsComponentPropsMeta = {
82
- props,
83
- initialProps: ["id", "cite"],
84
- };
package/src/body.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Body as BodyPrimitive } from "./body";
3
-
4
- export default {
5
- title: "Components/Body",
6
- component: BodyPrimitive,
7
- } satisfies Meta<typeof BodyPrimitive>;
8
-
9
- export const Body: StoryObj<typeof BodyPrimitive> = {
10
- args: {
11
- children: "Body",
12
- },
13
- };
package/src/body.tsx DELETED
@@ -1,10 +0,0 @@
1
- import { forwardRef, type ElementRef, type ComponentProps } from "react";
2
-
3
- export const defaultTag = "body";
4
-
5
- export const Body = forwardRef<
6
- ElementRef<typeof defaultTag>,
7
- ComponentProps<typeof defaultTag>
8
- >((props, ref) => <body {...props} ref={ref} />);
9
-
10
- Body.displayName = "Body";
package/src/body.ws.tsx DELETED
@@ -1,37 +0,0 @@
1
- import { BodyIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import { body } from "@webstudio-is/react-sdk/css-normalize";
9
- import { props } from "./__generated__/body.props";
10
- import type { defaultTag } from "./body";
11
-
12
- const presetStyle = {
13
- body: [
14
- ...body,
15
- {
16
- property: "WebkitFontSmoothing",
17
- value: { type: "keyword", value: "antialiased" },
18
- },
19
- {
20
- property: "MozOsxFontSmoothing",
21
- value: { type: "keyword", value: "grayscale" },
22
- },
23
- ],
24
- } satisfies PresetStyle<typeof defaultTag>;
25
-
26
- export const meta: WsComponentMeta = {
27
- type: "container",
28
- label: "Body",
29
- icon: BodyIcon,
30
- states: defaultStates,
31
- presetStyle,
32
- };
33
-
34
- export const propsMeta: WsComponentPropsMeta = {
35
- props,
36
- initialProps: ["id"],
37
- };
package/src/bold.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Bold as BoldPrimitive } from "./bold";
3
-
4
- export default {
5
- title: "Components/Bold",
6
- component: BoldPrimitive,
7
- } satisfies Meta<typeof BoldPrimitive>;
8
-
9
- export const Bold: StoryObj<typeof BoldPrimitive> = {
10
- args: {
11
- children: "some bold text",
12
- },
13
- };
package/src/bold.tsx DELETED
@@ -1,10 +0,0 @@
1
- import { forwardRef, type ElementRef, type ComponentProps } from "react";
2
-
3
- export const defaultTag = "b";
4
-
5
- export const Bold = forwardRef<
6
- ElementRef<typeof defaultTag>,
7
- ComponentProps<typeof defaultTag>
8
- >((props, ref) => <b {...props} ref={ref} />);
9
-
10
- Bold.displayName = "Bold";
package/src/bold.ws.tsx DELETED
@@ -1,27 +0,0 @@
1
- import { BoldIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import { b } from "@webstudio-is/react-sdk/css-normalize";
9
- import { props } from "./__generated__/bold.props";
10
- import type { defaultTag } from "./bold";
11
-
12
- const presetStyle = {
13
- b,
14
- } satisfies PresetStyle<typeof defaultTag>;
15
-
16
- export const meta: WsComponentMeta = {
17
- type: "rich-text-child",
18
- label: "Bold Text",
19
- icon: BoldIcon,
20
- states: defaultStates,
21
- presetStyle,
22
- };
23
-
24
- export const propsMeta: WsComponentPropsMeta = {
25
- props,
26
- initialProps: ["id"],
27
- };
package/src/box.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Box as BoxPrimitive } from "./box";
3
-
4
- export default {
5
- title: "Components/Box",
6
- component: BoxPrimitive,
7
- } satisfies Meta<typeof BoxPrimitive>;
8
-
9
- export const Box: StoryObj<typeof BoxPrimitive> = {
10
- args: {
11
- children: "Box",
12
- },
13
- };
package/src/box.tsx DELETED
@@ -1,32 +0,0 @@
1
- import {
2
- createElement,
3
- forwardRef,
4
- type ElementRef,
5
- type ComponentProps,
6
- } from "react";
7
-
8
- export const defaultTag = "div";
9
-
10
- // We don't want to enable all tags because Box is usually a container and we have specific components for many tags.
11
- type Props = ComponentProps<typeof defaultTag> & {
12
- /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
13
- tag?:
14
- | "div"
15
- | "header"
16
- | "footer"
17
- | "nav"
18
- | "main"
19
- | "section"
20
- | "article"
21
- | "aside"
22
- | "address"
23
- | "figure";
24
- };
25
-
26
- export const Box = forwardRef<ElementRef<typeof defaultTag>, Props>(
27
- ({ tag = defaultTag, ...props }, ref) => {
28
- return createElement(tag, { ...props, ref });
29
- }
30
- );
31
-
32
- Box.displayName = "Box";
package/src/box.ws.ts DELETED
@@ -1,54 +0,0 @@
1
- import type { ComponentProps } from "react";
2
- import { BoxIcon } from "@webstudio-is/icons/svg";
3
- import {
4
- defaultStates,
5
- type PresetStyle,
6
- type WsComponentMeta,
7
- type WsComponentPropsMeta,
8
- } from "@webstudio-is/react-sdk";
9
- import {
10
- div,
11
- address,
12
- article,
13
- aside,
14
- figure,
15
- footer,
16
- header,
17
- main,
18
- nav,
19
- section,
20
- } from "@webstudio-is/react-sdk/css-normalize";
21
- import { props } from "./__generated__/box.props";
22
- import type { Box } from "./box";
23
-
24
- type BoxTags = NonNullable<ComponentProps<typeof Box>["tag"]>;
25
-
26
- const presetStyle = {
27
- div,
28
- address,
29
- article,
30
- aside,
31
- figure,
32
- footer,
33
- header,
34
- main,
35
- nav,
36
- section,
37
- } satisfies PresetStyle<BoxTags>;
38
-
39
- export const meta: WsComponentMeta = {
40
- category: "general",
41
- type: "container",
42
- label: "Box",
43
- description:
44
- "A container for content. By default this is a Div, but the tag can be changed in settings.",
45
- icon: BoxIcon,
46
- states: defaultStates,
47
- presetStyle,
48
- order: 0,
49
- };
50
-
51
- export const propsMeta: WsComponentPropsMeta = {
52
- props,
53
- initialProps: ["id", "tag"],
54
- };
package/src/button.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Button as ButtonPrimitive } from "./button";
3
-
4
- export default {
5
- title: "Components/Button",
6
- component: ButtonPrimitive,
7
- } satisfies Meta<typeof ButtonPrimitive>;
8
-
9
- export const Button: StoryObj<typeof ButtonPrimitive> = {
10
- args: {
11
- children: "Click me",
12
- },
13
- };
package/src/button.tsx DELETED
@@ -1,15 +0,0 @@
1
- import { forwardRef, type ElementRef, type ComponentProps } from "react";
2
-
3
- export const defaultTag = "button";
4
-
5
- type ButtonProps = ComponentProps<typeof defaultTag>;
6
-
7
- export const Button = forwardRef<ElementRef<typeof defaultTag>, ButtonProps>(
8
- ({ type = "submit", children, ...props }, ref) => (
9
- <button type={type} {...props} ref={ref}>
10
- {children}
11
- </button>
12
- )
13
- );
14
-
15
- Button.displayName = "Button";
package/src/button.ws.tsx DELETED
@@ -1,43 +0,0 @@
1
- import { ButtonElementIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import { button } from "@webstudio-is/react-sdk/css-normalize";
9
- import { props } from "./__generated__/button.props";
10
- import type { defaultTag } from "./button";
11
-
12
- const presetStyle = {
13
- button,
14
- } satisfies PresetStyle<typeof defaultTag>;
15
-
16
- export const meta: WsComponentMeta = {
17
- category: "forms",
18
- type: "container",
19
- invalidAncestors: ["Button"],
20
- label: "Button",
21
- description:
22
- "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
23
- icon: ButtonElementIcon,
24
- presetStyle,
25
- states: [
26
- ...defaultStates,
27
- { selector: ":disabled", label: "Disabled" },
28
- { selector: ":enabled", label: "Enabled" },
29
- ],
30
- order: 1,
31
- template: [
32
- {
33
- type: "instance",
34
- component: "Button",
35
- children: [{ type: "text", value: "Button you can edit" }],
36
- },
37
- ],
38
- };
39
-
40
- export const propsMeta: WsComponentPropsMeta = {
41
- props,
42
- initialProps: ["id", "type", "aria-label"],
43
- };
package/src/checkbox.tsx DELETED
@@ -1,13 +0,0 @@
1
- import { forwardRef, type ElementRef, type ComponentProps } from "react";
2
-
3
- export const defaultTag = "input";
4
-
5
- export const Checkbox = forwardRef<
6
- ElementRef<typeof defaultTag>,
7
- Omit<ComponentProps<typeof defaultTag>, "type">
8
- // Make sure children are not passed down to an input, because this will result in error.
9
- >(({ children: _children, ...props }, ref) => (
10
- <input {...props} type="checkbox" ref={ref} />
11
- ));
12
-
13
- Checkbox.displayName = "Checkbox";
package/src/checkbox.ws.tsx DELETED
@@ -1,64 +0,0 @@
1
- import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- type WsComponentMeta,
4
- type WsComponentPropsMeta,
5
- type PresetStyle,
6
- defaultStates,
7
- } from "@webstudio-is/react-sdk";
8
- import { input } from "@webstudio-is/react-sdk/css-normalize";
9
- import type { defaultTag } from "./checkbox";
10
- import { props } from "./__generated__/checkbox.props";
11
-
12
- const presetStyle = {
13
- input: [
14
- ...input,
15
- {
16
- property: "marginRight",
17
- value: { type: "unit", unit: "em", value: 0.5 },
18
- },
19
- ],
20
- } satisfies PresetStyle<typeof defaultTag>;
21
-
22
- export const meta: WsComponentMeta = {
23
- category: "forms",
24
- invalidAncestors: ["Button"],
25
- type: "control",
26
- label: "Checkbox",
27
- description:
28
- "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
29
- icon: CheckboxCheckedIcon,
30
- presetStyle,
31
- order: 6,
32
- states: [
33
- ...defaultStates,
34
- { selector: ":checked", label: "Checked" },
35
- { selector: ":required", label: "Required" },
36
- { selector: ":optional", label: "Optional" },
37
- { selector: ":disabled", label: "Disabled" },
38
- { selector: ":enabled", label: "Enabled" },
39
- { selector: ":read-only", label: "Read Only" },
40
- { selector: ":read-write", label: "Read Write" },
41
- ],
42
- template: [
43
- {
44
- type: "instance",
45
- component: "Label",
46
- label: "Checkbox Field",
47
- children: [
48
- { type: "instance", component: "Checkbox", children: [] },
49
- {
50
- type: "instance",
51
- component: "Text",
52
- label: "Checkbox Label",
53
- props: [{ type: "string", name: "tag", value: "span" }],
54
- children: [{ type: "text", value: "Checkbox" }],
55
- },
56
- ],
57
- },
58
- ],
59
- };
60
-
61
- export const propsMeta: WsComponentPropsMeta = {
62
- props,
63
- initialProps: ["id", "name"],
64
- };
package/src/code-text.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { CodeText as CodeTextPrimitive } from "./code-text";
3
-
4
- export default {
5
- title: "Components/CodeText",
6
- component: CodeTextPrimitive,
7
- } satisfies Meta<typeof CodeTextPrimitive>;
8
-
9
- export const CodeText: StoryObj<typeof CodeTextPrimitive> = {
10
- args: {
11
- children: "alert('Hello World!')",
12
- },
13
- };
package/src/code-text.tsx DELETED
@@ -1,17 +0,0 @@
1
- import {
2
- type ElementRef,
3
- type ComponentProps,
4
- forwardRef,
5
- createElement,
6
- } from "react";
7
-
8
- export const defaultTag = "code";
9
-
10
- export const CodeText = forwardRef<
11
- ElementRef<typeof defaultTag>,
12
- ComponentProps<typeof defaultTag>
13
- >((props, ref) => {
14
- return createElement(defaultTag, { ...props, ref });
15
- });
16
-
17
- CodeText.displayName = "CodeText";
package/src/code-text.ws.tsx DELETED
@@ -1,61 +0,0 @@
1
- import { CodeTextIcon } from "@webstudio-is/icons/svg";
2
- import {
3
- defaultStates,
4
- type PresetStyle,
5
- type WsComponentMeta,
6
- type WsComponentPropsMeta,
7
- } from "@webstudio-is/react-sdk";
8
- import { code } from "@webstudio-is/react-sdk/css-normalize";
9
- import type { defaultTag } from "./code-text";
10
- import { props } from "./__generated__/code-text.props";
11
-
12
- const presetStyle = {
13
- code: [
14
- ...code,
15
- {
16
- property: "display",
17
- value: { type: "keyword", value: "block" },
18
- },
19
- {
20
- property: "whiteSpace",
21
- value: { type: "keyword", value: "pre-wrap" },
22
- },
23
- {
24
- property: "paddingLeft",
25
- value: { type: "unit", value: 0.2, unit: "em" },
26
- },
27
- {
28
- property: "paddingRight",
29
- value: { type: "unit", value: 0.2, unit: "em" },
30
- },
31
- {
32
- property: "backgroundColor",
33
- value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 },
34
- },
35
- ],
36
- } satisfies PresetStyle<typeof defaultTag>;
37
-
38
- export const meta: WsComponentMeta = {
39
- category: "general",
40
- type: "container",
41
- label: "Code Text",
42
- description:
43
- "Use this component when you want to display code as text on the page.",
44
- icon: CodeTextIcon,
45
- invalidAncestors: ["CodeText"],
46
- states: defaultStates,
47
- presetStyle,
48
- template: [
49
- {
50
- type: "instance",
51
- component: "CodeText",
52
- children: [{ type: "text", value: "Code you can edit" }],
53
- },
54
- ],
55
- order: 8,
56
- };
57
-
58
- export const propsMeta: WsComponentPropsMeta = {
59
- props,
60
- initialProps: ["id", "lang"],
61
- };
package/src/components.ts DELETED
@@ -1,32 +0,0 @@
1
- export { Slot } from "./slot";
2
- export { Fragment } from "./fragment";
3
- export { HtmlEmbed } from "./html-embed";
4
- export { Body } from "./body";
5
- export { Box } from "./box";
6
- export { Text } from "./text";
7
- export { Heading } from "./heading";
8
- export { Paragraph } from "./paragraph";
9
- export { Link } from "./link";
10
- export { RichTextLink } from "./rich-text-link";
11
- export { Span } from "./span";
12
- export { Bold } from "./bold";
13
- export { Italic } from "./italic";
14
- export { Superscript } from "./superscript";
15
- export { Subscript } from "./subscript";
16
- export { Button } from "./button";
17
- export { Input } from "./input";
18
- export { Form } from "./form";
19
- export { Image } from "./image";
20
- export { Blockquote } from "./blockquote";
21
- export { List } from "./list";
22
- export { ListItem } from "./list-item";
23
- export { Separator } from "./separator";
24
- export { CodeText } from "./code-text";
25
- export { Label } from "./label";
26
- export { Textarea } from "./textarea";
27
- export { RadioButton } from "./radio-button";
28
- export { Checkbox } from "./checkbox";
29
- export { Vimeo } from "./vimeo";
30
- export { VimeoPreviewImage } from "./vimeo-preview-image";
31
- export { VimeoPlayButton } from "./vimeo-play-button";
32
- export { VimeoSpinner } from "./vimeo-spinner";
package/src/form.stories.tsx DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Form as FormPrimitive } from "./form";
3
-
4
- export default {
5
- title: "Components/Form",
6
- component: FormPrimitive,
7
- } satisfies Meta<typeof FormPrimitive>;
8
-
9
- export const Form: StoryObj<typeof FormPrimitive> = {
10
- args: {
11
- children: "Form",
12
- },
13
- };
package/src/form.tsx DELETED
@@ -1,14 +0,0 @@
1
- import { forwardRef, type ElementRef, type ComponentProps } from "react";
2
-
3
- export const defaultTag = "form";
4
-
5
- export const Form = forwardRef<
6
- ElementRef<typeof defaultTag>,
7
- ComponentProps<typeof defaultTag>
8
- >(({ children, ...props }, ref) => (
9
- <form {...props} ref={ref}>
10
- {children}
11
- </form>
12
- ));
13
-
14
- Form.displayName = "Form";