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

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

@@ -5,7 +5,7 @@ export default {
   component: PsCheckboxSimple,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckboxSimple },
   data: () => ({

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

@@ -1,31 +1,33 @@
 import PsChips from '../components/chips/PsChips.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-export default {
-  title: 'Components/Chips',
-  component: PsChips,
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsChips> = {
+  component: PsChips
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsChips },
-  data: ()=>{
-    return{
-      isChecked: true,
-      isCheckedTwo: null,
-    }
-  },
-  template: `<div style="display:flex; gap: 10px;">
-                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
+export default meta
+
+type Story = StoryObj<typeof PsChips>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsChips },
+    setup(){
+      return { args }
+    },
+    template: `<div style="display:flex; gap: 10px;">
                 <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
                 <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
-              `
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Simple Chip',
-  icon:'',
-}
+              `,
+    args:{
+      label: 'Simple Chip',
+      icon:'',
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}

package/src/stories/ClimateZoneBadge.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsClimateZoneBadge> = {
+  component: PsClimateZoneBadge
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsClimateZoneBadge>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsClimateZoneBadge },
+    setup(){
+      return { args }
+    },
+    template: '<PsClimateZoneBadge v-bind="$props" />',
+    args:{
+      icon: 'area_chart',
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}
+

package/src/stories/CostEffectBar.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsCostEffectBar> = {
+  component: PsCostEffectBar
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsCostEffectBar>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsCostEffectBar },
+    setup(){
+      return { args }
+    },
+    template: '<PsCostEffectBar v-bind="$props" />',
+    args:{
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}

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

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
 import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
 
@@ -10,7 +11,7 @@ export default {
     }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
     props: Object.keys(argTypes),
     components:  {PsDataTable},
     template: `
@@ -20,7 +21,7 @@ const Template = (args, { argTypes }) => ({
         `
 })
 
-const RichTemplate = (args, { argTypes } ) => ({
+const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
     template: `
@@ -34,6 +35,7 @@ const RichTemplate = (args, { argTypes } ) => ({
 
 
 export const Simple = Template.bind({})
+// @ts-ignore
 Simple.args = {
     header: ['year', 'month', 'sale'],
     data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
@@ -42,6 +44,7 @@ Simple.args = {
 }
 
 export const Rich = RichTemplate.bind({})
+// @ts-ignore
 Rich.args = {
     header: ['header 1', 'header 2', 'header 3'],
     data:[[ [ 20, -3],  [  20,  2], [  20,  2] ], { header4: { value: 20, delta: 2}, header5: { value: 20, delta: 2}, header6: { value: 20, delta: 2} }],

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

@@ -5,7 +5,7 @@ export default {
     component: PsDateCardInfo,
   }
 
-  const Template = (args,{argTypes}) => ({
+  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components:{PsDateCardInfo},
     template: `
@@ -18,7 +18,3 @@ export default {
 }) 
 
 export const Default = Template.bind({})
-
-Default.args = {
-  date: '2021/02/23'
-}

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

@@ -5,7 +5,7 @@ export default {
   component: PsDialog,
 }
 
-const TemplateExamples = (args, { argTypes }) => ({
+const TemplateExamples = (args:any, { argTypes }: { argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
   template: `

package/src/stories/Draggable.stories.ts

@@ -0,0 +1,32 @@
+import PsDraggable from '../components/controls/PsDraggable.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsDraggable> = {
+  component: PsDraggable
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsDraggable>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsDraggable },
+    setup(){
+      return { args }
+    },
+    template: `
+      <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+          <PsDraggable v-bind='$props'/>
+      </div>
+    `,
+    args:{
+      ...HeaderStories.LoggedIn.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'
+    }
+  })
+}

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

@@ -5,7 +5,7 @@ export default {
   component: { PsDropdown, PsDropdownList },
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdown, PsDropdownList },
   template: `
@@ -87,13 +87,3 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const DropdownMenu = Template.bind({})
-DropdownMenu.args = {
-  items: [
-    'Selectable option 01',
-    'Selectable option 02',
-    'Selectable option 03',
-    'Selectable option 04',
-    'Selectable option 05',
-    'Selectable option 06',
-  ],
-}

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

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue'
 export default {
   title: 'Components/Dropdown/Dropdown List',
@@ -17,7 +18,7 @@ export default {
     }
   }
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdownList },
@@ -205,6 +206,7 @@ const studyData = {
 }
 
 export const DropdownList = Template.bind({})
+// @ts-ignore
 DropdownList.args = {
   items: onlyTextItems,
   study_data: studyData,

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

@@ -5,6 +5,7 @@ export default {
   component: MyHeader,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  // @ts-ignore
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
     components: {

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

@@ -4,7 +4,7 @@ export default {
   title: 'Badges & Tags/Badges/HighlightRippleDot',
   component: PsHighlightRippleDot,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsHighlightRippleDot },
@@ -12,4 +12,5 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const HighlightRippleDot = Template.bind({})
+// @ts-ignore
 HighlightRippleDot.args = {}

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

@@ -5,7 +5,7 @@ export default {
     component: PsIcon,
     argTypes: {},
   }
-  
+  // @ts-ignore
   const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsIcon },
@@ -18,4 +18,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}

@@ -8,6 +8,7 @@ export default {
   },
 }
  
+// @ts-ignore
 const TemplateInputText = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -79,7 +80,7 @@ const TemplateInputText = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateInputPassword = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -183,7 +184,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -212,6 +213,7 @@ const TemplateSlots = (args, { argTypes }) => ({
 })
  
 export const InputText = TemplateInputText.bind({})
+// @ts-ignore
 InputText.args = {
   label: 'Input Text',
   placeholder: 'Placeholder',
@@ -222,6 +224,7 @@ InputText.args = {
 }
  
 export const InputPassword = TemplateInputPassword.bind({})
+// @ts-ignore
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -231,6 +234,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}

@@ -5,6 +5,7 @@ export default {
   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,7 @@ export default {
   component: PsTabHeader,
   argTypes: {}
 }
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTabHeader },
@@ -31,6 +32,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Standard = Template.bind({})
+// @ts-ignore
 Standard.args = {
   layout: 'standard',
   items: items,
@@ -38,6 +40,7 @@ Standard.args = {
 }
 
 export const Underline = Template.bind({})
+// @ts-ignore
 Underline.args = {
   layout: 'underline',
   items: items,
@@ -45,6 +48,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 },