kmcom-nuxt-layers 2.5.1 → 2.6.2

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.1",
+  "version": "2.6.2",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -31,7 +31,8 @@
     "./layers/metadata": "./layers/metadata/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/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",
@@ -65,7 +66,7 @@
     "@nuxt/content": "^3.14.0",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/image": "^2.0.0",
-    "@nuxt/scripts": "^0.11.0",
+    "@nuxt/scripts": "^0.11.0 || ^1.0.0",
     "@nuxt/ui": "^4.8.1",
     "@nuxtjs/device": "^4.0.0",
     "@nuxtjs/seo": "^5.0.0",
@@ -208,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",
@@ -251,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",
@@ -288,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"