Skip to content

Commit 79ee94d

Browse files
ExEr7umExEr7um
authored
feat: Add Histoire snippets (#31)
* Histoire config snippets #20 * Histoire story base #20 * Remove extra line in vue snippets * Histoire variants #20 * Histoire layouts #20 * Histoire controls #20 * Folders restructure * Documentation #20
1 parent d21ea1d commit 79ee94d

12 files changed

+234
-25
lines changed

Diff for: ‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,27 @@ These snippets were made to speed up Vue 3 development. With it you can write bo
128128

129129
> Snippets with ⚠️ symbol are unreleased.
130130
131+
### Histoire
132+
133+
| Snippet | Purpose |
134+
| ------------------------- | ------------------------------------ |
135+
| ⚠️ `hconfig` | Histoire config for Vue 3 |
136+
| ⚠️ `hconfig-nuxt` | Histoire config for Nuxt 3 |
137+
| ⚠️ `hbase` | Base code for story |
138+
| ⚠️ `hbase-variant` | Base code for story with variant |
139+
| ⚠️ `hbase-grid` | Base code for story with grid layout |
140+
| ⚠️ `hvariant` | Story variant |
141+
| ⚠️ `hgrid` | Histoire grid layout |
142+
| ⚠️ `hcontrols-base` | Histoire controls base |
143+
| ⚠️ `hcontrols-button` | Histoire controls - Button |
144+
| ⚠️ `hcontrols-buttongroup` | Histoire controls - Button Group |
145+
| ⚠️ `hcontrols-checkbox` | Histoire controls - Checkbox |
146+
| ⚠️ `hcontrols-number` | Histoire controls - Number |
147+
| ⚠️ `hcontrols-text` | Histoire controls - Text |
148+
| ⚠️ `hcontrols-textarea` | Histoire controls - Textarea |
149+
150+
> Snippets with ⚠️ symbol are unreleased.
151+
131152
## Contributing
132153

133154
This is an open source project open to anyone. Contributors are welcome on [GitHub](https://github.com/exer7um/vue3-vscode-snippets).

Diff for: ‎package.json

+27-11
Original file line numberDiff line numberDiff line change
@@ -49,47 +49,63 @@
4949
"snippets": [
5050
{
5151
"language": "vue",
52-
"path": "./snippets/vue.code-snippets"
52+
"path": "./snippets/vue/vue.code-snippets"
5353
},
5454
{
5555
"language": "html",
56-
"path": "./snippets/vue-template.code-snippets"
56+
"path": "./snippets/vue/vue-template.code-snippets"
5757
},
5858
{
5959
"language": "javascript",
60-
"path": "./snippets/vue-script.code-snippets"
60+
"path": "./snippets/vue/vue-script.code-snippets"
6161
},
6262
{
6363
"language": "typescript",
64-
"path": "./snippets/vue-script.code-snippets"
64+
"path": "./snippets/vue/vue-script.code-snippets"
6565
},
6666
{
6767
"language": "javascript",
68-
"path": "./snippets/pinia.code-snippets"
68+
"path": "./snippets/pinia/pinia.code-snippets"
6969
},
7070
{
7171
"language": "typescript",
72-
"path": "./snippets/pinia.code-snippets"
72+
"path": "./snippets/pinia/pinia.code-snippets"
7373
},
7474
{
7575
"language": "javascript",
76-
"path": "./snippets/vue-router.code-snippets"
76+
"path": "./snippets/vue/vue-router.code-snippets"
7777
},
7878
{
7979
"language": "typescript",
80-
"path": "./snippets/vue-router.code-snippets"
80+
"path": "./snippets/vue/vue-router.code-snippets"
8181
},
8282
{
8383
"language": "html",
84-
"path": "./snippets/nuxt-template.code-snippets"
84+
"path": "./snippets/nuxt/nuxt-template.code-snippets"
8585
},
8686
{
8787
"language": "javascript",
88-
"path": "./snippets/nuxt-script.code-snippets"
88+
"path": "./snippets/nuxt/nuxt-script.code-snippets"
8989
},
9090
{
9191
"language": "typescript",
92-
"path": "./snippets/nuxt-script.code-snippets"
92+
"path": "./snippets/nuxt/nuxt-script.code-snippets"
93+
},
94+
{
95+
"language": "vue",
96+
"path": "./snippets/histoire/histoire.code-snippets"
97+
},
98+
{
99+
"language": "html",
100+
"path": "./snippets/histoire/histoire-template.code-snippets"
101+
},
102+
{
103+
"language": "javascript",
104+
"path": "./snippets/histoire/histoire-script.code-snippets"
105+
},
106+
{
107+
"language": "typescript",
108+
"path": "./snippets/histoire/histoire-script.code-snippets"
93109
}
94110
]
95111
}

Diff for: ‎snippets/histoire/histoire-script.code-snippets

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"Histoire config": {
3+
"prefix": "hconfig",
4+
"body": [
5+
"import { defineConfig } from 'histoire'",
6+
"import { HstVue } from '@histoire/plugin-vue'",
7+
"",
8+
"export default defineConfig({",
9+
"\tplugins: [",
10+
"\t\tHstVue(),",
11+
"\t],",
12+
"})"
13+
],
14+
"description": "Histoire config for Vue 3"
15+
},
16+
"Histoire config - Nuxt": {
17+
"prefix": "hconfig-nuxt",
18+
"body": [
19+
"import { defineConfig } from 'histoire'",
20+
"import { HstVue } from '@histoire/plugin-vue'",
21+
"import { HstNuxt } from '@histoire/plugin-nuxt'",
22+
"",
23+
"export default defineConfig({",
24+
"\tplugins: [",
25+
"\t\tHstVue(),",
26+
"\t\tHstNuxt(),",
27+
"\t],",
28+
"})"
29+
],
30+
"description": "Histoire config for Nuxt 3"
31+
},
32+
}

Diff for: ‎snippets/histoire/histoire-template.code-snippets

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
{
2+
"Histoire story variant": {
3+
"prefix": "hvariant",
4+
"body": [
5+
"<Variant title='${1:variantTitle}'>",
6+
"\t$0",
7+
"</Variant>",
8+
],
9+
"description": "Story variant"
10+
},
11+
"Histoire grid layout": {
12+
"prefix": "hgrid",
13+
"body": [
14+
":layout='{ type: 'grid', width: ${1:gridWidth} }'",
15+
],
16+
"description": "Histoire grid layout"
17+
},
18+
"Histoire controls": {
19+
"prefix": "hcontrols-base",
20+
"body": [
21+
"<template #controls>",
22+
"\t$0",
23+
"</template>"
24+
],
25+
"description": "Histoire controls base"
26+
},
27+
"Histoire controls - Button": {
28+
"prefix": "hcontrols-button",
29+
"body": [
30+
"<HstButton class='htw-p-2'>",
31+
"\t$0",
32+
"</HstButton>"
33+
],
34+
"description": "Histoire controls - Button"
35+
},
36+
"Histoire controls - Button Group": {
37+
"prefix": "hcontrols-buttongroup",
38+
"body": [
39+
"<HstButtonGroup",
40+
"\tv-model='${2:vModel}'",
41+
"\ttitle='${1:label}'",
42+
"\t:options='[",
43+
"\t\t{",
44+
"\t\t\tlabel: '${3:optionTitle}',",
45+
"\t\t\tvalue: '${4:optionValue}'",
46+
"\t\t}",
47+
"\t]'",
48+
"/>",
49+
],
50+
"description": "Histoire controls - Button Group"
51+
},
52+
"Histoire controls - Checkbox": {
53+
"prefix": "hcontrols-checkbox",
54+
"body": [
55+
"<HstCheckbox",
56+
"\tv-model='${2:vModel}'",
57+
"\ttitle='${1:label}'",
58+
"/>"
59+
],
60+
"description": "Histoire controls - Checkbox"
61+
},
62+
"Histoire controls - Number": {
63+
"prefix": "hcontrols-number",
64+
"body": [
65+
"<HstNumber",
66+
"\tv-model='${2:vModel}'",
67+
"\t:step='1'",
68+
"\ttitle='${1:label}'",
69+
"/>"
70+
],
71+
"description": "Histoire controls - Number"
72+
},
73+
"Histoire controls - Text": {
74+
"prefix": "hcontrols-text",
75+
"body": [
76+
"<HstText",
77+
"\tv-model='${2:vModel}'",
78+
"\ttitle='${1:label}'",
79+
"/>"
80+
],
81+
"description": "Histoire controls - Text"
82+
},
83+
"Histoire controls - Textarea": {
84+
"prefix": "hcontrols-textarea",
85+
"body": [
86+
"<HstTextarea",
87+
"\tv-model='${2:vModel}'",
88+
"\ttitle='${1:label}'",
89+
"/>"
90+
],
91+
"description": "Histoire controls - Textarea"
92+
},
93+
}

Diff for: ‎snippets/histoire/histoire.code-snippets

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"Histoire story base": {
3+
"prefix": "hbase",
4+
"body": [
5+
"<script setup lang='ts'>",
6+
"",
7+
"</script>",
8+
"",
9+
"<template>",
10+
"\t<Story title='${1:storyTitle}'>",
11+
"\t\t$0",
12+
"\t</Story>",
13+
"</template>",
14+
],
15+
"description": "Base code for story"
16+
},
17+
"Histoire story base with variant": {
18+
"prefix": "hbase-variant",
19+
"body": [
20+
"<script setup lang='ts'>",
21+
"",
22+
"</script>",
23+
"",
24+
"<template>",
25+
"\t<Story title='${1:storyTitle}'>",
26+
"\t\t<Variant title='${2:variantTitle}'>",
27+
"\t\t\t$0",
28+
"\t\t</Variant>",
29+
"\t</Story>",
30+
"</template>",
31+
],
32+
"description": "Base code for story with variant"
33+
},
34+
"Histoire story base with grid layout": {
35+
"prefix": "hbase-grid",
36+
"body": [
37+
"<script setup lang='ts'>",
38+
"",
39+
"</script>",
40+
"",
41+
"<template>",
42+
"\t<Story",
43+
"\t\ttitle='${1:storyTitle}'",
44+
"\t\t:layout='{ type: 'grid', width: 300 }'",
45+
"\t/>",
46+
"\t\t<Variant title='${2:variantTitle}'>",
47+
"\t\t\t$0",
48+
"\t\t</Variant>",
49+
"\t</Story>",
50+
"</template>",
51+
],
52+
"description": "Base code for story with grid layout"
53+
},
54+
}

Diff for: ‎snippets/nuxt-script.code-snippets renamed to ‎snippets/nuxt/nuxt-script.code-snippets

File renamed without changes.

Diff for: ‎snippets/nuxt-template.code-snippets renamed to ‎snippets/nuxt/nuxt-template.code-snippets

File renamed without changes.

Diff for: ‎snippets/pinia.code-snippets renamed to ‎snippets/pinia/pinia.code-snippets

File renamed without changes.

Diff for: ‎snippets/vue-router.code-snippets renamed to ‎snippets/vue/vue-router.code-snippets

File renamed without changes.

Diff for: ‎snippets/vue-script.code-snippets renamed to ‎snippets/vue/vue-script.code-snippets

File renamed without changes.

Diff for: ‎snippets/vue-template.code-snippets renamed to ‎snippets/vue/vue-template.code-snippets

File renamed without changes.

Diff for: ‎snippets/vue.code-snippets renamed to ‎snippets/vue/vue.code-snippets

+7-14
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
"body": [
55
"<script setup lang='ts'>",
66
"",
7-
"</script>"
8-
,
7+
"</script>",
98
"",
109
"<template>",
1110
"\t<div>",
@@ -24,8 +23,7 @@
2423
"body": [
2524
"<script setup lang='ts'>",
2625
"",
27-
"</script>"
28-
,
26+
"</script>",
2927
"",
3028
"<template>",
3129
"\t<div>",
@@ -44,8 +42,7 @@
4442
"body": [
4543
"<script setup lang='ts'>",
4644
"",
47-
"</script>"
48-
,
45+
"</script>",
4946
"",
5047
"<template>",
5148
"\t<div>",
@@ -64,8 +61,7 @@
6461
"body": [
6562
"<script setup lang='ts'>",
6663
"",
67-
"</script>"
68-
,
64+
"</script>",
6965
"",
7066
"<template>",
7167
"\t<div>",
@@ -84,8 +80,7 @@
8480
"body": [
8581
"<script setup lang='ts'>",
8682
"",
87-
"</script>"
88-
,
83+
"</script>",
8984
"",
9085
"<template>",
9186
"\t<div>",
@@ -104,8 +99,7 @@
10499
"body": [
105100
"<script setup lang='ts'>",
106101
"",
107-
"</script>"
108-
,
102+
"</script>",
109103
"",
110104
"<template>",
111105
"\t<div>",
@@ -124,8 +118,7 @@
124118
"body": [
125119
"<script setup lang='ts'>",
126120
"",
127-
"</script>"
128-
,
121+
"</script>",
129122
"",
130123
"<template>",
131124
"\t<div>",

0 commit comments

Comments
 (0)