@weni/unnnic-system 3.9.1 → 3.9.3-alpha.0

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,14 +36,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ],
+      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
     },
     size: {
       control: { type: 'select' },
@@ -75,74 +68,71 @@ export default {
 
 export const Primary = {
   args: {
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Secondary = {
   args: {
     type: 'secondary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
 export const Tertiary = {
   args: {
     type: 'tertiary',
-    text: 'Button Text',
+    text: 'Text',
   },
 };
 
-export const WithIcon = {
+export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
-    text: 'Button Text',
-    iconLeft: 'add',
+    type: 'warning',
+    text: 'Text',
   },
 };
 
-export const FilledIcon = {
+export const Attention = {
   args: {
-    text: 'Button Text',
-    iconLeft: 'play_arrow',
-    iconsFilled: true,
+    type: 'attention',
+    text: 'Text',
   },
 };
 
-export const OnlyIcon = {
+export const Loading = {
   args: {
-    iconCenter: 'add',
+    loading: true,
+    text: 'Text',
   },
 };
 
-export const Alternative = {
+export const WithIcon = {
   args: {
-    type: 'alternative',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'add',
   },
 };
 
-export const Warning = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
-        For example: Deleting an element.`,
-      },
-    },
-  },
+export const FilledIcon = {
   args: {
-    type: 'warning',
-    iconLeft: 'add',
     text: 'Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true,
   },
 };
 
-export const Attention = {
+export const OnlyIcon = {
   args: {
-    type: 'attention',
-    iconLeft: 'add',
-    text: 'Text',
+    iconCenter: 'add',
   },
 };
 

package/src/stories/ChatsContact.stories.js

@@ -82,6 +82,15 @@ export const Default = {
   },
 };
 
+export const WithLastInteractionTimePrefix = {
+  args: {
+    ...defaultArgs,
+    unreadMessages,
+    lastInteractionTime: new Date().toISOString(),
+    lastInteractionTimePrefix: 'Since',
+  },
+};
+
 export const Selected = {
   args: {
     ...defaultArgs,

package/src/stories/Checkbox.stories.js

@@ -15,12 +15,12 @@ export default {
       },
     },
   },
-  args: { disabled: false, size: 'md' },
+  args: { disabled: false },
   argTypes: {
     modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
     disabled: { control: 'boolean' },
-    size: { control: 'select', options: ['md', 'sm'] },
-    textRight: { control: 'text' },
+    label: { control: 'text' },
+    helper: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -34,6 +34,7 @@ export default {
       return { args, updateModelValue };
     },
     template: `
+      <pre>v-model: {{ args.modelValue }}</pre>
       <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
     `,
   }),
@@ -42,18 +43,22 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
+    label: 'Label',
+    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
+    label: 'Label',
   },
 };
 
-export const LessSelected = {
+export const Less = {
   args: {
     modelValue: 'less',
+    label: 'Label',
   },
 };
 
@@ -61,6 +66,7 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
+    label: 'Label',
   },
 };
 
@@ -68,5 +74,6 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
+    label: 'Label',
   },
 };

package/src/stories/CheckboxGroup.stories.js

@@ -0,0 +1,105 @@
+import { action } from '@storybook/addon-actions';
+import UnnnicCheckboxGroup from '../components/CheckboxGroup/CheckboxGroup.vue';
+import UnnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Form/CheckboxGroup',
+  component: UnnnicCheckboxGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Allows the user to select multiple options from a category. It can also be 
+        used to display a single option that may require additional acceptance or confirmation 
+        before submission.`,
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    helper: { control: { type: 'text' } },
+    state: { control: 'select', options: ['horizontal', 'vertical'] },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Checkbox Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: `
+      <section>
+        <UnnnicCheckboxGroup v-bind="args">
+          <UnnnicCheckbox :modelValue="true" label="Option 1" />
+          <UnnnicCheckbox :modelValue="false" label="Option 2" />
+          <UnnnicCheckbox :modelValue="false" label="Option 3" />
+        </UnnnicCheckboxGroup>
+      </section>
+    `,
+  }),
+};
+
+export const Horizontal = {
+  args: {
+    state: 'horizontal',
+    label: 'Label',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicCheckboxGroup v-bind="args">
+        <UnnnicCheckbox :modelValue="true" label="Option 1" />
+        <UnnnicCheckbox :modelValue="false" label="Option 2" />
+        <UnnnicCheckbox :modelValue="false" label="Option 3" />
+      </UnnnicCheckboxGroup>
+    `,
+  }),
+};
+
+export const Vertical = {
+  args: {
+    state: 'vertical',
+    label: 'Label',
+    helper: 'Helper text',
+    labelTooltip: 'Tooltip text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicCheckboxGroup,
+      UnnnicCheckbox,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicCheckboxGroup v-bind="args">
+        <UnnnicCheckbox :modelValue="true" label="Option 1" />
+        <UnnnicCheckbox :modelValue="false" label="Option 2" />
+        <UnnnicCheckbox :modelValue="false" label="Option 3" />
+      </UnnnicCheckboxGroup>
+    `,
+  }),
+};

package/src/stories/DataTable.stories.js

@@ -1,6 +1,31 @@
 import UnnnicDataTable from '../components/DataTable/index.vue';
 import { action } from '@storybook/addon-actions';
 
+const SAMPLE_NAMES = [
+  'Eduardo',
+  'Marcus',
+  'Paulo',
+  'Cristian',
+  'Aldemylla',
+  'João',
+  'Maria',
+  'Ana',
+  'Pedro',
+  'Lucas',
+];
+
+const SAMPLE_COUNTRIES = ['Brazil', 'USA', 'Canada', 'Argentina', 'Chile'];
+
+const generateItems = (count, startId) => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: String(startId + i),
+    name: SAMPLE_NAMES[Math.floor(Math.random() * SAMPLE_NAMES.length)],
+    age: Math.floor(Math.random() * 30) + 20,
+    country:
+      SAMPLE_COUNTRIES[Math.floor(Math.random() * SAMPLE_COUNTRIES.length)],
+  }));
+};
+
 export default {
   title: 'Data Display/DataTable',
   component: UnnnicDataTable,
@@ -70,6 +95,26 @@ export default {
       control: { type: 'select' },
       options: ['en', 'pt-br', 'es'],
     },
+    infiniteScroll: {
+      description:
+        'Enables infinite scroll functionality. When enabled, the table will emit a loadMore event when the user scrolls near the bottom.',
+      control: 'boolean',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the table to trigger the loadMore event.',
+      control: 'number',
+    },
+    infiniteScrollDisabled: {
+      description:
+        'Disables the infinite scroll functionality. Useful when all data has been loaded.',
+      control: 'boolean',
+    },
+    isLoadingMore: {
+      description:
+        'Indicates whether more data is being loaded for infinite scroll. Shows a loading indicator at the bottom of the table.',
+      control: 'boolean',
+    },
   },
   render: (args) => ({
     components: {
@@ -390,3 +435,150 @@ export const ControlledSort = {
     `,
   }),
 };
+
+export const InfiniteScroll = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+      };
+    },
+    methods: {
+      loadMore() {
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="100"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      height="400px"
+      @loadMore="loadMore"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const InfiniteScrollWithFixedHeaders = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+        hasMore: true,
+      };
+    },
+    methods: {
+      loadMore() {
+        if (!this.hasMore) return;
+
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+
+          if (this.displayedItems.length >= 50) {
+            this.hasMore = false;
+          }
+
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="50"
+      :infiniteScrollDisabled="!hasMore"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      :fixedHeaders="true"
+      height="400px"
+      @loadMore="loadMore"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const InfiniteScrollClickable = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+      };
+    },
+    methods: {
+      loadMore() {
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+      itemClick(item) {
+        action('itemClick')(item);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="100"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      :clickable="true"
+      height="400px"
+      @loadMore="loadMore"
+      @itemClick="itemClick"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};