@nan0web/ui-payload 3.3.0

package/src/richtext/nan0html-converter.spec.js

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { fromNan0Html } from './fromNan0Html.js'
+import { toNan0Html } from './toNan0Html.js'
+
+describe('NaN0HTML ↔ Lexical Converter Round-trip', () => {
+	it('converts basic paragraphs and text formats', () => {
+		const ast = { p: [{ strong: 'Bold text' }, ' and ', { em: 'italic text' }] }
+		const lexical = fromNan0Html(ast)
+		expect(lexical.root.type).toBe('root')
+		expect(lexical.root.children.length).toBe(1)
+		expect(lexical.root.children[0].type).toBe('paragraph')
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual(ast)
+	})
+
+	it('converts headings correctly', () => {
+		const ast = { h2: 'Title Heading' }
+		const lexical = fromNan0Html(ast)
+		expect(lexical.root.children[0].type).toBe('heading')
+		expect(lexical.root.children[0].tag).toBe('h2')
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual(ast)
+	})
+
+	it('converts lists and items', () => {
+		const ast = { ul: [{ li: 'Item 1' }, { li: 'Item 2' }] }
+		const lexical = fromNan0Html(ast)
+		expect(lexical.root.children[0].type).toBe('list')
+		expect(lexical.root.children[0].listType).toBe('bullet')
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual(ast)
+	})
+
+	it('converts links with attributes', () => {
+		const ast = { a: 'Click here', $href: 'https://example.com', $target: '_blank' }
+		const lexical = fromNan0Html(ast)
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual({ a: 'Click here', $href: 'https://example.com', $target: '_blank' })
+	})
+
+	it('preserves nan0-component losslessly', () => {
+		const ast = { 'Card.Details': { card: '$' } }
+		const lexical = fromNan0Html(ast)
+		expect(lexical.root.children[0].type).toBe('nan0-component')
+		expect(lexical.root.children[0].component).toBe('Card.Details')
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual(ast)
+	})
+
+	it('preserves unknown tags as nan0-raw', () => {
+		const ast = { 'custom-widget': 'Widget content', $mode: 'test' }
+		const lexical = fromNan0Html(ast)
+		expect(lexical.root.children[0].type).toBe('nan0-raw')
+
+		const backToAst = toNan0Html(lexical)
+		expect(backToAst).toEqual({ 'custom-widget': 'Widget content', $mode: 'test' })
+	})
+})

package/src/richtext/toNan0Html.js

@@ -0,0 +1,188 @@
+/**
+ * toNan0Html
+ * Converts a Payload Lexical state JSON back into a NaN0HTML AST.
+ *
+ * Reconstructs:
+ *   - Native Lexical nodes (paragraph, heading, list, listitem, text, link, etc.) -> NaN0HTML tags/strings
+ *   - nan0-element -> exact tag + attributes + converted children
+ *   - nan0-component -> component name + props object
+ *   - nan0-raw -> restored raw tag + attributes + children
+ */
+import { FORMAT } from './fromNan0Html.js'
+
+/**
+ * Convert Payload Lexical state (or root node) back into a NaN0HTML AST.
+ * @param {Object} lexicalState Lexical state object `{ root: { children: [...] } }` or node object
+ * @returns {any} NaN0HTML AST structure (Array, Object, or String)
+ */
+export function toNan0Html(lexicalState) {
+	if (!lexicalState) return null
+
+	const root = lexicalState.root || lexicalState
+	if (root.type === 'root' && Array.isArray(root.children)) {
+		return convertNodes(root.children)
+	}
+
+	return convertNode(root)
+}
+
+/**
+ * Convert an array of Lexical nodes.
+ */
+function convertNodes(nodes) {
+	if (!Array.isArray(nodes) || nodes.length === 0) return []
+	const result = []
+
+	for (const node of nodes) {
+		const converted = convertNode(node)
+		if (converted !== null && converted !== undefined) {
+			result.push(converted)
+		}
+	}
+
+	if (result.length === 1) return result[0]
+	return result
+}
+
+/**
+ * Convert a single Lexical node into its NaN0HTML AST representation.
+ */
+function convertNode(node) {
+	if (!node || typeof node !== 'object') return null
+
+	switch (node.type) {
+		case 'text':
+			return convertTextNode(node)
+
+		case 'paragraph':
+			return wrapWithTag('p', convertNodes(node.children))
+
+		case 'heading': {
+			const tag = node.tag || 'h1'
+			return wrapWithTag(tag, convertNodes(node.children))
+		}
+
+		case 'blockquote':
+			return wrapWithTag('blockquote', convertNodes(node.children))
+
+		case 'horizontalrule':
+			return { hr: true }
+
+		case 'linebreak':
+			return { br: true }
+
+		case 'list': {
+			const tag = node.listType === 'number' || node.tag === 'ol' ? 'ol' : 'ul'
+			const content = convertNodes(node.children)
+			const attrs = {}
+			if (node.start && node.start !== 1) {
+				attrs.$start = node.start
+			}
+			return wrapWithTag(tag, content, attrs)
+		}
+
+		case 'listitem':
+			return wrapWithTag('li', convertNodes(node.children))
+
+		case 'link': {
+			const fields = node.fields || {}
+			const attrs = {}
+			if (fields.url) attrs.$href = fields.url
+			if (fields.newTab) attrs.$target = '_blank'
+			if (fields.rel) attrs.$rel = fields.rel
+			return wrapWithTag('a', convertNodes(node.children), attrs)
+		}
+
+		case 'upload': {
+			const fields = node.fields || {}
+			const attrs = {}
+			if (fields.value) attrs.$src = typeof fields.value === 'string' ? fields.value : fields.value.id || ''
+			return wrapWithTag('img', true, attrs)
+		}
+
+		case 'table':
+			return wrapWithTag('table', convertNodes(node.children))
+
+		case 'tablerow':
+			return wrapWithTag('tr', convertNodes(node.children))
+
+		case 'tablecell': {
+			const tag = node.header ? 'th' : 'td'
+			return wrapWithTag(tag, convertNodes(node.children))
+		}
+
+		case 'nan0-element': {
+			const tag = node.tag || 'div'
+			const attrs = formatAttributes(node.attributes || {})
+			const content = convertNodes(node.children)
+			return wrapWithTag(tag, content, attrs)
+		}
+
+		case 'nan0-component': {
+			const compName = node.component || 'Component'
+			const props = node.props || {}
+			return { [compName]: props }
+		}
+
+		case 'nan0-raw': {
+			const source = node.source || {}
+			const tag = source.tag || 'div'
+			const attrs = formatAttributes(source.attributes || {})
+			const content = Array.isArray(source.children) ? convertNodes(source.children) : (source.children || [])
+			return wrapWithTag(tag, content, attrs)
+		}
+
+		default:
+			if (Array.isArray(node.children)) {
+				return convertNodes(node.children)
+			}
+			return null
+	}
+}
+
+/**
+ * Format text node taking inline format flags into account.
+ */
+function convertTextNode(node) {
+	const text = node.text || ''
+	const format = node.format || 0
+	let result = text
+
+	if (format & FORMAT.bold) {
+		result = { strong: result }
+	}
+	if (format & FORMAT.italic) {
+		result = { em: result }
+	}
+	if (format & FORMAT.underline) {
+		result = { u: result }
+	}
+	if (format & FORMAT.strikethrough) {
+		result = { s: result }
+	}
+
+	return result
+}
+
+/**
+ * Prefix attribute object keys with `$`.
+ */
+function formatAttributes(attrs) {
+	const result = {}
+	for (const [k, v] of Object.entries(attrs)) {
+		const key = k.startsWith('$') ? k : `$${k}`
+		result[key] = v
+	}
+	return result
+}
+
+/**
+ * Wrap content with a tag and optional $attributes.
+ */
+function wrapWithTag(tag, content, attrs = {}) {
+	const element = { ...attrs }
+	element[tag] = content
+	return element
+}
+
+export default toNan0Html

package/src/templates/PayloadCollectionTemplate.js

@@ -0,0 +1,167 @@
+import { Model } from '@nan0web/types'
+import { CodeTemplate } from '@nan0web/ui'
+
+/** @typedef {Object} Field */
+
+/**
+ * PayloadCollectionTemplate - Model to generate Payload CMS CollectionConfig using CodeTemplate.
+ */
+export class PayloadCollectionTemplate extends Model {
+	static alias = 'payload-collection-template'
+
+	static collectionSlug = {
+		help: 'Collection slug identifier',
+		default: 'item',
+	}
+	static useAsTitle = {
+		help: 'Field name used as title in admin',
+		default: 'title',
+	}
+	static labels = {
+		help: 'Localized labels object (singular/plural)',
+		default: { singular: 'Item', plural: 'Items' },
+	}
+	static group = {
+		help: 'Admin group configuration',
+		type: 'any',
+		default: 'Content',
+	}
+	static fields = {
+		help: 'Collection fields array',
+		default: [],
+	}
+
+	static template = {
+		help: 'Raw JavaScript template with CodeTemplate @replace blocks',
+		default: `/**
+ * @replace imports
+ * Custom imports block
+ */
+/** @replace */
+
+/**
+ * @replace collectionSlug
+ */
+const collectionSlug = 'item'
+/** @replace */
+
+/**
+ * @replace labels
+ */
+const labels = { singular: { uk: 'Item', en: 'Item' }, plural: { uk: 'Items', en: 'Items' } }
+/** @replace */
+
+/**
+ * @replace useAsTitle
+ */
+const useAsTitle = 'title'
+/** @replace */
+
+/**
+ * @replace group
+ */
+const group = { uk: 'Content', en: 'Content' }
+/** @replace */
+
+/**
+ * @replace fields
+ */
+const fields = []
+/** @replace */
+
+import { accessFor, publicAccess } from '@nan0web/ui-payload'
+
+/** @type {import('payload').CollectionConfig} */
+export const collectionConfig = {
+	slug: collectionSlug,
+	labels,
+	admin: {
+		useAsTitle,
+		group,
+	},
+	access: {
+		read: publicAccess,
+		create: accessFor('admin', 'editor'),
+		update: accessFor('admin', 'editor'),
+		delete: accessFor('admin'),
+	},
+	fields,
+}
+`,
+	}
+
+	/**
+	 * @param {Partial<PayloadCollectionTemplate>} [data={}]
+	 * @param {Partial<import('@nan0web/types').ModelOptions>} [options={}]
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Collection slug */ this.collectionSlug
+		/** @type {string} Label/title field name */ this.useAsTitle
+		/** @type {Object} Labels object */ this.labels
+		/** @type {Object|string} Group object or string */ this.group
+		/** @type {Array<Field>} Collection fields */ this.fields
+		/** @type {Object} Custom replace snippets */ this.snippets
+	}
+
+	/**
+	 * Compiles the CollectionConfig template using native CodeTemplate replace blocks.
+	 * @returns {Promise<string>} Generated TS code for the collection
+	 */
+	async compile() {
+		const templateContent = PayloadCollectionTemplate.template.default
+		/** @type {Record<string, string>} */
+		const input = {
+			collectionSlug: `const collectionSlug = '${this.collectionSlug}'`,
+			useAsTitle: `const useAsTitle = '${this.useAsTitle}'`,
+			labels: `const labels = ${JSON.stringify(this.labels, null, 2)}`,
+			group: `const group = ${JSON.stringify(this.group, null, 2)}`,
+			fields: `const fields = ${JSON.stringify(this.fields, null, 2)}`,
+			.../** @type {Record<string, string>} */ (this.snippets || {}),
+		}
+
+		const app = new CodeTemplate({
+			template: templateContent,
+			input,
+		})
+
+		const gen = app.run()
+		let step = await gen.next()
+		while (!step.done) {
+			const res = /** @type {import('@nan0web/ui').ResultIntent | undefined} */ (step.value)
+			if (res?.data?.output) {
+				return res.data.output
+			}
+			step = await gen.next()
+		}
+		const finalRes = /** @type {import('@nan0web/ui').ResultIntent | undefined} */ (step.value)
+		return finalRes?.data?.output || templateContent
+	}
+
+	/**
+	 * Synchronously compiles the CollectionConfig template.
+	 * @returns {string} Generated TS code for the collection
+	 */
+	compileSync() {
+		const templateContent = PayloadCollectionTemplate.template.default
+		const groupVal = typeof this.group === 'string' ? `'${this.group}'` : JSON.stringify(this.group, null, 2)
+		/** @type {Record<string, string>} */
+		const input = {
+			collectionSlug: `const collectionSlug = '${this.collectionSlug}'`,
+			useAsTitle: `const useAsTitle = '${this.useAsTitle}'`,
+			labels: `const labels = ${JSON.stringify(this.labels, null, 2)}`,
+			group: `const group = ${groupVal}`,
+			fields: `const fields = ${JSON.stringify(this.fields, null, 2)}`,
+			.../** @type {Record<string, string>} */ (this.snippets || {}),
+		}
+
+		let output = templateContent
+		for (const [key, replacement] of Object.entries(input)) {
+			const blockRegex = new RegExp(`(\\/\\*\\*\\s*\\n?\\s*\\*\\s*@replace\\s+${key}\\s*\\n?[\\s\\S]*?\\*\\/)([\\s\\S]*?)(\\/\\*\\*\\s*@replace\\s*\\*\\/)`, 'g')
+			if (blockRegex.test(output)) {
+				output = output.replace(blockRegex, `$1\n${replacement}\n$3`)
+			}
+		}
+		return output
+	}
+}

package/src/templates/PayloadCollectionTemplate.spec.js

@@ -0,0 +1,26 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert'
+import { PayloadCollectionTemplate } from './PayloadCollectionTemplate.js'
+
+describe('PayloadCollectionTemplate', () => {
+	it('compiles Payload CMS collection code using CodeTemplate', async () => {
+		const tpl = new PayloadCollectionTemplate({
+			collectionSlug: 'card',
+			useAsTitle: 'name',
+			labels: { singular: { uk: 'Картка', en: 'Card' }, plural: { uk: 'Картки', en: 'Cards' } },
+			group: { uk: 'Продукти', en: 'Products' },
+			fields: [
+				{ name: 'id', type: 'text', required: true },
+				{ name: 'name', type: 'text', localized: true },
+			],
+		})
+
+		const output = await tpl.compile()
+
+		assert.ok(output.includes("const collectionSlug = 'card'"))
+		assert.ok(output.includes("const useAsTitle = 'name'"))
+		assert.ok(output.includes('"uk": "Картка"'))
+		assert.ok(output.includes('"name": "id"'))
+
+	})
+})

package/src/uiPayloadRegistry.js

@@ -0,0 +1,4 @@
+/**
+ * Polymorphic Registry for Payload CMS UI block views.
+ */
+export const uiPayloadRegistry = new Map()