feat: introduce histoire

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/stories/VaButton-color.story.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-disabled.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-hover-behavior.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-icon.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>