feat(wikibase-schema-editor): build terms editor component #84
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change introduces several new Vue components and composables for multilingual term editing and drag-and-drop schema mapping in the Wikibase Schema Editor. It modularizes the column palette, adds toggles for sample data, implements language-aware drop zones, and provides comprehensive composable logic and tests for drag-and-drop and compatibility validation. Type declarations and ESLint config are updated accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ColumnPalette
participant ColumnItem
participant SchemaDropZone
participant LanguageDropZone
participant TermsEditor
participant useDragDropHandlers
participant useSchemaDropZone
participant useLanguageDropZone
participant Store
User->>ColumnPalette: Toggle "Show Samples"
ColumnPalette->>ColumnItem: Pass showSampleData prop
User->>ColumnItem: Drag column
ColumnItem->>SchemaDropZone: Initiate drag event
SchemaDropZone->>useSchemaDropZone: Handle drag/drop logic
useSchemaDropZone->>Store: Update schema mappings
User->>TermsEditor: Interact with Labels/Descriptions/Aliases
TermsEditor->>LanguageDropZone: Render per term type
LanguageDropZone->>useLanguageDropZone: Manage language mappings
useLanguageDropZone->>Store: Add/remove language mapping
Estimated code review effort4 (~90 minutes) Possibly related PRs
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (10)
frontend/src/components/MainContent.vue (1)
1-2: Remove the empty<script>block unless future logic is plannedWith no imports, props, or composable logic, the empty script adds noise and a tiny bit of bundle overhead.
If the component truly needs no script, you can safely delete these two lines.-<script setup lang="ts"></script> -frontend/src/composables/useTermsEditor.ts (2)
8-8: Consider making accepted languages configurable.The hardcoded list of accepted languages limits flexibility for different Wikibase instances that might support different language sets. Consider making this configurable through environment variables or a configuration file to support different deployment scenarios.
- const ACCEPTED_LANGUAGES = ['en', 'de', 'it', 'fr', 'es', 'pt'] + const ACCEPTED_LANGUAGES = import.meta.env.VITE_ACCEPTED_LANGUAGES?.split(',') || ['en', 'de', 'it', 'fr', 'es', 'pt']
44-50: Clarify the addLanguage method's purpose.The method name
addLanguagesuggests it adds a language, but it only validates and resets the input. The comment indicates the actual addition happens elsewhere, which could be confusing for developers using this composable.Consider renaming to better reflect its purpose:
- const addLanguage = (): void => { + const validateAndResetLanguageInput = (): void => { if (isValidLanguageCode(newLanguageCode.value)) { - // Language will be added when a column is dropped + // Reset input after validation - actual language addition happens in drop zones showLanguageInput.value = false newLanguageCode.value = '' } }Or add a return value to indicate validation success:
- const addLanguage = (): void => { + const addLanguage = (): boolean => { if (isValidLanguageCode(newLanguageCode.value)) { showLanguageInput.value = false newLanguageCode.value = '' + return true } + return false }frontend/src/composables/useDataTypeCompatibility.ts (1)
12-12: Consider using a more comprehensive text type list.The current text-compatible types list might miss some common SQL text types. Consider including additional types like
NVARCHAR,LONGTEXT,MEDIUMTEXT,TINYTEXT, andCLOBfor broader database compatibility.- const textCompatibleTypes = ref(['VARCHAR', 'TEXT', 'STRING', 'CHAR']) + const textCompatibleTypes = ref(['VARCHAR', 'NVARCHAR', 'TEXT', 'LONGTEXT', 'MEDIUMTEXT', 'TINYTEXT', 'STRING', 'CHAR', 'CLOB'])frontend/src/components/TermsEditor.vue (1)
1-1: Consider adding component-level documentation.While the component structure is clear, adding JSDoc comments above the script tag would improve maintainability and help other developers understand the component's purpose and usage.
+/** + * TermsEditor - Component for editing multilingual terms (labels, descriptions, aliases) + * Organizes three LanguageDropZone components for different term types + */ <script setup lang="ts"></script>frontend/src/components/WikibaseSchemaEditor.vue (1)
314-347: Consider extracting statement item to separate component.The statement display logic could be extracted into a reusable
StatementItemcomponent to improve maintainability and follow the component composition pattern used elsewhere in the codebase.Create a new component
StatementItem.vue:<script setup lang="ts"> interface StatementItemProps { statement: Statement } defineProps<StatementItemProps>() defineEmits<{ edit: [] delete: [] }>() </script> <template> <div class="flex items-center justify-between p-3 bg-surface-50 rounded-lg border mb-2"> <div> <span class="text-blue-700 font-medium mr-2"> {{ statement.property.id }} ({{ statement.property.label || 'Unknown property' }}) </span> <span class="text-gray-800"> {{ typeof statement.value.source === 'string' ? statement.value.source : statement.value.source.columnName || 'No mapping' }} </span> </div> <div class="flex gap-2"> <Button icon="pi pi-pencil" rounded text size="small" aria-label="Edit statement" @click="$emit('edit')" /> <Button icon="pi pi-trash" rounded text severity="danger" size="small" aria-label="Delete statement" @click="$emit('delete')" /> </div> </div> </template>Then use it in the template:
- <div - v-for="statement in schemaStore.statements" - :key="statement.id" - class="flex items-center justify-between p-3 bg-surface-50 rounded-lg border mb-2" - > - <!-- statement content --> - </div> + <StatementItem + v-for="statement in schemaStore.statements" + :key="statement.id" + :statement="statement" + @edit="handleEditStatement(statement)" + @delete="handleDeleteStatement(statement)" + />frontend/src/composables/useSchemaDropZone.ts (2)
10-13: Consider adding TypeScript interface for props.Based on the retrieved learnings, props should use explicit TypeScript interfaces. Consider defining a props interface for better type safety.
+interface UseSchemaDropZoneProps { + termType: 'label' | 'description' | 'alias' + languageCode: string +} -export const useSchemaDropZone = ( - termType: 'label' | 'description' | 'alias', - languageCode: string, -) => { +export const useSchemaDropZone = (props: UseSchemaDropZoneProps) => {
108-122: Consider extracting duplicate check logic to avoid repetition.The duplicate checking logic is repeated from the computed property. Consider extracting it to a helper function for better maintainability.
+const isDuplicateAlias = (columnMapping: ColumnMapping): boolean => { + const existingAliases = schemaStore.aliases[languageCode] || [] + return existingAliases.some( + (alias) => + alias.columnName === columnMapping.columnName && + alias.dataType === columnMapping.dataType, + ) +} // Use in computed: -const isDuplicate = existingAliases.some(...) +const isDuplicate = isDuplicateAlias({ columnName: draggedColumn.value!.name, dataType: draggedColumn.value!.dataType }) // Use in addColumnMapping: -const isDuplicate = existingAliases.some(...) +const isDuplicate = isDuplicateAlias(columnMapping)frontend/src/components/SchemaDropZone.vue (2)
3-25: Consider using explicit TypeScript interface for props.Based on the retrieved learnings about using explicit TypeScript interfaces for props, consider defining a props interface:
+interface SchemaDropZoneProps { + termType: 'label' | 'description' | 'alias' + icon?: string + placeholder: string + testId: string + languageCode?: string +} -const props = defineProps({ +const props = defineProps<SchemaDropZoneProps>() + +// With defaults: +const propsWithDefaults = withDefaults(defineProps<SchemaDropZoneProps>(), { + icon: 'pi pi-tag', + languageCode: 'en', +})
27-28: Remove unnecessary type assertion.The type assertion
as 'label' | 'description' | 'alias'is unnecessary since the prop already has validation. With proper TypeScript interfaces, this would be automatically typed.-const { handleDragOver, handleDragEnter, handleDragLeave, handleDrop, dropZoneClasses } = - useSchemaDropZone(props.termType as 'label' | 'description' | 'alias', props.languageCode) +const { handleDragOver, handleDragEnter, handleDragLeave, handleDrop, dropZoneClasses } = + useSchemaDropZone(props.termType, props.languageCode)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
.kiro/specs/wikibase-schema-editor/design.md(5 hunks).kiro/specs/wikibase-schema-editor/requirements.md(1 hunks).kiro/specs/wikibase-schema-editor/tasks.md(2 hunks)frontend/.eslintrc-auto-import.json(4 hunks)frontend/auto-imports.d.ts(8 hunks)frontend/components.d.ts(1 hunks)frontend/src/components/ColumnPalette.vue(4 hunks)frontend/src/components/LanguageDropZone.vue(1 hunks)frontend/src/components/MainContent.vue(1 hunks)frontend/src/components/SchemaDropZone.vue(1 hunks)frontend/src/components/TermsEditor.vue(1 hunks)frontend/src/components/WikibaseSchemaEditor.vue(2 hunks)frontend/src/components/__tests__/ColumnPalette.test.ts(0 hunks)frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts(1 hunks)frontend/src/composables/__tests__/useDragDropContext.test.ts(2 hunks)frontend/src/composables/__tests__/useDragDropHandlers.test.ts(1 hunks)frontend/src/composables/__tests__/useLanguageDropZone.test.ts(1 hunks)frontend/src/composables/__tests__/useSchemaDropZone.test.ts(1 hunks)frontend/src/composables/useDataTypeCompatibility.ts(3 hunks)frontend/src/composables/useDragDropContext.ts(11 hunks)frontend/src/composables/useDragDropHandlers.ts(1 hunks)frontend/src/composables/useLanguageDropZone.ts(1 hunks)frontend/src/composables/useSchemaDropZone.ts(1 hunks)frontend/src/composables/useTermsEditor.ts(1 hunks)frontend/src/types/drag-drop.ts(1 hunks)frontend/src/views/ProjectView.vue(1 hunks)
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript or JavaScript files
Do not use dotenv; Bun automatically loads .env files
UseBun.serve()for HTTP servers and WebSockets instead ofexpress
Usebun:sqlitefor SQLite instead ofbetter-sqlite3
UseBun.redisfor Redis instead ofioredis
UseBun.sqlfor Postgres instead ofpgorpostgres.js
Use built-inWebSocketinstead ofws
PreferBun.fileovernode:fs's readFile/writeFile
UseBun.$(e.g.,Bun.$ls``) instead of execa for running shell commands
Files:
frontend/src/types/drag-drop.tsfrontend/src/composables/useTermsEditor.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/useSchemaDropZone.tsfrontend/src/composables/useDataTypeCompatibility.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/useLanguageDropZone.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/useDragDropContext.tsfrontend/src/composables/useDragDropHandlers.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor building HTML, TypeScript, or CSS files
Files:
frontend/src/types/drag-drop.tsfrontend/src/composables/useTermsEditor.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/useSchemaDropZone.tsfrontend/src/composables/useDataTypeCompatibility.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/useLanguageDropZone.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/useDragDropContext.tsfrontend/src/composables/useDragDropHandlers.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun testinstead ofjestfor running tests
Files:
frontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
frontend/src/components/MainContent.vue (9)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Follow the order: script, template, style in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : No inline style attributes in templates
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Do NOT use custom CSS in <style> blocks except with explicit approval
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
frontend/src/types/drag-drop.ts (10)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer reactivity over computed unless necessary
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
frontend/.eslintrc-auto-import.json (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{tsx,jsx,js} : Import .css files directly in .tsx, .jsx, or .js files and Bun will handle them
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{html,tsx,jsx,js,css} : Use HTML imports with Bun.serve() instead of vite for frontend development
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.html : HTML files can import .tsx, .jsx, or .js files directly and Bun's bundler will transpile & bundle automatically
frontend/src/views/ProjectView.vue (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Tailwind CSS utility classes for all styling; Tailwind is mandatory for all styling
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : No inline style attributes in templates
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Ensure responsive design using Tailwind breakpoints
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Do NOT use custom CSS in <style> blocks except with explicit approval
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useTermsEditor.ts (9)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Handle errors and loading states reactively when making API calls
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (8)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use bun test instead of jest for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
frontend/src/components/TermsEditor.vue (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useSchemaDropZone.ts (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
frontend/src/components/ColumnPalette.vue (2)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer reactivity over computed unless necessary
frontend/src/composables/useDataTypeCompatibility.ts (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
frontend/src/components/LanguageDropZone.vue (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
frontend/components.d.ts (14)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
frontend/src/components/SchemaDropZone.vue (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
frontend/src/composables/__tests__/useDragDropHandlers.test.ts (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
frontend/src/composables/useLanguageDropZone.ts (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
.kiro/specs/wikibase-schema-editor/design.md (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
frontend/src/composables/__tests__/useSchemaDropZone.test.ts (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
frontend/auto-imports.d.ts (15)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useDragDropContext.ts (10)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
frontend/src/composables/useDragDropHandlers.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use bun test instead of jest for running tests
🧬 Code Graph Analysis (4)
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (2)
frontend/src/composables/useLanguageDropZone.ts (1)
useLanguageDropZone(9-94)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)
frontend/src/composables/useSchemaDropZone.ts (4)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)frontend/src/composables/useDragDropHandlers.ts (1)
useDragDropHandlers(9-108)frontend/auto-imports.d.ts (2)
WikibaseDataType(368-368)ColumnInfo(368-368)
frontend/src/composables/__tests__/useSchemaDropZone.test.ts (3)
frontend/src/composables/useSchemaDropZone.ts (1)
useSchemaDropZone(10-138)frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)
frontend/src/composables/useDragDropHandlers.ts (3)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(8-44)frontend/auto-imports.d.ts (2)
WikibaseDataType(368-368)ColumnInfo(368-368)
💤 Files with no reviewable changes (1)
- frontend/src/components/tests/ColumnPalette.test.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript or JavaScript files
Do not use dotenv; Bun automatically loads .env files
UseBun.serve()for HTTP servers and WebSockets instead ofexpress
Usebun:sqlitefor SQLite instead ofbetter-sqlite3
UseBun.redisfor Redis instead ofioredis
UseBun.sqlfor Postgres instead ofpgorpostgres.js
Use built-inWebSocketinstead ofws
PreferBun.fileovernode:fs's readFile/writeFile
UseBun.$(e.g.,Bun.$ls``) instead of execa for running shell commands
Files:
frontend/src/types/drag-drop.tsfrontend/src/composables/useTermsEditor.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/useSchemaDropZone.tsfrontend/src/composables/useDataTypeCompatibility.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/useLanguageDropZone.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/useDragDropContext.tsfrontend/src/composables/useDragDropHandlers.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor building HTML, TypeScript, or CSS files
Files:
frontend/src/types/drag-drop.tsfrontend/src/composables/useTermsEditor.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/useSchemaDropZone.tsfrontend/src/composables/useDataTypeCompatibility.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/useLanguageDropZone.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/useDragDropContext.tsfrontend/src/composables/useDragDropHandlers.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun testinstead ofjestfor running tests
Files:
frontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/composables/__tests__/useDragDropHandlers.test.tsfrontend/src/composables/__tests__/useSchemaDropZone.test.tsfrontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useDragDropContext.test.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
frontend/src/components/MainContent.vue (9)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Follow the order: script, template, style in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : No inline style attributes in templates
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Do NOT use custom CSS in <style> blocks except with explicit approval
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
frontend/src/types/drag-drop.ts (10)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer reactivity over computed unless necessary
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
frontend/.eslintrc-auto-import.json (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{tsx,jsx,js} : Import .css files directly in .tsx, .jsx, or .js files and Bun will handle them
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{html,tsx,jsx,js,css} : Use HTML imports with Bun.serve() instead of vite for frontend development
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.html : HTML files can import .tsx, .jsx, or .js files directly and Bun's bundler will transpile & bundle automatically
frontend/src/views/ProjectView.vue (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Tailwind CSS utility classes for all styling; Tailwind is mandatory for all styling
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : No inline style attributes in templates
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Ensure responsive design using Tailwind breakpoints
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Do NOT use custom CSS in <style> blocks except with explicit approval
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useTermsEditor.ts (9)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Handle errors and loading states reactively when making API calls
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (8)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use bun test instead of jest for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
frontend/src/components/TermsEditor.vue (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useSchemaDropZone.ts (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
frontend/src/components/ColumnPalette.vue (2)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer reactivity over computed unless necessary
frontend/src/composables/useDataTypeCompatibility.ts (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
frontend/src/components/LanguageDropZone.vue (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
frontend/components.d.ts (14)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
frontend/src/components/SchemaDropZone.vue (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
frontend/src/composables/__tests__/useDragDropHandlers.test.ts (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
frontend/src/composables/useLanguageDropZone.ts (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
.kiro/specs/wikibase-schema-editor/design.md (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
frontend/src/composables/__tests__/useSchemaDropZone.test.ts (5)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
frontend/auto-imports.d.ts (15)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useDragDropContext.ts (10)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
frontend/src/composables/useDragDropHandlers.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use bun test instead of jest for running tests
🧬 Code Graph Analysis (4)
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (2)
frontend/src/composables/useLanguageDropZone.ts (1)
useLanguageDropZone(9-94)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)
frontend/src/composables/useSchemaDropZone.ts (4)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)frontend/src/composables/useDragDropHandlers.ts (1)
useDragDropHandlers(9-108)frontend/auto-imports.d.ts (2)
WikibaseDataType(368-368)ColumnInfo(368-368)
frontend/src/composables/__tests__/useSchemaDropZone.test.ts (3)
frontend/src/composables/useSchemaDropZone.ts (1)
useSchemaDropZone(10-138)frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)
frontend/src/composables/useDragDropHandlers.ts (3)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(8-44)frontend/auto-imports.d.ts (2)
WikibaseDataType(368-368)ColumnInfo(368-368)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (60)
frontend/src/components/MainContent.vue (1)
3-9: Layout markup looks clean and follows the project’s conventions– Order is
script → template,
– Uses Tailwind utility classes instead of inline styles,
– No custom<style>block.
Nice job keeping it minimal.frontend/src/types/drag-drop.ts (1)
1-1: Removed unusedComputedRefimport – clean-up looks good
ComputedRefwas not referenced anywhere in this file, so shrinking the import down to justRefremoves dead weight and avoids misleading future contributors.frontend/.eslintrc-auto-import.json (1)
240-350: New composable globals registered correctly
useDragDropHandlers,useLanguageDropZone,useSchemaDropZone, anduseTermsEditorare now globally recognised – registration order is alphabetically consistent and JSON syntax remains valid..kiro/specs/wikibase-schema-editor/tasks.md (3)
40-47: Task list updated with sample-data toggle tests – good coverageAdding explicit TDD items (2.5 & 2.6) ensures the new UI behaviour is exercised.
52-52: Requirement reference updated – 👍Linking the new indicator work to requirement 2.7 keeps traceability intact.
66-70: Marks TermsEditor task as complete – checklist stays in syncTask status now reflects the implemented component and tests.
.kiro/specs/wikibase-schema-editor/requirements.md (1)
31-33: Clear acceptance criteria for sample-data visibilityThe three new criteria precisely describe default behaviour, user interaction, and bound on displayed samples. Nice spec expansion.
frontend/src/composables/useTermsEditor.ts (1)
1-72: Well-structured composable following Vue 3 patterns.The composable correctly follows Vue 3 Composition API patterns with proper reactive state management, clear function separation, and a clean return interface. The code structure is maintainable and reusable.
frontend/src/composables/useDataTypeCompatibility.ts (2)
30-36: Excellent implementation of text column validation.The function properly handles null checks, uses case-insensitive comparison, and integrates well with the reactive text types. The direct approach without unnecessary computed properties is efficient and clean.
41-42: Good use of readonly for exported reactive state.Properly exports the text types as readonly to prevent external mutation while maintaining reactivity. This follows Vue 3 best practices for composable design.
frontend/src/components/TermsEditor.vue (2)
8-13: Consistent and well-structured LanguageDropZone usage.Each LanguageDropZone component is configured with appropriate props for its term type, including meaningful icons, descriptive placeholders, and proper test-ids for testing. The consistency across all three sections is excellent.
4-37: Excellent component structure and styling.The component follows Vue 3 best practices with proper separation of sections, consistent styling using utility classes, and clear visual hierarchy. The use of border, padding, and spacing creates good UX and visual organization.
frontend/src/components/WikibaseSchemaEditor.vue (2)
304-305: Excellent refactoring with dedicated TermsEditor component.The replacement of inline terms editing logic with the dedicated
<TermsEditor />component significantly improves code organization and maintainability. This follows the composable and component reusability principles from the learnings.
308-361: Improved statements section with better UX.The enhanced styling for the statements section provides better visual organization with card-like styling, improved placeholder content with icons and descriptive text, and consistent spacing. The changes create a more polished user interface.
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (5)
1-1: Correct usage of Bun test framework.The test file properly uses
bun:testimports instead of Jest, following the coding guidelines for this project. This ensures consistency with the project's testing infrastructure.
7-9: Proper Pinia setup for composable testing.The beforeEach setup correctly initializes Pinia for each test, ensuring clean state isolation between tests. This is essential for testing composables that depend on Pinia stores.
11-80: Comprehensive coverage of label term type functionality.The test suite thoroughly covers all aspects of label functionality including initialization, reactive behavior, display format transformation, dynamic language handling, and mapping removal. The test structure is clear and assertions are appropriate.
116-160: Excellent coverage of alias-specific behavior.The tests properly verify the unique aspects of alias handling, including multiple mappings per language, individual mapping removal, and cleanup of empty arrays. This is crucial since aliases behave differently from labels and descriptions.
162-206: Thorough reactivity testing.The reactivity tests ensure that computed properties update correctly when the underlying store changes. This is essential for verifying that the composable maintains proper reactive connections with the Pinia store.
frontend/src/composables/__tests__/useDragDropContext.test.ts (3)
374-401: LGTM! Well-structured test for valid drag over scenario.The test properly sets up the drag state, mocks the event object, and verifies both preventDefault and dropEffect behavior. Good test coverage for the happy path.
403-430: LGTM! Good coverage for invalid column drag over.The test correctly validates the behavior when an incompatible column type (INTEGER vs string) is dragged over the drop zone, ensuring the dropEffect is set to 'none'.
432-448: LGTM! Comprehensive edge case coverage.The test handles the scenario where no column is being dragged, which is important for preventing runtime errors and ensuring consistent UI feedback.
frontend/src/composables/useSchemaDropZone.ts (2)
42-54: LGTM! Well-implemented duplicate prevention logic.The alias duplicate checking logic is correctly implemented, checking both column name and data type for existing aliases. The validation is consistent with the later implementation in
addColumnMapping.
120-121: Good practice: Silent handling of duplicate aliases.The silent handling of duplicate aliases is appropriate behavior - it prevents user frustration while maintaining data integrity. The comment clearly explains the intentional behavior.
frontend/src/components/ColumnPalette.vue (5)
9-10: LGTM! Good default state for sample data visibility.The
showSampleDataref with defaultfalsevalue aligns with the user experience of hiding sample data by default, as mentioned in the requirements.
12-14: Good renaming for clarity.Renaming
columnstodataColumnsimproves code readability and makes the purpose more explicit.
38-41: LGTM! Improved sample value display.The update to show 3 sample values instead of 2, with corresponding adjustment to the
hasMorecondition, provides better user experience while maintaining clean display.
47-65: Well-structured header with accessibility considerations.The header layout with toggle switch includes proper labels, IDs, and test IDs for accessibility and testing. Good use of PrimeVue's ToggleSwitch component.
125-132: Proper conditional rendering with enhanced test attributes.The conditional rendering based on
showSampleDatastate is correctly implemented, and the addition ofdata-testidattribute improves testability.frontend/src/components/SchemaDropZone.vue (1)
31-46: LGTM! Clean and accessible template structure.The template structure is well-organized with proper event bindings, dynamic classes, and accessibility attributes. Good use of the composable's reactive properties.
frontend/components.d.ts (1)
23-42: LGTM! Appropriate component type declarations.The additions of
LanguageDropZone,SchemaDropZone,TermsEditor,Select, andToggleSwitchalign with the new drag-and-drop functionality and UI enhancements. Since this is an auto-generated file, the declarations correctly reflect the components being used in the application..kiro/specs/wikibase-schema-editor/design.md (4)
31-31: LGTM! Architecture enhancement aligns with modular design principles.The addition of
ColumnItemas a child component ofColumnPaletteproperly separates concerns and improves maintainability by encapsulating individual column rendering logic.
54-62: Excellent design decision to add sample data visibility controls.The toggle functionality for sample data provides a clean user experience and aligns with the updated requirements. The responsibility assignment to
ColumnPalettefor state management andColumnItemfor conditional rendering follows good component design patterns.
109-116: Well-structured component responsibility definition.The
ColumnItemcomponent responsibilities are clearly defined and properly scoped. The drag event handling delegation creates a clean separation between UI rendering and interaction logic.
544-550: Sample Data Display Logic VerifiedThe implementation in frontend/src/components/ColumnPalette.vue matches the design spec by displaying up to three sample values and rendering an ellipsis when there are more:
- In formatSampleValues (function around line 35): uses
sampleValues.slice(0, 3).join(', ')and setshasMore = sampleValues.length > 3- In the template (around lines 126–131): shows the formatted values and
...whensampleValues.length > 3No further changes needed.
frontend/src/components/LanguageDropZone.vue (3)
1-18: Excellent TypeScript and Vue 3 Composition API usage.The component properly follows the established patterns from learnings:
- Uses
<script setup lang="ts">- Defines explicit TypeScript interface for props
- Leverages auto-imported composables without explicit imports
- Maintains type safety throughout
23-79: Well-structured conditional rendering for different term types.The template effectively handles the complexity of displaying different mapping types (arrays for aliases vs. single mappings for labels/descriptions) with clear conditional logic and proper data binding.
The use of
data-testidattributes throughout ensures good testability.
81-107: Clean horizontal layout implementation with proper accessibility.The language selector and drop zone layout provides a good user experience with:
- Proper semantic labels
- Consistent spacing and styling
- Accessible form elements
- Integration with the reusable
SchemaDropZonecomponentfrontend/src/composables/__tests__/useSchemaDropZone.test.ts (6)
1-11: Proper test framework usage and setup.Correctly uses
bun:testas specified in coding guidelines and properly initializes Pinia for state management testing. The imports are clean and focused.
13-25: Comprehensive initialization testing.The initialization test properly verifies the default state of all reactive properties and computed CSS classes, ensuring the composable starts in the expected state.
27-116: Thorough drag state reactivity testing.The test suite effectively covers:
- Valid and invalid column drag scenarios
- Duplicate alias detection and validation
- CSS class updates based on drag state
- Proper integration with the drag-drop store
The test data setup is realistic and covers different data types appropriately.
118-293: Comprehensive drag event handler testing.The event handler tests cover all essential scenarios:
- Valid/invalid column handling
- Proper event prevention and drop effect setting
- Edge cases like missing dragged columns
- Integration with mock drag events
The mock event setup is appropriate and the assertions verify correct behavior.
295-394: Excellent term-specific behavior testing.The tests properly verify:
- Correct mapping addition for each term type (label, description, alias)
- Duplicate prevention logic for aliases
- Cross-language mapping support
- Integration with the schema store
This ensures the composable behaves correctly for all supported term types.
396-425: Proper hover state management testing.The hover state tests verify CSS class updates and combined drag/hover states, ensuring the UI provides appropriate visual feedback during interactions.
frontend/src/composables/useLanguageDropZone.ts (4)
1-15: Proper composable structure and imports.The composable follows established patterns with clean imports and proper integration with the schema store and other composables. The initialization of
selectedLanguageto 'en' provides a sensible default.
17-33: Efficient computed property for existing mappings check.The computed property correctly checks for existing mappings across all term types using a generic approach that works with the different store property structures (single mappings vs arrays).
35-71: Well-structured mapping display transformation.The computed property effectively transforms the store data into a display-friendly format that handles both single mappings (labels/descriptions) and array mappings (aliases) with proper type annotations and structure.
84-94: Clean composable return structure.The return statement properly exposes all necessary reactive state and actions with clear organization and appropriate access levels.
frontend/src/composables/useDragDropHandlers.ts (5)
1-11: Proper composable setup and integration.The composable correctly imports and integrates with the drag-drop store and data type compatibility composable, providing a solid foundation for shared drag-drop logic.
13-31: Excellent drag over handler with proper validation.The
createDragOverHandlerproperly:
- Prevents default browser behavior
- Checks for dragged column existence
- Uses data type compatibility validation
- Sets appropriate cursor feedback ('copy' vs 'none')
This provides consistent user experience across all drop zones.
33-51: Clean and flexible enter/leave handler factories.The drag enter and leave handlers are properly structured with optional callbacks, allowing components to customize behavior while maintaining consistent event handling patterns.
53-87: Robust drop handler with comprehensive error handling.The drop handler implementation is excellent:
- Proper event prevention
- JSON parsing with try-catch error handling
- Data type validation before processing
- Clear error messages for different failure scenarios
- Separation of valid/invalid drop callbacks
89-108: Useful validation utility function.The
validateColumnCompatibilityfunction provides a clean, reusable way to check column compatibility with proper null checking and integration with the data type compatibility logic.frontend/src/composables/__tests__/useDragDropHandlers.test.ts (1)
1-306: Excellent test coverage for the new drag-drop handlers composable.The test suite demonstrates comprehensive coverage of all exported functions with proper edge case handling, mock usage, and Pinia store integration. The tests are well-structured and follow bun:test conventions as required by the coding guidelines.
frontend/auto-imports.d.ts (1)
186-186: Auto-import declarations properly configured for new composables.The global type declarations for the four new composables (
useDragDropHandlers,useLanguageDropZone,useSchemaDropZone,useTermsEditor) are correctly added to both the global scope and Vue's ComponentCustomProperties interface, maintaining consistency with existing patterns.Also applies to: 219-219, 269-269, 290-290, 554-554, 587-587, 637-637, 658-658
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (1)
2-302: Comprehensive test expansion with excellent coverage.The test suite expansion significantly improves coverage by adding thorough tests for the new
isValidTextColumnfunction and the reactivetextCompatibleTypesarray. The tests properly validate SQL data type recognition, case insensitivity, null handling, and edge cases. The enhanced coverage for existing functions (isDataTypeCompatible,getCompatibleWikibaseTypes) adds valuable test scenarios.frontend/src/composables/useDragDropContext.ts (4)
4-4: Good integration with the new drag-drop handlers composable.The integration of
useDragDropHandlerscentralizes drag-drop event logic and improves code reusability by using the sharedcreateDragOverHandlerfunction.Also applies to: 56-56
30-34: Simplified function is more transparent about current capabilities.The simplified
extractPropertyIdFromPathfunction honestly returnsundefinedinstead of attempting unimplemented logic, which is clearer for maintenance.
41-41: Variable renaming improves code clarity.The consistent renaming from
columntocolumnInfothroughout the composable improves readability and aligns with the actual type being used.Also applies to: 46-46, 50-50, 65-68, 82-83, 125-125, 132-132, 137-137, 145-145, 156-157, 190-190, 212-212, 220-220, 261-261, 286-287, 292-292, 295-301, 308-309
295-301: Potential unhandled promise rejection in drop handler.The current implementation calls
onDropCallbackand handles the returned Promise with.catch()but doesn't await it. This could lead to unhandled promise rejections if the callback throws after the catch handler.Consider this approach for better error handling:
- const result = onDropCallback(columnInfo, target) - if (result instanceof Promise) { - result.catch((error) => { - console.error('Failed to handle drop:', error) - }) - } + try { + const result = onDropCallback(columnInfo, target) + if (result instanceof Promise) { + await result + } + } catch (error) { + console.error('Failed to handle drop:', error) + }Alternatively, if you want to maintain the non-blocking behavior, consider using
void result.catch(...)to explicitly indicate the intentional fire-and-forget pattern.Likely an incorrect or invalid review comment.
1 participant
Addresses Task 11 of #66