bsmnt 0.2.10 → 0.3.0

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

@@ -0,0 +1,87 @@
+import { PortableText, type PortableTextProps } from "@portabletext/react"
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import {
+  getLinkAttributes,
+  urlForReference,
+} from "../../lib/integrations/sanity/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/components/sanity/visual-editing.tsx

@@ -0,0 +1,27 @@
+import { draftMode } from "next/headers"
+import { VisualEditing } from "next-sanity/visual-editing"
+import { Suspense } from "react"
+import { DraftModeToggle } from "@/components/sanity/draft-mode-toggle"
+import { isSanityConfigured } from "@/lib/integrations/check-integration"
+import { SanityLive } from "@/lib/integrations/sanity/live"
+
+async function VisualEditingInner() {
+  const { isEnabled: isDraftMode } = await draftMode()
+  const sanityConfigured = isSanityConfigured()
+
+  if (!(sanityConfigured && isDraftMode)) return null
+
+  return (
+    <>
+      <DraftModeToggle />
+      <VisualEditing />
+      <SanityLive />
+    </>
+  )
+}
+
+export const SanityVisualEditing = () => (
+  <Suspense fallback={null}>
+    <VisualEditingInner />
+  </Suspense>
+)

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

@@ -0,0 +1,216 @@
+/**
+ * Enhanced Image Component
+ *
+ * Next.js Image wrapper with optimized defaults and error handling.
+ * Always use this component instead of next/image directly.
+ */
+"use client"
+
+import cn from "clsx"
+import NextImage, { type ImageProps as NextImageProps } from "next/image"
+import type { CSSProperties, Ref } from "react"
+
+/**
+ * Enhanced Image component props extending Next.js Image.
+ *
+ * Adds responsive sizing, aspect ratio support, and automatic blur placeholders.
+ * Always use this component instead of next/image directly.
+ */
+export type ImageProps = Omit<NextImageProps, "objectFit" | "alt"> & {
+  /** CSS object-fit property for image positioning */
+  objectFit?: CSSProperties["objectFit"]
+  /** Display as block element (adds display: block) */
+  block?: boolean
+  /** Size on mobile devices (e.g., "100vw", "50vw") */
+  mobileSize?: `${number}vw`
+  /** Size on desktop devices (e.g., "33vw", "25vw") */
+  desktopSize?: `${number}vw`
+  /** Ref for accessing the underlying img element */
+  ref?: Ref<HTMLImageElement>
+  /** Alt text for accessibility (required for meaningful images) */
+  alt?: string
+  /** Aspect ratio for automatic placeholder and layout stability */
+  aspectRatio?: number
+}
+
+// Memoize helper functions to avoid recreation
+const toBase64 = (str: string) =>
+  typeof window === "undefined"
+    ? Buffer.from(str).toString("base64")
+    : window.btoa(str)
+
+// Helper to generate blur placeholder with transparent background by default
+const generateShimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="rgba(255,255,255,0.1)" offset="20%" />
+        <stop stop-color="rgba(255,255,255,0.2)" offset="50%" />
+        <stop stop-color="rgba(255,255,255,0.1)" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="rgba(0,0,0,0)" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`
+
+// Helper to determine if blur placeholder should be used
+const shouldUseBlurPlaceholder = (
+  src: NextImageProps["src"],
+  placeholder: string,
+  blurDataURL: string | undefined
+): boolean => {
+  if (!src) return false
+  const isSvg = typeof src === "string" && src.includes(".svg")
+  return !isSvg && placeholder === "blur" && !blurDataURL
+}
+
+// Helper to generate blur data URL
+const generateBlurDataURL = (
+  shouldUse: boolean,
+  aspectRatio: number | undefined,
+  existingBlurDataURL: string | undefined
+): string | undefined => {
+  if (!(shouldUse && aspectRatio)) return existingBlurDataURL
+
+  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio))
+  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`
+}
+
+// Helper to determine final placeholder value
+const getFinalPlaceholder = (
+  shouldUse: boolean,
+  aspectRatio: number | undefined,
+  blurDataURL: string | undefined,
+  originalPlaceholder: NextImageProps["placeholder"]
+): NextImageProps["placeholder"] => {
+  if (!shouldUse) {
+    return originalPlaceholder === "blur" && !blurDataURL
+      ? "empty"
+      : originalPlaceholder
+  }
+
+  return aspectRatio || blurDataURL ? "blur" : "empty"
+}
+
+/**
+ * Enhanced Image component with responsive sizing and automatic optimizations.
+ *
+ * Always use this component instead of next/image directly. Provides:
+ * - Automatic responsive sizes generation
+ * - Smart blur placeholders with aspect ratio support
+ * - Performance optimizations (lazy loading by default)
+ * - Priority flag for LCP images
+ *
+ * @param props - Image props extending Next.js Image
+ * @param props.aspectRatio - Aspect ratio for layout stability and blur placeholder
+ * @param props.mobileSize - Size on mobile (e.g., "100vw")
+ * @param props.desktopSize - Size on desktop (e.g., "50vw")
+ * @param props.block - Display as block element
+ * @param props.priority - Prioritize loading for LCP images
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with aspect ratio
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="Hero image"
+ *   aspectRatio={16/9}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // LCP image with priority
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="Hero image"
+ *   aspectRatio={16/9}
+ *   priority // Preloads image for LCP
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Responsive grid image
+ * <Image
+ *   src="/product.jpg"
+ *   alt="Product"
+ *   aspectRatio={1}
+ *   mobileSize="100vw"
+ *   desktopSize="33vw"
+ * />
+ * ```
+ */
+export function Image({
+  style,
+  className,
+  objectFit = "cover",
+  quality = 90,
+  alt = "",
+  fill,
+  block = !fill,
+  width = block ? 1 : undefined,
+  height = block ? 1 : undefined,
+  mobileSize = "100vw",
+  desktopSize = "100vw",
+  sizes,
+  src,
+  unoptimized,
+  ref,
+  aspectRatio,
+  placeholder = "blur",
+  priority = false,
+  ...props
+}: ImageProps) {
+  // Generate responsive sizes if not provided
+  const finalSizes =
+    sizes || `(max-width: 1440px) ${mobileSize}, ${desktopSize}`
+
+  // Early return after hooks
+  if (!src) return null
+
+  // Determine SVG status and placeholder logic
+  const isSvg = typeof src === "string" && src.includes(".svg")
+  const shouldUsePlaceholder = shouldUseBlurPlaceholder(
+    src,
+    placeholder,
+    props.blurDataURL
+  )
+  const blurDataURL = generateBlurDataURL(
+    shouldUsePlaceholder,
+    aspectRatio,
+    props.blurDataURL
+  )
+  const finalPlaceholder = getFinalPlaceholder(
+    shouldUsePlaceholder,
+    aspectRatio,
+    props.blurDataURL,
+    placeholder
+  )
+
+  return (
+    <NextImage
+      ref={ref}
+      fill={!block}
+      {...(width !== undefined && { width })}
+      {...(height !== undefined && { height })}
+      priority={priority}
+      quality={quality}
+      alt={alt}
+      style={{
+        objectFit,
+        ...style,
+      }}
+      className={cn(className, block && "block w-full")}
+      sizes={finalSizes}
+      src={src}
+      unoptimized={unoptimized || isSvg}
+      draggable={false}
+      onDragStart={(e) => e.preventDefault()}
+      {...(finalPlaceholder && { placeholder: finalPlaceholder })}
+      {...(blurDataURL && { blurDataURL })}
+      {...props}
+    />
+  )
+}

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>
+  )
+}