@weni/unnnic-system 2.0.0 → 2.0.1

package/src/stories/ChartMultiLine.stories.js

@@ -0,0 +1,59 @@
+import unnnicChartMultiLine from '../components/ChartMultiLine/ChartMultiLine.vue';
+
+export default {
+  title: 'charts/ChartMultiLine',
+  component: unnnicChartMultiLine,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    unnnicChartMultiLine,
+  },
+
+  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

@@ -3,32 +3,15 @@ import unnnicChartRainbow from '../components/ChartRainbow/ChartRainbow.vue';
 export default {
   title: 'charts/ChartRainbow',
   component: unnnicChartRainbow,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicChartRainbow,
+  argTypes: {
+    value: { control: { type: 'number', min: 0, max: 100, step: 0.1 } },
+    description: { control: 'text' },
   },
+};
 
-  data() {
-    return {};
+export const Default = {
+  args: {
+    value: 50,
+    description: 'Description',
   },
-
-  template: `
-    <div>
-      <unnnic-chart-rainbow v-bind="$props" />
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  value: 50,
-  description: 'Description',
 };

package/src/stories/ChatsContact.stories.js

@@ -0,0 +1,90 @@
+import unnnicChatsContact from '../components/ChatsContact/ChatsContact.vue';
+import { setup } from '@storybook/vue3';
+import i18n from '@/utils/plugins/i18n';
+
+setup((app) => {
+  app.use(i18n);
+});
+
+export default {
+  title: 'Chats/Contact',
+  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:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel.',
+};
+const unreadMessages = 5;
+const waitingTime = 10;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultArgs,
+  unreadMessages,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ...defaultArgs,
+  selected: true,
+};
+
+export const SelectedWithCheckbox = Template.bind({});
+SelectedWithCheckbox.args = {
+  ...defaultArgs,
+  selected: true,
+  checkboxWhenSelect: true,
+};
+
+export const Read = Template.bind({});
+Read.args = {
+  ...defaultArgs,
+};
+
+export const Waiting = Template.bind({});
+Waiting.args = {
+  ...defaultArgs,
+  waitingTime,
+  unreadMessages,
+};
+
+export const WaitingRead = Template.bind({});
+WaitingRead.args = {
+  ...defaultArgs,
+  waitingTime,
+};
+
+export const Discussion = Template.bind({});
+Discussion.args = {
+  ...defaultArgs,
+  title: 'Lorem ipsum dolor sit amet',
+  discussionGoal: 'John Doe',
+};
+
+export const ContactList = TemplateList.bind({});
+ContactList.args = {
+  ...defaultArgs,
+};

package/src/stories/ChatsDashboardTagLive.stories.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-alert */
+import unnnicChatsDashboardTagLive from '../components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+
+export default {
+  title: 'Chats/DashboardTagLive',
+  component: unnnicChatsDashboardTagLive,
+  argTypes: {
+    locale: {
+      control: {
+        type: 'select',
+        options: ['pt-br', 'en', 'es'],
+      },
+    },
+  },
+};
+
+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 = {};

package/src/stories/ChatsHeader.stories.js

@@ -0,0 +1,93 @@
+/* eslint-disable no-alert */
+import unnnicChatsHeader from '../components/ChatsHeader/ChatsHeader.vue';
+import unnnicChatsDashboardTagLive from '../components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+
+export default {
+  title: 'Chats/Header',
+  component: unnnicChatsHeader,
+};
+
+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 ContactInfos = Template.bind({});
+ContactInfos.args = {
+  ...defaultArgs,
+  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 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',
+    },
+  ],
+};

package/src/stories/ChatsMessage.stories.js

@@ -0,0 +1,246 @@
+import unnnicChatsMessage from '../components/ChatsMessage/ChatsMessage.vue';
+import unnnicAudioRecorder from '../components/AudioRecorder/AudioRecorder.vue';
+import AudioSample from './assets/audios/audio-recorder-sample.mp3';
+import ImageSample1 from './assets/images/un.png';
+import ImageSample2 from './assets/images/unnnic.png';
+import ImageSample3 from './assets/images/unnnicPortrait.png';
+import VideoSample from './assets/videos/weni.mp4';
+
+export default {
+  title: 'Chats/Message',
+  component: unnnicChatsMessage,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage },
+  template: `
+    <unnnic-chats-message v-bind="$props">
+      Interdum et malesuada fames ac ante ipsum primis in faucibus.
+      Curabitur facilisis congue sagittis.
+    </unnnic-chats-message>
+  `,
+});
+
+const TemplateWithLink = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage },
+  template: `
+    <unnnic-chats-message v-bind="$props">
+      A message with link: http://localhost:8080
+    </unnnic-chats-message>
+  `,
+});
+
+const ReceivedAndSentTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage },
+  template: `
+    <div style="
+      display: flex;
+    ">
+      <unnnic-chats-message v-bind="$props">
+        Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        Curabitur facilisis congue sagittis.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" type="sent">
+        Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        Curabitur facilisis congue sagittis.
+      </unnnic-chats-message>
+    </div>
+  `,
+});
+
+const MultipleMessagesTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage },
+  template: `
+    <div style="
+      display: grid;
+      gap: 16px;
+    ">
+      <unnnic-chats-message v-bind="$props">
+        Ita.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        Pashca ovum 😯😉
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        Fusce scelerisque odio sit amet eleifend.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        In mattis tristique massa, ornare urna porttitor faucibus. Pellentesque habitant morbi.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Donec dignissim sapien ac condimentum sagittis. Cras vitae consectetur risus.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        Aenean vel pharetra ligula. Donec sit amet porttitor dui.
+        Suspendisse lacinia mauris egestas, aliquam dui non, tristique augue. Donec at pulvinar
+        leo, eget lobortis turpis. Ut hendrerit varius tortor, id mollis justo dictum eget.
+        Praesent finibus urna vel lacus pretium consequat. Proin imperdiet ante tempus feugiat
+        tristique. Duis in ultrices sem. Cras pharetra eleifend ligula vel commodo.
+        Phasellus placerat faucibus est, nec posuere est venenatis sed. Phasellus a quam felis.
+        Fusce volutpat sem eget urna sagittis laoreet non maximus quam. Mauris porta posuere commodo.
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props">
+        Aenean vel pharetra ligula.
+        Donec sit amet porttitor dui.
+
+        Suspendisse lacinia mauris egestas, aliquam dui non, tristique augue.
+        Donec at pulvinar leo, eget lobortis turpis.
+        Ut hendrerit varius tortor, id mollis justo dictum eget.
+
+        Praesent finibus urna vel lacus pretium consequat. Proin imperdiet ante tempus feugiat
+        tristique. Duis in ultrices sem. Cras pharetra eleifend ligula vel commodo.
+      </unnnic-chats-message>
+    </div>
+  `,
+});
+
+const MediaTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage, unnnicAudioRecorder },
+  data() {
+    return {
+      audio: AudioSample,
+      image1: ImageSample1,
+      image2: ImageSample2,
+      image3: ImageSample3,
+      video: VideoSample,
+    };
+  },
+  template: `
+  <div style="
+    display: grid;
+    gap: 16px;
+  ">
+    <div  style="
+      display: flex;
+      gap: 16px;
+    ">
+      <unnnic-chats-message v-bind="$props" mediaType="audio">
+        <unnnic-audio-recorder class="media" style="padding: 8px; margin: 4px 0;" ref="audio-recorder" :src="audio" :canDiscard="false" />
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" mediaType="audio" status="sending">
+        <unnnic-audio-recorder class="media" reqStatus="sending" style="padding: 8px; margin: 4px 0;" ref="audio-recorder" :src="audio" :canDiscard="false" />
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" mediaType="audio" status="failed">
+        <unnnic-audio-recorder class="media" reqStatus="failed" style="padding: 8px; margin: 4px 0;" ref="audio-recorder" :src="audio" :canDiscard="false" />
+      </unnnic-chats-message>
+    </div>
+
+    <div  style="
+      display: flex;
+      gap: 16px;
+    ">
+      <unnnic-chats-message v-bind="$props" mediaType="video">
+      <video class="media" controls>
+        <source :src="video" />
+      </video>
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" status="sending" mediaType="video">
+        <video class="media" controls>
+          <source :src="video" />
+        </video>
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" status="failed" mediaType="video">
+        <video class="media" controls>
+          <source :src="video" />
+        </video>
+      </unnnic-chats-message>
+    </div>
+
+    <div  style="
+      display: flex;
+      gap: 16px;
+    ">
+      <unnnic-chats-message v-bind="$props" mediaType="image">
+        <img class="media" :src="image1" />
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" status="sending" mediaType="image">
+        <img class="media" :src="image1" />
+      </unnnic-chats-message>
+      <unnnic-chats-message v-bind="$props" status="failed" mediaType="image">
+        <img class="media" :src="image1" />
+      </unnnic-chats-message>
+    </div>
+
+    <unnnic-chats-message v-bind="$props" mediaType="image">
+      <img class="media" :src="image2" />
+    </unnnic-chats-message>
+    <unnnic-chats-message v-bind="$props" mediaType="image">
+      <img class="media" :src="image3" />
+    </unnnic-chats-message>
+  </div>
+  `,
+});
+
+const DocumentTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsMessage },
+  template: `
+    <div  style="
+      display: grid;
+      gap: 16px;
+    ">
+      <unnnic-chats-message v-bind="$props" documentName="Lorem.pdf" type="received" />
+      <unnnic-chats-message v-bind="$props" documentName="Lorem.pdf" />
+      <unnnic-chats-message v-bind="$props" documentName="Lorem Ipsum.pdf" status="sending" />
+      <unnnic-chats-message v-bind="$props" documentName="Lorem Ipsum.pdf" status="failed" />
+      <unnnic-chats-message v-bind="$props" documentName="Lorem ipsum dolor sit amet consectetur adipiscing elit.docx" />
+      <unnnic-chats-message v-bind="$props" documentName="Lorem ipsum dolor sit amet consectetur adipiscing elit fusce iaculis ligula fringilla consectetur tempor ex massa convallis risus ut sagittis est quam non est integer bibendum vehicula.csv" />
+    </div>
+  `,
+});
+
+const defaultArgs = { time: new Date('2023-08-08T11:09:07.876230-03:00') };
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultArgs,
+};
+
+export const Sending = Template.bind({});
+Sending.args = {
+  ...defaultArgs,
+  status: 'sending',
+  type: 'sent',
+};
+
+export const ReceivedAndSent = ReceivedAndSentTemplate.bind({});
+ReceivedAndSent.args = {
+  ...defaultArgs,
+};
+
+export const WithSignature = Template.bind({});
+WithSignature.args = {
+  ...defaultArgs,
+  type: 'sent',
+  signature: 'John Doe',
+};
+
+export const WithLink = TemplateWithLink.bind({});
+WithLink.args = {
+  ...defaultArgs,
+  type: 'sent',
+};
+
+export const MultipleMessages = MultipleMessagesTemplate.bind({});
+MultipleMessages.args = {
+  ...defaultArgs,
+  type: 'sent',
+};
+
+export const Media = MediaTemplate.bind({});
+Media.args = {
+  ...defaultArgs,
+  type: 'sent',
+};
+
+export const Document = DocumentTemplate.bind({});
+Document.args = {
+  ...defaultArgs,
+  type: 'sent',
+};

package/src/stories/ChatsNavbar.stories.js

@@ -0,0 +1,65 @@
+/* eslint-disable no-alert */
+import unnnicChatsNavbar from '../components/ChatsNavbar/ChatsNavbar.vue';
+
+export default {
+  title: 'Chats/Navbar',
+  component: unnnicChatsNavbar,
+  argTypes: {
+    links: [
+      {
+        icon: 'add-1',
+        action: () => {},
+      },
+    ],
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { unnnicChatsNavbar },
+    setup() {
+      return { args };
+    },
+    template:
+      '<unnnic-chats-navbar v-bind="args" v-model="args.selectedLink" />',
+  }),
+  args: {
+    selectedLink: 'home',
+    links: [
+      {
+        name: 'home',
+        icon: 'home',
+        action: () => {},
+      },
+      {
+        name: 'forum',
+        icon: 'forum',
+        action: () => {},
+      },
+      {
+        name: 'folder',
+        icon: {
+          default: 'folder',
+          selected: 'folder',
+        },
+        action: () => {},
+      },
+      {
+        name: 'speed',
+        icon: {
+          default: 'speed',
+          selected: 'speed',
+        },
+        action: () => {},
+      },
+      {
+        name: 'settings',
+        icon: {
+          default: 'settings',
+          selected: 'settings',
+        },
+        action: () => {},
+      },
+    ],
+  },
+};

package/src/stories/ChatsUserAvatar.stories.js

@@ -0,0 +1,35 @@
+import unnnicChatsUserAvatar from '../components/ChatsUserAvatar/ChatsUserAvatar.vue';
+
+export default {
+  title: 'Chats/UserAvatar',
+  component: unnnicChatsUserAvatar,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'ant', 'md', 'lg', 'xl', '2xl'],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicChatsUserAvatar },
+  template: '<unnnic-chats-user-avatar v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  username: 'John Doe',
+};
+
+export const Agent = Template.bind({});
+Agent.args = {
+  username: 'Agent',
+};
+
+export const Bot = Template.bind({});
+Bot.args = {
+  username: 'Bot',
+};