@notionhive/menus 0.1.0

package/bin/menus.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/menus",
+  "binName": "menus",
+  "label": "menu",
+  "labelPlural": "menus",
+  "exampleId": "menu-01"
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@notionhive/menus",
+  "version": "0.1.0",
+  "description": "Add editable menus into your Next.js project.",
+  "license": "UNLICENSED",
+  "bin": {
+    "menus": "./bin/menus.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/index.json

@@ -0,0 +1,74 @@
+{
+  "category": "menus",
+  "packageName": "@notionhive/menus",
+  "items": [
+    {
+      "id": "menu-01",
+      "exportName": "Menu01",
+      "folderName": "Menu01",
+      "shared": [
+        "atoms/SafeImage",
+        "hooks/useCarousel",
+        "molecules/SiteHeader",
+        "molecules/EquipmentMegaMenu",
+        "molecules/SlideIndicators",
+        "molecules/MobileNavDrawer"
+      ],
+      "assets": "public/menus/menu01"
+    },
+    {
+      "id": "menu-02",
+      "exportName": "Menu02",
+      "folderName": "Menu02",
+      "shared": [
+        "hooks/useCarousel",
+        "molecules/CorporateHeader",
+        "molecules/SlideIndicators",
+        "molecules/MobileNavDrawer"
+      ],
+      "assets": "public/menus/menu02"
+    },
+    {
+      "id": "menu-03",
+      "exportName": "Menu03",
+      "folderName": "Menu03",
+      "shared": [
+        "atoms/SafeImage",
+        "hooks/useCarousel",
+        "molecules/SlideIndicators",
+        "molecules/MobileNavDrawer"
+      ],
+      "assets": "public/menus/menu03"
+    },
+    {
+      "id": "menu-04",
+      "exportName": "Menu04",
+      "folderName": "Menu04",
+      "shared": [
+        "atoms/SafeImage",
+        "molecules/FullScreenNavOverlay"
+      ],
+      "assets": "public/menus/menu04"
+    },
+    {
+      "id": "menu-05",
+      "exportName": "Menu05",
+      "folderName": "Menu05",
+      "shared": [
+        "atoms/SafeImage",
+        "molecules/MobileNavDrawer"
+      ],
+      "assets": "public/menus/menu05"
+    },
+    {
+      "id": "menu-06",
+      "exportName": "Menu06",
+      "folderName": "Menu06",
+      "shared": [
+        "atoms/SafeImage",
+        "molecules/FullScreenNavOverlay"
+      ],
+      "assets": "public/menus/menu06"
+    }
+  ]
+}

package/registry/menu-01.json

@@ -0,0 +1,14 @@
+{
+  "id": "menu-01",
+  "exportName": "Menu01",
+  "folderName": "Menu01",
+  "shared": [
+    "atoms/SafeImage",
+    "hooks/useCarousel",
+    "molecules/SiteHeader",
+    "molecules/EquipmentMegaMenu",
+    "molecules/SlideIndicators",
+    "molecules/MobileNavDrawer"
+  ],
+  "assets": "public/menus/menu01"
+}

package/registry/menu-02.json

@@ -0,0 +1,12 @@
+{
+  "id": "menu-02",
+  "exportName": "Menu02",
+  "folderName": "Menu02",
+  "shared": [
+    "hooks/useCarousel",
+    "molecules/CorporateHeader",
+    "molecules/SlideIndicators",
+    "molecules/MobileNavDrawer"
+  ],
+  "assets": "public/menus/menu02"
+}

package/registry/menu-03.json

@@ -0,0 +1,12 @@
+{
+  "id": "menu-03",
+  "exportName": "Menu03",
+  "folderName": "Menu03",
+  "shared": [
+    "atoms/SafeImage",
+    "hooks/useCarousel",
+    "molecules/SlideIndicators",
+    "molecules/MobileNavDrawer"
+  ],
+  "assets": "public/menus/menu03"
+}

package/registry/menu-04.json

@@ -0,0 +1,10 @@
+{
+  "id": "menu-04",
+  "exportName": "Menu04",
+  "folderName": "Menu04",
+  "shared": [
+    "atoms/SafeImage",
+    "molecules/FullScreenNavOverlay"
+  ],
+  "assets": "public/menus/menu04"
+}

package/registry/menu-05.json

@@ -0,0 +1,10 @@
+{
+  "id": "menu-05",
+  "exportName": "Menu05",
+  "folderName": "Menu05",
+  "shared": [
+    "atoms/SafeImage",
+    "molecules/MobileNavDrawer"
+  ],
+  "assets": "public/menus/menu05"
+}

package/registry/menu-06.json

@@ -0,0 +1,10 @@
+{
+  "id": "menu-06",
+  "exportName": "Menu06",
+  "folderName": "Menu06",
+  "shared": [
+    "atoms/SafeImage",
+    "molecules/FullScreenNavOverlay"
+  ],
+  "assets": "public/menus/menu06"
+}

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;

package/templates/components/molecules/CorporateHeader/CorporateHeader.jsx

@@ -0,0 +1,174 @@
+import SafeImage from "../../atoms/SafeImage";
+import { corporateHeaderPropTypes } from "./CorporateHeader.propTypes";
+
+function ChevronDownIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="#010623"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <circle cx="14" cy="14" r="8" stroke="#010623" strokeWidth="1.5" />
+      <path d="M20 20L26 26" stroke="#010623" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function CartIcon() {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <path
+        d="M8 8H26L24 20H12L10 8H8ZM12 24C12.5523 24 13 23.5523 13 23C13 22.4477 12.5523 22 12 22C11.4477 22 11 22.4477 11 23C11 23.5523 11.4477 24 12 24ZM22 24C22.5523 24 23 23.5523 23 23C23 22.4477 22.5523 22 22 22C21.4477 22 21 22.4477 21 23C21 23.5523 21.4477 24 22 24Z"
+        stroke="#010623"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <path d="M6 10H26M6 16H26M6 22H18" stroke="#010623" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function NavItem({ item }) {
+  const content = (
+    <>
+      {item.label}
+      {item.hasDropdown ? <ChevronDownIcon /> : null}
+    </>
+  );
+
+  const className =
+    "inline-flex items-center gap-0.5 rounded-lg p-2 text-sm leading-5 tracking-[0.09px] text-[#010623] transition-colors duration-200 ease-out hover:bg-neutral-50 lg:text-lg";
+
+  if (item.href) {
+    return (
+      <a href={item.href} className={className}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={item.onClick} className={className}>
+      {content}
+    </button>
+  );
+}
+
+/**
+ * CorporateHeader — finance/corporate site header with dropdown nav and dual CTAs.
+ */
+export function CorporateHeader({
+  logoSrc,
+  logoAlt = "Brand logo",
+  navItems = [],
+  secondaryCtaText = "BRAC EPL Trade",
+  primaryCtaText = "Let's Get Started",
+  onSecondaryClick,
+  onPrimaryClick,
+  onSearchClick,
+  onCartClick,
+  onMenuClick,
+  className = "",
+}) {
+  return (
+    <header
+      className={[
+        "flex min-h-[72px] w-full shrink-0 items-center justify-between border-b border-[#edeef0] bg-white px-4 py-4 sm:px-6 md:px-10 lg:h-[114px] lg:px-14 lg:py-6",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="relative h-9 w-32 shrink-0 sm:h-10 sm:w-40 lg:h-[52px] lg:w-[218px]">
+        <SafeImage
+          src={logoSrc}
+          alt={logoAlt}
+          fill
+          className="object-contain object-left"
+          sizes="218px"
+          priority
+        />
+      </div>
+
+      <div className="flex items-center gap-3 lg:gap-14">
+        <nav className="hidden xl:block" aria-label="Primary">
+          <ul className="flex items-center gap-1 lg:gap-2">
+            {navItems.map((item) => (
+              <li key={item.label}>
+                <NavItem item={item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <div className="flex items-center gap-2 sm:gap-4 lg:gap-6">
+          <div className="hidden items-center gap-2 md:flex lg:gap-4">
+            <button
+              type="button"
+              onClick={onSecondaryClick}
+              className="rounded-sm border border-[#b0d6ff] bg-white px-4 py-3 text-sm leading-[18px] tracking-[0.09px] text-[#0058b5] transition-colors duration-200 ease-out hover:bg-blue-50 lg:px-8 lg:py-6 lg:text-lg"
+            >
+              {secondaryCtaText}
+            </button>
+            <button
+              type="button"
+              onClick={onPrimaryClick}
+              className="rounded-sm bg-[#0058b5] px-4 py-3 text-sm leading-[18px] tracking-[0.09px] text-white transition-colors duration-200 ease-out hover:bg-[#004494] lg:px-8 lg:py-6 lg:text-lg"
+            >
+              {primaryCtaText}
+            </button>
+          </div>
+
+          <div className="flex items-center gap-3 sm:gap-6">
+            <button
+              type="button"
+              onClick={onSearchClick}
+              aria-label="Search"
+              className="transition-opacity duration-200 ease-out hover:opacity-70"
+            >
+              <SearchIcon />
+            </button>
+            <button
+              type="button"
+              onClick={onCartClick}
+              aria-label="Cart"
+              className="hidden transition-opacity duration-200 ease-out hover:opacity-70 sm:block"
+            >
+              <CartIcon />
+            </button>
+            <button
+              type="button"
+              onClick={onMenuClick}
+              aria-label="Open menu"
+              className="transition-opacity duration-200 ease-out hover:opacity-70 xl:hidden"
+            >
+              <MenuIcon />
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+CorporateHeader.propTypes = corporateHeaderPropTypes;
+
+export default CorporateHeader;

package/templates/components/molecules/CorporateHeader/CorporateHeader.propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  hasDropdown: PropTypes.bool,
+});
+
+export const corporateHeaderPropTypes = {
+  logoSrc: PropTypes.string.isRequired,
+  logoAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(navItemShape),
+  secondaryCtaText: PropTypes.string,
+  primaryCtaText: PropTypes.string,
+  onSecondaryClick: PropTypes.func,
+  onPrimaryClick: PropTypes.func,
+  onSearchClick: PropTypes.func,
+  onCartClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  className: PropTypes.string,
+};

package/templates/components/molecules/CorporateHeader/index.js

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