@byline/cli 0.1.1

package/dist/templates/byline-examples/collections/pages/schema.ts

@@ -0,0 +1,96 @@
+/**
+ * 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
+ */
+
+import type { CollectionFieldData } from '@byline/core'
+import { defineCollection, defineWorkflow } from '@byline/core'
+
+import { availableLanguagesField } from '~/fields/available-languages-field.js'
+
+// ---- Schema (server-safe, no UI concerns) ----
+
+export const Pages = defineCollection({
+  path: 'pages',
+  labels: {
+    singular: 'Page',
+    plural: 'Pages',
+  },
+  // Workflow: defineWorkflow() guarantees draft, published, and archived are
+  // always present and correctly ordered. No custom statuses here — the
+  // standard three-step lifecycle is used.
+  //
+  //   Resulting order: [draft, published, archived]
+  workflow: defineWorkflow({
+    draft: { label: 'Draft', verb: 'Revert to Draft' },
+    published: { label: 'Published', verb: 'Publish' },
+    archived: { label: 'Archived', verb: 'Archive' },
+  }),
+  showStats: true,
+  search: { fields: ['title'] },
+  useAsTitle: 'title',
+  useAsPath: 'title',
+  fields: [
+    { name: 'title', label: 'Title', type: 'text', localized: true },
+    {
+      name: 'summary',
+      label: 'Summary',
+      type: 'textArea',
+      localized: true,
+      helpText:
+        'Enter a short summary. The first 150 characters are used for social media meta descriptions. Aim for 100–300 characters.',
+    },
+    // Relation field demo. Points at the Media upload collection
+    // so editors can choose a feature image via the relation picker widget.
+    // Set `displayField: 'title'` so the picker's row label reads from the
+    // uploaded item's `title` field rather than falling back to its path.
+    // Will display the picker defined columns if present in the admin.tsx
+    // configuration.
+    {
+      name: 'featureImage',
+      label: 'Feature Image',
+      type: 'relation',
+      targetCollection: 'media',
+      displayField: 'title',
+      optional: true,
+    },
+    {
+      name: 'category',
+      label: 'Category',
+      type: 'select',
+      optional: true,
+      helpText: 'Select a category for this page',
+      options: [
+        { label: 'Foo', value: 'foo' },
+        { label: 'Bar', value: 'bar' },
+        { label: 'Baz', value: 'baz' },
+      ],
+    },
+    {
+      name: 'content',
+      label: 'Content',
+      type: 'richText',
+      helpText: 'Enter the main content for this page.',
+      localized: true,
+    },
+    {
+      name: 'publishedOn',
+      label: 'Published On',
+      type: 'datetime',
+      mode: 'datetime',
+    },
+    {
+      name: 'featured',
+      label: 'Featured',
+      type: 'checkbox',
+      optional: true,
+      helpText: 'Feature this page.',
+    },
+    availableLanguagesField(),
+  ],
+})
+
+export type PageFields = CollectionFieldData<typeof Pages>

package/dist/templates/byline-examples/components/length-indicator.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+/**
+ * Portions Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/
+ * From the Payload SEO plugin
+ * https://github.com/payloadcms/payload/tree/main/packages/plugin-seo
+ */
+
+import type React from 'react'
+import { Fragment, useEffect, useState } from 'react'
+
+import { Pill } from './pill'
+
+export const LengthIndicator: React.FC<{
+  maxLength?: number
+  minLength?: number
+  text?: string
+}> = (props) => {
+  const { maxLength = 0, minLength = 0, text } = props
+
+  const [labelStyle, setLabelStyle] = useState({
+    backgroundColor: '',
+    color: '',
+  })
+
+  const [label, setLabel] = useState('')
+  const [barWidth, setBarWidth] = useState<number>(0)
+
+  useEffect(() => {
+    const textLength = text?.length ?? 0
+
+    if (textLength === 0) {
+      setLabel('Missing')
+      setLabelStyle({
+        backgroundColor: 'red',
+        color: 'white',
+      })
+      setBarWidth(0)
+    } else {
+      const progress = (textLength - minLength) / (maxLength - minLength)
+
+      if (progress < 0) {
+        const ratioUntilMin = textLength / minLength
+
+        if (ratioUntilMin > 0.9) {
+          setLabel('Almost there')
+          setLabelStyle({
+            backgroundColor: 'orange',
+            color: 'white',
+          })
+        } else {
+          setLabel('Too short')
+          setLabelStyle({
+            backgroundColor: 'orangered',
+            color: 'white',
+          })
+        }
+
+        setBarWidth(ratioUntilMin)
+      }
+
+      if (progress >= 0 && progress <= 1) {
+        setLabel('Good')
+        setLabelStyle({
+          backgroundColor: 'green',
+          color: 'white',
+        })
+        setBarWidth(progress)
+      }
+
+      if (progress > 1) {
+        setLabel('Too long')
+        setLabelStyle({
+          backgroundColor: 'red',
+          color: 'white',
+        })
+        setBarWidth(1)
+      }
+    }
+  }, [minLength, maxLength, text])
+
+  const textLength = text?.length ?? 0
+
+  const charsUntilMax = maxLength - textLength
+  const charsUntilMin = minLength - textLength
+
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        width: '100%',
+      }}
+    >
+      <Pill backgroundColor={labelStyle.backgroundColor} color={labelStyle.color} label={label} />
+      <div
+        style={{
+          flexShrink: 0,
+          lineHeight: 1,
+          marginRight: '10px',
+          whiteSpace: 'nowrap',
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        <small>
+          {`${text?.length ?? 0}/${minLength}-${maxLength} chars, `}
+          {(textLength === 0 || charsUntilMin > 0) && `${charsUntilMin} to go`}
+          {charsUntilMin <= 0 && charsUntilMax >= 0 && `${charsUntilMax} left over`}
+          {charsUntilMax < 0 && <Fragment>{`${charsUntilMax * -1} too many`}</Fragment>}
+        </small>
+      </div>
+      <div
+        style={{
+          backgroundColor: '#F3F3F3',
+          height: '2px',
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: labelStyle.backgroundColor,
+            height: '100%',
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: `${barWidth * 100}%`,
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/dist/templates/byline-examples/components/pill.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+/**
+ * Portions Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/
+ * From the Payload SEO plugin
+ * https://github.com/payloadcms/payload/tree/main/packages/plugin-seo
+ */
+import type React from 'react'
+
+export const Pill: React.FC<{
+  backgroundColor: string
+  color: string
+  label: string
+}> = (props) => {
+  const { backgroundColor, color, label } = props
+
+  return (
+    <div
+      style={{
+        backgroundColor,
+        borderRadius: '2px',
+        color,
+        flexShrink: 0,
+        lineHeight: 1,
+        marginRight: '10px',
+        padding: '4px 6px',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <small>{label}</small>
+    </div>
+  )
+}

package/dist/templates/byline-examples/components/summary-length.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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
+ */
+
+import type { FieldHelpTextSlotProps, SlotComponent } from '@byline/core'
+import { useFieldValue } from '@byline/ui/react/forms'
+
+import { LengthIndicator } from './length-indicator'
+
+/**
+ * Custom HelpText slot component for summary-style textArea fields.
+ *
+ * Renders the field's `helpText` description alongside a live character-count
+ * indicator that updates reactively as the user types. Wire it up via the
+ * `components.HelpText` slot in the collection's `CollectionAdminConfig.fields`
+ * or directly on the field definition's `components` property.
+ *
+ * @example
+ * ```ts
+ * // In CollectionAdminConfig
+ * fields: { summary: { components: { HelpText: SummaryLength } } }
+ * ```
+ */
+export const SummaryLength: SlotComponent<FieldHelpTextSlotProps> = ({ path, helpText }) => {
+  const value = useFieldValue<string>(path)
+
+  return (
+    <div className="mt-2 flex flex-col gap-1">
+      <LengthIndicator minLength={100} maxLength={300} text={value} />
+      {helpText && (
+        <p className="text-sm text-gray-500 dark:text-gray-400 leading-tight mb-1">{helpText}</p>
+      )}
+    </div>
+  )
+}

package/dist/templates/byline-examples/fields/available-languages-field.ts

@@ -0,0 +1,90 @@
+/**
+ * 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
+ */
+
+import type { GroupField } from '@byline/core'
+
+import { contentLocales, type LocaleDefinition } from '../i18n.js'
+
+type Options = Partial<Omit<GroupField, 'type' | 'fields'>> & {
+  locales?: readonly LocaleDefinition[]
+}
+
+type LocaleFields<T extends readonly LocaleDefinition[]> = {
+  [K in keyof T]: {
+    name: T[K]['code']
+    label: T[K]['label']
+    type: 'checkbox'
+    optional: true
+  }
+}
+
+type WithOverride<O, K extends string, V, D> = O extends { [P in K]: V } ? O[K] : D
+
+type AvailableLanguagesField<Opts extends Options> = Omit<GroupField, 'name' | 'fields'> & {
+  name: WithOverride<Opts, 'name', string, 'availableLanguages'>
+  fields: LocaleFields<
+    WithOverride<Opts, 'locales', readonly LocaleDefinition[], typeof contentLocales>
+  >
+}
+
+const builtInValidate = (value: Record<string, boolean> | undefined): string | undefined => {
+  const hasSelection =
+    value != null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    Object.values(value).some(Boolean)
+  if (!hasSelection) {
+    return 'At least one language must be selected.'
+  }
+  return undefined
+}
+
+/**
+ * Returns a `GroupField` that renders one checkbox per locale entry.
+ * Validation requires at least one language to be selected; if the caller
+ * supplies its own `validate`, the built-in rule runs first and the caller's
+ * validator only runs when the built-in passes.
+ *
+ * @description This field is intended for use in a document's "Edit" view
+ * to allow editors to specify which languages a document is available in.
+ * It is orthogonal to the defined workflow system and is here as a 'signal'
+ * to frontend websites / consumers - allowing them to implement their own
+ * logic around content availability per language.
+ *
+ * @param options - Optional overrides. Accepts any `GroupField` property
+ *   except `type` and `fields` (which are computed), plus a `locales` array
+ *   that drives the generated checkbox set.
+ */
+export function availableLanguagesField<const Opts extends Options>(
+  options: Opts = {} as Opts
+): AvailableLanguagesField<Opts> {
+  const { name, label, helpText, locales, validate: userValidate, ...rest } = options
+
+  const validate = userValidate
+    ? (value: any, data: Record<string, any>) => {
+        const builtInError = builtInValidate(value)
+        if (builtInError) return builtInError
+        return userValidate(value, data)
+      }
+    : builtInValidate
+
+  return {
+    ...rest,
+    name: (name ?? 'availableLanguages') as any,
+    label: label ?? 'Published Languages',
+    helpText: helpText ?? 'Select the languages this document is available in.',
+    type: 'group',
+    fields: (locales ?? contentLocales).map(({ code, label }) => ({
+      name: code,
+      label,
+      type: 'checkbox' as const,
+      optional: true,
+    })) as any,
+    validate,
+  }
+}

package/dist/templates/byline-examples/fields/lexical-richtext-compact.ts

@@ -0,0 +1,88 @@
+/**
+ * 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
+ */
+
+import type { RichTextField } from '@byline/core'
+import { defaultEditorConfig, type EditorConfig } from '@byline/richtext-lexical'
+import { cloneDeep } from 'lodash-es'
+
+type Options = Partial<Omit<RichTextField, 'type' | 'editorConfig'>> & {
+  /**
+   * Optional callback to further customise the compact defaults. Receives a
+   * mutable copy of the compact config; mutate and return, or return a new
+   * object. Runs after the compact preset is applied, so callers can re-enable
+   * specific options for a particular field without re-listing the full set.
+   */
+  configure?: (config: EditorConfig) => EditorConfig
+}
+
+/**
+ * Compact preset — disables block-level features (tables, layouts,
+ * admonitions, code highlight, lists, embeds, inline images, alignment) and
+ * keeps a slim toolbar suitable for inline body copy like image captions,
+ * byline strap-lines, or compact form fields.
+ */
+function applyCompactPreset(config: EditorConfig): EditorConfig {
+  const o = config.settings.options
+  o.textAlignment = false
+  o.tablePlugin = false
+  o.tableActionMenuPlugin = false
+  o.tableCellBackgroundColor = false
+  o.tableCellMerge = false
+  o.layoutPlugin = false
+  o.admonitionPlugin = false
+  o.codeHighlightPlugin = false
+  o.horizontalRulePlugin = false
+  o.listPlugin = false
+  o.checkListPlugin = false
+  o.inlineImagePlugin = false
+  o.autoEmbedPlugin = false
+  o.floatingTextFormatToolbarPlugin = false
+  o.textStyle = false
+  o.inlineCode = false
+  o.undoRedo = false
+  return config
+}
+
+/**
+ * Returns a `RichTextField` with a reduced Lexical feature set baked into
+ * `editorConfig`. Use this for caption-style or otherwise constrained rich-text
+ * fields where the full editor surface would be inappropriate.
+ *
+ * The compact preset disables tables, layouts, lists, code highlight, inline
+ * images, embeds, and most secondary toolbar features while keeping bold /
+ * italic / link editing and the floating link editor.
+ *
+ * @example
+ * ```ts
+ * fields: [
+ *   lexicalRichTextCompact({ name: 'caption', label: 'Caption' }),
+ *   // Compact + re-enable lists for a specific field:
+ *   lexicalRichTextCompact({
+ *     name: 'summary',
+ *     label: 'Summary',
+ *     configure: (c) => {
+ *       c.settings.options.listPlugin = true
+ *       return c
+ *     },
+ *   }),
+ * ]
+ * ```
+ */
+export function lexicalRichTextCompact(options: Options = {}): RichTextField {
+  const { configure, ...rest } = options
+  const base = applyCompactPreset(cloneDeep(defaultEditorConfig))
+  const editorConfig = configure ? configure(base) : base
+
+  return {
+    name: 'richText',
+    label: 'RichText',
+    ...rest,
+    type: 'richText',
+    editorConfig,
+  }
+}

package/dist/templates/byline-examples/i18n.ts

@@ -0,0 +1,47 @@
+/**
+ * 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
+ */
+
+/**
+ * Shared i18n locale configuration — no upstream dependencies, safe to import
+ * from both config entry-points and collection schema files without circular
+ * references.
+ *
+ * `interface` locales govern the CMS admin UI language.
+ * `content` locales govern the languages a document can be published in.
+ */
+
+export interface LocaleDefinition {
+  code: string
+  label: string
+}
+
+/** Locales available in the CMS admin interface. */
+export const interfaceLocales: LocaleDefinition[] = [
+  { code: 'en', label: 'English' },
+  { code: 'fr', label: 'Français' },
+]
+
+/** Locales a document can be published in. */
+export const contentLocales = [
+  { code: 'en', label: 'English' },
+  { code: 'fr', label: 'Français' },
+  { code: 'es', label: 'Español' },
+  { code: 'de', label: 'Deutsch' },
+] as const
+
+/** Derived config object — passed directly to defineServerConfig / defineClientConfig. */
+export const i18n = {
+  interface: {
+    defaultLocale: 'en',
+    locales: interfaceLocales.map((l) => l.code),
+  },
+  content: {
+    defaultLocale: 'en',
+    locales: contentLocales.map((l) => l.code),
+  },
+}

package/dist/templates/byline-examples/routes.ts

@@ -0,0 +1,28 @@
+/**
+ * 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
+ */
+
+/**
+ * URL segments for admin and (future) public API routes. Defaults of
+ * `/admin` and `/api` are applied automatically by `resolveRoutes()` —
+ * keys only need to be set here when overriding either default.
+ */
+
+import type { RoutesConfig } from '@byline/core'
+
+export const routes: Partial<RoutesConfig> = {
+  admin: '/admin',
+  api: '/api',
+}
+
+/**
+ * Fallback used by both server and admin entry points when no
+ * `VITE_SERVER_URL` env var is set. Each entry resolves the env var
+ * itself (Vite's `import.meta.env` on the client, Node's `process.env`
+ * on the server) and falls back to this literal.
+ */
+export const DEFAULT_SERVER_URL = 'http://localhost:5173/'