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

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

@@ -6,7 +6,7 @@ export default {
 }
 const items = ['Option 1', 'Option 2', 'Option 3']
 const selected = 'Option 2'
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsToggle },
@@ -16,6 +16,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
+// @ts-ignore
 Default.args = {
   items: items,
   selected: selected,
@@ -28,13 +29,15 @@ Default.args = {
  * Se quiser dar uma melhorada nessa parte, fique a vontade meu chegado! TMJ
  */
 window.addEventListener('click', (ev) => {
+  // @ts-ignore
   if (ev.target.classList.contains('click-to-copy')) {
+    // @ts-ignore
     copyText(ev.target.dataset.toCopy)
   }
 })
-
+// @ts-ignore
 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,15 +1,15 @@
-export const randomString = (length) => {
-  var result = ''
-  var characters =
+export const randomString = (length:any) => {
+  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
 }
 
-export const getParentScrollableEl = (node) => {
+export const getParentScrollableEl = (node:any):any => {
   if (node == null) {
     return null
   }
@@ -21,7 +21,7 @@ export const getParentScrollableEl = (node) => {
   }
 }
 
-export const getParentVueComponentByName = (comp, name) => {
+export const getParentVueComponentByName = (comp:any, name:any):any => {
   if (comp.$options.name === name) {
     return comp
   } else {

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

@@ -1,14 +1,17 @@
-export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
+// @ts-ignore
+
+export default ({ imageUrl, onProgress = null, returnsBase64 = true }:{imageUrl:any, onProgress:any, returnsBase64:any}) => {
   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) => {
+    xhr.onprogress = (ev:any) => {
       if (ev.lengthComputable) {
-        let progress = parseInt((ev.loaded / ev.total) * 100)
+        // @ts-ignore
+        const progress = parseInt((ev.loaded / ev.total) * 100)
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
@@ -20,6 +23,7 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
 
     xhr.onloadend = () => {
       const contentType = xhr.getResponseHeader('Content-Type')
+      // @ts-ignore
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {
@@ -28,13 +32,15 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
         }
 
         if(!returnsBase64) {
+          // @ts-ignore
           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)
+          // @ts-ignore
           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/tailwind.config.js

@@ -1,7 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+
 module.exports = {
   prefix: 'psui-',
-  purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './index.html',
+    './src/**/*.vue',
+    './src/**/*.js',
+    './src/**/*.ts',
+    './src/**/*.jsx',
+    './src/**/*.tsx',
+  ],
+  darkMode: 'media', // or 'media' or 'class'
   theme: {
     colors: {
       'white': '#ffffff ',

package/tsconfig.json

@@ -0,0 +1,47 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noEmitOnError": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "skipLibCheck": true, //this make ts ignore error
+    "skipDefaultLibCheck": true, //this make ts ignore error
+    "noEmit": true, //this make ts ignore error
+    "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/**/*.d.ts",
+    "src/**/*.vue",
+    "src/**/*.stories.ts",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/webpack.config.js

@@ -1,8 +1,11 @@
+const { VueLoaderPlugin} = require('vue-loader')
+
 module.exports = {
   resolve: {
     alias: {
       vue: '@vue/compat'
-    }
+    },
+    extensions: ['.js','.ts','.vue']
   },
   module: {
     rules: [
@@ -16,7 +19,18 @@ module.exports = {
             }
           }
         }
-      }
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
+        exclude: /node_modules/,
+      },
     ]
-  }
+  },
+  plugins:[
+    new VueLoaderPlugin()
+  ]
 }

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,
-});

package/babel.config.js

@@ -1,17 +0,0 @@
-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/src/stories/ClimateZoneBadge.stories.js

@@ -1,17 +0,0 @@
-import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/ClimateZoneBadge',
-  component: PsClimateZoneBadge,
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsClimateZoneBadge },
-  template: '<PsClimateZoneBadge v-bind="$props" />',
-})
-
-export const ClimateZoneBadge = Template.bind({})
-ClimateZoneBadge.args = {
-  icon: 'area_chart',
-}

package/src/stories/CostEffectBar.stories.js

@@ -1,23 +0,0 @@
-import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/CostEffectBar',
-  component: PsCostEffectBar,
-  argTypes: {
-    value: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-    breakEven: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-  },
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsCostEffectBar },
-  template: '<PsCostEffectBar v-bind="$props" />',
-})
-
-export const SimpleProgressBar = Template.bind({})
-SimpleProgressBar.args = {}

package/src/stories/Draggable.stories.js

@@ -1,22 +0,0 @@
-import PsDraggable from '../components/controls/PsDraggable.vue'
-
-export default {
-  title: 'Controls & Selectors/Draggable',
-  component: PsDraggable 
-}
-
-const Template = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsDraggable },
-  template: `
-    <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
-        <PsDraggable v-bind='$props'/>
-    </div>
-  `
-})
-
-export const Component = Template.bind({})
-Component.args = {
-  getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}, {title: 'PER HOME RESULTS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}]},
-  module: 'comparison'
-}