Add Storybook Docs + PostCSS/TailwindCSS builder

.storybook/main.js

@@ -1,10 +1,23 @@
+const path = require("path");
+
 module.exports = {
-  "stories": [
+  stories: [
     "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../components/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            "@": path.resolve(__dirname, "../")
+          }
+        }
+      }
+    },
     "@storybook/addon-links",
     "@storybook/addon-essentials"
   ]
-}
+};

.storybook/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = () => ({
+  plugins: [require("tailwindcss")]
+});

.storybook/preview.js

@@ -1,4 +1,6 @@
+import "../assets/css/tailwind.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  layout: "centered"
+};

.storybook/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require("path");
+
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.css$/,
+    use: [
+      // Loader for webpack to process CSS with PostCSS
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: true,
+          config: {
+            path: "./.storybook/"
+          }
+        }
+      }
+    ],
+
+    include: path.resolve(__dirname, "../")
+  });
+
+  return config;
+};

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^3.1.0",
     "@storybook/addon-actions": "^6.0.28",
+    "@storybook/addon-docs": "^6.0.28",
     "@storybook/addon-essentials": "^6.0.28",
     "@storybook/addon-links": "^6.0.28",
     "@storybook/vue": "^6.0.28",
@@ -31,6 +32,7 @@
     "jest": "^26.5.0",
     "react-is": "^17.0.1",
     "stylelint-config-standard": "^20.0.0",
+    "vue-docgen-api": "^4.33.4",
     "vue-jest": "^3.0.4"
   }
 }