From 351557a766ac4819c90250c67fa632bb2b363d92 Mon Sep 17 00:00:00 2001 From: Samantha Kraft Date: Mon, 1 Apr 2024 15:39:27 -0400 Subject: [PATCH] better align styles to wireframes. Add entire dashboard as a storybook. --- .storybook/preview.ts | 26 +++++- index.html | 4 +- package.json | 1 + src/components/FlatmapViewer.vue | 20 +++-- src/components/ItemWidget.vue | 14 +--- src/components/SparcDashboard.vue | 24 +++--- src/main.ts | 2 + src/stores/globalVars.ts | 2 +- src/stories/SparcDashboard/SparcDashboard.mdx | 33 ++++++++ .../SparcDashboard/SparcDashboard.stories.js | 37 +++++++++ src/stories/SparcDashboard/sparc-dash.png | Bin 0 -> 1206488 bytes src/stories/SparcDashboard/styles.scss | 0 yarn.lock | 75 +++++++++++++++++- 13 files changed, 205 insertions(+), 33 deletions(-) create mode 100644 src/stories/SparcDashboard/SparcDashboard.mdx create mode 100644 src/stories/SparcDashboard/SparcDashboard.stories.js create mode 100644 src/stories/SparcDashboard/sparc-dash.png create mode 100644 src/stories/SparcDashboard/styles.scss 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 @@