@tanqory/dev-mcp 0.0.0-stage → 0.1.0

package/bundled/examples/blank/src/sections/commerce.tsx

@@ -0,0 +1,242 @@
+/** Commerce sections: product, recommendations, collection, search, cart and the account page. */
+import {
+  AccountSlot,
+  AddToCart,
+  CartLine,
+  CartLineDecrement,
+  CartLineIncrement,
+  CartLineQuantity,
+  CartLineRemove,
+  CheckoutButton,
+  CollectionProvider,
+  FacetFilters,
+  Image,
+  Pagination,
+  ProductForm,
+  ProductPrice,
+  ProductQuantity,
+  SearchForm,
+  SortSelect,
+  VariantPicker,
+  defineSection,
+  field,
+  formatMoney,
+  useCart,
+  useRecommendations,
+  useSearch,
+  useTranslate,
+  type ProductFormState,
+} from '@tanqory/theme-kit/headless'
+import { Grid } from '../components/parts'
+
+function stockLine(p: ProductFormState, t: ReturnType<typeof useTranslate>): string {
+  if (!p.variant) return ''
+  if (!p.available) return t('product.soldOut')
+  if (p.quantityAvailable !== null && p.quantityAvailable <= 5) return t('product.lowStock', { count: p.quantityAvailable })
+  return t('product.inStock')
+}
+
+function ProductDetail({ settings }: { settings: { showVendor: boolean } }): JSX.Element {
+  const t = useTranslate()
+  return (
+    <ProductForm className="t-pdp">
+      {(p) =>
+        p.product ? (
+          <>
+            <div className="t-pdp__media">
+              <Image image={p.image} className="t-pdp__img" loading="eager" sizes="(max-width: 720px) 100vw, 50vw" fallback={<span className="t-pdp__img t-pdp__img--empty" />} />
+            </div>
+            <div className="t-pdp__info">
+              {settings.showVendor && p.product.vendor ? <p className="t-pdp__vendor">{p.product.vendor}</p> : null}
+              <h1 className="t-pdp__title">{p.product.title}</h1>
+              <ProductPrice className="t-pdp__price" compareClassName="t-pdp__was" />
+              <VariantPicker className="t-pdp__options" optionClassName="t-opt" legendClassName="t-opt__legend" valueClassName="t-chip" />
+              <p className="t-pdp__stock" aria-live="polite">
+                {stockLine(p, t)}
+              </p>
+              <div className="t-pdp__buy">
+                <ProductQuantity className="t-input t-input--qty" />
+                <AddToCart className="t-btn t-btn--solid t-pdp__add" />
+              </div>
+              {p.product.descriptionHtml ? <div className="t-pdp__desc" dangerouslySetInnerHTML={{ __html: p.product.descriptionHtml }} /> : null}
+            </div>
+          </>
+        ) : (
+          <p className="t-muted">{t('theme.product.missing')}</p>
+        )
+      }
+    </ProductForm>
+  )
+}
+
+export const product = defineSection({
+  type: 'product',
+  title: 'Product',
+  description: 'The product: image, title, price, options and add to cart.',
+  category: 'products',
+  requires: ['product'],
+  settings: { showVendor: field.boolean(true, { label: 'Show the brand' }) },
+  component: ProductDetail,
+})
+
+export const recommendations = defineSection({
+  // The data plan's convention: this type loads the product's recommendations in the server render.
+  type: 'product-recommendations',
+  title: 'Recommendations',
+  description: 'Products shoppers buy with this one.',
+  category: 'products',
+  requires: ['product'],
+  settings: { heading: field.text('Worn with', { label: 'Heading' }) },
+  presets: [{ name: 'Recommendations' }],
+  component: function Recommended({ settings }) {
+    const { products } = useRecommendations()
+    if (!products.length) return <section className="t-shelf t-shelf--empty" aria-hidden="true" />
+    return (
+      <section className="t-shelf">
+        <div className="t-shelf__head">
+          <h2 className="t-shelf__title">{settings.heading}</h2>
+        </div>
+        <Grid products={products.slice(0, 4)} />
+      </section>
+    )
+  },
+})
+
+export const collection = defineSection({
+  type: 'collection',
+  title: 'Collection',
+  description: 'The collection’s products with sort, filters and paging.',
+  category: 'products',
+  requires: ['collection'],
+  settings: { showDescription: field.boolean(true, { label: 'Show the description' }) },
+  component: function CollectionPage({ settings }) {
+    const t = useTranslate()
+    return (
+      <CollectionProvider>
+        {(c) => (
+          <section className="t-plp">
+            <header className="t-plp__head">
+              <p className="t-plp__kicker">{t('theme.collection.kicker')}</p>
+              <h1 className="t-plp__title">{c.collection?.title}</h1>
+              {settings.showDescription && c.collection?.description ? <p className="t-plp__desc">{c.collection.description}</p> : null}
+              {c.total !== null ? <p className="t-plp__count">{t('collection.productCount', { count: c.total })}</p> : null}
+            </header>
+            <div className="t-plp__body">
+              <aside className="t-plp__filters" aria-label={t('collection.filter')}>
+                <SortSelect className="t-sort" labelClassName="t-label" />
+                <FacetFilters className="t-facets" facetClassName="t-facet" legendClassName="t-label" valueClassName="t-check" clearClassName="t-link" />
+              </aside>
+              <div className="t-plp__main">
+                {c.products.length ? <Grid products={c.products} busy={c.status === 'loading'} eager={4} /> : <p className="t-muted">{c.filtered ? t('collection.empty') : t('theme.collection.none')}</p>}
+                {c.status === 'error' ? <p className="t-muted" role="alert">{t('collection.loadError')}</p> : null}
+                <Pagination className="t-pages" nextClassName="t-btn" previousClassName="t-btn" />
+              </div>
+            </div>
+          </section>
+        )}
+      </CollectionProvider>
+    )
+  },
+})
+
+export const search = defineSection({
+  type: 'search',
+  title: 'Search results',
+  category: 'products',
+  requires: ['search'],
+  settings: {},
+  component: function SearchPage() {
+    const s = useSearch()
+    const t = useTranslate()
+    return (
+      <section className="t-results">
+        <h1 className="t-results__title">{t('search.search')}</h1>
+        <SearchForm className="t-find t-find--page" inputClassName="t-find__input" buttonClassName="t-btn" resultsClassName="t-find__results" />
+        {s.query ? <p className="t-results__count" role="status">{s.products.length ? t('search.results', { count: s.total ?? s.products.length, query: s.query }) : t('search.none', { query: s.query })}</p> : null}
+        {s.products.length ? <Grid products={s.products} eager={4} /> : null}
+      </section>
+    )
+  },
+})
+
+export const cart = defineSection({
+  type: 'cart',
+  title: 'Cart',
+  category: 'cart',
+  requires: ['cart'],
+  settings: {},
+  component: function CartPage() {
+    const c = useCart()
+    const t = useTranslate()
+    return (
+      <section className="t-cart">
+        <h1 className="t-cart__title">{t('cart.title')}</h1>
+        {c.loadError && !c.ready ? <p className="t-muted" role="status">{t('cart.loadError')}</p> : null}
+        {c.lines.length === 0 ? (
+          <div className="t-cart__empty">
+            <p>{t('cart.empty')}</p>
+            <a className="t-btn" href="/collections/all">
+              {t('theme.cart.continue')}
+            </a>
+          </div>
+        ) : (
+          <>
+            <ul className="t-lines">
+              {c.lines.map((line) => (
+                <CartLine key={line.id} line={line} className="t-line">
+                  {(l) => (
+                    <>
+                      <Image image={line.variant.image} alt="" className="t-line__img" fallback={<span className="t-line__img t-line__img--empty" />} />
+                      <div className="t-line__info">
+                        <a className="t-line__title" href={line.product.url}>
+                          {line.product.title}
+                        </a>
+                        {line.variant.title && line.variant.title !== 'Default Title' ? <p className="t-muted">{line.variant.title}</p> : null}
+                        <p className="t-muted">{formatMoney(line.variant.price)}</p>
+                        {l.refusal ? <p role="alert">{t('cart.limitReached', { max: l.refusal.maxQuantity ?? line.quantity })}</p> : l.failed ? <p role="alert">{t('cart.lineFailed')}</p> : null}
+                      </div>
+                      <div className="t-line__qty">
+                        <CartLineDecrement className="t-step" />
+                        <CartLineQuantity className="t-input t-input--qty" />
+                        <CartLineIncrement className="t-step" />
+                      </div>
+                      <p className="t-line__total">{formatMoney(line.cost.total)}</p>
+                      <CartLineRemove className="t-link" />
+                    </>
+                  )}
+                </CartLine>
+              ))}
+            </ul>
+            <div className="t-cart__summary">
+              <p className="t-cart__row">
+                <span>{t('cart.subtotal')}</span> <span>{formatMoney(c.subtotal)}</span>
+              </p>
+              <p className="t-cart__row t-cart__row--total">
+                <span>{t('cart.total')}</span> <span>{formatMoney(c.total)}</span>
+              </p>
+              <p className="t-muted">{t('theme.cart.taxes')}</p>
+              <CheckoutButton className="t-btn t-btn--solid t-cart__checkout" />
+            </div>
+          </>
+        )}
+      </section>
+    )
+  },
+})
+
+export const account = defineSection({
+  type: 'account',
+  title: 'Account',
+  category: 'account',
+  requires: ['customer'],
+  settings: {},
+  component: function AccountPage() {
+    const t = useTranslate()
+    return (
+      <section className="t-account">
+        <h1 className="t-account__title">{t('account.title')}</h1>
+        <AccountSlot className="t-account__frame" />
+      </section>
+    )
+  },
+})

package/bundled/examples/blank/src/sections/content.tsx

@@ -0,0 +1,111 @@
+/** Content sections: a page, the contact form, the journal (blog), an article and the 404 page. */
+import { ContactForm, defineSection, field, useArticle, useBlog, usePageContent, useTranslate } from '@tanqory/theme-kit/headless'
+
+export const page = defineSection({
+  type: 'page',
+  title: 'Page',
+  category: 'content',
+  requires: ['page'],
+  settings: {},
+  component: function PageBody() {
+    const p = usePageContent()
+    if (!p) return <section className="t-page" />
+    return (
+      <article className="t-page">
+        <h1 className="t-page__title">{p.title}</h1>
+        <div className="t-prose" dangerouslySetInnerHTML={{ __html: p.html }} />
+      </article>
+    )
+  },
+})
+
+export const contact = defineSection({
+  type: 'contact-form',
+  title: 'Contact form',
+  description: 'A message form that reaches the store.',
+  category: 'forms',
+  settings: { heading: field.text('Write to us', { label: 'Heading' }) },
+  presets: [{ name: 'Contact form' }],
+  component: ({ settings }) => (
+    <section className="t-contact">
+      <h2 className="t-contact__title">{settings.heading}</h2>
+      <ContactForm className="t-form" inputClassName="t-input" labelClassName="t-label" buttonClassName="t-btn t-btn--solid" messageClassName="t-form__msg" />
+    </section>
+  ),
+})
+
+export const blog = defineSection({
+  type: 'blog',
+  title: 'Journal',
+  category: 'content',
+  requires: ['blog'],
+  settings: {},
+  component: function Journal() {
+    const b = useBlog()
+    const t = useTranslate()
+    if (!b) return <section className="t-journal" />
+    return (
+      <section className="t-journal">
+        <h1 className="t-journal__title">{b.title}</h1>
+        <ul className="t-journal__list">
+          {b.articles.map((a) => (
+            <li key={a.id} className="t-journal__item">
+              <a className="t-journal__link" href={a.url}>
+                <span className="t-journal__name">{a.title}</span>
+                {a.excerpt ? <span className="t-journal__excerpt">{a.excerpt}</span> : null}
+                <span className="t-journal__more">{t('theme.journal.read')}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    )
+  },
+})
+
+export const article = defineSection({
+  type: 'article',
+  title: 'Article',
+  category: 'content',
+  requires: ['article'],
+  settings: {},
+  component: function Story() {
+    const a = useArticle()
+    const b = useBlog()
+    const t = useTranslate()
+    if (!a) return <article className="t-story" />
+    return (
+      <article className="t-story">
+        {b ? (
+          <a className="t-story__back" href={b.url}>
+            {t('theme.journal.back', { blog: b.title })}
+          </a>
+        ) : null}
+        <h1 className="t-story__title">{a.title}</h1>
+        {a.author ? <p className="t-muted">{t('theme.journal.by', { author: a.author })}</p> : null}
+        <div className="t-prose" dangerouslySetInnerHTML={{ __html: a.contentHtml ?? '' }} />
+      </article>
+    )
+  },
+})
+
+export const notFound = defineSection({
+  // The runtime renders this type as the body of every 404 page (an unknown product, collection, page, blog).
+  type: 'not-found',
+  title: 'Not found',
+  category: 'content',
+  settings: {},
+  component: function Lost() {
+    const t = useTranslate()
+    return (
+      <section className="t-lost">
+        <p className="t-hero__kicker">404</p>
+        <h1 className="t-lost__title">{t('theme.notFound.title')}</h1>
+        <p className="t-muted">{t('theme.notFound.body')}</p>
+        <a className="t-btn" href="/">
+          {t('theme.notFound.home')}
+        </a>
+      </section>
+    )
+  },
+})

package/bundled/examples/blank/src/sections/editorial.tsx

@@ -0,0 +1,107 @@
+/** Editorial sections: a hero, a featured collection, a rich-text note and the newsletter sign-up. */
+import { Image, NewsletterForm, ai, defineSection, field, useCollection, useTranslate } from '@tanqory/theme-kit/headless'
+import { Grid, cx } from '../components/parts'
+
+export const hero = defineSection({
+  type: 'hero',
+  title: 'Hero',
+  description: 'A headline with a kicker, a short text, an optional image and one link.',
+  category: 'editorial',
+  settings: {
+    kicker: field.text('Welcome', { label: 'Kicker' }),
+    heading: field.text('Your store, your theme', { label: 'Heading' }),
+    body: field.richtext('', { label: 'Text' }),
+    image: field.resource('image', '', { label: 'Image' }),
+    buttonLabel: field.text('Shop all', { label: 'Button label' }),
+    buttonLink: field.url('/collections/all', { label: 'Button link' }),
+  },
+  presets: [{ name: 'Hero', settings: { kicker: 'Welcome', heading: 'Your store, your theme' } }],
+  ai: ai.hero({ heading: 'heading', subheading: 'kicker', image: 'image', button: 'buttonLabel', link: 'buttonLink' }),
+  component: ({ settings }) => (
+    <section className={cx('t-hero', settings.image && 't-hero--image')}>
+      {settings.image ? <Image image={settings.image} alt="" className="t-hero__img" loading="eager" /> : null}
+      <div className="t-hero__copy">
+        {settings.kicker ? <p className="t-hero__kicker">{settings.kicker}</p> : null}
+        <h1 className="t-hero__title">{settings.heading}</h1>
+        {settings.body ? <div className="t-hero__body" dangerouslySetInnerHTML={{ __html: settings.body }} /> : null}
+        {settings.buttonLabel && settings.buttonLink ? (
+          <a className="t-btn" href={settings.buttonLink}>
+            {settings.buttonLabel}
+          </a>
+        ) : null}
+      </div>
+    </section>
+  ),
+})
+
+function Shelf({ settings }: { settings: { heading: string; collection: string; count: number } }): JSX.Element {
+  const c = useCollection(settings.collection)
+  const t = useTranslate()
+  const products = c.products.slice(0, settings.count)
+  return (
+    <section className="t-shelf">
+      <div className="t-shelf__head">
+        <h2 className="t-shelf__title">{settings.heading || c.collection?.title}</h2>
+        {c.collection ? (
+          <a className="t-shelf__all" href={c.collection.url}>
+            {t('theme.shelf.viewAll')}
+          </a>
+        ) : null}
+      </div>
+      {products.length ? <Grid products={products} eager={4} /> : <p className="t-muted">{t('theme.shelf.empty')}</p>}
+    </section>
+  )
+}
+
+export const featuredCollection = defineSection({
+  type: 'featured-collection',
+  title: 'Featured collection',
+  description: 'A row of products from one collection.',
+  category: 'products',
+  settings: {
+    heading: field.text('Featured', { label: 'Heading' }),
+    collection: field.resource('collection', 'all', { label: 'Collection' }),
+    count: field.range(8, 4, 16, 4, { label: 'Products to show' }),
+  },
+  presets: [{ name: 'Featured collection', settings: { heading: 'Featured', collection: 'all' } }],
+  ai: ai.productGrid('collection', { heading: 'heading' }),
+  component: Shelf,
+})
+
+export const note = defineSection({
+  type: 'rich-text',
+  title: 'Rich text',
+  description: 'A heading and a paragraph.',
+  category: 'editorial',
+  settings: {
+    heading: field.text('About us', { label: 'Heading' }),
+    body: field.richtext('<p>Tell customers what your store is about.</p>', { label: 'Text' }),
+  },
+  presets: [{ name: 'Rich text' }],
+  ai: ai.richText({ heading: 'heading', body: 'body' }),
+  component: ({ settings }) => (
+    <section className="t-note">
+      {settings.heading ? <h2 className="t-note__title">{settings.heading}</h2> : null}
+      {settings.body ? <div className="t-note__body" dangerouslySetInnerHTML={{ __html: settings.body }} /> : null}
+    </section>
+  ),
+})
+
+export const letters = defineSection({
+  type: 'newsletter',
+  title: 'Newsletter',
+  description: 'An email sign-up for the store’s newsletter.',
+  category: 'forms',
+  settings: {
+    heading: field.text('Subscribe to our emails', { label: 'Heading' }),
+    body: field.textarea('Be the first to hear about new products.', { label: 'Text' }),
+  },
+  presets: [{ name: 'Newsletter' }],
+  component: ({ settings }) => (
+    <section className="t-letters">
+      <h2 className="t-letters__title">{settings.heading}</h2>
+      {settings.body ? <p className="t-letters__body">{settings.body}</p> : null}
+      <NewsletterForm className="t-letters__form" inputClassName="t-input" buttonClassName="t-btn t-btn--solid" messageClassName="t-letters__msg" />
+    </section>
+  ),
+})

package/bundled/examples/blank/src/settings.ts

@@ -0,0 +1,15 @@
+/** The theme settings (the editor's Theme panel). Add your own; every key needs a default. */
+import { defineSettings } from '@tanqory/theme-kit/headless'
+
+export const settings = defineSettings({
+  width: {
+    type: 'select',
+    label: 'Page width',
+    group: 'Layout',
+    default: 'normal',
+    options: [
+      { value: 'normal', label: 'Normal' },
+      { value: 'wide', label: 'Wide' },
+    ],
+  },
+})