feat(wikibase-schema-editor): create item editor component foundation #83
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change introduces the new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ItemEditor
participant SchemaStore
participant ParentComponent
User->>ItemEditor: Mounts component
ItemEditor->>SchemaStore: Reads current item state
ItemEditor-->>ParentComponent: Emits 'item-created' (if new item detected)
User->>ItemEditor: Clicks edit/delete on item/statement
ItemEditor-->>ParentComponent: Emits 'edit-item' or 'delete-item' events
User->>SchemaStore: Modifies item data
SchemaStore-->>ItemEditor: Updates reactive state
ItemEditor-->>ParentComponent: Emits events as needed
Estimated code review effort4 (60–120 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 review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (16)
frontend/package.json (2)
11-12:eslinttarget broadened – risk of linting unintended pathsRunning
eslintwith no explicit path will recurse from the package root, which may crawldist, cache folders, or config files and slow CI. Consider restricting the scope or rely on a properly-maintained.eslintignore.-"lint": "eslint", +"lint": "eslint \"src/**/*.{ts,vue}\"",
11-12: Script names follow Bun conventions but calls aren’t Bun-prefixedOur conventions (see learnings) favour invoking tools via
bun x <cmd>to ensure the Bun shim is used. This avoids PATH drift when contributors use non-bun registries.-"lint": "eslint \"src/**/*.{ts,vue}\"", -"typecheck": "vue-tsc --noEmit --skipLibCheck" +"lint": "bun x eslint \"src/**/*.{ts,vue}\"", +"typecheck": "bun x vue-tsc --noEmit --skipLibCheck"frontend/src/stores/drag-drop.store.ts (1)
113-120: Good call adding braces – now deduplicate the logicBracing the
alias/referencecases removes the fall-through hazard – nice.
However, the exact same validation block now lives in two places (isValidDropandcalculateValidTargets). Extract it into a single helper to keep behaviour from diverging.+const passesTargetSpecificChecks = (target: DropTarget, column: ColumnInfo): boolean => { + switch (target.type) { + case 'label': + case 'alias': { + const max = target.type === 'label' ? 250 : 100 + return !(column.sampleValues?.some(v => v.length > max)) + } + case 'statement': + case 'qualifier': + case 'reference': + return Boolean(target.propertyId) + } + return true +}…and call
passesTargetSpecificChecksfrom both sites.Also applies to: 123-127
.kiro/steering/tech.md (2)
34-34: Clarify “run manually” phrasing“The development server is run manually and should not be triggered” is ambiguous—readers may wonder when and how to start it. A short sentence explaining the expected command (
bun dev) and who should execute it (CI vs local) would remove doubt.
52-55: Document per-package lint commands onceThe four
bun lint:*lines are great, but listing both the command and example invocation on the same line hampers copy-paste. Consider grouping examples beneath the commands for readability.backend/package.json (1)
13-14: Clarify lint target pathDropping the explicit “.” relies on ESLint’s CWD; if this script ever gets invoked from outside the
backenddir (e.g., viabun run backend lintfrom repo root), it will lint the whole repo. Consider restoring the path or adding--cwd ./to keep scope intentional.frontend/src/components/__tests__/ItemEditor.compile.test.ts (1)
6-9: Assert compile to SFC object rather than raw stringIf the vue plugin is active, default import should be the compiled component object, not a raw template string. A string indicates the SFC loader isn’t wired into the test runner, so template/runtime issues could slip through unnoticed.
frontend/src/components/__tests__/ItemEditor.integration.test.ts (2)
3-16: This is still a compile-time test, not an integration testNothing is rendered or mounted; you’re only validating that the modules import. Consider using
@vue/test-utils+mount()to exercise the component tree and catch runtime errors.
18-43: UnusedItemEditorEventsinterfaceThe typed interface isn’t connected to the component; TS will erase it, but keeping dead code harms readability.
frontend/src/components/ItemEditor.vue (4)
2-4: Remove unusedItemIdimport
ItemIdis imported but never used, triggering TS --noUnusedLocals warnings.
17-18:useErrorHandling()is unusedThe composable is imported solely for
showError, which is never called. Delete the import or implement error handling to avoid dead code.
74-85:shouldShowTermsSection/shouldShowStatementsSectioncomputed values are unusedThey’re calculated but never referenced in the template, adding unnecessary reactive overhead. Either bind them with
v-ifon the respective blocks or remove them.
33-36:displayItemIdcomputed is unusedIf you meant to surface this in the UI (e.g., replace direct
schemaStore.itemIdusages), wire it up; otherwise drop it.frontend/src/components/__tests__/ItemEditor.test.ts (3)
298-316: Hard-coded CSS-class assertions offer little value.Asserting against an object defined in the test itself merely rechecks literals you just declared. If the classes are important, mount the component and assert
element.classList.contains(...)instead.
318-337: Event-interface test does not exercise the component.Calling a locally-created
mockEmitspy does not prove thatItemEditor.vueactually emits those events. Mount the component and usewrapper.emitted()to verify real emission behaviour.
340-346: Replace empty interface with a type alias.Biome flags empty interfaces. A minimal alias avoids the lint error:
-interface ItemEditorProps { - // No props currently defined for ItemEditor -} +type ItemEditorProps = Record<never, never>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.kiro/specs/wikibase-schema-editor/tasks.md(1 hunks).kiro/steering/tech.md(2 hunks)backend/package.json(1 hunks)frontend/components.d.ts(1 hunks)frontend/package.json(1 hunks)frontend/src/components/ItemEditor.vue(1 hunks)frontend/src/components/__tests__/ItemEditor.compile.test.ts(1 hunks)frontend/src/components/__tests__/ItemEditor.integration.test.ts(1 hunks)frontend/src/components/__tests__/ItemEditor.test.ts(1 hunks)frontend/src/stores/drag-drop.store.ts(1 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (10)
frontend/package.json (14)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun <file> instead of node <file> or ts-node <file> for running TypeScript or JavaScript files
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.125Z
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.690Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.{html,ts,tsx,css} : Use bun build <file.html|file.ts|file.css> instead of webpack or esbuild for building HTML, TypeScript, or CSS files
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
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.125Z
Learning: Applies to package.json : Use bun run <script> instead of npm run <script>, yarn run <script>, or pnpm run <script> for running scripts
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Do not use dotenv; Bun automatically loads .env files
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
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/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
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.691Z
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.691Z
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.$ (e.g., Bun.$ls``) instead of execa for running shell commands
frontend/src/stores/drag-drop.store.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
.kiro/steering/tech.md (10)
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.125Z
Learning: Applies to package.json : Use bun install instead of npm install, yarn install, or pnpm install for dependency installation
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun <file> instead of node <file> or ts-node <file> for running TypeScript or JavaScript files
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.125Z
Learning: Applies to package.json : Use bun run <script> instead of npm run <script>, yarn run <script>, or pnpm run <script> for running scripts
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.125Z
Learning: Applies to **/*.{html,ts,tsx,css} : Use bun build <file.html|file.ts|file.css> instead of webpack or esbuild for building HTML, TypeScript, or CSS files
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.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check node_modules/bun-types/docs/**.md if available locally
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.$ (e.g., Bun.$ls``) instead of execa for running shell commands
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.125Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
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.126Z
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Prefer Bun.file over node:fs's readFile/writeFile
frontend/src/components/__tests__/ItemEditor.compile.test.ts (14)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
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.690Z
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.691Z
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.691Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
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.125Z
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.691Z
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.691Z
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.691Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.126Z
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.125Z
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.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check node_modules/bun-types/docs/**.md if available locally
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.125Z
Learning: Applies to **/*.html : HTML files can import .tsx, .jsx, or .js files directly and Bun's bundler will transpile & bundle automatically
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun <file> instead of node <file> or ts-node <file> for running TypeScript or JavaScript files
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.$ (e.g., Bun.$ls``) instead of execa for running shell commands
frontend/components.d.ts (12)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
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.691Z
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.690Z
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.691Z
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.691Z
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.691Z
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.691Z
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.690Z
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.691Z
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.690Z
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.690Z
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.691Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
backend/package.json (10)
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.125Z
Learning: Applies to package.json : Use bun run <script> instead of npm run <script>, yarn run <script>, or pnpm run <script> for running scripts
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun <file> instead of node <file> or ts-node <file> for running TypeScript or JavaScript files
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Do not use dotenv; Bun automatically loads .env files
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.125Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to package.json : Use bun install instead of npm install, yarn install, or pnpm install for dependency installation
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.125Z
Learning: Applies to **/*.{html,ts,tsx,css} : Use bun build <file.html|file.ts|file.css> instead of webpack or esbuild for building HTML, TypeScript, or CSS files
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.$ (e.g., Bun.$ls``) instead of execa for running shell commands
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun:sqlite for SQLite instead of better-sqlite3
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.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check node_modules/bun-types/docs/**.md if available locally
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Prefer Bun.file over node:fs's readFile/writeFile
package.json (12)
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.125Z
Learning: Applies to package.json : Use bun run <script> instead of npm run <script>, yarn run <script>, or pnpm run <script> for running scripts
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.125Z
Learning: Applies to package.json : Use bun install instead of npm install, yarn install, or pnpm install for dependency installation
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.$ (e.g., Bun.$ls``) instead of execa for running shell commands
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun <file> instead of node <file> or ts-node <file> for running TypeScript or JavaScript files
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.125Z
Learning: Applies to **/*.{html,ts,tsx,css} : Use bun build <file.html|file.ts|file.css> instead of webpack or esbuild for building HTML, TypeScript, or CSS files
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.125Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check node_modules/bun-types/docs/**.md if available locally
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Prefer Bun.file over node:fs's readFile/writeFile
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.serve() for HTTP servers and WebSockets instead of express
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Do not use dotenv; Bun automatically loads .env files
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use bun:sqlite for SQLite instead of better-sqlite3
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.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Bun.redis for Redis instead of ioredis
frontend/src/components/__tests__/ItemEditor.integration.test.ts (2)
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.125Z
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/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check node_modules/bun-types/docs/**.md if available locally
frontend/src/components/ItemEditor.vue (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
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.691Z
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.691Z
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.691Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
frontend/src/components/__tests__/ItemEditor.test.ts (2)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
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.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
🧬 Code Graph Analysis (1)
frontend/src/components/__tests__/ItemEditor.test.ts (1)
frontend/src/stores/schema.store.ts (1)
useSchemaStore(14-188)
🪛 Biome (1.9.4)
frontend/src/components/__tests__/ItemEditor.test.ts
[error] 340-342: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
🔇 Additional comments (4)
.kiro/specs/wikibase-schema-editor/tasks.md (1)
58-62: Task marked as complete – please cross-check accompanying testsThe checklist now shows Task 10 as done. Make sure the new
ItemEditortest suites fully cover the acceptance criteria (creation, identifier assignment, event emission) before merging.frontend/components.d.ts (1)
24-24: Global registration looks correct
ItemEditoris now available for auto-import; path resolves tosrc/components/ItemEditor.vue. No issues spotted.package.json (1)
15-17: Confirm-F '*'quoting works as expectedPassing the asterisk inside quotes forwards the literal
'*'to Bun; the filter then looks for a workspace literally named “*”. If the intent is “all workspaces”, drop the quotes (bun -F * lint) or omit-Fentirely.frontend/src/components/__tests__/ItemEditor.test.ts (1)
1-1: Verify availability ofmockinbun:test.Bun’s test runner exposes
test,expect, etc., but amockhelper is not documented in stable releases. Ifmockis unavailable the entire suite will fail at import time.
Confirm the API version or switch tovi.fn/jest.fn-style spies.
| setActivePinia( | ||
| createTestingPinia({ | ||
| createSpy: mock, | ||
| stubActions: false, | ||
| }), | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Pinia spy factory misuse.
createTestingPinia({ createSpy }) expects createSpy: () => SpyFunction. Passing the mock function directly (rather than a factory that returns a spy) may break action spying. Wrap it:
- createSpy: mock,
+ createSpy: () => mock(),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| setActivePinia( | |
| createTestingPinia({ | |
| createSpy: mock, | |
| stubActions: false, | |
| }), | |
| ) | |
| setActivePinia( | |
| createTestingPinia({ | |
| createSpy: () => mock(), | |
| stubActions: false, | |
| }), | |
| ) |
🤖 Prompt for AI Agents
In frontend/src/components/__tests__/ItemEditor.test.ts around lines 35 to 40,
the createTestingPinia call incorrectly passes the mock function directly to
createSpy instead of a factory function. Fix this by wrapping mock in a function
that returns a spy, for example, use createSpy: () => mock() to ensure proper
spy creation for action spying.
| describe('item configuration interface logic', () => { | ||
| test('should determine when item exists based on store state', () => { | ||
| // Test hasItem computed logic | ||
| const hasItemLogic = (store: ReturnType<typeof useSchemaStore>) => { | ||
| return ( | ||
| store.itemId !== null || | ||
| Object.keys(store.labels).length > 0 || | ||
| Object.keys(store.descriptions).length > 0 || | ||
| store.statements.length > 0 | ||
| ) | ||
| } | ||
|
|
||
| // Initially no item | ||
| expect(hasItemLogic(store)).toBe(false) | ||
|
|
||
| // With itemId | ||
| store.itemId = 'Q123' as ItemId | ||
| expect(hasItemLogic(store)).toBe(true) | ||
|
|
||
| // Reset and test with labels | ||
| store.$reset() | ||
| store.addLabelMapping('en', { columnName: 'title', dataType: 'VARCHAR' }) | ||
| expect(hasItemLogic(store)).toBe(true) | ||
|
|
||
| // Reset and test with descriptions | ||
| store.$reset() | ||
| store.addDescriptionMapping('en', { columnName: 'desc', dataType: 'TEXT' }) | ||
| expect(hasItemLogic(store)).toBe(true) | ||
|
|
||
| // Reset and test with statements | ||
| store.$reset() | ||
| store.addStatement( | ||
| { id: 'P31', label: 'instance of', dataType: 'wikibase-item' }, | ||
| { | ||
| type: 'column', | ||
| source: { columnName: 'type', dataType: 'VARCHAR' }, | ||
| dataType: 'wikibase-item', | ||
| }, | ||
| ) | ||
| expect(hasItemLogic(store)).toBe(true) | ||
| }) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Tests duplicate implementation logic instead of asserting component behaviour.
The helper functions (hasItemLogic, getItemHeaderText, …) are re-implemented inside the test file, so the tests will pass even if the real component code diverges. Prefer importing the actual computed properties/composables or shallow-mounting the component with @vue/test-utils and asserting against real outputs to avoid false positives and maintenance drift.
🤖 Prompt for AI Agents
In frontend/src/components/__tests__/ItemEditor.test.ts around lines 45 to 86,
the test duplicates the implementation logic of helper functions like
hasItemLogic instead of using the actual component code. To fix this, remove the
re-implemented helper functions from the test and instead import the real
computed properties or composables from the component. Alternatively,
shallow-mount the component using @vue/test-utils and assert against the real
outputs to ensure the tests reflect actual component behavior and prevent false
positives.
| const formatStatementValue = (statement: any) => { | ||
| const valueSource = statement.value.source | ||
| return typeof valueSource === 'string' | ||
| ? valueSource | ||
| : (valueSource as ColumnMapping)?.columnName || 'No mapping' | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Loosened any type on statement
Give statement a proper interface to preserve type-safety, e.g.:
interface Statement {
id: string
property: { id: string; label?: string }
value: { source: string | ColumnMapping }
}🤖 Prompt for AI Agents
In frontend/src/components/ItemEditor.vue around lines 117 to 122, the function
formatStatementValue uses the type any for the statement parameter, which
reduces type safety. Define a proper TypeScript interface for statement with the
suggested structure including id, property, and value fields, then update the
function signature to use this interface instead of any to improve type safety
and code clarity.
1 participant
Addresses Task 10 of #66