Merge pull request #116 from FluentifyJs/feature/fixing-storybook

Correcting issues with storybook and added devcontainer for easy development

Author: AlexanderYW

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+# [Choice] Node.js version: 14, 12, 10
+ARG VARIANT=14
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
+USER root
+RUN apt-get update
+
+ARG USER_UID=1000
+ARG USER_GID=$USER_UID
+RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
+        groupmod --gid $USER_GID node \
+        && usermod --uid $USER_UID --gid $USER_GID node \
+        && chmod -R $USER_UID:$USER_GID /home/node \
+        && chmod -R $USER_UID:root /usr/local/share/nvm /usr/local/share/npm-global; \
+    fi

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 10, 12, 14
+		"args": { "VARIANT": "14" }
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": { 
+		"terminal.integrated.shell.linux": "/bin/bash"
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint",
+		"octref.vetur",
+		"liuji-jim.vue",
+		"eamodio.gitlens",
+		"wix.vscode-import-cost",
+		"mrmlnc.vscode-scss"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [9000],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
+    config.watch = true
 
     // Make whatever fine-grained changes you need
     config.module.rules.push({

README.md

@@ -4,9 +4,10 @@
 ![image](https://img.shields.io/npm/dm/@fluentify/fluentify.svg)
 ![image](https://img.shields.io/npm/v/@fluentify/fluentify.svg)
 ![image](https://img.shields.io/npm/l/@fluentify/fluentify.svg)
-[![image](https://github.com/FluentifyJs/fluentify/workflows/Javascript%20and%20css%20linting/badge.svg)](https://github.com/FluentifyJs/fluentify/actions?query=workflow%3A%22Javascript+and+css+linting%22)
-
+![Javascript and css linting](https://github.com/FluentifyJs/fluentify/workflows/Javascript%20and%20css%20linting/badge.svg)
+![CodeQL](https://github.com/FluentifyJs/fluentify/workflows/CodeQL/badge.svg)
 
+### [View demo](https://fluent.ayw.io/)
 
 ## This Components framework is *Work in progress*, please keep that in mind that it's not ready for production yet, feel free to contribute and get it ready faster 
 

package.json

@@ -5,7 +5,6 @@
   "author": "Alexander Wennerstrøm <[email protected]>",
   "scripts": {
     "build": "vue-cli-service build",
-    "serve": "vue-cli-service serve",
     "test": "cross-env BABEL_ENV=test karma start test/karma.conf.js --single-run",
     "clean": "rimraf dist",
     "coverage": "cross-env BABEL_ENV=test karma start test/karma.conf.js",
@@ -16,10 +15,14 @@
     "prepublish": "npm run build",
     "pretest": "npm run lint",
     "storybook:build": "build-storybook",
-    "storybook:serve": "start-storybook"
+    "storybook:serve": "start-storybook -p 9000"
+  },
+  "dependencies": {
+    "vue": "^2.6.12"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@storybook/preset-scss": "^1.0.2",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-links": "^6.0.21",
     "@storybook/vue": "^6.0.21",
@@ -50,43 +53,6 @@
   "bugs": {
     "url": "https://github.com/FluentifyJs/fluentify/issues"
   },
-  "dllPlugin": {
-    "name": "vuePluginTemplateDeps",
-    "include": [
-      "mocha/mocha.js",
-      "!!style-loader!!css-loader!mocha-css",
-      "html-entities",
-      "vue/dist/vue.js",
-      "chai",
-      "core-js/library",
-      "url",
-      "sockjs-client",
-      "vue-style-loader/lib/addStylesClient.js",
-      "events",
-      "ansi-html",
-      "style-loader/lib/addStyles.js"
-    ],
-    "loaders": [
-      "style-loader",
-      {
-        "loader": "css-loader",
-        "options": {
-          "importLoaders": 1
-        }
-      },
-      {
-        "loader": "sass-loader",
-        "options": {
-          "importLoaders": 1
-        }
-      }
-    ]
-  },
-  "files": [
-    "/build/",
-    "/dist/",
-    "/src/"
-  ],
   "homepage": "https://github.com/FluentifyJs/fluentify#readme",
   "keywords": [
     "vue",
@@ -114,9 +80,5 @@
     "url": "git+https://github.com/FluentifyJs/fluentify.git"
   },
   "style": "dist/fluentify.css",
-  "unpkg": "dist/fluentify.js",
-  "dependencies": {
-    "@storybook/preset-scss": "^1.0.2",
-    "vue": "^2.6.12"
-  }
+  "unpkg": "dist/fluentify.js"
 }