@weni/unnnic-system 3.12.3-alpha-teleports.1 → 3.12.3-alpha.1

package/src/locales/en.json

@@ -41,5 +41,6 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  }
+  },
+  "search": "Search"
 }

package/src/locales/es.json

@@ -41,5 +41,6 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }

package/src/locales/pt_br.json

@@ -41,5 +41,6 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }

package/src/stories/MultiSelect.stories.js

@@ -1,62 +1,158 @@
-import UnnnicMultiSelect from '../components/MultiSelect/MultiSelect.vue';
+import UnnnicMultiSelect from '../components/MultiSelect/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
 
 export default {
   title: 'Form/MultiSelect',
   component: UnnnicMultiSelect,
-  argTypes: {},
-  render: (args) => ({
-    components: {
-      UnnnicMultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'MultiSelect is designed to solve common problems related to multiple option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match a list of the return type of the key specified by `itemValue`, or the entire options object when the `returnObject` property is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
     },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicMultiSelect },
     setup() {
-      return { args };
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
     },
     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',
-              },
-            ],
-          },
-        ],
+        exampleValue: [],
       };
     },
     template: `
-      <div>
-        <UnnnicMultiSelect v-bind="args" v-model="groups" />
-      </div>
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
     `,
   }),
 };
 
-export const Medium = { args: {} };
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

package/src/stories/Select.stories.js

@@ -0,0 +1,158 @@
+import UnnnicSelect from '../components/Select/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/Select',
+  component: UnnnicSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select is designed to solve common problems related to option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match the return type of the key specified by `itemValue`, or the entire options object when `returnObject` prop is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: null,
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
 
 export default {
-  title: "example/TemplatePreview",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreview',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (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.";
+  '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!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };

package/src/stories/TemplatePreviewModal.stories.js

@@ -1,15 +1,15 @@
-import UnnnicTemplatePreviewModal from "../components/TemplatePreview/TemplatePreviewModal.vue";
+import UnnnicTemplatePreviewModal from '../components/TemplatePreview/TemplatePreviewModal.vue';
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 export default {
-  title: "example/TemplatePreviewModal",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreviewModal',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreviewModal,
   argTypes: {
     locale: {
-      control: { type: "select" },
-      options: ["pt-br", "en", "es"],
+      control: { type: 'select' },
+      options: ['pt-br', 'en', 'es'],
     },
   },
 };
@@ -18,7 +18,7 @@ const Template = (args) => ({
   components: { UnnnicTemplatePreviewModal },
   setup() {
     const close = () => {
-      action("close")();
+      action('close')();
       args.modelValue = false;
     };
     return { args, close };
@@ -32,29 +32,29 @@ const Template = (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.";
+  '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!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -65,10 +65,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -77,21 +77,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -101,10 +101,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };