create-skybridge 0.0.0-dev.b0a1d24 → 0.0.0-dev.b0a6e24

package/template-ecom/server/src/middleware.ts

@@ -1,54 +0,0 @@
-import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import type { NextFunction, Request, Response } from "express";
-
-import type { McpServer } from "skybridge/server";
-
-export const mcp =
-  (server: McpServer) =>
-  async (req: Request, res: Response, next: NextFunction) => {
-    // Only handle requests to the /mcp path
-    if (req.path !== "/mcp") {
-      return next();
-    }
-
-    if (req.method === "POST") {
-      try {
-        const transport = new StreamableHTTPServerTransport({
-          sessionIdGenerator: undefined,
-        });
-
-        res.on("close", () => {
-          transport.close();
-        });
-
-        await server.connect(transport);
-
-        await transport.handleRequest(req, res, req.body);
-      } catch (error) {
-        console.error("Error handling MCP request:", error);
-        if (!res.headersSent) {
-          res.status(500).json({
-            jsonrpc: "2.0",
-            error: {
-              code: -32603,
-              message: "Internal server error",
-            },
-            id: null,
-          });
-        }
-      }
-    } else if (req.method === "GET" || req.method === "DELETE") {
-      res.writeHead(405).end(
-        JSON.stringify({
-          jsonrpc: "2.0",
-          error: {
-            code: -32000,
-            message: "Method not allowed.",
-          },
-          id: null,
-        }),
-      );
-    } else {
-      next();
-    }
-  };

package/template-ecom/server/src/server.ts

@@ -1,73 +0,0 @@
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-interface Product {
-  id: number;
-  title: string;
-  price: number;
-  description: string;
-  category: string;
-  image: string;
-  rating: {
-    rate: number;
-    count: number;
-  };
-}
-
-const server = new McpServer(
-  {
-    name: "ecom-carousel-app",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-).registerWidget(
-  "ecom-carousel",
-  {
-    description: "E-commerce Product Carousel",
-  },
-  {
-    description: "Display a carousel of products from the store.",
-    inputSchema: {
-      category: z
-        .enum(["electronics", "jewelery", "men's clothing", "women's clothing"])
-        .optional()
-        .describe("Filter by product category"),
-      maxPrice: z.number().optional().describe("Maximum price filter"),
-    },
-  },
-  async ({ category, maxPrice }) => {
-    try {
-      const response = await fetch("https://fakestoreapi.com/products");
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-
-      const products: Product[] = await response.json();
-      const filtered: Product[] = [];
-
-      for (const product of products) {
-        if (category && product.category !== category) {
-          continue;
-        }
-        if (maxPrice !== undefined && product.price > maxPrice) {
-          continue;
-        }
-        filtered.push(product);
-      }
-
-      return {
-        structuredContent: { products: filtered },
-        content: [{ type: "text", text: JSON.stringify(filtered) }],
-        isError: false,
-      };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
-
-export default server;
-export type AppType = typeof server;

package/template-ecom/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "noEmit": true
-  },
-  "include": ["server/src", "web/src", "web/vite.config.ts"],
-  "exclude": ["dist", "node_modules"]
-}

package/template-ecom/tsconfig.server.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "outDir": "server/dist",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["server/src"],
-  "exclude": ["dist", "node_modules"]
-}

package/template-ecom/web/src/helpers.ts

@@ -1,4 +0,0 @@
-import { generateHelpers } from "skybridge/web";
-import type { AppType } from "../../server/src/server";
-
-export const { useToolInfo } = generateHelpers<AppType>();

package/template-ecom/web/src/index.css

@@ -1,178 +0,0 @@
-.message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 1rem;
-  padding: 1rem;
-  font-family: sans-serif;
-  border-radius: 8px;
-}
-
-.message.light {
-  color: #555;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.message.dark {
-  color: #ccc;
-  background: rgba(40, 40, 40, 0.95);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  height: auto;
-}
-
-.carousel {
-  display: flex;
-  gap: 1rem;
-  overflow-x: auto;
-  padding: 1rem;
-  scroll-snap-type: x mandatory;
-  margin-left: 1rem;
-}
-
-.product-card {
-  flex: 0 0 150px;
-  border: none;
-  border-radius: 8px;
-  overflow: hidden;
-  scroll-snap-align: start;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  padding: 0;
-  text-align: left;
-}
-
-.product-card.light {
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.product-card.light:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.product-card.dark {
-  background: #2a2a2a;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.product-card.dark:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-.product-card:hover {
-  transform: translateY(-2px);
-}
-
-.product-card.selected {
-  border-bottom: 5px solid mediumseagreen;
-}
-
-.product-image {
-  width: 100%;
-  height: 120px;
-  object-fit: contain;
-  padding: 0.5rem;
-  display: block;
-  box-sizing: border-box;
-}
-
-.product-image.light {
-  background: #f9f9f9;
-}
-
-.product-image.dark {
-  background: #333;
-}
-
-.product-info {
-  padding: 0.75rem;
-}
-
-.product-title {
-  font-size: 0.75rem;
-  font-family: sans-serif;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.product-title.light {
-  color: #333;
-}
-
-.product-title.dark {
-  color: #eee;
-}
-
-.product-price {
-  font-size: 0.875rem;
-  font-family: sans-serif;
-  font-weight: bold;
-  color: mediumseagreen;
-  margin-top: 0.25rem;
-}
-
-.product-detail {
-  margin: 0 1rem 1rem;
-  padding: 1rem;
-  border-radius: 8px;
-  font-family: sans-serif;
-}
-
-.product-detail.light {
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.product-detail.dark {
-  background: #2a2a2a;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.detail-title {
-  font-size: 1rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
-
-.detail-title.light {
-  color: #333;
-}
-
-.detail-title.dark {
-  color: #eee;
-}
-
-.detail-rating {
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-}
-
-.detail-rating.light {
-  color: #666;
-}
-
-.detail-rating.dark {
-  color: #aaa;
-}
-
-.detail-description {
-  font-size: 0.8rem;
-  line-height: 1.4;
-}
-
-.detail-description.light {
-  color: #555;
-}
-
-.detail-description.dark {
-  color: #bbb;
-}

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

@@ -1,109 +0,0 @@
-import "@/index.css";
-
-import { useState } from "react";
-import { mountWidget, useLayout, useUser } from "skybridge/web";
-import { useToolInfo } from "../helpers.js";
-
-const translations: Record<string, Record<string, string>> = {
-  en: {
-    loading: "Loading products...",
-    noProducts: "No product found",
-  },
-  fr: {
-    loading: "Chargement des produits...",
-    noProducts: "Aucun produit trouvé",
-  },
-  es: {
-    loading: "Cargando productos...",
-    noProducts: "No se encontraron productos",
-  },
-  de: {
-    loading: "Produkte werden geladen...",
-    noProducts: "Keine Produkte gefunden",
-  },
-};
-
-function EcomCarousel() {
-  const { theme } = useLayout();
-  const { locale } = useUser();
-
-  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);
-
-  function cn(...classes: string[]) {
-    return [theme, ...classes].filter(Boolean).join(" ");
-  }
-
-  if (isPending) {
-    return (
-      <div className={cn("container")}>
-        <div className={cn("message")}>{translate("loading")}</div>
-      </div>
-    );
-  }
-
-  if (!output || output.products.length === 0) {
-    return (
-      <div className={cn("container")}>
-        <div className={cn("message")}>{translate("noProducts")}</div>
-      </div>
-    );
-  }
-
-  const activeProduct = selected ?? output.products[0];
-
-  return (
-    <div className={cn("container")}>
-      <div className={cn("carousel")}>
-        {output.products.map((product) => (
-          <button
-            type="button"
-            key={product.id}
-            className={cn(
-              "product-card",
-              activeProduct?.id === product.id ? "selected" : "",
-            )}
-            onClick={() =>
-              setSelected(selected?.id === product.id ? null : product)
-            }
-          >
-            <img
-              src={product.image}
-              alt={product.title}
-              className={cn("product-image")}
-            />
-            <div className={cn("product-info")}>
-              <div className={cn("product-title")}>{product.title}</div>
-              <div className={cn("product-price")}>
-                ${product.price.toFixed(2)}
-              </div>
-            </div>
-          </button>
-        ))}
-      </div>
-      {activeProduct && (
-        <div className={cn("product-detail")}>
-          <div className={cn("detail-title")}>{activeProduct.title}</div>
-          <div className={cn("detail-rating")}>
-            ⭐ {activeProduct.rating.rate} ({activeProduct.rating.count}{" "}
-            reviews)
-          </div>
-          <div className={cn("detail-description")}>
-            {activeProduct.description}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default EcomCarousel;
-
-mountWidget(<EcomCarousel />);

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

@@ -1,15 +0,0 @@
-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"),
-    },
-  },
-});