@byline/cli 0.1.1

package/dist/templates/ui-byline/components/link/link-lexical.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { LangLink } from '@/ui/byline/components/link/lang-link'
+import type { Locale } from '@/ui/byline/types/i18n'
+
+// import { getPublicWebsiteUrl } from '@/utils/utils.framework.ts'
+
+export interface LinkAttributes {
+  linkType?: 'custom' | 'internal'
+  newTab?: boolean
+  nofollow?: boolean
+  rel?: string
+  url?: string
+  doc?: {
+    value: string
+    relationTo: string
+    data: {
+      id: string
+      title: string
+      slug: string
+      area: string
+      collectionAlias: string
+    }
+  }
+}
+
+export type LinkType = 'internal' | 'custom'
+
+export interface LinkLexicalProps {
+  attributes: LinkAttributes
+  lng: Locale
+  className?: string
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  children?: React.ReactNode
+}
+
+export function manageRel(input: string, action: 'add' | 'remove', value: string): string {
+  let result: string
+  let mutableInput = `${input}`
+  if (action === 'add') {
+    // if we somehow got out of sync - clean up
+    if (mutableInput.includes(value)) {
+      const re = new RegExp(value, 'g')
+      mutableInput = mutableInput.replace(re, '').trim()
+    }
+    mutableInput = mutableInput.trim()
+    result = mutableInput.length === 0 ? `${value}` : `${mutableInput} ${value}`
+  } else {
+    const re = new RegExp(value, 'g')
+    result = mutableInput.replace(re, '').trim()
+  }
+  return result
+}
+
+function getHref(args: LinkAttributes): string {
+  let href = ''
+  const publicWebsiteUrl = '/' // getPublicWebsiteUrl()
+  const { linkType, url } = args
+
+  if ((linkType === 'custom' || linkType === undefined) && url != null) {
+    href = url
+  } else if (
+    linkType === 'internal' &&
+    args.doc?.relationTo != null &&
+    args.doc?.data?.slug != null
+  ) {
+    const collection = args.doc.relationTo
+    const { slug, area, collectionAlias } = args.doc.data
+    if (collectionAlias != null) {
+      // The alias might be for the root
+      if (collectionAlias.length === 0) {
+        href = `/${slug}`
+      } else {
+        href = `/${collectionAlias}/${slug}`
+      }
+    } else {
+      href = `/${collection}/${slug}`
+    }
+
+    if (area != null && area.length > 0 && area !== 'root') {
+      href = `/${area}${href}`
+    }
+  }
+
+  const hrefIsLocal = ['tel:', 'mailto:', '/'].some((prefix) => href.startsWith(prefix))
+  if (!hrefIsLocal) {
+    try {
+      const objectURL = new URL(href)
+      if (objectURL.origin === publicWebsiteUrl) {
+        href = objectURL.href.replace(publicWebsiteUrl, '')
+      }
+    } catch (e) {
+      console.error(`Failed to format url: ${href}`, e) // eslint-disable-line no-console
+    }
+  }
+
+  return href
+}
+
+function getAdditionalProps(
+  args: LinkAttributes,
+  href: string
+): {
+  rel: string | undefined
+  target: string | undefined
+} {
+  const additionalProps: {
+    rel: string | undefined
+    target: string | undefined
+  } = {
+    rel: undefined,
+    target: undefined,
+  }
+
+  let rel = ''
+  if (args.nofollow === true) rel = manageRel(rel, 'add', 'nofollow')
+  if (args.newTab === true) rel = manageRel(rel, 'add', 'noopener')
+  additionalProps.rel = rel
+
+  if (args.newTab === true) {
+    additionalProps.target = '_blank'
+  }
+
+  if (!href.startsWith('/')) {
+    additionalProps.target = '_blank'
+  }
+
+  if (additionalProps.rel == null || additionalProps.rel.length === 0) delete additionalProps.rel
+  if (additionalProps.target == null) delete additionalProps.target
+
+  return additionalProps
+}
+
+export function LinkLexicalSerializer({
+  attributes,
+  lng,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+}: LinkLexicalProps): React.JSX.Element {
+  const href = getHref(attributes)
+  const additionalProps = getAdditionalProps(attributes, href)
+
+  if (href.startsWith('/')) {
+    return (
+      <LangLink
+        lng={lng}
+        to={href}
+        {...additionalProps}
+        className={cx(className, 'underline')}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children}
+      </LangLink>
+    )
+  }
+  return (
+    <a
+      href={href}
+      {...additionalProps}
+      className={cx(className, 'underline')}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <span className="underline">{children}</span>
+      <span style={{ display: 'inline', whiteSpace: 'nowrap' }}>
+        &#x202F;
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="fill-[#001827] dark:fill-gray-50"
+          style={{ display: 'inline' }}
+          focusable="false"
+          aria-hidden="true"
+          height="14px"
+          width="14px"
+          viewBox="0 0 24 24"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+        </svg>
+      </span>
+    </a>
+  )
+}

package/dist/templates/ui-byline/components/list/index.ts

@@ -0,0 +1,2 @@
+export * from './list.tsx'
+export * from './list-item.tsx'

package/dist/templates/ui-byline/components/list/list-item.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import type React from 'react'
+
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+export function ListItemSerializer({
+  node,
+  children,
+}: {
+  node: SerializedLexicalNode
+  children: React.ReactNode
+}): React.JSX.Element {
+  if (node?.checked != null) {
+    return (
+      <li
+        className={`not-prose component--list-item-checkbox ${
+          node.checked === true
+            ? 'component--list-item-checkbox-checked'
+            : 'component--list-item-checked-unchecked'
+        }`}
+        value={node?.value}
+        // aria-checked={node.checked === true ? 'true' : 'false'}
+        tabIndex={-1}
+      >
+        {children}
+      </li>
+    )
+  } else {
+    return <li value={node?.value}>{children}</li>
+  }
+}

package/dist/templates/ui-byline/components/list/list.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import type React from 'react'
+
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+export function ListSerializer({
+  node,
+  children,
+}: {
+  node: SerializedLexicalNode
+  children: React.ReactNode
+}): React.JSX.Element {
+  type List = Extract<keyof React.JSX.IntrinsicElements, 'ul' | 'ol'>
+  const Tag = node?.tag as List
+  return <Tag className={node?.listType}>{children}</Tag>
+}

package/dist/templates/ui-byline/components/responsive-image/index.tsx

@@ -0,0 +1,205 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+'use client'
+
+import type { CSSProperties } from 'react'
+
+import type { StoredFileValue } from '@byline/core'
+import cx from 'classnames'
+
+import {
+  getVariant,
+  getVariantSrcSet,
+  hasVariantFormat,
+  VARIANT_MIME,
+  type VariantFormat,
+} from '@/ui/byline/utils/image-sources'
+
+/**
+ * Responsive `<picture>` driven by Byline's image-field upload value.
+ *
+ * Collection-agnostic — the only data dependency is `StoredFileValue`,
+ * the per-field upload metadata that any `image` field carries. So a
+ * caller hands in `media.image` from a populated relation, an avatar's
+ * `image` field, an inline upload — whatever — and gets back AVIF /
+ * WebP `<source>` srcSets plus a sensible fallback.
+ *
+ * Source order is **AVIF first, WebP second** — browsers walk the
+ * sources in document order and pick the first one whose `type` they
+ * support. Modern browsers fetch the AVIF; older ones drop to WebP;
+ * pre-WebP browsers fall through to the `<img>` tag. Each `<source>`
+ * is only emitted when at least one variant in that format exists, so
+ * legacy media items that only have one of the formats still render
+ * correctly.
+ *
+ * `size` caps the variants included in the srcSet and provides a
+ * default `sizes` hint:
+ *
+ * - `large`  — every variant; fills the viewport.
+ * - `medium` — caps at the `tablet` variant (≤ 1280w).
+ * - `small`  — caps at the `mobile` variant (≤ 768w); ideal for list
+ *              thumbnails inside a CSS grid.
+ */
+export interface ResponsiveImageProps {
+  /** Upload value — typically `<doc>.image` from a populated relation. */
+  image: StoredFileValue | undefined | null
+  /** Width cap for variants in the srcSet. */
+  size?: 'large' | 'medium' | 'small'
+  /**
+   * Layout-context hint set by a parent that constrains the image's
+   * rendered width on desktop (e.g. a 50%-column block, a floated
+   * inline image). Reduces the default `sizes` hint so the browser
+   * picks a smaller variant from the srcSet — no visual change, just
+   * fewer downloaded bytes.
+   *
+   * Override entirely by passing `sizes` instead.
+   */
+  constrainedLayout?: boolean
+  /**
+   * Explicit CSS `sizes` hint passed to the `<source>`. Overrides the
+   * `size` / `constrainedLayout` defaults. Pass this when the rendered
+   * width does not match either heuristic.
+   */
+  sizes?: string
+  alt?: string
+  /** Applied to the wrapping `<picture>`. */
+  className?: string
+  /** Applied to the inner `<img>`. */
+  imgClassName?: string
+  /**
+   * Mobile bleed-to-edge — negative gutters on mobile, normal flow on
+   * desktop. Useful for hero/photo blocks rendered inside a constrained
+   * article layout.
+   */
+  bleedOnMobile?: boolean
+  loading?: 'lazy' | 'eager'
+  fetchPriority?: 'high' | 'low' | 'auto'
+  /**
+   * Variant-name fallback chain for the `<img src>`. The browser may
+   * paint this while the responsive srcSet resolves, and uses it as
+   * the absolute fallback. Default prefers the smallest variant
+   * available.
+   */
+  fallback?: string[]
+  style?: CSSProperties
+}
+
+/**
+ * Default `sizes` hints by `size` × `constrainedLayout`. The
+ * constrained column halves the desktop viewport portion; mobile
+ * always assumes the image fills the viewport (most layouts stack on
+ * narrow screens). Each cell is a CSS `sizes` string.
+ */
+const SIZES_TABLE: Record<
+  'large' | 'medium' | 'small',
+  Record<'default' | 'constrained', string>
+> = {
+  large: {
+    default: '100vw',
+    constrained: '(min-width: 768px) 50vw, 100vw',
+  },
+  medium: {
+    default: '(min-width: 768px) 50vw, 100vw',
+    constrained: '(min-width: 768px) 25vw, 100vw',
+  },
+  small: {
+    default: '(min-width: 768px) 33vw, 50vw',
+    constrained: '(min-width: 768px) 20vw, 50vw',
+  },
+}
+
+const SRC_SET_CAP: Record<'large' | 'medium' | 'small', 'auto' | 'medium' | 'small'> = {
+  large: 'auto',
+  medium: 'medium',
+  small: 'small',
+}
+
+const DEFAULT_FALLBACK_CHAIN = ['thumbnail', 'card', 'mobile']
+
+export function ResponsiveImage({
+  image,
+  size = 'large',
+  constrainedLayout = false,
+  sizes,
+  alt = '',
+  className,
+  imgClassName,
+  bleedOnMobile = false,
+  loading = 'lazy',
+  fetchPriority,
+  fallback = DEFAULT_FALLBACK_CHAIN,
+  style,
+}: ResponsiveImageProps): React.JSX.Element | null {
+  if (image?.storageUrl == null) return null
+
+  const pictureClasses = cx(
+    'flex not-prose overflow-hidden',
+    bleedOnMobile
+      ? '-ml-[18px] -mr-[18px] max-w-[calc(100%+36px)] sm:mx-0 sm:w-full'
+      : 'mx-0 w-full',
+    className
+  )
+
+  // SVG bypass — variants are not generated for SVG; render the original.
+  if (image.mimeType === 'image/svg+xml') {
+    return (
+      <picture className={pictureClasses}>
+        <img
+          className={cx('not-prose', imgClassName)}
+          style={style}
+          src={image.storageUrl}
+          alt={alt}
+          width={image.imageWidth ?? undefined}
+          height={image.imageHeight ?? undefined}
+          loading={loading}
+          fetchPriority={fetchPriority}
+        />
+      </picture>
+    )
+  }
+
+  const cap = SRC_SET_CAP[size]
+  // AVIF declared first so supporting browsers pick it; WebP follows
+  // for older clients. Each source is suppressed when the upload has
+  // no variants in that format.
+  const sourceFormats: VariantFormat[] = ['avif', 'webp']
+  const sources = sourceFormats
+    .filter((format) => hasVariantFormat(image, format))
+    .map((format) => ({ format, srcSet: getVariantSrcSet(image, format, cap) }))
+    .filter((entry) => entry.srcSet.length > 0)
+
+  const fallbackSrc =
+    fallback
+      .map((name) => getVariant(image, name)?.storageUrl)
+      .find((url): url is string => url != null) ?? image.storageUrl
+  const resolvedSizes = sizes ?? SIZES_TABLE[size][constrainedLayout ? 'constrained' : 'default']
+
+  return (
+    <picture className={pictureClasses}>
+      {sources.map(({ format, srcSet }) => (
+        <source
+          key={format}
+          srcSet={srcSet.join(', ')}
+          type={VARIANT_MIME[format]}
+          sizes={resolvedSizes}
+        />
+      ))}
+      <img
+        className={cx('not-prose', imgClassName)}
+        style={style}
+        src={fallbackSrc}
+        alt={alt}
+        width={image.imageWidth ?? undefined}
+        height={image.imageHeight ?? undefined}
+        loading={loading}
+        fetchPriority={fetchPriority}
+      />
+    </picture>
+  )
+}

package/dist/templates/ui-byline/components/richtext-lexical/index.tsx

@@ -0,0 +1,31 @@
+import { Serialize } from './serialize/index.tsx'
+import type { Locale } from '@/ui/byline/types/i18n'
+
+type RichTextIntrinsicProps = React.JSX.IntrinsicElements['div']
+interface RichTextProps extends RichTextIntrinsicProps {
+  id?: string
+  lng: Locale
+  className?: string
+  wrapInDiv?: boolean
+  nodes: any
+}
+
+export const LexicalRichText = ({
+  nodes,
+  lng,
+  wrapInDiv = true,
+}: RichTextProps): React.JSX.Element | null => {
+  if (nodes == null) {
+    return null
+  }
+
+  if (wrapInDiv) {
+    return (
+      <div className="editor-text">
+        <Serialize lng={lng} nodes={nodes} />
+      </div>
+    )
+  } else {
+    return <Serialize lng={lng} nodes={nodes} />
+  }
+}