npm - @assistant-ui/mcp-docs-server - Versions diffs - 0.1.24 → 0.1.26 - Mend

@assistant-ui/mcp-docs-server 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/.docs/organized/code-examples/with-heat-graph.md ADDED Viewed

@@ -0,0 +1,304 @@
+# Example: with-heat-graph
+## app/globals.css
+```css
+@import "tailwindcss";
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+```
+## app/layout.tsx
+```tsx
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+export const metadata: Metadata = {
+  title: "Heat Graph Example",
+  description: "Activity heatmap graph built with heat-graph",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+## app/page.tsx
+```tsx
+import { ActivityGraph } from "@/lib/activity-graph";
+import { generateSampleData } from "@/lib/generate-data";
+const data = generateSampleData(new Date("2026-03-11"), 365);
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-white p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-6 font-bold text-3xl text-gray-900">
+          Activity Graph
+        </h1>
+        <div className="rounded-xl border border-gray-200 bg-white p-6">
+          <ActivityGraph data={data} />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+## lib/activity-graph.tsx
+```tsx
+"use client";
+import * as HeatGraph from "heat-graph";
+const COLORS = ["#ebedf0", "#c6d7f9", "#8fb0f3", "#5888e8", "#2563eb"];
+export function ActivityGraph({ data }: { data: HeatGraph.DataPoint[] }) {
+  return (
+    <HeatGraph.Root
+      data={data}
+      weekStart="monday"
+      colorScale={COLORS}
+      className="flex flex-col gap-2"
+    >
+      <MonthLabels />
+      <div className="flex gap-2">
+        <DayLabels />
+        <CellGrid />
+      </div>
+      <GraphLegend />
+      <CellTooltip />
+    </HeatGraph.Root>
+  );
+}
+function MonthLabels() {
+  return (
+    <div className="relative ml-10 h-5">
+      <HeatGraph.MonthLabels>
+        {({ label, totalWeeks }) => (
+          <span
+            className="absolute text-gray-500 text-xs"
+            style={{ left: `${(label.column / totalWeeks) * 100}%` }}
+          >
+            {HeatGraph.MONTH_SHORT[label.month]}
+          </span>
+        )}
+      </HeatGraph.MonthLabels>
+    </div>
+  );
+}
+function DayLabels() {
+  return (
+    <div className="flex w-8 shrink-0 flex-col justify-between py-[2px]">
+      <HeatGraph.DayLabels>
+        {({ label }) => (
+          <span className="flex h-[13px] items-center text-gray-500 text-xs">
+            {label.row % 2 === 0 ? HeatGraph.DAY_SHORT[label.dayOfWeek] : ""}
+          </span>
+        )}
+      </HeatGraph.DayLabels>
+    </div>
+  );
+}
+function CellGrid() {
+  return (
+    <HeatGraph.Grid className="flex-1 gap-[3px]">
+      {() => <HeatGraph.Cell className="aspect-square w-full rounded-sm" />}
+    </HeatGraph.Grid>
+  );
+}
+function CellTooltip() {
+  return (
+    <HeatGraph.Tooltip className="pointer-events-none whitespace-nowrap rounded-md bg-gray-900 px-3 py-1.5 text-white text-xs shadow-lg">
+      {({ cell }) => (
+        <>
+          <strong>{cell.count} contributions</strong> on{" "}
+          {cell.date.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          })}
+        </>
+      )}
+    </HeatGraph.Tooltip>
+  );
+}
+function GraphLegend() {
+  return (
+    <div className="ml-auto flex items-center gap-1 text-gray-500 text-xs">
+      <span>Less</span>
+      <HeatGraph.Legend>
+        {() => (
+          <HeatGraph.LegendLevel className="h-[13px] w-[13px] rounded-sm" />
+        )}
+      </HeatGraph.Legend>
+      <span>More</span>
+    </div>
+  );
+}
+```
+## lib/generate-data.ts
+```typescript
+import type { DataPoint } from "heat-graph";
+function seededRandom(seed: number) {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return s / 2147483647;
+  };
+}
+export function generateSampleData(
+  end: Date = new Date(),
+  days = 365,
+): DataPoint[] {
+  const data: DataPoint[] = [];
+  const rand = seededRandom(42);
+  for (let i = 0; i < days; i++) {
+    const date = new Date(end);
+    date.setDate(date.getDate() - (days - 1 - i));
+    const dayOfWeek = date.getDay();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+    // Base activity: higher on weekdays
+    const base = isWeekend ? 2 : 8;
+    const noise = rand();
+    // Create some streaks and gaps
+    const monthProgress = date.getDate() / 31;
+    const monthBoost = Math.sin(monthProgress * Math.PI) * 5;
+    // Some days have no activity
+    if (noise < 0.15) {
+      continue;
+    }
+    const count = Math.max(0, Math.round(base + monthBoost + noise * 12 - 3));
+    if (count > 0) {
+      data.push({ date, count });
+    }
+  }
+  return data;
+}
+```
+## next.config.ts
+```typescript
+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+export default nextConfig;
+```
+## package.json
+```json
+{
+  "name": "with-heat-graph",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "heat-graph": "workspace:*",
+    "next": "^16.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.2",
+    "typescript": "5.9.3"
+  }
+}
+```
+## tsconfig.json
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+```