docs: shopping cart demo

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+docs/lib

.vscode/settings.json

@@ -3,5 +3,7 @@
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "html.format.maxPreserveNewLines": 0,
+  "html.format.wrapAttributes": "preserve-aligned",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

docs/app.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef */
+import CartController from "./cart-controller.js";
+import CartItemController from "./cart-item-controller.js";
+import { Application } from "./lib/stimulus.js";
+
+window.Stimulus = Application.start();
+Stimulus.register("cart", CartController);
+Stimulus.register("cart-item", CartItemController);

docs/cart-controller.js

@@ -0,0 +1,57 @@
+import { useStimulusReactive } from "./lib/stimulus-reactive.js";
+import { Controller } from "./lib/stimulus.js";
+
+export default class extends Controller {
+  static values = {
+    shipping: Number,
+    taxRate: Number,
+  };
+  static targets = [
+    "checkout",
+    "subtotal",
+    "shipping",
+    "tax",
+    "total",
+    "noItemsMessage",
+  ];
+  static outlets = ["cart-item"];
+
+  static afterLoad(identifier, application) {
+    useStimulusReactive(identifier, application);
+  }
+
+  connect() {
+    const subtotal = this.computed(() =>
+      this.cartItemOutlets.reduce(
+        (total, item) => total + item.priceValue * item.quantityValue,
+        0
+      )
+    );
+
+    const tax = this.computed(() => (subtotal.value * this.taxRateValue) / 100);
+
+    const shipping = this.computed(() =>
+      subtotal.value ? this.shippingValue : 0
+    );
+
+    const total = this.computed(
+      () => subtotal.value + tax.value + shipping.value
+    );
+
+    this.effect(() => {
+      this.subtotalTarget.textContent = subtotal.value.toFixed(2);
+      this.shippingTarget.textContent = shipping.value.toFixed(2);
+      this.taxTarget.textContent = tax.value.toFixed(2);
+      this.totalTarget.textContent = total.value.toFixed(2);
+    });
+
+    this.effect(() => {
+      this.checkoutTarget.disabled = total.value <= 0;
+      if (total.value > 0) {
+        this.noItemsMessageTarget.classList.add("hidden");
+      } else {
+        this.noItemsMessageTarget.classList.remove("hidden");
+      }
+    });
+  }
+}

docs/cart-item-controller.js

@@ -0,0 +1,31 @@
+import { useStimulusReactive } from "./lib/stimulus-reactive.js";
+import { Controller } from "./lib/stimulus.js";
+
+export default class extends Controller {
+  static targets = ["total"];
+  static values = {
+    price: Number,
+    quantity: { type: Number, default: 1 },
+  };
+
+  static afterLoad(identifier, application) {
+    useStimulusReactive(identifier, application);
+  }
+
+  connect() {
+    this.effect(
+      () =>
+        (this.totalTarget.textContent = (
+          this.priceValue * this.quantityValue
+        ).toFixed(2))
+    );
+  }
+
+  changeQuantity(e) {
+    this.quantityValue = parseInt(e.target.value);
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}