@policystudio/policy-studio-ui-vue 1.1.90-beta.3 → 1.1.90-beta.5

package/.eslintrc.js

@@ -1,11 +1,14 @@
   module.exports = {
     root: true,
+
     env: {
       node: true
     },
+
     parser: 'vue-eslint-parser',
+
     parserOptions: {
-      parser: '@babel/eslint-parser',
+      parser: '@typescript-eslint/parser',
       requireConfigFile: false,
       babelOptions: {
         babelrc: false,
@@ -13,7 +16,14 @@
         presets: ['@babel/preset-env'],
       },
     },
-    extends: ['plugin:vue/vue3-essential', 'eslint:recommended','plugin:vue/vue3-strongly-recommended'],
+
+    extends: [
+      'plugin:vue/vue3-essential', 
+      'eslint:recommended',
+      'plugin:vue/vue3-strongly-recommended',
+      '@vue/typescript'
+    ],
+
     rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -57,6 +67,7 @@
         ]
       }]
     },
+
     overrides: [
       {
         files: [
@@ -67,5 +78,5 @@
           jest: true
         }
       }
-    ]
+    ],
   }

package/.storybook/PolicyStudio.ts

@@ -0,0 +1,11 @@
+import { create } from '@storybook/theming'
+import PolicyStudioUiLogo from '../src/assets/images/policy-studio.svg'
+
+
+export default create({
+  base: 'light',
+  brandTitle: 'Policy Studio UI Vue',
+  brandUrl: 'https://policystudio.co/',
+  brandImage: PolicyStudioUiLogo,
+  brandTarget: '_blank',
+});

package/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api'
+
+import PolicyStudio from './PolicyStudio'
+
+addons.setConfig({
+  theme: PolicyStudio,
+});

package/package.json

@@ -1,28 +1,22 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.3",
+  "version": "1.1.90-beta.5",
   "description": "Policy Studio UI",
-  "main": "src/index.js",
   "author": "Policy Studio Team",
-  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "ui"
-  ],
   "scripts": {
+    "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
     "lint": "vue-cli-service lint",
     "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 && npm run build-storybook && npm publish --tag beta",
-    "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
+    "kill-port": "sh ./scripts/kill-port.sh",
     "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-tailwind\"",
+    "storybook": "concurrently \"npm run kill-port\" \"npm run watch-prod-tailwind\" \"storybook dev -p 6006\"",
     "watch-prod-tailwind": "watch 'npm run build-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\""
+    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets"
   },
+  "main": "src/index.js",
   "dependencies": {
     "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
@@ -41,16 +35,20 @@
     "@storybook/test": "^7.6.7",
     "@storybook/vue3": "^7.6.7",
     "@storybook/vue3-webpack5": "^7.6.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.8",
     "@vue/compiler-sfc": "^3.4.5",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "babel-eslint": "^10.1.0",
     "concurrently": "^7.0.0",
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^8.7.1",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
@@ -60,11 +58,19 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.6.7",
     "tailwindcss": "^3.4.1",
+    "typescript": "~4.5.5",
     "vue-eslint-parser": "^9.3.2",
     "vue-loader": "^17.4.2",
-    "watch": "^1.0.2"
+    "watch": "^1.0.2",
+    "webpack": "^5.89.0"
   },
   "engines": {
     "node": "18.19.0"
-  }
+  },
+  "keywords": [
+    "vue",
+    "ui"
+  ],
+  "license": "MIT",
+  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue"
 }

package/src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <img
+    alt="Vue logo"
+    src="./assets/logo.png"
+  >
+  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

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

@@ -24,7 +24,8 @@
        * It set any further css style that might be needed.
        */
       iconClass: {
-        type: String
+        type: String,
+        default:''
       },
       message: {
         type: String,

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

@@ -38,7 +38,7 @@ export default {
       default: 1
     },
     forceBreakEven: {
-      Boolean,
+      type: Boolean,
       default: false
     },
     value: {

package/src/components/buttons/PsButton.vue

@@ -37,8 +37,8 @@
   </button>
 </template>
 
-<script setup>
-import { computed, ref } from 'vue'
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
 
   const isHover = ref(false)
 
@@ -50,9 +50,9 @@ import { computed, ref } from 'vue'
       default: ''
     },
     layout:{
-      type: String,
+      type: String as PropType<'solid' | 'outline' | 'ghost' | 'onlytext' | 'caution'>,
       default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext','caution'].includes(value)
+      validator: (value:string) => ['solid','outline','ghost','onlytext','caution'].includes(value)
     },
     icon: {
       type: String,
@@ -61,12 +61,12 @@ import { computed, ref } from 'vue'
     iconPosition: {
       type: String,
       default: 'left',
-      validator: (value) => ['left','right'].includes(value)
+      validator: (value:string) => ['left','right'].includes(value)
     },
     size: {
         type: String,
         default: 'big',
-        validator: (value) => ['small','medium','big'].includes(value)
+        validator: (value:string) => ['small','medium','big'].includes(value)
       },
       disabled: {
         type: Boolean,
@@ -95,13 +95,13 @@ import { computed, ref } from 'vue'
     emit('click')
  }
  const onMouseEnter = () => {
-  if(!this.disabled){
+  if(!props.disabled){
     isHover.value = true
   }
  }
 
  const onMouseLeave = () => {
-    if(!this.disabled){
+    if(!props.disabled){
       isHover.value = false
     }
   }

package/src/shims-vue.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/stories/{Accordion.stories.js → Accordion.stories.ts}

@@ -8,8 +8,8 @@ export default {
 }
 
 
-export const Index = (args, { argTypes }) => ({
-  props: Object.keys(argTypes, args),
+export const Index = (args:any, { argTypes }: { argTypes:any }) => ({
+  props: Object.keys({argTypes, args}),
   components: { PsAccordion, PsAccordionItem },
   template:
     `

package/src/stories/{BadgeWithIcon.stories.js → BadgeWithIcon.stories.ts}

@@ -7,7 +7,7 @@ export default {
     },
   }
   
-  const TemplateDefault = (args, {argTypes})=>({
+  const TemplateDefault = (args:any, {argTypes}:{argTypes:any})=>({
     props: Object.keys(argTypes),
     components:{PsBadgeWithIcon},
     template: `

package/src/stories/{BarChart.stories.js → BarChart.stories.ts}

@@ -4,7 +4,7 @@ export default {
   component: PsBarChart,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBarChart },
   template: `

package/src/stories/{Breadcrumb.stories.js → Breadcrumb.stories.ts}

@@ -11,7 +11,7 @@ const items = [
   { title: '4th level', route: '' },
 ]
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBreadcrumb },
   template: `
@@ -20,6 +20,3 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
-Default.args = {
-  items: items,
-}

package/src/stories/{CardInfos.stories.js → CardInfos.stories.ts}

@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsCardInfos },
   template: '<PsCardInfos v-bind="$props" />',
 })
 
 export const CardInfos = Template.bind({})
-CardInfos.args = {}

package/src/stories/{ChartLegend.stories.js → ChartLegend.stories.ts}

@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes } : { argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsChartLegend },
   template: '<PsChartLegend v-bind="$props" />',
 })
 
 export const ChartLegend = Template.bind({})
-ChartLegend.args = {}

package/src/stories/{Checkbox.stories.js → Checkbox.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckbox,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox},
   template: `

package/src/stories/{CheckboxSimple.stories.js → CheckboxSimple.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckboxSimple,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckboxSimple },
   data: () => ({

package/src/stories/{Chips.stories.js → Chips.stories.ts}

@@ -1,31 +1,33 @@
 import PsChips from '../components/chips/PsChips.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-export default {
-  title: 'Components/Chips',
-  component: PsChips,
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsChips> = {
+  component: PsChips
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsChips },
-  data: ()=>{
-    return{
-      isChecked: true,
-      isCheckedTwo: null,
-    }
-  },
-  template: `<div style="display:flex; gap: 10px;">
-                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
+export default meta
+
+type Story = StoryObj<typeof PsChips>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsChips },
+    setup(){
+      return { args }
+    },
+    template: `<div style="display:flex; gap: 10px;">
                 <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
                 <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
-              `
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Simple Chip',
-  icon:'',
-}
+              `,
+    args:{
+      label: 'Simple Chip',
+      icon:'',
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}

package/src/stories/{ClimateZoneBadge.stories.js → ClimateZoneBadge.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsClimateZoneBadge,
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsClimateZoneBadge },
   template: '<PsClimateZoneBadge v-bind="$props" />',

package/src/stories/{CostEffectBar.stories.js → CostEffectBar.stories.ts}

@@ -13,7 +13,7 @@ export default {
   },
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsCostEffectBar },
   template: '<PsCostEffectBar v-bind="$props" />',

package/src/stories/{Datatable.stories.js → Datatable.stories.ts}

@@ -10,7 +10,7 @@ export default {
     }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
     props: Object.keys(argTypes),
     components:  {PsDataTable},
     template: `
@@ -20,7 +20,7 @@ const Template = (args, { argTypes }) => ({
         `
 })
 
-const RichTemplate = (args, { argTypes } ) => ({
+const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
     template: `

package/src/stories/{DateCardInfo.stories.js → DateCardInfo.stories.ts}

@@ -5,7 +5,7 @@ export default {
     component: PsDateCardInfo,
   }
 
-  const Template = (args,{argTypes}) => ({
+  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components:{PsDateCardInfo},
     template: `
@@ -18,7 +18,3 @@ export default {
 }) 
 
 export const Default = Template.bind({})
-
-Default.args = {
-  date: '2021/02/23'
-}

package/src/stories/{InlineSelector.stories.js → InlineSelector.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsInlineSelector,
 }
 
-const TemplateDefault = (args, {argTypes}) => ({
+const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: {PsInlineSelector},
   template: `

package/src/stories/{InputTextArea.stories.js → InputTextArea.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsInputTextArea,
 }
 
-const Template = (args, {argTypes}) => ({
+const Template = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: {PsInputTextArea},
   template: `

package/src/stories/{RadioButtonSimple.stories.js → RadioButtonSimple.stories.ts}

@@ -5,7 +5,7 @@ export default {
     component: PsRadioButtonSimple,
   }
 
-  const defaultTemplate = (args, {argTypes}) => ({
+  const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components: { PsRadioButtonSimple },
     data: () => ({

package/src/stories/{Toggle.stories.js → Toggle.stories.ts}

@@ -34,7 +34,7 @@ window.addEventListener('click', (ev) => {
 })
 
 function copyText(textToCopy) {
-  var myTemporaryInputElement = document.createElement('input')
+  const myTemporaryInputElement = document.createElement('input')
   myTemporaryInputElement.type = 'text'
   myTemporaryInputElement.value = textToCopy
   document.body.appendChild(myTemporaryInputElement)

package/src/stories/{Tooltip.stories.js → Tooltip.stories.ts}

@@ -8,7 +8,7 @@ export default {
     subcomponents: {PsRichTooltip, PsDialogTooltip}
 }
 
-const TemplateDialog = (args, {argTypes}) => ({
+const TemplateDialog = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components: {PsDialogTooltip},
     template: `
@@ -41,7 +41,7 @@ const TemplateDialog = (args, {argTypes}) => ({
     `,
 })
 
-const TemplateRich = (args,{argTypes})=>({
+const TemplateRich = (args:any, {argTypes}:{argTypes:any})=>({
     props: Object.keys(argTypes),
     components: {PsRichTooltip},
     template: `
@@ -74,7 +74,7 @@ const TemplateRich = (args,{argTypes})=>({
 `
 })
 
-const TemplateDefault = (args, {argTypes}) => ({
+const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
 props: Object.keys(argTypes),
 components: {PsTooltip},
 template: `

package/src/util/{GeneralFunctions.js → GeneralFunctions.ts}

@@ -1,9 +1,9 @@
 export const randomString = (length) => {
-  var result = ''
-  var characters =
+  let result = ''
+  const characters =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  var charactersLength = characters.length
-  for (var i = 0; i < length; i++) {
+  const charactersLength = characters.length
+  for (let i = 0; i < length; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength))
   }
   return result

package/src/util/{imageLoader.js → imageLoader.ts}

@@ -1,14 +1,14 @@
 export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
   return new Promise((resolve, reject) => {
-    var xhr = new XMLHttpRequest()
-    var notifiedNotComputable = false
+    const xhr = new XMLHttpRequest()
+    let notifiedNotComputable = false
 
     xhr.open('GET', imageUrl, true)
     xhr.responseType = 'arraybuffer'
 
     xhr.onprogress = (ev) => {
       if (ev.lengthComputable) {
-        let progress = parseInt((ev.loaded / ev.total) * 100)
+        const progress = parseInt((ev.loaded / ev.total) * 100)
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
@@ -30,11 +30,11 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
         if(!returnsBase64) {
           resolve()
         } else {
-          var options = {}
-          var headers = xhr.getAllResponseHeaders()
-          var mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
+          const options = {}
+          const headers = xhr.getAllResponseHeaders()
+          const mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
           if (mime && mime[1]) options.type = mime[1]
-          var blob = new Blob([xhr.response], options)
+          const blob = new Blob([xhr.response], options)
           resolve(window.URL.createObjectURL(blob))
         }
       }

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    ".storybook/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = {
             }
           }
         }
-      }
+      },
     ]
   }
 }

package/.storybook/PolicyStudio.js

@@ -1,10 +0,0 @@
-import { create } from '@storybook/theming';
-import logo from '../src/assets/images/policy-studio.svg';
-
-export default create({
-  base: 'light',
-  brandTitle: 'Policy Studio UI Vue',
-  brandUrl: 'https://policystudio.co/',
-  brandImage: logo,
-  brandTarget: '_blank',
-});

package/.storybook/manager.js

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/addons';
-import PolicyStudio from './PolicyStudio';
-
-addons.setConfig({
-  theme: PolicyStudio,
-});