project-portfolio 1.9.2 → 2.0.0

package/README.md

@@ -47,7 +47,7 @@ export default async function ProjectsPage() {
 | `searchParams` | `Record<string, string \| string[] \| undefined>` | No | `{}` | Filter params forwarded to the API — pass Next.js `searchParams` directly |
 | `revalidate` | `number` | No | `60` | Cache revalidation period in seconds |
 
-#### Filter Integration
+#### URL-driven filter integration
 
 `ProjectPortfolio` works together with `ProjectMenu` to form a complete filter flow. When a user clicks a filter link in the megamenu, they are navigated to the project grid with filter query params appended to the URL. Pass Next.js `searchParams` to `ProjectPortfolio` so it can forward them to the API:
 
@@ -83,6 +83,69 @@ When active filters are applied, a filter banner is shown above the grid with a
 
 ---
 
+### `ProjectPortfolioClient`
+
+A `"use client"` component that fetches all projects once on mount (module-level cached — no re-fetch on remount) and filters them locally in memory. It ships with **no filter UI** — build your own dropdowns, buttons, or search inputs and drive the component with the `filters` prop.
+
+```tsx
+// Works in any component — no RSC required
+import { ProjectPortfolioClient } from "project-portfolio"
+
+export default function ProjectsPage() {
+  return (
+    <ProjectPortfolioClient
+      clientSlug="your-client-slug"
+      apiBase="https://your-api.com"
+      basePath="/projects"
+    />
+  )
+}
+```
+
+Wire up your own filter UI with the `filters` prop:
+
+```tsx
+"use client"
+import { useState } from "react"
+import { ProjectPortfolioClient } from "project-portfolio"
+
+export default function ProjectsPage() {
+  const [filters, setFilters] = useState<Record<string, string>>({})
+
+  return (
+    <>
+      {/* Your own filter UI */}
+      <select onChange={(e) => setFilters({ type: e.target.value })}>
+        <option value="">All Types</option>
+        <option value="commercial">Commercial</option>
+        <option value="educational-facilities">Educational</option>
+      </select>
+
+      {/* Component receives filters and applies them in memory */}
+      <ProjectPortfolioClient
+        clientSlug="your-client-slug"
+        apiBase="https://your-api.com"
+        basePath="/projects"
+        filters={filters}
+      />
+    </>
+  )
+}
+```
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `clientSlug` | `string` | Yes | — | Identifies which client's projects to load |
+| `apiBase` | `string` | Yes | — | Base URL of the projects API |
+| `basePath` | `string` | No | `"/projects"` | Base path for project detail links |
+| `filters` | `Record<string, string>` | No | `{}` | Active filters keyed by custom field key — filtering is instant, no API call on change |
+| `columns` | `2 \| 3` | No | `3` | Number of columns in the project grid |
+| `font` | `string` | No | System font stack | Font family string applied to all text |
+
+**How filtering works:** Pass any `Record<string, string>` of field key/value pairs and the component filters the already-fetched project list in memory. All filter logic uses AND matching with case-insensitive comparison. The field keys must match the custom field keys in the API schema.
+
+---
+
 ### `ProjectDetail`
 
 A full project detail page. Fetches a single project by slug and renders its gallery, custom fields, related projects, and a back link.
@@ -297,8 +360,8 @@ Data is cached at multiple levels depending on which component is used.
 3. **Server-side route cache** — the `/api/chisel-menu` route is cached by Next.js for 24 hours. The upstream API is called at most once per day regardless of traffic
 4. **Module-level client cache** — after the first fetch within a session, the result is held in memory. Re-hovering the menu or remounting the component never triggers another network request
 
-**`ProjectMenuClient` with direct fetch**
-4. **Module-level client cache only** — the upstream API is called once per session per user (on first mount), then cached in memory for the rest of that page session
+**`ProjectMenuClient` with direct fetch / `ProjectPortfolioClient`**
+4. **Module-level client cache only** — the upstream API is called once per session per user (on first mount), then cached in memory for the rest of that page session. Filter changes on `ProjectPortfolioClient` never trigger a fetch — filtering is done entirely in memory
 
 **Bypassing the cache**
 

package/dist/ProjectPortfolioClient.d.ts

@@ -0,0 +1,21 @@
+export interface ProjectPortfolioClientProps {
+    /** Client slug identifying which client's projects to load */
+    clientSlug: string;
+    /** Base URL of the projects API */
+    apiBase: string;
+    /** Base path for project detail links. Defaults to "/projects" */
+    basePath?: string;
+    /**
+     * Active filters to apply to the project list.
+     * Pass a Record<string, string> of field key/value pairs.
+     * Filtering happens in memory — no API call on change.
+     * e.g. { type: "commercial" }
+     */
+    filters?: Record<string, string>;
+    /** Font family string applied to all text. Defaults to system font stack */
+    font?: string;
+    /** Max columns in the grid. 2 or 3. Defaults to 3 */
+    columns?: 2 | 3;
+}
+export declare function ProjectPortfolioClient({ clientSlug, apiBase, basePath, filters, font, columns, }: ProjectPortfolioClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectPortfolioClient.d.ts.map

package/dist/ProjectPortfolioClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortfolioClient.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolioClient.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,2BAA2B;IAC1C,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAChB;AA0DD,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,OAAY,EACZ,IAAmB,EACnB,OAAW,GACZ,EAAE,2BAA2B,2CAsJ7B"}

package/dist/ProjectPortfolioClient.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { ProjectCard } from "./ProjectCard";
+const portfolioDataCache = new Map();
+const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
+const DEFAULT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function parseMultiValue(raw) {
+    if (Array.isArray(raw))
+        return raw.map(String).map((s) => s.replace(/`/g, "").trim()).filter(Boolean);
+    if (typeof raw === "string")
+        return raw.replace(/`/g, "").split(",").map((s) => s.trim()).filter(Boolean);
+    return [];
+}
+function matchesFilters(project, filters, schema, fieldOptionsMap) {
+    return Object.entries(filters).every(([key, value]) => {
+        var _a;
+        if (!value)
+            return true;
+        const field = schema.find((f) => f.key === key);
+        if (!field)
+            return true;
+        const raw = project.custom_field_values[key];
+        if (field.type === "location") {
+            const loc = raw;
+            if (!loc)
+                return false;
+            const locStr = [loc.city, loc.state].filter(Boolean).join(", ").toLowerCase();
+            return locStr.includes(value.toLowerCase());
+        }
+        const values = parseMultiValue(raw);
+        const optMap = (_a = fieldOptionsMap[key]) !== null && _a !== void 0 ? _a : {};
+        return values.some((v) => {
+            var _a;
+            const normalizedV = ((_a = optMap[v]) !== null && _a !== void 0 ? _a : v).toLowerCase();
+            const normalizedFilter = value.toLowerCase();
+            return normalizedV === normalizedFilter || normalizedV.includes(normalizedFilter);
+        });
+    });
+}
+// ─── Component ───────────────────────────────────────────────────────────────
+export function ProjectPortfolioClient({ clientSlug, apiBase, basePath = "/projects", filters = {}, font = DEFAULT_FONT, columns = 3, }) {
+    const [data, setData] = useState(null);
+    // Self-fetch on mount — uses module-level cache so the API is only called once per page load
+    useEffect(() => {
+        const cacheKey = `${clientSlug}:${apiBase}`;
+        async function fetchAndCache() {
+            var _a, _b, _c, _d, _e;
+            const [projectsRes, fieldsRes] = await Promise.all([
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`),
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`),
+            ]);
+            const json = projectsRes.ok ? await projectsRes.json() : {};
+            const projects = (_a = json === null || json === void 0 ? void 0 : json.data) !== null && _a !== void 0 ? _a : [];
+            // Deduplicate schema keys
+            const seen = new Set();
+            const schema = ((_c = (_b = json === null || json === void 0 ? void 0 : json.client) === null || _b === void 0 ? void 0 : _b.custom_fields_schema) !== null && _c !== void 0 ? _c : []).filter((f) => {
+                if (seen.has(f.key))
+                    return false;
+                seen.add(f.key);
+                return true;
+            });
+            const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+            const fieldOptionsMap = {};
+            for (const field of ((_d = fieldsJson.fields) !== null && _d !== void 0 ? _d : [])) {
+                const map = {};
+                for (const opt of ((_e = field.options) !== null && _e !== void 0 ? _e : [])) {
+                    if (typeof opt === "object" && opt.id && opt.label) {
+                        map[opt.id] = opt.label;
+                        map[opt.label] = opt.label;
+                    }
+                }
+                fieldOptionsMap[field.key] = map;
+            }
+            return { projects, schema, fieldOptionsMap };
+        }
+        if (!portfolioDataCache.has(cacheKey)) {
+            portfolioDataCache.set(cacheKey, fetchAndCache());
+        }
+        let cancelled = false;
+        portfolioDataCache.get(cacheKey).then((result) => {
+            if (!cancelled)
+                setData(result);
+        }).catch(() => {
+            if (!cancelled)
+                setData({ projects: [], schema: [], fieldOptionsMap: {} });
+        });
+        return () => { cancelled = true; };
+    }, [clientSlug, apiBase]);
+    // Filter projects locally — instant, no API call on filter change
+    const filteredProjects = useMemo(() => {
+        if (!data)
+            return [];
+        const hasActiveFilters = Object.values(filters).some(Boolean);
+        if (!hasActiveFilters)
+            return data.projects;
+        return data.projects.filter((p) => matchesFilters(p, filters, data.schema, data.fieldOptionsMap));
+    }, [data, filters]);
+    const gridCols = columns === 2
+        ? "repeat(2, 1fr)"
+        : "repeat(3, 1fr)";
+    // Loading state
+    if (!data) {
+        return (_jsxs("div", { style: {
+                width: "100%",
+                maxWidth: "1280px",
+                margin: "0 auto",
+                padding: "2rem 1rem",
+                fontFamily: font,
+            }, children: [_jsx("div", { style: { display: "flex", gap: "1rem", marginBottom: "2rem", paddingBottom: "2rem", borderBottom: "1px solid #e4e4e7" }, children: [1, 2].map((i) => (_jsx("div", { style: { width: 180, height: 60, backgroundColor: "#f4f4f5", borderRadius: 6 } }, i))) }), _jsx("div", { style: { display: "grid", gridTemplateColumns: gridCols, gap: "2rem" }, children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { style: { backgroundColor: "#f4f4f5", borderRadius: 2, height: 320, animation: "pulse 1.5s ease-in-out infinite" } }, i))) }), _jsx("style", { children: `@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }` })] }));
+    }
+    return (_jsxs("div", { style: {
+            width: "100%",
+            maxWidth: "1280px",
+            margin: "0 auto",
+            padding: "2rem 1rem",
+            boxSizing: "border-box",
+            fontFamily: font,
+        }, children: [filteredProjects.length === 0 && (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a", fontFamily: font }, children: "No projects found." }) })), filteredProjects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+            .chisel-portfolio-grid {
+              display: grid;
+              grid-template-columns: 1fr;
+              gap: 1.5rem;
+            }
+            @media (min-width: 640px) {
+              .chisel-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
+            }
+            @media (min-width: 1024px) {
+              .chisel-portfolio-grid { grid-template-columns: ${gridCols}; gap: 2rem; }
+            }
+            .chisel-project-card-img { height: 180px; }
+            @media (min-width: 640px) { .chisel-project-card-img { height: 200px; } }
+            @media (min-width: 1024px) { .chisel-project-card-img { height: 220px; } }
+          ` }), _jsx("div", { className: "chisel-portfolio-grid", children: filteredProjects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: data.schema, fieldOptionsMap: data.fieldOptionsMap, basePath: basePath, priority: index === 0 }, project.id))) })] }))] }));
+}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
 export type { ProjectPortfolioProps } from "./ProjectPortfolio";
+export { ProjectPortfolioClient } from "./ProjectPortfolioClient";
+export type { ProjectPortfolioClientProps } from "./ProjectPortfolioClient";
 export { ProjectDetail } from "./ProjectDetail";
 export type { ProjectDetailProps } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACpF,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACpF,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
+export { ProjectPortfolioClient } from "./ProjectPortfolioClient";
 export { ProjectDetail } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";
 export { GalleryCarousel } from "./GalleryCarousel";

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "project-portfolio",
-  "version": "1.9.2",
-  "description": "Self-contained project portfolio components for Next.js App Router. Includes ProjectPortfolio, ProjectDetail, ProjectMenu (megamenu), and GalleryCarousel. Pass a clientSlug and apiBase — done.",
-  "keywords": ["nextjs", "react", "portfolio", "projects", "megamenu", "gallery"],
+  "version": "2.0.0",
+  "description": "Self-contained project portfolio components for Next.js App Router. Includes ProjectPortfolio, ProjectPortfolioClient (with built-in filtering), ProjectDetail, SimilarProjects, ProjectMenu, ProjectMenuClient, and GalleryCarousel. Pass a clientSlug and apiBase — done.",
+  "keywords": ["nextjs", "react", "portfolio", "projects", "megamenu", "gallery", "filtering"],
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",