feat: introduce histoire

Author: asvae

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.12.4",
     "@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.12.4",
     "identity-obj-proxy": "^3.0.0",
     "ionicons": "^3.0.0",
     "jsdom": "^16.2.2",
@@ -162,4 +167,4 @@
     "./styles/*": "./dist/styles/*",
     "./dist/*": "./dist/*"
   }
-}
+}

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

@@ -42,7 +42,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/VaButton.demo.vue

@@ -0,0 +1,13 @@
+<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>

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

@@ -0,0 +1,13 @@
+<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>

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

@@ -0,0 +1,20 @@
+<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>

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

@@ -0,0 +1,23 @@
+<template>
+  <story title="va-button/icon" :layout="{ type: 'grid', width: '100%' }">
+    <variant title="icon to the side">
+      <va-button icon="create">Edit Button</va-button>
+      <va-button preset="secondary" icon="gavel" iconRight="clear">Mixed Button</va-button>
+      <va-button preset="plainOpacity" icon="gavel">Plain with icon</va-button>
+      <va-button preset="primary" size="small" icon="create">Small Edit Button</va-button>
+      <va-button preset="primary" icon="gavel" icon-color="warning">Mixed Colors</va-button>
+      <va-button preset="primary" icon-right="clear">Dropdown Button</va-button>
+    </variant>
+    <variant title="icon only">
+      <va-button icon="block" />
+      <va-button preset="primary" icon="block" />
+      <va-button preset="secondary" icon="block" />
+      <va-button preset="plain" icon="block" />
+      <va-button preset="plainOpacity" icon="block" />
+    </variant>
+  </story>
+</template>
+
+<script lang="ts" setup>
+import { VaButton } from '../index'
+</script>