Example invoice

README.md

@@ -146,7 +146,7 @@ Because the `view!` macro produces unique transient types, `if` and `match` expr
 the macro will naturally fail to compile.
 
 Using the `auto_branch` flag on the `#[component]` attribute
-**Kobold** will scan the body of of your component render function, and make all `view!` macro invocations
+**Kobold** will scan the body of your component render function, and make all `view!` macro invocations
 inside an `if` or `match` expression, and wrap them in an enum making them the same type:
 
 ```rust

crates/kobold/src/stateful/hook.rs

@@ -18,7 +18,7 @@ use crate::View;
 /// A hook into some state `S`. A reference to `Hook` is obtained by using the [`stateful`](crate::stateful::stateful)
 /// function.
 ///
-/// Hook can be read from though its `Deref` implementation, and it allows for mutations either by [`bind`ing](Hook::bind)
+/// Hook can be read from through its `Deref` implementation, and it allows for mutations by [`bind`ing](Hook::bind)
 /// closures to it.
 #[repr(transparent)]
 pub struct Hook<S> {

crates/kobold_qr/src/lib.rs

@@ -19,7 +19,7 @@ pub fn KoboldQR(data: &str, size: usize) -> impl View + '_ {
 
         Some(
             view! {
-                <canvas width={pixels} height={pixels} {style} />
+                <canvas width={pixels} height={pixels} style="width: 50px; height: 50px;" />
             }
             .on_render(move |canvas| {
                 let ctx = match canvas.get_context("2d") {

examples/invoice/Cargo.toml

@@ -0,0 +1,40 @@
+[package]
+name = "kobold_invoice"
+version = "0.1.0"
+edition = "2021"
+
+[[bin]]
+name = "main"
+path = "src/main.rs"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+kobold = { version = "0.8.0", path = "../../crates/kobold" }
+kobold_macros = { version = "0.8.0", path = "../../crates/kobold_macros" }
+kobold_qr = { version = "0.8.0", path = "../../crates/kobold_qr" }
+compact_str = "0.7.0"
+gloo-console = "0.2.3"
+gloo-file = "0.2.3"
+gloo-storage = "0.2.1"
+gloo-utils = { version = "0.1.2", features = ["serde"] }
+heck = "0.4.1"
+js-sys = "0.3.61"
+log = "0.4.17"
+logos = "0.12.1"
+serde = "1.0.159"
+serde_json = "1.0.95"
+take_mut = "0.2.2"
+wasm-bindgen = "0.2.84"
+wasm-bindgen-futures = "0.4.34"
+wasm-logger = "0.2.0"
+
+[dependencies.web-sys]
+version = "0.3.61"
+features = [
+	"console",
+	"Document",
+	"HtmlInputElement",
+	"File",
+	"FileList",
+]

examples/invoice/README.md

@@ -0,0 +1,58 @@
+* Usage
+    * Run the following from the project root directory:
+    ```
+    cd examples/invoice/
+    cargo install --locked trunk
+    RUST_LOG=info trunk serve --address=127.0.0.1 --open
+    ```
+    * Open in web browser http://localhost:8080
+    * Upload, edit (saves in local storage), and download a backup to a CSV file for the "Main" table
+        * Create a text file similar to the example in folder ./data/main.csv  and `mock_file_main` in state.rs, prefixed with `#main,`.
+            * Note: It looks like there is an additional column on the first row but that cell will be removed during the upload process and used to populate a `TableVariant` value in the state that is reflected in Local Storage
+        * Upload a file by clicking "Upload CSV file (Main) to upload it in the "Main" table
+        * View the file in the UI and serialised in browser Local Storage under key `kobald.invoice.main`
+        * Modify the table by double clicking cells and pressing escape or enter to save
+        * Add rows to the "Main" table if required by clicking the "+" icon above where you want to insert a new row
+        * Remove rows from the "Main" table if required by clicking the "X" icon on that row
+        * Save a backup of the file by clicking the associated "Save to CSV file" button
+            * Note: The downloaded file should be prefixed with `#main,` to indicate it uses the `TableVariant::Main` table
+    * Upload, edit (saves in local storage), and download a backup to a CSV file for the "Details" table
+        * Repeat steps used for the "Main" table, but similar to example in folder ./data/details.csv and `mock_file_details` in state.rs, and prefixed with `#details,` instead, and stored under `kobald.invoice.details` in Local Storage instead.
+
+* Contributing Guidelines
+    * Format `cargo fmt --all` before pushing commits
+    * Test with `cargo test` before pushing commits
+
+* Browser Compatibility:
+    * Brave Version 1.50.121 Chromium: 112.0.5615.138 (Official Build) (x86_64)
+    * Chrome Version 112.0.5615.137 (Official Build) (x86_64)
+    * Firefox Version 112.0.2 (64-bit)
+
+* Notes:
+    * Best Practice
+        * Use `&str` and avoid `String`
+    * Troubleshooting
+        * If you try to pass a function to a child component through props with `impl Listener<MouseEvent<HtmlElement>>` or `&dyn Fn(&mut State, MouseEvent<HtmlElement>)` or `pub fn MyChildComponent<F: Fn(&mut State, MouseEvent<HtmlElement>)>(onfoobar_fn: F) -> impl View {` or by passing a bound closure `pub fn MyChildComponent<F: Listener<MouseEvent<HtmlElement>>>(onfoobar_fn: F) -> impl View {` using kobold::event::Listener (https://docs.rs/kobold/latest/kobold/event/trait.Listener.html) that calls a function that is defined in a parent component and manipulates the state then you may encounter errors, which is not yet supported in Kobold. In the meantime just pass a `state: &Hook<State>` prop to the child component and interact with the state in an `onclick` handler or similar directly by containing the function in the handler. This approach is used in the commit that updated this README comment.
+    * Closure (e.g. `state.update(|state| state.store())` has access to Signal of state
+        * `update` doesn't implement Deref so you can't access fields on it like you can with a Hook
+        * `update_silent` gives access to the actual state without triggering a render
+    * State
+        * Tables
+            * all `Table` cells should be populated with `Insitu` by default, the only exception is when you have escapes in the loaded CSV. e.g. if your CSV contains quotes in quotes, the parser needs to change escapes quotes into unescaped ones, so it will allocate a String to do it in. for a value in quotes it slices with +1/-1 to skip quotes, and then for escapes it also skips quotes and then replaces escaped quotes inside. if you put something like: `"hello ""world"""` in your CSV file, that will be `Text::Owned`
+            * the `Table` `source` property values should be read only
+            * if you edit a `Table` cell, just swap it from `Insitu` to `Owned` text
+            * you get an owned string from `.value()` so there is no point in trying to avoid it
+            * loading a file prefers `Insitu` since it can just borrow all unescaped values from the `source` without allocations
+            * it uses `fn parse_row` in csv.rs to magically know whether to store in `Insitu` instead of `Owned`, otherwise we explicitly tell it to use `Insitu` when setting the default value `Text::Insitu(0..0)` in this file and when we edit a field in the UI so it becomes `Owned("text")` (where text is what we enter)
+            * `Text` is used instead of just String to avoid unnecessary allocations that are expensive, since subslicing the `source` with an `Insitu` `range` is a const operation, so it's just fiddling with a pointer and the length - so it's not exactly free, but it's as close to free as you can get. even better would be for `Insitu` to contain `&str`, but internal borrowing is a bit of a pain
+
+* References:
+    * [kobold docs](https://docs.rs/kobold/latest/kobold/)
+    * [wasm-bindgen docs](https://rustwasm.github.io/docs/wasm-bindgen/introduction.html)
+        * [web-sys File](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.File.html#)
+        * [js-sys](https://docs.rs/js-sys/latest/js_sys)
+            * Example: https://yew.rs/docs/0.18.0/concepts/wasm-bindgen/web-sys
+    * [std::fs::File::create](https://doc.rust-lang.org/std/fs/struct.File.html#method.create)
+
+* Credits:
+    * Maciej Hirsz

examples/invoice/Trunk.toml

@@ -0,0 +1,6 @@
+[tools]
+wasm_bindgen = "0.2.84"
+
+[build]
+filehash = false
+pattern_script = "<script type=\"module\">import init, { koboldCallback } from '{base}{js}';init('{base}{wasm}');window.koboldCallback = koboldCallback;</script>"

examples/invoice/data/details.csv

@@ -0,0 +1,2 @@
+#details,the invoice date,invoice number,name person from,organisation name from,organisation address from,email from,name person attention to,title to,organisation name to,email to
+01.04.2023,0001,luke,clawbird,2 metaverse ave,[email protected],recipient_name,director,nftverse,[email protected]

examples/invoice/data/main.csv

@@ -0,0 +1,3 @@
+#main,description,total,qr
+task1,10,0x0000000000000000000000000000000000000000|h160
+task2,20,0x1000000000000000000000000000000000000000|h160