@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/Modal.stories.js

@@ -1,10 +1,10 @@
-import unnnicModal from '../components/Modal/Modal.vue';
-import unnnicCallModal from '../components/Modal/CallModal.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicModal from '../components/Modal/Modal.vue';
+import UnnnicCallModal from '../components/Modal/CallModal.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 export default {
   title: 'Example/Modal',
-  component: unnnicModal,
+  component: UnnnicModal,
   argTypes: {
     modalIcon: {
       control: {
@@ -34,42 +34,68 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicModal, unnnicButton },
-  template:
-    '<unnnic-modal v-bind="$props">Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modalConteúdo do modal<br></unnnic-modal>',
-});
-
-const ModalTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicModal, unnnicButton },
-  template:
-    '<unnnicModal v-bind="$props"> <template #message><span>Modal with Buttons</span></template><template #options><unnnic-button> Button 1 </unnnic-button> <unnnic-button > Button 2 </unnnic-button></template></unnnic-modal>',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  text: 'Title text',
-  description: 'Message body',
-  alertMessage: 'Message alert',
-  closeIcon: true,
-  showModal: true,
+export const Normal = {
+  render: (args) => ({
+    components: { UnnnicModal, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <unnnic-modal v-bind="args">
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+        Conteúdo do modal<br>
+      </unnnic-modal>
+    `,
+  }),
+  args: {
+    text: 'Title text',
+    description: 'Message body',
+    alertMessage: 'Message alert',
+    closeIcon: true,
+    showModal: true,
+  },
 };
-
-export const Buttons = ModalTemplate.bind({});
-Buttons.args = {
-  text: 'Title text',
-  description: 'Message body',
-  alertMessage: 'Message alert',
-  closeIcon: true,
-  showModal: true,
+export const Buttons = {
+  render: (args) => ({
+    components: { UnnnicModal, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <unnnic-modal v-bind="args">
+        <template #message>
+          <span>Modal with Buttons</span>
+        </template>
+        <template #options>
+          <unnnic-button> Button 1 </unnnic-button> 
+          <unnnic-button > Button 2 </unnnic-button>
+        </template>
+      </unnnic-modal>
+    `,
+  }),
+  args: {
+    text: 'Title text',
+    description: 'Message body',
+    alertMessage: 'Message alert',
+    closeIcon: true,
+    showModal: true,
+  },
 };
 
-const CallTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicCallModal },
-  template: '<unnnic-call-modal />',
-});
-
-export const Call = CallTemplate.bind({});
+export const Call = {
+  render: (args) => ({
+    components: { UnnnicCallModal },
+    setup() {
+      return { args };
+    },
+    template: `
+      <unnnic-call-modal />
+    `,
+  }),
+  args: {},
+};

package/src/stories/MoodRating.stories.js

@@ -1,38 +1,33 @@
-import unnnicMoodRating from '../components/MoodRating/MoodRating.vue';
+import UnnnicMoodRating from '../components/MoodRating/MoodRating.vue';
 
 export default {
   title: 'Rating/MoodRating',
-  component: unnnicMoodRating,
-  argTypes: {
-    'on-update:model-value': { action: '@update:model-value' },
+  component: UnnnicMoodRating,
+  argTypes: {},
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicMoodRating,
+    },
+
+    data() {
+      return {
+        mood: null,
+      };
+    },
+
+    template: `
+      <div>
+        <pre>v-model: {{ mood }}</pre>
+        <unnnic-mood-rating v-bind="args" v-model="mood" />
+      </div>
+    `,
+  }),
+  args: {
+    title: 'Avalie seu aprendizado nesta aula',
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicMoodRating,
-  },
-
-  data() {
-    return {
-      mood: null,
-    };
-  },
-
-  template: `
-    <div>
-      <pre>v-model: {{ mood }}</pre>
-      <unnnic-mood-rating v-bind="$props" v-model="mood" />
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Avalie seu aprendizado nesta aula',
-};
+export const Default = {};

package/src/stories/MultiSelect.stories.js

@@ -1,56 +1,62 @@
-import unnnicMultiSelect from '../components/MultiSelect/MultiSelect.vue';
+import UnnnicMultiSelect from '../components/MultiSelect/MultiSelect.vue';
 
 export default {
   title: 'Form/MultiSelect',
-  component: unnnicMultiSelect,
+  component: UnnnicMultiSelect,
   argTypes: {},
+  render: (args) => ({
+    components: {
+      UnnnicMultiSelect,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        groups: [
+          {
+            title: 'Permissões Gerais',
+            selected: 0,
+            items: [
+              {
+                title: 'Moderador',
+                description:
+                  'Gerencia membros do projeto e administra o rocket',
+              },
+              {
+                title: 'Contribuidor',
+                description: 'Consegue editar o projeto',
+              },
+              {
+                title: 'Vizualizador',
+                description: 'Apenas vizualiza o projeto',
+              },
+            ],
+          },
+          {
+            title: 'Permissões do módulo chat',
+            selected: 0,
+            items: [
+              {
+                title: 'Gerente de Atendimento',
+                description:
+                  'Consegue responder mensagens e criar grupos no Rocket',
+              },
+              {
+                title: 'Agente',
+                description: 'Consegue responder mensagens no Rocket',
+              },
+            ],
+          },
+        ],
+      };
+    },
+    template: `
+      <div>
+        <UnnnicMultiSelect v-bind="args" v-model="groups" />
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicMultiSelect },
-  data() {
-    return {
-      groups: [
-        {
-          title: 'Permissões Gerais',
-          selected: 0,
-          items: [
-            {
-              title: 'Moderador',
-              description: 'Gerencia membros do projeto e administra o rocket',
-            },
-            { title: 'Contribuidor', description: 'Consegue editar o projeto' },
-            {
-              title: 'Vizualizador',
-              description: 'Apenas vizualiza o projeto',
-            },
-          ],
-        },
-        {
-          title: 'Permissões do módulo chat',
-          selected: 0,
-          items: [
-            {
-              title: 'Gerente de Atendimento',
-              description:
-                'Consegue responder mensagens e criar grupos no Rocket',
-            },
-            {
-              title: 'Agente',
-              description: 'Consegue responder mensagens no Rocket',
-            },
-          ],
-        },
-      ],
-    };
-  },
-
-  // eslint-disable-next-line no-multi-str
-  template:
-    '<div><unnnicMultiSelect v-bind="$props" v-model="groups"></unnnicMultiSelect></div>',
-});
-
-export const Medium = Template.bind({});
-
-Medium.args = {};
+export const Medium = { args: {} };

package/src/stories/Pagination.stories.js

@@ -1,9 +1,8 @@
-import unnnicPagination from '../components/Pagination/Pagination.vue';
-import { ref } from 'vue';
+import UnnnicPagination from '../components/Pagination/Pagination.vue';
 
 export default {
   title: 'example/Pagination',
-  component: unnnicPagination,
+  component: UnnnicPagination,
   argTypes: {
     max: {
       control: {
@@ -17,29 +16,22 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicPagination,
-  },
-
-  setup() {
-    let page = ref(1);
-    const onChange = (value) => {
-      page.value = value;
-    };
-
-    return { page, onChange };
-  },
-
-  template: `
-    <div>
-      <unnnic-pagination v-bind="$props" :value="page" @input="onChange"/>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {};
+export const Default = {
+  render: (args) => ({
+    components: { UnnnicPagination },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        page: 1,
+      };
+    },
+    template: `
+      <div>
+        <unnnic-pagination v-bind="args" v-model="page" :max="10" :show="5"/>
+      </div>
+    `,
+  }),
+  args: {},
+};

package/src/stories/ProgressBar.stories.js

@@ -1,8 +1,9 @@
-import unnnicProgressBar from '../components/ProgressBar/ProgressBar.vue';
+import { action } from '@storybook/addon-actions';
+import UnnnicProgressBar from '../components/ProgressBar/ProgressBar.vue';
 
 export default {
   title: 'Progress/ProgressBar',
-  component: unnnicProgressBar,
+  component: UnnnicProgressBar,
   argTypes: {
     type: {
       control: {
@@ -11,63 +12,27 @@ export default {
       options: ['primary', 'secondary'],
     },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicProgressBar,
-  },
-
-  data() {
-    return {
-      percentage: 25,
-    };
+  args: {
+    modelValue: 25,
+    title: 'Title name',
+    onClose: action('close'),
   },
-
-  template: `
-    <div>
-      <pre>v-model: {{ percentage }}</pre>
-      <unnnic-progress-bar v-model="percentage" v-bind="$props">
-      </unnnic-progress-bar>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  title: 'Title name',
 };
+export const Primary = {};
 
-export const Secondary = Template.bind({});
+export const Secondary = { args: { type: 'secondary' } };
 
-Secondary.args = {
-  title: 'Title name',
-  type: 'secondary',
-};
-
-export const Inline = Template.bind({});
-
-Inline.args = {
-  title: 'Title name',
-  inline: true,
-};
-
-export const Subtitle = Template.bind({});
-
-Subtitle.args = {
-  title: 'test',
-  subtitle: 'Subtitle or description',
+export const Inline = {
+  args: {
+    inline: true,
+  },
 };
 
-export const SubtitleCanClose = Template.bind({});
+export const Subtitle = { args: { subtitle: 'Subtitle or description' } };
 
-SubtitleCanClose.args = {
-  title: 'test',
-  subtitle: 'Subtitle or description',
-  canClose: true,
+export const SubtitleCanClose = {
+  args: {
+    subtitle: 'Subtitle or description',
+    canClose: true,
+  },
 };

package/src/stories/Radio.stories.js

@@ -1,48 +1,49 @@
-import unnnicRadio from '../components/Radio/Radio.vue';
+import UnnnicRadio from '../components/Radio/Radio.vue';
 
 export default {
   title: 'Form/Radio',
-  component: unnnicRadio,
+  component: UnnnicRadio,
   argTypes: {
-    'on-update:model-value': { action: '@update:model-value' },
     value: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes).concat(['input']),
-  components: {
-    unnnicRadio,
-  },
-  data() {
-    return {
-      insideValue: 'option 1',
-    };
-  },
-  template: `
-    <div>
-      v-model: {{ insideValue }}
-      <br>
+  render: (args) => ({
+    components: {
+      UnnnicRadio,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        insideValue: 'option 1',
+      };
+    },
+    template: `
+      <div>
+        v-model: {{ insideValue }}
+        <br>
 
-      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 1">
-        Option 1
-      </unnnic-radio>
+        <unnnic-radio v-bind="args" v-model="insideValue" value="option 1">
+          Option 1
+        </unnnic-radio>
 
-      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 2">
-        Option 2
-      </unnnic-radio>
+        <unnnic-radio v-bind="args" v-model="insideValue" value="option 2">
+          Option 2
+        </unnnic-radio>
 
-      <unnnic-radio v-bind="$props" v-model="insideValue" value="option 3">
-        Option 3
-      </unnnic-radio>
-    </div>
-  `,
-});
+        <unnnic-radio v-bind="args" v-model="insideValue" value="option 3">
+          Option 3
+        </unnnic-radio>
+      </div>
+    `,
+  }),
+};
 
-export const Default = Template.bind({});
-Default.args = {
-  disabled: false,
-  size: 'md',
+export const Default = {
+  args: {
+    disabled: false,
+    size: 'md',
+  },
 };

package/src/stories/Sidebar.stories.js

@@ -1,38 +1,40 @@
 /* eslint-disable no-multi-str */
 
-import unnnicSidebar from '../components/Sidebar/Sidebar.vue';
-import unnnicSidebarItem from '../components/Sidebar/SidebarItem.vue';
-import unnnicSidebarMenu from '../components/Sidebar/SidebarMenu.vue';
+import UnnnicSidebar from '../components/Sidebar/Sidebar.vue';
+import UnnnicSidebarItem from '../components/Sidebar/SidebarItem.vue';
+import UnnnicSidebarMenu from '../components/Sidebar/SidebarMenu.vue';
 
 export default {
   title: 'Example/Sidebar',
-  component: unnnicSidebar,
+  component: UnnnicSidebar,
   argTypes: {
     expanded: { control: { type: 'boolean' } },
   },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicSidebar, UnnnicSidebarItem, UnnnicSidebarMenu },
+    template: `
+      <unnnic-sidebar v-bind="args">
+        <template #header>
+          <p> Title </p>
+        </template>
+        <template #footer>
+          <unnnic-sidebar-item icon="expand-8-1" text="footer" />
+        </template>
+        <unnnic-sidebar-menu text="Submenu">
+          <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item1" icon="developer-community-github-1-1" :active="true" /> \
+          <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item2" icon="alarm-bell-2" />
+        </unnnic-sidebar-menu>
+        <unnnic-sidebar-menu text="Submenu 2">
+          <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item3" icon="alarm-bell-2" />
+        </unnnic-sidebar-menu>
+      </unnnic-sidebar>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicSidebar, unnnicSidebarItem, unnnicSidebarMenu },
-  template:
-    '<unnnic-sidebar v-bind="$props"> \
-                <p slot="header"> Title </p> \
-                <unnnic-sidebar-item icon="expand-8-1" text="footer" slot="footer" /> \
-                <unnnic-sidebar-menu text="Submenu"> \
-                  <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item1" icon="developer-community-github-1-1" :active="true" /> \
-                  <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item2" icon="alarm-bell-2" /> \
-                </unnnic-sidebar-menu> \
-                <unnnic-sidebar-menu text="Submenu 2"> \
-                  <unnnic-sidebar-item :enable-tooltip="!expanded" text="Item3" icon="alarm-bell-2" /> \
-                </unnnic-sidebar-menu> \
-              </unnnic-sidebar>',
-});
+export const Expanded = { args: {} };
 
-export const Expanded = Template.bind({});
-Expanded.args = {};
-
-export const Contracted = Template.bind({});
-Contracted.args = {
-  expanded: false,
-};
+export const Contracted = { args: { expanded: false } };