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

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

@@ -6,6 +6,7 @@ export default {
     argTypes: {},
   }
   
+  // @ts-ignore
   const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsIcon },
@@ -18,4 +19,5 @@ export default {
   })
   
   export const IconSimple = Template.bind({})
+  // @ts-ignore
   IconSimple.args = {}

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/{Input.stories.js → Input.stories.ts}

@@ -7,7 +7,7 @@ export default {
     required: { control: 'boolean' },
   },
 }
- 
+ // @ts-ignore
 const TemplateInputText = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -79,7 +79,7 @@ const TemplateInputText = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateInputPassword = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -183,7 +183,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -212,6 +212,7 @@ const TemplateSlots = (args, { argTypes }) => ({
 })
  
 export const InputText = TemplateInputText.bind({})
+// @ts-ignore
 InputText.args = {
   label: 'Input Text',
   placeholder: 'Placeholder',
@@ -222,6 +223,7 @@ InputText.args = {
 }
  
 export const InputPassword = TemplateInputPassword.bind({})
+// @ts-ignore
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -231,6 +233,7 @@ InputPassword.args = {
 }
  
 export const InputSlots = TemplateSlots.bind({})
+// @ts-ignore
 InputSlots.args = {
   label: 'Label',
   placeholder: 'Placeholder',

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

@@ -4,7 +4,7 @@ export default {
   title: 'Text fields & Forms/InputSelect',
   component: PsInputSelect
 }
-
+// @ts-ignore
 const TemplateDefault = (args, {argTypes})=> ({
     props: Object.keys(argTypes),
     components: {PsInputSelect},
@@ -25,6 +25,7 @@ const TemplateDefault = (args, {argTypes})=> ({
 })
 
 export const Default = TemplateDefault.bind({})
+// @ts-ignore
 Default.args = {
     items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
 }

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/{MiniTag.stories.js → MiniTag.stories.ts}

@@ -1,4 +1,6 @@
+
 import PsMiniTag, {
+  // @ts-ignore
   typeOptions,
 } from '../components/badges-and-tags/PsMiniTag.vue'
 
@@ -14,7 +16,7 @@ export default {
     },
   },
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsMiniTag },
@@ -22,30 +24,35 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Info = Template.bind({})
+// @ts-ignore
 Info.args = {
   layout: 'info',
   message: 'This is an info alert',
 }
 
 export const Success = Template.bind({})
+// @ts-ignore
 Success.args = {
   layout: 'success',
   message: 'This is a success alert',
 }
 
 export const Warning = Template.bind({})
+// @ts-ignore
 Warning.args = {
   layout: 'warning',
   message: 'This is a warning alert',
 }
 
 export const Error = Template.bind({})
+// @ts-ignore
 Error.args = {
   layout: 'error',
   message: 'This is an error alert',
 }
 
 export const Default = Template.bind({})
+// @ts-ignore
 Default.args = {
   layout: 'default',
   message: 'This is a default color',

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

@@ -4,7 +4,7 @@ export default {
     title: 'Components/Playground',
     component: PsScrollBar
 }
-
+// @ts-ignore
 const Template =  (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsScrollBar},

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

@@ -12,7 +12,7 @@ export default {
     },
   },
 }
-
+// @ts-ignore
 const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsProgressBar },
@@ -20,4 +20,5 @@ const TemplateDefault = (args, { argTypes }) => ({
 })
 
 export const Default = TemplateDefault.bind({})
+// @ts-ignore
 Default.args = {}

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

@@ -4,7 +4,7 @@ export default {
   title: 'Controls & Selectors/Radio Button',
   component: PsRadioButton,
  }
-
+// @ts-ignore
  const DefaultTemplate = (args,{ argTypes}) => ({
    props: Object.keys(argTypes),
    components: { PsRadioButton},

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/{SimpleAlert.stories.js → SimpleAlert.stories.ts}

@@ -4,7 +4,7 @@ export default {
     title: 'Notifications/Simple Alert',
     component: PsSimpleAlert,
   }
-
+// @ts-ignore
   const TemplateDefault = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsSimpleAlert },
@@ -16,6 +16,7 @@ export default {
   })
   
   export const Default = TemplateDefault.bind({})
+  // @ts-ignore
   Default.args = {
     message:'lorem'
   }

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

@@ -7,7 +7,7 @@ export default {
   //   layout: { control: { type: 'inline-radio', options: sliderLayout } },
   // },
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSlider },
@@ -29,6 +29,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Label = Template.bind({})
+// @ts-ignore
 Label.args = {
   min: 0,
   max: 200,
@@ -39,6 +40,7 @@ Label.args = {
 }
 
 export const NoLabel = Template.bind({})
+// @ts-ignore
 NoLabel.args = {
   min: 0,
   max: 200,
@@ -48,6 +50,7 @@ NoLabel.args = {
 }
 
 export const Bubble = Template.bind({})
+// @ts-ignore
 Bubble.args = {
   min: 0,
   max: 200,
@@ -62,6 +65,7 @@ const sliderColors = [
   { start: 170, end: 200, bgColor: '#D65C5A' },
 ]
 export const Rich = Template.bind({})
+// @ts-ignore
 Rich.args = {
   min: 0,
   max: 200,

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

@@ -3,7 +3,7 @@ export default {
   title: 'Controls & Selectors/Switch',
   component: PsSwitch,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSwitch },

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

@@ -7,6 +7,8 @@ export default {
   component: PsTabHeader,
   argTypes: {}
 }
+
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTabHeader },
@@ -31,6 +33,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Standard = Template.bind({})
+// @ts-ignore
 Standard.args = {
   layout: 'standard',
   items: items,
@@ -38,6 +41,7 @@ Standard.args = {
 }
 
 export const Underline = Template.bind({})
+// @ts-ignore
 Underline.args = {
   layout: 'underline',
   items: items,
@@ -45,6 +49,7 @@ Underline.args = {
 }
 
 export const Folder = Template.bind({})
+// @ts-ignore
 Folder.args = {
   layout: 'folder',
   items: items,

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

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsTableResults, { tableLayout } from '../components/table-results/PsTableResults.vue'
 import PsTableResultsHead from '../components/table-results/PsTableResultsHead.vue'
 import PsTableResultsHeadFlexible from '../components/table-results/PsTableResultsHeadFlexible.vue'
@@ -18,7 +19,7 @@ export default {
     onCollapse: { action: 'clicked' },
   },
 }
-
+// @ts-ignore
 const TableResults = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTableResults, PsTableResultsHead, PsTableResultsHeadComparison, PsTableResultsHeadFlexible },
@@ -54,6 +55,7 @@ const TableResults = (args, { argTypes }) => ({
 })
 
 export const Results = TableResults.bind({})
+// @ts-ignore
 Results.args = {
   layout: 'results',
   header: resultsDataHeader,
@@ -64,6 +66,7 @@ Results.args = {
 }
 
 export const Comparison = TableResults.bind({})
+// @ts-ignore
 Comparison.args = {
   layout: 'comparison',
   header: comparisonDataHeader,
@@ -74,6 +77,7 @@ Comparison.args = {
 }
 
 export const Flexible = TableResults.bind({})
+// @ts-ignore
 Flexible.args = {
   layout: 'flexible',
   header: flexibleDataHeader,

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

@@ -3,7 +3,7 @@ export default {
   title: 'Badges & Tags/Tags/Tag Scope',
   component: PsTagScope,
 }
-
+// @ts-ignore
 const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsTagScope },

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

@@ -4,7 +4,7 @@ export default {
     title: 'Components/TestimonialCard',
     component: PsTestimonialCard,
   }
-
+// @ts-ignore
   const Template = (args,{argTypes}) => ({
     props: Object.keys(argTypes),
     components:{PsTestimonialCard},
@@ -18,7 +18,7 @@ export default {
 }) 
 
 export const Default = Template.bind({})
-
+// @ts-ignore
 Default.args = {
   testimonial: 'I used to spend most of my time helping California cities make reach codes. Now, i just show them the Explorer and get to focus on helping cities in other states.',
   user:'Amy Rider',

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

@@ -3,7 +3,7 @@ export default {
   title: 'Notifications/Toast',
   component: PsToast,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsToast },

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,14 +1,15 @@
+// @ts-ignore
 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
 }
-
+// @ts-ignore
 export const getParentScrollableEl = (node) => {
   if (node == null) {
     return null
@@ -20,7 +21,7 @@ export const getParentScrollableEl = (node) => {
     return getParentScrollableEl(node.parentNode)
   }
 }
-
+// @ts-ignore
 export const getParentVueComponentByName = (comp, name) => {
   if (comp.$options.name === name) {
     return comp

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

@@ -1,18 +1,22 @@
+// @ts-ignore
 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)
+        // @ts-ignore
+        const progress = parseInt((ev.loaded / ev.total) * 100)
+        // @ts-ignore
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
           notifiedNotComputable = true
+          // @ts-ignore
           if(onProgress) onProgress(-1)
         }
       }
@@ -20,21 +24,25 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
 
     xhr.onloadend = () => {
       const contentType = xhr.getResponseHeader('Content-Type')
+      // @ts-ignore
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {
         if (!notifiedNotComputable) {
+          // @ts-ignore
           if(onProgress) onProgress(100)
         }
 
         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,
+    "jsx": "preserve",
+    "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/**/*.stories.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "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 }