@tuturuuu/ui 0.7.0 → 0.8.0

package/src/components/ui/storefront/utils.ts

@@ -1,46 +1,49 @@
 import type {
+  InventoryListingVariant,
   InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
+import { formatMoneyFromMinor } from '@tuturuuu/utils/money';
 import type { CSSProperties } from 'react';
 
+// The storefront now ships a single, unified design language. The merchant
+// preset fields (cornerStyle/surfaceStyle/themePreset/layoutStyle) are retained
+// in the data model for backwards compatibility, but every value resolves to the
+// same refined look so the experience is consistent across all storefronts.
+
+/** One soft, modern corner radius for every surface. */
+export const STOREFRONT_RADIUS = 'rounded-2xl';
+
 export const storefrontRadiusClasses: Record<
   InventoryStorefront['cornerStyle'],
   string
 > = {
-  compact: 'rounded-md',
-  rounded: 'rounded-lg',
-  soft: 'rounded-2xl',
+  compact: STOREFRONT_RADIUS,
+  rounded: STOREFRONT_RADIUS,
+  soft: STOREFRONT_RADIUS,
 };
 
+/** One elevated card surface for every storefront. */
+export const STOREFRONT_SURFACE =
+  'border border-border/60 bg-card shadow-sm shadow-foreground/5';
+
 export const storefrontSurfaceClasses: Record<
   InventoryStorefront['surfaceStyle'],
   string
 > = {
-  glass:
-    'border border-border/70 bg-card/75 shadow-sm shadow-foreground/5 backdrop-blur',
-  soft: 'border border-border/70 bg-muted/35 shadow-sm shadow-foreground/5',
-  solid: 'border border-border bg-card shadow-sm shadow-foreground/5',
+  glass: STOREFRONT_SURFACE,
+  soft: STOREFRONT_SURFACE,
+  solid: STOREFRONT_SURFACE,
 };
 
-/**
- * Theme presets change the storefront's typographic personality so the choice
- * is actually visible to shoppers. Applied at the surface root and inherited by
- * headings/body inside.
- */
+/** Unified typography for the whole storefront. */
 export const storefrontThemeClasses: Record<
   InventoryStorefront['themePreset'],
   string
 > = {
-  // Spacious, headline-led magazine feel with serif headings.
-  editorial:
-    'font-sans [&_h1]:font-serif [&_h1]:tracking-tight [&_h2]:font-serif [&_h2]:tracking-tight',
-  // Refined boutique look: airy, wide-tracked uppercase headings.
-  boutique:
-    'font-sans [&_h1]:uppercase [&_h1]:tracking-[0.12em] [&_h2]:tracking-wide',
-  // Dense, scannable product-catalog density.
-  catalog: 'font-sans text-[0.95rem] [&_h1]:tracking-tight',
-  // Clean default.
+  editorial: 'font-sans',
+  boutique: 'font-sans',
+  catalog: 'font-sans',
   minimal: 'font-sans',
 };
 
@@ -65,6 +68,19 @@ export function sanitizeStorefrontAccentColor(value?: string | null) {
   return null;
 }
 
+export function getSafeStorefrontHttpUrl(value?: string | null) {
+  const normalized = value?.trim();
+  if (!normalized) return null;
+
+  try {
+    const url = new URL(normalized);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+
 export function getStorefrontListingLimit(listing: InventoryStorefrontListing) {
   const available =
     typeof listing.availableQuantity === 'number'
@@ -74,12 +90,80 @@ export function getStorefrontListingLimit(listing: InventoryStorefrontListing) {
   return Math.max(0, Math.min(listing.maxPerOrder, available));
 }
 
-export function formatStorefrontPrice(value: number, currency: string) {
-  return new Intl.NumberFormat(undefined, {
-    currency,
-    maximumFractionDigits: 0,
-    style: 'currency',
-  }).format(value);
+/** Active, selectable variants for a listing, in display order. */
+export function getStorefrontListingVariants(
+  listing: InventoryStorefrontListing
+): InventoryListingVariant[] {
+  return (listing.variants ?? []).filter(
+    (variant) => variant.status === 'active'
+  );
+}
+
+export function listingHasVariants(listing: InventoryStorefrontListing) {
+  return getStorefrontListingVariants(listing).length > 0;
+}
+
+/** Per-order limit for a specific variant, capped by the listing's maxPerOrder. */
+export function getStorefrontVariantLimit(
+  listing: InventoryStorefrontListing,
+  variant: InventoryListingVariant
+) {
+  const available =
+    typeof variant.availableQuantity === 'number'
+      ? variant.availableQuantity
+      : Number.POSITIVE_INFINITY;
+
+  return Math.max(0, Math.min(listing.maxPerOrder, available));
+}
+
+/**
+ * Resolves the price to charge for a cart line: the variant's resolved price
+ * when a variant is selected, otherwise the listing price. Both are minor units.
+ */
+export function getStorefrontLinePrice(
+  listing: InventoryStorefrontListing,
+  variant?: InventoryListingVariant | null
+) {
+  return variant ? variant.price : listing.price;
+}
+
+/** Lowest active-variant price, for a "from {price}" label on variant listings. */
+export function getStorefrontListingFromPrice(
+  listing: InventoryStorefrontListing
+) {
+  const variants = getStorefrontListingVariants(listing);
+  if (variants.length === 0) return listing.price;
+  return variants.reduce(
+    (min, variant) => Math.min(min, variant.price),
+    Number.POSITIVE_INFINITY
+  );
+}
+
+/** Stable identity for a cart line so listing+variant combos stay distinct. */
+export function storefrontCartLineKey(
+  listingId: string,
+  variantId?: string | null
+) {
+  return `${listingId}::${variantId ?? ''}`;
+}
+
+/** Composes a human label for the selected variant from its option values. */
+export function getStorefrontVariantLabel(
+  variant: InventoryListingVariant
+): string | null {
+  if (variant.title) return variant.title;
+  const labels = variant.optionValues.map((value) => value.label);
+  if (labels.length > 0) return labels.join(' / ');
+  return variant.sku ?? null;
+}
+
+/**
+ * Format a storefront price. Listing/bundle prices and cart totals are stored
+ * in integer minor units (cents for USD), so convert through the shared money
+ * helper, which also applies the currency's correct decimal precision.
+ */
+export function formatStorefrontPrice(minorValue: number, currency: string) {
+  return formatMoneyFromMinor(minorValue, currency);
 }
 
 export function getListingInitials(title: string) {

package/src/components/ui/text-editor/__tests__/content-migration.test.ts

@@ -16,6 +16,29 @@ describe('content-migration', () => {
       expect(migrateInlineImagesToBlock(content)).toEqual(content);
     });
 
+    it('should return malformed non-array content unchanged', () => {
+      const content = {
+        type: 'doc',
+        content: {},
+      } as unknown as JSONContent;
+
+      expect(migrateInlineImagesToBlock(content)).toEqual(content);
+    });
+
+    it('should ignore malformed nested non-array content', () => {
+      const content = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: {},
+          },
+        ],
+      } as unknown as JSONContent;
+
+      expect(migrateInlineImagesToBlock(content)).toEqual(content);
+    });
+
     it('should pass through content with no images', () => {
       const content: JSONContent = {
         type: 'doc',
@@ -662,6 +685,15 @@ describe('content-migration', () => {
       expect(needsMigration(content)).toBe(false);
     });
 
+    it('should return false for malformed non-array content', () => {
+      const content = {
+        type: 'doc',
+        content: {},
+      } as unknown as JSONContent;
+
+      expect(needsMigration(content)).toBe(false);
+    });
+
     it('should return false for content with no images', () => {
       const content: JSONContent = {
         type: 'doc',

package/src/components/ui/text-editor/__tests__/image-extension.test.ts

@@ -1,4 +1,5 @@
 import { type EditorState, NodeSelection, type Plugin } from '@tiptap/pm/state';
+import { toast } from '@tuturuuu/ui/sonner';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { __imageExtensionPrivate, CustomImage } from '../image-extension';
 import { MAX_IMAGE_SIZE, MAX_VIDEO_SIZE } from '../media-utils';
@@ -16,7 +17,7 @@ vi.mock('../media-utils', async () => {
 });
 
 // Mock the sonner toast
-vi.mock('../../sonner', () => ({
+vi.mock('@tuturuuu/ui/sonner', () => ({
   toast: {
     error: vi.fn(),
     success: vi.fn(),
@@ -113,6 +114,27 @@ describe('ImageExtension', () => {
 
       expect(extension).toBeDefined();
     });
+
+    it('should let a delegated getter clear the configured image upload handler', () => {
+      const staleUpload = vi.fn().mockResolvedValue('stale-url');
+
+      expect(
+        __imageExtensionPrivate.resolveUploadHandler({
+          configuredHandler: staleUpload,
+          delegatedGetter: () => undefined,
+        })
+      ).toBeUndefined();
+    });
+
+    it('should fall back to the configured upload handler only without a delegated getter', () => {
+      const upload = vi.fn().mockResolvedValue('url');
+
+      expect(
+        __imageExtensionPrivate.resolveUploadHandler({
+          configuredHandler: upload,
+        })
+      ).toBe(upload);
+    });
   });
 
   describe('size presets', () => {
@@ -300,6 +322,52 @@ describe('ImageExtension', () => {
       );
       expect(result).toBe(false);
     });
+
+    it('should block pasted images when delegated upload permission is cleared', () => {
+      const staleUpload = vi.fn().mockResolvedValue('stale-url');
+      const extension = CustomImage({
+        onImageUpload: staleUpload,
+        getOnImageUpload: () => undefined,
+      });
+
+      const plugins = extension.config.addProseMirrorPlugins();
+      const pastePlugin = plugins.find(
+        (p: Plugin) => p.props?.handleDOMEvents?.paste !== undefined
+      );
+
+      const imageFile = new File(['image'], 'image.png', {
+        type: 'image/png',
+      });
+      const mockView = {
+        state: { selection: { from: 0, to: 0 } },
+        dispatch: vi.fn(),
+        dom: document.createElement('div'),
+      };
+      const mockEvent = {
+        clipboardData: {
+          items: [
+            {
+              type: 'image/png',
+              getAsFile: () => imageFile,
+            },
+          ],
+        },
+        preventDefault: vi.fn(),
+      } as unknown as ClipboardEvent;
+
+      const result = pastePlugin?.props?.handleDOMEvents?.paste(
+        mockView as any,
+        mockEvent
+      );
+
+      expect(result).toBe(true);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(staleUpload).not.toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith('Insufficient permissions', {
+        description:
+          'You do not have permission to upload images in this editor.',
+      });
+    });
   });
 
   describe('drop handler behavior', () => {

package/src/components/ui/text-editor/__tests__/video-extension.test.ts

@@ -53,6 +53,16 @@ describe('VideoExtension', () => {
       const extension = Video();
       expect(extension).toBeDefined();
     });
+
+    it('should accept a delegated upload getter', () => {
+      const mockUpload = vi.fn().mockResolvedValue('url');
+      const extension = Video({
+        onVideoUpload: vi.fn().mockResolvedValue('stale-url'),
+        getOnVideoUpload: () => mockUpload,
+      });
+
+      expect(extension).toBeDefined();
+    });
   });
 
   describe('node configuration', () => {
@@ -251,6 +261,43 @@ describe('VideoExtension', () => {
       expect(result).toBe(false);
     });
 
+    it('should return false when delegated video upload permission is cleared', () => {
+      const staleUpload = vi.fn().mockResolvedValue('stale-url');
+      const extension = Video({
+        onVideoUpload: staleUpload,
+        getOnVideoUpload: () => undefined,
+      });
+      const plugins = (
+        extension.config as any
+      ).addProseMirrorPlugins() as any[];
+      const pastePlugin = plugins[1];
+
+      const mockView = {
+        state: { selection: { from: 0, to: 0 }, tr: {} },
+        dispatch: vi.fn(),
+      };
+      const mockEvent = {
+        clipboardData: {
+          items: [
+            {
+              type: 'video/mp4',
+              getAsFile: () => new File(['video'], 'video.mp4'),
+            },
+          ],
+        },
+        preventDefault: vi.fn(),
+      } as unknown as ClipboardEvent;
+
+      const result = pastePlugin.props?.handleDOMEvents?.paste(
+        mockView as any,
+        mockEvent
+      );
+
+      expect(result).toBe(false);
+      expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      expect(staleUpload).not.toHaveBeenCalled();
+    });
+
     it('should return false when clipboard has no items', () => {
       const mockUpload = vi.fn().mockResolvedValue('url');
       const extension = Video({ onVideoUpload: mockUpload });

package/src/components/ui/text-editor/content-migration.ts

@@ -6,6 +6,10 @@ import type { JSONContent } from '@tiptap/react';
  */
 const IMAGE_NODE_TYPES = ['image', 'imageResize'];
 
+function getContentChildren(node: JSONContent): JSONContent[] | null {
+  return Array.isArray(node.content) ? node.content : null;
+}
+
 /**
  * Migrates content from inline images (inside paragraphs) to block-level images.
  * This ensures backward compatibility when switching from inline: true to inline: false.
@@ -36,13 +40,19 @@ const IMAGE_NODE_TYPES = ['image', 'imageResize'];
 export function migrateInlineImagesToBlock(
   content: JSONContent | null
 ): JSONContent | null {
-  if (!content?.content) return content;
+  if (!content) return content;
+
+  const contentChildren = getContentChildren(content);
+  if (!contentChildren) return content;
 
   const newContent: JSONContent[] = [];
 
-  for (const node of content.content) {
+  for (const node of contentChildren) {
     // Recursively migrate nested structures (lists, blockquotes, etc.)
-    if (node.content && !IMAGE_NODE_TYPES.includes(node.type || '')) {
+    if (
+      getContentChildren(node) &&
+      !IMAGE_NODE_TYPES.includes(node.type || '')
+    ) {
       const migratedNode = migrateNodeContent(node);
       if (migratedNode.extractedImages.length > 0) {
         // Add the node with non-image content (if it has any)
@@ -74,18 +84,23 @@ interface MigratedNode {
  * Recursively migrates a node's content, extracting inline images from paragraphs.
  */
 function migrateNodeContent(node: JSONContent): MigratedNode {
+  const contentChildren = getContentChildren(node);
+
   // Handle paragraph nodes - extract inline images
-  if (node.type === 'paragraph' && node.content?.length) {
+  if (node.type === 'paragraph' && contentChildren?.length) {
     return extractImagesFromParagraph(node);
   }
 
   // Handle container nodes (list items, blockquotes, table cells, etc.) - recurse into children
-  if (node.content?.length) {
+  if (contentChildren?.length) {
     const migratedChildren: JSONContent[] = [];
     const allExtractedImages: JSONContent[] = [];
 
-    for (const child of node.content) {
-      if (child.content && !IMAGE_NODE_TYPES.includes(child.type || '')) {
+    for (const child of contentChildren) {
+      if (
+        getContentChildren(child) &&
+        !IMAGE_NODE_TYPES.includes(child.type || '')
+      ) {
         const result = migrateNodeContent(child);
 
         if (result.extractedImages.length > 0) {
@@ -116,14 +131,16 @@ function migrateNodeContent(node: JSONContent): MigratedNode {
  * and the extracted images separately.
  */
 function extractImagesFromParagraph(paragraph: JSONContent): MigratedNode {
-  if (!paragraph.content) {
+  const contentChildren = getContentChildren(paragraph);
+
+  if (!contentChildren) {
     return { node: paragraph, extractedImages: [] };
   }
 
   const textContent: JSONContent[] = [];
   const images: JSONContent[] = [];
 
-  for (const child of paragraph.content) {
+  for (const child of contentChildren) {
     if (IMAGE_NODE_TYPES.includes(child.type || '')) {
       images.push(child);
     } else {
@@ -148,9 +165,10 @@ function extractImagesFromParagraph(paragraph: JSONContent): MigratedNode {
  * Empty paragraphs should be filtered out when all content was extracted.
  */
 function hasNonEmptyContent(node: JSONContent): boolean {
-  if (!node.content || node.content.length === 0) return false;
+  const contentChildren = getContentChildren(node);
+  if (!contentChildren || contentChildren.length === 0) return false;
 
-  return node.content.some((child) => {
+  return contentChildren.some((child) => {
     // Check for text content
     if (child.text && child.text.trim().length > 0) return true;
 
@@ -165,7 +183,7 @@ function hasNonEmptyContent(node: JSONContent): boolean {
     }
 
     // Recursively check children
-    if (child.content) return hasNonEmptyContent(child);
+    if (getContentChildren(child)) return hasNonEmptyContent(child);
 
     return false;
   });
@@ -176,24 +194,29 @@ function hasNonEmptyContent(node: JSONContent): boolean {
  * Used to avoid unnecessary processing.
  */
 export function needsMigration(content: JSONContent | null): boolean {
-  if (!content?.content) return false;
+  if (!content) return false;
+
+  const contentChildren = getContentChildren(content);
+  if (!contentChildren) return false;
 
   function checkNode(node: JSONContent): boolean {
+    const nodeChildren = getContentChildren(node);
+
     // Check if this is a paragraph with inline images
-    if (node.type === 'paragraph' && node.content?.length) {
-      const hasImage = node.content.some((child) =>
+    if (node.type === 'paragraph' && nodeChildren?.length) {
+      const hasImage = nodeChildren.some((child) =>
         IMAGE_NODE_TYPES.includes(child.type || '')
       );
       if (hasImage) return true;
     }
 
     // Recursively check children
-    if (node.content?.length) {
-      return node.content.some((child) => checkNode(child));
+    if (nodeChildren?.length) {
+      return nodeChildren.some((child) => checkNode(child));
     }
 
     return false;
   }
 
-  return content.content.some((node) => checkNode(node));
+  return contentChildren.some((node) => checkNode(node));
 }

package/src/components/ui/text-editor/extensions.ts

@@ -213,7 +213,7 @@ export function getEditorExtensions({
       getOnImageUpload,
       getOnVideoUpload,
     }),
-    Video({ onVideoUpload }).configure({
+    Video({ onVideoUpload, getOnVideoUpload }).configure({
       HTMLAttributes: {
         class: 'rounded-md my-4',
       },

package/src/components/ui/text-editor/image-extension.ts

@@ -66,13 +66,31 @@ function clearImageResizeUIFromNodeDom(nodeDom: Node | null): void {
   }
 }
 
+export type ImageSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type UploadHandler = (file: File) => Promise<string>;
+type UploadHandlerGetter = () => UploadHandler | undefined;
+
+function resolveUploadHandler({
+  configuredHandler,
+  delegatedGetter,
+}: {
+  configuredHandler?: UploadHandler;
+  delegatedGetter?: UploadHandlerGetter;
+}): UploadHandler | undefined {
+  if (delegatedGetter) {
+    return delegatedGetter();
+  }
+
+  return configuredHandler;
+}
+
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,
+  resolveUploadHandler,
 };
 
-export type ImageSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
 // Size presets in pixels (will be calculated based on editor width)
 const SIZE_PERCENTAGES: Record<ImageSize, number> = {
   xs: 25, // 25% of editor width
@@ -137,10 +155,10 @@ function calculatePresetWidth(
 }
 
 interface ImageOptions {
-  onImageUpload?: (file: File) => Promise<string>;
-  onVideoUpload?: (file: File) => Promise<string>;
-  getOnImageUpload?: () => ((file: File) => Promise<string>) | undefined;
-  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+  onImageUpload?: UploadHandler;
+  onVideoUpload?: UploadHandler;
+  getOnImageUpload?: UploadHandlerGetter;
+  getOnVideoUpload?: UploadHandlerGetter;
 }
 
 /**
@@ -166,10 +184,10 @@ interface ExtendedImageResizeOptions {
   HTMLAttributes: Record<string, any>;
   minWidth?: number;
   maxWidth?: number;
-  onImageUpload?: (file: File) => Promise<string>;
-  onVideoUpload?: (file: File) => Promise<string>;
-  getOnImageUpload?: () => ((file: File) => Promise<string>) | undefined;
-  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+  onImageUpload?: UploadHandler;
+  onVideoUpload?: UploadHandler;
+  getOnImageUpload?: UploadHandlerGetter;
+  getOnVideoUpload?: UploadHandlerGetter;
 }
 
 export const CustomImage = (options: ImageOptions = {}) => {
@@ -229,15 +247,19 @@ export const CustomImage = (options: ImageOptions = {}) => {
     addProseMirrorPlugins() {
       const parentPlugins = this.parent?.() || [];
       const getOnImageUpload = () =>
-        this?.options?.getOnImageUpload?.() ??
-        this?.options?.onImageUpload ??
-        options.getOnImageUpload?.() ??
-        options.onImageUpload;
+        resolveUploadHandler({
+          delegatedGetter:
+            this?.options?.getOnImageUpload ?? options.getOnImageUpload,
+          configuredHandler:
+            this?.options?.onImageUpload ?? options.onImageUpload,
+        });
       const getOnVideoUpload = () =>
-        this?.options?.getOnVideoUpload?.() ??
-        this?.options?.onVideoUpload ??
-        options.getOnVideoUpload?.() ??
-        options.onVideoUpload;
+        resolveUploadHandler({
+          delegatedGetter:
+            this?.options?.getOnVideoUpload ?? options.getOnVideoUpload,
+          configuredHandler:
+            this?.options?.onVideoUpload ?? options.onVideoUpload,
+        });
 
       return [
         ...parentPlugins,

package/src/components/ui/text-editor/video-extension.ts

@@ -29,6 +29,15 @@ const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
 
 interface VideoOptions {
   onVideoUpload?: (file: File) => Promise<string>;
+  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+}
+
+function resolveVideoUploadHandler(options: VideoOptions) {
+  if (options.getOnVideoUpload) {
+    return options.getOnVideoUpload();
+  }
+
+  return options.onVideoUpload;
 }
 
 /**
@@ -114,8 +123,6 @@ export const Video = (options: VideoOptions = {}) =>
     },
 
     addProseMirrorPlugins() {
-      const { onVideoUpload } = options;
-
       return [
         // Video upload placeholder plugin - manages loading state decorations
         new Plugin({
@@ -166,6 +173,7 @@ export const Video = (options: VideoOptions = {}) =>
           props: {
             handleDOMEvents: {
               paste: (view, event: ClipboardEvent) => {
+                const onVideoUpload = resolveVideoUploadHandler(options);
                 if (!onVideoUpload) return false;
 
                 const items = event.clipboardData?.items;
@@ -303,6 +311,7 @@ export const Video = (options: VideoOptions = {}) =>
           props: {
             handleDOMEvents: {
               drop(view, event) {
+                const onVideoUpload = resolveVideoUploadHandler(options);
                 if (!onVideoUpload) return false;
 
                 const { schema } = view.state;