rosie-ui 0.2.0 → 0.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 (129) hide show
  1. package/CHANGELOG.md +22 -1
  2. package/README.md +52 -59
  3. package/dist/css/rosie.css +4 -4
  4. package/dist/fa-brands-400.woff2 +0 -0
  5. package/dist/fa-regular-400.woff2 +0 -0
  6. package/dist/fa-solid-900.woff2 +0 -0
  7. package/dist/fa-v4compatibility.woff2 +0 -0
  8. package/dist/js/components/datepicker/date-picker.component.d.ts +9 -0
  9. package/dist/js/components/datepicker/date-picker.component.js +13 -0
  10. package/dist/js/components/datepicker/date-range-picker.component.d.ts +6 -0
  11. package/dist/js/components/datepicker/date-range-picker.component.js +9 -0
  12. package/dist/js/components/datepicker/index.d.ts +2 -0
  13. package/dist/js/components/datepicker/index.js +3 -0
  14. package/dist/js/{bak/components → components}/dropdown.component.d.ts +4 -4
  15. package/dist/js/components/dropdown.component.js +54 -0
  16. package/dist/js/components/grid/grid.component.js +17 -3
  17. package/dist/js/components/grid/types.d.ts +6 -1
  18. package/dist/js/components/index.d.ts +3 -0
  19. package/dist/js/components/index.js +4 -1
  20. package/dist/js/{bak/components → components}/paging-toolbar.component.d.ts +4 -3
  21. package/dist/js/components/paging-toolbar.component.js +7 -0
  22. package/dist/js/components/query-builder/criteria-field.component.d.ts +9 -0
  23. package/dist/js/components/query-builder/criteria-field.component.js +23 -0
  24. package/dist/js/components/query-builder/index.d.ts +2 -0
  25. package/dist/js/components/query-builder/index.js +3 -0
  26. package/dist/js/components/query-builder/query-operation.component.d.ts +9 -0
  27. package/dist/js/components/query-builder/query-operation.component.js +33 -0
  28. package/dist/js/components/query-builder/type.d.ts +42 -0
  29. package/dist/js/components/query-builder/type.js +18 -0
  30. package/dist/js/core/data/index.d.ts +1 -0
  31. package/dist/js/core/data/index.js +2 -1
  32. package/dist/js/core/data/model.d.ts +1 -0
  33. package/dist/js/core/data/model.js +6 -1
  34. package/dist/js/core/data/store.d.ts +11 -0
  35. package/dist/js/core/data/store.js +37 -2
  36. package/dist/js/core/index.d.ts +4 -0
  37. package/dist/js/core/index.js +5 -1
  38. package/dist/js/core/lang/array.d.ts +0 -11
  39. package/dist/js/core/lang/array.js +1 -47
  40. package/dist/js/core/lang/date.d.ts +2 -10
  41. package/dist/js/core/lang/date.js +8 -44
  42. package/dist/js/core/types.d.ts +0 -7
  43. package/dist/webfonts/fa-brands-400.woff2 +0 -0
  44. package/dist/webfonts/fa-regular-400.woff2 +0 -0
  45. package/dist/webfonts/fa-solid-900.woff2 +0 -0
  46. package/dist/webfonts/fa-v4compatibility.woff2 +0 -0
  47. package/package.json +11 -11
  48. package/scss/_functions.scss +16 -0
  49. package/scss/_reset.scss +7 -7
  50. package/scss/_variables.scss +66 -21
  51. package/scss/components/_grid.scss +26 -25
  52. package/scss/components/index.scss +1 -1
  53. package/scss/index.scss +0 -4
  54. package/dist/js/ajax.d.ts +0 -19
  55. package/dist/js/ajax.js +0 -71
  56. package/dist/js/bak/components/custom-hook.d.ts +0 -2
  57. package/dist/js/bak/components/custom-hook.js +0 -12
  58. package/dist/js/bak/components/date-picker.component.d.ts +0 -26
  59. package/dist/js/bak/components/date-picker.component.js +0 -92
  60. package/dist/js/bak/components/dialog.component.d.ts +0 -16
  61. package/dist/js/bak/components/dialog.component.js +0 -22
  62. package/dist/js/bak/components/dropdown.component.js +0 -38
  63. package/dist/js/bak/components/grid/grid-cell.component.d.ts +0 -10
  64. package/dist/js/bak/components/grid/grid-cell.component.js +0 -41
  65. package/dist/js/bak/components/grid/grid-row.component.d.ts +0 -2
  66. package/dist/js/bak/components/grid/grid-row.component.js +0 -29
  67. package/dist/js/bak/components/grid/grid.component.d.ts +0 -3
  68. package/dist/js/bak/components/grid/grid.component.js +0 -61
  69. package/dist/js/bak/components/grid/index.d.ts +0 -1
  70. package/dist/js/bak/components/grid/index.js +0 -2
  71. package/dist/js/bak/components/grid/types.d.ts +0 -22
  72. package/dist/js/bak/components/grid/types.js +0 -2
  73. package/dist/js/bak/components/index.d.ts +0 -5
  74. package/dist/js/bak/components/index.js +0 -6
  75. package/dist/js/bak/components/paging-toolbar.component.js +0 -13
  76. package/dist/js/bak/core/ajax.d.ts +0 -4
  77. package/dist/js/bak/core/ajax.js +0 -71
  78. package/dist/js/bak/core/cache.d.ts +0 -14
  79. package/dist/js/bak/core/cache.js +0 -65
  80. package/dist/js/bak/core/index.d.ts +0 -18
  81. package/dist/js/bak/core/index.js +0 -16
  82. package/dist/js/bak/core/utils.d.ts +0 -14
  83. package/dist/js/bak/core/utils.js +0 -79
  84. package/dist/js/bak/data/index.d.ts +0 -3
  85. package/dist/js/bak/data/index.js +0 -4
  86. package/dist/js/bak/data/model.d.ts +0 -14
  87. package/dist/js/bak/data/model.js +0 -49
  88. package/dist/js/bak/data/proxy.d.ts +0 -8
  89. package/dist/js/bak/data/proxy.js +0 -53
  90. package/dist/js/bak/data/store.d.ts +0 -10
  91. package/dist/js/bak/data/store.js +0 -37
  92. package/dist/js/bak/mixin/index.d.ts +0 -2
  93. package/dist/js/bak/mixin/index.js +0 -3
  94. package/dist/js/bak/mixin/observable.d.ts +0 -21
  95. package/dist/js/bak/mixin/observable.js +0 -57
  96. package/dist/js/bak/mixin/types.d.ts +0 -17
  97. package/dist/js/bak/mixin/types.js +0 -2
  98. package/dist/js/data/index.d.ts +0 -2
  99. package/dist/js/data/index.js +0 -3
  100. package/dist/js/data/model.d.ts +0 -10
  101. package/dist/js/data/model.js +0 -36
  102. package/dist/js/data/proxy/client.d.ts +0 -14
  103. package/dist/js/data/proxy/client.js +0 -65
  104. package/dist/js/data/proxy/index.d.ts +0 -2
  105. package/dist/js/data/proxy/index.js +0 -3
  106. package/dist/js/data/proxy/server.d.ts +0 -8
  107. package/dist/js/data/proxy/server.js +0 -53
  108. package/dist/js/data/store.d.ts +0 -0
  109. package/dist/js/data/store.js +0 -2
  110. package/dist/js/lang/array.d.ts +0 -16
  111. package/dist/js/lang/array.js +0 -55
  112. package/dist/js/lang/date.d.ts +0 -21
  113. package/dist/js/lang/date.js +0 -76
  114. package/dist/js/lang/number.d.ts +0 -9
  115. package/dist/js/lang/number.js +0 -17
  116. package/dist/js/lang/string.d.ts +0 -7
  117. package/dist/js/lang/string.js +0 -13
  118. package/dist/js/mixins/constants.d.ts +0 -1
  119. package/dist/js/mixins/constants.js +0 -14
  120. package/dist/js/mixins/dom.d.ts +0 -2
  121. package/dist/js/mixins/dom.js +0 -13
  122. package/dist/js/mixins/index.d.ts +0 -3
  123. package/dist/js/mixins/index.js +0 -4
  124. package/dist/js/mixins/utilities.d.ts +0 -10
  125. package/dist/js/mixins/utilities.js +0 -44
  126. package/dist/js/observable.d.ts +0 -17
  127. package/dist/js/observable.js +0 -37
  128. package/dist/js/types.d.ts +0 -3
  129. package/dist/js/types.js +0 -2
package/CHANGELOG.md CHANGED
@@ -1,7 +1,28 @@
1
- # Rosie UI
1
+ # Changelog
2
2
 
3
3
  ## Next
4
4
 
5
+ ## 0.3.0
6
+ > 2026-02-12
7
+
8
+ - New Features
9
+ - Add new components:
10
+ - `PagingToolbar`
11
+ - `DatePicker`, `DateRangePicker`
12
+ - `Dropdown`, `InputDropdown`
13
+ - `QueryOperation`
14
+ - Load data to `Grid` via `store` property
15
+ - Bug Fixes
16
+ - Correct `rosie-grid` css
17
+ - Breaking Changes
18
+ - Upgrade to React 19.2.4
19
+
20
+ ## 0.2.0
21
+ > 2025-08-28
22
+
23
+ - Breaking Changes
24
+ - Upgrade to React 19.1
25
+
5
26
  ## 0.1.9
6
27
  > 2024-05-30
7
28
  - Correct type in `groupBy` extension method
package/README.md CHANGED
@@ -1,33 +1,46 @@
1
1
  # Rosie UI
2
2
 
3
- Rosie UI is a JavaScript library that build on top of [React 18.2](https://react.dev/) and [Bootstrap 5.3](https://getbootstrap.com), helping you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones.
3
+ Rosie UI is a JavaScript library that build on top of [React 19.1](https://react.dev/) and [Bootstrap 5.3](https://getbootstrap.com), helping you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones.
4
4
 
5
5
  ## Getting Started
6
6
 
7
- ### File Structure
7
+ - Create a project folder and set up npm
8
+ - Install `esbuild`, `sass`
9
+ - Install `rosie-ui`, `react`, `react-dom`
10
+ - Install additional dependencies
11
+
12
+ ### Project Structure
8
13
 
9
14
  ```
10
15
  your-project/
11
16
  ├── node_modules/
12
- │ ├── rosie-ui
13
- │ │ ├── dist
14
- │ │ │ ├── css
15
- │ │ │ ├── js
16
- │ │ │ ├── webfonts
17
- │ │ ├── scss
17
+ │ ├── bootstrap
18
+ │ │ └── dist
19
+ │ │ └── js
20
+ │ │ └── bootstrap.bundle.min.js
21
+ │ └── rosie-ui
22
+ │ ├── dist
23
+ │ │ ├── css
24
+ │ │ ├── js
25
+ │ │ └── webfonts
26
+ │ └── scss
27
+ │ └── _variables.scss
28
+ ├── dist/
29
+ │ ├── app.css
30
+ │ ├── app.js
31
+ │ └── index.html
18
32
  ├── src/
19
33
  │ ├── app
20
- │ │ ├── components
21
- │ │ │ ├── _app.component.scss
22
- │ │ │ ├── app.component.tsx
23
- │ │ ├── app.html
34
+ │ │ ├── views
35
+ │ │ │ ├── _app.view.scss
36
+ │ │ │ └── app.view.tsx
24
37
  │ │ ├── app.scss
25
- │ │ ├── app.tsx
38
+ │ │ └── app.tsx
26
39
  ├── package.json
27
- ├── tsconfig.json
40
+ └── tsconfig.json
28
41
  ```
29
42
 
30
- #### `app.html`
43
+ #### `index.html`
31
44
 
32
45
  ```html
33
46
  <!doctype html>
@@ -36,14 +49,12 @@ your-project/
36
49
  <!-- Required meta tags -->
37
50
  <meta charset="utf-8" />
38
51
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
39
-
40
52
  <title>Hello, world!</title>
41
-
42
- <link rel="stylesheet" href="app.scss" />
53
+ <link rel="stylesheet" href="app.css" />
43
54
  </head>
44
55
  <body>
45
56
  <div id="react-root"></div>
46
- <script src="app.tsx"></script>
57
+ <script src="app.js"></script>
47
58
  </body>
48
59
  </html>
49
60
  ```
@@ -51,57 +62,39 @@ your-project/
51
62
  #### `app.scss`
52
63
 
53
64
  ```scss
54
- @import '../../node_modules/rosie-ui/dist/css/rosie.css';
65
+ @forward '../../node_modules/rosie-ui/dist/css/rosie.css';
55
66
 
56
- @import 'components/app.component';
67
+ @forward 'views/app.view';
57
68
  ```
58
69
 
59
70
  #### `app.tsx`
60
71
 
61
- ```tsx
62
- import { createRoot } from 'react-dom/client';
63
-
64
- import { AppComponent } from './components/app.component';
65
-
66
- createRoot(document.getElementById('react-root') as HTMLElement).render(<AppComponent />);
67
- ```
72
+ While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.
68
73
 
69
- ## Customize
74
+ ```tsx
75
+ import 'bootstrap/dist/js/bootstrap.bundle.min';
70
76
 
71
- ```scss
72
- // app.scss
73
- // Option 1: Include all of Rosie UI
77
+ import { createRoot } from 'react-dom/client';
74
78
 
75
- @import '../../node_modules/rosie-ui/dist/css/rosie.css';
79
+ import { AppView } from './views/app.view';
76
80
 
77
- // Then add additional custom code here
81
+ createRoot(document.getElementById('react-root') as HTMLElement).render(<AppView />);
78
82
  ```
79
83
 
80
- ```scss
81
- // app.scss
82
- // Option 2: Include parts of Rosie UI
83
-
84
- // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
85
- @import '../../../node_modules/bootstrap/scss/functions';
86
-
87
- // 2. Include any default variable overrides here
88
- // @import '../../../node_modules/rosie-ui/scss/variables';
89
-
90
- // 3. Include remainder of required Bootstrap stylesheets
91
-
92
- @import '../../../node_modules/bootstrap/scss/bootstrap';
93
-
94
- // 5. Include remainder of required parts
95
- @import '../../../node_modules/rosie-ui/scss/mixin';
96
- @import '../../../node_modules/rosie-ui/scss/reset';
97
- @import '../../../node_modules/rosie-ui/scss/utilities';
98
-
99
- $fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';
100
-
101
- @import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
102
- @import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
103
-
104
- // Then add additional custom code here
84
+ #### `scripts` in `package.json`
85
+
86
+ ```json
87
+ {
88
+ // ...
89
+ "scripts": {
90
+ "start": "esbuild src/app/app.tsx --bundle --outfile=dist/app.js --loader:.tsx=tsx --format=iife --watch",
91
+ "build": "npm run build-css && npm run build-js",
92
+ "build-css": "sass src/app/app.scss disc/app.css --style=compressed --no-source-map",
93
+ "build-js": "esbuild src/app/app.tsx --bundle --outfile=dist/app.js --loader:.tsx=tsx --format=iife",
94
+ "test": "echo \"Error: no test specified\" && exit 1"
95
+ },
96
+ // ...
97
+ }
105
98
  ```
106
99
 
107
100
  ## License