@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/ChatText.stories.js

@@ -1,10 +1,10 @@
-import unnnicChatText from '../components/ChatText/ChatText.vue';
+import UnnnicChatText from '../components/ChatText/ChatText.vue';
 import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
 import colorsList from '../utils/colorsList';
 
 export default {
   title: 'example/ChatText',
-  component: unnnicChatText,
+  component: UnnnicChatText,
   argTypes: {
     size: { control: { type: 'select', options: ['normal', 'small'] } },
     titleColor: {
@@ -14,49 +14,43 @@ export default {
       },
     },
   },
+  render: (args) => ({
+    components: {
+      UnnnicChatText,
+      UnnnicButtonIcon,
+    },
+    setup() {
+      return { args };
+    },
+    methods: {
+      click() {
+        console.log('clicked');
+      },
+    },
+    template: `
+      <div>
+        <unnnic-chat-text v-bind="args">
+          <template #actions>
+            <unnnic-button-icon
+              @click="click"
+              type="secondary"
+              size="small"
+              icon="pencil-write-1"
+            ></unnnic-button-icon>
+          </template>
+
+          <template #description>
+            <span class="intent">Lorem</span> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </template>
+        </unnnic-chat-text>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicChatText,
-    UnnnicButtonIcon,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    title: 'Title',
+    info: 'Info',
   },
-
-  template: `
-    <div>
-      <unnnic-chat-text v-bind="$props" @action="click">
-        <template slot="actions">
-          <unnnic-button-icon
-            @click="click"
-            type="secondary"
-            size="small"
-            icon="pencil-write-1"
-          ></unnnic-button-icon>
-        </template>
-
-        <template slot="description">
-          <span class="intent">Lorem</span> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-        </template>
-      </unnnic-chat-text>
-    </div>
-  `,
-
-  methods: {
-    click() {
-      console.log('clicked');
-    },
-  },
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title',
-  info: 'Info',
 };

package/src/stories/ChatsContact.stories.js

@@ -11,27 +11,6 @@ export default {
   component: unnnicChatsContact,
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsContact },
-  template: '<unnnic-chats-contact v-bind="$props"/>',
-});
-
-const TemplateList = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsContact },
-  data() {
-    return {
-      selectedContact: 1,
-    };
-  },
-  template: `
-    <div style="display: grid; gap: 5px;">
-      <unnnic-chats-contact v-for="index in 5" v-bind="$props" @click="selectedContact = index" :selected="selectedContact === index"/>
-    </div>
-  `,
-});
-
 const defaultArgs = {
   title: 'John Doe',
   lastMessage:
@@ -40,51 +19,75 @@ const defaultArgs = {
 const unreadMessages = 5;
 const waitingTime = 10;
 
-export const Default = Template.bind({});
-Default.args = {
-  ...defaultArgs,
-  unreadMessages,
+export const Default = {
+  args: {
+    ...defaultArgs,
+    unreadMessages,
+  },
 };
 
-export const Selected = Template.bind({});
-Selected.args = {
-  ...defaultArgs,
-  selected: true,
+export const Selected = {
+  args: {
+    ...defaultArgs,
+    selected: true,
+  },
 };
 
-export const SelectedWithCheckbox = Template.bind({});
-SelectedWithCheckbox.args = {
-  ...defaultArgs,
-  selected: true,
-  checkboxWhenSelect: true,
+export const SelectedWithCheckbox = {
+  args: {
+    ...defaultArgs,
+    selected: true,
+    checkboxWhenSelect: true,
+  },
 };
 
-export const Read = Template.bind({});
-Read.args = {
-  ...defaultArgs,
+export const Read = {
+  args: {
+    ...defaultArgs,
+  },
 };
 
-export const Waiting = Template.bind({});
-Waiting.args = {
-  ...defaultArgs,
-  waitingTime,
-  unreadMessages,
+export const Waiting = {
+  args: {
+    ...defaultArgs,
+    waitingTime,
+    unreadMessages,
+  },
 };
 
-export const WaitingRead = Template.bind({});
-WaitingRead.args = {
-  ...defaultArgs,
-  waitingTime,
+export const WaitingRead = {
+  args: {
+    ...defaultArgs,
+    waitingTime,
+  },
 };
 
-export const Discussion = Template.bind({});
-Discussion.args = {
-  ...defaultArgs,
-  title: 'Lorem ipsum dolor sit amet',
-  discussionGoal: 'John Doe',
+export const Discussion = {
+  args: {
+    ...defaultArgs,
+    title: 'Lorem ipsum dolor sit amet',
+    discussionGoal: 'John Doe',
+  },
 };
 
-export const ContactList = TemplateList.bind({});
-ContactList.args = {
-  ...defaultArgs,
+export const ContactList = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsContact },
+    data() {
+      return {
+        selectedContact: 1,
+      };
+    },
+    template: `
+    <div style="display: grid; gap: 5px;">
+      <unnnic-chats-contact v-for="index in 5" v-bind="args" @click="selectedContact = index" :selected="selectedContact === index"/>
+    </div>
+  `,
+  }),
 };

package/src/stories/ChatsDashboardTagLive.stories.js

@@ -14,11 +14,4 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsDashboardTagLive },
-  template: '<unnnic-chats-dashboard-tag-live v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {};
+export const Default = { args: {} };

package/src/stories/ChatsHeader.stories.js

@@ -1,93 +1,82 @@
 /* eslint-disable no-alert */
 import unnnicChatsHeader from '../components/ChatsHeader/ChatsHeader.vue';
 import unnnicChatsDashboardTagLive from '../components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Chats/Header',
   component: unnnicChatsHeader,
+  args: {
+    onCrumbClick: action('crumb-click'),
+    back: action('back'),
+    close: action('close'),
+    titleClick: action('title-click'),
+    avatarClick: action('avatar-click'),
+  },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsHeader },
-  template: '<unnnic-chats-header v-bind="$props" @crumbClick="crumbClick"/>',
-});
-
-const DashboardTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsHeader, unnnicChatsDashboardTagLive },
-  template: `<unnnic-chats-header v-bind="$props" @crumbClick="crumbClick">
-      <unnnic-chats-dashboard-tag-live />
-    </unnnic-chats-header>`,
-});
-
-const back = () => alert('back');
-const close = () => alert('close');
-const titleClick = () => alert('titleClick');
-const avatarClick = () => alert('avatarClick');
-const crumbClick = (event) => alert(JSON.stringify(event));
-
 const size = window.innerWidth < 600 ? 'small' : 'large';
 
-const defaultArgs = {
-  back,
-  close,
-  titleClick,
-  avatarClick,
-  crumbClick,
-};
-
-export const Contact = Template.bind({});
-Contact.args = {
-  ...defaultArgs,
-  title: 'John Doe',
-  titleClick,
-  avatarName: 'John Doe',
-  avatarClick,
+export const Contact = {
+  args: {
+    title: 'John Doe',
+    avatarName: 'John Doe',
+  },
 };
 
-export const ContactInfos = Template.bind({});
-ContactInfos.args = {
-  ...defaultArgs,
-  title: 'Contact information',
-  subtitle: 'John Doe',
-  avatarName: 'John Doe',
+export const ContactInfos = {
+  args: {
+    title: 'Contact information',
+    subtitle: 'John Doe',
+    avatarName: 'John Doe',
+  },
 };
 
-export const Dashboard = DashboardTemplate.bind({});
-Dashboard.args = {
-  ...defaultArgs,
-  title: size === 'large' ? 'Lorem Ipsum Inc.' : 'Dashboard',
-  subtitle: size === 'large' ? 'Dashboard of project' : 'Lorem Ipsum Inc.',
-  avatarIcon: 'graph-stats-1',
-  crumbClick,
-  crumbs: [
-    {
-      name: 'Chats',
-      path: 'chats',
-    },
-    {
-      name: 'Dashboard',
-      path: 'dashboard',
+export const Dashboard = {
+  args: {
+    title: size === 'large' ? 'Lorem Ipsum Inc.' : 'Dashboard',
+    subtitle: size === 'large' ? 'Dashboard of project' : 'Lorem Ipsum Inc.',
+    avatarIcon: 'graph-stats-1',
+    crumbs: [
+      {
+        name: 'Chats',
+        path: 'chats',
+      },
+      {
+        name: 'Dashboard',
+        path: 'dashboard',
+      },
+    ],
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
     },
-  ],
+    components: { unnnicChatsHeader, unnnicChatsDashboardTagLive },
+    template: `
+      <unnnic-chats-header 
+        v-bind="args" 
+        @crumbClick="crumbClick"
+      >
+        <unnnic-chats-dashboard-tag-live />
+      </unnnic-chats-header>`,
+  }),
 };
 
-export const History = Template.bind({});
-History.args = {
-  ...defaultArgs,
-  title: size === 'large' ? 'Lorem Ipsum Inc.' : 'History',
-  subtitle: size === 'large' ? 'History of project' : 'Lorem Ipsum Inc.',
-  avatarIcon: 'task-list-clock-1',
-  crumbClick,
-  crumbs: [
-    {
-      name: 'Chats',
-      path: 'chats',
-    },
-    {
-      name: 'History',
-      path: 'history',
-    },
-  ],
+export const History = {
+  args: {
+    title: size === 'large' ? 'Lorem Ipsum Inc.' : 'History',
+    subtitle: size === 'large' ? 'History of project' : 'Lorem Ipsum Inc.',
+    avatarIcon: 'task-list-clock-1',
+    crumbs: [
+      {
+        name: 'Chats',
+        path: 'chats',
+      },
+      {
+        name: 'History',
+        path: 'history',
+      },
+    ],
+  },
 };