diff --git a/.storybook/preview.ts b/.storybook/preview.ts index ccf5138..fc7387e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,11 +1,23 @@ /** @type { import('@storybook/vue3').Preview } */ import { setup, app } from '@storybook/vue3' - +import { defineAsyncComponent } from 'vue' +import DesignSystemComponentsPlugin from 'sparc-design-system-components-2' import 'element-plus/dist/index.css'; import sparcTheme from './sparcTheme' import ElementPlus from 'element-plus' import { createPinia } from 'pinia'; +import { GridStack } from 'gridstack'; import mitt from 'mitt'; +import { useGlobalVarsStore } from '../src/stores/globalVars.ts' +import "../dist/output.css" +import {Dataset} from '../src/assets/Model'; + +const componentMap = [ + 'ImageSelector', + 'LocationNav', + 'FlatmapViewer', + 'BiolucidaViewer' +] const pinia = createPinia(); const emitter = mitt(); @@ -71,9 +83,21 @@ const preview = { } } }; + + setup((app)=>{ + app.use(DesignSystemComponentsPlugin); app.use(ElementPlus); app.use(pinia); app.provide('emitter', emitter); + + componentMap.forEach(comp=>{ + const asyncComponent = defineAsyncComponent(() => import(`../src/components/${comp}.vue`)); + app.component(comp, asyncComponent); + }) + + const globalVars = useGlobalVarsStore(); + globalVars.componentList = componentMap; + }) export default preview; diff --git a/index.html b/index.html index a599c6d..52657e8 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,8 @@ SPARC Dashboard - -
+ +
diff --git a/package.json b/package.json index fb54769..e567ff3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "dependencies": { "@abi-software/flatmapvuer": "^0.6.1-vue3.8", + "sparc-design-system-components-2": "0.0.26", "@tsconfig/node21": "^21.0.1", "axios": "^1.6.7", "element-plus": "^2.4.3", diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue index 5a54949..485839a 100644 --- a/src/components/FlatmapViewer.vue +++ b/src/components/FlatmapViewer.vue @@ -1,9 +1,10 @@