create-nextblock 0.14.2 → 0.14.4

package/templates/nextblock-template/lib/blocks/blockColors.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest';
+import {
+  TEXT_COLOR_CLASSES,
+  TEXT_COLOR_TOKENS,
+  TEXT_COLOR_TOKEN_OPTIONS,
+  isCustomCssColor,
+  isTextColorToken,
+  resolveTextAlign,
+  resolveTextColor,
+} from './blockColors';
+import { HeadingBlockSchema } from './blockRegistry';
+
+describe('resolveTextColor', () => {
+  it('maps theme tokens to a static class and no inline style', () => {
+    expect(resolveTextColor('primary')).toEqual({ className: 'text-primary' });
+    expect(resolveTextColor('foreground')).toEqual({ className: 'text-foreground' });
+  });
+
+  it('maps "muted" to the readable foreground pair, not the surface colour', () => {
+    // Regression: the renderer used to emit `text-muted` (hsl(var(--muted)),
+    // a near-white surface) while both CMS previews used muted-foreground.
+    expect(resolveTextColor('muted')).toEqual({ className: 'text-muted-foreground' });
+  });
+
+  it('renders custom colours as an inline style', () => {
+    expect(resolveTextColor('#FF8800')).toEqual({ style: { color: '#FF8800' } });
+    expect(resolveTextColor('rgba(255, 136, 0, 0.8)')).toEqual({ style: { color: 'rgba(255, 136, 0, 0.8)' } });
+    expect(resolveTextColor('hsl(28, 100%, 50%)')).toEqual({ style: { color: 'hsl(28, 100%, 50%)' } });
+    expect(resolveTextColor('#f80')).toEqual({ style: { color: '#f80' } });
+    expect(resolveTextColor('#FF880080')).toEqual({ style: { color: '#FF880080' } });
+  });
+
+  it('trims incidental whitespace', () => {
+    expect(resolveTextColor('  primary  ')).toEqual({ className: 'text-primary' });
+    expect(resolveTextColor('  #FF8800 ')).toEqual({ style: { color: '#FF8800' } });
+  });
+
+  it('degrades to inherited colour rather than emitting a bogus class', () => {
+    expect(resolveTextColor(undefined)).toEqual({});
+    expect(resolveTextColor(null)).toEqual({});
+    expect(resolveTextColor('')).toEqual({});
+    expect(resolveTextColor('chartreuse')).toEqual({});
+    expect(resolveTextColor('javascript:alert(1)')).toEqual({});
+    expect(resolveTextColor('url(https://evil.test/x.png)')).toEqual({});
+    expect(resolveTextColor('red; background: url(x)')).toEqual({});
+  });
+
+  it('never emits an interpolated class name', () => {
+    for (const token of TEXT_COLOR_TOKENS) {
+      const { className } = resolveTextColor(token);
+      expect(className).toBe(TEXT_COLOR_CLASSES[token]);
+      expect(className?.startsWith('text-')).toBe(true);
+    }
+  });
+});
+
+describe('resolveTextAlign', () => {
+  it('covers every alignment the schema allows', () => {
+    expect(resolveTextAlign('left')).toBe('text-left');
+    expect(resolveTextAlign('center')).toBe('text-center');
+    expect(resolveTextAlign('right')).toBe('text-right');
+    expect(resolveTextAlign('justify')).toBe('text-justify');
+  });
+
+  it('ignores unknown values', () => {
+    expect(resolveTextAlign(undefined)).toBeUndefined();
+    expect(resolveTextAlign('sideways')).toBeUndefined();
+  });
+});
+
+describe('guards', () => {
+  it('distinguishes tokens from custom colours', () => {
+    expect(isTextColorToken('accent')).toBe(true);
+    expect(isTextColorToken('#FFF')).toBe(false);
+    expect(isCustomCssColor('#FFF')).toBe(true);
+    expect(isCustomCssColor('accent')).toBe(false);
+  });
+});
+
+describe('token options', () => {
+  it('exposes a label and swatch for every token', () => {
+    expect(TEXT_COLOR_TOKEN_OPTIONS).toHaveLength(TEXT_COLOR_TOKENS.length);
+    for (const option of TEXT_COLOR_TOKEN_OPTIONS) {
+      expect(option.label).toBeTruthy();
+      expect(option.cssColor).toMatch(/^hsl\(var\(--[a-z-]+\)\)$/);
+    }
+  });
+});
+
+describe('HeadingBlockSchema.textColor', () => {
+  const base = { level: 2 as const, text_content: 'Hello' };
+
+  it('still accepts every previously stored token', () => {
+    for (const token of ['primary', 'secondary', 'accent', 'muted', 'destructive', 'background']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: token }).success).toBe(true);
+    }
+  });
+
+  it('accepts custom colours from the picker', () => {
+    for (const color of ['#FF8800', '#f80', '#FF880080', 'rgb(1,2,3)', 'rgba(1,2,3,0.5)', 'hsl(28, 100%, 50%)']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: color }).success).toBe(true);
+    }
+  });
+
+  it('rejects values that are neither a token nor a colour', () => {
+    for (const bad of ['nonsense', 'url(x)', 'red', '']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: bad }).success).toBe(false);
+    }
+  });
+
+  it('stays optional', () => {
+    expect(HeadingBlockSchema.safeParse(base).success).toBe(true);
+  });
+});

package/templates/nextblock-template/lib/blocks/blockColors.ts

@@ -0,0 +1,132 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Text-colour model shared by the block renderers and the CMS previews.
+ *
+ * A colour is stored as EITHER a theme token keyword (`"primary"`) — which keeps
+ * following the active theme and dark mode — OR a literal CSS colour emitted by
+ * the colour picker (`"#FF8800"`, `"rgba(...)"`, `"hsl(...)"`). Tokens render as
+ * a static Tailwind class; literals render as an inline style.
+ *
+ * Keep this the single source of truth: HeadingBlockRenderer, EditableBlock and
+ * ColumnEditor previously each carried their own map and had drifted apart
+ * (`muted` rendered as the near-invisible `text-muted` on the live site while
+ * both previews used `text-muted-foreground`).
+ */
+
+export const TEXT_COLOR_TOKENS = [
+  'foreground',
+  'primary',
+  'secondary',
+  'accent',
+  'muted',
+  'destructive',
+  'background',
+] as const;
+
+export type TextColorToken = (typeof TEXT_COLOR_TOKENS)[number];
+
+/**
+ * Token -> Tailwind class.
+ *
+ * These must be written as complete literals, never interpolated. Tailwind v4
+ * ignores the `safelist` key in the legacy JS config (libs/ui/tailwind.config.js
+ * still carries one, but v4 never reads it) — a class exists only if the scanner
+ * finds the whole string in a source file. Listing them here is what guarantees
+ * they are emitted.
+ */
+export const TEXT_COLOR_CLASSES: Record<TextColorToken, string> = {
+  foreground: 'text-foreground',
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  accent: 'text-accent',
+  // `--muted` is a near-white surface colour; the readable pair is its foreground.
+  muted: 'text-muted-foreground',
+  destructive: 'text-destructive',
+  background: 'text-background',
+};
+
+/** Token -> CSS colour, for painting swatches in the editor. */
+export const TEXT_COLOR_SWATCHES: Record<TextColorToken, string> = {
+  foreground: 'hsl(var(--foreground))',
+  primary: 'hsl(var(--primary))',
+  secondary: 'hsl(var(--secondary))',
+  accent: 'hsl(var(--accent))',
+  muted: 'hsl(var(--muted-foreground))',
+  destructive: 'hsl(var(--destructive))',
+  background: 'hsl(var(--background))',
+};
+
+export const TEXT_COLOR_LABELS: Record<TextColorToken, string> = {
+  foreground: 'Default text',
+  primary: 'Primary',
+  secondary: 'Secondary',
+  accent: 'Accent',
+  muted: 'Muted',
+  destructive: 'Destructive',
+  background: 'Background',
+};
+
+/** Token options in the shape `ColorField` expects. */
+export const TEXT_COLOR_TOKEN_OPTIONS = TEXT_COLOR_TOKENS.map((token) => ({
+  value: token,
+  label: TEXT_COLOR_LABELS[token],
+  cssColor: TEXT_COLOR_SWATCHES[token],
+}));
+
+/**
+ * Accepts what the colour picker can emit. Deliberately permissive on the inner
+ * grammar — the picker only produces well-formed values, and being strict here
+ * would reject legitimate colours authored by hand or by Cortex AI.
+ */
+export const CSS_COLOR_PATTERN =
+  /^(#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|rgba?\([^)]+\)|hsla?\([^)]+\))$/i;
+
+export function isTextColorToken(value: unknown): value is TextColorToken {
+  return typeof value === 'string' && (TEXT_COLOR_TOKENS as readonly string[]).includes(value);
+}
+
+export function isCustomCssColor(value: unknown): value is string {
+  return typeof value === 'string' && CSS_COLOR_PATTERN.test(value.trim());
+}
+
+export interface ResolvedTextColor {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Turn a stored colour into render props. Unknown values resolve to `{}` so a
+ * stale or hand-edited value degrades to the inherited colour rather than
+ * emitting a bogus Tailwind class.
+ */
+export function resolveTextColor(value: string | null | undefined): ResolvedTextColor {
+  if (!value) return {};
+  const trimmed = value.trim();
+  if (isTextColorToken(trimmed)) {
+    return { className: TEXT_COLOR_CLASSES[trimmed] };
+  }
+  if (isCustomCssColor(trimmed)) {
+    return { style: { color: trimmed } };
+  }
+  return {};
+}
+
+/**
+ * Text alignment, also as literals. `text-justify` currently only survives
+ * because the string happens to appear in a regex in libs/editor/src/lib/kit.ts;
+ * pinning it here removes that accidental dependency.
+ */
+export const TEXT_ALIGN_CLASSES = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+} as const;
+
+export type TextAlign = keyof typeof TEXT_ALIGN_CLASSES;
+
+export function resolveTextAlign(value: string | null | undefined): string | undefined {
+  if (!value) return undefined;
+  return TEXT_ALIGN_CLASSES[value as TextAlign];
+}

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -2,6 +2,7 @@ import { z } from '../zod-config';
 import { TestimonialBlockConfig, TestimonialBlockContent } from '../../components/blocks/TestimonialBlock';
 import { ProductGridBlockSchema, ProductGridBlockContent, FeaturedProductBlockSchema, FeaturedProductBlockContent, CartBlockSchema, CartBlockContent, CheckoutBlockSchema, CheckoutBlockContent, ProductDetailsBlockSchema, ProductDetailsBlockContent } from './ecommerce-block-schemas';
 import { availableBlockTypes, type BlockType } from './blockTypes';
+import { CSS_COLOR_PATTERN, TEXT_COLOR_TOKENS } from './blockColors';
 export { availableBlockTypes, type BlockType } from './blockTypes';
 
 /**
@@ -19,11 +20,26 @@ export const TextBlockSchema = z.object({
 });
 export type TextBlockContent = z.infer<typeof TextBlockSchema>;
 
+/**
+ * A text colour is either a theme token (keeps following the theme and dark
+ * mode) or a literal CSS colour from the colour picker. Existing rows only ever
+ * hold tokens, so widening the union is backward compatible.
+ * See `./blockColors` for the token -> class mapping used at render time.
+ */
+export const TextColorSchema = z
+  .union([
+    z.enum(TEXT_COLOR_TOKENS),
+    z.string().regex(CSS_COLOR_PATTERN, 'Must be a hex, rgb(a) or hsl(a) colour'),
+  ])
+  .describe(
+    `A theme token (${TEXT_COLOR_TOKENS.join(', ')}) or a custom CSS colour such as "#FF8800", "rgba(255,136,0,0.8)" or "hsl(28, 100%, 50%)"`,
+  );
+
 export const HeadingBlockSchema = z.object({
   level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5), z.literal(6)]).describe('Heading level (1-6)'),
   text_content: z.string().describe('The text content of the heading'),
   textAlign: z.enum(['left', 'center', 'right', 'justify']).optional().describe('Text alignment'),
-  textColor: z.enum(['primary', 'secondary', 'accent', 'muted', 'destructive', 'background']).optional().describe('Color of the heading text'),
+  textColor: TextColorSchema.optional().describe('Color of the heading text'),
 });
 export type HeadingBlockContent = z.infer<typeof HeadingBlockSchema>;