feat: support plugins

Enable multi-framework support
histoire-dev · Jul 28, 2022 · 3357c46 · 3357c46
1 parent e4254ed
commit 3357c46
Show file tree

Hide file tree

Showing 47 changed files with 505 additions and 170 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -32,7 +32,23 @@ module.exports = {
     },
 
     nav: [
-      { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Guide',
+        items: [
+          {
+            text: 'About',
+            link: '/guide/',
+          },
+          {
+            text: 'Vue 3',
+            link: '/guide/vue3/getting-started',
+          },
+          {
+            text: 'Plugins',
+            link: '/guide/plugins/official',
+          },
+        ],
+      },
       { text: 'Examples', link: '/examples/' },
       { text: 'API Reference', link: '/reference/config' },
       {
@@ -89,9 +105,9 @@ module.exports = {
           ],
         },
       ],
-      '/guide/': [
+      '/guide/vue3': [
         {
-          text: 'Guide',
+          text: 'Guide - Vue 3',
           collapsible: true,
           items: [
             {
@@ -100,18 +116,12 @@ module.exports = {
             },
             {
               text: 'Getting Started',
-              link: '/guide/getting-started',
+              link: '/guide/vue3/getting-started',
             },
             {
               text: 'Configuration',
               link: '/guide/config',
             },
-          ],
-        },
-        {
-          text: 'Using with Vue 3',
-          collapsible: true,
-          items: [
             {
               text: 'Stories',
               link: '/guide/vue3/stories',
@@ -138,6 +148,8 @@ module.exports = {
             },
           ],
         },
+      ],
+      '/guide/plugins': [
         {
           text: 'Plugins',
           items: [

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -45,91 +45,6 @@ Histoire is an Open-Source project supported by our sponsors - thank you!
 | [React](https://reactjs.org/) | - | TBD ([Alternative](https://www.ladle.dev)) | - | - |
 
 
-## Installation
+## Guides
 
-Install the `histoire` package into your project:
-
-```shell
-pnpm i -D histoire
-# OR
-npm i -D histoire
-# OR
-yarn add -D histoire
-```
-
-## Command Line Interface
-
-Histoire provides two commands:
-- `histoire dev`: starts a development server with hot-reload
-- `histoire build`: builds the app for production
-- `histoire preview`: starts an HTTP server that serves the built app
-
-You can add these to your `package.json` like this:
-
-```json
-{
-  "scripts": {
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview"
-  }
-}
-```
-
-And then run them with `npm run story:dev` or `npm run story:build`.
-
-You can specify additional CLI options like `--port`. For a full list of CLI options, run `npx histoire --help` in your project.
-
-## TypeScript
-
-To enable the global components types in your project, create an `env.d.ts` file at the root of your project if it doesn't already exist.
-
-```ts
-/// <reference types="histoire/vue" />
-```
-
-And add it in the `include` field of your `tsconfig.json`.
-
-Example:
-
-```json
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "esnext",
-    "lib": ["esnext"],
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "jsx": "preserve"
-  },
-  "include": [
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ]
-}
-```
-
-## Nuxt
-
-Histoire supports Nuxt 3 with the `@histoire/plugin-nuxt` package.
-
-```bash
-pnpm add -D @histoire/plugin-nuxt
-```
-
-Add the plugin in histoire config:
-
-```js
-import { defineConfig } from 'histoire'
-import { HstNuxt } from '@histoire/plugin-nuxt'
-
-export default defineConfig({
-  plugins: [
-    HstNuxt(),
-  ],
-})
-```
+[Vue 3](./vue3/getting-started.md)
diff --git a/docs/guide/plugins/official.md b/docs/guide/plugins/official.md
@@ -1,5 +1,6 @@
 # Official Plugins
 
-- Nuxt 3 [@histoire/plugin-nuxt](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-nuxt)
-- Visual regression testing with Percy [@histoire/plugin-percy](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-percy)
-- Visual regression testing (simple) [@histoire/plugin-screenshot](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-screenshot)
+- [@histoire/plugin-vue](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-vue): Vue 3 (support plugin)
+- [@histoire/plugin-nuxt](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-nuxt): Nuxt 3
+- [@histoire/plugin-percy](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-percy): Visual regression testing with Percy
+- [@histoire/plugin-screenshot](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-screenshot): Visual regression testing (simple)
diff --git a/docs/guide/vue3/getting-started.md b/docs/guide/vue3/getting-started.md
@@ -0,0 +1,139 @@
+<script setup>
+function playAudio () {
+  document.querySelector('#histoire-audio').play()
+}
+</script>
+
+<audio id="histoire-audio">
+  <source src="/histoire.mp3" type="audio/mpeg">
+</audio>
+
+# Getting started with Histoire
+
+## Overview
+
+> Histoire is the French word for "Story" and is pronounced `/is.twaʁ/`, like "is·twar" <button class="btn p-1 leading-none" v-on:click="playAudio"><Icon icon="carbon:volume-up-filled" class="w-4 h-4 align-middle"/></button>
+
+Histoire is a tool to generate stories applications (or "books").
+
+[Learn more about Histoire here &raquo;](../index.md)
+
+<DemoLinks />
+
+## Sponsors
+
+Histoire is an Open-Source project supported by our sponsors - thank you!
+
+<div class="flex justify-center mt-6 mb-12 gap-2">
+  <SponsorButton/>
+  <a
+    href="./index.html#sponsors"
+    class="px-4 py-2 btn inline-flex items-center gap-2 !font-normal"
+  >
+    See our sponsors &raquo;
+  </a>
+</div>
+
+## Installation
+
+Install the `histoire` and `@histoire/plugin-vue` packages into your project:
+
+```shell
+pnpm i -D histoire @histoire/plugin-vue
+# OR
+npm i -D histoire @histoire/plugin-vue
+# OR
+yarn add -D histoire @histoire/plugin-vue
+```
+
+Create an `histoire.config.js` or `histoire.config.ts` file in your project root to enable the Vue plugin:
+
+```ts
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    HstVue(),
+  ],
+})
+```
+
+## Command Line Interface
+
+Histoire provides two commands:
+- `histoire dev`: starts a development server with hot-reload
+- `histoire build`: builds the app for production
+- `histoire preview`: starts an HTTP server that serves the built app
+
+You can add these to your `package.json` like this:
+
+```json
+{
+  "scripts": {
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
+  }
+}
+```
+
+And then run them with `npm run story:dev` or `npm run story:build`.
+
+You can specify additional CLI options like `--port`. For a full list of CLI options, run `npx histoire --help` in your project.
+
+## TypeScript
+
+To enable the global components types in your project, create an `env.d.ts` file at the root of your project if it doesn't already exist.
+
+```ts
+/// <reference types="@histoire/plugin-vue/components" />
+```
+
+And add it in the `include` field of your `tsconfig.json`.
+
+Example:
+
+```json
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": ["esnext"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ]
+}
+```
+
+## Nuxt
+
+Histoire supports Nuxt 3 with the `@histoire/plugin-nuxt` package.
+
+```bash
+pnpm add -D @histoire/plugin-nuxt
+```
+
+Add the plugin in histoire config:
+
+```js
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import { HstNuxt } from '@histoire/plugin-nuxt'
+
+export default defineConfig({
+  plugins: [
+    HstVue(),
+    HstNuxt(),
+  ],
+})
+```
diff --git a/examples/nuxt3/histoire.config.ts b/examples/nuxt3/histoire.config.ts
@@ -1,8 +1,10 @@
 import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
 import { HstNuxt } from '@histoire/plugin-nuxt'
 
 export default defineConfig({
   plugins: [
+    HstVue(),
     HstNuxt(),
   ],
 })
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@histoire/plugin-nuxt": "workspace:*",
+    "@histoire/plugin-vue": "workspace:*",
     "@nuxtjs/tailwindcss": "^5.1.2",
     "histoire": "workspace:*",
     "nuxt": "^3.0.0-rc.3"

diff --git a/examples/vue3-percy/histoire.config.ts b/examples/vue3-percy/histoire.config.ts
@@ -1,8 +1,10 @@
 import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
 import { HstPercy } from '@histoire/plugin-percy'
 
 export default defineConfig({
   plugins: [
+    HstVue(),
     HstPercy({
       ignored: ({ file }) => file.includes('tailwind-tokens'),
     }),

diff --git a/examples/vue3-percy/package.json b/examples/vue3-percy/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@histoire/plugin-percy": "workspace:*",
+    "@histoire/plugin-vue": "workspace:*",
     "@vitejs/plugin-vue": "^2.3.1",
     "histoire": "workspace:*",
     "vite": "^2.9.1"

diff --git a/examples/vue3-screenshot/histoire.config.ts b/examples/vue3-screenshot/histoire.config.ts
@@ -1,8 +1,10 @@
 import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
 import { HstScreenshot } from '@histoire/plugin-screenshot'
 
 export default defineConfig({
   plugins: [
+    HstVue(),
     HstScreenshot({
       ignored: ({ file }) => file.includes('tailwind-tokens'),
     }),

diff --git a/examples/vue3-screenshot/package.json b/examples/vue3-screenshot/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@histoire/plugin-screenshot": "workspace:*",
+    "@histoire/plugin-vue": "workspace:*",
     "@vitejs/plugin-vue": "^2.3.1",
     "histoire": "workspace:*",
     "vite": "^2.9.1"

diff --git a/examples/vue3-themed/histoire.config.ts b/examples/vue3-themed/histoire.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    HstVue(),
+  ],
+})
diff --git a/examples/vue3-themed/package.json b/examples/vue3-themed/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.1",
+    "@histoire/plugin-vue": "workspace:*",
     "histoire": "workspace:*",
     "vite": "^2.9.1"
   }

diff --git a/examples/vue3-vuetify/histoire.config.ts b/examples/vue3-vuetify/histoire.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    HstVue(),
+  ],
+})