@morscherlab/mld-sdk 0.6.0

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@morscherlab/mld-sdk",
+  "version": "0.6.0",
+  "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./dist/styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./install": {
+      "types": "./dist/install.d.ts",
+      "import": "./dist/install.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./stores": {
+      "types": "./dist/stores/index.d.ts",
+      "import": "./dist/stores/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./tailwind.preset": {
+      "types": "./dist/tailwind.preset.d.ts",
+      "import": "./dist/tailwind.preset.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
+  },
+  "peerDependencies": {
+    "@simplewebauthn/browser": "^10.0.0",
+    "pinia": "^2.1.0 || ^3.0.0",
+    "tailwindcss": "^4.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@simplewebauthn/browser": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "axios": "^1.6.0"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
+    "@simplewebauthn/browser": "^10.0.0",
+    "@simplewebauthn/types": "^10.0.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^15.0.0",
+    "histoire": "^0.17.17",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^2.0.0",
+    "vue-router": "^4.2.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MorscherLab/mld",
+    "directory": "packages/sdk-frontend"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "sdk",
+    "mld",
+    "plugin",
+    "components"
+  ],
+  "author": "MorscherLab",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/__tests__/components/AppLayout.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppLayout from '../../components/AppLayout.vue'
+
+describe('AppLayout', () => {
+  describe('rendering with default props', () => {
+    it('should render layout with default classes', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(false)
+    })
+
+    it('should render body container', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__body').exists()).toBe(true)
+    })
+
+    it('should render main content slot', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          default: '<p>Main content</p>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__main').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout__main').text()).toBe('Main content')
+    })
+  })
+
+  describe('topbar slot', () => {
+    it('should render topbar when slot is provided', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          topbar: '<div class="custom-topbar">Topbar</div>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__topbar').exists()).toBe(true)
+      expect(wrapper.find('.custom-topbar').text()).toBe('Topbar')
+    })
+
+    it('should not render topbar when slot is not provided', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__topbar').exists()).toBe(false)
+    })
+  })
+
+  describe('sidebar slot', () => {
+    it('should render sidebar when slot is provided', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          sidebar: '<div class="custom-sidebar">Sidebar</div>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__sidebar').exists()).toBe(true)
+      expect(wrapper.find('.custom-sidebar').text()).toBe('Sidebar')
+    })
+
+    it('should not render sidebar when slot is not provided', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__sidebar').exists()).toBe(false)
+    })
+  })
+
+  describe('sidebarPosition prop', () => {
+    it('should default to left position', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+    })
+
+    it('should add right class when sidebarPosition is right', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarPosition: 'right' },
+      })
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(true)
+    })
+
+    it('should not add right class when sidebarPosition is left', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarPosition: 'left' },
+      })
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+    })
+  })
+
+  describe('floating prop', () => {
+    it('should not add floating class by default', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(false)
+    })
+
+    it('should add floating class when floating is true', () => {
+      const wrapper = mount(AppLayout, {
+        props: { floating: true },
+      })
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(true)
+    })
+  })
+
+  describe('sidebar width styling', () => {
+    it('should not apply inline width when default auto is used', () => {
+      const wrapper = mount(AppLayout, {
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toBeUndefined()
+    })
+
+    it('should apply custom sidebar width', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarWidth: '300px' },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toContain('width: 300px')
+    })
+
+    it('should handle width with different CSS units', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarWidth: '20rem' },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toContain('width: 20rem')
+    })
+  })
+
+  describe('integration: all slots', () => {
+    it('should render topbar, sidebar, and main content together', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          topbar: '<div class="topbar-content">Header</div>',
+          sidebar: '<div class="sidebar-content">Sidebar</div>',
+          default: '<div class="main-content">Content</div>',
+        },
+      })
+
+      expect(wrapper.find('.topbar-content').text()).toBe('Header')
+      expect(wrapper.find('.sidebar-content').text()).toBe('Sidebar')
+      expect(wrapper.find('.main-content').text()).toBe('Content')
+    })
+
+    it('should apply multiple modifier classes', () => {
+      const wrapper = mount(AppLayout, {
+        props: {
+          sidebarPosition: 'right',
+          floating: true,
+        },
+      })
+
+      const layout = wrapper.find('.mld-layout')
+      expect(layout.classes()).toContain('mld-layout--sidebar-right')
+      expect(layout.classes()).toContain('mld-layout--floating')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty default slot', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__main').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout__main').text()).toBe('')
+    })
+  })
+})

package/src/__tests__/components/AppSidebar.test.ts

@@ -0,0 +1,292 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppSidebar from '../../components/AppSidebar.vue'
+import CollapsibleCard from '../../components/CollapsibleCard.vue'
+import type { SidebarToolSection } from '../../types'
+
+const samplePanels: Record<string, SidebarToolSection[]> = {
+  analysis: [
+    { id: 'parameters', label: 'Parameters', icon: '⚙' },
+    { id: 'filters', label: 'Filters', icon: '🔍', defaultOpen: false },
+  ],
+  results: [
+    { id: 'display', label: 'Display Options' },
+  ],
+}
+
+describe('AppSidebar', () => {
+  describe('rendering with default props', () => {
+    it('should render sidebar with default classes', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(true)
+    })
+
+    it('should apply default width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 280px')
+    })
+
+    it('should be hidden when no panels match active view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'settings' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should be hidden when activeView is empty', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('side prop', () => {
+    it('should default to left side', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--right').exists()).toBe(false)
+    })
+
+    it('should apply right side class', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { side: 'right' },
+      })
+      expect(wrapper.find('.mld-sidebar--right').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(false)
+    })
+  })
+
+  describe('floating prop', () => {
+    it('should apply floating class by default', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--static').exists()).toBe(false)
+    })
+
+    it('should apply static class when floating is false', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { floating: false },
+      })
+      expect(wrapper.find('.mld-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(false)
+    })
+  })
+
+  describe('width prop', () => {
+    it('should apply custom width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '300px',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 300px')
+    })
+
+    it('should handle different CSS units', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '20rem',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 20rem')
+    })
+  })
+
+  describe('panels and activeView', () => {
+    it('should render sections for active view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should render CollapsibleCard for each section', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should pass section label as title to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[1].props('title')).toBe('Filters')
+    })
+
+    it('should pass section icon to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('icon')).toBe('⚙')
+    })
+
+    it('should respect defaultOpen on sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('defaultOpen')).toBe(true)
+      expect(cards[1].props('defaultOpen')).toBe(false)
+    })
+
+    it('should switch sections when activeView changes', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.setProps({ activeView: 'results' })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+    })
+
+    it('should hide when switching to view with no panels', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(false)
+
+      await wrapper.setProps({ activeView: 'settings' })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('section slots', () => {
+    it('should render named section slots', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-filters': '<div class="filters-content">Filters content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(true)
+      expect(wrapper.find('.filters-content').exists()).toBe(true)
+    })
+
+    it('should not render section slots for inactive view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'results' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-display': '<div class="display-content">Display content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(false)
+      expect(wrapper.find('.display-content').exists()).toBe(true)
+    })
+  })
+
+  describe('slots', () => {
+    it('should render header slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        slots: {
+          header: '<div class="custom-header">Header</div>',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar__header').exists()).toBe(true)
+      expect(wrapper.find('.custom-header').text()).toBe('Header')
+    })
+
+    it('should render footer slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        slots: {
+          footer: '<div class="custom-footer">Footer</div>',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar__footer').exists()).toBe(true)
+      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
+    })
+
+    it('should not render header when slot is not provided', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar__header').exists()).toBe(false)
+    })
+
+    it('should not render footer when slot is not provided', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar__footer').exists()).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty panels object', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: {}, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should handle view with empty sections array', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: { empty: [] }, activeView: 'empty' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should handle undefined activeView', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('integration: multiple classes', () => {
+    it('should apply multiple classes correctly', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          side: 'left',
+          floating: false,
+        },
+      })
+
+      const sidebar = wrapper.find('.mld-sidebar')
+      expect(sidebar.classes()).toContain('mld-sidebar--left')
+      expect(sidebar.classes()).toContain('mld-sidebar--static')
+    })
+
+    it('should render all slots with sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          header: '<div class="header">Header</div>',
+          footer: '<div class="footer">Footer</div>',
+          'section-parameters': '<div>Params</div>',
+        },
+      })
+
+      expect(wrapper.find('.header').exists()).toBe(true)
+      expect(wrapper.find('.footer').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar__sections').exists()).toBe(true)
+    })
+  })
+})