From eb39b000d7f0ef16d0b83ec44d3926f4690fd08f Mon Sep 17 00:00:00 2001
From: Jonathan Kelley <jkelleyrtp@gmail.com>
Date: Thu, 1 Jul 2021 16:03:27 -0400
Subject: [PATCH] wip: example

---
 examples/README.md            | 24 ++++++++++++++++++++++++
 examples/showcase.rs          | 26 ++++++++++++++++++++++++++
 packages/web/examples/anim.rs | 16 ++++++----------
 3 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 examples/showcase.rs

diff --git a/examples/README.md b/examples/README.md
index 2f1fc982c..69e03b338 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -3,3 +3,27 @@
 Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be built with the Dioxus CLI to preview features that only a native bundle can handle.
 
 List of examples:
+
+| Example                                 | What it does |
+| --------------------------------------- | ------------ |
+| [The basics](./basics.rs)               | this does    |
+| [fine grained reactivity](./signals.rs) | this does    |
+| Global State Management                 | this does    |
+| Virtual Refs                            | this does    |
+| Inline Styles                           | this does    |
+| Conditional Rendering                   | this does    |
+| Maps/Iterators                          | this does    |
+| Render To string                        | this does    |
+| Component Children                      | this does    |
+| Function Driven children                | this does    |
+| Memoization                             | this does    |
+| Borrowed Data                           | this does    |
+| Fragments                               | this does    |
+| Null/None Components                    | this does    |
+| Spread Pattern for props                | this does    |
+| Controlled Inputs                       | this does    |
+| Custom Elements                         | this does    |
+| Testing And debugging                   | this does    |
+| Asynchronous Data                       | this does    |
+| Fiber/Scheduled Rendering               | this does    |
+| CSS Compiled Styles                     | this does    |
diff --git a/examples/showcase.rs b/examples/showcase.rs
new file mode 100644
index 000000000..3d128893e
--- /dev/null
+++ b/examples/showcase.rs
@@ -0,0 +1,26 @@
+//! A Showcase of all the useful examples
+//!
+//!
+//!
+
+fn main() {
+    use_css_consumer(&cx, "mystyle");
+
+    // at the global head of the app
+    use_css_provider(&cx, |cfg| {});
+    use_recoil_provider(&cx, |cfg| {});
+
+    let recoil = use_recoil_api(&cx, |_| {});
+    use_websocket_connection(&cx, move |cfg| {
+        cfg.on_receive(move |event| match event.data::<Msg>() {
+            Ok(msg) => match msg {
+                a => recoil.set(&ATOM, 10),
+                c => recoil.set(&ATOM, 20),
+                _ => {}
+            },
+            Err(e) => {}
+        });
+        cfg.on_close(move |event| {});
+        cfg.on_open(move |event| {});
+    });
+}
diff --git a/packages/web/examples/anim.rs b/packages/web/examples/anim.rs
index 2f9f3f8e9..a441f5827 100644
--- a/packages/web/examples/anim.rs
+++ b/packages/web/examples/anim.rs
@@ -29,7 +29,7 @@ fn main() {
     })
 }
 
-// use signals to directly update values outside of the diffing phase
+// Animations with signals
 fn signal_based(cx: ()) {
     const InitPos: (i32, i32) = (0, 0);
     const EndPos: (i32, i32) = (100, 200);
@@ -38,16 +38,12 @@ fn signal_based(cx: ()) {
 
     cx.render(rsx! {
         div {
-            style {
+            style: [
                 width: spring.0,
-                width: spring.1
-            }
-            button { "Reset"
-                onclick: move |_| spring.set(InitPos)
-            }
-            button { "Animate"
-                onclick: move |_| spring.set(EndPos)
-            }
+                height: spring.1
+            ]
+            button { onclick: move |_| spring.set(InitPos), "Reset" }
+            button { onclick: move |_| spring.set(EndPos), "Animate" }
         }
     })
 }