Add storybook setup for vue

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports ={
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/vue",
+  "staticDirs": [
+    { from: "../locales", to: "/locales" },
+    { from: "../src/css", to: "/css" },
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,68 @@
+import Vue from "vue";
+import VueI18Next from "@panter/vue-i18next";
+import i18next from "i18next";
+import i18nextXHRBackend from "i18next-xhr-backend";
+
+/**
+ * Logic from ../src/js/localization.js
+ */
+function parseInputFile(data) {
+  // Remove the $n interpolate of Chrome $1, $2, ... -> {{1}}, {{2}}, ...
+  const REGEXP_CHROME = /\$([1-9])/g;
+  const dataChrome = data.replace(REGEXP_CHROME, "{{$1}}");
+
+  // Remove the .message of the nesting $t(xxxxx.message) -> $t(xxxxx)
+  const REGEXP_NESTING = /\$t\(([^\)]*).message\)/g;
+  const dataNesting = dataChrome.replace(REGEXP_NESTING, "$t($1)");
+
+  // Move the .message of the json object to root xxxxx.message -> xxxxx
+  const jsonData = JSON.parse(dataNesting);
+  Object.entries(jsonData).forEach(([key, value]) => {
+    jsonData[key] = value.message;
+  });
+
+  return jsonData;
+}
+
+i18next.use(i18nextXHRBackend).init({
+  lng: "en",
+  debug: true,
+  getAsync: false,
+  ns: ["messages"],
+  defaultNS: ["messages"],
+  fallbackLng: {
+    default: ["en"],
+  },
+  backend: {
+    loadPath: "/locales/{{lng}}/{{ns}}.json",
+    parse: parseInputFile,
+  },
+});
+
+Vue.use(VueI18Next);
+
+const i18n = new VueI18Next(i18next);
+
+export const decorators = [
+  (story) => ({
+    i18n,
+    components: { story },
+    template: `
+    <div style="margin: 1rem;">
+      <link rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" />
+      <link rel="stylesheet" href="/css/main.css" />
+      <story />
+    </div>
+`,
+  }),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

package.json

@@ -16,7 +16,8 @@
     "pretest": "yarn run lint",
     "test": "karma start test/karma.conf.js",
     "lint": "eslint --ext .js,.vue src gulpfile.js gulp-appdmg.js",
-    "lint:fix": "eslint --fix src gulpfile.js gulp-appdmg.js"
+    "lint:fix": "eslint --fix src gulpfile.js gulp-appdmg.js",
+    "storybook": "start-storybook -p 6006"
   },
   "window": {
     "icon": "images/bf_icon_128.png",
@@ -77,11 +78,17 @@
     "vue": "2.6.12"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.9",
     "@quanle94/innosetup": "^6.0.2",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/vue": "^6.4.22",
+    "babel-loader": "^8.2.4",
     "browserify": "^17.0.0",
     "chai": "^4.2.0",
     "command-exists": "^1.2.8",
@@ -129,6 +136,7 @@
     "temp": "^0.9.1",
     "through2": "^4.0.2",
     "vinyl-source-stream": "^2.0.0",
+    "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.12",
     "yarn": "^1.22.17"
   },

src/components/betaflight-logo/BetaflightLogo.stories.js

@@ -0,0 +1,20 @@
+import BetaflightLogo from './BetaflightLogo.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Logo',
+  component: BetaflightLogo,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BetaflightLogo },
+  template: '<betaflight-logo v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  configuratorVersion: '1.0.0',
+};

src/components/betaflight-logo/BetaflightLogo.vue

@@ -42,7 +42,7 @@ export default {
 .logo {
   height: 70px;
   width: 240px;
-  background-image: url(./images/light-wide-2.svg);
+  background-image: url(../../images/light-wide-2.svg);
   background-repeat: no-repeat;
   background-position: left center;
   background-size: contain;
@@ -70,7 +70,7 @@ export default {
   .logo {
     height: 24px;
     width: 150px;
-    background-image: url(./images/light-wide-2-compact.svg);
+    background-image: url(../../images/light-wide-2-compact.svg);
     background-position: left center;
     order: 2;
     margin-top: 0;
@@ -80,7 +80,7 @@ export default {
   }
   .tab_container .logo {
     display: block;
-    background-image: url(./images/light-wide-2.svg);
+    background-image: url(../../images/light-wide-2.svg);
     background-repeat: no-repeat;
     background-position: center 20px;
     background-position-x: 12px;

src/components/init.js

@@ -41,7 +41,6 @@ i18next.on('initialized', function() {
         },
         data: betaflightModel,
     });
-
 });