@policystudio/policy-studio-ui-vue 1.1.89 → 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/stories/{Typography.stories.mdx → Typography.mdx}

@@ -1,111 +1,7 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/blocks";
 
 <Meta title="Typography" />
 
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;  
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
 # Typography
 Typography serves to present your design and content as clearly and efficiently as possible.
 
@@ -208,3 +104,109 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
   </tr>
 </table> 
 
+<style>
+{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;  
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+`}
+</style>
+
+
+

package/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

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

@@ -0,0 +1,36 @@
+const { VueLoaderPlugin} = require('vue-loader')
+
+module.exports = {
+  resolve: {
+    alias: {
+      vue: '@vue/compat'
+    },
+    extensions: ['.js','.ts','.vue']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
+      },
+      {
+        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/eventBus.js

@@ -1,3 +0,0 @@
-import Vue from 'vue';
-
-export const eventBus = new Vue();

package/.storybook/main.js

@@ -1,25 +0,0 @@
-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": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  "framework": "@storybook/vue"
-}

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,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-}