rosie-ui 0.1.10 → 0.3.0

package/CHANGELOG.md

@@ -1,62 +1,83 @@
-# Rosie UI
-
-## Next
-
-## 0.1.10
-> 2024-05-30
-  - Correct type in `groupBy` extension method
-
-## 0.1.8
-> 2024-05-28
-
-- New Features
-  - Add `useSubject` custom hook
-- Improvements
-  - #10 Should configure css class: rosie-grid-bordered rosie-grid-striped rosie-grid-hover
-  - #18 `Subject` enhancement
-  - #14 `DataModel` enhancement
-  - #16 `Grid` enhancement
-  - Add array extension method: `groupBy`, `sumBy`, `toDictionary`
-
-## 0.1.6
-> 2024-04-29
-
-- New Features
-  - #6 Add `DataModel`, `DataStore` object
-- Improvements
-  - #9 Supports to select row by checkbox
-  - Restructure `ts`
-  - Refine `scss`
-- Bug Fixes
-  - #13 `GridCell` not update value when `DataModel` change
-
-## 0.1.3
-> 2024-01-13
-
-- New Features
-  - #2 Add Observable object
-  - Add `TextField` component
-- Improvements
-  - Change to use `axios` for AJAX instead of `fetch`
-
-## 0.0.4
-> 2023-11-12
-
-- #1 TypeError: Failed to execute 'text' on 'Response': body stream already read
-
-## 0.0.3
-> 2023-10-30
-
-- Should declare `react`, `react-dom` in `peerDependencies`
-- Separate `components`
-- Correct build command
-
-## 0.0.2
-> 2023-10-27
-
-- Restructure codebase, separate script and style
-
-## 0.0.1
-> 2023-10-17
-
+# Changelog
+
+## Next
+
+## 0.3.0
+> 2026-02-12
+
+- New Features
+  - Add new components:
+    - `PagingToolbar`
+    - `DatePicker`, `DateRangePicker`
+    - `Dropdown`, `InputDropdown`
+    - `QueryOperation`
+  - Load data to `Grid` via `store` property
+- Bug Fixes
+  - Correct `rosie-grid` css
+- Breaking Changes
+  - Upgrade to React 19.2.4
+
+## 0.2.0
+> 2025-08-28
+
+- Breaking Changes
+  - Upgrade to React 19.1
+
+## 0.1.9
+> 2024-05-30
+  - Correct type in `groupBy` extension method
+
+## 0.1.8
+> 2024-05-28
+
+- New Features
+  - Add `useSubject` custom hook
+- Improvements
+  - #10 Should configure css class: rosie-grid-bordered rosie-grid-striped rosie-grid-hover
+  - #18 `Subject` enhancement
+  - #14 `DataModel` enhancement
+  - #16 `Grid` enhancement
+  - Add array extension method: `groupBy`, `sumBy`, `toDictionary`
+
+## 0.1.6
+> 2024-04-29
+
+- New Features
+  - #6 Add `DataModel`, `DataStore` object
+- Improvements
+  - #9 Supports to select row by checkbox
+  - Restructure `ts`
+  - Refine `scss`
+- Bug Fixes
+  - #13 `GridCell` not update value when `DataModel` change
+
+## 0.1.3
+> 2024-01-13
+
+- New Features
+  - #2 Add Observable object
+  - Add `TextField` component
+- Improvements
+  - Change to use `axios` for AJAX instead of `fetch`
+
+## 0.0.4
+> 2023-11-12
+
+- #1 TypeError: Failed to execute 'text' on 'Response': body stream already read
+
+## 0.0.3
+> 2023-10-30
+
+- Should declare `react`, `react-dom` in `peerDependencies`
+- Separate `components`
+- Correct build command
+
+## 0.0.2
+> 2023-10-27
+
+- Restructure codebase, separate script and style
+
+## 0.0.1
+> 2023-10-17
+
 - Initial project

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Huy Trong Nguyen
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Huy Trong Nguyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,109 +1,102 @@
-# Rosie UI
-
-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.
-
-## Getting Started
-
-### File Structure
-
-```
-your-project/
-├── node_modules/
-│   ├── rosie-ui
-│   │   ├── dist
-│   │   │   ├── css
-│   │   │   ├── js
-│   │   │   ├── webfonts
-│   │   ├── scss
-├── src/
-│   ├── app
-│   │   ├── components
-│   │   │   ├── _app.component.scss
-│   │   │   ├── app.component.tsx
-│   │   ├── app.html
-│   │   ├── app.scss
-│   │   ├── app.tsx
-├── package.json
-├── tsconfig.json
-```
-
-#### `app.html`
-
-```html
-<!doctype html>
-<html lang="en">
-<head>
-  <!-- Required meta tags -->
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <title>Hello, world!</title>
-
-  <link rel="stylesheet" href="app.scss" />
-</head>
-<body>
-  <div id="react-root"></div>
-  <script src="app.tsx"></script>
-</body>
-</html>
-```
-
-#### `app.scss`
-
-```scss
-@import '../../node_modules/rosie-ui/dist/css/rosie.css';
-
-@import 'components/app.component';
-```
-
-#### `app.tsx`
-
-```tsx
-import { createRoot } from 'react-dom/client';
-
-import { AppComponent } from './components/app.component';
-
-createRoot(document.getElementById('react-root') as HTMLElement).render(<AppComponent />);
-```
-
-## Customize
-
-```scss
-// app.scss
-// Option 1: Include all of Rosie UI
-
-@import '../../node_modules/rosie-ui/dist/css/rosie.css';
-
-// Then add additional custom code here
-```
-
-```scss
-// app.scss
-// Option 2: Include parts of Rosie UI
-
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import '../../../node_modules/bootstrap/scss/functions';
-
-// 2. Include any default variable overrides here
-// @import '../../../node_modules/rosie-ui/scss/variables';
-
-// 3. Include remainder of required Bootstrap stylesheets
-
-@import '../../../node_modules/bootstrap/scss/bootstrap';
-
-// 5. Include remainder of required parts
-@import '../../../node_modules/rosie-ui/scss/mixin';
-@import '../../../node_modules/rosie-ui/scss/reset';
-@import '../../../node_modules/rosie-ui/scss/utilities';
-
-$fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';
-
-@import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
-@import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
-
-// Then add additional custom code here
-```
-
-## License
-
+# Rosie UI
+
+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.
+
+## Getting Started
+
+- Create a project folder and set up npm
+- Install `esbuild`, `sass`
+- Install `rosie-ui`, `react`, `react-dom`
+- Install additional dependencies
+
+### Project Structure
+
+```
+your-project/
+├── node_modules/
+│   ├── bootstrap
+│   │   └── dist
+│   │       └── js
+│   │           └── bootstrap.bundle.min.js
+│   └── rosie-ui
+│       ├── dist
+│       │   ├── css
+│       │   ├── js
+│       │   └── webfonts
+│       └── scss
+│           └── _variables.scss
+├── dist/
+│   ├── app.css
+│   ├── app.js
+│   └── index.html
+├── src/
+│   ├── app
+│   │   ├── views
+│   │   │   ├── _app.view.scss
+│   │   │   └── app.view.tsx
+│   │   ├── app.scss
+│   │   └── app.tsx
+├── package.json
+└── tsconfig.json
+```
+
+#### `index.html`
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hello, world!</title>
+  <link rel="stylesheet" href="app.css" />
+</head>
+<body>
+  <div id="react-root"></div>
+  <script src="app.js"></script>
+</body>
+</html>
+```
+
+#### `app.scss`
+
+```scss
+@forward '../../node_modules/rosie-ui/dist/css/rosie.css';
+
+@forward 'views/app.view';
+```
+
+#### `app.tsx`
+
+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.
+
+```tsx
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+
+import { createRoot } from 'react-dom/client';
+
+import { AppView } from './views/app.view';
+
+createRoot(document.getElementById('react-root') as HTMLElement).render(<AppView />);
+```
+
+#### `scripts` in `package.json`
+
+```json
+{
+  // ...
+  "scripts": {
+    "start": "esbuild src/app/app.tsx --bundle --outfile=dist/app.js --loader:.tsx=tsx --format=iife --watch",
+    "build": "npm run build-css && npm run build-js",
+    "build-css": "sass src/app/app.scss disc/app.css --style=compressed --no-source-map",
+    "build-js": "esbuild src/app/app.tsx --bundle --outfile=dist/app.js --loader:.tsx=tsx --format=iife",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  // ...
+}
+```
+
+## License
+
 `Rosie UI` is released under the MIT license.