@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/stories/ChartFunnel.stories.js

@@ -0,0 +1,127 @@
+import UnnnicChartFunnel from '../components/ChartFunnel/ChartFunnel.vue';
+
+export default {
+  title: 'Charts/ChartFunnel',
+  tags: ['autodocs'],
+  component: UnnnicChartFunnel,
+  argTypes: {
+    type: { control: { type: 'select' }, options: ['default', 'basic'] },
+  },
+  decorators: [
+    () => ({
+      template: '<div style="width: 500px; height: 500px;"><story /></div>',
+    }),
+  ],
+};
+
+export const TwoRows = {
+  args: {
+    data: [
+      {
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
+      },
+      {
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
+      },
+    ],
+  },
+};
+
+export const ThreeRows = {
+  args: {
+    data: [
+      {
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
+      },
+      {
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
+      },
+      {
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
+      },
+    ],
+  },
+};
+
+export const FourRows = {
+  args: {
+    data: [
+      {
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
+      },
+      {
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
+      },
+      {
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
+      },
+      {
+        title: '12%',
+        description: 'Foi para checkout',
+        value: '2.234',
+        color: '#63B3ED',
+      },
+    ],
+  },
+};
+
+export const FiveRows = {
+  args: {
+    data: [
+      {
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
+      },
+      {
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
+      },
+      {
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
+      },
+      {
+        title: '12%',
+        description: 'Foi para checkout',
+        value: '2.234',
+        color: '#63B3ED',
+      },
+      {
+        title: '5%',
+        description: 'Finalizou a compra',
+        value: '931',
+        color: '#68D391',
+      },
+    ],
+  },
+};

package/src/stories/ChartLine.stories.js

@@ -0,0 +1,55 @@
+import UnnnicChartLine from '../components/ChartLine/ChartLine.vue';
+
+export default {
+  title: 'Charts/ChartLine',
+  tags: ['autodocs'],
+  component: UnnnicChartLine,
+  argTypes: {},
+};
+
+export const Default = {
+  args: {
+    title: 'Histórico de análises',
+    fixedMaxValue: 1,
+    data: [
+      {
+        title: 'Jan',
+        value: 0.5,
+      },
+      {
+        title: 'Fev',
+        value: 1,
+      },
+      {
+        title: 'Mar',
+        value: 1,
+      },
+    ],
+  },
+};
+
+export const Condensed = {
+  args: {
+    title: 'Histórico de análises',
+    condensed: true,
+    fixedMaxValue: 1,
+    data: [
+      {
+        title: 'Jan',
+        value: 0,
+      },
+      {
+        title: 'Fev',
+        value: 1,
+      },
+      {
+        title: 'Mar',
+        value: 0.5,
+      },
+      {
+        title: 'Abr',
+        value: 1,
+      },
+    ],
+  },
+};

package/src/stories/ChartMultiLine.stories.js

@@ -0,0 +1,50 @@
+import UnnnicChartMultiLine from '../components/ChartMultiLine/ChartMultiLine.vue';
+
+export default {
+  title: 'charts/ChartMultiLine',
+  component: UnnnicChartMultiLine,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export const 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

@@ -0,0 +1,18 @@
+import UnnnicChartRainbow from '../components/ChartRainbow/ChartRainbow.vue';
+
+export default {
+  title: 'Charts/ChartRainbow',
+  component: UnnnicChartRainbow,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: { type: 'number', min: 0, max: 100, step: 0.1 } },
+    description: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    modelValue: 50,
+    description: 'Description',
+  },
+};

package/src/stories/ChatsUserAvatar.stories.js

@@ -0,0 +1,36 @@
+import UnnnicChatsUserAvatar from '../components/ChatsUserAvatar/ChatsUserAvatar.vue';
+
+export default {
+  title: 'Chats/UserAvatar',
+  component: UnnnicChatsUserAvatar,
+  tags: ['autodocs'],
+  args: {
+    size: 'xl',
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'ant', 'md', 'lg', 'xl', '2xl'],
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    username: 'John Doe',
+  },
+};
+
+export const Agent = {
+  args: {
+    username: 'Agent',
+  },
+};
+
+export const Bot = {
+  args: {
+    username: 'Bot',
+  },
+};

package/src/stories/Checkbox.stories.js

@@ -0,0 +1,79 @@
+import { action } from 'storybook/actions';
+import UnnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+
+export default {
+  title: 'Form/Checkbox',
+  component: UnnnicCheckbox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `<div>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.
+        </div>`,
+      },
+    },
+  },
+  args: { disabled: false },
+  argTypes: {
+    modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+    helper: { control: 'text' },
+  },
+  render: (args) => ({
+    components: {
+      UnnnicCheckbox,
+    },
+    setup() {
+      const updateModelValue = (value) => {
+        action('update:modelValue')(value);
+        args.modelValue = value;
+      };
+      return { args, updateModelValue };
+    },
+    template: `
+      <pre>v-model: {{ args.modelValue }}</pre>
+      <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    modelValue: false,
+    label: 'Label',
+    helper: 'Helper',
+  },
+};
+
+export const Selected = {
+  args: {
+    modelValue: true,
+    label: 'Label',
+  },
+};
+
+export const Less = {
+  args: {
+    modelValue: 'less',
+    label: 'Label',
+  },
+};
+
+export const Disabled = {
+  args: {
+    modelValue: false,
+    disabled: true,
+    label: 'Label',
+  },
+};
+
+export const DisabledSelected = {
+  args: {
+    modelValue: true,
+    disabled: true,
+    label: 'Label',
+  },
+};

package/src/stories/CheckboxGroup.stories.js

@@ -0,0 +1,105 @@
+import UnnnicCheckboxGroup from '../components/CheckboxGroup/CheckboxGroup.vue';
+import UnnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+
+export default {
+  title: 'Form/CheckboxGroup',
+  component: UnnnicCheckboxGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `<div>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.
+        </div>`,
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'object' } },
+    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: {
+      text: '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/Chip.stories.js

@@ -0,0 +1,194 @@
+import UnnnicChip from '../components/Chip/Chip.vue';
+import UnnnicIcon from '../components/Icon.vue';
+
+export default {
+  title: 'Data Display/Chip',
+  component: UnnnicChip,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `<div>A simplified compact element used for selection and filtering. 
+        Chips are commonly used to display tags, filters, or selectable options 
+        with automatic styling based on selection state. They provide a clean 
+        and organized way to show multiple related items with clear visual feedback.
+        </div>`,
+      },
+    },
+  },
+  args: {
+    text: 'Chip Text',
+    type: 'single',
+    isSelected: false,
+    count: null,
+    isClickable: false,
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['single', 'multiple'],
+      description:
+        'The type of chip - single for basic display, multiple for selection with icons',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'The text content displayed in the chip',
+    },
+    isSelected: {
+      control: { type: 'boolean' },
+      description:
+        'Whether the chip is in selected state (affects styling and icons)',
+    },
+    count: {
+      control: { type: 'number' },
+      description: 'Optional count number displayed in the chip',
+    },
+    isClickable: {
+      control: { type: 'boolean' },
+      description:
+        'Whether the chip should show clickable styling (cursor pointer)',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    text: 'Default Chip',
+    type: 'single',
+  },
+};
+
+export const Selected = {
+  args: {
+    text: 'Selected Chip',
+    type: 'single',
+    isSelected: true,
+  },
+};
+
+export const WithCount = {
+  args: {
+    text: 'Messages',
+    type: 'single',
+    count: 5,
+  },
+};
+
+export const WithCountSelected = {
+  args: {
+    text: 'Selected Messages',
+    type: 'single',
+    count: 12,
+    isSelected: true,
+  },
+};
+
+export const MultipleType = {
+  args: {
+    text: 'Multiple Chip',
+    type: 'multiple',
+    isSelected: false,
+  },
+};
+
+export const MultipleSelected = {
+  args: {
+    text: 'Selected Multiple',
+    type: 'multiple',
+    isSelected: true,
+  },
+};
+
+export const MultipleWithCount = {
+  args: {
+    text: 'Items',
+    type: 'multiple',
+    count: 8,
+    isSelected: false,
+  },
+};
+
+export const MultipleWithCountSelected = {
+  args: {
+    text: 'Selected Items',
+    type: 'multiple',
+    count: 15,
+    isSelected: true,
+  },
+};
+
+export const LongText = {
+  args: {
+    text: 'This is a chip with longer text content',
+    type: 'single',
+  },
+};
+
+export const LongTextSelected = {
+  args: {
+    text: 'This is a selected chip with longer text',
+    type: 'single',
+    isSelected: true,
+  },
+};
+
+export const Clickable = {
+  args: {
+    text: 'Clickable Chip',
+    type: 'single',
+    isClickable: true,
+  },
+};
+
+export const ClickableSelected = {
+  args: {
+    text: 'Clickable Selected',
+    type: 'multiple',
+    isSelected: true,
+    isClickable: true,
+  },
+};
+
+export const WithRightSlot = {
+  render: (args) => ({
+    components: { UnnnicChip, UnnnicIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicChip v-bind="args">
+        <template #right>
+          <UnnnicIcon icon="material-symbols:account-circle-sharp" size="sm" scheme="fg-base" />
+        </template>
+      </UnnnicChip>
+    `,
+  }),
+};
+
+// Interactive example showing state changes
+export const Interactive = {
+  args: {
+    text: 'Click to toggle',
+    type: 'multiple',
+    count: 3,
+    isClickable: true,
+  },
+  render: (args) => ({
+    components: { UnnnicChip },
+    data() {
+      return {
+        selected: args.isSelected || false,
+      };
+    },
+    template: `
+      <UnnnicChip 
+        :text="'${args.text}'"
+        :type="'${args.type}'"
+        :count="${args.count}"
+        :isSelected="selected"
+        :isClickable="true"
+        @click="selected = !selected"
+      />
+    `,
+  }),
+};