@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/SidebarPrimary.stories.js

@@ -10,88 +10,95 @@ export default {
     hideText: { control: { type: 'text' } },
     language: { control: { type: 'select', options: ['pt-br', 'en'] } },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    SidebarPrimary,
-  },
-  template: `
-    <sidebar-primary v-bind="$props" style="min-height: 300px;">
-      <template v-slot:header>
-        Header
-      </template>
-
-      <template #block-chats>
-        Hello World!
-      </template>
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { SidebarPrimary },
+    template: `
+      <sidebar-primary v-bind="args" style="min-height: 300px;">
+        <template #header>
+          Header
+        </template>
 
-      <template #block-flows>
-        Hello World!
-      </template>
-    </sidebar-primary>
-  `,
-});
+        <template #block-chats>
+          Hello World!
+        </template>
 
-export const Normal = Template.bind({});
+        <template #block-flows>
+          Hello World!
+        </template>
+      </sidebar-primary>
+    `,
+  }),
+};
 
-Normal.args = {
-  expanded: true,
-  language: 'pt-br',
-  hideText: 'Encolher',
-  items: [
-    {
-      label: 'Menu principal',
-      items: [
-        {
-          label: 'Início',
-          active: true,
-          icon: 'house-1-1',
-          // eslint-disable-next-line no-param-reassign
-          click(option) {
-            option.active = !option.active;
+export const Normal = {
+  args: {
+    expanded: true,
+    language: 'pt-br',
+    hideText: 'Encolher',
+    items: [
+      {
+        label: 'Menu principal',
+        items: [
+          {
+            label: 'Início',
+            active: true,
+            icon: 'house-1-1',
+            // eslint-disable-next-line no-param-reassign
+            click(option) {
+              option.active = !option.active;
+            },
           },
-        },
-      ],
-    },
-    {
-      label: 'Sistemas',
-      items: [
-        {
-          id: 'flows',
-          label: 'Fluxos',
-          active: false,
-          icon: 'hierarchy-3-2',
-          click() {},
-        },
-        {
-          id: 'ia',
-          label: 'Inteligência Artificial',
-          active: false,
-          icon: 'science-fiction-robot-2',
-          click() {},
-        },
-        {
-          id: 'chats',
-          label: 'Agentes',
-          active: false,
-          icon: 'messaging-we-chat-3',
-          click() {},
-          notify: true,
-        },
-      ],
-    },
-    {
-      label: 'Perfil',
-      items: [
-        {
-          label: 'Conta',
-          active: false,
-          icon: 'single-neutral-actions-1',
-          click() {},
-        },
-      ],
-    },
-  ],
+        ],
+      },
+      {
+        label: 'Sistemas',
+        items: [
+          {
+            id: 'insights',
+            label: 'Insights',
+            active: false,
+            tag: 'Alfa',
+            icon: 'bar_chart_4_bars',
+            click() {},
+          },
+          {
+            id: 'flows',
+            label: 'Fluxos',
+            active: false,
+            icon: 'hierarchy-3-2',
+            click() {},
+          },
+          {
+            id: 'ia',
+            label: 'Inteligência Artificial',
+            active: false,
+            icon: 'science-fiction-robot-2',
+            click() {},
+          },
+          {
+            id: 'chats',
+            label: 'Agentes',
+            active: false,
+            icon: 'messaging-we-chat-3',
+            click() {},
+            notify: true,
+          },
+        ],
+      },
+      {
+        label: 'Perfil',
+        items: [
+          {
+            label: 'Conta',
+            active: false,
+            icon: 'single-neutral-actions-1',
+            click() {},
+          },
+        ],
+      },
+    ],
+  },
 };

package/src/stories/SkeletonLoading.stories.js

@@ -1,8 +1,8 @@
-import unnnicSkeletonLoading from '../components/SkeletonLoading/SkeletonLoading.vue';
+import UnnnicSkeletonLoading from '../components/SkeletonLoading/SkeletonLoading.vue';
 
 export default {
   title: 'example/Skeleton',
-  component: unnnicSkeletonLoading,
+  component: UnnnicSkeletonLoading,
   argTypes: {
     width: { control: { type: 'text' } },
     height: { control: { type: 'text' } },
@@ -14,32 +14,15 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes).concat(['input']),
-  components: {
-    unnnicSkeletonLoading,
+export const Default = {
+  args: {
+    width: '500px',
+    height: '200px',
+    prefix: 'unnnic',
+    tag: 'span',
+    duration: 1.5,
+    count: 1,
+    circle: false,
+    loading: true,
   },
-  data() {
-    return {
-      insideValue: 'option 1',
-    };
-  },
-  template: `
-    <div>
-      <h3>Default</h3>
-      <unnnic-skeleton-loading  v-bind="$props" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  width: '500px',
-  height: '200px',
-  prefix: 'unnnic',
-  tag: 'span',
-  duration: 1.5,
-  count: 1,
-  circle: false,
-  loading: true,
 };

package/src/stories/StarRating.stories.js

@@ -1,42 +1,38 @@
-import unnnicStarRating from '../components/StarRating/StarRating.vue';
+import UnnnicStarRating from '../components/StarRating/StarRating.vue';
 
 export default {
   title: 'Rating/StarRating',
-  component: unnnicStarRating,
+  component: UnnnicStarRating,
   argTypes: {
     showValue: { control: { type: 'boolean' } },
     readonly: { control: { type: 'boolean' } },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicStarRating,
-  },
-
-  data() {
-    return {
-      value: 4,
-    };
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicStarRating,
+    },
+
+    data() {
+      return {
+        value: 4,
+      };
+    },
+
+    template: `
+      <div>
+        <pre>v-model: {{ value }}</pre>
+        <unnnic-star-rating v-model="value" showValue readonly />
+      </div>
+    `,
+  }),
+  args: {
+    value: 3.6,
+    showValue: true,
+    readonly: true,
   },
-
-  template: `
-    <div>
-      <pre>v-model: {{ value }}</pre>
-      <unnnic-star-rating v-model="value" showValue readonly>
-      </unnnic-star-rating>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  value: 3.6,
-  showValue: true,
-  readonly: true,
 };
+
+export const Default = {};

package/src/stories/Switch.stories.js

@@ -1,32 +1,39 @@
-import unnnicSwitch from '../components/Switch/Switch.vue';
+import UnnnicSwitch from '../components/Switch/Switch.vue';
 
 export default {
   title: 'Form/Switch',
-  component: unnnicSwitch,
+  component: UnnnicSwitch,
   argTypes: {
     size: { control: { type: 'select', options: ['small', 'medium'] } },
     textLeft: { control: { type: 'text' } },
     textRight: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
+  render: (args) => ({
+    components: {
+      UnnnicSwitch,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        value: true,
+      };
+    },
+    template: `
+      <div>
+        <UnnnicSwitch v-bind="args" v-model="value"/> 
+        <div>{{value}}</div>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicSwitch },
-  data() {
-    return {
-      val: true,
-    };
+export const Default = {
+  args: {
+    size: 'medium',
+    textRight: 'Default',
+    disabled: false,
   },
-  template:
-    '<div><unnnicSwitch v-bind="$props" v-model="val"/> <div>{{val}}</div></div>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 'medium',
-  textRight: 'Default',
-  disabled: false,
-  // initialState: true,
 };

package/src/stories/TabsExpanded.stories.js

@@ -1,71 +1,69 @@
+import { action } from '@storybook/addon-actions';
 import UnnnicTabsExpanded from '../components/TabsExpanded/TabsExpanded.vue';
 
 export default {
   title: 'tabs/TabsExpanded',
   component: UnnnicTabsExpanded,
-  argTypes: {
-    'on-update:model-value': { action: '@update:model-value' },
-    'on-back': { action: '@back' },
-    'on-add': { action: '@add' },
-    'on-close-tab': { action: '@close-tab' },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    UnnnicTabsExpanded,
-  },
-
-  props: Object.keys(argTypes),
-
-  data() {
-    return {
-      v: 'uuid2',
-      lItems: [],
-    };
-  },
-
-  created() {
-    this.lItems = this.items;
-  },
-
-  methods: {
-    lCloseTab(tab) {
-      const index = this.lItems.findIndex(({ value }) => value === tab.value);
+  argTypes: {},
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicTabsExpanded,
+    },
 
-      this.lItems.splice(index, 1);
+    data() {
+      return {
+        v: 'uuid2',
+        lItems: [],
+      };
+    },
 
-      this.v = this.lItems[index]?.value || this.lItems[index - 1]?.value;
+    created() {
+      this.lItems = args.items;
     },
-  },
 
-  template:
-    '<div><pre>v-model: {{ v }}</pre><unnnic-tabs-expanded  v-bind="$props" v-model="v" @close-tab="lCloseTab"></unnnic-tabs-expanded></div>',
-});
+    methods: {
+      lCloseTab(tab) {
+        const index = this.lItems.findIndex(({ value }) => value === tab.value);
 
-export const Default = Template.bind({});
+        this.lItems.splice(index, 1);
 
-Default.args = {
-  items: [
-    {
-      title: 'Suporte',
-      description: 'Última edição há 5 minutos',
-      value: 'uuid1',
-    },
-    {
-      title: 'Boas vindas',
-      description: 'Última edição agora há pouco',
-      value: 'uuid2',
+        this.v = this.lItems[index]?.value || this.lItems[index - 1]?.value;
+      },
     },
-    {
-      title: 'Atendimento',
-      description: 'Última edição em 4 de janeiro',
-      value: 'uuid3',
-    },
-    {
-      title: 'Texto grande texto grande texto grande',
-      description: 'Texto grande texto grande texto grande',
-      value: 'uuid4',
-    },
-  ],
+
+    template:
+      '<div><pre>v-model: {{ v }}</pre><unnnic-tabs-expanded  v-bind="args" v-model="v" @close-tab="lCloseTab"></unnnic-tabs-expanded></div>',
+  }),
+  args: {
+    onBack: action('@back'),
+    onAdd: action('@add'),
+    onCloseTab: action('@close-tab'),
+    items: [
+      {
+        title: 'Suporte',
+        description: 'Última edição há 5 minutos',
+        value: 'uuid1',
+      },
+      {
+        title: 'Boas vindas',
+        description: 'Última edição agora há pouco',
+        value: 'uuid2',
+      },
+      {
+        title: 'Atendimento',
+        description: 'Última edição em 4 de janeiro',
+        value: 'uuid3',
+      },
+      {
+        title: 'Texto grande texto grande texto grande',
+        description: 'Texto grande texto grande texto grande',
+        value: 'uuid4',
+      },
+    ],
+  },
 };
+
+export const Default = {};

package/src/stories/TextArea.stories.js

@@ -1,45 +1,40 @@
-import unnnicTextArea from '../components/TextArea/TextArea.vue';
+import UnnnicTextArea from '../components/TextArea/TextArea.vue';
 
 export default {
   title: 'Form/TextArea',
-  component: unnnicTextArea,
+  component: UnnnicTextArea,
   argTypes: {
-    'on-update:model-value': { action: '@update:model-value' },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
     type: { control: { type: 'select', options: ['normal', 'error'] } },
   },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicTextArea,
+    },
+    data() {
+      return {
+        content: '',
+      };
+    },
+    template: `
+      <div>
+        <pre>v-model: {{ content }}</pre>
+        <unnnic-text-area v-bind="args" v-model="content"/>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicTextArea,
-  },
-
-  data() {
-    return {
-      content: '',
-    };
+export const Default = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    errors: [],
   },
-
-  template: `
-    <div>
-      <pre>v-model: {{ content }}</pre>
-      <unnnic-text-area v-bind="$props" v-model="content"/>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  maxLength: 150,
-  disabled: false,
-  type: 'normal',
-  errors: [],
 };

package/src/stories/TransitionRipple.stories.js

@@ -12,23 +12,24 @@ export default {
       },
     },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    unnnicTransitionRipple,
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      unnnicTransitionRipple,
+    },
+    template: `
+      <div ref="transitionContainer" @mousedown="(event) => this.$refs.transitionRipple.addRipple(event)" style="width: 100%; height: 100px;">
+        Click to activate transition
+  
+        <unnnic-transition-ripple ref="transitionRipple" v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    color: 'weni-600',
   },
-  template: `
-    <div ref="transitionContainer" @mousedown="(event) => this.$refs.transitionRipple.addRipple(event)" style="width: 100%; height: 100px;">
-      Click to activate transition
-
-      <unnnic-transition-ripple ref="transitionRipple" v-bind="$props" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  color: 'weni-600',
 };
+
+export const Default = {};