From 38590b306210a96731ef89d48d1a90180314e9ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 5 Nov 2020 15:13:38 +0100
Subject: [PATCH] Add Storybook Docs + PostCSS/TailwindCSS builder

---
 .storybook/main.js           | 21 +++++++++++++++++----
 .storybook/postcss.config.js |  3 +++
 .storybook/preview.js        |  4 +++-
 .storybook/webpack.config.js | 23 +++++++++++++++++++++++
 package.json                 |  2 ++
 5 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 .storybook/postcss.config.js
 create mode 100644 .storybook/webpack.config.js

diff --git a/.storybook/main.js b/.storybook/main.js
index b802a7c..18fe011 100644
--- a/.storybook/main.js
+++ b/.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"
   ]
-}
\ No newline at end of file
+};
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
new file mode 100644
index 0000000..778ad2e
--- /dev/null
+++ b/.storybook/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = () => ({
+  plugins: [require("tailwindcss")]
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5d00c02..166d62a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,6 @@
+import "../assets/css/tailwind.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
\ No newline at end of file
+  layout: "centered"
+};
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 0000000..0efd0b4
--- /dev/null
+++ b/.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;
+};
diff --git a/package.json b/package.json
index 8931ade..6e34d67 100644
--- a/package.json
+++ b/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"
   }
 }