@tuturuuu/ui 0.7.0 → 0.9.0

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

@@ -1,52 +1,58 @@
 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',
 };
 
 export type StorefrontAccentStyle = CSSProperties & {
   '--storefront-accent'?: string;
+  '--storefront-accent-border'?: string;
   '--storefront-accent-foreground'?: string;
+  '--storefront-accent-soft'?: string;
+  '--storefront-accent-text'?: string;
 };
 
 export function sanitizeStorefrontAccentColor(value?: string | null) {
@@ -65,6 +71,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 +93,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) {
@@ -98,7 +185,10 @@ export function getAccentStyle(
 
   return {
     '--storefront-accent': accentColor,
+    '--storefront-accent-border': `color-mix(in oklab, ${accentColor} 42%, var(--border))`,
     '--storefront-accent-foreground': getAccentForeground(accentColor),
+    '--storefront-accent-soft': `color-mix(in oklab, ${accentColor} 14%, var(--background))`,
+    '--storefront-accent-text': `color-mix(in oklab, ${accentColor} 68%, var(--foreground))`,
   };
 }
 

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__/extensions.test.ts

@@ -1,3 +1,4 @@
+import { generateHTML, generateJSON } from '@tiptap/core';
 import type SupabaseProvider from '@tuturuuu/ui/hooks/supabase-provider';
 import { describe, expect, it } from 'vitest';
 import * as Y from 'yjs';
@@ -34,6 +35,128 @@ describe('text editor extensions', () => {
     expect(names).toContain('collaborationCaret');
   });
 
+  it('registers theme-aware highlight, text color, and background color extensions', () => {
+    const names = extensionNames({});
+
+    expect(names).toContain('highlight');
+    expect(names).toContain('textStyle');
+    expect(names).toContain('color');
+    expect(names).toContain('backgroundColor');
+  });
+
+  it('round-trips theme-aware highlight, text color, and background color marks', () => {
+    const extensions = getEditorExtensions();
+    const content = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: { textAlign: null },
+          content: [
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'highlight',
+                  attrs: {
+                    color: 'var(--calendar-bg-yellow)',
+                    textColor: 'var(--yellow)',
+                  },
+                },
+              ],
+              text: 'Highlighted',
+            },
+            { type: 'text', text: ' ' },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'textStyle',
+                  attrs: {
+                    color: 'var(--blue)',
+                    backgroundColor: 'var(--calendar-bg-blue)',
+                  },
+                },
+              ],
+              text: 'Colored',
+            },
+          ],
+        },
+      ],
+    };
+
+    const html = generateHTML(content, extensions);
+
+    expect(html).toContain('var(--calendar-bg-yellow)');
+    expect(html).toContain('var(--yellow)');
+    expect(html).toContain('var(--calendar-bg-blue)');
+    expect(html).toContain('var(--blue)');
+
+    const parsed = generateJSON(html, extensions);
+    const paragraph = parsed.content?.[0];
+    const highlightedText = paragraph?.content?.[0];
+    const coloredText = paragraph?.content?.[2];
+
+    expect(highlightedText?.marks).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'highlight',
+          attrs: expect.objectContaining({
+            color: 'var(--calendar-bg-yellow)',
+            textColor: 'var(--yellow)',
+          }),
+        }),
+      ])
+    );
+    expect(coloredText?.marks).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'textStyle',
+          attrs: expect.objectContaining({
+            color: 'var(--blue)',
+            backgroundColor: 'var(--calendar-bg-blue)',
+          }),
+        }),
+      ])
+    );
+  });
+
+  it('keeps legacy and raw hex highlight content valid', () => {
+    const html = generateHTML(
+      {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            attrs: { textAlign: null },
+            content: [
+              {
+                type: 'text',
+                marks: [{ type: 'highlight' }],
+                text: 'Legacy',
+              },
+              { type: 'text', text: ' ' },
+              {
+                type: 'text',
+                marks: [
+                  {
+                    type: 'highlight',
+                    attrs: { color: '#FFF59D' },
+                  },
+                ],
+                text: 'Hex',
+              },
+            ],
+          },
+        ],
+      },
+      getEditorExtensions()
+    );
+
+    expect(html).toContain('<mark');
+    expect(html).toContain('#FFF59D');
+  });
+
   it('round-trips task mention workspace metadata through HTML attrs', () => {
     const renderOutput = (Mention.config as any).renderHTML({
       HTMLAttributes: {

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/background-color-extension.ts

@@ -0,0 +1,62 @@
+import { Extension } from '@tiptap/core';
+
+export interface BackgroundColorOptions {
+  types: string[];
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    backgroundColor: {
+      setBackgroundColor: (color: string) => ReturnType;
+      unsetBackgroundColor: () => ReturnType;
+    };
+  }
+}
+
+export const BackgroundColor = Extension.create<BackgroundColorOptions>({
+  name: 'backgroundColor',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.getPropertyValue('background-color') || null,
+            renderHTML: (attributes) => {
+              if (!attributes.backgroundColor) return {};
+
+              return {
+                style: `background-color: ${attributes.backgroundColor}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setBackgroundColor:
+        (color) =>
+        ({ chain }) =>
+          chain().setMark('textStyle', { backgroundColor: color }).run(),
+      unsetBackgroundColor:
+        () =>
+        ({ chain }) =>
+          chain()
+            .setMark('textStyle', { backgroundColor: null })
+            .removeEmptyTextStyle()
+            .run(),
+    };
+  },
+});