bsmnt 0.2.10 → 0.3.0

package/src/templates/next-pagebuilder/biome.json

@@ -0,0 +1,239 @@
+{
+  "root": true,
+  "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true
+    },
+    "linter": {
+      "enabled": true
+    },
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": [
+      "**",
+      "!node_modules",
+      "!**/.next",
+      "!**/dist",
+      "!**/public",
+      "!.github",
+      "!.vercel",
+      "!pnpm-lock.yaml",
+      "!bun.lock",
+      "!**/*.md",
+      "!**/*.mdx",
+      "!**/tailwind.css",
+      "!**/*.grit"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "double",
+      "semicolons": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  },
+  "linter": {
+    "domains": {
+      "next": "recommended",
+      "react": "recommended"
+    },
+    "enabled": true,
+    "rules": {
+      "a11y": {
+        "noAriaUnsupportedElements": "error",
+        "noAutofocus": "warn",
+        "noDistractingElements": "error",
+        "noRedundantAlt": "error",
+        "useAltText": "error",
+        "useButtonType": "error",
+        "useKeyWithClickEvents": "warn",
+        "useSemanticElements": "warn",
+        "useValidAnchor": "warn",
+        "useValidAriaProps": "error",
+        "useValidAriaRole": "error",
+        "useValidAriaValues": "error"
+      },
+      "complexity": {
+        "noForEach": "off",
+        "useFlatMap": "warn",
+        "useSimplifiedLogicExpression": "warn"
+      },
+      "correctness": {
+        "noInvalidUseBeforeDeclaration": "error",
+        "noUnknownMediaFeatureName": "off",
+        "noUnusedFunctionParameters": "warn",
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error",
+        "useExhaustiveDependencies": "warn"
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "level": "warn",
+          "options": {
+            "attributes": ["class", "className"],
+            "functions": ["cn", "cva"]
+          }
+        }
+      },
+      "performance": {
+        "noImgElement": "error"
+      },
+      "recommended": true,
+      "security": {
+        "noDangerouslySetInnerHtml": "warn",
+        "noDangerouslySetInnerHtmlWithChildren": "error",
+        "noGlobalEval": "error"
+      },
+      "style": {
+        "noInferrableTypes": "error",
+        "noNestedTernary": "error",
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "error",
+        "noUnusedTemplateLiteral": "off",
+        "noUselessElse": "error",
+        "useAsConstAssertion": "error",
+        "useCollapsedElseIf": "warn",
+        "useConsistentArrayType": "error",
+        "useConsistentBuiltinInstantiation": "error",
+        "useDefaultParameterLast": "error",
+        "useEnumInitializers": "error",
+        "useExponentiationOperator": "error",
+        "useFilenamingConvention": {
+          "level": "warn",
+          "options": {
+            "filenameCases": ["kebab-case", "camelCase"],
+            "strictCase": false
+          }
+        },
+        "useForOf": "warn",
+        "useNumberNamespace": "error",
+        "useSelfClosingElements": "error",
+        "useShorthandAssign": "error",
+        "useSingleVarDeclarator": "error",
+        "useTemplate": "warn"
+      },
+      "suspicious": {
+        "noDebugger": "warn",
+        "noDoubleEquals": "error",
+        "noEmptyBlockStatements": "warn",
+        "noExplicitAny": "error",
+        "noGlobalIsFinite": "error",
+        "noGlobalIsNan": "error",
+        "noMisleadingCharacterClass": "error",
+        "noPrototypeBuiltins": "warn",
+        "noSelfCompare": "error",
+        "noSparseArray": "error",
+        "useAwait": "off"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.css"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnknownFunction": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.tsx", "**/*.jsx"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "useKeyWithClickEvents": "error",
+            "useKeyWithMouseEvents": "error",
+            "useValidAnchor": "error"
+          },
+          "correctness": {
+            "useJsxKeyInIterable": "error"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.ts", "**/*.tsx"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredVariables": "off"
+          },
+          "style": {
+            "useConsistentArrayType": "error",
+            "useExportType": "error",
+            "useImportType": "error"
+          }
+        }
+      }
+    },
+    {
+      "includes": [
+        "app/**/*.tsx",
+        "app/**/*.ts",
+        "app/**/*.jsx",
+        "app/**/*.js"
+      ],
+      "linter": {
+        "rules": {
+          "style": {
+            "noDefaultExport": "off"
+          },
+          "suspicious": {
+            "useAwait": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.module.css"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnknownProperty": "off"
+          },
+          "style": {
+            "noDescendingSpecificity": "off"
+          }
+        }
+      }
+    }
+  ],
+  "plugins": [
+    "./.biome/plugins/no-anchor-element.grit",
+    "./.biome/plugins/no-unnecessary-forwardref.grit",
+    "./.biome/plugins/no-relative-parent-imports.grit"
+  ],
+  "vcs": {
+    "clientKind": "git",
+    "enabled": true,
+    "useIgnoreFile": false
+  }
+}

package/src/templates/next-pagebuilder/components/layout/footer/index.tsx

@@ -0,0 +1,95 @@
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import {
+  type CompanyData,
+  type FooterData,
+  getCompanyData,
+  getFooter,
+} from "@/lib/integrations/sanity/fetchers/layout"
+
+type FooterLinkGroup = NonNullable<FooterData["links"]>[number]
+type FooterLinkItem = NonNullable<FooterLinkGroup["items"]>[number]
+type SocialLink = NonNullable<CompanyData["socialLinks"]>[number]
+
+export const Footer = async () => {
+  const [footer, companyData] = await Promise.all([
+    getFooter(),
+    getCompanyData(),
+  ])
+
+  const year = new Date().getFullYear()
+
+  if (!(footer || companyData)) {
+    return (
+      <footer className="border-black/10 border-t px-6 py-3">
+        <p>&copy; {year} Basement</p>
+      </footer>
+    )
+  }
+
+  const links = footer?.links ?? []
+
+  return (
+    <footer className="border-black/10 border-t">
+      <div className="mx-auto flex max-w-7xl flex-col gap-8 px-6 py-6">
+        {links.length > 0 ? (
+          <div className="grid grid-cols-5 gap-x-8 gap-y-6 md:grid-cols-3 lg:grid-cols-5">
+            {links.map((linkGroup: FooterLinkGroup) => (
+              <div key={linkGroup._key} className="flex flex-col gap-2">
+                <h3>{linkGroup.title}</h3>
+                {linkGroup.items && linkGroup.items.length > 0 ? (
+                  <ul className="space-y-1">
+                    {linkGroup.items
+                      .filter(
+                        (item: FooterLinkItem) => item.href && item.href !== "#"
+                      )
+                      .map((item: FooterLinkItem) => (
+                        <li key={item._key}>
+                          <Link href={item.href!}>{item.label}</Link>
+                        </li>
+                      ))}
+                  </ul>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Link href="/">Basement</Link>
+        )}
+
+        <div className="flex flex-row items-center justify-between gap-3 border-black/10 border-t pt-4">
+          <p className="w-fit">&copy; {year} Basement</p>
+
+          {companyData?.socialLinks && companyData.socialLinks.length > 0 ? (
+            <div className="flex w-fit flex-wrap items-center gap-x-4 gap-y-2">
+              {companyData.socialLinks
+                .filter((social: SocialLink) => social.url)
+                .map((social: SocialLink) => (
+                  <Link
+                    key={social._key}
+                    href={social.url!}
+                    aria-label={
+                      social.label ||
+                      `Follow us on ${social.name || "social media"}`
+                    }
+                  >
+                    {social.icon ? (
+                      <SanityImage
+                        image={social.icon}
+                        alt={social.name || ""}
+                        width={20}
+                        height={20}
+                        maxWidth={40}
+                      />
+                    ) : (
+                      <span>{social.name}</span>
+                    )}
+                  </Link>
+                ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/cta-button.tsx

@@ -0,0 +1,28 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import type { CtaButton } from "./types"
+
+export function CtaButtonRenderer({ cta }: { cta: CtaButton }) {
+  const linkAttributes = cta.link ? getLinkAttributes(cta.link) : undefined
+  const href = linkAttributes?.href
+
+  if (!(cta.label && href && href !== "#")) return null
+
+  return (
+    <Link
+      href={href}
+      target={linkAttributes?.target}
+      rel={linkAttributes?.rel}
+      className={cn(
+        "rounded-lg px-4 py-2 font-medium text-sm transition-opacity hover:opacity-80",
+        cta.variant === "primary"
+          ? "bg-black text-white"
+          : "border border-black/20 text-black"
+      )}
+    >
+      {cta.label}
+    </Link>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/mega-menu-panel.tsx

@@ -0,0 +1,90 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import { NavLeafItem } from "./nav-leaf-item"
+import type { MegaMenu, MegaMenuColumn as MegaMenuColumnType } from "./types"
+
+function ColumnHeader({
+  title,
+  href,
+  target,
+  rel,
+}: {
+  title: string
+  href: string | null
+  target?: string | undefined
+  rel?: string | undefined
+}) {
+  const className =
+    "mb-1 block px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-400"
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        className={cn(className, "transition-colors hover:text-black")}
+      >
+        {title}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{title}</span>
+}
+
+function MegaMenuColumn({ column }: { column: MegaMenuColumnType }) {
+  const linkAttributes = column.link
+    ? getLinkAttributes(column.link)
+    : undefined
+  const href = linkAttributes?.href
+  const items = column.items
+
+  return (
+    <div className="flex min-w-48 flex-col">
+      {column.title ? (
+        <ColumnHeader
+          title={column.title}
+          href={href && href !== "#" ? href : null}
+          target={linkAttributes?.target}
+          rel={linkAttributes?.rel}
+        />
+      ) : null}
+
+      {items?.length ? (
+        <ul className="flex flex-col">
+          {items.map((item) => (
+            <li key={item._key}>
+              <NavLeafItem item={item} />
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+export function MegaMenuPanel({
+  megaMenu,
+  id,
+}: {
+  megaMenu: MegaMenu
+  id: string
+}) {
+  return (
+    <div
+      id={id}
+      className="absolute top-full left-1/2 z-50 w-max max-w-[90vw] -translate-x-1/2 pt-2"
+    >
+      <div className="rounded-xl border border-black/10 bg-white p-6 shadow-black/5 shadow-xl">
+        <div className="flex gap-8">
+          {megaMenu.columns?.map((col) => (
+            <MegaMenuColumn key={col._key} column={col} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/nav-item-renderer.tsx

@@ -0,0 +1,98 @@
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr"
+
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import { MegaMenuPanel } from "./mega-menu-panel"
+import type { NavItem } from "./types"
+
+type NavItemRendererProps = {
+  item: NavItem
+  isOpen: boolean
+  onToggle: () => void
+  triggerRef: (el: HTMLButtonElement | null) => void
+}
+
+const baseLabelClassName = "text-sm transition-colors"
+const interactiveLabelClassName = cn(
+  baseLabelClassName,
+  "text-gray-600 hover:text-black"
+)
+
+function getValidHref(item: NavItem) {
+  const linkAttributes = item.link ? getLinkAttributes(item.link) : undefined
+  const href =
+    linkAttributes?.href && linkAttributes.href !== "#"
+      ? linkAttributes.href
+      : null
+
+  return { href, linkAttributes }
+}
+
+export function NavItemRenderer({
+  item,
+  isOpen,
+  onToggle,
+  triggerRef,
+}: NavItemRendererProps) {
+  const panelId = `mega-menu-${item._key}`
+
+  if (item.itemType === "mega-menu" && item.megaMenu) {
+    const megaMenu = item.megaMenu
+
+    return (
+      <li className="relative">
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={onToggle}
+          className={cn(
+            "flex items-center gap-1",
+            baseLabelClassName,
+            isOpen ? "text-black" : interactiveLabelClassName
+          )}
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+          aria-controls={panelId}
+        >
+          {item.title}
+          <CaretDownIcon
+            size={14}
+            weight="bold"
+            className={cn(
+              "transition-transform duration-200",
+              isOpen && "rotate-180"
+            )}
+          />
+        </button>
+        {isOpen ? <MegaMenuPanel megaMenu={megaMenu} id={panelId} /> : null}
+      </li>
+    )
+  }
+
+  const { href, linkAttributes } = getValidHref(item)
+
+  if (href) {
+    return (
+      <li>
+        <Link
+          href={href}
+          target={linkAttributes?.target}
+          rel={linkAttributes?.rel}
+          className={interactiveLabelClassName}
+        >
+          {item.title}
+        </Link>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <span className={cn(baseLabelClassName, "cursor-default text-gray-400")}>
+        {item.title}
+      </span>
+    </li>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/nav-leaf-item.tsx

@@ -0,0 +1,33 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+
+import type { LeafItem } from "./types"
+
+export function NavLeafItem({ item }: { item: LeafItem }) {
+  const linkAttributes = item.link ? getLinkAttributes(item.link) : undefined
+  const href = linkAttributes?.href
+  const label = (
+    <span className="text-gray-700 text-sm transition-colors group-hover/leaf:text-black">
+      {item.title}
+    </span>
+  )
+
+  if (href && href !== "#") {
+    return (
+      <Link
+        href={href}
+        target={linkAttributes?.target}
+        rel={linkAttributes?.rel}
+        className="block rounded-md px-3 py-2 transition-colors hover:bg-gray-50"
+      >
+        {label}
+      </Link>
+    )
+  }
+
+  return (
+    <span className="block cursor-default rounded-md px-3 py-2 opacity-50">
+      {label}
+    </span>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/types.ts

@@ -0,0 +1,7 @@
+import type { NavbarData } from "@/lib/integrations/sanity/fetchers/layout"
+
+export type NavItem = NonNullable<NavbarData["navigationItems"]>[number]
+export type MegaMenu = NonNullable<NavItem["megaMenu"]>
+export type MegaMenuColumn = NonNullable<MegaMenu["columns"]>[number]
+export type LeafItem = NonNullable<MegaMenuColumn["items"]>[number]
+export type CtaButton = NonNullable<NavbarData["ctaButtons"]>[number]