@notionhive/contacts 0.1.0

package/bin/contacts.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+const path = require("path");
+const categoryConfig = require("../category.config.json");
+
+function loadCore() {
+  try {
+    return require("@notionhive/core");
+  } catch {
+    return require(path.join(__dirname, "../../core/lib"));
+  }
+}
+
+const { createCategoryCli } = loadCore();
+const run = createCategoryCli(categoryConfig);
+run(path.resolve(__dirname, ".."));

package/category.config.json

@@ -0,0 +1,7 @@
+{
+  "packageName": "@notionhive/contacts",
+  "binName": "contacts",
+  "label": "contact section",
+  "labelPlural": "contact sections",
+  "exampleId": "contact-01"
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@notionhive/contacts",
+  "version": "0.1.0",
+  "description": "Add editable contact sections into your Next.js project.",
+  "license": "UNLICENSED",
+  "bin": {
+    "contacts": "./bin/contacts.js"
+  },
+  "files": [
+    "bin",
+    "registry",
+    "templates",
+    "category.config.json"
+  ],
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/sync-templates.js"
+  },
+  "dependencies": {
+    "@notionhive/core": "0.1.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/registry/contact-01.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-01",
+  "exportName": "Contact01",
+  "folderName": "Contact01",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact01"
+}

package/registry/contact-02.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-02",
+  "exportName": "Contact02",
+  "folderName": "Contact02",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact02"
+}

package/registry/contact-03.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-03",
+  "exportName": "Contact03",
+  "folderName": "Contact03",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact03"
+}

package/registry/contact-04.json

@@ -0,0 +1,6 @@
+{
+  "id": "contact-04",
+  "exportName": "Contact04",
+  "folderName": "Contact04",
+  "shared": []
+}

package/registry/contact-05.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-05",
+  "exportName": "Contact05",
+  "folderName": "Contact05",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact05"
+}

package/registry/contact-06.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-06",
+  "exportName": "Contact06",
+  "folderName": "Contact06",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact06"
+}

package/registry/contact-07.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact-07",
+  "exportName": "Contact07",
+  "folderName": "Contact07",
+  "shared": [
+    "atoms/SafeImage"
+  ],
+  "assets": "public/contact/contact07"
+}

package/registry/contact-08.json

@@ -0,0 +1,6 @@
+{
+  "id": "contact-08",
+  "exportName": "Contact08",
+  "folderName": "Contact08",
+  "shared": []
+}

package/registry/contact-09.json

@@ -0,0 +1,10 @@
+{
+  "id": "contact-09",
+  "exportName": "Contact09",
+  "folderName": "Contact09",
+  "shared": [
+    "atoms/SafeImage",
+    "hooks/useCarousel"
+  ],
+  "assets": "public/contact/contact09"
+}

package/registry/contact-10.json

@@ -0,0 +1,6 @@
+{
+  "id": "contact-10",
+  "exportName": "Contact10",
+  "folderName": "Contact10",
+  "shared": []
+}

package/registry/index.json

@@ -0,0 +1,88 @@
+{
+  "category": "contacts",
+  "packageName": "@notionhive/contacts",
+  "items": [
+    {
+      "id": "contact-01",
+      "exportName": "Contact01",
+      "folderName": "Contact01",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact01"
+    },
+    {
+      "id": "contact-02",
+      "exportName": "Contact02",
+      "folderName": "Contact02",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact02"
+    },
+    {
+      "id": "contact-03",
+      "exportName": "Contact03",
+      "folderName": "Contact03",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact03"
+    },
+    {
+      "id": "contact-04",
+      "exportName": "Contact04",
+      "folderName": "Contact04",
+      "shared": []
+    },
+    {
+      "id": "contact-05",
+      "exportName": "Contact05",
+      "folderName": "Contact05",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact05"
+    },
+    {
+      "id": "contact-06",
+      "exportName": "Contact06",
+      "folderName": "Contact06",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact06"
+    },
+    {
+      "id": "contact-07",
+      "exportName": "Contact07",
+      "folderName": "Contact07",
+      "shared": [
+        "atoms/SafeImage"
+      ],
+      "assets": "public/contact/contact07"
+    },
+    {
+      "id": "contact-08",
+      "exportName": "Contact08",
+      "folderName": "Contact08",
+      "shared": []
+    },
+    {
+      "id": "contact-09",
+      "exportName": "Contact09",
+      "folderName": "Contact09",
+      "shared": [
+        "atoms/SafeImage",
+        "hooks/useCarousel"
+      ],
+      "assets": "public/contact/contact09"
+    },
+    {
+      "id": "contact-10",
+      "exportName": "Contact10",
+      "folderName": "Contact10",
+      "shared": []
+    }
+  ]
+}

package/templates/components/atoms/SafeImage/SafeImage.jsx

@@ -0,0 +1,101 @@
+import Image from "next/image";
+
+/**
+ * SafeImage — renders local /heroes/ assets reliably.
+ *
+ * Figma exports are often SVG content saved with .png extensions.
+ * Native img avoids next/image SVG restrictions and broken renders in Storybook.
+ *
+ * @param {object} props - Same as next/image (src, alt, fill, className, sizes, priority, width, height).
+ */
+export function SafeImage({
+  src,
+  alt = "",
+  fill,
+  className = "",
+  sizes,
+  priority,
+  width,
+  height,
+  style,
+  ...rest
+}) {
+  if (!src) return null;
+
+  const isLocalAsset =
+    src.startsWith("/heroes/") ||
+    src.startsWith("/menus/") ||
+    src.startsWith("/about/") ||
+    src.startsWith("/services/") ||
+    src.startsWith("/testimonials/") ||
+    src.startsWith("/cta/") ||
+    src.startsWith("/contact/") ||
+    src.startsWith("/footer/");
+  const isSvg = src.endsWith(".svg");
+
+  if (isLocalAsset || isSvg) {
+    if (fill) {
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          style={{
+            ...style,
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={src}
+        alt={alt}
+        className={className}
+        width={width}
+        height={height}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  if (fill) {
+    return (
+      <Image
+        src={src}
+        alt={alt}
+        fill
+        className={className}
+        sizes={sizes}
+        priority={priority}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      sizes={sizes}
+      priority={priority}
+      style={style}
+      {...rest}
+    />
+  );
+}
+
+export default SafeImage;

package/templates/components/atoms/SafeImage/index.js

@@ -0,0 +1 @@
+export { SafeImage, default } from "./SafeImage";

package/templates/components/hooks/useCarousel.js

@@ -0,0 +1,73 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * useCarousel — shared slide state for hero carousels and sliders.
+ *
+ * @param {object} options
+ * @param {number} [options.count=1] - Total slide count.
+ * @param {number} [options.initialIndex=0] - Starting slide.
+ * @param {boolean} [options.loop=false] - Wrap from last → first.
+ * @param {number} [options.autoPlayMs=0] - Auto-advance interval; 0 = off.
+ * @param {(index: number) => void} [options.onChange] - Called when slide changes.
+ * @returns {{ activeSlide: number, goTo: Function, next: Function, prev: Function, pause: Function, resume: Function, isPaused: boolean }}
+ */
+export function useCarousel({
+  count = 1,
+  initialIndex = 0,
+  loop = false,
+  autoPlayMs = 0,
+  onChange,
+} = {}) {
+  const maxIndex = Math.max(0, count - 1);
+  const [activeSlide, setActiveSlide] = useState(() =>
+    Math.min(Math.max(initialIndex, 0), maxIndex)
+  );
+  const [isPaused, setIsPaused] = useState(false);
+
+  const goTo = useCallback(
+    (index) => {
+      const next = loop
+        ? ((index % count) + count) % count
+        : Math.min(Math.max(index, 0), maxIndex);
+      setActiveSlide(next);
+      onChange?.(next);
+    },
+    [count, loop, maxIndex, onChange]
+  );
+
+  const next = useCallback(() => {
+    if (loop || activeSlide < maxIndex) goTo(activeSlide + 1);
+  }, [activeSlide, goTo, loop, maxIndex]);
+
+  const prev = useCallback(() => {
+    if (loop || activeSlide > 0) goTo(activeSlide - 1);
+  }, [activeSlide, goTo, loop]);
+
+  const pause = useCallback(() => setIsPaused(true), []);
+  const resume = useCallback(() => setIsPaused(false), []);
+
+  useEffect(() => {
+    if (!autoPlayMs || isPaused || count <= 1) return undefined;
+
+    const id = window.setInterval(next, autoPlayMs);
+    return () => window.clearInterval(id);
+  }, [autoPlayMs, count, isPaused, next]);
+
+  useEffect(() => {
+    setActiveSlide((current) => Math.min(Math.max(current, 0), maxIndex));
+  }, [maxIndex]);
+
+  return {
+    activeSlide,
+    goTo,
+    next,
+    prev,
+    pause,
+    resume,
+    isPaused,
+  };
+}
+
+export default useCarousel;