@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-access.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/.eslintignore +1 -0
  2. package/.eslintrc.js +75 -67
  3. package/.github/workflows/deploy-storybook.yml +5 -5
  4. package/.nvmrc +1 -0
  5. package/dist/css/psui_styles_output.css +6638 -0
  6. package/dist/index.d.ts +51 -0
  7. package/dist/index.js +106 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/util/GeneralFunctions.d.ts +3 -0
  10. package/dist/util/GeneralFunctions.js +35 -0
  11. package/dist/util/GeneralFunctions.js.map +1 -0
  12. package/dist/util/directives.d.ts +1 -0
  13. package/dist/util/directives.js +22 -0
  14. package/dist/util/directives.js.map +1 -0
  15. package/dist/util/imageLoader.d.ts +6 -0
  16. package/dist/util/imageLoader.js +52 -0
  17. package/dist/util/imageLoader.js.map +1 -0
  18. package/doc/.nvmrc +1 -0
  19. package/doc/.storybook/PolicyStudio.ts +11 -0
  20. package/doc/.storybook/main.ts +27 -0
  21. package/doc/.storybook/manager.ts +7 -0
  22. package/{.storybook/preview.js → doc/.storybook/preview.ts} +2 -3
  23. package/doc/package-lock.json +22653 -0
  24. package/doc/package.json +71 -0
  25. package/doc/shims-vue.d.ts +6 -0
  26. package/{src/stories/Accordion.stories.js → doc/src/stories/Accordion.stories.ts} +4 -5
  27. package/{src/stories/BadgeWithIcon.stories.js → doc/src/stories/BadgeWithIcon.stories.ts} +2 -2
  28. package/{src/stories/BarChart.stories.js → doc/src/stories/BarChart.stories.ts} +2 -2
  29. package/{src/stories/Breadcrumb.stories.js → doc/src/stories/Breadcrumb.stories.ts} +2 -5
  30. package/{src/stories/Button.stories.js → doc/src/stories/Button.stories.ts} +130 -130
  31. package/{src/stories/CardInfos.stories.js → doc/src/stories/CardInfos.stories.ts} +2 -3
  32. package/{src/stories/ChartLegend.stories.js → doc/src/stories/ChartLegend.stories.ts} +2 -3
  33. package/{src/stories/Checkbox.stories.js → doc/src/stories/Checkbox.stories.ts} +2 -2
  34. package/{src/stories/CheckboxSimple.stories.js → doc/src/stories/CheckboxSimple.stories.ts} +2 -2
  35. package/{src/stories/Chips.stories.js → doc/src/stories/Chips.stories.ts} +22 -23
  36. package/{src/stories/ClimateZoneBadge.stories.js → doc/src/stories/ClimateZoneBadge.stories.ts} +3 -2
  37. package/doc/src/stories/Collapse.stories.ts +46 -0
  38. package/{src/stories/CostEffectBar.stories.js → doc/src/stories/CostEffectBar.stories.ts} +3 -2
  39. package/{src/stories/Datatable.stories.js → doc/src/stories/Datatable.stories.ts} +7 -4
  40. package/{src/stories/DateCardInfo.stories.js → doc/src/stories/DateCardInfo.stories.ts} +2 -6
  41. package/{src/stories/Dialog.stories.js → doc/src/stories/Dialog.stories.ts} +2 -2
  42. package/{src/stories/Draggable.stories.js → doc/src/stories/Draggable.stories.ts} +3 -2
  43. package/{src/stories/Dropdown.stories.js → doc/src/stories/Dropdown.stories.ts} +4 -3
  44. package/{src/stories/DropdownList.stories.js → doc/src/stories/DropdownList.stories.ts} +4 -2
  45. package/{src/stories/ElevationSystem.stories.mdx → doc/src/stories/ElevationSystem.mdx} +1 -1
  46. package/{src/stories/HighlightRippleDot.stories.js → doc/src/stories/HighlightRippleDot.stories.ts} +3 -2
  47. package/{src/stories/Icon.stories.js → doc/src/stories/Icon.stories.ts} +3 -1
  48. package/{src/stories/InlineSelector.stories.js → doc/src/stories/InlineSelector.stories.ts} +2 -2
  49. package/{src/stories/Input.stories.js → doc/src/stories/Input.stories.ts} +7 -4
  50. package/{src/stories/InputSelect.stories.js → doc/src/stories/InputSelect.stories.ts} +3 -2
  51. package/{src/stories/InputTextArea.stories.js → doc/src/stories/InputTextArea.stories.ts} +2 -2
  52. package/{src/stories/Introduction.stories.mdx → doc/src/stories/Introduction.mdx} +101 -101
  53. package/{src/stories/MiniTag.stories.js → doc/src/stories/MiniTag.stories.ts} +9 -2
  54. package/{src/stories/ProgressBar.stories.js → doc/src/stories/ProgressBar.stories.ts} +3 -2
  55. package/{src/stories/RadioButton.stories.js → doc/src/stories/RadioButton.stories.ts} +2 -2
  56. package/{src/stories/RadioButtonSimple.stories.js → doc/src/stories/RadioButtonSimple.stories.ts} +2 -2
  57. package/{src/stories/SimpleAlert.stories.js → doc/src/stories/SimpleAlert.stories.ts} +3 -2
  58. package/{src/stories/Slider.stories.js → doc/src/stories/Slider.stories.ts} +6 -2
  59. package/{src/stories/Switch.stories.js → doc/src/stories/Switch.stories.ts} +2 -2
  60. package/{src/stories/TabHeader.stories.js → doc/src/stories/TabHeader.stories.ts} +6 -1
  61. package/{src/stories/TableResults.stories.js → doc/src/stories/TableResults.stories.ts} +11 -7
  62. package/{src/stories/TagScope.stories.js → doc/src/stories/TagScope.stories.ts} +3 -2
  63. package/{src/stories/TestimonialCard.stories.js → doc/src/stories/TestimonialCard.stories.ts} +3 -3
  64. package/{src/stories/Toast.stories.js → doc/src/stories/Toast.stories.ts} +2 -2
  65. package/{src/stories/Toggle.stories.js → doc/src/stories/Toggle.stories.ts} +7 -4
  66. package/{src/stories/Tooltip.stories.js → doc/src/stories/Tooltip.stories.ts} +6 -6
  67. package/{src/stories/Typography.stories.mdx → doc/src/stories/Typography.mdx} +107 -105
  68. package/doc/tsconfig.json +17 -0
  69. package/package.json +43 -39
  70. package/scripts/gulp.js +11 -0
  71. package/scripts/kill-port.sh +12 -0
  72. package/src/App.vue +30 -0
  73. package/src/assets/scss/base.scss +3 -30
  74. package/src/assets/scss/components/PsAccordion.scss +12 -2
  75. package/src/assets/scss/components/PsButton.scss +7 -1
  76. package/src/assets/scss/components/PsChips.scss +12 -7
  77. package/src/assets/scss/components/PsCollapse.scss +71 -0
  78. package/src/assets/scss/components/PsCostEffectBar.scss +4 -4
  79. package/src/assets/scss/components/PsDataTable.scss +1 -1
  80. package/src/assets/scss/components/PsDateCardInfo.scss +4 -5
  81. package/src/assets/scss/components/PsDialog.scss +7 -0
  82. package/src/assets/scss/components/PsDropdownList.scss +1 -1
  83. package/src/assets/scss/components/PsInput.scss +10 -0
  84. package/src/assets/scss/components/PsProgressBar.scss +4 -4
  85. package/src/assets/scss/components/PsSwitch.scss +10 -0
  86. package/src/assets/scss/components/PsTabHeader.scss +64 -2
  87. package/src/assets/scss/components/PsTableResults.scss +51 -82
  88. package/src/assets/scss/components/PsTestimonialCard.scss +1 -1
  89. package/src/assets/scss/components/PsTooltip.scss +149 -145
  90. package/src/components/accordion/PsAccordion.vue +20 -21
  91. package/src/components/accordion/PsAccordionItem.vue +122 -81
  92. package/src/components/badges-and-tags/PsBadgeWithIcon.vue +37 -36
  93. package/src/components/badges-and-tags/PsCardInfos.vue +40 -40
  94. package/src/components/badges-and-tags/PsChartLegend.vue +50 -41
  95. package/src/components/badges-and-tags/PsClimateZoneBadge.vue +13 -19
  96. package/src/components/badges-and-tags/PsCostEffectBar.vue +28 -61
  97. package/src/components/badges-and-tags/PsDateCardInfo.vue +17 -18
  98. package/src/components/badges-and-tags/PsHighlightRippleDot.vue +4 -3
  99. package/src/components/badges-and-tags/PsMiniTag.vue +39 -41
  100. package/src/components/badges-and-tags/PsProgressBar.vue +72 -68
  101. package/src/components/badges-and-tags/PsTagScope.vue +17 -22
  102. package/src/components/badges-and-tags/PsTestimonialCard.vue +25 -30
  103. package/src/components/buttons/PsButton.vue +90 -98
  104. package/src/components/chips/PsChips.vue +118 -103
  105. package/src/components/collapse/PsCollapse.vue +124 -0
  106. package/src/components/controls/PsCheckbox.vue +86 -83
  107. package/src/components/controls/PsCheckboxSimple.vue +97 -97
  108. package/src/components/controls/PsDraggable.vue +100 -99
  109. package/src/components/controls/PsInlineSelector.vue +111 -113
  110. package/src/components/controls/PsRadioButton.vue +72 -60
  111. package/src/components/controls/PsRadioButtonSimple.vue +81 -77
  112. package/src/components/controls/PsSlider.vue +190 -181
  113. package/src/components/controls/PsSwitch.vue +64 -54
  114. package/src/components/controls/PsToggle.vue +62 -57
  115. package/src/components/data-graphics/PsBarChart.vue +22 -23
  116. package/src/components/datatable/PsDataTable.vue +70 -65
  117. package/src/components/datatable/PsDataTableItem.vue +30 -32
  118. package/src/components/forms/PsDropdown.vue +173 -166
  119. package/src/components/forms/PsDropdownList.vue +133 -130
  120. package/src/components/forms/PsInput.vue +163 -146
  121. package/src/components/forms/PsInputSelect.vue +121 -100
  122. package/src/components/forms/PsInputTextArea.vue +84 -74
  123. package/src/components/navigations/PsBreadcrumb.vue +25 -34
  124. package/src/components/notifications/PsDialog.vue +67 -60
  125. package/src/components/notifications/PsSimpleAlert.vue +47 -37
  126. package/src/components/notifications/PsToast.vue +48 -42
  127. package/src/components/table-results/PsTableResults.vue +527 -504
  128. package/src/components/table-results/PsTableResultsBody.vue +69 -68
  129. package/src/components/table-results/PsTableResultsHead.vue +108 -69
  130. package/src/components/table-results/PsTableResultsHeadComparison.vue +88 -69
  131. package/src/components/table-results/PsTableResultsHeadFlexible.vue +112 -72
  132. package/src/components/table-results/PsTableResultsRow.vue +61 -58
  133. package/src/components/tabs/PsTabHeader.vue +138 -116
  134. package/src/components/tooltip/PsDialogTooltip.vue +112 -107
  135. package/src/components/tooltip/PsRichTooltip.vue +46 -43
  136. package/src/components/tooltip/PsTooltip.vue +126 -122
  137. package/src/components/ui/PsDotLoader.vue +6 -10
  138. package/src/components/ui/PsIcon.vue +149 -134
  139. package/src/index.ts +159 -0
  140. package/src/tsconfig.json +12 -0
  141. package/src/types/index.d.ts +6 -0
  142. package/src/util/GeneralFunctions.js +16 -7
  143. package/src/util/directives.ts +24 -0
  144. package/src/util/imageLoader.js +14 -7
  145. package/tailwind.config.js +12 -3
  146. package/tsconfig.json +47 -0
  147. package/.storybook/PolicyStudio.js +0 -10
  148. package/.storybook/eventBus.js +0 -3
  149. package/.storybook/main.js +0 -25
  150. package/.storybook/manager.js +0 -6
  151. package/babel.config.js +0 -3
  152. package/backup-package-lock.json +0 -37194
  153. package/dist/css/psui_styles.css +0 -110965
  154. package/postcss.config.js +0 -8
  155. package/src/components/playground/PsScrollBar.vue +0 -248
  156. package/src/index.js +0 -167
  157. package/src/stories/Playground.stories.js +0 -16
  158. /package/{src → doc/src}/assets/images/multifamily-units.svg +0 -0
  159. /package/{src → doc/src}/assets/images/policy-studio.svg +0 -0
  160. /package/{src/contents/ComparisonData.js → doc/src/contents/ComparisonData.ts} +0 -0
  161. /package/{src/contents/FlexibleData.js → doc/src/contents/FlexibleData.ts} +0 -0
  162. /package/{src/contents/ResultsData.js → doc/src/contents/ResultsData.ts} +0 -0
  163. /package/{src/stories/Colors.stories.mdx → doc/src/stories/Colors.mdx} +0 -0
  164. /package/{src → doc/src}/stories/assets/code-brackets.svg +0 -0
  165. /package/{src → doc/src}/stories/assets/colors.svg +0 -0
  166. /package/{src → doc/src}/stories/assets/comments.svg +0 -0
  167. /package/{src → doc/src}/stories/assets/direction.svg +0 -0
  168. /package/{src → doc/src}/stories/assets/flow.svg +0 -0
  169. /package/{src → doc/src}/stories/assets/plugin.svg +0 -0
  170. /package/{src → doc/src}/stories/assets/repo.svg +0 -0
  171. /package/{src → doc/src}/stories/assets/stackalt.svg +0 -0
@@ -1,4 +1,4 @@
1
- import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
1
+ import PsCostEffectBar from '../../../src/components/badges-and-tags/PsCostEffectBar.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Badges & Tags/Badges/CostEffectBar',
@@ -13,11 +13,12 @@ export default {
13
13
  },
14
14
  }
15
15
 
16
- const Template = (args, { argTypes }) => ({
16
+ const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
17
17
  props: Object.keys(argTypes),
18
18
  components: { PsCostEffectBar },
19
19
  template: '<PsCostEffectBar v-bind="$props" />',
20
20
  })
21
21
 
22
22
  export const SimpleProgressBar = Template.bind({})
23
+ // @ts-ignore
23
24
  SimpleProgressBar.args = {}
@@ -1,5 +1,6 @@
1
- import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
2
- import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
1
+ // @ts-ignore
2
+ import PsDataTable, { alignment } from '../../../src/components/datatable/PsDataTable.vue'
3
+ import PsDataTableItem from '../../../src/components/datatable/PsDataTableItem.vue'
3
4
 
4
5
  export default {
5
6
  title: 'Data Tables/DataTable',
@@ -10,7 +11,7 @@ export default {
10
11
  }
11
12
  }
12
13
 
13
- const Template = (args, { argTypes }) => ({
14
+ const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
14
15
  props: Object.keys(argTypes),
15
16
  components: {PsDataTable},
16
17
  template: `
@@ -20,7 +21,7 @@ const Template = (args, { argTypes }) => ({
20
21
  `
21
22
  })
22
23
 
23
- const RichTemplate = (args, { argTypes } ) => ({
24
+ const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
24
25
  props: Object.keys(argTypes),
25
26
  components: {PsDataTable, PsDataTableItem},
26
27
  template: `
@@ -34,6 +35,7 @@ const RichTemplate = (args, { argTypes } ) => ({
34
35
 
35
36
 
36
37
  export const Simple = Template.bind({})
38
+ // @ts-ignore
37
39
  Simple.args = {
38
40
  header: ['year', 'month', 'sale'],
39
41
  data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
@@ -42,6 +44,7 @@ Simple.args = {
42
44
  }
43
45
 
44
46
  export const Rich = RichTemplate.bind({})
47
+ // @ts-ignore
45
48
  Rich.args = {
46
49
  header: ['header 1', 'header 2', 'header 3'],
47
50
  data:[[ [ 20, -3], [ 20, 2], [ 20, 2] ], { header4: { value: 20, delta: 2}, header5: { value: 20, delta: 2}, header6: { value: 20, delta: 2} }],
@@ -1,11 +1,11 @@
1
- import PsDateCardInfo from '../components/badges-and-tags/PsDateCardInfo.vue'
1
+ import PsDateCardInfo from '../../../src/components/badges-and-tags/PsDateCardInfo.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Components/DateCardInfo',
5
5
  component: PsDateCardInfo,
6
6
  }
7
7
 
8
- const Template = (args,{argTypes}) => ({
8
+ const Template = (args:any, {argTypes}:{argTypes:any}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components:{PsDateCardInfo},
11
11
  template: `
@@ -18,7 +18,3 @@ export default {
18
18
  })
19
19
 
20
20
  export const Default = Template.bind({})
21
-
22
- Default.args = {
23
- date: '2021/02/23'
24
- }
@@ -1,10 +1,10 @@
1
- import PsDialog from '../components/notifications/PsDialog.vue'
1
+ import PsDialog from '../../../src/components/notifications/PsDialog.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Notifications/Dialog',
5
5
  component: PsDialog,
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const TemplateExamples = (args, { argTypes }) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsDialog },
@@ -1,10 +1,10 @@
1
- import PsDraggable from '../components/controls/PsDraggable.vue'
1
+ import PsDraggable from '../../../src/components/controls/PsDraggable.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Controls & Selectors/Draggable',
5
5
  component: PsDraggable
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const Template = (args, {argTypes}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsDraggable },
@@ -16,6 +16,7 @@ const Template = (args, {argTypes}) => ({
16
16
  })
17
17
 
18
18
  export const Component = Template.bind({})
19
+ // @ts-ignore
19
20
  Component.args = {
20
21
  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']}]},
21
22
  module: 'comparison'
@@ -1,10 +1,10 @@
1
- import PsDropdown from '../components/forms/PsDropdown.vue'
2
- import PsDropdownList from '../components/forms/PsDropdownList.vue'
1
+ import PsDropdown from '../../../src/components/forms/PsDropdown.vue'
2
+ import PsDropdownList from '../../../src/components/forms/PsDropdownList.vue'
3
3
  export default {
4
4
  title: 'Components/Dropdown',
5
5
  component: { PsDropdown, PsDropdownList },
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const Template = (args, { argTypes }) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsDropdown, PsDropdownList },
@@ -87,6 +87,7 @@ const Template = (args, { argTypes }) => ({
87
87
  })
88
88
 
89
89
  export const DropdownMenu = Template.bind({})
90
+ // @ts-ignore
90
91
  DropdownMenu.args = {
91
92
  items: [
92
93
  'Selectable option 01',
@@ -1,4 +1,5 @@
1
- import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue'
1
+ // @ts-ignore
2
+ import PsDropdownList, { itemStyle } from '../../../src/components/forms/PsDropdownList.vue'
2
3
  export default {
3
4
  title: 'Components/Dropdown/Dropdown List',
4
5
  component: { PsDropdownList },
@@ -17,7 +18,7 @@ export default {
17
18
  }
18
19
  }
19
20
  }
20
-
21
+ // @ts-ignore
21
22
  const Template = (args, { argTypes }) => ({
22
23
  props: Object.keys(argTypes),
23
24
  components: { PsDropdownList },
@@ -205,6 +206,7 @@ const studyData = {
205
206
  }
206
207
 
207
208
  export const DropdownList = Template.bind({})
209
+ // @ts-ignore
208
210
  DropdownList.args = {
209
211
  items: onlyTextItems,
210
212
  study_data: studyData,
@@ -1,4 +1,4 @@
1
- import { Canvas, Meta, Story } from '@storybook/addon-docs';
1
+ import { Meta, Story } from '@storybook/addon-docs';
2
2
 
3
3
  <Meta title="Elevation system" />
4
4
 
@@ -1,10 +1,10 @@
1
- import PsHighlightRippleDot from '../components/badges-and-tags/PsHighlightRippleDot.vue'
1
+ import PsHighlightRippleDot from '../../../src/components/badges-and-tags/PsHighlightRippleDot.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Badges & Tags/Badges/HighlightRippleDot',
5
5
  component: PsHighlightRippleDot,
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const Template = (args, { argTypes }) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsHighlightRippleDot },
@@ -12,4 +12,5 @@ const Template = (args, { argTypes }) => ({
12
12
  })
13
13
 
14
14
  export const HighlightRippleDot = Template.bind({})
15
+ // @ts-ignore
15
16
  HighlightRippleDot.args = {}
@@ -1,4 +1,4 @@
1
- import PsIcon from '../components/ui/PsIcon.vue'
1
+ import PsIcon from '../../../src/components/ui/PsIcon.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Components/Icon',
@@ -6,6 +6,7 @@ export default {
6
6
  argTypes: {},
7
7
  }
8
8
 
9
+ // @ts-ignore
9
10
  const Template = (args, { argTypes }) => ({
10
11
  props: Object.keys(argTypes),
11
12
  components: { PsIcon },
@@ -18,4 +19,5 @@ export default {
18
19
  })
19
20
 
20
21
  export const IconSimple = Template.bind({})
22
+ // @ts-ignore
21
23
  IconSimple.args = {}
@@ -1,11 +1,11 @@
1
- import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
1
+ import PsInlineSelector from '../../../src/components/controls/PsInlineSelector.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Controls & Selectors/InlineSelector',
5
5
  component: PsInlineSelector,
6
6
  }
7
7
 
8
- const TemplateDefault = (args, {argTypes}) => ({
8
+ const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: {PsInlineSelector},
11
11
  template: `
@@ -1,4 +1,4 @@
1
- import PsInput from '../components/forms/PsInput.vue'
1
+ import PsInput from '../../../src/components/forms/PsInput.vue'
2
2
  export default {
3
3
  title: 'Text fields & Forms/Input',
4
4
  component: PsInput,
@@ -7,7 +7,7 @@ export default {
7
7
  required: { control: 'boolean' },
8
8
  },
9
9
  }
10
-
10
+ // @ts-ignore
11
11
  const TemplateInputText = (args, { argTypes }) => ({
12
12
  props: Object.keys(argTypes),
13
13
  components: { PsInput },
@@ -79,7 +79,7 @@ const TemplateInputText = (args, { argTypes }) => ({
79
79
  </div>
80
80
  `
81
81
  })
82
-
82
+ // @ts-ignore
83
83
  const TemplateInputPassword = (args, { argTypes }) => ({
84
84
  props: Object.keys(argTypes),
85
85
  components: { PsInput },
@@ -183,7 +183,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
183
183
  </div>
184
184
  `
185
185
  })
186
-
186
+ // @ts-ignore
187
187
  const TemplateSlots = (args, { argTypes }) => ({
188
188
  props: Object.keys(argTypes),
189
189
  components: { PsInput },
@@ -212,6 +212,7 @@ const TemplateSlots = (args, { argTypes }) => ({
212
212
  })
213
213
 
214
214
  export const InputText = TemplateInputText.bind({})
215
+ // @ts-ignore
215
216
  InputText.args = {
216
217
  label: 'Input Text',
217
218
  placeholder: 'Placeholder',
@@ -222,6 +223,7 @@ InputText.args = {
222
223
  }
223
224
 
224
225
  export const InputPassword = TemplateInputPassword.bind({})
226
+ // @ts-ignore
225
227
  InputPassword.args = {
226
228
  type: 'password',
227
229
  label: 'Password',
@@ -231,6 +233,7 @@ InputPassword.args = {
231
233
  }
232
234
 
233
235
  export const InputSlots = TemplateSlots.bind({})
236
+ // @ts-ignore
234
237
  InputSlots.args = {
235
238
  label: 'Label',
236
239
  placeholder: 'Placeholder',
@@ -1,10 +1,10 @@
1
- import PsInputSelect from '../components/forms/PsInputSelect.vue'
1
+ import PsInputSelect from '../../../src/components/forms/PsInputSelect.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Text fields & Forms/InputSelect',
5
5
  component: PsInputSelect
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const TemplateDefault = (args, {argTypes})=> ({
9
9
  props: Object.keys(argTypes),
10
10
  components: {PsInputSelect},
@@ -25,6 +25,7 @@ const TemplateDefault = (args, {argTypes})=> ({
25
25
  })
26
26
 
27
27
  export const Default = TemplateDefault.bind({})
28
+ // @ts-ignore
28
29
  Default.args = {
29
30
  items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
30
31
  }
@@ -1,11 +1,11 @@
1
- import PsInputTextArea from '../components/forms/PsInputTextArea.vue'
1
+ import PsInputTextArea from '../../../src/components/forms/PsInputTextArea.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Text fields & Forms/Input Textarea',
5
5
  component: PsInputTextArea,
6
6
  }
7
7
 
8
- const Template = (args, {argTypes}) => ({
8
+ const Template = (args:any, {argTypes}:{argTypes:any}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: {PsInputTextArea},
11
11
  template: `
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/addon-docs';
1
+ import { Meta } from "@storybook/blocks";
2
2
  import Code from './assets/code-brackets.svg';
3
3
  import Colors from './assets/colors.svg';
4
4
  import Comments from './assets/comments.svg';
@@ -10,7 +10,104 @@ import StackAlt from './assets/stackalt.svg';
10
10
 
11
11
  <Meta title="Policy Studio" />
12
12
 
13
- <style>{`
13
+ #Welcome to UI Explorer
14
+
15
+ Storybook helps you build UI components in isolation from your app's business logic, data, and context.
16
+ That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
17
+
18
+ Browse example stories now by navigating to them in the sidebar.
19
+ View their code in the `src/stories` directory to learn how they work.
20
+ We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
21
+
22
+ <div className="subheading">Configure</div>
23
+
24
+ <div className="link-list">
25
+ <a
26
+ className="link-item"
27
+ href="https://storybook.js.org/docs/react/addons/addon-types"
28
+ target="_blank"
29
+ >
30
+ <img src={Plugin} alt="plugin" />
31
+ <span>
32
+ <strong>Presets for popular tools</strong>
33
+ Easy setup for TypeScript, SCSS and more.
34
+ </span>
35
+ </a>
36
+ <a
37
+ className="link-item"
38
+ href="https://storybook.js.org/docs/react/configure/webpack"
39
+ target="_blank"
40
+ >
41
+ <img src={StackAlt} alt="Build" />
42
+ <span>
43
+ <strong>Build configuration</strong>
44
+ How to customize webpack and Babel
45
+ </span>
46
+ </a>
47
+ <a
48
+ className="link-item"
49
+ href="https://storybook.js.org/docs/react/configure/styling-and-css"
50
+ target="_blank"
51
+ >
52
+ <img src={Colors} alt="colors" />
53
+ <span>
54
+ <strong>Styling</strong>
55
+ How to load and configure CSS libraries
56
+ </span>
57
+ </a>
58
+ <a
59
+ className="link-item"
60
+ href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
61
+ target="_blank"
62
+ >
63
+ <img src={Flow} alt="flow" />
64
+ <span>
65
+ <strong>Data</strong>
66
+ Providers and mocking for data libraries
67
+ </span>
68
+ </a>
69
+ </div>
70
+
71
+ <div className="subheading">Learn</div>
72
+
73
+ <div className="link-list">
74
+ <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
75
+ <img src={Repo} alt="repo" />
76
+ <span>
77
+ <strong>Storybook documentation</strong>
78
+ Configure, customize, and extend
79
+ </span>
80
+ </a>
81
+ <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
82
+ <img src={Direction} alt="direction" />
83
+ <span>
84
+ <strong>In-depth guides</strong>
85
+ Best practices from leading teams
86
+ </span>
87
+ </a>
88
+ <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
89
+ <img src={Code} alt="code" />
90
+ <span>
91
+ <strong>GitHub project</strong>
92
+ View the source and add issues
93
+ </span>
94
+ </a>
95
+ <a className="link-item" href="https://discord.gg/storybook" target="_blank">
96
+ <img src={Comments} alt="comments" />
97
+ <span>
98
+ <strong>Discord chat</strong>
99
+ Chat with maintainers and the community
100
+ </span>
101
+ </a>
102
+ </div>
103
+
104
+ <div className="tip-wrapper">
105
+ <span className="tip">Tip</span>
106
+ <code>src/stories/Introduction.stories.mdx</code>
107
+ </div>
108
+
109
+ <style>
110
+ {`
14
111
  .subheading {
15
112
  --mediumdark: '#999999';
16
113
  font-weight: 900;
@@ -110,102 +207,5 @@ import StackAlt from './assets/stackalt.svg';
110
207
  font-size: 12px;
111
208
  display: inline-block;
112
209
  }
113
-
114
-
115
- `}</style>
116
-
117
- # Welcome to UI Explorer
118
-
119
- Storybook helps you build UI components in isolation from your app's business logic, data, and context.
120
- That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
121
-
122
- Browse example stories now by navigating to them in the sidebar.
123
- View their code in the `src/stories` directory to learn how they work.
124
- We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
125
-
126
- <div className="subheading">Configure</div>
127
-
128
- <div className="link-list">
129
- <a
130
- className="link-item"
131
- href="https://storybook.js.org/docs/react/addons/addon-types"
132
- target="_blank"
133
- >
134
- <img src={Plugin} alt="plugin" />
135
- <span>
136
- <strong>Presets for popular tools</strong>
137
- Easy setup for TypeScript, SCSS and more.
138
- </span>
139
- </a>
140
- <a
141
- className="link-item"
142
- href="https://storybook.js.org/docs/react/configure/webpack"
143
- target="_blank"
144
- >
145
- <img src={StackAlt} alt="Build" />
146
- <span>
147
- <strong>Build configuration</strong>
148
- How to customize webpack and Babel
149
- </span>
150
- </a>
151
- <a
152
- className="link-item"
153
- href="https://storybook.js.org/docs/react/configure/styling-and-css"
154
- target="_blank"
155
- >
156
- <img src={Colors} alt="colors" />
157
- <span>
158
- <strong>Styling</strong>
159
- How to load and configure CSS libraries
160
- </span>
161
- </a>
162
- <a
163
- className="link-item"
164
- href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
165
- target="_blank"
166
- >
167
- <img src={Flow} alt="flow" />
168
- <span>
169
- <strong>Data</strong>
170
- Providers and mocking for data libraries
171
- </span>
172
- </a>
173
- </div>
174
-
175
- <div className="subheading">Learn</div>
176
-
177
- <div className="link-list">
178
- <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
179
- <img src={Repo} alt="repo" />
180
- <span>
181
- <strong>Storybook documentation</strong>
182
- Configure, customize, and extend
183
- </span>
184
- </a>
185
- <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
186
- <img src={Direction} alt="direction" />
187
- <span>
188
- <strong>In-depth guides</strong>
189
- Best practices from leading teams
190
- </span>
191
- </a>
192
- <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
193
- <img src={Code} alt="code" />
194
- <span>
195
- <strong>GitHub project</strong>
196
- View the source and add issues
197
- </span>
198
- </a>
199
- <a className="link-item" href="https://discord.gg/storybook" target="_blank">
200
- <img src={Comments} alt="comments" />
201
- <span>
202
- <strong>Discord chat</strong>
203
- Chat with maintainers and the community
204
- </span>
205
- </a>
206
- </div>
207
-
208
- <div className="tip-wrapper">
209
- <span className="tip">Tip</span>Edit the Markdown in{' '}
210
- <code>src/stories/Introduction.stories.mdx</code>
211
- </div>
210
+ `}
211
+ </style>
@@ -1,6 +1,8 @@
1
+
1
2
  import PsMiniTag, {
3
+ // @ts-ignore
2
4
  typeOptions,
3
- } from '../components/badges-and-tags/PsMiniTag.vue'
5
+ } from '../../../src/components/badges-and-tags/PsMiniTag.vue'
4
6
 
5
7
  export default {
6
8
  title: 'Badges & Tags/Tags/Mini Tag',
@@ -14,7 +16,7 @@ export default {
14
16
  },
15
17
  },
16
18
  }
17
-
19
+ // @ts-ignore
18
20
  const Template = (args, { argTypes }) => ({
19
21
  props: Object.keys(argTypes),
20
22
  components: { PsMiniTag },
@@ -22,30 +24,35 @@ const Template = (args, { argTypes }) => ({
22
24
  })
23
25
 
24
26
  export const Info = Template.bind({})
27
+ // @ts-ignore
25
28
  Info.args = {
26
29
  layout: 'info',
27
30
  message: 'This is an info alert',
28
31
  }
29
32
 
30
33
  export const Success = Template.bind({})
34
+ // @ts-ignore
31
35
  Success.args = {
32
36
  layout: 'success',
33
37
  message: 'This is a success alert',
34
38
  }
35
39
 
36
40
  export const Warning = Template.bind({})
41
+ // @ts-ignore
37
42
  Warning.args = {
38
43
  layout: 'warning',
39
44
  message: 'This is a warning alert',
40
45
  }
41
46
 
42
47
  export const Error = Template.bind({})
48
+ // @ts-ignore
43
49
  Error.args = {
44
50
  layout: 'error',
45
51
  message: 'This is an error alert',
46
52
  }
47
53
 
48
54
  export const Default = Template.bind({})
55
+ // @ts-ignore
49
56
  Default.args = {
50
57
  layout: 'default',
51
58
  message: 'This is a default color',
@@ -1,4 +1,4 @@
1
- import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
1
+ import PsProgressBar from '../../../src/components/badges-and-tags/PsProgressBar.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Badges & Tags/Badges/ProgressBar',
@@ -12,7 +12,7 @@ export default {
12
12
  },
13
13
  },
14
14
  }
15
-
15
+ // @ts-ignore
16
16
  const TemplateDefault = (args, { argTypes }) => ({
17
17
  props: Object.keys(argTypes),
18
18
  components: { PsProgressBar },
@@ -20,4 +20,5 @@ const TemplateDefault = (args, { argTypes }) => ({
20
20
  })
21
21
 
22
22
  export const Default = TemplateDefault.bind({})
23
+ // @ts-ignore
23
24
  Default.args = {}
@@ -1,10 +1,10 @@
1
- import PsRadioButton from '../components/controls/PsRadioButton.vue'
1
+ import PsRadioButton from '../../../src/components/controls/PsRadioButton.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Controls & Selectors/Radio Button',
5
5
  component: PsRadioButton,
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const DefaultTemplate = (args,{ argTypes}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsRadioButton},
@@ -1,11 +1,11 @@
1
- import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
1
+ import PsRadioButtonSimple from '../../../src/components/controls/PsRadioButtonSimple.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Text fields & Forms/Inputs V2/RadioButton',
5
5
  component: PsRadioButtonSimple,
6
6
  }
7
7
 
8
- const defaultTemplate = (args, {argTypes}) => ({
8
+ const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsRadioButtonSimple },
11
11
  data: () => ({
@@ -1,10 +1,10 @@
1
- import PsSimpleAlert from '../components/notifications/PsSimpleAlert.vue'
1
+ import PsSimpleAlert from '../../../src/components/notifications/PsSimpleAlert.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Notifications/Simple Alert',
5
5
  component: PsSimpleAlert,
6
6
  }
7
-
7
+ // @ts-ignore
8
8
  const TemplateDefault = (args, { argTypes }) => ({
9
9
  props: Object.keys(argTypes),
10
10
  components: { PsSimpleAlert },
@@ -16,6 +16,7 @@ export default {
16
16
  })
17
17
 
18
18
  export const Default = TemplateDefault.bind({})
19
+ // @ts-ignore
19
20
  Default.args = {
20
21
  message:'lorem'
21
22
  }