Add Histoire snippets

README.md

@@ -128,6 +128,27 @@ These snippets were made to speed up Vue 3 development. With it you can write bo
 
 > Snippets with ⚠️ symbol are unreleased.
 
+### Histoire
+
+| Snippet                   | Purpose                              |
+| ------------------------- | ------------------------------------ |
+| ⚠️ `hconfig`               | Histoire config for Vue 3            |
+| ⚠️ `hconfig-nuxt`          | Histoire config for Nuxt 3           |
+| ⚠️ `hbase`                 | Base code for story                  |
+| ⚠️ `hbase-variant`         | Base code for story with variant     |
+| ⚠️ `hbase-grid`            | Base code for story with grid layout |
+| ⚠️ `hvariant`              | Story variant                        |
+| ⚠️ `hgrid`                 | Histoire grid layout                 |
+| ⚠️ `hcontrols-base`        | Histoire controls base               |
+| ⚠️ `hcontrols-button`      | Histoire controls - Button           |
+| ⚠️ `hcontrols-buttongroup` | Histoire controls - Button Group     |
+| ⚠️ `hcontrols-checkbox`    | Histoire controls - Checkbox         |
+| ⚠️ `hcontrols-number`      | Histoire controls - Number           |
+| ⚠️ `hcontrols-text`        | Histoire controls - Text             |
+| ⚠️ `hcontrols-textarea`    | Histoire controls - Textarea         |
+
+> Snippets with ⚠️ symbol are unreleased.
+
 ## Contributing
 
 This is an open source project open to anyone. Contributors are welcome on [GitHub](https://github.com/exer7um/vue3-vscode-snippets).

package.json

@@ -49,47 +49,63 @@
     "snippets": [
       {
         "language": "vue",
-        "path": "./snippets/vue.code-snippets"
+        "path": "./snippets/vue/vue.code-snippets"
       },
       {
         "language": "html",
-        "path": "./snippets/vue-template.code-snippets"
+        "path": "./snippets/vue/vue-template.code-snippets"
       },
       {
         "language": "javascript",
-        "path": "./snippets/vue-script.code-snippets"
+        "path": "./snippets/vue/vue-script.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/vue-script.code-snippets"
+        "path": "./snippets/vue/vue-script.code-snippets"
       },
       {
         "language": "javascript",
-        "path": "./snippets/pinia.code-snippets"
+        "path": "./snippets/pinia/pinia.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/pinia.code-snippets"
+        "path": "./snippets/pinia/pinia.code-snippets"
       },
       {
         "language": "javascript",
-        "path": "./snippets/vue-router.code-snippets"
+        "path": "./snippets/vue/vue-router.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/vue-router.code-snippets"
+        "path": "./snippets/vue/vue-router.code-snippets"
       },
       {
         "language": "html",
-        "path": "./snippets/nuxt-template.code-snippets"
+        "path": "./snippets/nuxt/nuxt-template.code-snippets"
       },
       {
         "language": "javascript",
-        "path": "./snippets/nuxt-script.code-snippets"
+        "path": "./snippets/nuxt/nuxt-script.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/nuxt-script.code-snippets"
+        "path": "./snippets/nuxt/nuxt-script.code-snippets"
+      },
+      {
+        "language": "vue",
+        "path": "./snippets/histoire/histoire.code-snippets"
+      },
+      {
+        "language": "html",
+        "path": "./snippets/histoire/histoire-template.code-snippets"
+      },
+      {
+        "language": "javascript",
+        "path": "./snippets/histoire/histoire-script.code-snippets"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/histoire/histoire-script.code-snippets"
       }
     ]
   }

snippets/histoire/histoire-script.code-snippets

@@ -0,0 +1,32 @@
+{
+  "Histoire config": {
+    "prefix": "hconfig",
+    "body": [
+      "import { defineConfig } from 'histoire'",
+      "import { HstVue } from '@histoire/plugin-vue'",
+      "",
+      "export default defineConfig({",
+      "\tplugins: [",
+      "\t\tHstVue(),",
+      "\t],",
+      "})"
+    ],
+    "description": "Histoire config for Vue 3"
+  },
+  "Histoire config - Nuxt": {
+    "prefix": "hconfig-nuxt",
+    "body": [
+      "import { defineConfig } from 'histoire'",
+      "import { HstVue } from '@histoire/plugin-vue'",
+      "import { HstNuxt } from '@histoire/plugin-nuxt'",
+      "",
+      "export default defineConfig({",
+      "\tplugins: [",
+      "\t\tHstVue(),",
+      "\t\tHstNuxt(),",
+      "\t],",
+      "})"
+    ],
+    "description": "Histoire config for Nuxt 3"
+  },
+}

snippets/histoire/histoire-template.code-snippets

@@ -0,0 +1,93 @@
+{
+  "Histoire story variant": {
+    "prefix": "hvariant",
+    "body": [
+      "<Variant title='${1:variantTitle}'>",
+      "\t$0",
+      "</Variant>",
+    ],
+    "description": "Story variant"
+  },
+  "Histoire grid layout": {
+    "prefix": "hgrid",
+    "body": [
+      ":layout='{ type: 'grid', width: ${1:gridWidth} }'",
+    ],
+    "description": "Histoire grid layout"
+  },
+  "Histoire controls": {
+    "prefix": "hcontrols-base",
+    "body": [
+      "<template #controls>",
+      "\t$0",
+      "</template>"
+    ],
+    "description": "Histoire controls base"
+  },
+  "Histoire controls - Button": {
+    "prefix": "hcontrols-button",
+    "body": [
+      "<HstButton class='htw-p-2'>",
+      "\t$0",
+      "</HstButton>"
+    ],
+    "description": "Histoire controls - Button"
+  },
+  "Histoire controls - Button Group": {
+    "prefix": "hcontrols-buttongroup",
+    "body": [
+      "<HstButtonGroup",
+      "\tv-model='${2:vModel}'",
+      "\ttitle='${1:label}'",
+      "\t:options='[",
+      "\t\t{",
+      "\t\t\tlabel: '${3:optionTitle}',",
+      "\t\t\tvalue: '${4:optionValue}'",
+      "\t\t}",
+      "\t]'",
+      "/>",
+    ],
+    "description": "Histoire controls - Button Group"
+  },
+  "Histoire controls - Checkbox": {
+    "prefix": "hcontrols-checkbox",
+    "body": [
+      "<HstCheckbox",
+      "\tv-model='${2:vModel}'",
+      "\ttitle='${1:label}'",
+      "/>"
+    ],
+    "description": "Histoire controls - Checkbox"
+  },
+  "Histoire controls - Number": {
+    "prefix": "hcontrols-number",
+    "body": [
+      "<HstNumber",
+      "\tv-model='${2:vModel}'",
+      "\t:step='1'",
+      "\ttitle='${1:label}'",
+      "/>"
+    ],
+    "description": "Histoire controls - Number"
+  },
+  "Histoire controls - Text": {
+    "prefix": "hcontrols-text",
+    "body": [
+      "<HstText",
+      "\tv-model='${2:vModel}'",
+      "\ttitle='${1:label}'",
+      "/>"
+    ],
+    "description": "Histoire controls - Text"
+  },
+  "Histoire controls - Textarea": {
+    "prefix": "hcontrols-textarea",
+    "body": [
+      "<HstTextarea",
+      "\tv-model='${2:vModel}'",
+      "\ttitle='${1:label}'",
+      "/>"
+    ],
+    "description": "Histoire controls - Textarea"
+  },
+}

snippets/histoire/histoire.code-snippets

@@ -0,0 +1,54 @@
+{
+  "Histoire story base": {
+    "prefix": "hbase",
+    "body": [
+      "<script setup lang='ts'>",
+      "",
+      "</script>",
+      "",
+      "<template>",
+      "\t<Story title='${1:storyTitle}'>",
+      "\t\t$0",
+      "\t</Story>",
+      "</template>",
+    ],
+    "description": "Base code for story"
+  },
+  "Histoire story base with variant": {
+    "prefix": "hbase-variant",
+    "body": [
+      "<script setup lang='ts'>",
+      "",
+      "</script>",
+      "",
+      "<template>",
+      "\t<Story title='${1:storyTitle}'>",
+      "\t\t<Variant title='${2:variantTitle}'>",
+      "\t\t\t$0",
+      "\t\t</Variant>",
+      "\t</Story>",
+      "</template>",
+    ],
+    "description": "Base code for story with variant"
+  },
+  "Histoire story base with grid layout": {
+    "prefix": "hbase-grid",
+    "body": [
+      "<script setup lang='ts'>",
+      "",
+      "</script>",
+      "",
+      "<template>",
+      "\t<Story",
+      "\t\ttitle='${1:storyTitle}'",
+      "\t\t:layout='{ type: 'grid', width: 300 }'",
+      "\t/>",
+      "\t\t<Variant title='${2:variantTitle}'>",
+      "\t\t\t$0",
+      "\t\t</Variant>",
+      "\t</Story>",
+      "</template>",
+    ],
+    "description": "Base code for story with grid layout"
+  },
+}

snippets/vue.code-snippets → snippets/vue/vue.code-snippets

@@ -4,8 +4,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -24,8 +23,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -44,8 +42,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -64,8 +61,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -84,8 +80,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -104,8 +99,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",
@@ -124,8 +118,7 @@
     "body": [
       "<script setup lang='ts'>",
       "",
-      "</script>"
-      ,
+      "</script>",
       "",
       "<template>",
       "\t<div>",