lutaml-jsonschema 0.1.0

data/frontend/src/__tests__/useBuilderField.test.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect } from 'vitest'
+import { createField, buildDefaultJson, isCircular, parseFieldValue } from '../composables/useBuilderField'
+import type { SpaProperty, SpaSchema, SpaDefinition } from '../types'
+
+function prop(overrides: Partial<SpaProperty> = {}): SpaProperty {
+  return { name: 'test', ...overrides }
+}
+
+function definition(overrides: Partial<SpaDefinition> = {}): SpaDefinition {
+  return { name: 'Address', properties: [], required: [], ...overrides }
+}
+
+function spaSchema(overrides: Partial<SpaSchema> = {}): SpaSchema {
+  return { name: 'Test', properties: [], definitions: [], required: [], ...overrides }
+}
+
+describe('createField', () => {
+  it('marks field as required when in required list', () => {
+    const field = createField(prop({ name: 'email' }), ['email'], spaSchema())
+    expect(field.isRequired).toBe(true)
+    expect(field.included).toBe(true)
+  })
+
+  it('marks field as optional when not in required list', () => {
+    const field = createField(prop({ name: 'nickname' }), ['email'], spaSchema())
+    expect(field.isRequired).toBe(false)
+    expect(field.included).toBe(false)
+  })
+
+  it('resolves $ref to definition', () => {
+    const addressDef = definition({
+      name: 'address',
+      properties: [
+        prop({ name: 'street', type: 'string' }),
+      ],
+    })
+    const s = spaSchema({ definitions: [addressDef] })
+    const field = createField(
+      prop({ name: 'address', type: 'object', ref: '#/definitions/address' }),
+      [],
+      s,
+    )
+    expect(field.resolvedDef).toBe(addressDef)
+  })
+
+  it('initializes array items for array type', () => {
+    const field = createField(
+      prop({ name: 'tags', type: 'array', itemsType: 'string' }),
+      [],
+      spaSchema(),
+    )
+    expect(field.arrayItems).toEqual([''])
+  })
+
+  it('leaves array items empty for non-array type', () => {
+    const field = createField(prop({ name: 'name', type: 'string' }), [], spaSchema())
+    expect(field.arrayItems).toEqual([])
+  })
+})
+
+describe('buildDefaultJson', () => {
+  it('builds object from properties', () => {
+    const props = [
+      prop({ name: 'name', type: 'string' }),
+      prop({ name: 'age', type: 'integer' }),
+    ]
+    const result = buildDefaultJson(props)
+    expect(result).toEqual({ name: 'string', age: 0 })
+  })
+
+  it('builds array property', () => {
+    const props = [
+      prop({ name: 'tags', type: 'array', itemsType: 'string' }),
+    ]
+    const result = buildDefaultJson(props)
+    expect(result).toEqual({ tags: [''] })
+  })
+
+  it('builds empty object for object without ref', () => {
+    const props = [
+      prop({ name: 'meta', type: 'object' }),
+    ]
+    const result = buildDefaultJson(props)
+    expect(result).toEqual({ meta: {} })
+  })
+})
+
+describe('isCircular', () => {
+  it('returns true when definition name is in visited set', () => {
+    const field = createField(
+      prop({ name: 'self', type: 'object', ref: '#/definitions/Address' }),
+      [],
+      spaSchema({ definitions: [definition({ name: 'Address' })] }),
+    )
+    expect(isCircular(field, new Set(['Address']))).toBe(true)
+  })
+
+  it('returns false when definition name is not in visited set', () => {
+    const field = createField(
+      prop({ name: 'self', type: 'object', ref: '#/definitions/Address' }),
+      [],
+      spaSchema({ definitions: [definition({ name: 'Address' })] }),
+    )
+    expect(isCircular(field, new Set())).toBe(false)
+  })
+
+  it('returns false when resolvedDef is null', () => {
+    const field = createField(prop({ name: 'x', type: 'string' }), [], spaSchema())
+    expect(isCircular(field, new Set())).toBe(false)
+  })
+})
+
+describe('parseFieldValue', () => {
+  it('parses string value', () => {
+    const field = createField(prop({ name: 'x', type: 'string' }), [], spaSchema())
+    field.rawValue = 'hello'
+    expect(parseFieldValue(field)).toBe('hello')
+  })
+
+  it('parses integer value', () => {
+    const field = createField(prop({ name: 'x', type: 'integer' }), [], spaSchema())
+    field.rawValue = '42'
+    expect(parseFieldValue(field)).toBe(42)
+  })
+
+  it('parses array from arrayItems', () => {
+    const field = createField(prop({ name: 'x', type: 'array', itemsType: 'string' }), [], spaSchema())
+    field.arrayItems = ['a', 'b']
+    expect(parseFieldValue(field)).toEqual(['a', 'b'])
+  })
+
+  it('parses array of integers', () => {
+    const field = createField(prop({ name: 'x', type: 'array', itemsType: 'integer' }), [], spaSchema())
+    field.arrayItems = ['1', '2', '3']
+    expect(parseFieldValue(field)).toEqual([1, 2, 3])
+  })
+})

data/frontend/src/__tests__/useDefinitionResolver.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { resolveSchemaRef } from '../composables/useDefinitionResolver'
+import type { SpaSchema, SpaDefinition } from '../types'
+
+function definition(overrides: Partial<SpaDefinition> = {}): SpaDefinition {
+  return { name: 'Test', properties: [], required: [], ...overrides }
+}
+
+function schema(overrides: Partial<SpaSchema> = {}): SpaSchema {
+  return { name: 'TestSchema', properties: [], definitions: [], required: [], ...overrides }
+}
+
+describe('resolveSchemaRef', () => {
+  it('returns null for undefined ref', () => {
+    expect(resolveSchemaRef(undefined, schema())).toBeNull()
+  })
+
+  it('returns null for empty string ref', () => {
+    expect(resolveSchemaRef('', schema())).toBeNull()
+  })
+
+  it('resolves #/definitions/NAME', () => {
+    const address = definition({ name: 'address', title: 'Address', type: 'object' })
+    const s = schema({ definitions: [address] })
+    expect(resolveSchemaRef('#/definitions/address', s)).toBe(address)
+  })
+
+  it('resolves #/$defs/NAME', () => {
+    const email = definition({ name: 'email', type: 'object' })
+    const s = schema({ definitions: [email] })
+    expect(resolveSchemaRef('#/$defs/email', s)).toBe(email)
+  })
+
+  it('returns null for non-existent definition', () => {
+    const s = schema({ definitions: [definition({ name: 'other' })] })
+    expect(resolveSchemaRef('#/definitions/missing', s)).toBeNull()
+  })
+
+  it('returns null for malformed ref', () => {
+    expect(resolveSchemaRef('not-a-ref', schema())).toBeNull()
+  })
+
+  it('returns null for partial ref without definition name', () => {
+    expect(resolveSchemaRef('#/definitions/', schema())).toBeNull()
+  })
+})

data/frontend/src/__tests__/useSchemaTypes.test.ts

@@ -0,0 +1,219 @@
+import { describe, it, expect } from 'vitest'
+import {
+  primaryType,
+  displayType,
+  formatInputType,
+  formatDefault,
+  initialValue,
+  arrayItemInputType,
+  arrayDefaultValue,
+  parseArrayItem,
+  isObjectProperty,
+  hasConstraints,
+  parsePropertyValue,
+} from '../composables/useSchemaTypes'
+import type { SpaProperty } from '../types'
+
+function prop(overrides: Partial<SpaProperty> = {}): SpaProperty {
+  return { name: 'test', ...overrides }
+}
+
+describe('primaryType', () => {
+  it('returns the first type from a comma-separated string', () => {
+    expect(primaryType('string,integer')).toBe('string')
+  })
+
+  it('returns the single type', () => {
+    expect(primaryType('object')).toBe('object')
+  })
+
+  it('returns "any" for undefined', () => {
+    expect(primaryType(undefined)).toBe('any')
+  })
+
+  it('returns "any" for empty string', () => {
+    expect(primaryType('')).toBe('any')
+  })
+})
+
+describe('displayType', () => {
+  it('shows array<itemsType> for arrays', () => {
+    expect(displayType(prop({ type: 'array', itemsType: 'string' }))).toBe('array<string>')
+  })
+
+  it('shows type (format) when format is set', () => {
+    expect(displayType(prop({ type: 'string', format: 'email' }))).toBe('string (email)')
+  })
+
+  it('shows plain type when no format', () => {
+    expect(displayType(prop({ type: 'integer' }))).toBe('integer')
+  })
+})
+
+describe('formatInputType', () => {
+  it.each([
+    ['email', 'email'],
+    ['uri', 'url'],
+    ['uri-reference', 'url'],
+    ['date', 'date'],
+    ['time', 'time'],
+    ['date-time', 'datetime-local'],
+    [undefined, 'text'],
+    ['unknown', 'text'],
+  ])('maps format %s to input type %s', (format, expected) => {
+    expect(formatInputType(format)).toBe(expected)
+  })
+})
+
+describe('formatDefault', () => {
+  it('returns URI for uri format', () => {
+    expect(formatDefault('uri')).toBe('https://example.com')
+  })
+
+  it('returns "string" for unknown format', () => {
+    expect(formatDefault('unknown')).toBe('string')
+  })
+
+  it('returns "string" for no format', () => {
+    expect(formatDefault(undefined)).toBe('string')
+  })
+})
+
+describe('initialValue', () => {
+  it('uses examples[0] first', () => {
+    expect(initialValue(prop({ examples: ['hello', 'world'], type: 'string' }))).toBe('hello')
+  })
+
+  it('uses default second', () => {
+    expect(initialValue(prop({ default: 'fallback', type: 'string' }))).toBe('fallback')
+  })
+
+  it('uses first enum value third', () => {
+    expect(initialValue(prop({ enum: ['a', 'b'], type: 'string' }))).toBe('a')
+  })
+
+  it('uses type-based fallback for integer', () => {
+    expect(initialValue(prop({ type: 'integer' }))).toBe('0')
+  })
+
+  it('uses type-based fallback for boolean', () => {
+    expect(initialValue(prop({ type: 'boolean' }))).toBe('false')
+  })
+
+  it('uses format-aware default for string', () => {
+    expect(initialValue(prop({ type: 'string', format: 'email' }))).toBe('user@example.com')
+  })
+})
+
+describe('arrayItemInputType', () => {
+  it.each([
+    ['integer', 'number'],
+    ['number', 'number'],
+    ['boolean', 'checkbox'],
+    ['string', 'text'],
+    [undefined, 'text'],
+  ])('maps itemsType %s to input type %s', (itemsType, expected) => {
+    expect(arrayItemInputType(itemsType)).toBe(expected)
+  })
+})
+
+describe('arrayDefaultValue', () => {
+  it.each([
+    ['integer', '0'],
+    ['number', '0.0'],
+    ['boolean', 'false'],
+    ['string', ''],
+    [undefined, ''],
+  ])('returns %s default for itemsType %s', (itemsType, expected) => {
+    expect(arrayDefaultValue(itemsType)).toBe(expected)
+  })
+})
+
+describe('parseArrayItem', () => {
+  it('parses integer', () => {
+    expect(parseArrayItem('42', 'integer')).toBe(42)
+  })
+
+  it('parses number', () => {
+    expect(parseArrayItem('3.14', 'number')).toBeCloseTo(3.14)
+  })
+
+  it('parses boolean true', () => {
+    expect(parseArrayItem('true', 'boolean')).toBe(true)
+  })
+
+  it('parses boolean false', () => {
+    expect(parseArrayItem('false', 'boolean')).toBe(false)
+  })
+
+  it('returns string for unknown itemsType', () => {
+    expect(parseArrayItem('hello', 'string')).toBe('hello')
+  })
+
+  it('returns string for undefined itemsType', () => {
+    expect(parseArrayItem('hello', undefined)).toBe('hello')
+  })
+})
+
+describe('isObjectProperty', () => {
+  it('returns true for type=object', () => {
+    expect(isObjectProperty(prop({ type: 'object' }))).toBe(true)
+  })
+
+  it('returns true for no type but has ref', () => {
+    expect(isObjectProperty(prop({ type: undefined, ref: '#/definitions/X' }))).toBe(true)
+  })
+
+  it('returns false for string', () => {
+    expect(isObjectProperty(prop({ type: 'string' }))).toBe(false)
+  })
+})
+
+describe('hasConstraints', () => {
+  it('returns true for pattern', () => {
+    expect(hasConstraints(prop({ pattern: '[0-9]+' }))).toBe(true)
+  })
+
+  it('returns true for minimum', () => {
+    expect(hasConstraints(prop({ minimum: 0 }))).toBe(true)
+  })
+
+  it('returns true for examples', () => {
+    expect(hasConstraints(prop({ examples: ['a'] }))).toBe(true)
+  })
+
+  it('returns false for no constraints', () => {
+    expect(hasConstraints(prop({ type: 'string' }))).toBe(false)
+  })
+})
+
+describe('parsePropertyValue', () => {
+  it('returns enum raw value', () => {
+    expect(parsePropertyValue('a', prop({ enum: ['a', 'b'], type: 'string' }))).toBe('a')
+  })
+
+  it('parses boolean', () => {
+    expect(parsePropertyValue('true', prop({ type: 'boolean' }))).toBe(true)
+    expect(parsePropertyValue('false', prop({ type: 'boolean' }))).toBe(false)
+  })
+
+  it('parses integer', () => {
+    expect(parsePropertyValue('42', prop({ type: 'integer' }))).toBe(42)
+  })
+
+  it('parses integer as 0 for NaN', () => {
+    expect(parsePropertyValue('abc', prop({ type: 'integer' }))).toBe(0)
+  })
+
+  it('parses number', () => {
+    expect(parsePropertyValue('3.14', prop({ type: 'number' }))).toBeCloseTo(3.14)
+  })
+
+  it('returns empty object for object without ref', () => {
+    expect(parsePropertyValue('', prop({ type: 'object' }))).toEqual({})
+  })
+
+  it('returns raw string for string type', () => {
+    expect(parsePropertyValue('hello', prop({ type: 'string' }))).toBe('hello')
+  })
+})

data/frontend/src/app.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

data/frontend/src/components/AppHeader.vue

@@ -0,0 +1,152 @@
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="btn btn-ghost sidebar-toggle" @click="uiStore.toggleSidebar" title="Toggle sidebar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+      <button class="btn btn-ghost home-btn" @click="goHome" title="Overview">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <path d="M3 8.5L9 3.5L15 8.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M4 8.5V14.5C4 14.5 4 15.5 5 15.5H13C13 15.5 14 15.5 14 14.5V8.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <span v-if="schemaStore.metadata" class="header-breadcrumb">
+        <span class="breadcrumb-item">{{ schemaStore.metadata.title || 'JSON Schema Docs' }}</span>
+      </span>
+    </div>
+
+    <div class="header-center">
+      <button class="search-trigger" @click="uiStore.openSearch">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5"/>
+          <path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+        <span class="search-placeholder">Search schemas, properties, definitions...</span>
+        <kbd class="search-kbd">/</kbd>
+      </button>
+    </div>
+
+    <div class="header-right">
+      <button class="btn btn-ghost theme-btn" @click="uiStore.toggleTheme" :title="uiStore.isDark ? 'Light mode' : 'Dark mode'">
+        <svg v-if="uiStore.isDark" width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <path d="M9 3V2M9 16v-1M3 9H2M16 9h-1M4.22 4.22l-.7-.7M14.48 14.48l-.7-.7M4.22 13.78l-.7.7M14.48 3.52l-.7.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+          <circle cx="9" cy="9" r="3.5" stroke="currentColor" stroke-width="1.3"/>
+        </svg>
+        <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <circle cx="9" cy="9" r="4" stroke="currentColor" stroke-width="1.4"/>
+          <path d="M9 2v1.5M9 14.5V16M2 9h1.5M14.5 9H16M4.22 4.22l1.06 1.06M12.72 12.72l1.06 1.06M4.22 13.78l1.06-1.06M12.72 5.28l1.06-1.06" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useSchemaStore } from '../stores/schemaStore'
+import { useUiStore } from '../stores/uiStore'
+
+const schemaStore = useSchemaStore()
+const uiStore = useUiStore()
+
+function goHome() {
+  schemaStore.selectSchema(null)
+  uiStore.closeDetailPanel()
+}
+</script>
+
+<style scoped>
+.header {
+  height: 56px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border-light);
+  gap: var(--space-4);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.sidebar-toggle {
+  padding: var(--space-2);
+}
+
+.header-breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.breadcrumb-item {
+  color: var(--text-secondary);
+}
+
+.home-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--text-secondary);
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.search-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.search-trigger:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-medium);
+}
+
+.search-placeholder {
+  flex: 1;
+  text-align: left;
+}
+
+.search-kbd {
+  padding: 2px 6px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.theme-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+</style>