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

package/{src → doc/src}/stories/MiniTag.stories.ts

@@ -1,6 +1,8 @@
+
 import PsMiniTag, {
+  // @ts-ignore
   typeOptions,
-} from '../components/badges-and-tags/PsMiniTag.vue'
+} from '../../../src/components/badges-and-tags/PsMiniTag.vue'
 
 export default {
   title: 'Badges & Tags/Tags/Mini Tag',
@@ -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 → doc/src}/stories/ProgressBar.stories.ts

@@ -1,4 +1,4 @@
-import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
+import PsProgressBar from '../../../src/components/badges-and-tags/PsProgressBar.vue'
 
 export default {
   title: 'Badges & Tags/Badges/ProgressBar',
@@ -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 → doc/src}/stories/RadioButton.stories.ts

@@ -1,10 +1,10 @@
-import PsRadioButton from '../components/controls/PsRadioButton.vue'
+import PsRadioButton from '../../../src/components/controls/PsRadioButton.vue'
 
 export default {
   title: 'Controls & Selectors/Radio Button',
   component: PsRadioButton,
  }
-
+// @ts-ignore
  const DefaultTemplate = (args,{ argTypes}) => ({
    props: Object.keys(argTypes),
    components: { PsRadioButton},

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

@@ -1,4 +1,4 @@
-import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
+import PsRadioButtonSimple from '../../../src/components/controls/PsRadioButtonSimple.vue'
 
 export default {
     title: 'Text fields & Forms/Inputs V2/RadioButton',

package/{src → doc/src}/stories/SimpleAlert.stories.ts

@@ -1,10 +1,10 @@
-import PsSimpleAlert from '../components/notifications/PsSimpleAlert.vue'
+import PsSimpleAlert from '../../../src/components/notifications/PsSimpleAlert.vue'
 
 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 → 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 → 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 → 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 → 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 → 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 → 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 → 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 → 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,11 +29,13 @@ 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) {
   const myTemporaryInputElement = document.createElement('input')
   myTemporaryInputElement.type = 'text'

package/{src → 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',

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,22 +1,19 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.5",
+  "version": "1.1.90-beta.50",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "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",
+    "build": "tsc -p tsconfig.json && npm run build:tailwind && npm run gulp",
+    "full-publish": "npm run lint && npm run build && npm publish --tag beta",
     "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"
+    "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": "src/index.js",
+  "main": "dist/index.js",
+  "types": "src/types/index.d.ts",
   "dependencies": {
     "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
@@ -24,17 +21,6 @@
     "vue": "^3.4.5"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.7",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/preset-env": "^7.23.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@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",
@@ -43,21 +29,20 @@
     "@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": "^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": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.7",
+    "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",
@@ -65,7 +50,7 @@
     "webpack": "^5.89.0"
   },
   "engines": {
-    "node": "18.19.0"
+    "node": "20.11.0"
   },
   "keywords": [
     "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/src/assets/scss/base.scss

@@ -35,6 +35,9 @@
 @import './components/PsBarChart.scss';
 @import './components/PsSimpleAlert.scss';
 @import './components/PsBreadcrumb.scss';
+@import './components/PsCollapse.scss';
+
+
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -68,38 +71,4 @@ html {
 }
 
 
-@layer components {
-  .psui-card {
-    @apply .psui-w-full .psui-bg-white .psui-rounded-lg .psui-px-6 .psui-py-4 .psui-shadow-elevation-5;
-  
-    &-header {
-      @apply .psui-flex .psui-items-center .psui-justify-between .psui-mb-4;
-  
-      h4 {
-        @apply .psui-text-h6 .psui-font-bold .psui-text-gray-80;
-      }
-    }
-  }
-
-  .psui-show-childrens-on-hover {
-    &:hover {
-      * {
-        opacity: 1 !important;
-      }
-    }
-  
-    &.absolute-childrens {
-      @apply psui-relative;
-  
-      .helper {
-        @apply psui-absolute psui-top-0;
-        right: -18px;
-      }
-    }
-  }
-  
-  .psui-transition {
-    @apply psui-transition-all psui-ease-in-out psui-duration-150;
-  }
-}
 

package/src/assets/scss/components/PsAccordion.scss

@@ -101,7 +101,7 @@
       overflow: hidden;
     }
 
-    .accordion-fade-enter,
+    .accordion-fade-enter-from,
     .accordion-fade-leave-to {
       height: 0 !important;
       margin-bottom: 0 !important;

package/src/assets/scss/components/PsChips.scss

@@ -19,7 +19,15 @@
         &:checked {
           + label {
             @apply psui-text-blue-60 psui-bg-blue-20;
-  
+
+            &.layout-disabled {
+              @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
+
+              &:before {
+                @apply psui-text-gray-30 psui-cursor-default; 
+              }
+            }
+
             &:before {
               @apply psui-text-blue-50;
             }
@@ -82,8 +90,6 @@
     }
 
     &.type-button {
-
-
       label {
         @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
         background-color: #F6F7F8;

package/src/assets/scss/components/PsCollapse.scss

@@ -0,0 +1,71 @@
+@layer components {
+
+  .psui-el-collapse {
+    
+    .psui-el-collapse-item-content {
+      @apply psui-relative psui-pl-4;
+
+      &::before {
+        @apply psui-bg-gray-30 psui-ml-2;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    
+
+    .psui-el-collapse-item-header {
+      @apply psui-flex psui-items-center psui-cursor-pointer;
+
+      .psui-el-collapse-item-icon {
+        @apply psui-text-gray-50 psui-transition-all;
+        transition-duration: 0.4s;
+        font-size: 16px;
+      }
+
+      .psui-el-collapse-item-header-wrapper {
+        @apply psui-flex psui-items-center psui-py-2 psui-text-small psui-w-full;
+  
+        .psui-el-collapse-item-title {
+          @apply psui-ml-1 psui-text-gray-70 hover:psui-text-blue-60;
+
+          &.disabled {
+            @apply psui-text-gray-50;
+          }      
+  
+        }
+
+        .psui-el-collapse-item-header-action {
+          @apply psui-invisible psui-ml-auto psui-text-gray-70 hover:psui-text-blue-60;
+        }
+      }
+
+      &:hover {
+        .psui-el-collapse-item-header-wrapper {
+          .psui-el-collapse-item-header-action {
+            @apply psui-visible;
+          }
+        }
+      }
+    }
+
+
+    .collapse-fade-enter-active,
+    .collapse-fade-leave-active {
+      will-change: height, margin-bottom;
+      transition: height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .collapse-fade-enter-from,
+    .collapse-fade-leave-to {
+      height: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+}

package/src/assets/scss/components/PsDataTable.scss

@@ -58,7 +58,7 @@
         td,
         tr {
           padding: 7px 16px;
-          @apply .psui-text-gray-80;
+          @apply psui-text-gray-80;
         }
       }
     }

package/src/assets/scss/components/PsDropdownList.scss

@@ -3,7 +3,7 @@
     @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
 
     .psui-el-dropdown-menu-list-item {
-      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
+      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all;
       padding: 7px 20px;
 
       &-left-label {