@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-beta.0

package/.eslintignore

@@ -0,0 +1 @@
+.storybook

package/.eslintrc.js

@@ -1,68 +1,71 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: [
-    'plugin:vue/essential',
-    'eslint:recommended',
-  ],
-  parserOptions: {
-    parser: 'babel-eslint',
-    requireConfigFile: false,
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'semi': ['warn', 'never'],
-    'quotes': [2, 'single'],
-    'vue/order-in-components': ['warn', {
-      'order': [
-        'el',
-        'name',
-        'key',
-        'parent',
-        ['components', 'directives', 'filters'],
-        ['props', 'propsData'],
-        'functional',
-        ['delimiters', 'comments'],
-        'extends',
-        'mixins',
-        ['provide', 'inject'],
-        'ROUTER_GUARDS',
-        'layout',
-        'middleware',
-        'validate',
-        'scrollToTop',
-        'transition',
-        'loading',
-        'inheritAttrs',
-        'model',
-        'emits',
-        'setup',
-        'asyncData',
-        'data',
-        'fetch',
-        'head',
-        'computed',
-        'watch',
-        'watchQuery',
-        'LIFECYCLE_HOOKS',
-        'methods',
-        ['template', 'render'],
-        'renderError'
-      ]
-    }]
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
+  module.exports = {
+    root: true,
+    env: {
+      node: true
+    },
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+      parser: '@babel/eslint-parser',
+      requireConfigFile: false,
+      babelOptions: {
+        babelrc: false,
+        configFile: false,
+        presets: ['@babel/preset-env'],
+      },
+    },
+    extends: ['plugin:vue/vue3-essential', 'eslint:recommended','plugin:vue/vue3-strongly-recommended'],
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'semi': ['warn', 'never'],
+      'quotes': [2, 'single'],
+      'vue/order-in-components': ['warn', {
+        'order': [
+          'el',
+          'name',
+          'key',
+          'parent',
+          ['components', 'directives', 'filters'],
+          ['props', 'propsData'],
+          'functional',
+          ['delimiters', 'comments'],
+          'extends',
+          'mixins',
+          ['provide', 'inject'],
+          'ROUTER_GUARDS',
+          'layout',
+          'middleware',
+          'validate',
+          'scrollToTop',
+          'transition',
+          'loading',
+          'inheritAttrs',
+          'model',
+          'emits',
+          'setup',
+          'asyncData',
+          'data',
+          'fetch',
+          'head',
+          'computed',
+          'watch',
+          'watchQuery',
+          'LIFECYCLE_HOOKS',
+          'methods',
+          ['template', 'render'],
+          'renderError'
+        ]
+      }]
+    },
+    overrides: [
+      {
+        files: [
+          '**/__tests__/*.{j,t}s?(x)',
+          '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        ],
+        env: {
+          jest: true
+        }
       }
-    }
-  ]
-}
+    ]
+  }

package/.github/workflows/deploy-storybook.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: ^14.0.0
+          node-version: 18.19.0
 
       - name: Install dependencies
         run: npm install && npm install vercel@25.1.0 && npm install -g vercel@25.1.0

package/.storybook/eventBus.js

@@ -1,3 +1,26 @@
-import Vue from 'vue';
+// this was a vue2 syntax
+// import Vue from 'vue';
+// export const eventBus = new Vue();
 
-export const eventBus = new Vue();
+// import { createApp } from 'vue';
+
+// export const app = createApp({});
+// const emitter = app.config.globalProperties.$emitter = {};
+
+// export const eventBus = {
+//   on(event, callback) {
+//     if (!emitter[event]) {
+//       emitter[event] = [];
+//     }
+//     emitter[event].push(callback);
+//   },
+//   emit(event, ...args) {
+//     if (emitter[event]) {
+//       emitter[event].forEach(callback => {
+//         callback(...args);
+//       });
+//     }
+//   },
+// };
+
+// app.mount('#app');

package/.storybook/main.js

@@ -1,25 +1,21 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  previewHead: (head) => (`
-    ${head}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
-  `),
-  "addons": [
+/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
       },
     },
-  ],
-  "framework": "@storybook/vue"
-}
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/babel.config.js

@@ -1,3 +1,17 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-}
+const presets = [
+  [
+    '@babel/preset-env',
+    {
+      targets: {
+        edge: '17',
+        firefox: '60',
+        chrome: '67',
+        safari: '11.1',
+      },
+      useBuiltIns: 'usage',
+      corejs: '3.6.4',
+    },
+  ],
+]
+
+module.exports = { presets }

package/dist/css/psui_styles.css

@@ -1932,7 +1932,6 @@ video {
 
 .psui-el-table-results-wrapper.table-flexible {
     padding-right: 1rem;
-    padding-bottom: 0.5rem;
   }
 
 .psui-el-table-results {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.88",
+  "version": "1.1.90-beta.0",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -12,46 +12,59 @@
   ],
   "scripts": {
     "lint": "vue-cli-service lint",
-    "build-storybook": "STORYBOOK_ENV=production build-storybook",
+    "build-storybook": "storybook build",
     "build-tailwind": "postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
     "build-temp-tailwind": "postcss src/assets/scss/base.scss -o temp/css/psui_styles.css",
-    "full-publish": "npm run lint && npm run build-tailwind && build-storybook && npm publish",
+    "full-publish": "npm run lint && npm run build-tailwind && npm run build-storybook && npm publish --tag beta",
     "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
     "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-tailwind\"",
-    "watch-storybook": "start-storybook -p 6006",
     "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
-    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets"
+    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets",
+    "kill-port": "sh ./scripts/kill-port.sh",
+    "storybook": "concurrently \"npm run kill-port\" \"npm run watch-prod-tailwind\" \"storybook dev -p 6006\""
   },
   "dependencies": {
+    "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
     "v-tooltip": "^2.1.3",
-    "vue": "^2.6.11"
+    "vue": "^3.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@storybook/addon-actions": "^6.4.13",
-    "@storybook/addon-essentials": "^6.4.13",
-    "@storybook/addon-links": "^6.4.13",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue": "^6.4.13",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-env": "^7.23.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/test": "^7.6.7",
+    "@storybook/vue3": "^7.6.7",
+    "@storybook/vue3-webpack5": "^7.6.7",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.3",
     "concurrently": "^7.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.19.2",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.2.1",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.7",
     "tailwindcss": "^1.9.6",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.11",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-loader": "^17.4.2",
     "watch": "^1.0.2"
+  },
+  "engines": {
+    "node": "18.19.0"
   }
 }

package/scripts/kill-port.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Find the process using port 3000
+PROCESS_ID=$(lsof -t -i:6006)
+
+# Check if a process is using the port
+if [ -n "$PROCESS_ID" ]; then
+  echo "Killing process on port 6006 (PID: $PROCESS_ID)"
+  kill -9 $PROCESS_ID
+else
+  echo "Port 6006 is not in use"
+fi

package/src/assets/scss/components/PsTableResults.scss

@@ -3,7 +3,7 @@
     @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
 
     &.table-flexible {
-      @apply psui-pr-4 psui-pb-2;
+      @apply psui-pr-4;
     }
   }
 
@@ -479,9 +479,9 @@
                 }
                }
             }
-          
           }
 
+
           &.is-disabled {
             td {
               &.hover-color {
@@ -491,6 +491,7 @@
               }
             }
           }
+
   
           td {
             @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;

package/src/components/accordion/PsAccordion.vue

@@ -1,28 +1,27 @@
 <template>
-  <div class="psui-el-accordion" :class="getComponentClass">
-    <slot></slot>
+  <div
+    class="psui-el-accordion"
+    :class="getComponentClass"
+  >
+    <slot />
   </div>
 </template>
 
-<script>
-export const layouts = ['big', 'medium']
-export default {
-  name: 'PsAccordion',
-  props: {
-    /**
-     * It defines the size of the accordion items. eg: text size and font.
-     */
-    layout: {
-      type: String,
-      default: 'medium',
-      validator: (value) => ['medium','big'].includes(value),
-    },
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  layout:{
+    type: String,
+    default: 'medium',
+    validator: (value) => ['big', 'medium'].includes(value)
   },
-  computed: {
-    getComponentClass() {
-      return `layout-${this.layout}`
-    }
-  }
-}
+})
+
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+
 </script>
+
 <style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -1,11 +1,30 @@
 <template>
-  <div class="psui-el-accordion-item" :class="{'status-opened':isOpen, 'disabled':disabled}">
+  <div
+    class="psui-el-accordion-item"
+    :class="{'status-opened':isOpen, 'disabled':disabled}"
+  >
     <div class="psui-el-accordion-item-header">
-      <slot name='custom-header' :toggle="toggle" :isOpen="isOpen">
-        <div @click="toggle" class="psui-el-accordion-item-header-wrapper" v-if="!hasCustomHeader">
-          <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
-          <slot name='header-additionals'></slot>
-          <i v-if="!disabled" class="psui-el-accordion-item-icon">{{ getIcon }}</i> 
+      <slot
+        name="custom-header"
+        :toggle="toggle"
+        :is-open="isOpen"
+      >
+        <div
+          @click="toggle"
+          class="psui-el-accordion-item-header-wrapper"
+          v-if="!hasCustomHeader"
+        >
+          <h2
+            v-if="title"
+            class="psui-el-accordion-item-title"
+          >
+            {{ title }}
+          </h2>
+          <slot name="header-additionals" />
+          <i
+            v-if="!disabled"
+            class="psui-el-accordion-item-icon"
+          >{{ getIcon }}</i> 
         </div>
       </slot>
     </div>
@@ -16,8 +35,11 @@
       @before-leave="start"
       @after-leave="end"
     >
-      <div v-if="isOpen" class="psui-el-accordion-item-content">
-        <slot></slot>
+      <div
+        v-if="isOpen"
+        class="psui-el-accordion-item-content"
+      >
+        <slot />
       </div>
     </transition>
   </div>

package/src/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="psui-el-badge-with-icon" :class="getComponentClass">
+  <div
+    class="psui-el-badge-with-icon"
+    :class="getComponentClass"
+  >
     <i 
       v-if="icon" 
       :class="iconClass"
       class="psui-el-badge-with-icon-icon"
-    >{{icon}}</i>
-    <span class="psui-el-badge-with-icon-message">{{message}}</span>
+    >{{ icon }}</i>
+    <span class="psui-el-badge-with-icon-message">{{ message }}</span>
   </div>
 </template>
 

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -8,7 +8,9 @@
     </h5>
     <div class="psui-el-card-infos-content">
       <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
-      <h5 class="psui-text-gray-80">{{ total }}</h5>
+      <h5 class="psui-text-gray-80">
+        {{ total }}
+      </h5>
     </div>
   </div>
 </template>

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -1,14 +1,28 @@
 <template>
   <div class="psui-el-chart-legend">
     <div class="psui-flex psui-flex-shrink-0">
-      <div class="psui-el-chart-legend-dot" :style="dotColor"/>
+      <div
+        class="psui-el-chart-legend-dot"
+        :style="dotColor"
+      />
     </div>
     <div class="psui-flex-grow-1 flex psui-flex-col">
-      <div class="psui-el-chart-legend-text">{{ text }}</div>
+      <div class="psui-el-chart-legend-text">
+        {{ text }}
+      </div>
       <div class="flex psui-items-center psui-flex-shrink-0 psui-gap-1">
-        <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
-        <span class="psui-text-gray-30" v-if="total && percentage"> | </span>
-        <span class="psui-el-chart-legend-percentage" v-if="percentage">
+        <span
+          v-if="this.total"
+          class="psui-el-chart-legend-total"
+        >{{ total }}</span>
+        <span
+          class="psui-text-gray-30"
+          v-if="total && percentage"
+        > | </span>
+        <span
+          class="psui-el-chart-legend-percentage"
+          v-if="percentage"
+        >
           {{ percentage }}%
         </span>
       </div>

package/src/components/badges-and-tags/PsCostEffectBar.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="psui-el-cost-effect-bar">
     <div>
-      <span :style="breakEvenPosition"> </span>
+      <span :style="breakEvenPosition" />
 
       <PsProgressBar
         :value="value"
-        :percentageColor="percentageColor"
-        :bgColor="bgColor"
-      >
-      </PsProgressBar>
+        :percentage-color="percentageColor"
+        :bg-color="bgColor"
+      />
     </div>
   </div>
 </template>

package/src/components/badges-and-tags/PsHighlightRippleDot.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="psui-el-highlight-ripple-icon">
-    <div class="psui-el-icon"></div>
+    <div class="psui-el-icon" />
   </div>
 </template>
 

package/src/components/badges-and-tags/PsTestimonialCard.vue

@@ -8,11 +8,13 @@
         display="flex"
       />
     </div>
-    <p class="psui-el-testimonial-description">{{description}}</p>
+    <p class="psui-el-testimonial-description">
+      {{ description }}
+    </p>
     <div class="psui-el-testimonial-info">
-      <span class="psui-el-testimonial-info-user" >{{user}}</span>
-      <span class="psui-el-testimonial-info-position">{{position}}</span>
-      <span class="psui-el-testimonial-info-jurisdiction">{{jurisdiction}}</span>
+      <span class="psui-el-testimonial-info-user">{{ user }}</span>
+      <span class="psui-el-testimonial-info-position">{{ position }}</span>
+      <span class="psui-el-testimonial-info-jurisdiction">{{ jurisdiction }}</span>
     </div>
   </div>
 </template>