feat: add basic UI components (button, icon, text) to storybook

.storybook/datashareTheme.js

@@ -0,0 +1,9 @@
+
+
+import { create } from '@storybook/theming/create';
+export default create({
+    base: 'light',
+    brandTitle: 'Datashare design system',
+    brandUrl: 'https://datashare.icij.org',
+    brandTarget: '_self',
+  });

.storybook/main.js

@@ -10,6 +10,7 @@ const config = {
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     '@storybook/addon-themes',
+    "storybook-addon-pseudo-states"
   ],
   framework: {
     name: "@storybook/vue3-vite",

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import datashareTheme from './datashareTheme';
+
+addons.setConfig({
+    theme: datashareTheme,
+  });

components.d.ts

@@ -86,6 +86,7 @@ declare module 'vue' {
     FilterText: typeof import('./src/components/filter/types/FilterText.vue')['default']
     FindNamedEntitiesForm: typeof import('./src/components/FindNamedEntitiesForm.vue')['default']
     Hook: typeof import('./src/components/Hook.vue')['default']
+    Icon: typeof import('./src/components/Icon.vue')['default']
     ImageViewer: typeof import('./src/components/document/viewers/ImageViewer.vue')['default']
     InlineDirectoryPicker: typeof import('./src/components/InlineDirectoryPicker.vue')['default']
     JsonFormatter: typeof import('./src/components/JsonFormatter.vue')['default']

package.json

@@ -20,7 +20,7 @@
     "doc:hooks": "node bin/generateHook.js",
     "doc:widgets": "npx jsdoc-to-markdown --plugin bin/dmd/plugin.js --separators --no-gfm --template bin/dmd/widgets.hbs src/store/widgets/*.js > 'dist/docs/widgets.md'",
     "predoc": "yarn doc:dir",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --ci",
     "build:storybook": "storybook build"
   },
   "dependencies": {
@@ -30,6 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@icij/murmur-next": "4.0.18",
+    "@phosphor-icons/vue": "^2.2.1",
     "@popperjs/core": "^2.11.8",
     "@vue/compat": "^3.4.30",
     "axios": "^1.7.2",
@@ -99,6 +100,7 @@
     "jsdom": "^24.0.0",
     "sass": "^1.77.6",
     "storybook": "^8.1.10",
+    "storybook-addon-pseudo-states": "^3.1.1",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.3.1",
     "vitest": "^1.6.0",

src/components/Icon.vue

@@ -0,0 +1,67 @@
+<template>
+   <component 
+    :is="component" 
+    :size="size" 
+    :color="color" 
+    :weight="weight"
+  />  
+</template>
+
+<script setup>
+    import { computed, defineAsyncComponent} from 'vue'
+    import camelCase from 'lodash/camelCase';
+    import startCase from 'lodash/startCase';
+    const  props = defineProps({
+        icon: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: String,
+            required: false,
+            default: '24'
+        },
+        variant: {
+            type: String,
+            required: false,
+            default: 'body-color'
+        },
+        fill: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        weight: {
+            type: String,
+            required: false,
+            default: "regular"
+        }
+    })
+
+    
+    const weights = {
+        thin:"thin", 
+        light:"light", 
+        regular:"regular", 
+        bold:"bold", 
+        fill:"fill", 
+        duotone:"duotone"
+    }
+    
+    function relativePathForIcon(name) {
+        const filename = `Ph${startCase(camelCase(name))}`
+        return defineAsyncComponent(() => import(`../../node_modules/@phosphor-icons/vue/dist/icons/${filename}.vue.mjs`))
+    }
+    const component = relativePathForIcon(props.icon)
+    const weight = computed(()=>{
+        if (props.fill) return weights.fill
+        if (weights[props.weight]) return props.weight
+        return weights.regular
+    })
+
+
+
+    const color = computed(()=>{ 
+        return `var(--bs-${props.variant}, var(--bs-body-color))`
+    })
+</script>

src/stories/basics/Button.stories.js

@@ -0,0 +1,110 @@
+import { BButton, BCloseButton } from 'bootstrap-vue-next'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+
+export default {
+  title: 'Components/Button',
+  component: BButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
+    variant: { control: { type: 'select' }, options: ['primary', 'secondary', 'tertiary', 'light'] }
+  },
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      BButton,
+      BCloseButton
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        args
+      }
+    },
+    template: `
+    <table>
+    <thead>
+    <th>State</th>
+    <th>Base</th>
+    <th>Primary</th>
+    <th>Secondary</th>
+    <th>Tertiary</th>
+    </thead>
+    <tr>
+      <td>Default </td>
+      <td><b-button v-bind="args" >{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" >{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" >{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" >{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Hover </td>
+      <td><b-button v-bind="args" id="hover" >{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" id="hover">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" id="hover">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" id="hover">{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Focus </td>
+      <td><b-button v-bind="args" id="focus">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" id="focus">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" id="focus">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" id="focus">{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Active </td>
+      <td><b-button v-bind="args" id="active">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" id="active">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" id="active">{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" id="active">{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Pressed </td>
+      <td><b-button v-bind="args" pressed>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" pressed>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" pressed>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" pressed>{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Disabled </td>
+      <td><b-button v-bind="args" disabled>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" disabled>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" disabled>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" disabled>{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>Loading </td>
+      <td><b-button v-bind="args" loading>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="primary" loading>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="secondary" loading>{{args.label}}</b-button></td>
+      <td><b-button v-bind="args" variant="tertiary" loading>{{args.label}}</b-button></td>
+    </tr>
+    <tr>
+      <td>BCloseButton </td>
+      <td><BCloseButton v-bind="args" loading>{{args.label}}</BCloseButton></td>
+      <td><BCloseButton v-bind="args"  variant="primary" loading>{{args.label}}</BCloseButton></td>
+      <td><BCloseButton v-bind="args"  variant="secondary" loading>{{args.label}}</BCloseButton></td>
+      <td><BCloseButton v-bind="args"  variant="tertiary" loading>{{args.label}}</BCloseButton></td>
+    </tr>
+    </table>
+    `
+  }),
+  parameters: {
+    pseudo: {
+      hover: ['#hover'],
+      focus: ['#focus'],
+      active: ['#active']
+    }
+  }
+}
+
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default = {
+  args: {
+    variant: '',
+    size: 'md',
+    label: 'Button'
+  }
+}

src/stories/basics/Colors.stories.js

@@ -0,0 +1,34 @@
+import { BButton, BCloseButton } from 'bootstrap-vue-next'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+
+export default {
+  title: 'Basics/Colors',
+  render: (args) => ({
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        args
+      }
+    },
+    template: `
+      <div style="background: var(--bs-primary); width: 50px; height: 50px">
+        <span class=""></span>Test
+      </div>
+      <div style="background: var(--bs-secondary); width: 50px; height: 50px">
+        Test
+      </div>
+      <div style="background: var(--bs-tertiary); width: 50px; height: 50px">
+        Test
+      </div>
+      <div style="background: var(--bs-body-color); width: 50px; height: 50px">
+        Test
+      </div>
+    `
+  })
+}
+
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default = {
+}