chore: replace storybook with a custom library

Author: egoist

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.storybook/config.js

@@ -19,27 +19,23 @@
     "prepublishOnly": "npm run build",
     "test": "echo fine",
     "build": "bili --format cjs,es,umd,umd-min --module-name contentLoaders",
-    "storybook": "poi --config .storybook/poi.config.js",
-    "build:storybook": "poi build --config .storybook/poi.config.js"
+    "storybook": "poi -so --config stories/poi.config.js",
+    "build:storybook": "poi --prod --config stories/poi.config.js"
   },
   "author": {
     "name": "EGOIST",
     "email": "[email protected]"
   },
   "license": "MIT",
-  "poi": {
-    "entry": "example/index.js",
-    "dist": "example/dist",
-    "homepage": "./"
-  },
   "devDependencies": {
-    "@poi/plugin-storybook": "^10.0.0-rc.2",
-    "@storybook/vue": "^3.3.15",
+    "@types/poi": "^12.5.0",
     "babel-plugin-transform-vue-jsx": "^4",
     "bili": "^3.0.12",
-    "poi": "^10.0.0-rc.6",
-    "vue-test-utils": "^1.0.0-beta.9",
-    "webpack": "^4.2.0"
+    "poi": "^12.6.10",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.6",
+    "vue-template-compiler": "^2.6.10",
+    "vue-test-utils": "^1.0.0-beta.9"
   },
   "dependencies": {
     "babel-helper-vue-jsx-merge-props": "^2.0.3"

.storybook/manager.ejs

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="sidebar">
+      <div class="sections">
+        <div class="section" v-for="(section, sectionIndex) in sections" :key="sectionIndex">
+          <div class="section-title">{{ section.title }}</div>
+          <div class="stories">
+            <router-link
+              :to="{ query: { section: section.title, story: story.title } }"
+              class="story-title"
+              v-for="(story, storyIndex) in section.stories"
+              :key="storyIndex"
+            >{{ story.title }}</router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+      <component :is="currentComponent"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['sections', 'site'],
+
+  computed: {
+    current() {
+      const { query } = this.$route
+      for (const section of this.sections) {
+        if (section.title === query.section) {
+          for (const story of section.stories) {
+            if (story.title === query.story) {
+              return {
+                section,
+                story
+              }
+            }
+          }
+        }
+      }
+    },
+
+    currentComponent() {
+      if (this.current) {
+        const { story } = this.current
+        return typeof story.component === 'function'
+          ? story.component()
+          : story.component
+      }
+    },
+
+    currentTitle() {
+      if (this.current) {
+        const { story, section } = this.current
+        return `${story.title} ${section.title} - - ${this.site.title}`
+      }
+      return this.site.title
+    }
+  },
+
+  watch: {
+    currentTitle: {
+      handler(title) {
+        document.title = title
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style>
+:root {
+  --sidebar-width: 240px;
+}
+</style>
+
+<style scoped>
+.sidebar {
+  border-right: 1px solid #e2e2e2;
+  width: var(--sidebar-width);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.section:not(:last-child) {
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.section-title {
+  padding: 10px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.story-title {
+  display: block;
+  padding: 10px;
+  color: blue;
+  text-decoration: none;
+}
+
+.story-title:hover {
+  background: #f9f9f9;
+}
+
+.story-title.router-link-exact-active {
+  background: #f0f0f0;
+}
+
+.main {
+  padding: 20px;
+  margin-left: var(--sidebar-width);
+}
+</style>