Kitchen sink example

README.md

@@ -19,6 +19,22 @@ It features:
 - 🔬️ **Small Surface** The API does not offer more than what is needed, keeping the learning curve and bloat to a
   minimum
 
+The goal is to allow you to create beautiful and complex user experiences, while achieving clean code that
+separates concerns and is easy to maintain!
+
+Easily implement:
+
+- Reactive data stores
+- Undo
+- Optimistic updates
+- Data caching through storage (localStorage, cookies, etc)
+
+<div style="text-align: center;">
+    <img width="500" src="./doc-assets/full-example.gif" alt="Kitchen Sink Example" />
+</div>
+
+> To see the code for the example above, check the `examples/shopping-cart` folder.
+
 # Getting Started
 
 Copy the `force-app/lwc/signals` folder to your project.
@@ -720,6 +736,24 @@ storage, and the setter should set the value in the storage.
 Notice that any additional properties you add to the object returned by `createStorage` will be available in the
 returned object. That is how we can add the `undo` function to the `counter` signal and use it to undo the changes.
 
+## Examples
+
+You can find full working examples in the `examples` folder.
+
+For a full kitchen sink example that combines all the concepts, you can check the `shopping-cart` example.
+
+It includes:
+
+- Getting data from the server
+- Optimistic updates by updating the local value on change
+- Re-updating the value when the server responds
+- Undo functionality by storing the state history in a custom signal
+- Caching the data in the `localStorage` for a fast first load.
+
+<div style="text-align: center;">
+    <img width="500" src="./doc-assets/kitchen-sink.gif" alt="Kitchen Sink Example" />
+</div>
+
 # Contributing
 
 Contributions are welcome! Please read the [Contributing Guide](CONTRIBUTING.md) for more information.

examples/shopping-cart/lwc/shoppingCartDetails/states/empty.html

@@ -1,17 +1,27 @@
 <!-- empty -->
 <template>
-    <div class="mx-auto max-w-4xl px-4">
-        <button type="button"
-                class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"
-                 aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                      d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
-            </svg>
+  <div class="mx-auto max-w-4xl px-4">
+    <button
+      type="button"
+      class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+    >
+      <svg
+        class="mx-auto h-12 w-12 text-gray-400"
+        stroke="currentColor"
+        fill="none"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+        />
+      </svg>
 
-            <span class="mt-2 block text-sm font-semibold text-gray-900">
-            You have nada in your shopping cart bro. Add some items to get started.
-        </span>
-        </button>
-    </div>
+      <span class="mt-2 block text-sm font-semibold text-gray-900">
+        You have nothing in your shopping cart.
+      </span>
+    </button>
+  </div>
 </template>