@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/footers/footer-section.tsx

@@ -0,0 +1,532 @@
+'use client'
+
+import { useId, useState, type FormEvent, type ReactNode } from 'react'
+import { ArrowRight, type LucideIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../ui/button'
+import { Input } from '../../../ui/input'
+
+export type FooterPresentation = 'brand-columns' | 'newsletter-grid' | 'contact'
+export type FooterLinkBehavior = 'host' | 'native'
+
+export interface FooterBrandAccent {
+  text: string
+  className?: string
+}
+
+export interface FooterLink {
+  label: string
+  href?: string
+}
+
+export interface FooterLinkColumn {
+  title: string
+  links: FooterLink[]
+}
+
+export interface FooterSocialLink {
+  label: string
+  href?: string
+  icon: string
+  ariaLabel?: string
+}
+
+export interface FooterNewsletter {
+  title?: string
+  placeholder?: string
+  buttonLabel: string
+}
+
+export interface FooterContactItem {
+  label: string
+  href?: string
+}
+
+export interface FooterContact {
+  heading?: string
+  address?: FooterContactItem
+  phone?: FooterContactItem
+  email?: FooterContactItem
+}
+
+export interface FooterSectionProps {
+  presentation: FooterPresentation
+  brandName: string
+  linkColumns: FooterLinkColumn[]
+  brandAccent?: FooterBrandAccent
+  brandDescription?: string
+  newsletter?: FooterNewsletter
+  contact?: FooterContact
+  legalLinks?: FooterLink[]
+  socialLinks?: FooterSocialLink[]
+  copyright?: string
+  logo?: ReactNode
+  socialIcons?: Record<string, LucideIcon>
+  className?: string
+  linkBehavior?: FooterLinkBehavior
+  socialLinkBehavior?: FooterLinkBehavior
+  onNewsletterSubmit?: (email: string) => void
+  onLinkClick?: (link: FooterLink) => void
+  onSocialClick?: (label: string) => void
+}
+
+const footerPresentations: readonly FooterPresentation[] = [
+  'brand-columns',
+  'newsletter-grid',
+  'contact',
+]
+
+function DefaultFooterMark() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-8 shrink-0 text-primary"
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M4 5h6v18h17M7 11h18l-4 8H7V11Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <circle cx="11" cy="27" r="1.5" fill="currentColor" />
+      <circle cx="23" cy="27" r="1.5" fill="currentColor" />
+    </svg>
+  )
+}
+
+function FooterBrand({
+  brandName,
+  brandAccent,
+  brandDescription,
+  logo,
+}: Pick<
+  FooterSectionProps,
+  'brandName' | 'brandAccent' | 'brandDescription' | 'logo'
+>) {
+  const accent = brandAccent?.text ?? ''
+  const hasTrailingAccent = Boolean(accent && brandName.endsWith(accent))
+  const brandPrefix = hasTrailingAccent
+    ? brandName.slice(0, brandName.length - accent.length)
+    : brandName
+
+  return (
+    <div className="flex max-w-sm flex-col gap-4">
+      <div className="flex items-center gap-3">
+        {logo ?? <DefaultFooterMark />}
+        <h2 className="text-2xl font-bold text-balance">
+          {brandPrefix}
+          {hasTrailingAccent ? (
+            <span className={cn('text-primary', brandAccent?.className)}>
+              {accent}
+            </span>
+          ) : null}
+        </h2>
+      </div>
+      {brandDescription ? (
+        <p className="text-muted-foreground text-sm leading-relaxed text-balance">
+          {brandDescription}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+function FooterContactDetails({ contact }: { contact?: FooterContact }) {
+  if (!contact) return null
+
+  const items = [contact.address, contact.phone, contact.email].filter(
+    (item): item is FooterContactItem => Boolean(item),
+  )
+
+  if (items.length === 0 && !contact.heading) return null
+
+  return (
+    <address className="not-italic">
+      {contact.heading ? (
+        <h3 className="mb-4 text-base font-semibold text-balance">
+          {contact.heading}
+        </h3>
+      ) : null}
+      <ul className="flex flex-col gap-3">
+        {items.map((item) => (
+          <li key={JSON.stringify([item.label, item.href ?? null])}>
+            {item.href ? (
+              <a
+                href={item.href}
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {item.label}
+              </a>
+            ) : (
+              <span className="text-muted-foreground text-sm">
+                {item.label}
+              </span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </address>
+  )
+}
+
+function assertUniqueKeys<T>(
+  items: readonly T[],
+  getTuple: (item: T) => readonly (string | null)[],
+  listName: string,
+) {
+  const keys = new Set<string>()
+
+  for (const item of items) {
+    const key = JSON.stringify(getTuple(item))
+
+    if (typeof key !== 'string') {
+      throw new Error(`FooterSection could not derive a ${listName} key.`)
+    }
+
+    if (keys.has(key)) {
+      throw new Error(`FooterSection ${listName} keys must be unique.`)
+    }
+
+    keys.add(key)
+  }
+}
+
+function FooterNewsletterForm({
+  newsletter,
+  onSubmit,
+}: {
+  newsletter: FooterNewsletter
+  onSubmit?: (email: string) => void
+}) {
+  const [email, setEmail] = useState('')
+  const inputId = useId()
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!onSubmit) return
+
+    onSubmit(email)
+  }
+
+  return (
+    <section aria-label={newsletter.title ?? 'Newsletter'} className="w-full">
+      {newsletter.title ? (
+        <h3 className="mb-4 text-base font-semibold text-balance">
+          {newsletter.title}
+        </h3>
+      ) : null}
+      <form className="flex w-full max-w-xl gap-2" onSubmit={handleSubmit}>
+        <label htmlFor={inputId} className="sr-only">
+          {newsletter.placeholder ?? newsletter.title ?? newsletter.buttonLabel}
+        </label>
+        <Input
+          id={inputId}
+          type="email"
+          autoComplete="email"
+          placeholder={newsletter.placeholder}
+          value={email}
+          onChange={(event) => setEmail(event.currentTarget.value)}
+          disabled={!onSubmit}
+        />
+        <Button type="submit" disabled={!onSubmit}>
+          {newsletter.buttonLabel}
+          <ArrowRight aria-hidden="true" />
+        </Button>
+      </form>
+    </section>
+  )
+}
+
+function FooterSocialLinks({
+  socialLinks,
+  socialIcons,
+  onSocialClick,
+  socialLinkBehavior,
+}: {
+  socialLinks?: FooterSocialLink[]
+  socialIcons?: Record<string, LucideIcon>
+  onSocialClick?: (label: string) => void
+  socialLinkBehavior: FooterLinkBehavior
+}) {
+  if (!socialLinks || socialLinks.length === 0) return null
+
+  return (
+    <nav aria-label="Social media">
+      <ul className="flex flex-wrap items-center gap-3">
+        {socialLinks.map((social) => {
+          const Icon = socialIcons?.[social.icon]
+          const content = Icon ? (
+            <>
+              <Icon aria-hidden="true" className="size-5" />
+              <span className="sr-only">{social.label}</span>
+            </>
+          ) : (
+            social.label
+          )
+
+          return (
+            <li key={JSON.stringify([social.label, social.href ?? null, social.icon])}>
+              {social.href &&
+              (socialLinkBehavior === 'native' || onSocialClick) ? (
+                <a
+                  href={social.href}
+                  aria-label={social.ariaLabel ?? social.label}
+                  onClick={(event) => {
+                    if (socialLinkBehavior === 'host') {
+                      event.preventDefault()
+                    }
+                    onSocialClick?.(social.label)
+                  }}
+                  className="inline-flex min-h-10 min-w-10 items-center justify-center rounded-full bg-accent p-2 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden"
+                >
+                  {content}
+                </a>
+              ) : (
+                <span className="text-muted-foreground text-sm">{content}</span>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+
+function FooterLegalLinks({
+  links,
+  onLinkClick,
+  linkBehavior,
+}: {
+  links?: FooterLink[]
+  onLinkClick?: (link: FooterLink) => void
+  linkBehavior: FooterLinkBehavior
+}) {
+  if (!links || links.length === 0) return null
+
+  return (
+    <nav aria-label="Legal information">
+      <ul className="flex flex-wrap gap-x-5 gap-y-2">
+        {links.map((link) => (
+          <li key={JSON.stringify([link.label, link.href ?? null])}>
+            {link.href && (linkBehavior === 'native' || onLinkClick) ? (
+              <a
+                href={link.href}
+                onClick={(event) => {
+                  if (linkBehavior === 'host') {
+                    event.preventDefault()
+                  }
+                  onLinkClick?.(link)
+                }}
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {link.label}
+              </a>
+            ) : (
+              <span className="text-muted-foreground text-sm">
+                {link.label}
+              </span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+function FooterLinkColumns({
+  columns,
+  onLinkClick,
+  linkBehavior,
+  className,
+}: {
+  columns: FooterLinkColumn[]
+  onLinkClick?: (link: FooterLink) => void
+  linkBehavior: FooterLinkBehavior
+  className?: string
+}) {
+  if (columns.length === 0) return null
+
+  return (
+    <div className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2', className)}>
+      {columns.map((column) => (
+        <nav key={JSON.stringify([column.title])} aria-label={column.title}>
+          <h3 className="mb-4 text-base font-semibold text-balance">
+            {column.title}
+          </h3>
+          <ul className="flex flex-col gap-3">
+            {column.links.map((link) => (
+              <li key={JSON.stringify([link.label, link.href ?? null])}>
+                {link.href && (linkBehavior === 'native' || onLinkClick) ? (
+                  <a
+                    href={link.href}
+                    onClick={(event) => {
+                      if (linkBehavior === 'host') {
+                        event.preventDefault()
+                      }
+                      onLinkClick?.(link)
+                    }}
+                    className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+                  >
+                    {link.label}
+                  </a>
+                ) : (
+                  <span className="text-muted-foreground text-sm">
+                    {link.label}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ))}
+    </div>
+  )
+}
+
+export function FooterSection({
+  presentation,
+  brandName,
+  brandAccent,
+  brandDescription,
+  linkColumns,
+  newsletter,
+  contact,
+  legalLinks,
+  socialLinks,
+  socialIcons,
+  copyright,
+  logo,
+  className,
+  onNewsletterSubmit,
+  onLinkClick,
+  onSocialClick,
+  linkBehavior = 'host',
+  socialLinkBehavior = 'host',
+}: FooterSectionProps) {
+  if (!footerPresentations.includes(presentation)) {
+    throw new Error(
+      `FooterSection requires a supported presentation; received ${String(presentation)}.`,
+    )
+  }
+
+  assertUniqueKeys(linkColumns, (column) => [column.title], 'column')
+
+  for (const column of linkColumns) {
+    assertUniqueKeys(
+      column.links,
+      (link) => [link.label, link.href ?? null],
+      'link',
+    )
+  }
+
+  assertUniqueKeys(
+    legalLinks ?? [],
+    (link) => [link.label, link.href ?? null],
+    'legal link',
+  )
+  assertUniqueKeys(
+    socialLinks ?? [],
+    (social) => [social.label, social.href ?? null, social.icon],
+    'social',
+  )
+
+  const brand = (
+    <FooterBrand
+      brandName={brandName}
+      brandAccent={brandAccent}
+      brandDescription={brandDescription}
+      logo={logo}
+    />
+  )
+  const columns = (
+    <FooterLinkColumns
+      columns={linkColumns}
+      onLinkClick={onLinkClick}
+      linkBehavior={linkBehavior}
+    />
+  )
+  const contactDetails = <FooterContactDetails contact={contact} />
+  const newsletterForm = newsletter ? (
+    <FooterNewsletterForm
+      newsletter={newsletter}
+      onSubmit={onNewsletterSubmit}
+    />
+  ) : null
+  const legal = (
+    <FooterLegalLinks
+      links={legalLinks}
+      onLinkClick={onLinkClick}
+      linkBehavior={linkBehavior}
+    />
+  )
+  const socials = (
+    <FooterSocialLinks
+      socialLinks={socialLinks}
+      socialIcons={socialIcons}
+      onSocialClick={onSocialClick}
+      socialLinkBehavior={socialLinkBehavior}
+    />
+  )
+
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={`${brandName} footer`}
+      className={cn(
+        'w-full border-t border-border bg-background text-foreground',
+        className,
+      )}
+    >
+      <div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
+        {presentation === 'brand-columns' ? (
+          <div className="grid gap-12 md:grid-cols-[minmax(0,1fr)_2fr]">
+            <div className="flex flex-col gap-8">
+              {brand}
+              {newsletterForm}
+              {contactDetails}
+            </div>
+            <div className="flex flex-col gap-8">
+              {columns}
+              {legal}
+            </div>
+          </div>
+        ) : null}
+
+        {presentation === 'newsletter-grid' ? (
+          <div className="flex flex-col gap-12">
+            <div className="grid gap-8 border-b border-border pb-10 md:grid-cols-[minmax(0,1fr)_2fr] md:items-end">
+              {brand}
+              {contactDetails}
+            </div>
+            {newsletterForm}
+            {columns}
+            {legal}
+          </div>
+        ) : null}
+
+        {presentation === 'contact' ? (
+          <div className="grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2fr]">
+            {brand}
+            {contactDetails}
+            <div className="flex flex-col gap-8">
+              {newsletterForm}
+              {columns}
+              {legal}
+            </div>
+          </div>
+        ) : null}
+
+        {socials ? <div className="mt-10">{socials}</div> : null}
+
+        {copyright ? (
+          <div className="mt-10 border-t border-border pt-6">
+            <p className="text-muted-foreground text-sm">{copyright}</p>
+          </div>
+        ) : null}
+      </div>
+    </footer>
+  )
+}

package/src/blocks/marketing/navbars/navbar-public-api.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+
+import * as blocks from '../../../index'
+import {
+  Navbar,
+  StorefrontNavbar,
+  navbarPropsSchema,
+  storefrontNavbarPropsSchema,
+  type NavbarPresentation,
+  type NavbarProps,
+  type NavbarSpecProps,
+  type StorefrontNavbarProps,
+  type StorefrontNavbarSpecProps,
+} from '../../../index'
+
+const specProps: NavbarSpecProps = {
+  presentation: 'mega',
+  logoText: 'Acme',
+  links: [{ label: 'Shop', href: '/shop' }],
+}
+const parsedProps = navbarPropsSchema.parse(specProps) as NavbarProps
+const presentation: NavbarPresentation = parsedProps.presentation ?? 'bar'
+
+const shellSpecProps: StorefrontNavbarSpecProps = {
+  storeCategories: [{ label: 'Catalog', href: '/catalog' }],
+  utilityLinks: [],
+  logoText: 'Acme',
+}
+const shellProps: StorefrontNavbarProps = {
+  ...storefrontNavbarPropsSchema.parse(shellSpecProps),
+  showSearch: false,
+}
+
+describe('Blocks navigation package exports', () => {
+  it('exposes the canonical navigation components and their contracts from the package root', () => {
+    expect(Navbar).toEqual(expect.any(Function))
+    expect(StorefrontNavbar).toEqual(expect.any(Function))
+    expect(navbarPropsSchema.parse).toEqual(expect.any(Function))
+    expect(storefrontNavbarPropsSchema.parse).toEqual(expect.any(Function))
+    expect({ presentation, shellProps }).toBeDefined()
+  })
+
+  it('no longer exposes the retired numbered navigation surface', () => {
+    const retired = [
+      'Navbar1',
+      'Navbar2',
+      'Navbar3',
+      'Navbar4',
+      'navbar4PropsSchema',
+      'Navbar4SpecProps',
+    ] as const
+
+    for (const name of retired) {
+      expect((blocks as unknown as Record<string, unknown>)[name]).toBeUndefined()
+    }
+  })
+})