Feat/2924 histoire support

packages/ui/build/common-config.ts

@@ -1,4 +1,4 @@
-import { componentVBindFix } from './plugins/component-v-bind-fix';
+import { componentVBindFix } from './plugins/component-v-bind-fix'
 import { readFileSync, lstatSync, readdirSync } from 'fs'
 import vue from '@vitejs/plugin-vue'
 import { resolve as resolver } from 'path'

packages/ui/histoire.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    HstVue(),
+  ],
+  setupFile: '/src/histoire/histoire.setup.ts',
+})

packages/ui/package.json

@@ -39,7 +39,10 @@
     "push": "npm publish --tag=next",
     "push-production": "npm publish --tag=latest",
     "precommit": "lint-staged --concurrent=false && yarn test:unit --run",
-    "server:webapp": "npx http-server dist --push-state"
+    "server:webapp": "npx http-server dist --push-state",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "dependencies": {
     "@types/lodash": "^4.14.161",
@@ -55,6 +58,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-2",
+    "@histoire/plugin-vue": "^0.15.8",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@types/cleave.js": "^1.4.7",
@@ -87,6 +91,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.0.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
+    "histoire": "^0.15.9",
     "identity-obj-proxy": "^3.0.0",
     "ionicons": "^3.0.0",
     "jsdom": "^16.2.2",
@@ -170,4 +175,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-avatar/VaAvatar.vue

@@ -45,7 +45,9 @@ import {
 } from '../../composables'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
 
-import { VaIcon, VaProgressCircle, VaFallback } from '../index'
+import { VaIcon } from '../va-icon'
+import { VaProgressCircle } from '../va-progress-circle'
+import { VaFallback } from '../va-fallback'
 import { useAvatarProps } from './hooks/useAvatarProps'
 
 const VaFallbackProps = extractComponentProps(VaFallback)

packages/ui/src/components/va-button/stories/VaButton-color.story.vue

@@ -0,0 +1,19 @@
+<template>
+  <Story title="va-button/color">
+    <va-button color="info">Info</va-button>
+    <va-button preset="primary" color="danger">Danger</va-button>
+    <va-button preset="secondary" color="warning">Warning</va-button>
+    <va-button preset="plain" color="success">Success</va-button>
+    <va-button preset="plainOpacity" color="textPrimary">Dark</va-button>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { VaButton } from '../index'
+</script>
+
+<style scoped>
+.va-button + .va-button {
+  margin-left: 1rem;
+}
+</style>

packages/ui/src/components/va-button/stories/VaButton-disabled.story.vue

@@ -0,0 +1,19 @@
+<template>
+  <Story title="va-button/disabled">
+    <va-button disabled>Accent (default)</va-button>
+    <va-button preset="primary" disabled>Primary</va-button>
+    <va-button preset="secondary" disabled>Secondary</va-button>
+    <va-button preset="plain" disabled>Plain</va-button>
+    <va-button preset="plainOpacity" disabled>Plain with opacity</va-button>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { VaButton } from '../index'
+</script>
+
+<style scoped>
+.va-button + .va-button {
+  margin-left: 1rem;
+}
+</style>

packages/ui/src/components/va-button/stories/VaButton-hover-behavior.story.vue

@@ -0,0 +1,26 @@
+<template>
+  <Story title="va-button/hover-behavior">
+    <va-button :backgroundOpacity="0.9" hoverBehavior="opacity" :hoverOpacity="0.4">
+      Hover me
+    </va-button>
+    <va-button preset="primary" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
+      Hover me
+    </va-button>
+    <va-button preset="secondary" hoverBehavior="opacity" :hoverOpacity="0.4">
+      Hover me
+    </va-button>
+    <va-button preset="plain" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
+      Hover me
+    </va-button>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { VaButton } from '../index'
+</script>
+
+<style scoped>
+.va-button + .va-button {
+  margin-left: 1rem;
+}
+</style>