create-skybridge 0.0.0-dev.e0ed208 → 0.0.0-dev.e38035c

package/template-ecom/web/src/widgets/ecom-carousel.tsx

@@ -0,0 +1,181 @@
+import "@/index.css";
+
+import { useState } from "react";
+import {
+  mountWidget,
+  useLayout,
+  useOpenExternal,
+  useRequestModal,
+  useUser,
+  useWidgetState,
+} from "skybridge/web";
+import { useToolInfo } from "../helpers.js";
+
+const translations: Record<string, Record<string, string>> = {
+  en: {
+    loading: "Loading products...",
+    noProducts: "No product found",
+    addToCart: "Add to cart",
+    removeFromCart: "Remove",
+  },
+  fr: {
+    loading: "Chargement des produits...",
+    noProducts: "Aucun produit trouvé",
+    addToCart: "Ajouter",
+    removeFromCart: "Retirer",
+  },
+  es: {
+    loading: "Cargando productos...",
+    noProducts: "No se encontraron productos",
+    addToCart: "Añadir",
+    removeFromCart: "Quitar",
+  },
+  de: {
+    loading: "Produkte werden geladen...",
+    noProducts: "Keine Produkte gefunden",
+    addToCart: "Hinzufügen",
+    removeFromCart: "Entfernen",
+  },
+};
+
+const CHECKOUT_URL = "https://alpic.ai";
+
+function EcomCarousel() {
+  const { theme } = useLayout();
+  const { locale } = useUser();
+  const { open, isOpen } = useRequestModal();
+  const openExternal = useOpenExternal();
+
+  const lang = locale?.split("-")[0] ?? "en";
+
+  function translate(key: string) {
+    return translations[lang]?.[key] ?? translations.en[key];
+  }
+
+  const { output, isPending } = useToolInfo<"ecom-carousel">();
+  type Product = NonNullable<typeof output>["products"][number];
+  const [selected, setSelected] = useState<Product | null>(null);
+
+  const [cart, setCart] = useWidgetState<{ ids: number[] }>({ ids: [] });
+
+  function toggleCart(productId: number) {
+    if (cart.ids.includes(productId)) {
+      setCart({ ids: cart.ids.filter((id) => id !== productId) });
+    } else {
+      setCart({ ids: [...cart.ids, productId] });
+    }
+  }
+
+  if (isPending) {
+    return (
+      <div className={`${theme} container`}>
+        <div className="message">{translate("loading")}</div>
+      </div>
+    );
+  }
+
+  if (!output || output.products.length === 0) {
+    return (
+      <div className={`${theme} container`}>
+        <div className="message">{translate("noProducts")}</div>
+      </div>
+    );
+  }
+
+  if (isOpen) {
+    const cartItems: Product[] = [];
+    let total = 0;
+    for (const p of output.products) {
+      if (cart.ids.includes(p.id)) {
+        cartItems.push(p);
+        total += p.price;
+      }
+    }
+    const checkoutUrl = new URL(CHECKOUT_URL);
+    checkoutUrl.searchParams.set("cart", cart.ids.join(","));
+
+    return (
+      <div className={`${theme} checkout`}>
+        <div className="checkout-title">Order summary</div>
+        <div className="checkout-items">
+          {cartItems.map((item) => (
+            <div key={item.id} className="checkout-item">
+              <span>{item.title}</span>
+              <span>${item.price.toFixed(2)}</span>
+            </div>
+          ))}
+        </div>
+        <div className="checkout-total">
+          <span>Total</span>
+          <span>${total.toFixed(2)}</span>
+        </div>
+        <button
+          type="button"
+          className="checkout-button"
+          onClick={() => openExternal(checkoutUrl.toString())}
+        >
+          Checkout
+        </button>
+      </div>
+    );
+  }
+
+  const activeProduct = selected ?? output.products[0];
+
+  return (
+    <div className={`${theme} container`}>
+      <button
+        type="button"
+        className="cart-indicator"
+        onClick={() => open({ title: "Proceed to checkout ?" })}
+        disabled={cart.ids.length === 0}
+      >
+        🛒 {cart.ids.length}
+      </button>
+      <div className="carousel">
+        {output.products.map((product) => {
+          const inCart = cart.ids.includes(product.id);
+          return (
+            <div key={product.id} className="product-wrapper">
+              <button
+                type="button"
+                className={`product-card ${activeProduct?.id === product.id ? "selected" : ""}`}
+                onClick={() => setSelected(product)}
+              >
+                <img
+                  src={product.image}
+                  alt={product.title}
+                  className="product-image"
+                />
+                <div className="product-info">
+                  <div className="product-title">{product.title}</div>
+                  <div className="product-price">
+                    ${product.price.toFixed(2)}
+                  </div>
+                </div>
+              </button>
+              <button
+                type="button"
+                className={`cart-button ${inCart ? "in-cart" : ""}`}
+                onClick={() => toggleCart(product.id)}
+              >
+                {inCart ? translate("removeFromCart") : translate("addToCart")}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      <div className="product-detail">
+        <div className="detail-title">{activeProduct.title}</div>
+        <div className="detail-rating">
+          ⭐ {activeProduct.rating.rate} ({activeProduct.rating.count} reviews)
+        </div>
+        <div className="detail-description">{activeProduct.description}</div>
+      </div>
+    </div>
+  );
+}
+
+export default EcomCarousel;
+
+mountWidget(<EcomCarousel />);

package/template-ecom/web/vite.config.ts

@@ -0,0 +1,15 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { skybridge } from "skybridge/web";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [skybridge(), react()],
+  root: __dirname,
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/template/_gitignore

@@ -1,4 +0,0 @@
-node_modules/
-dist/
-.env*
-.DS_store

package/template/pnpm-workspace.yaml

@@ -1,7 +0,0 @@
-packages:
-  - "web"
-  - "server"
-sharedWorkspaceLockfile: false
-
-catalog:
-  skybridge: ^0.13.1

package/template/server/nodemon.json

@@ -1,5 +0,0 @@
-{
-  "watch": ["src/**/*"],
-  "ext": "ts,js,json",
-  "exec": "tsx src/index.ts"
-}

package/template/server/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@apps-sdk-template/server",
-  "version": "0.0.1",
-  "private": true,
-  "main": "dist/index.js",
-  "description": "Alpic MCP Server Template",
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "scripts": {
-    "dev": "nodemon",
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "inspector": "mcp-inspector http://localhost:3000/mcp"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.24.3",
-    "express": "^5.1.0",
-    "skybridge": "catalog:",
-    "vite": "^7.1.11",
-    "zod": "^4.1.13"
-  },
-  "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.17.5",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.15.30",
-    "nodemon": "^3.1.10",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
-  }
-}

package/template/server/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "jsx": "react",
-    "inlineSources": true
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["dist", "node_modules"]
-}

package/template/web/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@apps-sdk-template/web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "echo 'Not implemented",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "skybridge": "catalog:",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
-  },
-  "devDependencies": {
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "typescript": "~5.9.3",
-    "vite": "^7.1.11"
-  }
-}

package/template/web/tsconfig.app.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    /* Shadcn Config */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/template/web/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/template/web/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}