bsmnt 0.2.11 → 0.3.0

package/src/templates/next-pagebuilder/components/ui/link/index.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import NextLink from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  type AnchorHTMLAttributes,
+  type ComponentProps,
+  type MouseEvent,
+  useEffect,
+  useState,
+} from "react"
+
+// Helper to extract props safe for button elements
+function getButtonProps(props: Record<string, unknown>) {
+  const {
+    href,
+    target,
+    rel,
+    "data-external": _dataExternal,
+    ...buttonProps
+  } = props
+  return buttonProps
+}
+
+// Helper to extract props safe for div elements
+function getDivProps(props: Record<string, unknown>) {
+  const {
+    href,
+    target,
+    rel,
+    onClick,
+    "data-external": _dataExternal,
+    ...divProps
+  } = props
+  return divProps
+}
+
+type CustomLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  keyof ComponentProps<typeof NextLink> | "href"
+> &
+  Omit<ComponentProps<typeof NextLink>, "href"> & {
+    href?: string
+    onClick?: (e: MouseEvent<HTMLElement>) => void
+    scroll?: boolean
+  }
+
+export function Link({
+  href,
+  children,
+  onClick,
+  scroll = false, // Default to false to prevent scroll restoration warnings with fixed/sticky elements
+  ...props
+}: CustomLinkProps) {
+  const [shouldPrefetch, setShouldPrefetch] = useState(false)
+  const [isExternal, setIsExternal] = useState(false)
+  const [isActive, setIsActive] = useState(false)
+
+  // Get pathname - deferred to avoid blocking static generation
+  // usePathname is safe to call but we defer the active check to useEffect
+  const pathname = usePathname()
+
+  useEffect(() => {
+    // Check if this link is active (current page)
+    if (href && pathname) {
+      setIsActive(pathname === href)
+    }
+  }, [href, pathname])
+
+  useEffect(() => {
+    // Skip if no href
+    if (!href) return
+
+    // Check if external link
+    try {
+      const url = new URL(href, window.location.href)
+      setIsExternal(url.host !== window.location.host)
+    } catch {
+      setIsExternal(false)
+    }
+
+    // Only prefetch on good connections
+    const connection = (
+      navigator as Navigator & {
+        connection?: { effectiveType: string; saveData: boolean }
+      }
+    ).connection
+    if (connection) {
+      const { effectiveType, saveData } = connection
+      setShouldPrefetch(effectiveType === "4g" && !saveData)
+    } else {
+      // Default to prefetching if API not available
+      setShouldPrefetch(true)
+    }
+  }, [href])
+
+  // If no href is provided but there's an onClick, render a button
+  if (!href && onClick) {
+    return (
+      <button
+        onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(e)}
+        type="button"
+        {...getButtonProps(props)}
+      >
+        {children}
+      </button>
+    )
+  }
+
+  // If no href and no onClick, render a div
+  if (!href) {
+    return <div {...getDivProps(props)}>{children}</div>
+  }
+
+  // Block dangerous URIs (javascript:, data:, vbscript:)
+  const isDangerousHref = /^(javascript|data|vbscript):/i.test(href)
+  if (isDangerousHref) {
+    return <span {...getDivProps(props)}>{children}</span>
+  }
+
+  // For SSR, check if it's external based on the href pattern
+  const isExternalSSR =
+    href.startsWith("http://") || href.startsWith("https://")
+
+  if (isExternalSSR || isExternal) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-external
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <NextLink
+      href={href as ComponentProps<typeof NextLink>["href"]}
+      prefetch={shouldPrefetch}
+      scroll={scroll}
+      data-active={isActive || undefined}
+      {...(onClick && { onClick })}
+      {...props}
+    >
+      {children}
+    </NextLink>
+  )
+}

package/src/templates/next-pagebuilder/components/ui/sanity-image/index.tsx

@@ -0,0 +1,41 @@
+import { getImageDimensions } from "@sanity/asset-utils"
+import { Image, type ImageProps } from "@/components/ui/image"
+import { urlForImage } from "@/lib/integrations/sanity/utils/image"
+
+interface SanityImageProps extends Omit<ImageProps, "src" | "aspectRatio"> {
+  image: {
+    asset?: {
+      _ref: string
+      _type: "reference"
+    }
+    alt?: string
+    hotspot?: object
+    crop?: object
+  }
+  maxWidth?: number
+}
+
+export function SanityImage({
+  image,
+  maxWidth = 1920,
+  alt,
+  fill,
+  ...props
+}: SanityImageProps) {
+  if (!image?.asset) return null
+
+  const { width, height } = getImageDimensions(image.asset)
+  const aspectRatio = width / height
+
+  const imageProps = fill ? { fill: true } : { width, height }
+
+  return (
+    <Image
+      src={urlForImage(image).width(maxWidth).url()}
+      alt={alt || image.alt || ""}
+      aspectRatio={aspectRatio}
+      {...imageProps}
+      {...props}
+    />
+  )
+}

package/src/templates/next-pagebuilder/lib/integrations/check-integration.ts

@@ -0,0 +1,5 @@
+export const isSanityConfigured = () =>
+  Boolean(
+    process.env.NEXT_PUBLIC_SANITY_PROJECT_ID &&
+      process.env.NEXT_PUBLIC_SANITY_DATASET
+  )

package/src/templates/next-pagebuilder/lib/integrations/sanity/client.ts

@@ -0,0 +1,27 @@
+import { createClient, type SanityClient } from "next-sanity"
+import { isSanityConfigured } from "@/lib/integrations/check-integration"
+import { apiVersion, dataset, projectId, sanityToken, studioUrl } from "./env"
+
+/**
+ * Sanity client instance
+ *
+ * Returns null if Sanity is not configured (missing env vars).
+ * Always check with isSanityConfigured() before using.
+ */
+export const client: SanityClient | null = isSanityConfigured()
+  ? createClient({
+      projectId,
+      dataset,
+      apiVersion,
+      useCdn: true,
+      perspective: "published",
+      token: sanityToken,
+      stega: {
+        studioUrl,
+        filter: (props) => {
+          if (props.sourcePath.at(-1) === "title") return true
+          return props.filterDefault(props)
+        },
+      },
+    })
+  : null

package/src/templates/next-pagebuilder/lib/integrations/sanity/components/disable-draft-mode.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useDraftModeEnvironment } from "next-sanity/hooks"
+
+export function DisableDraftMode() {
+  const environment = useDraftModeEnvironment()
+  const pathname = usePathname()
+
+  if (environment !== "live" && environment !== "unknown") return null
+  if (pathname.startsWith("/studio")) return null
+
+  return (
+    <Link
+      href="/api/draft-mode/disable"
+      scroll={false}
+      className="dr-p-4 fixed top-safe right-safe z-50 bg-red font-mono text-primary text-sm uppercase"
+    >
+      Disable Draft Mode
+    </Link>
+  )
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/components/page-builder-input.tsx

@@ -0,0 +1,36 @@
+import { type ArrayOfObjectsInputProps, useFormValue } from "sanity"
+import {
+  getVisiblePageBuilderInsertMenuGroups,
+  getVisiblePageBuilderReferenceMembers,
+  type PageBuilderGroupName,
+} from "@/lib/integrations/sanity/page-builder-config"
+
+export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
+  const pageTypeValue = useFormValue(["type"])
+  const pageType =
+    typeof pageTypeValue === "string"
+      ? (pageTypeValue as PageBuilderGroupName)
+      : undefined
+
+  const visibleMemberNames = new Set(
+    getVisiblePageBuilderReferenceMembers(pageType).map((member) => member.name)
+  )
+
+  return props.renderDefault({
+    ...props,
+    schemaType: {
+      ...props.schemaType,
+      of: props.schemaType.of.filter(
+        (member) =>
+          typeof member.name === "string" && visibleMemberNames.has(member.name)
+      ),
+      options: {
+        ...props.schemaType.options,
+        insertMenu: {
+          ...props.schemaType.options?.insertMenu,
+          groups: getVisiblePageBuilderInsertMenuGroups(pageType),
+        },
+      },
+    },
+  })
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/components/page-category-input.tsx

@@ -0,0 +1,50 @@
+import { Select } from "@sanity/ui"
+import { useEffect } from "react"
+import { type StringInputProps, set, setIfMissing } from "sanity"
+
+type PageCategoryOption = {
+  title: string
+  value: string
+}
+
+const isPageCategoryOption = (option: unknown): option is PageCategoryOption =>
+  typeof option === "object" &&
+  option !== null &&
+  "title" in option &&
+  "value" in option &&
+  typeof option.title === "string" &&
+  typeof option.value === "string"
+
+export function PageCategoryInput(props: StringInputProps) {
+  useEffect(() => {
+    if (props.value === undefined) {
+      props.onChange(setIfMissing("generic"))
+    }
+  }, [props.onChange, props.value])
+
+  const options = Array.isArray(props.schemaType.options?.list)
+    ? props.schemaType.options.list.filter(isPageCategoryOption)
+    : []
+
+  if (options.length === 0) {
+    return props.renderDefault({ ...props, value: props.value ?? "generic" })
+  }
+
+  return (
+    <Select
+      {...props.elementProps}
+      disabled={props.readOnly}
+      onChange={(event) => props.onChange(set(event.currentTarget.value))}
+      value={props.value ?? "generic"}
+      {...(props.validationError
+        ? { customValidity: props.validationError }
+        : {})}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.title}
+        </option>
+      ))}
+    </Select>
+  )
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/components/rich-text.tsx

@@ -0,0 +1,84 @@
+import { PortableText, type PortableTextProps } from "@portabletext/react"
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import { getLinkAttributes, urlForReference } from "../utils/link"
+
+interface RichTextProps {
+  content: PortableTextProps["value"]
+}
+
+type LinkMarkProps = {
+  children: React.ReactNode
+  value?: unknown
+}
+
+const LinkMark = ({ children, value }: LinkMarkProps) => {
+  const href = urlForReference(value as Parameters<typeof urlForReference>[0])
+  const attrs = getLinkAttributes(
+    value as Parameters<typeof getLinkAttributes>[0]
+  )
+
+  return (
+    <Link
+      href={href}
+      target={attrs.target}
+      rel={attrs.rel}
+      data-sanity-edit-target
+    >
+      {children}
+    </Link>
+  )
+}
+
+export const RichText = ({ content }: RichTextProps) => {
+  if (!content) return null
+
+  return (
+    <PortableText
+      value={content}
+      components={{
+        types: {
+          image: ({ value }) => <SanityImage image={value} maxWidth={1920} />,
+          table: ({ value }) => {
+            const rows = value?.rows as
+              | Array<{ _key?: string; cells?: string[] }>
+              | undefined
+            if (!rows?.length) return null
+            return (
+              <table>
+                <tbody>
+                  {rows.map((row, i) => (
+                    <tr key={row._key ?? `row-${i}`}>
+                      {row.cells?.map((cell) => {
+                        const cellKey = `${row._key}-${cell}`
+                        return i === 0 ? (
+                          <th key={cellKey}>{cell}</th>
+                        ) : (
+                          <td key={cellKey}>{cell}</td>
+                        )
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )
+          },
+        },
+        marks: {
+          link: LinkMark,
+          pageReference: LinkMark,
+          externalLink: LinkMark,
+        },
+        block: {
+          h1: ({ children }) => <h1 className="h1">{children}</h1>,
+          h2: ({ children }) => <h2 className="h2">{children}</h2>,
+          h3: ({ children }) => <h3 className="h3">{children}</h3>,
+          h4: ({ children }) => <h4 className="h4">{children}</h4>,
+          h5: ({ children }) => <h5 className="h5">{children}</h5>,
+          h6: ({ children }) => <h6 className="h6">{children}</h6>,
+          normal: ({ children }) => <p className="p">{children}</p>,
+        },
+      }}
+    />
+  )
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/confirm-publish-action.ts

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import type {
+  DocumentActionComponent,
+  DocumentActionDialogProps,
+  DocumentActionProps,
+} from "sanity";
+
+export function createConfirmPublishAction(
+  originalPublishAction: DocumentActionComponent,
+): DocumentActionComponent {
+  const ConfirmPublishAction = (props: DocumentActionProps) => {
+    const original = originalPublishAction(props);
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (!original) return null;
+
+    const { dialog: _originalDialog, ...originalWithoutDialog } = original;
+    const dialog: DocumentActionDialogProps | false = dialogOpen
+      ? {
+          type: "confirm",
+          tone: "critical",
+          message:
+            "This will make these changes live on the production site immediately. Continue?",
+          onCancel: () => setDialogOpen(false),
+          onConfirm: () => {
+            setDialogOpen(false);
+            original.onHandle?.();
+          },
+        }
+      : false;
+
+    return {
+      ...originalWithoutDialog,
+      onHandle: () => setDialogOpen(true),
+      dialog,
+    };
+  };
+
+  return ConfirmPublishAction;
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/env.ts

@@ -0,0 +1,34 @@
+/**
+ * Sanity Environment Configuration
+ *
+ * All values have safe defaults to allow the app to build and run
+ * without Sanity configured. Use isSanityConfigured() to check
+ * if Sanity is properly set up before making API calls.
+ */
+
+/** Sanity API version - defaults to latest stable */
+export const apiVersion =
+  process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2024-03-15"
+
+/** Sanity dataset name - defaults to 'production' */
+export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || "production"
+
+/** Sanity project ID - empty string if not configured */
+export const projectId =
+  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID ||
+  process.env.SANITY_STUDIO_PROJECT_ID ||
+  ""
+
+/** Sanity Studio URL for visual editing */
+export const studioUrl =
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:3000/studio"
+    : `${process.env.NEXT_PUBLIC_BASE_URL || ""}/studio`
+
+export const sanityToken = process.env.SANITY_API_READ_TOKEN || ""
+
+/** Preview URL for draft mode */
+export const previewURL =
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:3000"
+    : process.env.NEXT_PUBLIC_BASE_URL || ""

package/src/templates/next-pagebuilder/lib/integrations/sanity/fetchers/layout.ts

@@ -0,0 +1,35 @@
+import { sanityFetch } from "@/lib/integrations/sanity/live"
+import {
+  COMPANY_DATA_QUERY,
+  FOOTER_QUERY,
+  NAVBAR_QUERY,
+} from "@/lib/integrations/sanity/queries"
+import type {
+  COMPANY_DATA_QUERY_RESULT,
+  FOOTER_QUERY_RESULT,
+  NAVBAR_QUERY_RESULT,
+} from "@/lib/integrations/sanity/sanity.types"
+
+export type NavbarData = NonNullable<NAVBAR_QUERY_RESULT>
+export type FooterData = NonNullable<FOOTER_QUERY_RESULT>
+export type CompanyData = NonNullable<COMPANY_DATA_QUERY_RESULT>
+
+export const SANITY_LAYOUT_TAGS = ["navbar", "footer", "companyData"]
+
+export const getNavbar = async (): Promise<NavbarData | null> => {
+  const { data } = await sanityFetch({ query: NAVBAR_QUERY, tags: ["navbar"] })
+  return data
+}
+
+export const getFooter = async (): Promise<FooterData | null> => {
+  const { data } = await sanityFetch({ query: FOOTER_QUERY, tags: ["footer"] })
+  return data
+}
+
+export const getCompanyData = async (): Promise<CompanyData | null> => {
+  const { data } = await sanityFetch({
+    query: COMPANY_DATA_QUERY,
+    tags: ["companyData"],
+  })
+  return data
+}

package/src/templates/next-pagebuilder/lib/integrations/sanity/icons.ts

@@ -0,0 +1,58 @@
+import type { Icon, IconProps } from "@phosphor-icons/react"
+import {
+  ArticleNyTimesIcon,
+  BrowsersIcon,
+  BuildingsIcon,
+  FileTextIcon,
+  FolderOpenIcon,
+  FootprintsIcon,
+  LayoutIcon,
+  ListBulletsIcon,
+  ListIcon,
+  PackageIcon,
+  RocketIcon,
+  ShapesIcon,
+  ShareNetworkIcon,
+  TagIcon,
+  TextAlignLeftIcon,
+  UserCircleIcon,
+} from "@phosphor-icons/react/dist/ssr"
+import { createElement, forwardRef } from "react"
+
+export type SanityStudioIcon = Icon
+
+const asDuotoneIcon = (IconComponent: Icon): SanityStudioIcon => {
+  const DuotoneIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) =>
+    createElement(IconComponent, { ...props, ref, weight: "duotone" })
+  )
+
+  DuotoneIcon.displayName = `${IconComponent.displayName ?? "Phosphor"}Duotone`
+
+  return DuotoneIcon
+}
+
+export const pageBuilderCardIcon = asDuotoneIcon(PackageIcon)
+export const pageBuilderCardListIcon = asDuotoneIcon(ListIcon)
+
+export const authorIcon = asDuotoneIcon(UserCircleIcon)
+
+export const pageListIcon = asDuotoneIcon(ListBulletsIcon)
+
+export const blogCategoryIcon = asDuotoneIcon(TagIcon)
+
+export const componentsFolderIcon = asDuotoneIcon(ShapesIcon)
+
+export const companyDataIcon = asDuotoneIcon(BuildingsIcon)
+export const socialLinksIcon = asDuotoneIcon(ShareNetworkIcon)
+export const navbarIcon = asDuotoneIcon(ListIcon)
+export const footerIcon = asDuotoneIcon(FootprintsIcon)
+export const layoutFolderIcon = asDuotoneIcon(LayoutIcon)
+
+export const heroIcon = asDuotoneIcon(RocketIcon)
+export const descriptionIcon = asDuotoneIcon(TextAlignLeftIcon)
+export const contentIcon = asDuotoneIcon(ArticleNyTimesIcon)
+
+export const pageIcon = asDuotoneIcon(FileTextIcon)
+export const pagesFolderIcon = asDuotoneIcon(BrowsersIcon)
+export const pageFolderIcon = asDuotoneIcon(FolderOpenIcon)
+export const contentFolderIcon = asDuotoneIcon(FolderOpenIcon)

package/src/templates/next-pagebuilder/lib/integrations/sanity/live/index.tsx

@@ -0,0 +1,61 @@
+import { NextResponse } from "next/server"
+import { defineLive } from "next-sanity/live"
+import { isSanityConfigured } from "@/lib/integrations/check-integration"
+import { client } from "../client"
+import { sanityToken } from "../env"
+
+const isConfigured = isSanityConfigured() && client
+
+const liveExports =
+  isConfigured && client
+    ? defineLive({
+        client,
+        browserToken: sanityToken,
+        serverToken: sanityToken,
+      })
+    : null
+
+export const sanityFetch =
+  liveExports?.sanityFetch ?? (async () => ({ data: null }))
+
+export const SanityLive = liveExports?.SanityLive ?? (() => null)
+
+export const SanityFetch = async <T,>(
+  slug: string,
+  query: string,
+  label = "Content"
+): Promise<T | NextResponse> => {
+  if (!client) {
+    return new NextResponse(`# 503 Unavailable\n\nCMS client unavailable.`, {
+      status: 503,
+      headers: { "Content-Type": "text/markdown; charset=utf-8" },
+    })
+  }
+
+  try {
+    const { data } = await sanityFetch({
+      query,
+      params: { slug },
+    })
+
+    const result = data as T | null
+
+    if (!result) {
+      return new NextResponse(`# 404 Not Found\n\nPage not found.`, {
+        status: 404,
+        headers: { "Content-Type": "text/markdown; charset=utf-8" },
+      })
+    }
+
+    return result
+  } catch (error) {
+    console.error(`Error fetching ${label.toLowerCase()}:`, error)
+    return new NextResponse(
+      `# 500 Error\n\nFailed to fetch ${label.toLowerCase()}.`,
+      {
+        status: 500,
+        headers: { "Content-Type": "text/markdown; charset=utf-8" },
+      }
+    )
+  }
+}