@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/ChatsMessage.stories.js

@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import unnnicChatsMessage from '../components/ChatsMessage/ChatsMessage.vue';
 import unnnicAudioRecorder from '../components/AudioRecorder/AudioRecorder.vue';
 import AudioSample from './assets/audios/audio-recorder-sample.mp3';
@@ -9,238 +10,229 @@ 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">
+  args: {
+    time: new Date('2023-08-08T11:09:07.876230-03:00'),
+    type: 'sent',
+    onClick: action('click'),
+    onClickImage: action('click-image'),
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsMessage },
+    template: `
+      <unnnic-chats-message v-bind="args">
         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>
-  `,
-});
+export const Default = { args: {} };
 
-const MediaTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicChatsMessage, unnnicAudioRecorder },
-  data() {
-    return {
-      audio: AudioSample,
-      image1: ImageSample1,
-      image2: ImageSample2,
-      image3: ImageSample3,
-      video: VideoSample,
-    };
+export const Sending = {
+  args: {
+    status: 'sending',
   },
-  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 ReceivedAndSent = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsMessage },
+    template: `
+      <div style="
+        display: flex;
+      ">
+        <unnnic-chats-message v-bind="args" type="received">
+          Interdum et malesuada fames ac ante ipsum primis in faucibus.
+          Curabitur facilisis congue sagittis.
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args">
+          Interdum et malesuada fames ac ante ipsum primis in faucibus.
+          Curabitur facilisis congue sagittis.
+        </unnnic-chats-message>
+      </div>
+    `,
+  }),
 };
 
-export const WithSignature = Template.bind({});
-WithSignature.args = {
-  ...defaultArgs,
-  type: 'sent',
-  signature: 'John Doe',
+export const WithSignature = {
+  args: {
+    signature: 'John Doe',
+  },
 };
 
-export const WithLink = TemplateWithLink.bind({});
-WithLink.args = {
-  ...defaultArgs,
-  type: 'sent',
+export const WithLink = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsMessage },
+    template: `
+      <unnnic-chats-message v-bind="args">
+        A message with link: http://localhost:8080
+      </unnnic-chats-message>
+    `,
+  }),
 };
 
-export const MultipleMessages = MultipleMessagesTemplate.bind({});
-MultipleMessages.args = {
-  ...defaultArgs,
-  type: 'sent',
+export const MultipleMessages = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsMessage },
+    template: `
+      <div style="
+        display: grid;
+        gap: 16px;
+      ">
+        <unnnic-chats-message v-bind="args">
+          Ita.
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args">
+          Pashca ovum 😯😉
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args">
+          Fusce scelerisque odio sit amet eleifend.
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args">
+          In mattis tristique massa, ornare urna porttitor faucibus. Pellentesque habitant morbi.
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args">
+          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="args">
+          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="args">
+          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>
+    `,
+  }),
 };
 
-export const Media = MediaTemplate.bind({});
-Media.args = {
-  ...defaultArgs,
-  type: 'sent',
+export const Media = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    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="args" 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="args" 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="args" 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="args" mediaType="video">
+          <video class="media" controls>
+            <source :src="video" />
+          </video>
+          </unnnic-chats-message>
+          <unnnic-chats-message v-bind="args" status="sending" mediaType="video">
+            <video class="media" controls>
+              <source :src="video" />
+            </video>
+          </unnnic-chats-message>
+          <unnnic-chats-message v-bind="args" 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="args" mediaType="image">
+            <img class="media" :src="image1" />
+          </unnnic-chats-message>
+          <unnnic-chats-message v-bind="args" status="sending" mediaType="image">
+            <img class="media" :src="image1" />
+          </unnnic-chats-message>
+          <unnnic-chats-message v-bind="args" status="failed" mediaType="image">
+            <img class="media" :src="image1" />
+          </unnnic-chats-message>
+        </div>
+
+        <unnnic-chats-message v-bind="args" mediaType="image">
+          <img class="media" :src="image2" />
+        </unnnic-chats-message>
+        <unnnic-chats-message v-bind="args" mediaType="image">
+          <img class="media" :src="image3" />
+        </unnnic-chats-message>
+      </div>
+    `,
+  }),
 };
 
-export const Document = DocumentTemplate.bind({});
-Document.args = {
-  ...defaultArgs,
-  type: 'sent',
+export const Document = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsMessage },
+    template: `
+      <div  style="
+        display: grid;
+        gap: 16px;
+      ">
+        <unnnic-chats-message v-bind="args" documentName="Lorem.pdf" type="received" />
+        <unnnic-chats-message v-bind="args" documentName="Lorem.pdf" />
+        <unnnic-chats-message v-bind="args" documentName="Lorem Ipsum.pdf" status="sending" />
+        <unnnic-chats-message v-bind="args" documentName="Lorem Ipsum.pdf" status="failed" />
+        <unnnic-chats-message v-bind="args" documentName="Lorem ipsum dolor sit amet consectetur adipiscing elit.docx" />
+        <unnnic-chats-message v-bind="args" 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>
+    `,
+  }),
 };

package/src/stories/CircleProgressBar.stories.js

@@ -6,25 +6,9 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCircleProgressBar,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    progress: 4,
+    totalProgress: 8,
   },
-
-  template: `<unnnic-circle-progress-bar v-bind="$props" />`,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  progress: 4,
-  totalProgress: 8,
 };

package/src/stories/Collapse.stories.js

@@ -1,8 +1,8 @@
-import unnnicCollapse from '../components/Collapse/Collapse.vue';
+import UnnnicCollapse from '../components/Collapse/Collapse.vue';
 
 export default {
   title: 'accordion/Collapse',
-  component: unnnicCollapse,
+  component: UnnnicCollapse,
   argTypes: {
     'on-update:model-value': { action: '@update:model-value' },
     size: {
@@ -14,28 +14,25 @@ export default {
     borderBottom: { control: { type: 'boolean' } },
     unspacedIcon: { control: { type: 'boolean' } },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCollapse,
-  },
-
-  data() {
-    return {
-      active: true,
-    };
-  },
-
-  template: `
-    <div>
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicCollapse,
+    },
+    data() {
+      return {
+        active: true,
+      };
+    },
+    template: `
+      <div>
       <button @click="active = !active">External change active</button>
 
       <pre>v-model: {{ active }}</pre>
 
-      <unnnic-collapse v-bind="$props" v-model="active">
+      <unnnic-collapse v-bind="args" v-model="active">
         Default slot
         <br />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -43,55 +40,52 @@ const Template = (args, { argTypes }) => ({
         laboris nisi ut aliquip ex ea commodo consequat.
       </unnnic-collapse>
 
-<pre>
+      <pre>
 
-<b>Basic usage:</b>
+      <b>Basic usage:</b>
 
-&lt;unnnic-collapse title="Title"&gt;
-  Collapse body
-&lt;/unnnic-collapse&gt;
+      &lt;unnnic-collapse title="Title"&gt;
+        Collapse body
+      &lt;/unnnic-collapse&gt;
 
 
-<b>With header slot:</b>
+      <b  >With header slot:</b>
 
-&lt;unnnic-collapse&gt;
-  &lt;template slot="header"&gt;Title&lt;/template&gt;
+      &lt;unnnic-collapse&gt;
+        &lt;template slot="header"&gt;Title&lt;/template&gt;
 
-  Collapse body
-&lt;/unnnic-collapse&gt;
+        Collapse body
+      &lt;/unnnic-collapse&gt;
 
 
-<b>With v-model:</b>
+      <b>With v-model:</b>
 
-&lt;unnnic-collapse title="Title" v-model="active"&gt;
-  Collapse body
-&lt;/unnnic-collapse&gt;
+      &lt;unnnic-collapse title="Title" v-model="active"&gt;
+        Collapse body
+      &lt;/unnnic-collapse&gt;
 
 
-<b>Complete usage:</b>
+      <b>Complete usage:</b>
 
-&lt;unnnic-collapse
-  title           String
-  border-bottom   Boolean
-  unspaced-icon   Boolean
-  active          Boolean
-  @change         Boolean Event
-&gt;
-  &lt;template slot="header"&gt;Title&lt;/template&gt;
+      &lt;unnnic-collapse
+        title           String
+        border-bottom   Boolean
+        unspaced-icon   Boolean
+        active          Boolean
+        @change         Boolean Event
+      &gt;
+        &lt;template slot="header"&gt;Title&lt;/template&gt;
 
-  Collapse body
-&lt;/unnnic-collapse&gt;
-</pre>
+        Collapse body
+      &lt;/unnnic-collapse&gt;
+      </pre>  
     </div>
-  `,
+    `,
+  }),
+};
 
-  methods: {
-    click() {},
+export const Default = {
+  args: {
+    title: 'Title prop or header slot',
   },
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title prop or header slot',
 };