Feature/storybook

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    "@vue/cli-plugin-babel/preset"
+    "@vue/cli-plugin-babel/preset",
+    "@babel/preset-typescript"
   ]
 }

.env.development

@@ -0,0 +1,3 @@
+VUE_APP_MIDDLELAYER_API="https://dev.impresso-project.ch"
+VUE_APP_MIDDLELAYER_API_PATH="/api"
+VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"

.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+};

.gitignore

@@ -29,3 +29,7 @@ tmp/
 
 # redis files
 *.rdb
+
+# Local Netlify folder
+.netlify
+impresso-frontend.code-workspace

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.storybook/main.js

@@ -0,0 +1,56 @@
+const path = require('path');
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-scss"
+  ],
+  "framework": "@storybook/vue",
+  webpackFinal: (config) => {
+
+    config.module.rules.push({
+      resourceQuery: /blockType=i18n/,
+      type: 'javascript/auto',
+      loader: require.resolve('@intlify/vue-i18n-loader')
+    })
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        require.resolve("vue-style-loader"),
+        require.resolve("css-loader"),
+        require.resolve("sass-loader"),
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.sass$/,
+      use: [
+        require.resolve("vue-style-loader"),
+        require.resolve("css-loader"),
+        {
+          loader: require.resolve("sass-loader"),
+          options: {
+            sassOptions: {
+              indentedSyntax: true
+            }
+          }
+        }
+      ],
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": path.resolve(__dirname, "../src/"),
+    };
+    // keep this if you're doing typescript
+    config.resolve.extensions.push(".ts", ".tsx");
+    return config;
+  },
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import { Plugin as Fragment } from 'vue-fragment'
+
+Vue.use(VueI18n);
+Vue.use(Fragment)
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+

Makefile

@@ -7,6 +7,15 @@ build:
 	--build-arg GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	--build-arg GIT_REVISION=$(shell git rev-parse --short HEAD) .
 
+build-netlify:
+	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
+	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
+	GIT_REVISION=$(shell git rev-parse --short HEAD) \
+	PUBLIC_PATH=/ \
+	NODE_OPTIONS=--openssl-legacy-provider npm run build && \
+	netlify deploy --prod --dir=dist
+
+
 run-dev:
 	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
 	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200