flet-box 1.1.0 → 1.1.2

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 (135) hide show
  1. package/README.md +16 -12
  2. package/bin/commands/checkUi.js +276 -45
  3. package/bin/commands/create.js +8 -1
  4. package/bin/commands/createBundle.js +18 -6
  5. package/bin/commands/createScreen.js +1 -1
  6. package/bin/commands/runBundle.js +1 -1
  7. package/bin/utils/bundleConfig.js +47 -3
  8. package/bin/utils/colors.js +0 -8
  9. package/bin/utils/helpers.js +0 -5
  10. package/bin/utils/images/jpeg.js +2 -3
  11. package/bin/utils/templates.js +101 -85
  12. package/docs/README.md +24 -1
  13. package/docs/cli/README.md +51 -10
  14. package/docs/guides/README.md +5 -2
  15. package/docs/guides/accessibility.md +282 -0
  16. package/docs/guides/clean-ui.md +53 -8
  17. package/docs/guides/first-app.md +6 -7
  18. package/docs/guides/minification-and-protection.md +1 -1
  19. package/docs/guides/mobile-and-platforms.md +51 -0
  20. package/docs/guides/online-updates.md +18 -6
  21. package/docs/guides/utilities.md +116 -4
  22. package/docs/guides/widget-structure.md +30 -0
  23. package/docs/tools/README.md +1 -1
  24. package/docs/tools/animation.md +134 -11
  25. package/docs/tools/device.md +75 -3
  26. package/docs/tools/text-and-time.md +116 -6
  27. package/docs/widget/Accordion.md +2 -0
  28. package/docs/widget/AnimatedBox.md +46 -20
  29. package/docs/widget/AnimatedText.md +13 -7
  30. package/docs/widget/Badge.md +1 -0
  31. package/docs/widget/COMMON_PROPS.md +26 -3
  32. package/docs/widget/Chart.md +1 -0
  33. package/docs/widget/Checkbox.md +7 -1
  34. package/docs/widget/CircularChart.md +2 -0
  35. package/docs/widget/Drawer.md +1 -0
  36. package/docs/widget/GridView.md +4 -1
  37. package/docs/widget/Input.md +2 -0
  38. package/docs/widget/InstallButton.md +1 -0
  39. package/docs/widget/Markdown.md +4 -0
  40. package/docs/widget/Rating.md +2 -0
  41. package/docs/widget/Slider.md +2 -0
  42. package/docs/widget/Stack.md +6 -5
  43. package/docs/widget/Stepper.md +2 -0
  44. package/docs/widget/Tooltip.md +3 -1
  45. package/package.json +3 -2
  46. package/skills/fletbox-design/SKILL.md +390 -14
  47. package/skills/fletbox-motion/SKILL.md +145 -47
  48. package/skills/fletbox-rules/SKILL.md +140 -1
  49. package/src/animations/AnimatedBox.js +321 -226
  50. package/src/animations/MatrixRain.js +7 -1
  51. package/src/animations/ParallaxBox.js +13 -10
  52. package/src/animations/animate.js +269 -106
  53. package/src/animations/color.js +91 -0
  54. package/src/animations/easings.js +275 -0
  55. package/src/animations/index.js +21 -0
  56. package/src/animations/motion.js +204 -0
  57. package/src/animations/transitions.js +327 -0
  58. package/src/core/runApp.js +0 -6
  59. package/src/helpers/boxEdges.js +69 -0
  60. package/src/helpers/html.js +39 -0
  61. package/src/index.d.ts +377 -25
  62. package/src/index.js +77 -0
  63. package/src/navigations/AdaptiveScaffold.js +6 -2
  64. package/src/navigations/AppBar.js +16 -7
  65. package/src/navigations/BottomNavigation.js +24 -1
  66. package/src/navigations/CollapsibleSideBar.js +0 -1
  67. package/src/navigations/Drawer.js +32 -1
  68. package/src/navigations/DrawerItem.js +1 -1
  69. package/src/navigations/Router.js +0 -1
  70. package/src/navigations/Scaffold.js +9 -3
  71. package/src/navigations/Tabs.js +104 -31
  72. package/src/services/RamStore.js +1 -2
  73. package/src/tools/breakpoints.js +113 -0
  74. package/src/tools/createList.js +0 -2
  75. package/src/tools/fonts.js +99 -0
  76. package/src/tools/index.js +74 -1
  77. package/src/tools/margin.js +5 -63
  78. package/src/tools/padding.js +5 -63
  79. package/src/tools/print.js +0 -8
  80. package/src/tools/scale.js +9 -2
  81. package/src/tools/time.js +56 -15
  82. package/src/tools/useState.js +1 -54
  83. package/src/utils/fieldFont.js +77 -0
  84. package/src/utils/focusRing.js +73 -0
  85. package/src/utils/focusScope.js +113 -0
  86. package/src/utils/markdownParser.js +7 -9
  87. package/src/utils/readableInk.js +7 -1
  88. package/src/utils/stackLayout.js +55 -0
  89. package/src/utils/styleInjector.js +25 -0
  90. package/src/utils/syntaxHighlight.js +1 -17
  91. package/src/utils/themes.js +15 -0
  92. package/src/utils/visualEffects.js +49 -47
  93. package/src/widget-factory/createWidget.js +16 -3
  94. package/src/widget-factory/effects.js +76 -3
  95. package/src/widget-factory/reactiveValue.js +0 -7
  96. package/src/widget-factory/tools.js +26 -143
  97. package/src/widget-factory/translateProps.js +5 -0
  98. package/src/widget-factory/widgetFactory.js +1 -1
  99. package/src/widgets/Accordion.js +70 -12
  100. package/src/widgets/AdMob.js +1 -1
  101. package/src/widgets/AdSense.js +1 -1
  102. package/src/widgets/AlertDialog.js +11 -9
  103. package/src/widgets/Avatar.js +10 -1
  104. package/src/widgets/Badge.js +7 -1
  105. package/src/widgets/BottomSheet.js +39 -5
  106. package/src/widgets/Chart.js +41 -9
  107. package/src/widgets/Checkbox.js +59 -9
  108. package/src/widgets/Chip.js +13 -1
  109. package/src/widgets/CircularBar.js +17 -5
  110. package/src/widgets/CircularChart.js +24 -2
  111. package/src/widgets/CodeViewer.js +5 -3
  112. package/src/widgets/Dropdown.js +223 -20
  113. package/src/widgets/GridView.js +17 -1
  114. package/src/widgets/Icon.js +21 -0
  115. package/src/widgets/Input.js +75 -44
  116. package/src/widgets/InstallButton.js +8 -2
  117. package/src/widgets/ListTile.js +6 -5
  118. package/src/widgets/ListView.js +21 -7
  119. package/src/widgets/Markdown.js +25 -44
  120. package/src/widgets/Modal.js +43 -6
  121. package/src/widgets/Pagination.js +35 -3
  122. package/src/widgets/ProgressBar.js +18 -0
  123. package/src/widgets/Radio.js +7 -0
  124. package/src/widgets/Rating.js +104 -16
  125. package/src/widgets/Skeleton.js +9 -5
  126. package/src/widgets/Slider.js +87 -7
  127. package/src/widgets/SnackBar.js +30 -1
  128. package/src/widgets/Stack.js +25 -13
  129. package/src/widgets/Stepper.js +112 -64
  130. package/src/widgets/Switch.js +10 -1
  131. package/src/widgets/Tooltip.js +93 -10
  132. package/src/widgets/TreeView.js +5 -5
  133. package/src/create-index.sh +0 -237
  134. package/src/widget-factory/pixTool.js +0 -40
  135. package/src/widget-factory/stringTool.js +0 -26
@@ -1,237 +0,0 @@
1
- #!/bin/bash
2
- # create-indexes.sh - Creates all index.js files for FletBox
3
- # CORREGIDO: Inspector está en widgets/, NO en utils/
4
-
5
- echo "🚀 Creating index.js files for FletBox..."
6
- echo ""
7
-
8
- # ========== ROOT INDEX ==========
9
- cat > index.js << 'EOF'
10
- // index.js - Main entry point for FletBox
11
- // Automatically generated - DO NOT EDIT MANUALLY
12
-
13
- // ========== CORE ==========
14
- export {
15
- runApp,
16
- createApp,
17
- insertBy,
18
- prependBy,
19
- insertBefore,
20
- insertAfter,
21
- replaceBy,
22
- mountAll
23
- } from './src/core/runApp.js';
24
-
25
- export { createWidget } from './src/widget-builder/index.js';
26
-
27
- // ========== UTILS ==========
28
- export {
29
- colors, setTheme, getTheme, toggleTheme, subscribeTheme,
30
- applySystemTheme, watchSystemTheme, getColor, palettes,
31
- getWidgetProps, getWidgetProp, stringifyWidgetProps,
32
- useState, useWatchState,
33
- tokenize, generateHighlightedHtml, highlightColors,
34
- parseMarkdown, parseInlineMarkdown, escapeHtml, wrapListItems,
35
- animate, stopAnimation, fadeOut, fadeIn, pulse,
36
- applyStripes, removeStripes, applyShimmer, applyGlow,
37
- applyIndeterminate, applyPulse, injectKeyframes,
38
- Gradient, Shadow, rgba, stackPosition,
39
- toREM, setBaseFontSize, toPX, getBaseFontSize,
40
- clipboard, createList, delay, withMinDelay, retry,
41
- dimensions, width, height, addNavigation, random,
42
- TextInputValidator,
43
- stringifyWidget, printWidgetCode
44
- } from './src/utils/index.js';
45
-
46
- // ========== WIDGETS ==========
47
- export {
48
- Container, Row, Column, Stack, ListView, GridView,
49
- Text, Button, Icon, Image, Avatar, Card, ListTile,
50
- ProgressBar, Rating, Chip, Badge, Divider, Accordion,
51
- Input, Radio, Switch, Checkbox, Dropdown,
52
- SnackBar, Modal, BottomSheet, AlertDialog,
53
- FloatingActionButton,
54
- CodeViewer, Markdown, Inspector, inspect, inspectWidget,
55
- DraggBox, DroppBox
56
- } from './src/widgets/index.js';
57
-
58
- // ========== NAVIGATIONS ==========
59
- export {
60
- Scaffold, AppBar, Drawer, BottomNavigation, Tabs, DrawerItem,
61
- openDrawer, closeDrawer, toggleDrawer, destroyDrawer,
62
- initRouter, goTo, goBack, goForward, replace,
63
- getCurrentPath, getBasePath, getCurrentRoute, getCurrentRouteConfig,
64
- getRoute, isActive, subscribe, useParams, useQueryParams,
65
- buildUrl, clearRouter
66
- } from './src/navigations/index.js';
67
-
68
- // ========== SERVICES ==========
69
- export {
70
- RamStore,
71
- saveRam, getRam, getAllRam, getAllRamKeys, hasRam,
72
- updateRam, deleteRam, clearAllRam, subscribeRam,
73
- getRamItemCount, isRamAvailable,
74
- Session,
75
- saveSession, getSession, getSessionSync, updateSession,
76
- deleteSession, clearAllSession, hasSession, getAllSessionKeys,
77
- getAllSessionData, getSessionSize, deleteSessionByPrefix,
78
- deleteSessionBySuffix, getSessionItemCount, isSessionAvailable,
79
- Storage,
80
- saveData, getData, getDataSync, updateData, deleteData,
81
- clearAllData, hasData, getAllKeys, getAllData, getStorageSize,
82
- deleteDataByPrefix, deleteDataBySuffix, getItemCount, isStorageAvailable,
83
- httpGet, httpPost, httpPut, httpPatch, httpDelete, httpRequest
84
- } from './src/services/index.js';
85
-
86
- // ========== ANIMATIONS ==========
87
- export {
88
- AnimatedBox, AnimatedText
89
- } from './src/animations/index.js';
90
- EOF
91
-
92
- echo "✅ Created: index.js"
93
-
94
- # ========== SRC/CORE INDEX ==========
95
- mkdir -p src/core
96
- cat > src/core/index.js << 'EOF'
97
- // src/core/index.js
98
- export { runApp, createApp, insertBy, prependBy, insertBefore, insertAfter, replaceBy, mountAll } from './runApp.js';
99
- EOF
100
- echo "✅ Created: src/core/index.js"
101
-
102
- # ========== SRC/UTILS INDEX ==========
103
- mkdir -p src/utils
104
- cat > src/utils/index.js << 'EOF'
105
- // src/utils/index.js
106
- // NOTA: Inspector está en widgets/, NO aquí
107
- export { colors, setTheme, getTheme, toggleTheme, subscribeTheme, applySystemTheme, watchSystemTheme, getColor, palettes } from './themes.js';
108
- export { getWidgetProps, getWidgetProp, stringifyWidgetProps } from './getWidgetProps.js';
109
- export { useState, useWatchState } from './useState.js';
110
- export { tokenize, generateHighlightedHtml, highlightColors } from './syntaxHighlight.js';
111
- export { parseMarkdown, parseInlineMarkdown, escapeHtml, wrapListItems } from './markdownParser.js';
112
- export { animate, fadeOut, fadeIn, pulse } from './animate.js';
113
- export { applyStripes, removeStripes, applyShimmer, applyGlow, applyIndeterminate, applyPulse, injectKeyframes } from './visualEffects.js';
114
- export { default as Gradient } from './Gradient.js';
115
- export { default as Shadow } from './Shadow.js';
116
- export { default as rgba } from './rgba.js';
117
- export { default as stackPosition } from './stackPosition.js';
118
- export { toREM, setBaseFontSize, toPX, getBaseFontSize } from './units.js';
119
- export { clipboard } from './clipboard.js';
120
- export { createList } from './createList.js';
121
- export { delay, withMinDelay, retry } from './delay.js';
122
- export { dimensions, width, height } from './dimensions.js';
123
- export { addNavigation } from './navigation.js';
124
- export { random } from './random.js';
125
- export { TextInputValidator } from './TextInputValidator.js';
126
- export { stringifyWidget, printWidgetCode } from './stringifyWidget.js';
127
- EOF
128
- echo "✅ Created: src/utils/index.js"
129
-
130
- # ========== SRC/WIDGETS INDEX ==========
131
- mkdir -p src/widgets
132
- cat > src/widgets/index.js << 'EOF'
133
- // src/widgets/index.js
134
- export { Container } from './Container.js';
135
- export { Row } from './Row.js';
136
- export { Column } from './Column.js';
137
- export { Stack } from './Stack.js';
138
- export { ListView } from './ListView.js';
139
- export { GridView } from './GridView.js';
140
- export { Text } from './Text.js';
141
- export { Button } from './Button.js';
142
- export { Icon } from './Icon.js';
143
- export { Image } from './Image.js';
144
- export { Avatar } from './Avatar.js';
145
- export { Card } from './Card.js';
146
- export { ListTile } from './ListTile.js';
147
- export { ProgressBar } from './ProgressBar.js';
148
- export { Rating } from './Rating.js';
149
- export { Chip } from './Chip.js';
150
- export { Badge } from './Badge.js';
151
- export { Divider } from './Divider.js';
152
- export { Accordion } from './Accordion.js';
153
- export { Input } from './Input.js';
154
- export { Radio } from './Radio.js';
155
- export { Switch } from './Switch.js';
156
- export { Checkbox } from './Checkbox.js';
157
- export { Dropdown } from './Dropdown.js';
158
- export { SnackBar } from './SnackBar.js';
159
- export { Modal } from './Modal.js';
160
- export { BottomSheet } from './BottomSheet.js';
161
- export { AlertDialog } from './AlertDialog.js';
162
- export { FloatingActionButton } from './FloatingActionButton.js';
163
- export { CodeViewer } from './CodeViewer.js';
164
- export { Markdown } from './Markdown.js';
165
- export { Inspector, inspect, inspectWidget } from './Inspector.js';
166
- export { DraggBox } from './DraggBox.js';
167
- export { DroppBox } from './DroppBox.js';
168
- EOF
169
- echo "✅ Created: src/widgets/index.js"
170
-
171
- # ========== SRC/NAVIGATIONS INDEX ==========
172
- mkdir -p src/navigations
173
- cat > src/navigations/index.js << 'EOF'
174
- // src/navigations/index.js
175
- export { Scaffold } from './Scaffold.js';
176
- export { AppBar } from './AppBar.js';
177
- export { Drawer, openDrawer, closeDrawer, toggleDrawer, destroyDrawer } from './Drawer.js';
178
- export { BottomNavigation } from './BottomNavigation.js';
179
- export { Tabs } from './Tabs.js';
180
- export { DrawerItem } from './DrawerItem.js';
181
- export { initRouter, goTo, goBack, goForward, replace, getCurrentPath, getBasePath, getCurrentRoute, getCurrentRouteConfig, getRoute, isActive, subscribe, useParams, useQueryParams, buildUrl, clearRouter } from './Router.js';
182
- EOF
183
- echo "✅ Created: src/navigations/index.js"
184
-
185
- # ========== SRC/SERVICES INDEX ==========
186
- mkdir -p src/services
187
- cat > src/services/index.js << 'EOF'
188
- // src/services/index.js
189
- export { default as RamStore, saveRam, getRam, getAllRam, getAllRamKeys, hasRam, updateRam, deleteRam, clearAllRam, subscribeRam, getRamItemCount, isRamAvailable } from './RamStore.js';
190
- export { default as Session, saveSession, getSession, getSessionSync, updateSession, deleteSession, clearAllSession, hasSession, getAllSessionKeys, getAllSessionData, getSessionSize, deleteSessionByPrefix, deleteSessionBySuffix, getSessionItemCount, isSessionAvailable } from './Session.js';
191
- export { default as Storage, saveData, getData, getDataSync, updateData, deleteData, clearAllData, hasData, getAllKeys, getAllData, getStorageSize, deleteDataByPrefix, deleteDataBySuffix, getItemCount, isStorageAvailable } from './Storage.js';
192
- export { httpGet, httpPost, httpPut, httpPatch, httpDelete, httpRequest } from './http.js';
193
- EOF
194
- echo "✅ Created: src/services/index.js"
195
-
196
- # ========== SRC/ANIMATIONS INDEX ==========
197
- mkdir -p src/animations
198
- cat > src/animations/index.js << 'EOF'
199
- // src/animations/index.js
200
- export { AnimatedBox } from './AnimatedBox.js';
201
- export { AnimatedText } from './AnimatedText.js';
202
- export { animate, fadeOut, fadeIn, pulse } from './animate.js';
203
- EOF
204
- echo "✅ Created: src/animations/index.js"
205
-
206
- # ========== SRC/WIDGET-BUILDER INDEX ==========
207
- mkdir -p src/widget-builder
208
- cat > src/widget-builder/index.js << 'EOF'
209
- // src/widget-builder/index.js
210
- export { createWidget } from './createWidget.js';
211
- export { assignProps } from './assignProps.js';
212
- export { translateProps, createTranslator } from './translateProps.js';
213
- export { makeParentable } from './parentable.js';
214
- export { addChildren } from './children.js';
215
- export { applyEffects } from './effects.js';
216
- export { toREM, remProps } from './utils.js';
217
- export { makeReactive } from './reactivity.js';
218
- export { setupEvents } from './events.js';
219
- export { addLifecycle } from './lifecycle.js';
220
- EOF
221
- echo "✅ Created: src/widget-builder/index.js"
222
-
223
- echo ""
224
- echo "🎉 All index.js files created successfully!"
225
- echo ""
226
- echo "📂 Structure:"
227
- echo " ├── index.js"
228
- echo " ├── src/"
229
- echo " │ ├── core/index.js"
230
- echo " │ ├── utils/index.js (NO incluye Inspector)"
231
- echo " │ ├── widgets/index.js (incluye Inspector)"
232
- echo " │ ├── navigations/index.js"
233
- echo " │ ├── services/index.js"
234
- echo " │ ├── animations/index.js"
235
- echo " │ └── widget-builder/index.js"
236
- echo ""
237
- echo "✅ Inspector está en widgets/, NO en utils/"
@@ -1,40 +0,0 @@
1
- /**
2
- * PX TOOL - Converts numbers to PX
3
- */
4
-
5
- /**
6
- * Converts a number to PX
7
- * @param {number} value - Number to convert
8
- * @returns {string} - Value in PX
9
- *
10
- * @example
11
- * toPX(16) → '16px'
12
- * toPX(24) → '24px'
13
- */
14
- export const toPX = (value) => {
15
- if (typeof value !== "number") return value;
16
- return `${value}px`;
17
- };
18
-
19
- /**
20
- * Applies PX to a styles object
21
- * @param {Object} styles - Styles with numbers
22
- * @returns {Object} - Styles with PX
23
- *
24
- * @example
25
- * applyPX({ padding: 16, fontSize: 24, color: 'red' })
26
- * // → { padding: '16px', fontSize: '24px', color: 'red' }
27
- */
28
- export const applyPX = (styles) => {
29
- const result = {};
30
-
31
- for (const [key, value] of Object.entries(styles)) {
32
- if (typeof value === "number") {
33
- result[key] = toPX(value);
34
- } else {
35
- result[key] = value;
36
- }
37
- }
38
-
39
- return result;
40
- };
@@ -1,26 +0,0 @@
1
- /**
2
- * STRING TOOL - Only keeps props that are strings
3
- */
4
-
5
- /**
6
- * Filters and keeps only string values
7
- * @param {Object} styles - Styles object
8
- * @returns {Object} - Only string props
9
- *
10
- * @example
11
- * keepStrings({ padding: 16, color: 'red', display: 'flex', zIndex: 10 })
12
- * // → { color: 'red', display: 'flex' }
13
- */
14
- export const keepStrings = (styles) => {
15
- const result = {};
16
-
17
- for (const [key, value] of Object.entries(styles)) {
18
- if (typeof value === "string") {
19
- result[key] = value;
20
- }
21
- }
22
-
23
- return result;
24
- };
25
-
26
- export default keepStrings;