kmcom-nuxt-layers 2.5.0 → 2.6.0

package/layers/visual/app/utils/colorTokens.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveUiColorToken } from './colorTokens'
+
+describe('resolveUiColorToken', () => {
+  it('defaults to primary-500 when no options are given', () => {
+    expect(resolveUiColorToken({})).toBe('var(--ui-color-primary-500)')
+  })
+
+  it('uses the provided color and shade', () => {
+    expect(resolveUiColorToken({ color: 'secondary', shade: 200 })).toBe(
+      'var(--ui-color-secondary-200)'
+    )
+  })
+
+  it('applies opacity via color-mix', () => {
+    expect(resolveUiColorToken({ color: 'primary', shade: 500, opacity: 50 })).toBe(
+      'color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent)'
+    )
+  })
+
+  it('resolves custom color to customColor value', () => {
+    expect(resolveUiColorToken({ color: 'custom', customColor: '#123456' })).toBe('#123456')
+  })
+
+  it('resolves custom color to transparent when customColor is missing', () => {
+    expect(resolveUiColorToken({ color: 'custom' })).toBe('transparent')
+  })
+
+  it('resolves transparent color regardless of other options', () => {
+    expect(resolveUiColorToken({ color: 'transparent', shade: 900, opacity: 10 })).toBe(
+      'transparent'
+    )
+  })
+
+  it('resolves white without opacity to a hex value', () => {
+    expect(resolveUiColorToken({ color: 'white' })).toBe('#ffffff')
+  })
+
+  it('resolves white with opacity to an rgb() value', () => {
+    expect(resolveUiColorToken({ color: 'white', opacity: 40 })).toBe('rgb(255 255 255 / 0.4)')
+  })
+
+  it('resolves black without opacity to a hex value', () => {
+    expect(resolveUiColorToken({ color: 'black' })).toBe('#000000')
+  })
+
+  it('resolves black with opacity to an rgb() value', () => {
+    expect(resolveUiColorToken({ color: 'black', opacity: 25 })).toBe('rgb(0 0 0 / 0.25)')
+  })
+})

package/layers/visual/app/utils/gradientStyle.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+
+import type { GradientConfig } from '../types/gradient'
+import { buildGradientStyle, resolveGradientColor } from './gradientStyle'
+
+describe('resolveGradientColor', () => {
+  it('delegates to resolveUiColorToken for a gradient stop', () => {
+    expect(resolveGradientColor({ color: 'primary', shade: 500 })).toBe(
+      'var(--ui-color-primary-500)'
+    )
+  })
+
+  it('applies opacity for a gradient stop', () => {
+    expect(resolveGradientColor({ color: 'secondary', shade: 300, opacity: 50 })).toBe(
+      'color-mix(in srgb, var(--ui-color-secondary-300) 50%, transparent)'
+    )
+  })
+})
+
+describe('buildGradientStyle', () => {
+  const from = { color: 'primary', shade: 500 } as const
+  const to = { color: 'secondary', shade: 500 } as const
+
+  it('builds a linear gradient defaulting direction to "to bottom right"', () => {
+    const cfg: GradientConfig = { from, to }
+    expect(buildGradientStyle(cfg)).toEqual({
+      backgroundImage:
+        'linear-gradient(to bottom right, var(--ui-color-primary-500), var(--ui-color-secondary-500))',
+    })
+  })
+
+  it('maps every named linear direction', () => {
+    const directions: Array<[NonNullable<GradientConfig['direction']>, string]> = [
+      ['to-t', 'to top'],
+      ['to-tr', 'to top right'],
+      ['to-r', 'to right'],
+      ['to-br', 'to bottom right'],
+      ['to-b', 'to bottom'],
+      ['to-bl', 'to bottom left'],
+      ['to-l', 'to left'],
+      ['to-tl', 'to top left'],
+    ]
+
+    for (const [direction, expected] of directions) {
+      const cfg: GradientConfig = { from, to, direction }
+      expect(buildGradientStyle(cfg)).toEqual({
+        backgroundImage: `linear-gradient(${expected}, var(--ui-color-primary-500), var(--ui-color-secondary-500))`,
+      })
+    }
+  })
+
+  it('includes the via stop between from and to when provided', () => {
+    const via = { color: 'info', shade: 400 } as const
+    const cfg: GradientConfig = { from, to, via }
+    expect(buildGradientStyle(cfg)).toEqual({
+      backgroundImage:
+        'linear-gradient(to bottom right, var(--ui-color-primary-500), var(--ui-color-info-400), var(--ui-color-secondary-500))',
+    })
+  })
+
+  it('builds a radial gradient', () => {
+    const cfg: GradientConfig = { from, to, shape: 'radial' }
+    expect(buildGradientStyle(cfg)).toEqual({
+      backgroundImage:
+        'radial-gradient(circle, var(--ui-color-primary-500), var(--ui-color-secondary-500))',
+    })
+  })
+
+  it('builds a conic gradient', () => {
+    const cfg: GradientConfig = { from, to, shape: 'conic' }
+    expect(buildGradientStyle(cfg)).toEqual({
+      backgroundImage:
+        'conic-gradient(var(--ui-color-primary-500), var(--ui-color-secondary-500))',
+    })
+  })
+})

package/layers/visual/app/utils/responsiveSizes.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ResponsiveSizes } from '../types/media'
+import { buildResponsiveSizesQueries } from './responsiveSizes'
+
+describe('buildResponsiveSizesQueries', () => {
+  it('returns only the default query when no breakpoints are set', () => {
+    const sizes: ResponsiveSizes = { default: '100vw' }
+    expect(buildResponsiveSizesQueries(sizes)).toEqual(['100vw'])
+  })
+
+  it('always places the default query last', () => {
+    const sizes: ResponsiveSizes = { default: '100vw', md: '50vw' }
+    const queries = buildResponsiveSizesQueries(sizes)
+    expect(queries.at(-1)).toBe('100vw')
+  })
+
+  it('sorts tailwind breakpoints from largest to smallest min-width', () => {
+    const sizes: ResponsiveSizes = {
+      default: '100vw',
+      sm: '90vw',
+      lg: '50vw',
+      '2xl': '25vw',
+    }
+
+    expect(buildResponsiveSizesQueries(sizes)).toEqual([
+      '(min-width: 1536px) 25vw',
+      '(min-width: 1024px) 50vw',
+      '(min-width: 640px) 90vw',
+      '100vw',
+    ])
+  })
+
+  it('mixes device, phone, and tablet breakpoints sorted by pixel value', () => {
+    const sizes: ResponsiveSizes = {
+      default: '100vw',
+      wide: '20vw',
+      desktop: '40vw',
+      'phone-md': '95vw',
+    }
+
+    expect(buildResponsiveSizesQueries(sizes)).toEqual([
+      '(min-width: 1920px) 20vw',
+      '(min-width: 1024px) 40vw',
+      '(min-width: 375px) 95vw',
+      '100vw',
+    ])
+  })
+
+  it('prepends landscape before portrait, both before breakpoints', () => {
+    const sizes: ResponsiveSizes = {
+      default: '100vw',
+      landscape: '80vw',
+      portrait: '90vw',
+      md: '50vw',
+    }
+
+    expect(buildResponsiveSizesQueries(sizes)).toEqual([
+      '(orientation: landscape) 80vw',
+      '(orientation: portrait) 90vw',
+      '(min-width: 768px) 50vw',
+      '100vw',
+    ])
+  })
+
+  it('omits orientation queries when not provided', () => {
+    const sizes: ResponsiveSizes = { default: '100vw' }
+    const queries = buildResponsiveSizesQueries(sizes)
+    expect(queries.some((q) => q.includes('orientation'))).toBe(false)
+  })
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -29,9 +29,10 @@
     "./layers/routing": "./layers/routing/nuxt.config.ts",
     "./layers/starter": "./layers/starter/nuxt.config.ts",
     "./layers/metadata": "./layers/metadata/nuxt.config.ts",
-    "./layers/metadata-comicvine": "./layers/metadata-comicvine/nuxt.config.ts",
-    "./layers/metadata-openlibrary": "./layers/metadata-openlibrary/nuxt.config.ts",
-    "./layers/metadata-google-books": "./layers/metadata-google-books/nuxt.config.ts"
+    "./layers/metadata/providers/comicvine": "./layers/metadata/providers/comicvine/nuxt.config.ts",
+    "./layers/metadata/providers/openlibrary": "./layers/metadata/providers/openlibrary/nuxt.config.ts",
+    "./layers/metadata/providers/google-books": "./layers/metadata/providers/google-books/nuxt.config.ts",
+    "./layers/metadata/providers/themoviedb": "./layers/metadata/providers/themoviedb/nuxt.config.ts"
   },
   "files": [
     "layers/*/nuxt.config.ts",
@@ -42,6 +43,10 @@
     "layers/*/app/**",
     "layers/*/public/**",
     "layers/*/server/**",
+    "layers/*/providers/*/nuxt.config.ts",
+    "layers/*/providers/*/package.json",
+    "layers/*/providers/*/tsconfig.json",
+    "layers/*/providers/*/server/**",
     "types/**",
     "docs/"
   ],
@@ -204,6 +209,7 @@
     "typescript": "^6",
     "vite-plugin-checker": "^0.14.1",
     "vitest": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "vue": "^3.5.35",
     "vue-tsc": "3.3.3",
     "zod": "^4.4.3",
@@ -247,6 +253,7 @@
     "fix:app": "f(){ pnpm turbo run lint --filter \"./apps/$1\" -- --fix && prettier --write \"apps/$1\"; }; f",
     "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "test:unit": "vitest run --project unit",
     "test:vitest": "vitest run --project vitest",
@@ -284,6 +291,7 @@
     "layer:rebuild:layout": "pnpm build:layout && pnpm layer:generate:layout && pnpm layer:layout",
     "layer:rebuild:motion": "pnpm build:motion && pnpm layer:generate:motion && pnpm layer:motion",
     "browserlist": "npx update-browserslist-db@latest",
+    "kill": "pkill -f 'nuxt|vite|node.*dev' || true",
     "deploy": "turbo run build --filter playground",
     "build:netlify": "pnpm -F playground build:netlify",
     "dev:netlify": "pnpm -F playground dev:netlify"

package/layers/metadata-comicvine/server/utils/metadata-comicvine/normalise.ts

@@ -1,55 +0,0 @@
-import type { MetadataRecord, MetadataCreator } from '#layers/metadata/shared/types'
-import type { ComicVineIssue, ComicVineVolume } from './types'
-
-// fallow-ignore-next-line complexity
-export function normaliseComicVineIssue(issue: ComicVineIssue): MetadataRecord {
-  const creators: MetadataCreator[] = (issue.person_credits ?? []).map((p) => ({
-    name: p.name,
-    role: p.role,
-    providerId: String(p.id),
-  }))
-
-  return {
-    id: `comicvine:issue:${issue.id}`,
-    provider: 'comicvine',
-    providerId: String(issue.id),
-    mediaType: 'comic',
-    title: issue.volume?.name ? `${issue.volume.name} #${issue.issue_number}` : (issue.name ?? `Issue #${issue.issue_number}`),
-    subtitle: issue.name ?? undefined,
-    description: issue.deck ?? issue.description ?? undefined,
-    creators: creators.length ? creators : undefined,
-    publisher: issue.publisher?.name ?? undefined,
-    publishedAt: issue.cover_date ?? issue.store_date ?? undefined,
-    coverUrl: issue.image?.medium_url ?? issue.image?.original_url ?? undefined,
-    identifiers: { comicVineId: String(issue.id) },
-    sourceUrl: issue.site_detail_url,
-    raw: issue,
-    lastSyncedAt: new Date().toISOString(),
-  }
-}
-
-// fallow-ignore-next-line complexity
-export function normaliseComicVineVolume(volume: ComicVineVolume): MetadataRecord {
-  const creators: MetadataCreator[] = (volume.people ?? []).map((p) => ({
-    name: p.name,
-    role: p.role,
-    providerId: String(p.id),
-  }))
-
-  return {
-    id: `comicvine:volume:${volume.id}`,
-    provider: 'comicvine',
-    providerId: String(volume.id),
-    mediaType: 'comic',
-    title: volume.name,
-    description: volume.deck ?? volume.description ?? undefined,
-    creators: creators.length ? creators : undefined,
-    publisher: volume.publisher?.name ?? undefined,
-    publishedAt: volume.start_year ?? undefined,
-    coverUrl: volume.image?.medium_url ?? volume.image?.original_url ?? undefined,
-    identifiers: { comicVineId: String(volume.id) },
-    sourceUrl: volume.site_detail_url,
-    raw: volume,
-    lastSyncedAt: new Date().toISOString(),
-  }
-}

package/layers/metadata-google-books/server/utils/metadata-google-books/normalise.ts

@@ -1,39 +0,0 @@
-import type { MetadataRecord, MetadataCreator } from '#layers/metadata/shared/types'
-import type { GoogleBooksVolume } from './types'
-
-// fallow-ignore-next-line complexity
-export function normaliseGoogleBooksVolume(volume: GoogleBooksVolume): MetadataRecord {
-  const { volumeInfo } = volume
-
-  const creators: MetadataCreator[] = (volumeInfo.authors ?? []).map((name) => ({
-    name,
-    role: 'author',
-  }))
-
-  const isbn10 = volumeInfo.industryIdentifiers?.find((i) => i.type === 'ISBN_10')?.identifier
-  const isbn13 = volumeInfo.industryIdentifiers?.find((i) => i.type === 'ISBN_13')?.identifier
-
-  const cover = volumeInfo.imageLinks?.thumbnail ?? volumeInfo.imageLinks?.smallThumbnail
-
-  return {
-    id: `google-books:volume:${volume.id}`,
-    provider: 'google-books',
-    providerId: volume.id,
-    mediaType: 'book',
-    title: volumeInfo.title,
-    subtitle: volumeInfo.subtitle,
-    description: volumeInfo.description,
-    creators: creators.length ? creators : undefined,
-    publisher: volumeInfo.publisher,
-    publishedAt: volumeInfo.publishedDate,
-    coverUrl: cover ? cover.replace('http://', 'https://') : undefined,
-    identifiers: {
-      isbn10,
-      isbn13,
-      googleBooksId: volume.id,
-    },
-    sourceUrl: volumeInfo.canonicalVolumeLink ?? volumeInfo.infoLink,
-    raw: volume,
-    lastSyncedAt: new Date().toISOString(),
-  }
-}

package/layers/metadata-google-books/server/utils/metadata-google-books/provider.ts

@@ -1,21 +0,0 @@
-import type { MetadataProvider } from '#layers/metadata/shared/types'
-
-export const googleBooksProvider: MetadataProvider = {
-  id: 'google-books',
-  label: 'Google Books',
-  mediaTypes: ['book', 'graphic-novel', 'collected-edition'],
-
-  async search({ query, limit = 10 }) {
-    const res = await searchGoogleBooks(query, limit)
-    return (res.items ?? []).map(normaliseGoogleBooksVolume)
-  },
-
-  async lookup({ providerId }) {
-    const volume = await fetchGoogleBooksVolume(providerId)
-    return normaliseGoogleBooksVolume(volume)
-  },
-
-  async sync({ providerId }) {
-    return (await googleBooksProvider.lookup!({ provider: 'google-books', providerId }))!
-  },
-}