project-portfolio 2.0.0 → 2.1.0

package/dist/SimilarProjects.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cache } from "react";
+import { ProjectCard } from "./ProjectCard";
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 function parseMultiValue(raw) {
     if (Array.isArray(raw))
@@ -19,45 +20,90 @@ function dedupeByKey(arr) {
 }
 // ─── Data fetching ────────────────────────────────────────────────────────────
 const fetchSimilarData = cache(async (apiBase, clientSlug, revalidate) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const fetchOpts = revalidate > 0 ? { next: { revalidate } } : {};
+    const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
     try {
-        const res = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts);
+        const [res, fieldsRes] = await Promise.all([
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`, fetchOpts),
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`, fetchOpts),
+        ]);
         const json = res.ok ? await res.json() : null;
         const allProjects = (_a = json === null || json === void 0 ? void 0 : json.data) !== null && _a !== void 0 ? _a : [];
         const schema = dedupeByKey((_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 : []);
-        return { allProjects, schema };
+        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 { allProjects, schema, fieldOptionsMap };
     }
-    catch (_d) {
-        return { allProjects: [], schema: [] };
+    catch (_f) {
+        return { allProjects: [], schema: [], fieldOptionsMap: {} };
     }
 });
 // ─── Component ────────────────────────────────────────────────────────────────
-export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, apiBase, basePath = "/projects", maxItems = 3, revalidate = 60, }) {
-    const { allProjects, schema } = await fetchSimilarData(apiBase, clientSlug, revalidate);
+export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, apiBase, basePath = "/projects", maxItems = 3, revalidate = 60, variant = "list", projectSlugs, }) {
+    const { allProjects, schema, fieldOptionsMap } = await fetchSimilarData(apiBase, clientSlug, revalidate);
     const badgeField = schema.find((f) => f.display_position === "badge_overlay");
     const locationField = schema.find((f) => f.type === "location");
     const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    const filterEntries = Object.entries(filters);
-    const similar = allProjects
-        .filter((p) => {
-        // Exclude the specified slug if provided
-        if (excludeSlug && p.slug === excludeSlug)
-            return false;
-        // Every filter key/value must match the project's custom field values
-        return filterEntries.every(([key, value]) => {
-            const fieldValues = parseMultiValue(p.custom_field_values[key]);
-            return fieldValues.some((v) => v.toLowerCase() === value.toLowerCase());
-        });
-    })
-        .slice(0, maxItems);
+    let similar;
+    if (projectSlugs && projectSlugs.length > 0) {
+        // Manual mode — show exactly these slugs in the order provided
+        const projectMap = new Map(allProjects.map((p) => [p.slug, p]));
+        similar = projectSlugs
+            .filter((slug) => slug !== excludeSlug)
+            .map((slug) => projectMap.get(slug))
+            .filter((p) => p !== undefined)
+            .slice(0, maxItems);
+    }
+    else {
+        // Filter mode — match by custom field values
+        const filterEntries = Object.entries(filters);
+        similar = allProjects
+            .filter((p) => {
+            if (excludeSlug && p.slug === excludeSlug)
+                return false;
+            return filterEntries.every(([key, value]) => {
+                const fieldValues = parseMultiValue(p.custom_field_values[key]);
+                return fieldValues.some((v) => v.toLowerCase() === value.toLowerCase());
+            });
+        })
+            .slice(0, maxItems);
+    }
     if (similar.length === 0)
         return null;
-    return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", paddingTop: "3rem", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [_jsx("style", { children: `
+    const header = (_jsxs("div", { className: "chisel-similar-header", children: [_jsxs("div", { children: [_jsx("p", { style: { fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "oklch(0.78 0.16 85)", margin: "0 0 6px 0" }, children: "More Work" }), _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "clamp(20px, 4vw, 28px)", margin: 0, fontFamily: font }, children: "Similar Projects" })] }), _jsxs("a", { href: basePath, style: { color: "#18181b", fontWeight: 600, fontSize: "15px", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "6px", fontFamily: font, flexShrink: 0 }, children: ["View All", _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] })] }));
+    // ── Card variant ─────────────────────────────────────────────────────────────
+    if (variant === "card") {
+        return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [_jsx("style", { children: `
+          .chisel-similar-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
+          @media (min-width: 640px) { .chisel-similar-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
+          .chisel-similar-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
+          @media (min-width: 640px)  { .chisel-similar-card-grid { grid-template-columns: repeat(2, 1fr); } }
+          @media (min-width: 1024px) { .chisel-similar-card-grid { grid-template-columns: repeat(3, 1fr); } }
+          .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; } }
+        ` }), header, _jsx("div", { className: "chisel-similar-card-grid", children: similar.map((p, i) => (_jsx(ProjectCard, { project: p, schema: schema, fieldOptionsMap: fieldOptionsMap, basePath: basePath, priority: i === 0, variant: "card" }, p.id))) })] }));
+    }
+    // ── List variant (default) ────────────────────────────────────────────────────
+    return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [_jsx("style", { children: `
         .chisel-similar-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
         @media (min-width: 640px)  { .chisel-similar-grid { grid-template-columns: repeat(2, 1fr); } }
         @media (min-width: 1024px) { .chisel-similar-grid { grid-template-columns: repeat(3, 1fr); } }
-      ` }), _jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: "2rem" }, children: [_jsxs("div", { children: [_jsx("p", { style: { fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "oklch(0.78 0.16 85)", margin: "0 0 6px 0" }, children: "More Work" }), _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "28px", margin: 0, fontFamily: font }, children: "Similar Projects" })] }), _jsxs("a", { href: basePath, style: { color: "#18181b", fontWeight: 600, fontSize: "15px", textDecoration: "none", display: "flex", alignItems: "center", gap: "6px", fontFamily: font }, children: ["View All", _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] })] }), _jsx("div", { className: "chisel-similar-grid", children: similar.map((p) => {
+        .chisel-similar-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
+        @media (min-width: 640px) { .chisel-similar-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
+        .chisel-similar-img { height: 56vw; min-height: 160px; max-height: 220px; }
+      ` }), header, _jsx("div", { className: "chisel-similar-grid", children: similar.map((p) => {
                     var _a, _b, _c, _d, _e;
                     const imgUrl = (_d = (_a = p.image_url) !== null && _a !== void 0 ? _a : (_c = (_b = p.media) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : null;
                     const badge = badgeField
@@ -67,11 +113,11 @@ export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, a
                         ? p.custom_field_values[locationField.key]
                         : null;
                     const locStr = loc ? [loc.city, loc.state].filter(Boolean).join(", ") : null;
-                    return (_jsxs("a", { href: `${basePath}/${p.slug}`, style: { textDecoration: "none", color: "inherit", display: "block", borderBottom: "1px solid #e4e4e7", fontFamily: font }, children: [_jsxs("div", { style: { position: "relative", width: "100%", height: "220px", overflow: "hidden", backgroundColor: "#f4f4f5", marginBottom: "1rem" }, children: [imgUrl && (_jsx("img", { src: imgUrl, alt: p.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), badge && (_jsx("span", { style: {
+                    return (_jsxs("a", { href: `${basePath}/${p.slug}`, style: { textDecoration: "none", color: "inherit", display: "block", borderBottom: "1px solid #e4e4e7", fontFamily: font }, children: [_jsxs("div", { className: "chisel-similar-img", style: { position: "relative", width: "100%", overflow: "hidden", backgroundColor: "#f4f4f5", marginBottom: "1rem" }, children: [imgUrl && (_jsx("img", { src: imgUrl, alt: p.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), badge && (_jsx("span", { style: {
                                             position: "absolute", top: "12px", left: "12px",
                                             backgroundColor: "oklch(0.78 0.16 85)", color: "#fff",
                                             fontSize: "10px", fontWeight: 700, textTransform: "uppercase",
                                             letterSpacing: "0.1em", padding: "4px 10px",
-                                        }, children: badge }))] }), _jsxs("div", { style: { paddingBottom: "1.25rem" }, children: [_jsx("h3", { style: { color: "#18181b", fontWeight: 700, fontSize: "17px", lineHeight: 1.3, margin: "0 0 8px 0", fontFamily: font }, children: p.title }), locStr && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "5px", color: "#71717a", fontSize: "14px", margin: 0 }, children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locStr] }))] })] }, p.id));
+                                        }, children: badge }))] }), _jsxs("div", { style: { paddingBottom: "1.25rem" }, children: [_jsx("h3", { style: { color: "#18181b", fontWeight: 700, fontSize: "clamp(15px, 2.5vw, 17px)", lineHeight: 1.3, margin: "0 0 8px 0", fontFamily: font }, children: p.title }), locStr && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "5px", color: "#71717a", fontSize: "14px", margin: 0 }, children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locStr] }))] })] }, p.id));
                 }) })] }));
 }

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { ProjectDetailProps } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";
 export type { SimilarProjectsProps } from "./SimilarProjects";
 export { GalleryCarousel } from "./GalleryCarousel";
+export type { GalleryCarouselProps } from "./GalleryCarousel";
 export { ProjectMenu, fetchProjectMenuData, createMenuHandler } from "./ProjectMenu";
 export type { ProjectMenuProps } from "./ProjectMenu";
 export { ProjectMenuClient } from "./ProjectMenuClient";

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,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"}
+{"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,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-portfolio",
-  "version": "2.0.0",
+  "version": "2.1.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",