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

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

@@ -1,4 +1,4 @@
-import PsSlider from '../components/controls/PsSlider.vue'
+import PsSlider from '../../../src/components/controls/PsSlider.vue'
 
 export default {
   title: 'Text fields & Forms/Slider',
@@ -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 → doc/src/stories/Switch.stories.ts}

@@ -1,9 +1,9 @@
-import PsSwitch from '../components/controls/PsSwitch.vue'
+import PsSwitch from '../../../src/components/controls/PsSwitch.vue'
 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 → doc/src/stories/TabHeader.stories.ts}

@@ -1,4 +1,4 @@
-import PsTabHeader from '../components/tabs/PsTabHeader.vue'
+import PsTabHeader from '../../../src/components/tabs/PsTabHeader.vue'
 const items = ['Existing Buildings', 'New Constructions', 'Other tab']
 const item = items[0]
 
@@ -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 → doc/src/stories/TableResults.stories.ts}

@@ -1,9 +1,10 @@
-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'
-import PsTableResultsHeadComparison from '../components/table-results/PsTableResultsHeadComparison.vue'
-import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
-import PsSwitch from '../components/controls/PsSwitch.vue'
+// @ts-ignore
+import PsTableResults, { tableLayout } from '../../../src/components/table-results/PsTableResults.vue'
+import PsTableResultsHead from '../../../src/components/table-results/PsTableResultsHead.vue'
+import PsTableResultsHeadFlexible from '../../../src/components/table-results/PsTableResultsHeadFlexible.vue'
+import PsTableResultsHeadComparison from '../../../src/components/table-results/PsTableResultsHeadComparison.vue'
+import PsProgressBar from '../../../src/components/badges-and-tags/PsProgressBar.vue'
+import PsSwitch from '../../../src/components/controls/PsSwitch.vue'
 
 import { resultsDataHeader, resultsDataColumnGroup, resultsDataSummary } from '../contents/ResultsData'
 import { comparisonDataHeader, comparisonDataColumnGroup, comparisonDataSummary } from '../contents/ComparisonData'
@@ -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 → doc/src/stories/TagScope.stories.ts}

@@ -1,9 +1,10 @@
-import PsTagScope from '../components/badges-and-tags/PsTagScope.vue'
+import PsTagScope from '../../../src/components/badges-and-tags/PsTagScope.vue'
+
 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 → doc/src/stories/TestimonialCard.stories.ts}

@@ -1,10 +1,10 @@
-import PsTestimonialCard from '../components/badges-and-tags/PsTestimonialCard.vue'
+import PsTestimonialCard from '../../../src/components/badges-and-tags/PsTestimonialCard.vue'
 
 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 → doc/src/stories/Toast.stories.ts}

@@ -1,9 +1,9 @@
-import PsToast from '../components/notifications/PsToast.vue'
+import PsToast from '../../../src/components/notifications/PsToast.vue'
 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 → doc/src/stories/Toggle.stories.ts}

@@ -1,4 +1,4 @@
-import PsToggle from '../components/controls/PsToggle.vue'
+import PsToggle from '../../../src/components/controls/PsToggle.vue'
 export default {
   title: 'Components/Toggle',
   component: PsToggle,
@@ -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 → doc/src/stories/Tooltip.stories.ts}

@@ -1,6 +1,6 @@
-import PsTooltip from '../components/tooltip/PsTooltip.vue'
-import PsRichTooltip from '../components/tooltip/PsRichTooltip.vue'
-import PsDialogTooltip from '../components/tooltip/PsDialogTooltip.vue'
+import PsTooltip from '../../../src/components/tooltip/PsTooltip.vue'
+import PsRichTooltip from '../../../src/components/tooltip/PsRichTooltip.vue'
+import PsDialogTooltip from '../../../src/components/tooltip/PsDialogTooltip.vue'
 
 export default {
     title: 'Components/Tooltip',
@@ -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 → doc/src/stories/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/doc/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "rootDir": "../",
+    "strict": true,
+    "outDir": "../dist",
+  },
+  "include": [
+    "doc/src/**/*.ts",
+    "doc/.storybook/**/*.ts",
+    "doc/src/**/*.stories.ts",
+    "doc/*.d.ts",
+  ],
+  "references": [
+    {"path": "../"}
+  ]
+}
+

package/package.json

@@ -1,57 +1,61 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.88",
+  "version": "1.1.90-access.0",
   "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": {
     "lint": "vue-cli-service lint",
-    "build-storybook": "STORYBOOK_ENV=production build-storybook",
-    "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",
-    "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"
+    "build": "tsc -p tsconfig.json && npm run build:tailwind && npm run gulp",
+    "full-publish": "npm run lint && npm run build && npm publish --tag access",
+    "kill-port": "sh ./scripts/kill-port.sh",
+    "build:tailwind": "tailwindcss build -i src/assets/scss/base.scss -o dist/css/psui_styles_output.css -c tailwind.config.js",
+    "watch:tailwind": "watch 'npm run build:tailwind' dist/css",
+    "gulp": "gulp --gulpfile scripts/gulp.js build"
   },
+  "main": "dist/index.js",
+  "types": "src/types/index.d.ts",
   "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-eslint": "^10.1.0",
-    "babel-loader": "^8.2.3",
+    "@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",
     "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-vue": "^8.7.1",
+    "gulp": "^5.0.0",
+    "gulp-sass": "^5.1.0",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.2.1",
-    "tailwindcss": "^1.9.6",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.11",
-    "watch": "^1.0.2"
-  }
+    "prettier": "^3.1.1",
+    "sass": "^1.77.1",
+    "tailwindcss": "^3.4.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "~4.5.5",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-loader": "^17.4.2",
+    "watch": "^1.0.2",
+    "webpack": "^5.89.0"
+  },
+  "engines": {
+    "node": "20.11.0"
+  },
+  "keywords": [
+    "vue",
+    "ui"
+  ],
+  "license": "MIT",
+  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue"
 }

package/scripts/gulp.js

@@ -0,0 +1,11 @@
+const gulp = require('gulp')
+const sass = require('gulp-sass')(require('sass'))
+
+gulp.task('build', () => {
+
+  return gulp.src([
+    '../dist/css/psui_styles_output.css'
+  ])
+  .pipe(sass().on('error',sass.logError))
+  .pipe(gulp.dest('../dist/css'))
+})

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/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>