Merge branch 'release/3.0.0'

.browserslistrc

-> 1%
-last 2 versions
-not ie <= 8

.editorconfig

-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-max_line_length = 100

.env.dev

-NODE_ENV=development
-VUE_APP_DEPLOYMENT_ENV=dev
-VUE_APP_CAS_SERVER=https://cas6-dev.unistra.fr

.env.preprod

-NODE_ENV=production
-VUE_APP_DEFAULT_LOCALE=fr
-VUE_APP_DEPLOYMENT_ENV=preprod
-VUE_APP_BASE_URL=https://dynamic-forms-pprd.unistra.fr
-VUE_APP_JWT_SERVER=https://jwtserver-pprd.app.unistra.fr/api
-VUE_APP_CAS_SERVER=https://cas.unistra.fr

.env.prod

-NODE_ENV=production
-VUE_APP_DEFAULT_LOCALE=fr
-VUE_APP_DEPLOYMENT_ENV=prod
-VUE_APP_BASE_URL=https://dynamic-forms.app.unistra.fr
-VUE_APP_JWT_SERVER=https://jwtserver.app.unistra.fr/api
-VUE_APP_CAS_SERVER=https://cas.unistra.fr

.env.testenv

-NODE_ENV=production
-VUE_APP_DEFAULT_LOCALE=fr
-VUE_APP_DEPLOYMENT_ENV=test
-VUE_APP_BASE_URL=https://dynamic-forms-test.u-strasbg.fr
-VUE_APP_JWT_SERVER=https://jwtserver-test.app.unistra.fr/api
-VUE_APP_CAS_SERVER=https://cas6-dev.unistra.fr

.eslintrc.js

 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
   extends: [
-    'plugin:vue/essential',
-    'eslint:recommended'
+    'airbnb-base',
+    'plugin:vue/recommended',
+    'plugin:prettier/recommended',
   ],
-  // plugins: [
-  //   'vuetify',
-  // ],
-  rules: {
-    // 'vuetify/no-deprecated-classes': 'error',
-    // 'vuetify/grid-unknown-attributes': 'error',
-    // 'vuetify/no-legacy-grid': 'error',
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-param-reassign': ['error', {
-      props: true,
-      ignorePropertyModificationsFor: [
-        'state',
-      ],
-    }],
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)'
-      ],
-      env: {
-        mocha: true
-      }
-    }
-  ]
 };

.gitignore

@@ -6,6 +6,9 @@ node_modules
 .env.local
 .env.*.local
 
+# Local packages manager conf file
+.npmrc
+
 # Log files
 npm-debug.log*
 yarn-debug.log*

.gitlab-ci.yml

-unit test:
-  image: node:lts
-  stage: test
-  only:
-    - master
-    - develop
-  script:
-    - npm install --progress=false
-    - npm run test:unit:coverage
-  coverage: /All files\s*\|\s*([\d\.]+)/

.prettierrc.js

+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  parser: "vue",
+};

README.md

-# vuerms
+# unistra-formbuilder
 
-## Project setup
-```
-npm install
-```
+A Vuejs plugin that provides form builder and renderer components.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## How to install
 
-### Compiles and minifies for production
-```
-npm run build
+### Requirements
+
+> * vue: ^2.6.12
+> * vuetify: ^2.2.18
+> * vuex: ^3.0.1
+
+### Installation
+
+As this library isn't hosted on the npmjs registry but on our gitlab npm registry, we need to configure npm.
+
+#### NPM configuration
+```javascript
+// .npmrc
+@vue-unistra:registry=https://git.unistra.fr/api/v4/packages/npm/
 ```
 
-### Run your tests
+#### Install
 ```
-npm run test
+npm install --save @vue-unistra/unistra-formbuilder
 ```
 
-### Lints and fixes files
-```
-npm run lint
+#### Configuration
+
+##### Webpack :
+
+Add `@vue-unistra/unistra-formbuilder` to the `transpileDependencies` array, and configure webpack to load only the host application webpack `vue` and `vuetify` instances (prevents the `$attrs is readonly` and `$listeners is readonly` error messages)
+```javascript
+// vue.config.js
+
+const path = require('path');
+
+module.exports = {
+  lintOnSave: false,
+  transpileDependencies: [
+    'vuetify',
+    '@vue-unistra/unistra-formbuilder',
+  ],
+  configureWebpack: {
+    resolve: {
+      symlinks: false,
+      alias: {
+        'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.esm.js'),
+        '^vuetify': path.resolve(__dirname, './node_modules/vuetify'),
+      },
+    },
+  },
+};
 ```
 
-### Run your unit tests
+##### Vuetify :
+`VCard` component and `Ripple` directive have to be manually imported.
+```javascript
+// src/plugins/vuetify.js
+
+import Vue from 'vue';
+import Vuetify, { VCard } from 'vuetify/lib';
+import Ripple from 'vuetify/lib/directives/ripple';
+import fr from 'vuetify/es5/locale/fr';
+
+Vue.use(Vuetify, {
+  components: {
+    VCard,
+  },
+  directives: {
+    Ripple,
+  },
+});
+
+export default new Vuetify({
+  lang: {
+    locales: { fr },
+    current: 'fr',
+  },
+});
 ```
-npm run test:unit
+
+##### Unistra formbuilder :
+Create the file `src/plugins/unistra-formbuilder.js` :
+```javascript
+// src/plugins/unistra-formbuilder.js
+
+import Vue from 'vue';
+import { unistraFormbuilder } from '@vue-unistra/unistra-formbuilder';
+import store from '../store';
+
+Vue.use(unistraFormbuilder, { store });
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+And import import it in `/src/main.js` just after the vuetify import :
+```javascript
+// src/main.js
+
+import Vue from 'vue';
+import vuetify from './plugins/vuetify';
+import './plugins/unistra-formbuilder';
+import App from './App.vue';
+import store from './store';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  store,
+  vuetify,
+  render: (h) => h(App),
+}).$mount('#app');
+``` 
+
+## Usage
+
+### usf-formbuilder
+
+The `usf-formbuilder` component is used to create and edit forms. It's a drag and drop tool composed by an editor on the left side and control panel on the right side. Fields are added by dragging them from the control panel and dropping them to the editor. Fields order can be reorganized by drag and drop. Each field can be edited (display, validation, internationalization, ...) or removed. When working with authenticated forms, fields can also react to user properties.
+
+#### Props
+
+| Props         | Type    | Default | Description                                                                                                                            |
+| :------------ | :------ |:------- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| fields        | Array   | [ ]     | The array of fields to display. Contains field objects.                                                                                |
+| messages      | Object  | { }     | The internationalization object. Contains for each localization the translations of fields properties (label, hint, placeholder, ...). |
+| userTemplates | Object  | { }     | The user properties templates object. To react to user properties, fields need to know what properties are availabe                    |
+| admin         | Boolean | false   | Admin users can protect fields (not editable/removable by regular users                                                                |
+
+#### Events
+
+| Name | Return                                       | Description                          |
+| :--- | :------------------------------------------- | :----------------------------------- |
+| save | `{ fields: [ ], internationalization: { } }` | Emits when `SAVE` button is clicked. |

babel.config.js

-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-  env: {
-    test: {
-      plugins: [
-        ['istanbul', {
-          useInlineSourceMaps: false,
-        }],
-      ],
-    },
-  },
-};

bili.config.js

+module.exports = {
+  input: 'src/index.js',
+  output: {
+    extractCSS: false,
+  },
+  bundleNodeModules: true,
+  externals: [
+    'vue',
+    'vuex',
+    'vuetify/lib',
+  ],
+  plugins: {
+    vue: true,
+    vuetify: true,
+  },
+};

deploy.sh

-#!/bin/bash
-
-set -e
-
-PROJECT="vue-formbuilder"
-
-TEMP=$(mktemp -d)
-REPOSITORY=$(pwd)
-DISTANT_REPO=$(git config --get remote.origin.url)
-WORKING_DIR="$TEMP/git-clone"
-
-TEST_STATIC=("root@django-test.u-strasbg.fr:/var/www/static/dynamicforms")
-TEST_TEMPLATE=("root@django-test.u-strasbg.fr:/home/django/dynamic-forms-test.app.unistra.fr/current/dynamicforms/templates")
-PREPROD_STATIC=("root@rp-dip-pprd-public.di.unistra.fr:/var/www/static/dynamicforms")
-PREPROD_TEMPLATE=("root@django-pprd-w1:/home/django/dynamic-forms-pprd.unistra.fr/current/dynamicforms/templates" "root@django-pprd-w2:/home/django/dynamic-forms-pprd.unistra.fr/current/dynamicforms/templates")
-PROD_STATIC=("root@rp-dip-public-m.di.unistra.fr:/var/www/static/dynamicforms" "root@rp-dip-public-s.di.unistra.fr:/var/www/static/dynamicforms")
-PROD_TEMPLATE=("root@django-w3:/home/django/dynamic-forms.app.unistra.fr/current/dynamicforms/templates" "root@django-w4:/home/django/dynamic-forms.app.unistra.fr/current/dynamicforms/templates")
-
-ENVIRONMENT="$2"
-case "$ENVIRONMENT" in
-    test)
-	TARGET_STATIC=("${TEST_STATIC[@]}") 
-	TARGET_TEMPLATE=("${TEST_TEMPLATE[@]}") 
-	;;
-    preprod)
-	TARGET_STATIC=("${PREPROD_STATIC[@]}")
-	TARGET_TEMPLATE=("${PREPROD_TEMPLATE[@]}")
-	;;
-    prod)
-	TARGET_STATIC=("${PROD_STATIC[@]}")
-	TARGET_TEMPLATE=("${PROD_TEMPLATE[@]}")
-	;;
-esac
-
-cd "$TEMP"
-echo "🍻 Cloning repository"
-git clone "$REPOSITORY" "$WORKING_DIR"
-cd "$WORKING_DIR"
-echo
-echo "🔀 Switching to target build"
-git checkout $1
-echo "🏗 Installing npm dependencies"
-npm install
-echo "📦 Packaging stuff"
-npm run build:$ENVIRONMENT
-echo "🚀 Deploying files"
-echo $(pwd)
-for i in "${TARGET_STATIC[@]}"; do
-    echo "Scp static files to $i"
-    scp -r "dist/css" "$i"
-    scp -r "dist/js" "$i"
-done
-for i in "${TARGET_TEMPLATE[@]}"; do
-    echo "Scp template to $i"
-    scp "dist/base.html" "$i"
-done
-
-# SENTRY
-# Sentry needs gitlab repository to be origin
-echo "🚧 Manipulating git distant repositories"
-git remote remove origin
-git remote add origin "$DISTANT_REPO"
-PROJECT_VERSION=$(git describe --long)
-# Create a release
-echo "📌 Telling about $PROJECT_VERSION to Sentry"
-sentry-cli releases new -p "$PROJECT" "$PROJECT_VERSION"
-# Associate commits with the release
-echo "🤖 Associating commits to version"
-sentry-cli releases set-commits --auto "$PROJECT_VERSION"
-# Declare deployment
-echo "🔖 Telling Sentry that we are deploying $PROJECT_VERSION in $ENVIRONMENT"
-sentry-cli releases deploys "$PROJECT_VERSION" new -e "$ENVIRONMENT"
-echo "🎉 Successfully deployed"

nyc.config.js

-module.exports = {
-  'check-coverage': false,
-  'per-file': true,
-  'skip-full': true,
-  all: true,
-  include: [
-    'src/**/*.{js,vue}',
-  ],
-  exclude: [
-    'src/*.js',
-    '**/index.js',
-    'src/plugins/*',
-    'src/router/*',
-  ],
-  reporter: [
-    'lcov',
-    'text',
-    'text-summary',
-  ],
-  extension: [
-    '.js',
-    '.vue',
-  ],
-}

package.json

 {
-  "name": "dynamic-forms",
-  "version": "2.0.6",
-  "description": "Dynamic form building and rendering helpers using Vuejs.",
-  "author": "Unistra - DNUM",
+  "name": "@vue-unistra/unistra-formbuilder",
+  "version": "3.0.0",
+  "main": "dist/index.js",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "@vue-unistra:registry": "https://git.unistra.fr/api/v4/projects/17878/packages/npm/"
+  },
   "scripts": {
-    "serve": "vue-cli-service serve --mode dev",
-    "lint": "vue-cli-service lint",
-    "build:local": "vue-cli-service build --mode local",
-    "build:preprod": "vue-cli-service build --mode preprod",
-    "build:prod": "vue-cli-service build --mode prod",
-    "build:test": "vue-cli-service build --mode testenv",
-    "test:unit": "vue-cli-service test:unit",
-    "test:unit:coverage": "nyc vue-cli-service test:unit"
+    "build": "bili",
+    "lint": "eslint --ext .js,.vue src test",
+    "lint:fix": "eslint --ext .js,.vue src test --fix",
+    "lint:config": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
   },
-  "main": "src/plugin.js",
   "dependencies": {
-    "@sentry/browser": "^5.15.5",
-    "@sentry/integrations": "^5.15.5",
-    "core-js": "^3.4.4",
-    "gitmoji-cli": "^3.2.4",
-    "jwt-decode": "^3.0.0",
+    "date-fns": "^2.19.0",
     "lodash": "^4.17.20",
-    "moment": "^2.24.0",
     "normalizr": "^3.5.0",
-    "rich-text-editor-vuetify": "^1.1.6",
     "tiptap": "^1.26.6",
     "tiptap-extensions": "^1.28.6",
-    "unistra-box": "git+https://git.unistra.fr/vue/unistra-box.git#master",
-    "vue": "^2.6.10",
-    "vue-axios": "^2.1.4",
-    "vue-cas-authentication": "git+https://git.unistra.fr/vue/cas-authentication.git#1.4.1",
-    "vue-router": "^3.0.1",
-    "vuedraggable": "^2.23.2",
-    "vuelidate": "^0.7.5",
-    "vuetify": "^2.2.18",
-    "vuex": "^3.0.1"
+    "vuedraggable": "^2.23.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-unit-mocha": "^4.1.2",
-    "@vue/cli-service": "^4.2.3",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "axios": "^0.19.0",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-istanbul": "^6.0.0",
-    "chai": "^4.1.2",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "eslint-plugin-vuetify": "^1.0.0-beta.6",
-    "git-revision-webpack-plugin": "^3.0.3",
-    "moxios": "^0.4.0",
-    "nyc": "^15.0.0",
-    "sass": "^1.24.4",
-    "sass-loader": "^8.0.2",
-    "sinon": "^8.1.1",
-    "vue-cli-plugin-axios": "0.0.4",
-    "vue-cli-plugin-vuetify": "^2.0.3",
-    "vue-template-compiler": "^2.6.11",
+    "bili": "^5.0.5",
+    "eslint": "^7.13.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.1.0",
+    "prettier": "^2.2.1",
+    "rollup-plugin-vue": "5.1.9",
+    "rollup-plugin-vuetify": "^0.2.4",
+    "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.4.3"
   },
-  "bundledDependencies": [
-    "axios",
-    "moment",
-    "vue",
-    "vue-router",
-    "vuedraggable",
-    "vuetify",
-    "vuex",
-    "unistra-box"
-  ],
-  "licence": "aGPL3.x"
+  "peerDependencies": {
+    "vue": "^2.6.12",
+    "vuetify": "^2.2.18",
+    "vuex": "^3.0.1"
+  }
 }

postcss.config.js

-module.exports = {
-  plugins: {
-    autoprefixer: {},
-  },
-};

prod/index.html

-<!DOCTYPE html>
-{% load static %}
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Formulaires - Université de Strasbourg</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-    <link rel="stylesheet"
-          href="https://s3.unistra.fr/master/common/assets/fonts/unistra-font/1.0.0/css/unistra-font.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&Signature=Ros22u4Tp0Dy106qr0rRkGBPoJM=&Expires=1870971370">
-    <link rel="stylesheet"
-          href="https://s3.unistra.fr/master/common/assets/fonts/unistra-signature/3.0.1/css/sun.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&Signature=CgIbptGflBu5hCjAQYmysfF3E4c%3D&Expires=1887617036">
-    <link rel="stylesheet"
-          href="https://s3.unistra.fr/master/common/assets/fonts/unistra-symbol/1.0.4/css/unistra-symbol.css?AWSAccessKeyId=M2M78RKXPAP75Y692QZX&Signature=lfTwAVnRXjgZc9ryRpAcWhiMbCA%3D&Expires=1876298241">
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vuerms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>