@processmaker/screen-builder 2.83.11 → 2.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.83.11",
+  "version": "2.84.1",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint",
     "build-bundle": "npm run build",
     "open-cypress": "nyc cypress open",
-    "run-cypress": "TZ=UTC nyc cypress run"
+    "run-cypress": "TZ=UTC nyc cypress run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",
@@ -28,6 +31,7 @@
   ],
   "dependencies": {
     "@chantouchsek/validatorjs": "1.2.3",
+    "@storybook/addon-docs": "^7.6.13",
     "axios-extensions": "^3.1.6",
     "lodash": "^4.17.21",
     "lru-cache": "^10.0.1",
@@ -53,6 +57,14 @@
     "@panter/vue-i18next": "^0.15.2",
     "@processmaker/vue-form-elements": "0.51.0",
     "@processmaker/vue-multiselect": "2.3.0",
+    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-interactions": "^7.6.13",
+    "@storybook/addon-links": "^7.6.13",
+    "@storybook/blocks": "^7.6.13",
+    "@storybook/test": "^7.6.13",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/vue": "^7.6.13",
+    "@storybook/vue-vite": "^7.6.13",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/test-utils": "^1.1.1",
     "axios": "^1.6.0",
@@ -71,6 +83,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.3.0",
     "expr-eval": "^2.0.2",
     "globby": "^11.1.0",
@@ -80,7 +93,10 @@
     "mustache": "^3.0.1",
     "nyc": "^15.1.0",
     "prettier": "2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.53.0",
+    "storybook": "^7.6.13",
     "v-calendar": "^0.9.7",
     "validatorjs": "^3.14.2",
     "vite": "^4.0.4",

package/src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <b-container id="screen-builder-container" class="h-100">
-    <b-card id="app" no-body class="h-100 bg-white border-top-0">
+    <b-card id="app" no-body class="h-100 bg-white border-top-0 ">
       <!-- Card Header -->
-      <b-card-header>
+      <b-card-header class="bg-white p-0">
         <b-row>
-          <b-col>
-            <b-button-group size="sm pr-2">
+          <b-col class="d-flex align-items-center">
+            <b-button-group size="sm px-2">
               <b-button
                 :variant="displayBuilder ? 'secondary' : 'outline-secondary'"
                 data-cy="mode-editor"
@@ -49,60 +49,33 @@
           </b-col>
 
           <b-col v-if="displayBuilder && !displayPreview" class="text-right">
-            <div
-              class="btn-group btn-group-sm mr-2"
-              role="group"
-              aria-label="Basic example"
+            <screen-toolbar
+              @undo="$refs.builder.undo()"
+              @redo="$refs.builder.redo()"
+              @open-calc="openComputedProperties"
+              @open-customCss="openCustomCSS"
+              @open-watchers="openWatchersPopup"
             >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Calculated Properties')"
-                data-cy="topbar-calcs"
-                @click="openComputedProperties"
+              <b-btn
+                v-b-modal="'uploadmodal'"
+                variant="secondary"
+                size="sm"
+                class="mr-2"
+                :title="$t('Load Screen')"
               >
-                <i class="fas fa-flask" />
-                {{ $t("Calcs") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Custom CSS')"
-                data-cy="topbar-css"
-                @click="openCustomCSS"
+                <i class="fas fa-upload mr-1" />
+              </b-btn>
+              <b-btn
+                v-b-modal.preview-config
+                variant="secondary"
+                size="sm"
+                class="mr-2"
+                :title="$t('Save Screen')"
+                @click="saveToLocalStorage()"
               >
-                <i class="fab fa-css3" />
-                {{ $t("CSS") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Watchers')"
-                data-cy="topbar-watchers"
-                @click="openWatchersPopup"
-              >
-                <i class="fas fa-mask" />
-                {{ $t("Watchers") }}
-              </button>
-            </div>
-            <b-btn
-              v-b-modal="'uploadmodal'"
-              variant="secondary"
-              size="sm"
-              class="mr-2"
-              :title="$t('Load Screen')"
-            >
-              <i class="fas fa-upload mr-1" />
-            </b-btn>
-            <button
-              v-b-modal.preview-config
-              type="button"
-              class="btn btn-secondary btn-sm ml-1"
-              :title="$t('Save Screen')"
-              @click="saveToLocalStorage()"
-            >
-              <i class="fas fa-save" />
-            </button>
+                <i class="fas fa-save mr-1" />
+              </b-btn>
+            </screen-toolbar>
           </b-col>
           <b-modal
             id="uploadmodal"
@@ -351,6 +324,7 @@ import WatchersPopup from "./components/watchers-popup.vue";
 import CustomCss from "./components/custom-css.vue";
 import VueFormBuilder from "./components/vue-form-builder.vue";
 import VueFormRenderer from "./components/vue-form-renderer.vue";
+import ScreenToolbar from "./components/ScreenToolbar.vue";
 import canOpenJsonFile from "./mixins/canOpenJsonFile";
 
 // Bring in our initial set of controls
@@ -358,6 +332,7 @@ import controlConfig from "./form-builder-controls";
 import globalProperties from "./global-properties";
 
 import "bootstrap";
+import "./assets/css/tabs.css";
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -411,7 +386,8 @@ export default {
     VueFormBuilder,
     VueFormRenderer,
     MonacoEditor,
-    WatchersPopup
+    WatchersPopup,
+    ScreenToolbar,
   },
   mixins: [canOpenJsonFile],
   data() {
@@ -754,6 +730,7 @@ export default {
 <style lang="scss">
 @import "bootstrap/dist/css/bootstrap";
 @import "bootstrap-vue/dist/bootstrap-vue";
+@import "assets/css/custom";
 
 $validation-panel-bottom: 3.5rem;
 $validation-panel-right: 0;
@@ -786,6 +763,7 @@ body {
 
 .card-header {
   border-radius: 0 !important;
+  background-color: none !important;
 }
 
 .border-check {

package/src/assets/css/custom.css

@@ -0,0 +1,11 @@
+.btn-platform {
+  background-color: #ffff;
+  color: #6a7888;
+  padding: 8px 8px 2px 8px;
+}
+.btn-platform:hover {
+  color: #6a7888;
+}
+.page-dropdown-menu {
+  min-width: 333px;
+}

package/src/assets/css/tabs.css

@@ -0,0 +1,118 @@
+/* Setup some colors */
+:root {
+    --tabs-blue: #1572c2;
+    --tabs-light: #c3c9cf;
+    --tabs-grey: #6a7888;
+    --tabs-border: #cdddee;
+    --tabs-scroll-bg: #ebeef2;
+    --tabs-white: #ffffff;
+  }
+  /* Override Bootstrap default tab styles */
+  .nav-tabs {
+    border-bottom: 1px solid var(--tabs-border) !important;
+    flex-wrap: nowrap !important;
+    overflow: hidden !important;
+  }
+  
+  .nav-tabs .nav-item .nav-link {
+    display: flex;
+    align-items: center;
+  }
+  
+  /* Style for individual tabs */
+  .nav-tabs .nav-item.show .nav-link,
+  .nav-tabs .nav-link.active {
+    border: none;
+    box-shadow: inset 0 -3px 0 0 var(--tabs-blue) !important; /* This sets the blue bottom border for the active tab */
+    background-color: var(
+      --tabs-white
+    ); /* This sets the background color for the active tab */
+    border-radius: 0 !important; /* This removes the border-radius */
+    color: var(--tabs-blue) !important;
+    position: relative;
+  }
+  
+  /* Style for non-active tabs */
+  .nav-tabs .nav-link {
+    border: 1px solid var(--tabs-border) !important;
+    color: var(--tabs-grey); /* This sets the text color for the inactive tabs */
+    border-radius: 0 !important; /* This ensures no border radius for a flat design */
+    padding: 0.5rem 1rem;
+    margin-right: -1px;
+    text-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  
+  .nav-tabs .nav-item .nav-link:not(.active) {
+    .badge {
+      background-color: #6A7888 !important;
+    }
+  
+    span:not(.badge, .close-tab) {
+      color: #556271 !important;
+    }
+  }
+  
+  /* Style for the hover effect */
+  .nav-tabs .nav-link:hover {
+    border: none;
+    background-color: var(
+      --tabs-white
+    ); /* This changes the background color when hovering */
+  }
+  
+  /* Adding the 'x' button to the tab */
+  .nav-tabs .nav-link .close-tab {
+    font-size: 0.8rem;
+    color: var(--tabs-light);
+    margin-left: 0.5rem;
+    display: inline !important;
+  }
+  
+  /* Style adjustments for the 'x' button */
+  .nav-tabs .nav-link .close-tab:hover {
+    color: var(--tabs-grey);
+    cursor: pointer;
+  }
+  .nav-tabs .nav-scroll {
+    position: absolute;
+    top: calc(50% - 0.75rem);
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--tabs-scroll-bg);
+    color: var(--tabs-grey);
+    cursor: pointer;
+    border: 1px solid var(--tabs-border);
+    border-radius: 100%;
+    z-index: 1;
+  }
+  .nav-tabs .nav-scroll-right {
+    right: 5px;
+  }
+  .nav-tabs .nav-scroll-left {
+    margin-left: 5px;
+  }
+  .nav-tabs .tabs-sticky {
+    position: sticky;
+    -webkit-position: sticky;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+  .nav-tabs .tabs-start {
+    background-color: var(--tabs-white);
+  }
+  /* add margin right to the last li element to hide safely the right scroll button */
+  .nav-tabs li.nav-item:last-of-type {
+    margin-right: 2rem;
+  }
+  .flat-tabs .h-tab {
+    height: calc(100% - 42px) !important;
+  }
+  .dd-ml {
+    margin-left: 2rem;
+  }

package/src/bootstrap.js

@@ -0,0 +1,111 @@
+/* eslint-disable vue/multi-word-component-names */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import Vue from "vue";
+import i18next from "i18next";
+import VueI18Next from "@panter/vue-i18next";
+import Vuex from "vuex";
+import axios from "axios";
+import { cacheAdapterEnhancer } from "axios-extensions";
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import { Multiselect } from "@processmaker/vue-multiselect";
+import { LRUCache } from "lru-cache";
+import VueFormElements from "@processmaker/vue-form-elements";
+import { configure } from "@storybook/test"; // Required for testing
+import undoRedoModule from "@/store/modules/undoRedoModule";
+import globalErrorsModule from "@/store/modules/globalErrorsModule";
+import ScreenBuilder from "@/components";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
+import "@processmaker/vue-multiselect/dist/vue-multiselect.min.css";
+import "@/assets/css/custom.css";
+// For QA: Set default testIdAttribute to "data-test"
+configure({ testIdAttribute: "data-test" });
+
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
+Vue.config.productionTip = false;
+Vue.use(VueI18Next);
+i18next.init({ lng: "en" });
+Vue.mixin({ i18n: new VueI18Next(i18next) });
+Vue.use(Vuex);
+Vue.use(ScreenBuilder);
+Vue.use(VueFormElements);
+Vue.component("Multiselect", Multiselect);
+
+export const store = new Vuex.Store({
+  modules: {
+    globalErrorsModule,
+    undoRedoModule
+  }
+});
+
+// get cache config from header
+const cacheEnabled = document.head.querySelector(
+  "meta[name='screen-cache-enabled']"
+);
+const cacheTimeout = document.head.querySelector(
+  "meta[name='screen-cache-timeout']"
+);
+
+// Get the current protocol, hostname, and port
+const { protocol, hostname, port } = window.location;
+window.ProcessMaker = {
+  isStub: true,
+  user: {
+    id: 1,
+    lang: "en"
+  },
+  app: {
+    url: `${protocol}//${hostname}:${port}` // Create a URL with the current port
+  },
+  EventBus: new Vue(),
+  confirmModal(title, message, variant, callback) {
+    // eslint-disable-next-line no-alert
+    if (window.confirm(`${title}: ${message}`)) {
+      callback();
+    }
+  },
+  // eslint-disable-next-line no-unused-expressions, no-unused-vars
+  alert(message, variant) {},
+  screen: {
+    cacheEnabled: cacheEnabled ? cacheEnabled.content === "true" : false,
+    cacheTimeout: cacheTimeout ? Number(cacheTimeout.content) : 0
+  }
+};
+window.Echo = {
+  listeners: [],
+  private() {
+    return {
+      notification(callback) {
+        window.Echo.listeners.push({ callback });
+      },
+      stopListening() {
+        window.Echo.listeners.splice(0);
+      },
+      listen(event, callback) {
+        window.Echo.listeners.push({ event, callback });
+      }
+    };
+  }
+};
+
+// axios
+window.axios = axios.create({
+  baseURL: "/api/1.0/",
+  adapter: cacheAdapterEnhancer(axios.getAdapter(axios.defaults.adapter), {
+    enabledByDefault: window.ProcessMaker.screen.cacheEnabled,
+    cacheFlag: "useCache",
+    defaultCache: new LRUCache({
+      ttl: window.ProcessMaker.screen.cacheTimeout,
+      max: 100
+    })
+  })
+});
+
+window.ProcessMaker.apiClient = window.axios;
+
+export default { ScreenBuilder };

package/src/components/ScreenToolbar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="flex-grow-1 d-flex flex-row-reverse">
+    <b-button-group size="sm" class="bg-white p-2 screen-toolbar">
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        :disabled="!canUndo"
+        data-cy="toolbar-undo"
+        @click="$emit('undo')"
+      >
+        <i class="fas fa-undo" />
+        {{ $t("Undo") }}
+      </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        :disabled="!canRedo"
+        data-cy="toolbar-redo"
+        @click="$emit('redo')"
+      >
+        <i class="fas fa-redo" />
+        {{ $t("Redo") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Calculated Properties')"
+        data-cy="topbar-calcs"
+        @click="$emit('open-calc')"
+      >
+        <i class="fas fa-flask" />
+        {{ $t("Calcs") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Custom CSS')"
+        data-cy="topbar-css"
+        @click="$emit('open-customCss')"
+      >
+        <i class="fab fa-css3" />
+        {{ $t("CSS") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Watchers')"
+        data-cy="topbar-watchers"
+        @click="$emit('open-watchers')"
+      >
+        <i class="fas fa-mask" />
+        {{ $t("Watchers") }}
+      </b-button>
+      <b-dropdown
+        type="button"
+        class="screen-toolbar-button"
+        variant="outlined-secondary"
+        :popper-opts="{ placement: 'bottom-end' }"
+        data-cy="topbar-options"
+      >
+        <template v-slot:button-content>
+          <span class="screen-toolbar-button">
+            <i class="fas fa-cog" />
+            {{ $t("Options") }}
+          </span>
+        </template>
+        <template v-slot:default>
+          <slot />
+        </template>
+      </b-dropdown>
+    </b-button-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showToolbar: true
+    };
+  },
+  computed: {
+    canUndo() {
+      return this.$store.getters["undoRedoModule/canUndo"];
+    },
+    canRedo() {
+      return this.$store.getters["undoRedoModule/canRedo"];
+    },
+  }
+};
+</script>
+
+<style scoped>
+.screen-toolbar-button {
+  color: #556271;
+}
+</style>