@weni/unnnic-system 3.0.4 → 3.0.5-alpha.0

package/src/stories/DataTable.stories.js

@@ -0,0 +1,332 @@
+import UnnnicDataTable from '../components/DataTable/index.vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Data Display/DataTable',
+  component: UnnnicDataTable,
+  tags: ['autodocs'],
+  args: {
+    page: 1,
+  },
+  argTypes: {
+    headers: {
+      description:
+        'Array of header items defining the structure of the table header.',
+      control: 'object',
+    },
+    items: {
+      description: 'Array of row items defining the content of the table rows.',
+      control: 'object',
+    },
+    size: {
+      description:
+        'The size of the table. Options are `sm` for small and `md` for medium.',
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    },
+    page: {
+      description: 'The current page number for pagination.',
+      control: 'number',
+    },
+    pageTotal: {
+      description: 'The total number of pages available for pagination.',
+      control: 'number',
+    },
+    pageInterval: {
+      description: 'The number of items displayed per page.',
+      control: 'number',
+    },
+    isLoading: {
+      description: 'Indicates whether the table data is loading.',
+      control: 'boolean',
+    },
+    hideHeaders: {
+      description: 'Determines if the table headers should be hidden.',
+      control: 'boolean',
+    },
+    height: {
+      description: 'The height of the table.',
+      control: 'text',
+    },
+    maxHeight: {
+      description: 'The maximum height of the table.',
+      control: 'text',
+    },
+    clickable: {
+      description: 'Indicates whether the table rows should be clickable.',
+      control: 'boolean',
+    },
+    fixedHeaders: {
+      description:
+        'Indicates whether the table headers should be fixed in scroll.',
+      control: 'boolean',
+    },
+    hidePagination: {
+      description: 'Indicates whether the pagination should be hidden.',
+      control: 'boolean',
+    },
+    locale: {
+      description: 'The locale for the table translations.',
+      control: { type: 'select' },
+      options: ['en', 'pt-br', 'es'],
+    },
+  },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+const headers = [
+  {
+    title: 'ID',
+    itemKey: 'id',
+    isSortable: true,
+  },
+  {
+    title: 'Name',
+    itemKey: 'name',
+  },
+  {
+    title: 'Age',
+    itemKey: 'age',
+  },
+  {
+    title: 'Country',
+    itemKey: 'country',
+  },
+];
+
+const items = [
+  {
+    id: '1',
+    name: 'Eduardo',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '2',
+    name: 'Marcus',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '3',
+    name: 'Paulo',
+    age: 29,
+    country: 'Brazil',
+  },
+  {
+    id: '4',
+    name: 'Cristian',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '5',
+    name: 'Aldemylla',
+    age: 27,
+    country: 'Brazil',
+  },
+];
+
+export const Default = {
+  args: {
+    headers,
+    items,
+  },
+};
+
+export const Clickable = {
+  args: {
+    headers,
+    items,
+    clickable: true,
+  },
+};
+
+export const WithHeightLimit = {
+  args: {
+    headers,
+    items,
+    height: '165px',
+  },
+};
+
+export const FixedHeaders = {
+  args: {
+    headers,
+    items,
+    fixedHeaders: true,
+    height: '165px',
+  },
+};
+
+export const Medium = {
+  args: {
+    headers,
+    items,
+    size: 'md',
+  },
+};
+
+export const Small = {
+  args: {
+    headers,
+    items,
+    size: 'sm',
+  },
+};
+
+export const HideHeaders = {
+  args: {
+    headers,
+    items,
+    hideHeaders: true,
+  },
+};
+
+export const SlotHeader = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #header-name="{ header }">
+        <button>
+          {{ header.title }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const SlotItem = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #body-id="{ item }">
+        <button>
+          {{ item.id }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const HidePagination = {
+  args: {
+    headers,
+    items,
+    hidePagination: true,
+  },
+};
+
+export const WithoutResults = {
+  args: {
+    headers,
+    items: [],
+  },
+};
+
+export const Loading = {
+  args: {
+    headers,
+    items,
+    isLoading: true,
+  },
+};

package/src/stories/SelectSmart.stories.js

@@ -284,7 +284,7 @@ export const Multiple = {
       { value: 'spain', label: 'Espanha' },
       { value: 'saudi_arabia', label: 'Arábia Saudita' },
     ],
-    multiple: true,
+    multiple:true,
     multipleWithoutSelectsMessage: 'No country selected yet :(',
   },
 };

package/src/stories/TemplatePreview.stories.js

@@ -0,0 +1,94 @@
+import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+
+export default {
+  title: "example/TemplatePreview",
+  tags: ["autodocs"],
+  component: UnnnicTemplatePreview,
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreview },
+  setup() {
+    return { args };
+  },
+  template: `
+      <unnnic-template-preview v-bind="args" />
+    `,
+});
+
+const bodyText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+
+export const Default = Template.bind({});
+Default.args = {
+  template: {
+    header: {
+      type: "TEXT",
+      text: "Hello, world!",
+    },
+    footer: "Weni by VTEX",
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "IMAGE",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "VIDEO",
+    },
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};

package/src/stories/TemplatePreviewModal.stories.js

@@ -0,0 +1,110 @@
+import UnnnicTemplatePreviewModal from "../components/TemplatePreview/TemplatePreviewModal.vue";
+
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "example/TemplatePreviewModal",
+  tags: ["autodocs"],
+  component: UnnnicTemplatePreviewModal,
+  argTypes: {
+    locale: {
+      control: { type: "select" },
+      options: ["pt-br", "en", "es"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreviewModal },
+  setup() {
+    const close = () => {
+      action("close")();
+      args.modelValue = false;
+    };
+    return { args, close };
+  },
+  template: `
+    <div>
+      <button @click="args.modelValue = true">Open Modal</button>
+      <unnnic-template-preview-modal v-bind="args" @close="close" />
+    </div>
+    `,
+});
+
+const bodyText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: false,
+  template: {
+    header: {
+      type: "TEXT",
+      text: "Hello, world!",
+    },
+    footer: "Weni by VTEX",
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "IMAGE",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "VIDEO",
+    },
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};