@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/CardProject.stories.js

@@ -1,30 +1,29 @@
-import unnnicCardProject from '../components/CardProject/CardProject.vue';
-import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-import unnnicIcon from '../components/Icon.vue';
+import UnnnicCardProject from '../components/CardProject/CardProject.vue';
+import UnnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
+import UnnnicIcon from '../components/Icon.vue';
 
 export default {
   title: 'Card/CardProject',
-  component: unnnicCardProject,
+  component: UnnnicCardProject,
   argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCardProject,
-    unnnicDropdownItem,
-    unnnicIcon,
-  },
-
-  data() {
-    return {};
-  },
-
-  template: `
-    <div>
-      <unnnic-card-project v-bind="$props">
-        <template v-slot:actions>
+  render: (args) => ({
+    components: {
+      UnnnicCardProject,
+      UnnnicDropdownItem,
+      UnnnicIcon,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        value: true,
+      };
+    },
+    template: `
+      <div>
+      <unnnic-card-project v-bind="args">
+        <template #actions>
           <unnnic-dropdown-item>
             <unnnic-icon size="sm" icon="cog-1" />
             Configuração
@@ -37,34 +36,33 @@ const Template = (args, { argTypes }) => ({
         </template>
       </unnnic-card-project>
     </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
+    `,
+  }),
+};
 
-Default.args = {
-  name: 'Nome do Projeto',
-  actionText: 'Entrar',
-  statuses: [
-    {
-      title: 'AI',
-      icon: 'science-fiction-robot-2',
-      scheme: 'aux-blue',
-      count: 1,
-    },
-    {
-      title: 'Flows',
-      icon: 'hierarchy-3-2',
-      scheme: 'aux-purple',
-      count: 2,
-    },
-    {
-      title: 'Contatos',
-      icon: 'single-neutral-actions-1',
-      scheme: 'aux-lemon',
-      count: 3,
-    },
-  ],
+export const Default = {
+  args: {
+    name: 'Nome do Projeto',
+    actionText: 'Entrar',
+    statuses: [
+      {
+        title: 'AI',
+        icon: 'science-fiction-robot-2',
+        scheme: 'aux-blue',
+        count: 1,
+      },
+      {
+        title: 'Flows',
+        icon: 'hierarchy-3-2',
+        scheme: 'aux-purple',
+        count: 2,
+      },
+      {
+        title: 'Contatos',
+        icon: 'single-neutral-actions-1',
+        scheme: 'aux-lemon',
+        count: 3,
+      },
+    ],
+  },
 };

package/src/stories/Carousel.stories.js

@@ -1,39 +1,44 @@
-import unnnicCarousel from '../components/Carousel/Carousel.vue';
+import UnnnicCarousel from '../components/Carousel/Carousel.vue';
 import iconList from '../utils/iconList';
 
 export default {
   title: 'Example/Carousel',
-  component: unnnicCarousel,
+  component: UnnnicCarousel,
   argTypes: {
     type: { control: { type: 'select' }, options: ['brand'] },
     icon: { control: { type: 'select' }, options: iconList },
   },
+  render: (args) => ({
+    components: {
+      UnnnicCarousel,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        selecteds: [1],
+      };
+    },
+    template: `
+      <unnnic-carousel v-bind="args" v-model="selecteds" />
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicCarousel },
-  data() {
-    return {
-      selecteds: [1],
-    };
+export const Tag = {
+  args: {
+    type: 'brand',
+    tagItems: [
+      { id: 1, name: 'tag - 1' },
+      { id: 2, name: 'tag - 2' },
+      { id: 3, name: 'tag - 3' },
+      { id: 4, name: 'tag - 4' },
+      { id: 5, name: 'tag - 5' },
+      { id: 6, name: 'tag - 6' },
+      { id: 7, name: 'tag - 7' },
+      { id: 8, name: 'tag - 8' },
+      { id: 9, name: 'tag - 9' },
+    ],
   },
-  template:
-    '<div><pre>v-model: {{ selecteds }}</pre><unnnic-carousel v-bind="$props" v-model="selecteds" /></div>',
-});
-
-export const Tag = Template.bind({});
-Tag.args = {
-  type: 'brand',
-  tagItems: [
-    { id: 1, name: 'tag - 1' },
-    { id: 2, name: 'tag - 2' },
-    { id: 3, name: 'tag - 3' },
-    { id: 4, name: 'tag - 4' },
-    { id: 5, name: 'tag - 5' },
-    { id: 6, name: 'tag - 6' },
-    { id: 7, name: 'tag - 7' },
-    { id: 8, name: 'tag - 8' },
-    { id: 9, name: 'tag - 9' },
-  ],
 };

package/src/stories/ChartBar.stories.js

@@ -17,120 +17,100 @@ export default {
     },
   },
 };
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    unnnicChartBar,
-  },
-
-  props: Object.keys(argTypes),
-
-  template:
-    '<unnnic-chart-bar v-bind="$props" @update="update" @previous="previous" @next="next" />',
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title Graph',
-  description: 'Description graph',
-  updateText: 'Atualizar',
-  groups: [
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 0.5,
+export const Default = {
+  args: {
+    title: 'Title Graph',
+    description: 'Description graph',
+    updateText: 'Atualizar',
+    groups: [
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 0.5,
+        },
+        title: 'Group 1',
       },
-      title: 'Group 1',
-    },
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 1,
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 1,
+        },
+        title: 'Group 2',
       },
-      title: 'Group 2',
-    },
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 1,
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 1,
+        },
+        title: 'Group 3',
       },
-      title: 'Group 3',
-    },
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 1,
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 1,
+        },
+        title: 'Group 4',
       },
-      title: 'Group 4',
-    },
-  ],
-  showFooterLegend: true,
+    ],
+    showFooterLegend: true,
+  },
 };
 
-export const Condensed = Template.bind({});
-
-Condensed.args = {
-  condensed: true,
-  fixedMaxValue: 1,
-  groups: [
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 0.5,
+export const Condensed = {
+  args: {
+    condensed: true,
+    fixedMaxValue: 1,
+    groups: [
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 0.5,
+        },
+        title: 'Group 1',
       },
-      title: 'Group 1',
-    },
-    {
-      values: {
-        'Legend 1': 1,
-        'Legend 2': 1,
+      {
+        values: {
+          'Legend 1': 1,
+          'Legend 2': 1,
+        },
+        title: 'Group 2',
       },
-      title: 'Group 2',
-    },
-  ],
-};
-
-export const CondensedWithoutEventsAndTitleAndDescription = (
-  args,
-  { argTypes },
-) => ({
-  components: {
-    unnnicChartBar,
+    ],
   },
+};
 
-  props: Object.keys(argTypes),
-
-  template: '<unnnic-chart-bar v-bind="$props" />',
-});
-
-CondensedWithoutEventsAndTitleAndDescription.args = {
-  condensed: true,
-  fixedMaxValue: 1,
-  groups: [
-    {
-      values: {
-        'Legend 1': 1,
+export const CondensedWithoutEventsAndTitleAndDescription = {
+  args: {
+    condensed: true,
+    fixedMaxValue: 1,
+    groups: [
+      {
+        values: {
+          'Legend 1': 1,
+        },
+        title: 'Group 1',
       },
-      title: 'Group 1',
-    },
-    {
-      values: {
-        'Legend 1': 1,
+      {
+        values: {
+          'Legend 1': 1,
+        },
+        title: 'Group 2',
       },
-      title: 'Group 2',
-    },
-    {
-      values: {
-        'Legend 1': 1,
+      {
+        values: {
+          'Legend 1': 1,
+        },
+        title: 'Group 3',
       },
-      title: 'Group 3',
-    },
-    {
-      values: {
-        'Legend 1': 0.5,
+      {
+        values: {
+          'Legend 1': 0.5,
+        },
+        title: 'Group 4',
       },
-      title: 'Group 4',
-    },
-  ],
+    ],
+    update: null,
+    previous: null,
+    next: null,
+  },
 };

package/src/stories/ChartLine.stories.js

@@ -6,59 +6,49 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  components: {
-    unnnicChartLine,
+export const Default = {
+  args: {
+    title: 'Histórico de análises',
+    fixedMaxValue: 1,
+    data: [
+      {
+        title: 'Jan',
+        value: 0.5,
+      },
+      {
+        title: 'Fev',
+        value: 1,
+      },
+      {
+        title: 'Mar',
+        value: 1,
+      },
+    ],
   },
-
-  props: Object.keys(argTypes),
-
-  template: '<unnnic-chart-line v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Histórico de análises',
-  fixedMaxValue: 1,
-  data: [
-    {
-      title: 'Jan',
-      value: 0.5,
-    },
-    {
-      title: 'Fev',
-      value: 1,
-    },
-    {
-      title: 'Mar',
-      value: 1,
-    },
-  ],
 };
 
-export const Condensed = Template.bind({});
-
-Condensed.args = {
-  title: 'Histórico de análises',
-  condensed: true,
-  fixedMaxValue: 1,
-  data: [
-    {
-      title: 'Jan',
-      value: 0,
-    },
-    {
-      title: 'Fev',
-      value: 1,
-    },
-    {
-      title: 'Mar',
-      value: 0.5,
-    },
-    {
-      title: 'Abr',
-      value: 1,
-    },
-  ],
+export const Condensed = {
+  args: {
+    title: 'Histórico de análises',
+    condensed: true,
+    fixedMaxValue: 1,
+    data: [
+      {
+        title: 'Jan',
+        value: 0,
+      },
+      {
+        title: 'Fev',
+        value: 1,
+      },
+      {
+        title: 'Mar',
+        value: 0.5,
+      },
+      {
+        title: 'Abr',
+        value: 1,
+      },
+    ],
+  },
 };

package/src/stories/ChartMultiLine.stories.js

@@ -6,54 +6,44 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  components: {
-    unnnicChartMultiLine,
+export const Default = {
+  args: {
+    title: 'Histórico',
+    data: [
+      {
+        title: 'Grupo 1',
+        data: [
+          {
+            title: '1',
+            value: 5,
+          },
+          {
+            title: '2',
+            value: 7,
+          },
+          {
+            title: '3',
+            value: 9,
+          },
+        ],
+      },
+      {
+        title: 'Grupo 2',
+        data: [
+          {
+            title: '1',
+            value: 1,
+          },
+          {
+            title: '2',
+            value: 4,
+          },
+          {
+            title: '3',
+            value: 2,
+          },
+        ],
+      },
+    ],
   },
-
-  props: Object.keys(argTypes),
-
-  template: '<unnnic-chart-multi-line v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Histórico',
-  data: [
-    {
-      title: 'Grupo 1',
-      data: [
-        {
-          title: '1',
-          value: 5,
-        },
-        {
-          title: '2',
-          value: 7,
-        },
-        {
-          title: '3',
-          value: 9,
-        },
-      ],
-    },
-    {
-      title: 'Grupo 2',
-      data: [
-        {
-          title: '1',
-          value: 1,
-        },
-        {
-          title: '2',
-          value: 4,
-        },
-        {
-          title: '3',
-          value: 2,
-        },
-      ],
-    },
-  ],
 };

package/src/stories/ChartRainbow.stories.js

@@ -4,14 +4,14 @@ export default {
   title: 'charts/ChartRainbow',
   component: unnnicChartRainbow,
   argTypes: {
-    value: { control: { type: 'number', min: 0, max: 100, step: 0.1 } },
+    modelValue: { control: { type: 'number', min: 0, max: 100, step: 0.1 } },
     description: { control: 'text' },
   },
 };
 
 export const Default = {
   args: {
-    value: 50,
+    modelValue: 50,
     description: 'Description',
   },
 };