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

package/doc/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@policystudio/policy-studio-ui-vue",
+  "version": "1.1.90-beta.12",
+  "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",
+    "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\" \"storybook dev -p 6006\"",
+    "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
+    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets"
+  },
+  "types": "shims-vue.d.ts",
+  "dependencies": {
+    "@vue/compat": "^3.4.5",
+    "core-js": "^3.6.5",
+    "tiny-emitter": "^2.1.0",
+    "v-tooltip": "^2.1.3",
+    "vue": "^3.4.5"
+  },
+  "devDependencies": {
+    "@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",
+    "@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": "^8.56.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^8.7.1",
+    "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",
+    "tailwindcss": "^3.4.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "~4.5.5",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-loader": "^17.4.2",
+    "vue-tsc": "^1.8.27",
+    "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/doc/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

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

@@ -1,5 +1,5 @@
-import PsAccordionItem  from '../components/accordion/PsAccordionItem.vue'
-import PsAccordion from '../components/accordion/PsAccordion.vue'
+import PsAccordionItem  from '../../../src/components/accordion/PsAccordionItem.vue'
+import PsAccordion from '../../../src/components/accordion/PsAccordion.vue'
 
 export default {
   title: 'Components/Accordion',
@@ -7,9 +7,8 @@ export default {
   subcomponents: { PsAccordionItem },
 }
 
-
-export const Index = (args, { argTypes }) => ({
-  props: Object.keys(argTypes, args),
+export const Index = (args:any, { argTypes }: { argTypes:any }) => ({
+  props: Object.keys({argTypes, args}),
   components: { PsAccordion, PsAccordionItem },
   template:
     `

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

@@ -1,4 +1,4 @@
-import  PsBadgeWithIcon  from '../components/badges-and-tags/PsBadgeWithIcon.vue'
+import  PsBadgeWithIcon  from '../../../src/components/badges-and-tags/PsBadgeWithIcon.vue'
 
 export default {
     title: 'Badges & Tags/Badges/BadgeWithIcon',
@@ -7,7 +7,7 @@ export default {
     },
   }
   
-  const TemplateDefault = (args, {argTypes})=>({
+  const TemplateDefault = (args:any, {argTypes}:{argTypes:any})=>({
     props: Object.keys(argTypes),
     components:{PsBadgeWithIcon},
     template: `

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

@@ -1,10 +1,10 @@
-import PsBarChart from '../components/data-graphics/PsBarChart.vue'
+import PsBarChart from '../../../src/components/data-graphics/PsBarChart.vue'
 export default {
   title: 'Data Graphics/Charts/BarChart',
   component: PsBarChart,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBarChart },
   template: `

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

@@ -1,4 +1,4 @@
-import PsBreadcrumb from '../components/navigations/PsBreadcrumb.vue'
+import PsBreadcrumb from '../../../src/components/navigations/PsBreadcrumb.vue'
 export default {
   title: 'Navigations/Breadcrumb',
   component: PsBreadcrumb,
@@ -11,7 +11,7 @@ const items = [
   { title: '4th level', route: '' },
 ]
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBreadcrumb },
   template: `
@@ -20,6 +20,3 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
-Default.args = {
-  items: items,
-}

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

@@ -1,130 +1,130 @@
-import PsButton, { sizes } from '../components/buttons/PsButton.vue'
-const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Components/Button',
-  component: PsButton,
-  argTypes: {
-    size: { control: { type: 'select', options: sizes } },
-    disabled: { control: 'boolean' },
-    icon: { control: { type: 'select', options: icons } },
-    iconRight: { control: { type: 'select', options: icons } },
-  },
-}
-
-const TemplateDefault = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsButton },
-  template: `
-  <div style="display:flex; flex-direction: column;">     
-    <p>Size: Big</p> 
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
-          <span style="text-align: center; color: black;">Solid Style</span>
-          <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
-          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
-          <PsButton label='Text Only'  layout='solid' />
-          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>          
-          <PsButton label='Loading Solid'   layout='solid' icon='verified' iconPosition='left' loading />
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: blue;">Outline Style</span>
-          <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
-          <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
-          <PsButton label='Text Only'  layout='outline'/>
-          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
-          <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: brown;">Ghost Style</span>
-          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
-          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
-          <PsButton label='Text Only' layout='ghost' />
-          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
-          <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: green;">Only-Text Style</span>
-          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
-          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
-          <PsButton label='Text Only' layout='onlytext'/>
-          <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
-          <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: red;">Caution Button</span>
-          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
-          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
-          <PsButton label='Text Only' layout='caution' />
-          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
-          <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
-    </div>
-
-
-    </div>
-    <p>Size: Medium</p>
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: black;">Solid Style</span>
-          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
-          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
-          <PsButton label='Text Only' layout='solid'  size='medium'/>
-          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: blue;">Outline Style</span>
-          <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
-          <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
-          <PsButton label='Text Only' layout='outline' size='medium'/>
-          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: brown;">Ghost Style</span>
-          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
-          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
-          <PsButton label='Text Only' layout='ghost' size='medium'/>
-          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: green;">Only-Text Style</span>
-          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
-          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
-          <PsButton label='Text Only' layout='onlytext' size='medium'/>
-          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: red;">Caution Button</span>
-          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
-          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
-          <PsButton label='Text Only' layout='caution' size='medium'/>
-          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled size='medium'/>
-      </div>      
-    </div>
-    <p>Size: Small</p>
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: black;">Solid Style</span>
-          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
-          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
-          <PsButton label='Text Only' layout='solid' size='small'/>
-          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: green;">Only-Text Style</span>
-          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
-          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
-          <PsButton label='Text Only' layout='onlytext' size='small'/>
-          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
-      </div>
-      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: red;">Caution Button</span>
-          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
-          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
-          <PsButton label='Text Only' layout='caution' size='small'/>
-          <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
-      </div>
-    </div>
-    </div>
-  `,
-})
-
-export const Default = TemplateDefault.bind({})
+import PsButton, { sizes } from '../../../src/components/buttons/PsButton.vue'
+const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/Button',
+  component: PsButton,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    disabled: { control: 'boolean' },
+    icon: { control: { type: 'select', options: icons } },
+    iconRight: { control: { type: 'select', options: icons } },
+  },
+}
+
+const TemplateDefault = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsButton },
+  template: `
+  <div style="display:flex; flex-direction: column;">     
+    <p>Size: Big</p> 
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='solid' />
+          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>          
+          <PsButton label='Loading Solid'   layout='solid' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='outline'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='ghost' />
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='onlytext'/>
+          <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='caution' />
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
+    </div>
+
+
+    </div>
+    <p>Size: Medium</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='solid'  size='medium'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='outline' size='medium'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='ghost' size='medium'/>
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='onlytext' size='medium'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='caution' size='medium'/>
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>      
+    </div>
+    <p>Size: Small</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='solid' size='small'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='onlytext' size='small'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='caution' size='small'/>
+          <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+    </div>
+    </div>
+  `,
+})
+
+export const Default = TemplateDefault.bind({})

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

@@ -1,4 +1,4 @@
-import PsCardInfos from '../components/badges-and-tags/PsCardInfos.vue'
+import PsCardInfos from '../../../src/components/badges-and-tags/PsCardInfos.vue'
 
 export default {
   title: 'Components/CardInfos',
@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsCardInfos },
   template: '<PsCardInfos v-bind="$props" />',
 })
 
 export const CardInfos = Template.bind({})
-CardInfos.args = {}

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

@@ -1,4 +1,4 @@
-import PsChartLegend from '../components/badges-and-tags/PsChartLegend.vue'
+import PsChartLegend from '../../../src/components/badges-and-tags/PsChartLegend.vue'
 
 export default {
   title: 'Badges & Tags/Badges/ChartLegend',
@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes } : { argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsChartLegend },
   template: '<PsChartLegend v-bind="$props" />',
 })
 
 export const ChartLegend = Template.bind({})
-ChartLegend.args = {}

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

@@ -1,11 +1,11 @@
-import PsCheckbox from '../components/controls/PsCheckbox.vue'
+import PsCheckbox from '../../../src/components/controls/PsCheckbox.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Controls & Selectors/Checkbox',
   component: PsCheckbox,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox},
   template: `

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

@@ -1,11 +1,11 @@
-import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
+import PsCheckboxSimple from '../../../src/components/controls/PsCheckboxSimple.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Text fields & Forms/Inputs V2/Checkbox',
   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 → doc/src/stories/Chips.stories.ts}

@@ -1,31 +1,30 @@
-import PsChips from '../components/chips/PsChips.vue'
+import PsChips from '../../../src/components/chips/PsChips.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-export default {
-  title: 'Components/Chips',
-  component: PsChips,
+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:'',
+    }
+  })
+}

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

@@ -1,17 +1,18 @@
-import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
+import PsClimateZoneBadge from '../../../src/components/badges-and-tags/PsClimateZoneBadge.vue'
 
 export default {
   title: 'Badges & Tags/Badges/ClimateZoneBadge',
   component: PsClimateZoneBadge,
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsClimateZoneBadge },
   template: '<PsClimateZoneBadge v-bind="$props" />',
 })
 
 export const ClimateZoneBadge = Template.bind({})
+// @ts-ignore
 ClimateZoneBadge.args = {
   icon: 'area_chart',
 }

package/doc/src/stories/Collapse.stories.ts

@@ -0,0 +1,46 @@
+import PsCollapse from '../../../src/components/collapse/PsCollapse.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta<typeof PsCollapse> = {
+  title: 'Collapse/Collapse/Default',
+  component: PsCollapse
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsCollapse>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsCollapse },
+    setup(){
+      return { ...args }
+    },
+    template: `<div style="width: 150px;">
+                <PsCollapse :title="title">
+                <template #header-action>
+                  <span>a</span>
+                </template>
+                  <template #content>
+                    <PsCollapse  :title="title_second" :disabled="true">
+                      <template #header-action>
+                        <div>a</div>
+                      </template>
+                      <template #content>
+                        <div style="display: flex; flex-direction: column; padding: 0px 8px;">
+                          <span>Active</span>
+                          <span>Resting</span>
+                          <span>Disabled</span>
+                        </div>
+                      </template>
+                    </PsCollapse>
+                  </template>
+                </PsCollapse>
+              </div>
+              `,
+            }),
+            args:{
+              title: 'First Level',
+              title_second: '2nd Level Dis'
+            }
+}