blixify-ui-web-mcp 0.1.1

package/lib/components/template/userRankingDashboard/userRankingDashboard.stories.tsx

@@ -0,0 +1,481 @@
+import { storiesOf } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../../action/button";
+import { ButtonGroup } from "../../action/buttonGroup";
+import { LineChart } from "../../chart/lineChart";
+import { Select } from "../../input/select";
+import { TextInput } from "../../input/textInput";
+import { Tabs } from "../../navigation/tabs";
+import { Container } from "../../structure/container";
+
+const stories = storiesOf("Template", module).addParameters({
+  docs: {
+    description: {
+      component:
+        "Full-page admin dashboard templates combining multiple components into ready-to-use layouts. These templates demonstrate real-world compositions of Tabs, LineChart, ButtonGroup, Select, TextInput, and Container for user analytics and leaderboard views.",
+    },
+  },
+});
+
+interface User {
+  id: string;
+  name: string;
+  img: string;
+  totalDeposits: string;
+  totalWithdrawals: string;
+  agreementLength: string;
+  timeOnPlatform: string;
+}
+
+const USERS: User[] = [
+  {
+    id: "250373435",
+    name: "Samantha Williams",
+    img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$18,783.33",
+    totalWithdrawals: "$9,876.54",
+    agreementLength: "124 days",
+    timeOnPlatform: "242 days",
+  },
+  {
+    id: "340434554",
+    name: "John Smith",
+    img: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$22,100.00",
+    totalWithdrawals: "$11,200.00",
+    agreementLength: "98 days",
+    timeOnPlatform: "310 days",
+  },
+  {
+    id: "562953943",
+    name: "Tim Samuels",
+    img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$9,450.00",
+    totalWithdrawals: "$3,200.00",
+    agreementLength: "60 days",
+    timeOnPlatform: "180 days",
+  },
+  {
+    id: "736242242",
+    name: "Sandra Hagan",
+    img: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$14,320.00",
+    totalWithdrawals: "$6,800.00",
+    agreementLength: "112 days",
+    timeOnPlatform: "200 days",
+  },
+  {
+    id: "2263456455",
+    name: "John Smith",
+    img: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$7,890.00",
+    totalWithdrawals: "$2,100.00",
+    agreementLength: "45 days",
+    timeOnPlatform: "90 days",
+  },
+  {
+    id: "1231234964",
+    name: "Ali Hammad",
+    img: "https://images.unsplash.com/photo-1463453091185-61582044d556?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$31,000.00",
+    totalWithdrawals: "$15,400.00",
+    agreementLength: "200 days",
+    timeOnPlatform: "400 days",
+  },
+  {
+    id: "1231234965",
+    name: "Manager Dep A",
+    img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$31,000.00",
+    totalWithdrawals: "$15,400.00",
+    agreementLength: "200 days",
+    timeOnPlatform: "400 days",
+  },
+  {
+    id: "1231234966",
+    name: "Executive Dep B",
+    img: "https://images.unsplash.com/photo-1614204424926-196a80bf0be8?w=64&h=64&fit=facearea&facepad=2&q=80",
+    totalDeposits: "$31,000.00",
+    totalWithdrawals: "$15,400.00",
+    agreementLength: "200 days",
+    timeOnPlatform: "400 days",
+  },
+];
+
+const CHART_CATEGORIES = [
+  "Oct 1",
+  "Oct 5",
+  "Oct 10",
+  "Oct 15",
+  "Oct 20",
+  "Oct 25",
+  "Oct 30",
+];
+
+const DEPOSITS_DATA = [4200, 5100, 5800, 6100, 5400, 4900, 5600];
+const WITHDRAWALS_DATA = [2800, 3200, 3500, 2100, 3000, 3800, 4200];
+const PROFITS_DATA = [3100, 4500, 5200, 4251, 3800, 5500, 6300];
+
+const NAV_TABS = [
+  { id: "dashboard", name: "DASHBOARD", href: "#" },
+  { id: "numbers", name: "NUMBERS", href: "#" },
+  { id: "deposits", name: "DEPOSITS AND WITHDRAWALS", href: "#" },
+  { id: "demographics", name: "DEMOGRAPHICS", href: "#" },
+  { id: "referrals", name: "REFERRALS", href: "#" },
+  { id: "users", name: "USERS", href: "#" },
+];
+
+const CHART_TABS = [
+  { id: "Week", name: "Week" },
+  { id: "Month", name: "Month" },
+  { id: "Year", name: "Year" },
+  { id: "All time", name: "All time" },
+];
+
+const RANKING_BADGES = ["🥇", "🥈", "🥉"];
+
+const RANKED_USERS = [...USERS]
+  .map((u) => ({
+    ...u,
+    score: Math.round(
+      (parseFloat(u.totalDeposits.replace(/[$,]/g, "")) /
+        parseFloat(u.timeOnPlatform.replace(" days", ""))) *
+        10
+    ),
+  }))
+  .sort((a, b) => b.score - a.score);
+
+const ALL_USERS_ID = "all";
+
+// Pre-computed overall totals
+const OVERALL_STATS = {
+  totalDeposits: `$${USERS.reduce(
+    (s, u) => s + parseFloat(u.totalDeposits.replace(/[$,]/g, "")),
+    0
+  ).toLocaleString("en-US", { minimumFractionDigits: 2 })}`,
+  totalWithdrawals: `$${USERS.reduce(
+    (s, u) => s + parseFloat(u.totalWithdrawals.replace(/[$,]/g, "")),
+    0
+  ).toLocaleString("en-US", { minimumFractionDigits: 2 })}`,
+  totalUsers: `${USERS.length} users`,
+  avgTimeOnPlatform: `${Math.round(
+    USERS.reduce(
+      (s, u) => s + parseFloat(u.timeOnPlatform.replace(" days", "")),
+      0
+    ) / USERS.length
+  )} days avg`,
+};
+
+stories.add("User Ranking Dashboard", () => {
+  const [selectedId, setSelectedId] = useState<string>(ALL_USERS_ID);
+  const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState("users");
+  const [activeChartTab, setActiveChartTab] = useState("Month");
+
+  const isOverall = selectedId === ALL_USERS_ID;
+  const selectedUser = isOverall
+    ? null
+    : USERS.find((u) => u.id === selectedId) ?? null;
+
+  const filteredUsers = USERS.filter((u) =>
+    u.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const statsRow = isOverall
+    ? [
+        { label: "Total deposits", value: OVERALL_STATS.totalDeposits },
+        { label: "Total withdrawals", value: OVERALL_STATS.totalWithdrawals },
+        { label: "Total users", value: OVERALL_STATS.totalUsers },
+        {
+          label: "Avg time on platform",
+          value: OVERALL_STATS.avgTimeOnPlatform,
+        },
+      ]
+    : [
+        { label: "Total deposits", value: selectedUser!.totalDeposits },
+        { label: "Total withdrawals", value: selectedUser!.totalWithdrawals },
+        { label: "Agreement length", value: selectedUser!.agreementLength },
+        { label: "Time on platform", value: selectedUser!.timeOnPlatform },
+      ];
+
+  return (
+    <Container bgColor="py-8 bg-white">
+      <h1 className="text-2xl font-semibold text-gray-900 mb-6">
+        User Ranking Dashboard
+      </h1>
+
+      <div>
+        {/* Nav tabs */}
+        <div>
+          <Tabs
+            tabs={NAV_TABS}
+            selectedId={activeTab}
+            onClick={(id) => setActiveTab(id)}
+          />
+        </div>
+
+        {/* Main content */}
+        <div className="flex flex-col lg:flex-row gap-5 py-4">
+          {/* Mobile: select dropdown */}
+          <div className="lg:hidden">
+            <Select
+              label="Select User"
+              value={selectedId}
+              placeholder="Select a user..."
+              options={[
+                {
+                  key: ALL_USERS_ID,
+                  label: "All Users",
+                  secondaryLabel: "Platform overview",
+                  image:
+                    "https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?w=64&h=64&fit=crop&q=80",
+                },
+                ...USERS.map((u) => ({
+                  key: u.id,
+                  label: u.name,
+                  secondaryLabel: `ID: ${u.id}`,
+                  image: u.img,
+                })),
+              ]}
+              type="button"
+              onChange={(id) => setSelectedId(id)}
+            />
+          </div>
+
+          {/* Desktop: user list */}
+          <div className="hidden lg:block w-60 flex-shrink-0 border-r pr-4 xl:w-72">
+            <p className="text-xs font-semibold text-primary-600 mb-3">
+              USERS ON THE PLATFORM
+            </p>
+            <TextInput
+              label=""
+              value={search}
+              type="text"
+              placeholder="Search for a user..."
+              showMagnifyIcon
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            <ul className="mt-3 space-y-1 max-h-96 overflow-y-auto">
+              {/* All Users option */}
+              <li
+                onClick={() => setSelectedId(ALL_USERS_ID)}
+                className={`flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors ${
+                  isOverall
+                    ? "bg-primary-50 border-l-2 border-primary-600"
+                    : "hover:bg-gray-50"
+                }`}
+              >
+                <div className="w-9 h-9 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0">
+                  <span className="text-primary-600 text-xs font-bold">
+                    ALL
+                  </span>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={`text-sm font-medium ${
+                      isOverall ? "text-primary-700" : "text-gray-900"
+                    }`}
+                  >
+                    All Users
+                  </p>
+                  <p className="text-xs text-gray-400">Platform Overview</p>
+                </div>
+              </li>
+              {filteredUsers.map((user) => {
+                const isSelected = user.id === selectedId;
+                const rank =
+                  RANKED_USERS.findIndex((u) => u.id === user.id) + 1;
+                return (
+                  <li
+                    key={user.id}
+                    onClick={() => setSelectedId(user.id)}
+                    className={`flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors ${
+                      isSelected
+                        ? "bg-primary-50 border-l-2 border-primary-600"
+                        : "hover:bg-gray-50"
+                    }`}
+                  >
+                    <img
+                      src={user.img}
+                      alt={user.name}
+                      className="w-9 h-9 rounded-full object-cover flex-shrink-0"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p
+                        className={`text-sm font-medium truncate ${
+                          isSelected ? "text-primary-700" : "text-gray-900"
+                        }`}
+                      >
+                        {user.name}
+                      </p>
+                      <p className="text-xs text-gray-400">ID: {user.id}</p>
+                    </div>
+                    <span className="text-sm flex-shrink-0">
+                      {rank <= 3 ? RANKING_BADGES[rank - 1] : `#${rank}`}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+
+          {/* Right panel */}
+          <div className="flex-1">
+            {/* Stats */}
+            <div className="pb-2 border-b mb-5">
+              <div className="flex items-center justify-between pb-3">
+                <h2 className="text-base font-semibold text-primary-600">
+                  {isOverall
+                    ? "Overall Stats"
+                    : `${selectedUser!.name}'s Stats`}
+                </h2>
+                {!isOverall && (
+                  <p className="text-xs text-gray-400">
+                    ID: {selectedUser!.id}
+                  </p>
+                )}
+              </div>
+              <div className="grid grid-cols-2 sm:flex sm:flex-nowrap sm:divide-x divide-gray-200">
+                {statsRow.map((stat) => (
+                  <div key={stat.label} className="px-4 py-3 sm:flex-1">
+                    <p className="text-xs text-gray-500">{stat.label}</p>
+                    <p className="text-sm font-bold text-gray-900 mt-1">
+                      {stat.value}
+                    </p>
+                  </div>
+                ))}
+                {!isOverall && (
+                  <div className="col-span-2 sm:col-span-1 sm:w-auto px-4 py-3 flex items-center justify-start sm:justify-center">
+                    <Button
+                      text="Transactions"
+                      type="normal"
+                      size="small"
+                      onClick={() => {}}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Ranking (overall) or Chart (specific user) */}
+            {isOverall ? (
+              <div className="flex flex-col-reverse lg:flex-row gap-5">
+                {/* Chart */}
+                <div className="flex-1">
+                  <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
+                    <p className="text-sm font-medium text-gray-700">
+                      Deposits, Withdrawals &amp; Profits
+                    </p>
+                    <ButtonGroup
+                      selection={CHART_TABS}
+                      selectedId={activeChartTab}
+                      variant="tag"
+                      onClick={(id) => setActiveChartTab(id)}
+                      size="small"
+                    />
+                  </div>
+                  <LineChart
+                    key={`overall-${activeTab}-${activeChartTab}-ranked`}
+                    title=""
+                    chartOnly
+                    categories={CHART_CATEGORIES}
+                    xaxisTitle=""
+                    yaxisTitle=""
+                    multiLineSeries={[
+                      { name: "Deposits", data: DEPOSITS_DATA, unit: "$" },
+                      {
+                        name: "Withdrawals",
+                        data: WITHDRAWALS_DATA,
+                        unit: "$",
+                      },
+                      { name: "Profits", data: PROFITS_DATA, unit: "$" },
+                    ]}
+                    colors={["#00c875", "#df2f4a", "#579bfc"]}
+                    disableAreaChart={false}
+                    chartHeight={280}
+                    legendPosition="bottom"
+                    showToolbar={false}
+                    hideGrid
+                    enableGradient
+                    hideOriginBorder
+                    hideWhiteDot
+                  />
+                </div>
+                {/* Leaderboard */}
+                <div className="flex-shrink-0 border-b pb-4 lg:p-0 lg:w-64 lg:border-0">
+                  <p className="text-sm font-medium text-gray-700 mb-3">
+                    Ranking
+                  </p>
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-2">
+                      Leaderboard
+                    </p>
+                    {RANKED_USERS.slice(0, 5).map((u, i) => (
+                      <div
+                        key={u.id}
+                        className="flex items-center gap-2 py-1.5 rounded-lg"
+                      >
+                        <span className="text-sm w-5 text-center flex-shrink-0">
+                          {i < 3 ? RANKING_BADGES[i] : `#${i + 1}`}
+                        </span>
+                        <img
+                          src={u.img}
+                          alt={u.name}
+                          className="w-7 h-7 rounded-full object-cover flex-shrink-0"
+                        />
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs font-medium truncate text-gray-800">
+                            {u.name}
+                          </p>
+                        </div>
+                        <span className="text-xs text-gray-500 flex-shrink-0">
+                          {u.score} pts
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
+                  <p className="text-sm font-medium text-gray-700">
+                    Deposits, Withdrawals &amp; Profits
+                  </p>
+                  <ButtonGroup
+                    selection={CHART_TABS}
+                    selectedId={activeChartTab}
+                    variant="tag"
+                    onClick={(id) => setActiveChartTab(id)}
+                  />
+                </div>
+                <LineChart
+                  key={`${selectedId}-${activeTab}-${activeChartTab}-ranked`}
+                  title=""
+                  chartOnly
+                  categories={CHART_CATEGORIES}
+                  xaxisTitle=""
+                  yaxisTitle=""
+                  multiLineSeries={[
+                    { name: "Deposits", data: DEPOSITS_DATA, unit: "$" },
+                    { name: "Withdrawals", data: WITHDRAWALS_DATA, unit: "$" },
+                    { name: "Profits", data: PROFITS_DATA, unit: "$" },
+                  ]}
+                  colors={["#00c875", "#df2f4a", "#579bfc"]}
+                  disableAreaChart={false}
+                  chartHeight={280}
+                  legendPosition="bottom"
+                  showToolbar={false}
+                  hideGrid
+                  enableGradient
+                  hideOriginBorder
+                  hideWhiteDot
+                />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+});

package/lib/mcp/server.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=server.d.ts.map

package/lib/mcp/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":""}

package/lib/mcp/server.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mcp_js_1 = require("@modelcontextprotocol/sdk/server/mcp.js");
+const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
+const getBackendComponent_1 = require("./tools/getBackendComponent");
+const getComponent_1 = require("./tools/getComponent");
+const listComponents_1 = require("./tools/listComponents");
+const listTemplates_1 = require("./tools/listTemplates");
+const suggestTemplate_1 = require("./tools/suggestTemplate");
+const server = new mcp_js_1.McpServer({
+    name: "blixify-ui-web-tools",
+    version: "1.0.0",
+});
+// INFO: inputSchema cast to any to avoid TS2589 deep type instantiation error on TS >=5.2
+const tools = [
+    getComponent_1.getComponentTool,
+    listComponents_1.listComponentsTool,
+    suggestTemplate_1.suggestTemplateTool,
+    getBackendComponent_1.getBackendComponentTool,
+    listTemplates_1.listTemplatesTool,
+];
+for (const tool of tools) {
+    server.registerTool(tool.name, {
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+    }, tool.handler);
+}
+async function main() {
+    const transport = new stdio_js_1.StdioServerTransport();
+    await server.connect(transport);
+}
+main().catch(console.error);
+//# sourceMappingURL=server.js.map

package/lib/mcp/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":";;AAAA,oEAAoE;AACpE,wEAAiF;AACjF,qEAAsE;AACtE,uDAAwD;AACxD,2DAA4D;AAC5D,yDAA0D;AAC1D,6DAA8D;AAE9D,MAAM,MAAM,GAAG,IAAI,kBAAS,CAAC;IAC3B,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,OAAO;CACjB,CAAC,CAAC;AAEH,0FAA0F;AAC1F,MAAM,KAAK,GAAG;IACZ,+BAAgB;IAChB,mCAAkB;IAClB,qCAAmB;IACnB,6CAAuB;IACvB,iCAAiB;CAClB,CAAC;AAEF,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;IACxB,MAAM,CAAC,YAAY,CACjB,IAAI,CAAC,IAAI,EACT;QACE,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,WAAW,EAAE,IAAI,CAAC,WAAkB;KACrC,EACD,IAAI,CAAC,OAAc,CACpB,CAAC;CACH;AAED,KAAK,UAAU,IAAI;IACjB,MAAM,SAAS,GAAG,IAAI,+BAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAClC,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC"}

package/lib/mcp/tools/getBackendComponent.d.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+export declare const getBackendComponentTool: {
+    name: string;
+    description: string;
+    inputSchema: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    handler(): Promise<{
+        content: {
+            type: "text";
+            text: string;
+        }[];
+    }>;
+};
+//# sourceMappingURL=getBackendComponent.d.ts.map

package/lib/mcp/tools/getBackendComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBackendComponent.d.ts","sourceRoot":"","sources":["../../../src/mcp/tools/getBackendComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAqDxB,eAAO,MAAM,uBAAuB;;;;;;;;;;CA6DnC,CAAC"}

package/lib/mcp/tools/getBackendComponent.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBackendComponentTool = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const zod_1 = require("zod");
+// At runtime __dirname is lib/mcp/tools; resolve up to project root then into lib/components/data
+const PROJECT_ROOT = path.resolve(__dirname, "../../../");
+const DATA_DIR = fs.existsSync(path.join(PROJECT_ROOT, "src/components/data"))
+    ? path.join(PROJECT_ROOT, "src/components/data")
+    : path.join(PROJECT_ROOT, "lib/components/data");
+/**
+ * Backend components are the data-layer components under src/components/data.
+ * We surface the ones that have a README or stories file, plus the dataWrapper
+ * which is the primary integration point for building dashboard pages.
+ */
+const BACKEND_COMPONENTS = {
+    dataWrapper: {
+        dir: path.join(DATA_DIR, "dataWrapper"),
+        description: "Primary wrapper for embedding data tables, forms, and views (list/read/update) into dashboard pages. Handles schema, backend config, navigation, and all view types.",
+    },
+    dataTemplate: {
+        dir: path.join(DATA_DIR, "dataTemplate"),
+        description: "Lower-level data component driven by a Space object from the Blixify backend. Use dataWrapper instead for custom integrations.",
+    },
+    queryForm: {
+        dir: path.join(DATA_DIR, "queryForm"),
+        description: "Standalone filter/query form component for building custom search UIs.",
+    },
+    readQuery: {
+        dir: path.join(DATA_DIR, "readQuery"),
+        description: "Read-only query component for fetching and displaying data.",
+    },
+    dataGraph: {
+        dir: path.join(DATA_DIR, "dataGraph"),
+        description: "Chart and graph components backed by live data queries.",
+    },
+};
+function readFileIfExists(filePath) {
+    return fs.existsSync(filePath) ? fs.readFileSync(filePath, "utf-8") : null;
+}
+function findStoriesFile(dir) {
+    if (!fs.existsSync(dir))
+        return null;
+    const found = fs
+        .readdirSync(dir)
+        .find((f) => f.endsWith(".stories.tsx") || f.endsWith(".stories.ts"));
+    return found ? path.join(dir, found) : null;
+}
+exports.getBackendComponentTool = {
+    name: "get_backend_component",
+    description: "Get documentation and usage examples for Blixify backend/data components used to build dashboard pages — e.g. DataTemplateWrapper for table listings, forms, and CRUD views with schema and workspace config.",
+    inputSchema: zod_1.z.object({}),
+    async handler() {
+        const sections = [
+            "# Blixify Backend Components\n",
+            "These components connect your UI to a MongoDB (or Firebase) backend. " +
+                "For most dashboard pages (table listings, read views, create/edit forms), " +
+                "**`DataTemplateWrapper`** (`dataWrapper`) is the recommended starting point.\n",
+        ];
+        // Overview table
+        const overviewLines = Object.entries(BACKEND_COMPONENTS).map(([name, { description }]) => `- **${name}**: ${description}`);
+        sections.push("## Available Components\n\n" + overviewLines.join("\n"));
+        // Full docs for dataWrapper (the primary one)
+        const dw = BACKEND_COMPONENTS["dataWrapper"];
+        const readme = readFileIfExists(path.join(dw.dir, "README.md"));
+        const storiesPath = findStoriesFile(dw.dir);
+        const stories = storiesPath ? readFileIfExists(storiesPath) : null;
+        if (readme) {
+            sections.push("---\n\n## DataTemplateWrapper — Full Documentation\n\n" + readme);
+        }
+        if (stories) {
+            sections.push("---\n\n## DataTemplateWrapper — Stories (live usage examples)\n\n```tsx\n" +
+                stories +
+                "\n```");
+        }
+        // Brief summaries for the rest
+        for (const [name, { dir, description }] of Object.entries(BACKEND_COMPONENTS)) {
+            if (name === "dataWrapper")
+                continue;
+            const otherReadme = readFileIfExists(path.join(dir, "README.md"));
+            if (otherReadme) {
+                sections.push(`---\n\n## ${name}\n\n_${description}_\n\n` + otherReadme);
+            }
+        }
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: sections.join("\n\n"),
+                },
+            ],
+        };
+    },
+};
+//# sourceMappingURL=getBackendComponent.js.map

package/lib/mcp/tools/getBackendComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBackendComponent.js","sourceRoot":"","sources":["../../../src/mcp/tools/getBackendComponent.ts"],"names":[],"mappings":"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"}