@qwickapps/react-framework 1.3.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 (441) hide show
  1. package/LICENSE +44 -0
  2. package/README.md +794 -0
  3. package/dist/components/AccessibilityChecker.d.ts +12 -0
  4. package/dist/components/AccessibilityChecker.d.ts.map +1 -0
  5. package/dist/components/Html.d.ts +48 -0
  6. package/dist/components/Html.d.ts.map +1 -0
  7. package/dist/components/Logo.d.ts +79 -0
  8. package/dist/components/Logo.d.ts.map +1 -0
  9. package/dist/components/Markdown.d.ts +47 -0
  10. package/dist/components/Markdown.d.ts.map +1 -0
  11. package/dist/components/QwickApp.d.ts +56 -0
  12. package/dist/components/QwickApp.d.ts.map +1 -0
  13. package/dist/components/QwickAppsLogo.d.ts +25 -0
  14. package/dist/components/QwickAppsLogo.d.ts.map +1 -0
  15. package/dist/components/ResponsiveMenu.d.ts +38 -0
  16. package/dist/components/ResponsiveMenu.d.ts.map +1 -0
  17. package/dist/components/SafeSpan.d.ts +23 -0
  18. package/dist/components/SafeSpan.d.ts.map +1 -0
  19. package/dist/components/Scaffold.d.ts +57 -0
  20. package/dist/components/Scaffold.d.ts.map +1 -0
  21. package/dist/components/blocks/Article.d.ts +23 -0
  22. package/dist/components/blocks/Article.d.ts.map +1 -0
  23. package/dist/components/blocks/CardListGrid.d.ts +23 -0
  24. package/dist/components/blocks/CardListGrid.d.ts.map +1 -0
  25. package/dist/components/blocks/Code.d.ts +21 -0
  26. package/dist/components/blocks/Code.d.ts.map +1 -0
  27. package/dist/components/blocks/Content.d.ts +24 -0
  28. package/dist/components/blocks/Content.d.ts.map +1 -0
  29. package/dist/components/blocks/CoverImageHeader.d.ts +44 -0
  30. package/dist/components/blocks/CoverImageHeader.d.ts.map +1 -0
  31. package/dist/components/blocks/FeatureCard.d.ts +66 -0
  32. package/dist/components/blocks/FeatureCard.d.ts.map +1 -0
  33. package/dist/components/blocks/FeatureGrid.d.ts +48 -0
  34. package/dist/components/blocks/FeatureGrid.d.ts.map +1 -0
  35. package/dist/components/blocks/Footer.d.ts +56 -0
  36. package/dist/components/blocks/Footer.d.ts.map +1 -0
  37. package/dist/components/blocks/HeroBlock.d.ts +33 -0
  38. package/dist/components/blocks/HeroBlock.d.ts.map +1 -0
  39. package/dist/components/blocks/PageBannerHeader.d.ts +30 -0
  40. package/dist/components/blocks/PageBannerHeader.d.ts.map +1 -0
  41. package/dist/components/blocks/ProductCard.d.ts +57 -0
  42. package/dist/components/blocks/ProductCard.d.ts.map +1 -0
  43. package/dist/components/blocks/Section.d.ts +40 -0
  44. package/dist/components/blocks/Section.d.ts.map +1 -0
  45. package/dist/components/blocks/index.d.ts +37 -0
  46. package/dist/components/blocks/index.d.ts.map +1 -0
  47. package/dist/components/buttons/Button.d.ts +38 -0
  48. package/dist/components/buttons/Button.d.ts.map +1 -0
  49. package/dist/components/buttons/PaletteSwitcher.d.ts +24 -0
  50. package/dist/components/buttons/PaletteSwitcher.d.ts.map +1 -0
  51. package/dist/components/buttons/ThemeSwitcher.d.ts +24 -0
  52. package/dist/components/buttons/ThemeSwitcher.d.ts.map +1 -0
  53. package/dist/components/buttons/index.d.ts +11 -0
  54. package/dist/components/buttons/index.d.ts.map +1 -0
  55. package/dist/components/forms/FormBlock.d.ts +45 -0
  56. package/dist/components/forms/FormBlock.d.ts.map +1 -0
  57. package/dist/components/forms/index.d.ts +8 -0
  58. package/dist/components/forms/index.d.ts.map +1 -0
  59. package/dist/components/index.d.ts +32 -0
  60. package/dist/components/index.d.ts.map +1 -0
  61. package/dist/components/input/ChoiceInputField.d.ts +30 -0
  62. package/dist/components/input/ChoiceInputField.d.ts.map +1 -0
  63. package/dist/components/input/HtmlInputField.d.ts +29 -0
  64. package/dist/components/input/HtmlInputField.d.ts.map +1 -0
  65. package/dist/components/input/SelectInputField.d.ts +29 -0
  66. package/dist/components/input/SelectInputField.d.ts.map +1 -0
  67. package/dist/components/input/TextField.d.ts +18 -0
  68. package/dist/components/input/TextField.d.ts.map +1 -0
  69. package/dist/components/input/TextInputField.d.ts +32 -0
  70. package/dist/components/input/TextInputField.d.ts.map +1 -0
  71. package/dist/components/input/index.d.ts +17 -0
  72. package/dist/components/input/index.d.ts.map +1 -0
  73. package/dist/components/layout/GridCell.d.ts +16 -0
  74. package/dist/components/layout/GridCell.d.ts.map +1 -0
  75. package/dist/components/layout/GridCellWrapper.d.ts +46 -0
  76. package/dist/components/layout/GridCellWrapper.d.ts.map +1 -0
  77. package/dist/components/layout/GridLayout.d.ts +38 -0
  78. package/dist/components/layout/GridLayout.d.ts.map +1 -0
  79. package/dist/components/layout/index.d.ts +12 -0
  80. package/dist/components/layout/index.d.ts.map +1 -0
  81. package/dist/components/menu/Menu.d.ts +1 -0
  82. package/dist/components/menu/Menu.d.ts.map +1 -0
  83. package/dist/components/menu/MenuItem.d.ts +31 -0
  84. package/dist/components/menu/MenuItem.d.ts.map +1 -0
  85. package/dist/components/menu/index.d.ts +7 -0
  86. package/dist/components/menu/index.d.ts.map +1 -0
  87. package/dist/components/pages/FormPage.d.ts +66 -0
  88. package/dist/components/pages/FormPage.d.ts.map +1 -0
  89. package/dist/components/pages/Page.d.ts +124 -0
  90. package/dist/components/pages/Page.d.ts.map +1 -0
  91. package/dist/components/pages/index.d.ts +11 -0
  92. package/dist/components/pages/index.d.ts.map +1 -0
  93. package/dist/contexts/DataContext.d.ts +139 -0
  94. package/dist/contexts/DataContext.d.ts.map +1 -0
  95. package/dist/contexts/DimensionsContext.d.ts +42 -0
  96. package/dist/contexts/DimensionsContext.d.ts.map +1 -0
  97. package/dist/contexts/PaletteContext.d.ts +53 -0
  98. package/dist/contexts/PaletteContext.d.ts.map +1 -0
  99. package/dist/contexts/QwickAppContext.d.ts +71 -0
  100. package/dist/contexts/QwickAppContext.d.ts.map +1 -0
  101. package/dist/contexts/ThemeContext.d.ts +65 -0
  102. package/dist/contexts/ThemeContext.d.ts.map +1 -0
  103. package/dist/contexts/index.d.ts +9 -0
  104. package/dist/contexts/index.d.ts.map +1 -0
  105. package/dist/hooks/index.d.ts +10 -0
  106. package/dist/hooks/index.d.ts.map +1 -0
  107. package/dist/hooks/useBaseProps.d.ts +101 -0
  108. package/dist/hooks/useBaseProps.d.ts.map +1 -0
  109. package/dist/hooks/useDataBinding.d.ts +22 -0
  110. package/dist/hooks/useDataBinding.d.ts.map +1 -0
  111. package/dist/index.css +1 -0
  112. package/dist/index.d.ts +8 -0
  113. package/dist/index.d.ts.map +1 -0
  114. package/dist/index.esm.css +1 -0
  115. package/dist/index.esm.js +24143 -0
  116. package/dist/index.js +24245 -0
  117. package/dist/palettes/PaletteAutumn.d.ts +10 -0
  118. package/dist/palettes/PaletteAutumn.d.ts.map +1 -0
  119. package/dist/palettes/PaletteCosmic.d.ts +10 -0
  120. package/dist/palettes/PaletteCosmic.d.ts.map +1 -0
  121. package/dist/palettes/PaletteDefault.d.ts +10 -0
  122. package/dist/palettes/PaletteDefault.d.ts.map +1 -0
  123. package/dist/palettes/PaletteOcean.d.ts +10 -0
  124. package/dist/palettes/PaletteOcean.d.ts.map +1 -0
  125. package/dist/palettes/PaletteSpring.d.ts +10 -0
  126. package/dist/palettes/PaletteSpring.d.ts.map +1 -0
  127. package/dist/palettes/PaletteWinter.d.ts +10 -0
  128. package/dist/palettes/PaletteWinter.d.ts.map +1 -0
  129. package/dist/palettes/index.d.ts +13 -0
  130. package/dist/palettes/index.d.ts.map +1 -0
  131. package/dist/schemas/ActionSchema.d.ts +21 -0
  132. package/dist/schemas/ActionSchema.d.ts.map +1 -0
  133. package/dist/schemas/ArticleSchema.d.ts +13 -0
  134. package/dist/schemas/ArticleSchema.d.ts.map +1 -0
  135. package/dist/schemas/Builders.d.ts +7 -0
  136. package/dist/schemas/Builders.d.ts.map +1 -0
  137. package/dist/schemas/ButtonSchema.d.ts +19 -0
  138. package/dist/schemas/ButtonSchema.d.ts.map +1 -0
  139. package/dist/schemas/CardListGridSchema.d.ts +17 -0
  140. package/dist/schemas/CardListGridSchema.d.ts.map +1 -0
  141. package/dist/schemas/ChoiceInputFieldSchema.d.ts +18 -0
  142. package/dist/schemas/ChoiceInputFieldSchema.d.ts.map +1 -0
  143. package/dist/schemas/CodeSchema.d.ts +18 -0
  144. package/dist/schemas/CodeSchema.d.ts.map +1 -0
  145. package/dist/schemas/ContentSchema.d.ts +20 -0
  146. package/dist/schemas/ContentSchema.d.ts.map +1 -0
  147. package/dist/schemas/CoverImageHeaderSchema.d.ts +28 -0
  148. package/dist/schemas/CoverImageHeaderSchema.d.ts.map +1 -0
  149. package/dist/schemas/FeatureCardSchema.d.ts +28 -0
  150. package/dist/schemas/FeatureCardSchema.d.ts.map +1 -0
  151. package/dist/schemas/FeatureGridSchema.d.ts +17 -0
  152. package/dist/schemas/FeatureGridSchema.d.ts.map +1 -0
  153. package/dist/schemas/FeatureItemSchema.d.ts +16 -0
  154. package/dist/schemas/FeatureItemSchema.d.ts.map +1 -0
  155. package/dist/schemas/FooterItemSchema.d.ts +15 -0
  156. package/dist/schemas/FooterItemSchema.d.ts.map +1 -0
  157. package/dist/schemas/FooterSchema.d.ts +20 -0
  158. package/dist/schemas/FooterSchema.d.ts.map +1 -0
  159. package/dist/schemas/FooterSectionSchema.d.ts +15 -0
  160. package/dist/schemas/FooterSectionSchema.d.ts.map +1 -0
  161. package/dist/schemas/FormBlockSchema.d.ts +19 -0
  162. package/dist/schemas/FormBlockSchema.d.ts.map +1 -0
  163. package/dist/schemas/HeaderActionSchema.d.ts +17 -0
  164. package/dist/schemas/HeaderActionSchema.d.ts.map +1 -0
  165. package/dist/schemas/HeroBlockSchema.d.ts +22 -0
  166. package/dist/schemas/HeroBlockSchema.d.ts.map +1 -0
  167. package/dist/schemas/HtmlInputFieldSchema.d.ts +18 -0
  168. package/dist/schemas/HtmlInputFieldSchema.d.ts.map +1 -0
  169. package/dist/schemas/MetadataItemSchema.d.ts +13 -0
  170. package/dist/schemas/MetadataItemSchema.d.ts.map +1 -0
  171. package/dist/schemas/PageBannerHeaderSchema.d.ts +28 -0
  172. package/dist/schemas/PageBannerHeaderSchema.d.ts.map +1 -0
  173. package/dist/schemas/PaletteSwitcherSchema.d.ts +16 -0
  174. package/dist/schemas/PaletteSwitcherSchema.d.ts.map +1 -0
  175. package/dist/schemas/ProductCardSchema.d.ts +39 -0
  176. package/dist/schemas/ProductCardSchema.d.ts.map +1 -0
  177. package/dist/schemas/SafeSpanSchema.d.ts +13 -0
  178. package/dist/schemas/SafeSpanSchema.d.ts.map +1 -0
  179. package/dist/schemas/SectionSchema.d.ts +17 -0
  180. package/dist/schemas/SectionSchema.d.ts.map +1 -0
  181. package/dist/schemas/SelectInputFieldSchema.d.ts +27 -0
  182. package/dist/schemas/SelectInputFieldSchema.d.ts.map +1 -0
  183. package/dist/schemas/TextInputFieldSchema.d.ts +22 -0
  184. package/dist/schemas/TextInputFieldSchema.d.ts.map +1 -0
  185. package/dist/schemas/ThemeSwitcherSchema.d.ts +19 -0
  186. package/dist/schemas/ThemeSwitcherSchema.d.ts.map +1 -0
  187. package/dist/schemas/index.d.ts +33 -0
  188. package/dist/schemas/index.d.ts.map +1 -0
  189. package/dist/schemas/types.d.ts +7 -0
  190. package/dist/schemas/types.d.ts.map +1 -0
  191. package/dist/templates/TemplateResolver.d.ts +52 -0
  192. package/dist/templates/TemplateResolver.d.ts.map +1 -0
  193. package/dist/templates/index.d.ts +7 -0
  194. package/dist/templates/index.d.ts.map +1 -0
  195. package/dist/tests/ConsoleWarningTest.d.ts +5 -0
  196. package/dist/tests/ConsoleWarningTest.d.ts.map +1 -0
  197. package/dist/tests/StorageKeyTest.d.ts +6 -0
  198. package/dist/tests/StorageKeyTest.d.ts.map +1 -0
  199. package/dist/tests/ThemeStorageKeyTest.d.ts +6 -0
  200. package/dist/tests/ThemeStorageKeyTest.d.ts.map +1 -0
  201. package/dist/types/CacheProvider.d.ts +18 -0
  202. package/dist/types/CacheProvider.d.ts.map +1 -0
  203. package/dist/types/ContentProxy.d.ts +47 -0
  204. package/dist/types/ContentProxy.d.ts.map +1 -0
  205. package/dist/types/DataBinding.d.ts +7 -0
  206. package/dist/types/DataBinding.d.ts.map +1 -0
  207. package/dist/types/DataProvider.d.ts +7 -0
  208. package/dist/types/DataProvider.d.ts.map +1 -0
  209. package/dist/types/DataTypes.d.ts +185 -0
  210. package/dist/types/DataTypes.d.ts.map +1 -0
  211. package/dist/types/TemplateProvider.d.ts +10 -0
  212. package/dist/types/TemplateProvider.d.ts.map +1 -0
  213. package/dist/types/TemplateResolver.d.ts +23 -0
  214. package/dist/types/TemplateResolver.d.ts.map +1 -0
  215. package/dist/types/index.d.ts +81 -0
  216. package/dist/types/index.d.ts.map +1 -0
  217. package/dist/utils/breakpoints.d.ts +35 -0
  218. package/dist/utils/breakpoints.d.ts.map +1 -0
  219. package/dist/utils/customPaletteManager.d.ts +8 -0
  220. package/dist/utils/customPaletteManager.d.ts.map +1 -0
  221. package/dist/utils/dimensions.d.ts +34 -0
  222. package/dist/utils/dimensions.d.ts.map +1 -0
  223. package/dist/utils/htmlTransform.d.ts +44 -0
  224. package/dist/utils/htmlTransform.d.ts.map +1 -0
  225. package/dist/utils/index.d.ts +15 -0
  226. package/dist/utils/index.d.ts.map +1 -0
  227. package/dist/utils/logger.d.ts +14 -0
  228. package/dist/utils/logger.d.ts.map +1 -0
  229. package/dist/utils/paletteUtils.d.ts +38 -0
  230. package/dist/utils/paletteUtils.d.ts.map +1 -0
  231. package/dist/utils/persistenceUtils.d.ts +31 -0
  232. package/dist/utils/persistenceUtils.d.ts.map +1 -0
  233. package/dist/utils/reactUtils.d.ts +24 -0
  234. package/dist/utils/reactUtils.d.ts.map +1 -0
  235. package/dist/utils/spacing.d.ts +34 -0
  236. package/dist/utils/spacing.d.ts.map +1 -0
  237. package/dist/utils/themePerformanceMonitor.d.ts +32 -0
  238. package/dist/utils/themePerformanceMonitor.d.ts.map +1 -0
  239. package/dist/utils/themeUtils.d.ts +27 -0
  240. package/dist/utils/themeUtils.d.ts.map +1 -0
  241. package/package.json +141 -0
  242. package/src/__tests__/components/Logo.test.js +172 -0
  243. package/src/__tests__/contexts/DataContext.test.js +505 -0
  244. package/src/__tests__/contexts/PaletteContext.test.js +115 -0
  245. package/src/__tests__/contexts/ThemeContext.test.js +123 -0
  246. package/src/__tests__/utils/paletteUtils.test.js +142 -0
  247. package/src/__tests__/utils/themeUtils.test.js +142 -0
  248. package/src/components/AccessibilityChecker.tsx +264 -0
  249. package/src/components/Html.tsx +191 -0
  250. package/src/components/Logo.css +217 -0
  251. package/src/components/Logo.tsx +370 -0
  252. package/src/components/Markdown.tsx +191 -0
  253. package/src/components/QwickApp.css +257 -0
  254. package/src/components/QwickApp.tsx +157 -0
  255. package/src/components/QwickAppsLogo.tsx +77 -0
  256. package/src/components/ResponsiveMenu.css +416 -0
  257. package/src/components/ResponsiveMenu.tsx +310 -0
  258. package/src/components/SafeSpan.tsx +128 -0
  259. package/src/components/Scaffold.css +541 -0
  260. package/src/components/Scaffold.tsx +463 -0
  261. package/src/components/__tests__/Article.test.tsx +419 -0
  262. package/src/components/__tests__/Button.test.tsx +702 -0
  263. package/src/components/__tests__/CardListGrid.test.tsx +478 -0
  264. package/src/components/__tests__/ChoiceInputField.test.tsx +864 -0
  265. package/src/components/__tests__/Code.test.tsx +595 -0
  266. package/src/components/__tests__/Content.integration.test.tsx +193 -0
  267. package/src/components/__tests__/Content.test.tsx +504 -0
  268. package/src/components/__tests__/CoverImageHeader.test.tsx +456 -0
  269. package/src/components/__tests__/FeatureCard.integration.test.tsx +384 -0
  270. package/src/components/__tests__/FeatureGrid.integration.test.tsx +364 -0
  271. package/src/components/__tests__/FeatureGrid.test.tsx +494 -0
  272. package/src/components/__tests__/Footer.test.tsx +544 -0
  273. package/src/components/__tests__/FormBlock.test.tsx +857 -0
  274. package/src/components/__tests__/HeroBlock.integration.test.tsx +272 -0
  275. package/src/components/__tests__/HeroBlock.test.tsx +463 -0
  276. package/src/components/__tests__/Html.test.tsx +174 -0
  277. package/src/components/__tests__/HtmlInputField.test.tsx +856 -0
  278. package/src/components/__tests__/Markdown.test.tsx +233 -0
  279. package/src/components/__tests__/PageBannerHeader.test.tsx +614 -0
  280. package/src/components/__tests__/PaletteSwitcher.test.tsx +864 -0
  281. package/src/components/__tests__/ProductCard.test.tsx +377 -0
  282. package/src/components/__tests__/SafeSpan.integration.test.tsx +123 -0
  283. package/src/components/__tests__/SafeSpan.simple.test.tsx +65 -0
  284. package/src/components/__tests__/SafeSpan.test.tsx +388 -0
  285. package/src/components/__tests__/Section.integration.test.tsx +288 -0
  286. package/src/components/__tests__/Section.test.tsx +494 -0
  287. package/src/components/__tests__/SelectInputField.test.tsx +886 -0
  288. package/src/components/__tests__/TextInputField.test.tsx +749 -0
  289. package/src/components/__tests__/ThemeSwitcher.test.tsx +777 -0
  290. package/src/components/blocks/Article.tsx +194 -0
  291. package/src/components/blocks/CardListGrid.tsx +132 -0
  292. package/src/components/blocks/Code.tsx +313 -0
  293. package/src/components/blocks/Content.tsx +265 -0
  294. package/src/components/blocks/CoverImageHeader.css +17 -0
  295. package/src/components/blocks/CoverImageHeader.tsx +435 -0
  296. package/src/components/blocks/FeatureCard.tsx +321 -0
  297. package/src/components/blocks/FeatureGrid.tsx +147 -0
  298. package/src/components/blocks/Footer.tsx +343 -0
  299. package/src/components/blocks/HeroBlock.tsx +280 -0
  300. package/src/components/blocks/PageBannerHeader.tsx +471 -0
  301. package/src/components/blocks/ProductCard.tsx +472 -0
  302. package/src/components/blocks/Section.tsx +209 -0
  303. package/src/components/blocks/index.ts +37 -0
  304. package/src/components/buttons/Button.tsx +233 -0
  305. package/src/components/buttons/PaletteSwitcher.tsx +268 -0
  306. package/src/components/buttons/ThemeSwitcher.tsx +283 -0
  307. package/src/components/buttons/index.ts +11 -0
  308. package/src/components/forms/FormBlock.tsx +291 -0
  309. package/src/components/forms/index.ts +7 -0
  310. package/src/components/index.ts +37 -0
  311. package/src/components/input/ChoiceInputField.tsx +188 -0
  312. package/src/components/input/HtmlInputField.tsx +326 -0
  313. package/src/components/input/SelectInputField.tsx +197 -0
  314. package/src/components/input/TextField.tsx +47 -0
  315. package/src/components/input/TextInputField.tsx +144 -0
  316. package/src/components/input/index.ts +17 -0
  317. package/src/components/layout/GridCell.tsx +46 -0
  318. package/src/components/layout/GridCellWrapper.tsx +87 -0
  319. package/src/components/layout/GridLayout.tsx +169 -0
  320. package/src/components/layout/index.ts +13 -0
  321. package/src/components/menu/Menu.tsx +0 -0
  322. package/src/components/menu/MenuItem.tsx +32 -0
  323. package/src/components/menu/index.ts +6 -0
  324. package/src/components/pages/FormPage.tsx +108 -0
  325. package/src/components/pages/Page.css +460 -0
  326. package/src/components/pages/Page.tsx +345 -0
  327. package/src/components/pages/index.ts +11 -0
  328. package/src/contexts/DataContext.tsx +355 -0
  329. package/src/contexts/DimensionsContext.tsx +154 -0
  330. package/src/contexts/PaletteContext.tsx +217 -0
  331. package/src/contexts/QwickAppContext.tsx +95 -0
  332. package/src/contexts/ThemeContext.tsx +376 -0
  333. package/src/contexts/index.ts +9 -0
  334. package/src/hooks/__tests__/useDataBinding.test.tsx.disabled +229 -0
  335. package/src/hooks/index.ts +11 -0
  336. package/src/hooks/useBaseProps.ts +267 -0
  337. package/src/hooks/useDataBinding.ts +77 -0
  338. package/src/index.ts +23 -0
  339. package/src/palettes/PaletteAutumn.css +172 -0
  340. package/src/palettes/PaletteAutumn.ts +16 -0
  341. package/src/palettes/PaletteCosmic.css +172 -0
  342. package/src/palettes/PaletteCosmic.ts +16 -0
  343. package/src/palettes/PaletteDefault.css +178 -0
  344. package/src/palettes/PaletteDefault.ts +17 -0
  345. package/src/palettes/PaletteOcean.css +172 -0
  346. package/src/palettes/PaletteOcean.ts +16 -0
  347. package/src/palettes/PaletteSpring.css +160 -0
  348. package/src/palettes/PaletteSpring.ts +16 -0
  349. package/src/palettes/PaletteWinter.css +172 -0
  350. package/src/palettes/PaletteWinter.ts +16 -0
  351. package/src/palettes/index.css +12 -0
  352. package/src/palettes/index.ts +29 -0
  353. package/src/schemas/ActionSchema.ts +140 -0
  354. package/src/schemas/ArticleSchema.ts +35 -0
  355. package/src/schemas/ButtonSchema.ts +99 -0
  356. package/src/schemas/CardListGridSchema.ts +102 -0
  357. package/src/schemas/ChoiceInputFieldSchema.ts +89 -0
  358. package/src/schemas/CodeSchema.ts +88 -0
  359. package/src/schemas/ContentSchema.ts +128 -0
  360. package/src/schemas/CoverImageHeaderSchema.ts +208 -0
  361. package/src/schemas/FeatureCardSchema.ts +161 -0
  362. package/src/schemas/FeatureGridSchema.ts +87 -0
  363. package/src/schemas/FeatureItemSchema.ts +68 -0
  364. package/src/schemas/FooterItemSchema.ts +57 -0
  365. package/src/schemas/FooterSchema.ts +116 -0
  366. package/src/schemas/FooterSectionSchema.ts +50 -0
  367. package/src/schemas/FormBlockSchema.ts +102 -0
  368. package/src/schemas/HeaderActionSchema.ts +83 -0
  369. package/src/schemas/HeroBlockSchema.ts +149 -0
  370. package/src/schemas/HtmlInputFieldSchema.ts +88 -0
  371. package/src/schemas/MetadataItemSchema.ts +35 -0
  372. package/src/schemas/PageBannerHeaderSchema.ts +206 -0
  373. package/src/schemas/PaletteSwitcherSchema.ts +66 -0
  374. package/src/schemas/ProductCardSchema.ts +264 -0
  375. package/src/schemas/SafeSpanSchema.ts +36 -0
  376. package/src/schemas/SectionSchema.ts +106 -0
  377. package/src/schemas/SelectInputFieldSchema.ts +137 -0
  378. package/src/schemas/TextInputFieldSchema.ts +129 -0
  379. package/src/schemas/ThemeSwitcherSchema.ts +97 -0
  380. package/src/schemas/__tests__/builders.test.ts +313 -0
  381. package/src/schemas/index.ts +34 -0
  382. package/src/setupTests.js +60 -0
  383. package/src/stories/Article.stories.tsx +549 -0
  384. package/src/stories/Button.stories.tsx +498 -0
  385. package/src/stories/CardListGrid.stories.tsx +539 -0
  386. package/src/stories/ChoiceInputField.stories.tsx +591 -0
  387. package/src/stories/Code.stories.tsx +711 -0
  388. package/src/stories/Content.stories.tsx +463 -0
  389. package/src/stories/CoverImageHeader.stories.tsx +794 -0
  390. package/src/stories/DataBinding.advanced.stories.tsx +548 -0
  391. package/src/stories/DataBinding.stories.tsx +452 -0
  392. package/src/stories/DataProvider.stories.tsx +1361 -0
  393. package/src/stories/FeatureCard.stories.tsx +642 -0
  394. package/src/stories/FeatureGrid.stories.tsx +669 -0
  395. package/src/stories/Footer.stories.tsx +724 -0
  396. package/src/stories/FormBlock.stories.tsx +834 -0
  397. package/src/stories/HeroBlock.stories.tsx +442 -0
  398. package/src/stories/Html.stories.tsx +264 -0
  399. package/src/stories/HtmlInputField.stories.tsx +558 -0
  400. package/src/stories/Introduction.stories.tsx +721 -0
  401. package/src/stories/LayoutBlocks.stories.tsx +382 -0
  402. package/src/stories/LayoutSystem.stories.tsx +253 -0
  403. package/src/stories/Logo.stories.tsx +400 -0
  404. package/src/stories/Markdown.stories.tsx +349 -0
  405. package/src/stories/Page.stories.tsx +762 -0
  406. package/src/stories/PageBannerHeader.stories.tsx +949 -0
  407. package/src/stories/PaletteSwitcher.stories.tsx +156 -0
  408. package/src/stories/ProductCard.stories.tsx +504 -0
  409. package/src/stories/QwickApp.stories.tsx +461 -0
  410. package/src/stories/ResponsiveMenu.stories.tsx +299 -0
  411. package/src/stories/SafeSpan.stories.tsx +612 -0
  412. package/src/stories/Section.stories.tsx +613 -0
  413. package/src/stories/SelectInputField.stories.tsx +605 -0
  414. package/src/stories/TextInputField.stories.tsx +526 -0
  415. package/src/stories/ThemeSwitcher.stories.tsx +170 -0
  416. package/src/stories/form/FormComponents.stories.tsx +588 -0
  417. package/src/templates/TemplateResolver.ts +156 -0
  418. package/src/templates/index.ts +6 -0
  419. package/src/tests/ConsoleWarningTest.tsx +30 -0
  420. package/src/tests/StorageKeyTest.tsx +110 -0
  421. package/src/tests/ThemeStorageKeyTest.tsx +114 -0
  422. package/src/types/CacheProvider.ts +14 -0
  423. package/src/types/ContentProxy.ts +99 -0
  424. package/src/types/DataTypes.ts +196 -0
  425. package/src/types/TemplateProvider.ts +9 -0
  426. package/src/types/TemplateResolver.ts +26 -0
  427. package/src/types/index.ts +99 -0
  428. package/src/utils/__tests__/createDataDrivenComponent.test.tsx.disabled +193 -0
  429. package/src/utils/__tests__/htmlTransform.test.tsx +255 -0
  430. package/src/utils/breakpoints.ts +87 -0
  431. package/src/utils/customPaletteManager.js +214 -0
  432. package/src/utils/dimensions.ts +147 -0
  433. package/src/utils/htmlTransform.tsx +323 -0
  434. package/src/utils/index.ts +16 -0
  435. package/src/utils/logger.ts +28 -0
  436. package/src/utils/paletteUtils.ts +78 -0
  437. package/src/utils/persistenceUtils.ts +107 -0
  438. package/src/utils/reactUtils.tsx +37 -0
  439. package/src/utils/spacing.ts +155 -0
  440. package/src/utils/themePerformanceMonitor.js +113 -0
  441. package/src/utils/themeUtils.ts +67 -0
package/src/components/blocks/Article.tsx ADDED
@@ -0,0 +1,194 @@
1
+ /**
2
+ * Article - Transforms HTML content to use framework components with data binding support
3
+ *
4
+ * Automatically transforms:
5
+ * - <pre><code> blocks to Code components with syntax highlighting
6
+ * - Complex <code> elements to Code components
7
+ * - <section class="blog-section"> to Section components
8
+ * - Other framework-compatible elements
9
+ * - Preserves all other HTML structure and attributes
10
+ *
11
+ * Supports both traditional props and data binding through dataSource.
12
+ *
13
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
14
+ */
15
+
16
+ import { Box, Typography } from '@mui/material';
17
+ import { WithDataBinding, ModelProps } from '@qwickapps/schema';
18
+ import React from 'react';
19
+ import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
20
+ import ArticleModel from '../../schemas/ArticleSchema';
21
+ import Html from '../Html';
22
+ import { defaultArticleRules, TransformConfig } from '../../utils/htmlTransform';
23
+
24
+ type ArticleViewProps = ModelProps<ArticleModel>;
25
+
26
+ export interface ArticleProps extends ArticleViewProps, WithDataBinding {
27
+ }
28
+
29
+
30
+
31
+ // View component - handles the actual rendering
32
+ function ArticleView({
33
+ html = '',
34
+ skipHeader = false,
35
+ ...restProps
36
+ }: ArticleViewProps) {
37
+ const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
38
+
39
+ // Mark as QwickApp component
40
+ (ArticleView as any)[QWICKAPP_COMPONENT] = true;
41
+
42
+ // Return empty state if no HTML content
43
+ if (!html.trim()) {
44
+ return (
45
+ <Box
46
+ component="article"
47
+ {...htmlProps}
48
+ {...styleProps}
49
+ sx={{
50
+ maxWidth: '800px',
51
+ mx: 'auto',
52
+ p: 4,
53
+ textAlign: 'center',
54
+ opacity: 0.6,
55
+ ...styleProps.sx
56
+ }}
57
+ >
58
+ <Typography variant="h6" color="text.secondary">
59
+ No Content Available
60
+ </Typography>
61
+ <Typography variant="body2" color="text.secondary">
62
+ No HTML content provided for this article
63
+ </Typography>
64
+ </Box>
65
+ );
66
+ }
67
+
68
+ // Configure transformation for article content
69
+ const transformConfig: TransformConfig = {
70
+ rules: defaultArticleRules,
71
+ sanitize: true
72
+ };
73
+
74
+ return (
75
+ <Html
76
+ component="article"
77
+ transformConfig={transformConfig}
78
+ stripHeaders={skipHeader}
79
+ placeholder="No content available"
80
+ {...htmlProps}
81
+ {...styleProps}
82
+ {...otherProps}
83
+ sx={{
84
+ // Ensure proper width constraints for article content
85
+ maxWidth: '800px',
86
+ mx: 'auto',
87
+ // Header styling when headers are present
88
+ '& h1, & h2, & h3, & h4, & h5, & h6': {
89
+ maxWidth: '100%',
90
+ mb: 1.5,
91
+ mt: 2,
92
+ '&:first-of-type': {
93
+ mt: 0
94
+ }
95
+ },
96
+ '& h1': {
97
+ fontSize: '2.5rem',
98
+ fontWeight: 700,
99
+ lineHeight: 1.2
100
+ },
101
+ '& h2': {
102
+ fontSize: '2rem',
103
+ fontWeight: 600,
104
+ lineHeight: 1.3
105
+ },
106
+ '& h3': {
107
+ fontSize: '1.5rem',
108
+ fontWeight: 600,
109
+ lineHeight: 1.4
110
+ },
111
+ // Ensure paragraphs have proper spacing
112
+ '& p': {
113
+ mb: 1.5,
114
+ lineHeight: 1.6
115
+ },
116
+ // Ensure lists have proper spacing
117
+ '& ul, & ol': {
118
+ mb: 1.5,
119
+ pl: 3
120
+ },
121
+ ...styleProps.sx
122
+ }}
123
+ >
124
+ {html}
125
+ </Html>
126
+ );
127
+ }
128
+
129
+ // Main component with data binding support
130
+ function Article(props: ArticleProps) {
131
+ const { dataSource, bindingOptions, ...restProps } = props;
132
+
133
+ // If no dataSource, use traditional props
134
+ if (!dataSource) {
135
+ return <ArticleView {...restProps} />;
136
+ }
137
+
138
+ // Use data binding
139
+ const { dataSource: _source, loading, error, cached, ...articleProps } = useDataBinding<ArticleModel>(
140
+ dataSource,
141
+ restProps as Partial<ArticleModel>,
142
+ ArticleModel.getSchema(),
143
+ { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
144
+ );
145
+
146
+ // Show loading state
147
+ if (loading) {
148
+ return (
149
+ <Box
150
+ component="article"
151
+ sx={{
152
+ maxWidth: '800px',
153
+ mx: 'auto',
154
+ p: 4,
155
+ textAlign: 'center'
156
+ }}
157
+ >
158
+ <Typography variant="h6">Loading Article...</Typography>
159
+ <Typography variant="body2" color="text.secondary">
160
+ Loading
161
+ </Typography>
162
+ </Box>
163
+ );
164
+ }
165
+
166
+ if (error) {
167
+ console.error('Error loading article:', error);
168
+ if (process.env.NODE_ENV !== 'production') {
169
+ return (
170
+ <Box
171
+ component="article"
172
+ sx={{
173
+ maxWidth: '800px',
174
+ mx: 'auto',
175
+ p: 4,
176
+ textAlign: 'center'
177
+ }}
178
+ >
179
+ <Typography variant="h6">Error Loading Article</Typography>
180
+ <Typography variant="body2" color="text.secondary">
181
+ {error.message}
182
+ </Typography>
183
+ </Box>
184
+ );
185
+ }
186
+ return null;
187
+ }
188
+
189
+ console.log('Resolved props for Article:', articleProps);
190
+ return <ArticleView {...articleProps} />;
191
+ }
192
+
193
+ export default Article;
194
+ export { Article };
package/src/components/blocks/CardListGrid.tsx ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * CardListGrid - Generic grid layout for cards with data binding support
3
+ *
4
+ * A unified grid component that can display any type of card component
5
+ * with consistent spacing and layout. Works with ProductCard, FeatureCard,
6
+ * or any other card-like components. Supports both traditional props and
7
+ * data binding through dataSource.
8
+ *
9
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
10
+ */
11
+
12
+ import { WithDataBinding, ModelProps } from '@qwickapps/schema';
13
+ import React from 'react';
14
+ import { useBaseProps, useDataBinding } from '../../hooks';
15
+ import CardListGridModel from '../../schemas/CardListGridSchema';
16
+ import { GridLayout } from '../layout';
17
+ import { FeatureCard } from './FeatureCard';
18
+ import { ProductCard } from './ProductCard';
19
+
20
+ type CardListGridViewProps = ModelProps<CardListGridModel> & {
21
+ /** Render function for each item (traditional usage) */
22
+ renderItem?: (item: any, index: number) => React.ReactNode;
23
+ };
24
+
25
+ export interface CardListGridProps extends CardListGridViewProps, WithDataBinding {
26
+ }
27
+
28
+ // Default render function based on component type
29
+ const getDefaultRenderItem = (renderComponent: string = 'ProductCard', itemProps: Record<string, any> = {}) => {
30
+ return (item: any, index: number) => {
31
+ const key = item?.id || item?.key || index;
32
+
33
+ switch (renderComponent) {
34
+ case 'ProductCard':
35
+ return <ProductCard key={key} product={item} {...itemProps} />;
36
+ case 'FeatureCard':
37
+ return <FeatureCard key={key} feature={item} {...itemProps} />;
38
+ case 'Custom':
39
+ default:
40
+ // For custom components, assume the item contains the component data
41
+ return <div key={key}>{JSON.stringify(item)}</div>;
42
+ }
43
+ };
44
+ };
45
+
46
+ // View component - handles the actual rendering
47
+ function CardListGridView({
48
+ items = [],
49
+ renderItem,
50
+ renderComponent = 'ProductCard',
51
+ itemProps = {},
52
+ columns = 2,
53
+ spacing = 'large',
54
+ equalHeight = true,
55
+ ...restProps
56
+ }: CardListGridViewProps) {
57
+ const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
58
+
59
+ // Return null if no items and no render function
60
+ if (!items.length && !renderItem) {
61
+ return null;
62
+ }
63
+
64
+ // Use provided renderItem or create default based on renderComponent
65
+ const actualRenderItem = renderItem || getDefaultRenderItem(renderComponent, itemProps);
66
+
67
+ return (
68
+ <GridLayout
69
+ columns={columns}
70
+ spacing={spacing}
71
+ equalHeight={equalHeight}
72
+ {...htmlProps}
73
+ {...styleProps}
74
+ {...otherProps}
75
+ >
76
+ {items.map((item, index) => actualRenderItem(item, index))}
77
+ </GridLayout>
78
+ );
79
+ }
80
+
81
+ // Main component with data binding support
82
+ function CardListGrid(props: CardListGridProps) {
83
+ const { dataSource, bindingOptions, ...restProps } = props;
84
+
85
+ // If no dataSource, use traditional props
86
+ if (!dataSource) {
87
+ return <CardListGridView {...restProps} />;
88
+ }
89
+
90
+ // Use data binding
91
+ const result = useDataBinding<CardListGridModel>(
92
+ dataSource,
93
+ restProps as Partial<CardListGridModel>,
94
+ CardListGridModel.getSchema(),
95
+ { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
96
+ );
97
+ const { dataSource: _source, loading, error, cached, ...cardListGridProps } = result;
98
+
99
+ // Show loading state
100
+ if (loading) {
101
+ return (
102
+ <GridLayout
103
+ columns={restProps.columns || 2}
104
+ spacing={restProps.spacing || 'large'}
105
+ style={{ textAlign: 'center', padding: '2rem' }}
106
+ >
107
+ <div>Loading...</div>
108
+ </GridLayout>
109
+ );
110
+ }
111
+
112
+ if (error) {
113
+ console.error('Error loading card list grid:', error);
114
+ if (process.env.NODE_ENV !== 'production') {
115
+ return (
116
+ <GridLayout
117
+ columns={restProps.columns || 2}
118
+ spacing={restProps.spacing || 'large'}
119
+ style={{ textAlign: 'center', padding: '2rem' }}
120
+ >
121
+ <div>Error Loading Grid: {error.message}</div>
122
+ </GridLayout>
123
+ );
124
+ }
125
+ return null;
126
+ }
127
+
128
+ return <CardListGridView {...cardListGridProps} />;
129
+ }
130
+
131
+ export default CardListGrid;
132
+ export { CardListGrid };
package/src/components/blocks/Code.tsx ADDED
@@ -0,0 +1,313 @@
1
+ /**
2
+ * Code - Syntax-highlighted code display component
3
+ *
4
+ * Provides consistent code block rendering with:
5
+ * - Syntax highlighting support
6
+ * - Copy to clipboard functionality
7
+ * - Light/dark theme support
8
+ * - Multiple language support
9
+ * - Responsive design
10
+ *
11
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
12
+ */
13
+
14
+ import {
15
+ Check as CheckIcon,
16
+ ContentCopy as CopyIcon
17
+ } from '@mui/icons-material';
18
+ import {
19
+ Alert,
20
+ Box,
21
+ IconButton,
22
+ Paper,
23
+ Snackbar,
24
+ Tooltip,
25
+ Typography,
26
+ useTheme
27
+ } from '@mui/material';
28
+ import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
29
+ import { useState } from 'react';
30
+ import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
31
+ import CodeModel from '../../schemas/CodeSchema';
32
+
33
+ type CodeViewProps = ModelProps<CodeModel>;
34
+
35
+ export interface CodeProps extends CodeViewProps, WithDataBinding {}
36
+
37
+ // View component - handles the actual rendering
38
+ function CodeView({
39
+ children = '',
40
+ language = 'text',
41
+ showCopy = true,
42
+ showLineNumbers = false,
43
+ title,
44
+ wrapLines = false,
45
+ codeBackground,
46
+ ...restProps
47
+ }: CodeViewProps) {
48
+ const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
49
+
50
+ // Mark as QwickApp component
51
+ (CodeView as any)[QWICKAPP_COMPONENT] = true;
52
+
53
+
54
+ const theme = useTheme();
55
+ const [copied, setCopied] = useState(false);
56
+ const [showCopiedAlert, setShowCopiedAlert] = useState(false);
57
+
58
+ const codeMaxHeight = styleProps.sx?.maxHeight || 400;
59
+
60
+ // Return empty state if no code content
61
+ if (!children.trim()) {
62
+ return (
63
+ <Paper
64
+ {...htmlProps}
65
+ {...styleProps}
66
+ variant="outlined"
67
+ sx={{
68
+ p: 3,
69
+ textAlign: 'center',
70
+ opacity: 0.6,
71
+ ...styleProps.sx
72
+ }}
73
+ >
74
+ <Typography variant="body2" color="text.secondary">
75
+ No code content provided
76
+ </Typography>
77
+ </Paper>
78
+ );
79
+ }
80
+
81
+ const handleCopy = async () => {
82
+ try {
83
+ await navigator.clipboard.writeText(children);
84
+ setCopied(true);
85
+ setShowCopiedAlert(true);
86
+ setTimeout(() => setCopied(false), 2000);
87
+ } catch (err) {
88
+ console.error('Failed to copy code:', err);
89
+ }
90
+ };
91
+
92
+ const codeLines = children.split('\n');
93
+
94
+ const getBackgroundColor = () => {
95
+ if (codeBackground) return codeBackground;
96
+ return theme.palette.grey[theme.palette.mode === 'dark' ? 900 : 50];
97
+ };
98
+
99
+ const getHeaderBackgroundColor = () => {
100
+ return theme.palette.grey[theme.palette.mode === 'dark' ? 800 : 200];
101
+ };
102
+
103
+ const getTextColor = () => {
104
+ return theme.palette.text.primary;
105
+ };
106
+
107
+ const getBorderColor = () => {
108
+ return theme.palette.divider;
109
+ };
110
+
111
+ return (
112
+ <Paper
113
+ {...htmlProps}
114
+ {...styleProps}
115
+ {...otherProps}
116
+ variant="outlined"
117
+ sx={{
118
+ backgroundColor: getBackgroundColor(),
119
+ border: `1px solid ${getBorderColor()}`,
120
+ borderRadius: 1,
121
+ overflow: 'hidden',
122
+ position: 'relative',
123
+ ...styleProps.sx
124
+ }}
125
+ >
126
+ {/* Header with title and copy button */}
127
+ {(title || showCopy) && (
128
+ <Box
129
+ sx={{
130
+ display: 'flex',
131
+ justifyContent: 'space-between',
132
+ alignItems: 'center',
133
+ px: 2,
134
+ py: 1,
135
+ backgroundColor: getHeaderBackgroundColor(),
136
+ borderBottom: `1px solid ${getBorderColor()}`,
137
+ }}
138
+ >
139
+ {title && (
140
+ <Typography
141
+ variant="body2"
142
+ sx={{
143
+ fontFamily: 'Monaco, Consolas, "Ubuntu Mono", monospace',
144
+ color: getTextColor(),
145
+ opacity: 0.8,
146
+ }}
147
+ >
148
+ {title}
149
+ </Typography>
150
+ )}
151
+
152
+ <Box sx={{ ml: 'auto' }}>
153
+ {showCopy && (
154
+ <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
155
+ <IconButton
156
+ size="small"
157
+ onClick={handleCopy}
158
+ sx={{
159
+ color: getTextColor(),
160
+ opacity: 0.7,
161
+ '&:hover': {
162
+ opacity: 1,
163
+ backgroundColor: theme.palette.action.hover,
164
+ },
165
+ }}
166
+ >
167
+ {copied ? (
168
+ <CheckIcon fontSize="small" />
169
+ ) : (
170
+ <CopyIcon fontSize="small" />
171
+ )}
172
+ </IconButton>
173
+ </Tooltip>
174
+ )}
175
+ </Box>
176
+ </Box>
177
+ )}
178
+
179
+ {/* Code content */}
180
+ <Box
181
+ sx={{
182
+ maxHeight: codeMaxHeight,
183
+ overflow: 'auto',
184
+ position: 'relative',
185
+ }}
186
+ >
187
+ <Box
188
+ component="pre"
189
+ sx={{
190
+ margin: 0,
191
+ padding: 2,
192
+ fontFamily: 'Monaco, Consolas, "Ubuntu Mono", monospace',
193
+ fontSize: '0.875rem',
194
+ lineHeight: 1.5,
195
+ color: getTextColor(),
196
+ backgroundColor: 'transparent',
197
+ overflow: wrapLines ? 'visible' : 'auto',
198
+ whiteSpace: wrapLines ? 'pre-wrap' : 'pre',
199
+ wordBreak: wrapLines ? 'break-word' : 'normal',
200
+ }}
201
+ >
202
+ {showLineNumbers ? (
203
+ <Box sx={{ display: 'flex' }}>
204
+ {/* Line numbers */}
205
+ <Box
206
+ sx={{
207
+ pr: 2,
208
+ mr: 2,
209
+ borderRight: `1px solid ${getBorderColor()}`,
210
+ color: getTextColor(),
211
+ opacity: 0.5,
212
+ userSelect: 'none',
213
+ minWidth: `${String(codeLines.length).length + 1}ch`,
214
+ }}
215
+ >
216
+ {codeLines.map((_, index) => (
217
+ <Box key={index} sx={{ textAlign: 'right' }}>
218
+ {index + 1}
219
+ </Box>
220
+ ))}
221
+ </Box>
222
+
223
+ {/* Code content */}
224
+ <Box sx={{ flex: 1, minWidth: 0 }}>
225
+ <code>{children}</code>
226
+ </Box>
227
+ </Box>
228
+ ) : (
229
+ <code>{children}</code>
230
+ )}
231
+ </Box>
232
+ </Box>
233
+
234
+ {/* Copy success snackbar */}
235
+ <Snackbar
236
+ open={showCopiedAlert}
237
+ autoHideDuration={2000}
238
+ onClose={() => setShowCopiedAlert(false)}
239
+ anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
240
+ >
241
+ <Alert onClose={() => setShowCopiedAlert(false)} severity="success" variant="filled">
242
+ Code copied to clipboard!
243
+ </Alert>
244
+ </Snackbar>
245
+ </Paper>
246
+ );
247
+ }
248
+
249
+ // Main component with data binding support
250
+ function Code(props: CodeProps) {
251
+ const { dataSource, bindingOptions, ...restProps } = props;
252
+
253
+ // If no dataSource, use traditional props
254
+ if (!dataSource) {
255
+ return <CodeView {...restProps} />;
256
+ }
257
+
258
+ // Use data binding
259
+ const { dataSource: _source, loading, error, cached, ...codeProps } = useDataBinding<CodeModel>(
260
+ dataSource,
261
+ restProps as Partial<CodeModel>,
262
+ CodeModel.getSchema(),
263
+ { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
264
+ );
265
+
266
+ // Show loading state
267
+ if (loading) {
268
+ return (
269
+ <Paper
270
+ variant="outlined"
271
+ sx={{
272
+ p: 3,
273
+ textAlign: 'center'
274
+ }}
275
+ >
276
+ <Typography variant="body2">Loading Code...</Typography>
277
+ <Typography variant="caption" color="text.secondary">
278
+ Loading
279
+ </Typography>
280
+ </Paper>
281
+ );
282
+ }
283
+
284
+ if (error) {
285
+ console.error('Error loading code:', error);
286
+ if (process.env.NODE_ENV !== 'production') {
287
+ return (
288
+ <Paper
289
+ variant="outlined"
290
+ sx={{
291
+ p: 3,
292
+ textAlign: 'center',
293
+ borderColor: 'error.main'
294
+ }}
295
+ >
296
+ <Typography variant="body2" color="error">
297
+ Error Loading Code
298
+ </Typography>
299
+ <Typography variant="caption" color="text.secondary">
300
+ {error.message}
301
+ </Typography>
302
+ </Paper>
303
+ );
304
+ }
305
+ return null;
306
+ }
307
+
308
+ console.log('Resolved props for Code:', codeProps);
309
+ return <CodeView {...codeProps} />;
310
+ }
311
+
312
+ export default Code;
313
+ export { Code };