Skip to content

Commit 66fe37f

Browse files
asvaeasvae
committed
feat: introduce histoire
1 parent 17979d5 commit 66fe37f

24 files changed

+949
-270
lines changed

‎packages/ui/histoire.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineConfig } from 'histoire'
2+
import { HstVue } from '@histoire/plugin-vue'
3+
4+
export default defineConfig({
5+
plugins: [
6+
HstVue(),
7+
],
8+
setupFile: '/src/histoire/histoire.setup.ts',
9+
})

‎packages/ui/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@
3939
"push": "npm publish --tag=next",
4040
"push-production": "npm publish --tag=latest",
4141
"precommit": "lint-staged --concurrent=false && yarn test:unit --run",
42-
"server:webapp": "npx http-server dist --push-state"
42+
"server:webapp": "npx http-server dist --push-state",
43+
"story:dev": "histoire dev",
44+
"story:build": "histoire build",
45+
"story:preview": "histoire preview"
4346
},
4447
"dependencies": {
4548
"@types/lodash": "^4.14.161",
@@ -55,6 +58,7 @@
5558
"@fortawesome/fontawesome-svg-core": "^1.2.32",
5659
"@fortawesome/free-solid-svg-icons": "^5.15.1",
5760
"@fortawesome/vue-fontawesome": "^3.0.0-2",
61+
"@histoire/plugin-vue": "^0.12.4",
5862
"@rollup/plugin-commonjs": "^19.0.0",
5963
"@rollup/plugin-node-resolve": "^13.0.0",
6064
"@types/cleave.js": "^1.4.7",
@@ -87,6 +91,7 @@
8791
"eslint-plugin-standard": "^5.0.0",
8892
"eslint-plugin-vue": "^7.0.1",
8993
"friendly-errors-webpack-plugin": "^1.7.0",
94+
"histoire": "^0.12.4",
9095
"identity-obj-proxy": "^3.0.0",
9196
"ionicons": "^3.0.0",
9297
"jsdom": "^16.2.2",
@@ -162,4 +167,4 @@
162167
"./styles/*": "./dist/styles/*",
163168
"./dist/*": "./dist/*"
164169
}
165-
}
170+
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ import {
4242
} from '../../composables'
4343
import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
4444
45-
import { VaIcon, VaProgressCircle, VaFallback } from '../index'
45+
import { VaIcon } from '../va-icon'
46+
import { VaProgressCircle } from '../va-progress-circle'
47+
import { VaFallback } from '../va-fallback'
4648
import { useAvatarProps } from './hooks/useAvatarProps'
4749
4850
const VaFallbackProps = extractComponentProps(VaFallback)

‎packages/ui/src/components/va-button/VaButton.demo.vue

-259
This file was deleted.

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<story title="va-button/color">
3+
<va-button color="info">Info</va-button>
4+
<va-button preset="primary" color="danger">Danger</va-button>
5+
<va-button preset="secondary" color="warning">Warning</va-button>
6+
<va-button preset="plain" color="success">Success</va-button>
7+
<va-button preset="plainOpacity" color="textPrimary">Dark</va-button>
8+
</story>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { VaButton } from './../index'
13+
</script>

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<story title="va-button/disabled">
3+
<va-button disabled>Accent (default)</va-button>
4+
<va-button preset="primary" disabled>Primary</va-button>
5+
<va-button preset="secondary" disabled>Secondary</va-button>
6+
<va-button preset="plain" disabled>Plain</va-button>
7+
<va-button preset="plainOpacity" disabled>Plain with opacity</va-button>
8+
</story>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { VaButton } from '../index'
13+
</script>

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<story title="va-button/hover-behavior">
3+
<va-button :backgroundOpacity="0.9" hoverBehavior="opacity" :hoverOpacity="0.4">
4+
Hover me
5+
</va-button>
6+
<va-button preset="primary" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
7+
Hover me
8+
</va-button>
9+
<va-button preset="secondary" hoverBehavior="opacity" :hoverOpacity="0.4">
10+
Hover me
11+
</va-button>
12+
<va-button preset="plain" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
13+
Hover me
14+
</va-button>
15+
</story>
16+
</template>
17+
18+
<script lang="ts" setup>
19+
import { VaButton } from '../index'
20+
</script>

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<story title="va-button/icon" :layout="{ type: 'grid', width: '100%' }">
3+
<variant title="icon to the side">
4+
<va-button icon="create">Edit Button</va-button>
5+
<va-button preset="secondary" icon="gavel" iconRight="clear">Mixed Button</va-button>
6+
<va-button preset="plainOpacity" icon="gavel">Plain with icon</va-button>
7+
<va-button preset="primary" size="small" icon="create">Small Edit Button</va-button>
8+
<va-button preset="primary" icon="gavel" icon-color="warning">Mixed Colors</va-button>
9+
<va-button preset="primary" icon-right="clear">Dropdown Button</va-button>
10+
</variant>
11+
<variant title="icon only">
12+
<va-button icon="block" />
13+
<va-button preset="primary" icon="block" />
14+
<va-button preset="secondary" icon="block" />
15+
<va-button preset="plain" icon="block" />
16+
<va-button preset="plainOpacity" icon="block" />
17+
</variant>
18+
</story>
19+
</template>
20+
21+
<script lang="ts" setup>
22+
import { VaButton } from '../index'
23+
</script>

0 commit comments

Comments
 (0)