@commercebuild/extension 0.0.1

package/config/tailwind.config.js

@@ -0,0 +1,15 @@
+export default {
+  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  blocklist: [
+    "hidden",
+    "flex",
+    "max-w-2xl",
+    "max-w-7xl",
+    "sr-only",
+    "not-sr-only",
+  ],
+  plugins: [],
+};

package/config/tsconfig.extension.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "types": ["commercebuild-extension"]
+  }
+}

package/config/vite.config.mjs

@@ -0,0 +1,116 @@
+import { defineConfig, loadEnv } from "vite";
+import ViteHMRNotifierPlugin from "../scripts/vite-plugin-hmr-notifier.mjs";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+// import dts from "vite-plugin-dts";
+// import { fileURLToPath } from "url";
+import path from "path";
+import { existsSync } from "fs";
+import chalk from "chalk";
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = dirname(__filename);
+
+const jsEntry = path.resolve(process.cwd(), "src/index.js");
+const tsEntry = path.resolve(process.cwd(), "src/index.ts");
+const entryFile = existsSync(tsEntry) ? tsEntry : jsEntry;
+
+const baseBuildConfig = {
+  lib: {
+    entry: entryFile,
+    name: "CBExtensionComponents",
+    formats: ["umd"],
+    fileName: (format, entryName) =>
+      `${entryName}.${format === "es" ? "mjs" : "js"}`,
+  },
+  minify: "esbuild",
+  sourcemap: false,
+  rollupOptions: {
+    output: {
+      assetFileNames: (assetInfo) => {
+        if (assetInfo.name.endsWith(".css")) {
+          return assetInfo.originalFileName || assetInfo.name || "asset.css";
+        }
+        return assetInfo.name;
+      },
+    },
+  },
+};
+
+const prodConfig = {
+  plugins: [
+    react({
+      jsxRuntime: "automatic",
+    }),
+    tailwindcss(),
+  ],
+  define: {
+    "process.env": {
+      NODE_ENV: JSON.stringify("production"),
+      NEXT_PUBLIC_IMAGE_DOMAINS: JSON.stringify(["*"]),
+    },
+  },
+  build: {
+    ...baseBuildConfig,
+    minify: "esbuild",
+    sourcemap: false,
+  },
+};
+
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const devPort = env.PORT || 25521;
+
+  if (command === "serve") {
+    if (!env.COMMERCEBUILD_STORE_URL) {
+      throw new Error("Please setup COMMERCEBUILD_STORE_URL");
+    }
+    const serverUrl = `${env.COMMERCEBUILD_STORE_URL}${
+      env.COMMERCEBUILD_STORE_URL.includes("?") ? "&" : "?"
+    }devSource=http://localhost:${devPort}`;
+
+    console.log(
+      `\n  ${chalk.green("commercebuild extension")} ${chalk.gray("ready")}:`
+    );
+    console.log(
+      `${chalk.green("  ➜ ")} ${chalk.white("Open Url:")} ${chalk.blue(serverUrl)}\n`
+    );
+    return {
+      root: ".",
+      plugins: [
+        ViteHMRNotifierPlugin(),
+        react({
+          jsxRuntime: "automatic",
+        }),
+        tailwindcss(),
+      ],
+      define: {
+        "process.env": {
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+          NEXT_PUBLIC_IMAGE_DOMAINS: JSON.stringify(["*"]),
+        },
+      },
+      server: {
+        port: devPort,
+        open: serverUrl,
+        cors: true,
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods":
+            "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+          "Access-Control-Allow-Headers":
+            "X-Requested-With, content-type, Authorization",
+        },
+      },
+      build: {
+        ...baseBuildConfig,
+      },
+      // resolve: {
+      //   alias: {
+      //     "@": path.resolve(__dirname, "src"),
+      //   },
+      // },
+      logLevel: "silent",
+    };
+  }
+  return prodConfig;
+});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@commercebuild/extension",
+  "version": "0.0.1",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts"
+    },
+    "./config/tailwind.config.js": "./config/tailwind.config.js",
+    "./config/tsconfig.extension.json": "./config/tsconfig.extension.json"
+  },
+  "dependencies": {
+    "@commercebuild/ui": "^0.0.5",
+    "@commercebuild/platform-api": "^0.0.3",
+    "@headlessui/react": "^2.2.4",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^22.15.30",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/ws": "^8.18.1",
+    "@vitejs/plugin-react": "^4.5.2",
+    "chalk": "^5.4.1",
+    "esbuild": "^0.20.0",
+    "lucide-react": "^0.525.0",
+    "next": "^15.3.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.2",
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4",
+    "ws": "^8.18.3"
+  },
+  "bin": {
+    "commercebuild-extension": "./scripts/cli.js"
+  }
+}

package/scripts/cli.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process";
+import path from "path";
+import { fileURLToPath } from "url";
+import { displayError } from "./utils.mjs";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const args = process.argv.slice(2);
+
+if (args.includes("dev")) {
+  try {
+    const viteConfigPath = path.resolve(__dirname, "../config/vite.config.mjs");
+    execSync(`vite build --config ${viteConfigPath}`, { stdio: "inherit" });
+    execSync(`vite --config ${viteConfigPath}`, { stdio: "inherit" });
+  } catch (error) {
+    displayError("Failed to start commercebuild extension server:", error);
+  }
+} else if (args.includes("build")) {
+  try {
+    const viteConfigPath = path.resolve(__dirname, "../config/vite.config.mjs");
+    execSync(`vite build --config ${viteConfigPath}`, { stdio: "inherit" });
+  } catch (error) {
+    displayError("Failed to build with commercebuild extension:", error);
+  }
+} else {
+  displayError(
+    "No 'dev' or 'build' argument provided. Skipping commercebuild extension start."
+  );
+}

package/scripts/utils.mjs

@@ -0,0 +1,5 @@
+import chalk from "chalk";
+export const displayError = (msg, error) => {
+  console.error(chalk.red(msg));
+  if (error) console.debug(error);
+};

package/scripts/vite-plugin-hmr-notifier.mjs

@@ -0,0 +1,44 @@
+import { build } from "vite";
+import { WebSocketServer } from "ws";
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default function ViteHMRNotifierPlugin() {
+  return {
+    name: "vite-hmr-notifier",
+    configureServer(server) {
+      const wss = new WebSocketServer({ noServer: true });
+      server.httpServer.on("upgrade", (request, socket, head) => {
+        if (request.url === "/hmr-notifier") {
+          wss.handleUpgrade(request, socket, head, (ws) => {
+            wss.emit("connection", ws, request);
+          });
+        }
+      });
+      console.debug("[hmr-notifier] WebSocket mounted at /hmr-notifier");
+      let building = false;
+      server.watcher.on("change", async (file) => {
+        if (building) return;
+        building = true;
+        console.debug(`[hmr-notifier] File changed: ${file}, Rebuilding...`);
+        try {
+          await build({
+            configFile: path.resolve(__dirname, "../config/vite.config.mjs"),
+            logLevel: "silent",
+          });
+          console.debug(`[hmr-notifier] Build finished, notifying clients...`);
+          wss.clients.forEach((client) => {
+            if (client.readyState === 1) {
+              client.send(JSON.stringify({ type: "reload-remote-component" }));
+            }
+          });
+        } catch (err) {
+          console.error(`[hmr-notifier] Build failed:`, err);
+        }
+        building = false;
+      });
+    },
+  };
+}

package/types/category.d.ts

@@ -0,0 +1,7 @@
+import { catalog_v1 } from "@commercebuild/platform-api";
+
+declare global {
+  type Category = catalog_v1.CatalogHierarchyBrandCategoryDto;
+}
+
+export {};

package/types/global.d.ts

@@ -0,0 +1,71 @@
+import NextLink from "next/link";
+import NextImage from "next/image";
+import * as uis from "@commercebuild/ui";
+import * as icons from "lucide-react";
+import * as React from "react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+// import { Button } from "@commercebuild/ui";
+// import * as categoryTypes from "./category";
+
+declare global {
+  const cb: {
+    version: string;
+    React: typeof React;
+    utils: {
+      convertProductItemToCartRequestItem;
+      tlink;
+      tmsg;
+      router;
+      displayMoney;
+      cn;
+    };
+    com: {
+      Cart: {
+        AddToCart;
+      };
+      Category: {
+        CategoryProducts;
+        CategoryProduct;
+        CategoryBreadcrumb;
+        CategoryTitle;
+        CategorySidebar;
+        CategorySort;
+        CategoryProductsPageSize;
+      };
+      Product: {
+        ProductTitle;
+        ProductImages;
+        ProductPrice;
+        ProductStockStatus;
+        ProductStockQuantity;
+        ProductRating;
+        ProductDescription;
+        ProductTabs;
+        ProductQuantityInput;
+        StandardProductAddToCart;
+        VariantProductAddToCart;
+        ProductAddToFavorite;
+        ProductMakeOffer;
+        ProductRelatedProducts;
+      };
+    };
+    ui: {
+      icons: { [K in keyof typeof icons]: (typeof icons)[K] };
+      Link: typeof NextLink;
+      Image: typeof NextImage;
+      Disclosure: typeof Disclosure;
+      DisclosureButton: typeof DisclosureButton;
+      DisclosurePanel: typeof DisclosurePanel;
+    } & { [K in keyof typeof uis]: (typeof uis)[K] };
+  };
+
+  interface Window {
+    cb: typeof cb;
+  }
+}
+
+export {};

package/types/index.d.ts

@@ -0,0 +1,3 @@
+import "./global";
+import "./product";
+import "./category";

package/types/product.d.ts

@@ -0,0 +1,14 @@
+import { catalog_v1 } from "@commercebuild/platform-api";
+
+declare global {
+  interface Product extends catalog_v1.CatalogProductSearchProduct {
+    image: Required<
+      Pick<catalog_v1.CatalogProductSearchProduct["details"]["images"], "main">
+    >["main"];
+    originalPrice?: catalog_v1.CatalogPriceItemDto;
+    formattedPrice: string;
+    href: string;
+  }
+}
+
+export {};