@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/stories/Code.stories.tsx ADDED
@@ -0,0 +1,711 @@
1
+ /**
2
+ * Code Component Stories - Syntax-highlighted code display with data binding support
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ */
6
+
7
+ import { Box, Divider, Typography } from '@mui/material';
8
+ import { JsonDataProvider } from '@qwickapps/schema';
9
+ import type { Meta, StoryObj } from '@storybook/react';
10
+ import { Code } from '../components/blocks';
11
+ import QwickApp from '../components/QwickApp';
12
+
13
+ // Sample code content for different languages
14
+ const sampleJavaScript = `function calculateFibonacci(n) {
15
+ if (n <= 1) return n;
16
+
17
+ let prev = 0;
18
+ let curr = 1;
19
+
20
+ for (let i = 2; i <= n; i++) {
21
+ const temp = curr;
22
+ curr = prev + curr;
23
+ prev = temp;
24
+ }
25
+
26
+ return curr;
27
+ }
28
+
29
+ // Usage example
30
+ console.log(calculateFibonacci(10)); // Output: 55`;
31
+
32
+ const sampleTypeScript = `interface User {
33
+ id: string;
34
+ name: string;
35
+ email: string;
36
+ preferences?: UserPreferences;
37
+ }
38
+
39
+ interface UserPreferences {
40
+ theme: 'light' | 'dark';
41
+ notifications: boolean;
42
+ language: string;
43
+ }
44
+
45
+ class UserManager {
46
+ private users: Map<string, User> = new Map();
47
+
48
+ addUser(user: User): void {
49
+ this.users.set(user.id, user);
50
+ }
51
+
52
+ getUser(id: string): User | undefined {
53
+ return this.users.get(id);
54
+ }
55
+
56
+ updatePreferences(id: string, preferences: UserPreferences): boolean {
57
+ const user = this.users.get(id);
58
+ if (!user) return false;
59
+
60
+ user.preferences = { ...user.preferences, ...preferences };
61
+ return true;
62
+ }
63
+ }`;
64
+
65
+ const samplePython = `import asyncio
66
+ import aiohttp
67
+ from typing import List, Dict, Optional
68
+
69
+ class APIClient:
70
+ def __init__(self, base_url: str, api_key: str):
71
+ self.base_url = base_url
72
+ self.api_key = api_key
73
+ self.session: Optional[aiohttp.ClientSession] = None
74
+
75
+ async def __aenter__(self):
76
+ self.session = aiohttp.ClientSession(
77
+ headers={'Authorization': f'Bearer {self.api_key}'}
78
+ )
79
+ return self
80
+
81
+ async def __aexit__(self, exc_type, exc_val, exc_tb):
82
+ if self.session:
83
+ await self.session.close()
84
+
85
+ async def fetch_data(self, endpoint: str) -> Dict:
86
+ if not self.session:
87
+ raise RuntimeError("Client not initialized. Use 'async with' context.")
88
+
89
+ async with self.session.get(f"{self.base_url}/{endpoint}") as response:
90
+ response.raise_for_status()
91
+ return await response.json()
92
+
93
+ # Usage
94
+ async def main():
95
+ async with APIClient("https://api.example.com", "your-api-key") as client:
96
+ data = await client.fetch_data("users")
97
+ print(f"Fetched {len(data)} users")
98
+
99
+ if __name__ == "__main__":
100
+ asyncio.run(main())`;
101
+
102
+ const sampleHTML = `<!DOCTYPE html>
103
+ <html lang="en">
104
+ <head>
105
+ <meta charset="UTF-8">
106
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
107
+ <title>QwickApps React Framework Demo</title>
108
+ <style>
109
+ .hero-section {
110
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
111
+ color: white;
112
+ padding: 4rem 2rem;
113
+ text-align: center;
114
+ }
115
+
116
+ .feature-grid {
117
+ display: grid;
118
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
119
+ gap: 2rem;
120
+ padding: 2rem;
121
+ }
122
+
123
+ .feature-card {
124
+ background: #f8f9fa;
125
+ border-radius: 8px;
126
+ padding: 1.5rem;
127
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
128
+ }
129
+ </style>
130
+ </head>
131
+ <body>
132
+ <section class="hero-section">
133
+ <h1>Welcome to QwickApps</h1>
134
+ <p>Build modern web applications with confidence</p>
135
+ </section>
136
+
137
+ <div class="feature-grid">
138
+ <div class="feature-card">
139
+ <h3>🚀 Fast Development</h3>
140
+ <p>AI-powered component generation</p>
141
+ </div>
142
+ <div class="feature-card">
143
+ <h3>🎨 Beautiful Design</h3>
144
+ <p>Material-UI integration</p>
145
+ </div>
146
+ <div class="feature-card">
147
+ <h3>📱 Responsive</h3>
148
+ <p>Mobile-first approach</p>
149
+ </div>
150
+ </div>
151
+ </body>
152
+ </html>`;
153
+
154
+ const sampleJSON = `{
155
+ "name": "qwickapps-react-framework",
156
+ "version": "1.1.0",
157
+ "description": "AI-driven React framework for modern web applications",
158
+ "main": "dist/index.js",
159
+ "module": "dist/index.esm.js",
160
+ "types": "dist/index.d.ts",
161
+ "scripts": {
162
+ "build": "rollup -c",
163
+ "dev": "rollup -c -w",
164
+ "test": "jest",
165
+ "test:watch": "jest --watch",
166
+ "lint": "eslint src --ext .ts,.tsx",
167
+ "type-check": "tsc --noEmit",
168
+ "storybook": "start-storybook -p 6006",
169
+ "build-storybook": "build-storybook"
170
+ },
171
+ "dependencies": {
172
+ "@mui/material": "^5.15.0",
173
+ "@mui/icons-material": "^5.15.0",
174
+ "@emotion/react": "^11.11.0",
175
+ "@emotion/styled": "^11.11.0",
176
+ "react": "^18.2.0",
177
+ "react-dom": "^18.2.0"
178
+ },
179
+ "devDependencies": {
180
+ "@types/react": "^18.2.0",
181
+ "@types/react-dom": "^18.2.0",
182
+ "typescript": "^5.0.0",
183
+ "@rollup/plugin-typescript": "^11.1.0",
184
+ "rollup": "^3.29.0"
185
+ },
186
+ "peerDependencies": {
187
+ "react": ">=18.0.0",
188
+ "react-dom": ">=18.0.0"
189
+ }
190
+ }`;
191
+
192
+ const sampleCSS = `.qwickapp-theme {
193
+ --primary-color: #1976d2;
194
+ --secondary-color: #dc004e;
195
+ --background-color: #ffffff;
196
+ --text-color: #333333;
197
+ --border-radius: 8px;
198
+ --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
199
+ }
200
+
201
+ .qwickapp-card {
202
+ background: var(--background-color);
203
+ border-radius: var(--border-radius);
204
+ box-shadow: var(--shadow);
205
+ padding: 1.5rem;
206
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
207
+ }
208
+
209
+ .qwickapp-card:hover {
210
+ transform: translateY(-2px);
211
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
212
+ }
213
+
214
+ .qwickapp-button {
215
+ background: var(--primary-color);
216
+ color: white;
217
+ border: none;
218
+ border-radius: calc(var(--border-radius) / 2);
219
+ padding: 0.75rem 1.5rem;
220
+ font-weight: 500;
221
+ cursor: pointer;
222
+ transition: background-color 0.2s ease;
223
+ }
224
+
225
+ .qwickapp-button:hover {
226
+ background: #1565c0;
227
+ }
228
+
229
+ .qwickapp-button--secondary {
230
+ background: var(--secondary-color);
231
+ }
232
+
233
+ .qwickapp-button--secondary:hover {
234
+ background: #c51162;
235
+ }
236
+
237
+ @media (max-width: 768px) {
238
+ .qwickapp-card {
239
+ padding: 1rem;
240
+ }
241
+
242
+ .qwickapp-button {
243
+ width: 100%;
244
+ }
245
+ }`;
246
+
247
+ // Sample CMS data for data binding stories
248
+ const sampleCmsData = {
249
+ 'codes': {
250
+ 'javascript-fibonacci': {
251
+ children: sampleJavaScript,
252
+ language: 'javascript',
253
+ title: 'fibonacci.js',
254
+ showCopy: true,
255
+ showLineNumbers: true
256
+ },
257
+ 'typescript-user-manager': {
258
+ children: sampleTypeScript,
259
+ language: 'typescript',
260
+ title: 'UserManager.ts',
261
+ showCopy: true,
262
+ showLineNumbers: false
263
+ },
264
+ 'python-api-client': {
265
+ children: samplePython,
266
+ language: 'python',
267
+ title: 'api_client.py',
268
+ showCopy: true,
269
+ showLineNumbers: true,
270
+ wrapLines: false
271
+ },
272
+ 'html-demo': {
273
+ children: sampleHTML,
274
+ language: 'html',
275
+ title: 'demo.html',
276
+ showCopy: true,
277
+ showLineNumbers: false,
278
+ wrapLines: true
279
+ },
280
+ 'package-json': {
281
+ children: sampleJSON,
282
+ language: 'json',
283
+ title: 'package.json',
284
+ showCopy: false,
285
+ showLineNumbers: true
286
+ },
287
+ 'css-theme': {
288
+ children: sampleCSS,
289
+ language: 'css',
290
+ title: 'theme.css',
291
+ showCopy: true,
292
+ showLineNumbers: false,
293
+ wrapLines: true
294
+ }
295
+ }
296
+ };
297
+
298
+ const dataProvider = new JsonDataProvider({ data: sampleCmsData });
299
+
300
+ const meta = {
301
+ title: 'Components/Code',
302
+ component: Code,
303
+ parameters: {
304
+ layout: 'padded',
305
+ docs: {
306
+ description: {
307
+ component: `Code is a syntax-highlighted code display component that supports multiple programming languages, copy functionality, and line numbers.
308
+
309
+ **Key Features:**
310
+ - **Syntax Highlighting**: Support for 20+ programming languages
311
+ - **Copy to Clipboard**: One-click code copying with visual feedback
312
+ - **Line Numbers**: Optional line number display for easier reference
313
+ - **Custom Styling**: Configurable background colors and themes
314
+ - **Responsive Design**: Adapts to different screen sizes with optional line wrapping
315
+ - **Data Binding**: Full CMS integration through dataSource prop
316
+ - **Title Support**: Display filenames or descriptions above code blocks
317
+ - **Overflow Handling**: Scrollable content with maximum height constraints
318
+ - **Theme Integration**: Automatic light/dark mode support
319
+
320
+ **Perfect For:**
321
+ - Technical documentation and tutorials
322
+ - Code examples and snippets
323
+ - API documentation with sample requests
324
+ - Configuration file displays
325
+ - Educational content with code samples
326
+ - Blog posts with code demonstrations`,
327
+ },
328
+ },
329
+ },
330
+ tags: ['autodocs'],
331
+ } satisfies Meta<typeof Code>;
332
+
333
+ export default meta;
334
+ type Story = StoryObj<typeof Code>;
335
+
336
+ // Traditional Usage Examples
337
+ export const JavaScriptExample: Story = {
338
+ render: () => (
339
+ <QwickApp appId="code-javascript" appName='JavaScript Code Example'>
340
+ <Code language="javascript" title="fibonacci.js" showLineNumbers={true}>
341
+ {sampleJavaScript}
342
+ </Code>
343
+ </QwickApp>
344
+ ),
345
+ parameters: {
346
+ docs: {
347
+ description: {
348
+ story: 'JavaScript code with syntax highlighting, line numbers, and copy functionality.',
349
+ },
350
+ },
351
+ },
352
+ };
353
+
354
+ export const TypeScriptExample: Story = {
355
+ render: () => (
356
+ <QwickApp appId="code-typescript" appName='TypeScript Code Example'>
357
+ <Code language="typescript" title="UserManager.ts">
358
+ {sampleTypeScript}
359
+ </Code>
360
+ </QwickApp>
361
+ ),
362
+ parameters: {
363
+ docs: {
364
+ description: {
365
+ story: 'TypeScript code with interface definitions and class implementation.',
366
+ },
367
+ },
368
+ },
369
+ };
370
+
371
+ export const PythonExample: Story = {
372
+ render: () => (
373
+ <QwickApp appId="code-python" appName='Python Code Example'>
374
+ <Code language="python" title="api_client.py" showLineNumbers={true}>
375
+ {samplePython}
376
+ </Code>
377
+ </QwickApp>
378
+ ),
379
+ parameters: {
380
+ docs: {
381
+ description: {
382
+ story: 'Python async code with type hints and context managers.',
383
+ },
384
+ },
385
+ },
386
+ };
387
+
388
+ export const LanguageVariations: Story = {
389
+ render: () => (
390
+ <QwickApp appId="code-languages" appName='Multiple Programming Languages'>
391
+ <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
392
+
393
+ <Box>
394
+ <Typography variant="h6" gutterBottom>HTML Document</Typography>
395
+ <Code language="html" title="demo.html" wrapLines={true}>
396
+ {sampleHTML}
397
+ </Code>
398
+ </Box>
399
+
400
+ <Box>
401
+ <Typography variant="h6" gutterBottom>JSON Configuration</Typography>
402
+ <Code language="json" title="package.json" showCopy={false} showLineNumbers={true}>
403
+ {sampleJSON}
404
+ </Code>
405
+ </Box>
406
+
407
+ <Box>
408
+ <Typography variant="h6" gutterBottom>CSS Styling</Typography>
409
+ <Code language="css" title="theme.css" wrapLines={true}>
410
+ {sampleCSS}
411
+ </Code>
412
+ </Box>
413
+
414
+ </Box>
415
+ </QwickApp>
416
+ ),
417
+ parameters: {
418
+ docs: {
419
+ description: {
420
+ story: 'Different programming languages demonstrating syntax highlighting capabilities.',
421
+ },
422
+ },
423
+ },
424
+ };
425
+
426
+ export const CustomizationOptions: Story = {
427
+ render: () => (
428
+ <QwickApp appId="code-customization" appName='Code Customization Options'>
429
+ <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
430
+
431
+ <Box>
432
+ <Typography variant="h6" gutterBottom>With Line Numbers</Typography>
433
+ <Code language="javascript" showLineNumbers={true} title="with-line-numbers.js">
434
+ {`console.log('Line 1');
435
+ console.log('Line 2');
436
+ console.log('Line 3');`}
437
+ </Code>
438
+ </Box>
439
+
440
+ <Box>
441
+ <Typography variant="h6" gutterBottom>No Copy Button</Typography>
442
+ <Code language="javascript" showCopy={false} title="no-copy.js">
443
+ {`// This code block has no copy button
444
+ const message = "Copy disabled for this example";`}
445
+ </Code>
446
+ </Box>
447
+
448
+ <Box>
449
+ <Typography variant="h6" gutterBottom>Custom Background</Typography>
450
+ <Code
451
+ language="javascript"
452
+ title="custom-bg.js"
453
+ codeBackground="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
454
+ >
455
+ {`// Custom gradient background
456
+ const rainbow = "🌈";`}
457
+ </Code>
458
+ </Box>
459
+
460
+ <Box>
461
+ <Typography variant="h6" gutterBottom>Line Wrapping Enabled</Typography>
462
+ <Code language="javascript" wrapLines={true} title="long-lines.js">
463
+ {`const veryLongVariableName = "This is a very long string that would normally overflow horizontally, but with wrapLines enabled, it will wrap to the next line instead of requiring horizontal scrolling.";`}
464
+ </Code>
465
+ </Box>
466
+
467
+ </Box>
468
+ </QwickApp>
469
+ ),
470
+ parameters: {
471
+ docs: {
472
+ description: {
473
+ story: 'Various customization options including line numbers, copy controls, backgrounds, and line wrapping.',
474
+ },
475
+ },
476
+ },
477
+ };
478
+
479
+ export const EmptyAndErrorStates: Story = {
480
+ render: () => (
481
+ <QwickApp appId="code-states" appName='Code Component States'>
482
+ <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
483
+
484
+ <Box>
485
+ <Typography variant="h6" gutterBottom>Empty Content</Typography>
486
+ <Code title="empty.js">
487
+
488
+ </Code>
489
+ </Box>
490
+
491
+ <Box>
492
+ <Typography variant="h6" gutterBottom>Whitespace Only</Typography>
493
+ <Code title="whitespace.js">
494
+ {`
495
+
496
+ `}
497
+ </Code>
498
+ </Box>
499
+
500
+ <Box>
501
+ <Typography variant="h6" gutterBottom>Valid Content</Typography>
502
+ <Code language="javascript" title="valid.js">
503
+ {`console.log("This is valid content");`}
504
+ </Code>
505
+ </Box>
506
+
507
+ </Box>
508
+ </QwickApp>
509
+ ),
510
+ parameters: {
511
+ docs: {
512
+ description: {
513
+ story: 'Demonstrates empty state handling and graceful fallbacks.',
514
+ },
515
+ },
516
+ },
517
+ };
518
+
519
+ // Data Binding Examples
520
+ export const DataBindingBasic: Story = {
521
+ render: () => (
522
+ <QwickApp appId="code-data-binding" appName='Code Data Binding' dataSource={{ dataProvider }}>
523
+ <Box>
524
+
525
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
526
+ <Typography variant="h5" gutterBottom>📋 Data-Driven Code Display</Typography>
527
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
528
+ Code component can be completely driven by CMS data, automatically configuring language, styling, and functionality.
529
+ </Typography>
530
+
531
+ <Code title="Usage" language="tsx">{`<Code dataSource="codes.javascript-fibonacci" />`}</Code>
532
+
533
+ <Code title="Data Structure" language="json">{JSON.stringify(sampleCmsData.codes['javascript-fibonacci'], null, 2)}</Code>
534
+ </Box>
535
+
536
+ <Divider sx={{ my: 4 }} />
537
+
538
+ <Box>
539
+ <Typography variant="h4" gutterBottom>Dynamic JavaScript Example</Typography>
540
+ <Code dataSource="codes.javascript-fibonacci" />
541
+ </Box>
542
+
543
+ </Box>
544
+ </QwickApp>
545
+ ),
546
+ parameters: {
547
+ docs: {
548
+ description: {
549
+ story: 'Code component with data binding - all configuration resolved from CMS data through dataSource.',
550
+ },
551
+ },
552
+ },
553
+ };
554
+
555
+ export const DataBindingAdvanced: Story = {
556
+ render: () => (
557
+ <QwickApp appId="code-data-advanced" appName='Advanced Code Data Binding' dataSource={{ dataProvider }}>
558
+ <Box>
559
+
560
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
561
+ <Typography variant="h5" gutterBottom>🎯 Multi-Language Code Examples</Typography>
562
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
563
+ Different Code instances can display various programming languages from separate data sources.
564
+ </Typography>
565
+ </Box>
566
+
567
+ {/* TypeScript Example */}
568
+ <Box sx={{ mb: 4 }}>
569
+ <Typography variant="h4" gutterBottom>TypeScript User Management</Typography>
570
+ <Code dataSource="codes.typescript-user-manager" />
571
+ </Box>
572
+
573
+ {/* Python Example */}
574
+ <Box sx={{ mb: 4 }}>
575
+ <Typography variant="h4" gutterBottom>Python Async API Client</Typography>
576
+ <Code dataSource="codes.python-api-client" />
577
+ </Box>
578
+
579
+ {/* HTML Example */}
580
+ <Box sx={{ mb: 4 }}>
581
+ <Typography variant="h4" gutterBottom>HTML Demo Page</Typography>
582
+ <Code dataSource="codes.html-demo" />
583
+ </Box>
584
+
585
+ </Box>
586
+ </QwickApp>
587
+ ),
588
+ parameters: {
589
+ docs: {
590
+ description: {
591
+ story: 'Advanced data binding with multiple programming languages showcasing different syntax highlighting.',
592
+ },
593
+ },
594
+ },
595
+ };
596
+
597
+ export const DataBindingWithFallback: Story = {
598
+ render: () => (
599
+ <QwickApp appId="code-fallback" appName='Code Data Binding with Fallback' dataSource={{ dataProvider }}>
600
+ <Box>
601
+
602
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
603
+ <Typography variant="h5" gutterBottom>🛡️ Fallback Support</Typography>
604
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
605
+ Code component gracefully handles missing data sources with fallback props and content.
606
+ </Typography>
607
+
608
+ <Code title="Fallback Usage" language="tsx">{`<Code
609
+ dataSource="codes.nonexistent"
610
+ title="Fallback Example"
611
+ language="javascript"
612
+ >
613
+ {\`// This is fallback content
614
+ console.log("Data source not found");\`}
615
+ </Code>`}</Code>
616
+ </Box>
617
+
618
+ <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
619
+ <Box>
620
+ <Typography variant="h6" gutterBottom>Missing Data Source (Fallback)</Typography>
621
+ <Code
622
+ dataSource="codes.nonexistent"
623
+ title="fallback-example.js"
624
+ language="javascript"
625
+ >
626
+ {`// This is fallback content when data source is missing
627
+ console.log("Using fallback props and content");
628
+
629
+ function handleMissingData() {
630
+ return "Graceful degradation in action";
631
+ }`}
632
+ </Code>
633
+ </Box>
634
+ <Box>
635
+ <Typography variant="h6" gutterBottom>Valid Data Source</Typography>
636
+ <Code dataSource="codes.css-theme" />
637
+ </Box>
638
+ </Box>
639
+
640
+ </Box>
641
+ </QwickApp>
642
+ ),
643
+ parameters: {
644
+ docs: {
645
+ description: {
646
+ story: 'Code component with fallback props when dataSource is missing or unavailable.',
647
+ },
648
+ },
649
+ },
650
+ };
651
+
652
+ export const RealWorldExample: Story = {
653
+ render: () => (
654
+ <QwickApp appId="code-real-world" appName='Real World Code Examples' dataSource={{ dataProvider }}>
655
+ <Box>
656
+
657
+ {/* Introduction */}
658
+ <Box sx={{ mb: 6, textAlign: 'center' }}>
659
+ <Typography variant="h3" gutterBottom>QwickApps React Framework Examples</Typography>
660
+ <Typography variant="h6" sx={{ mb: 4, opacity: 0.7 }}>
661
+ Real-world code examples demonstrating framework capabilities
662
+ </Typography>
663
+ </Box>
664
+
665
+ {/* Backend Code */}
666
+ <Box sx={{ mb: 6 }}>
667
+ <Typography variant="h4" gutterBottom>🐍 Backend API Development</Typography>
668
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
669
+ Async Python API client with proper error handling and type safety
670
+ </Typography>
671
+ <Code dataSource="codes.python-api-client" />
672
+ </Box>
673
+
674
+ {/* Frontend Code */}
675
+ <Box sx={{ mb: 6 }}>
676
+ <Typography variant="h4" gutterBottom>⚛️ Frontend Component Logic</Typography>
677
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
678
+ TypeScript user management with interfaces and class-based architecture
679
+ </Typography>
680
+ <Code dataSource="codes.typescript-user-manager" />
681
+ </Box>
682
+
683
+ {/* Configuration */}
684
+ <Box sx={{ mb: 6 }}>
685
+ <Typography variant="h4" gutterBottom>📦 Project Configuration</Typography>
686
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
687
+ Complete package.json setup for modern React development
688
+ </Typography>
689
+ <Code dataSource="codes.package-json" />
690
+ </Box>
691
+
692
+ {/* Styling */}
693
+ <Box>
694
+ <Typography variant="h4" gutterBottom>🎨 Theme & Styling</Typography>
695
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
696
+ CSS custom properties for consistent design system
697
+ </Typography>
698
+ <Code dataSource="codes.css-theme" />
699
+ </Box>
700
+
701
+ </Box>
702
+ </QwickApp>
703
+ ),
704
+ parameters: {
705
+ docs: {
706
+ description: {
707
+ story: 'Real-world example combining multiple Code instances in a complete development documentation layout.',
708
+ },
709
+ },
710
+ },
711
+ };