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

package/src/stories/Radio.stories.js

@@ -21,9 +21,28 @@ export default {
     disabled: { control: { type: 'boolean' } },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
   },
+  render: (args) => ({
+    components: {
+      UnnnicRadio,
+    },
+    setup() {
+      const updateModelValue = (value) => {
+        action('update:modelValue')(value);
+        args.modelValue = value;
+      };
+      return { args, updateModelValue };
+    },
+    template: `
+      <div>
+        <UnnnicRadio v-bind="args" @update:model-value="updateModelValue" :value="args.value">
+          Option
+        </UnnnicRadio>
+      </div>
+    `,
+  }),
 };
 
-export const Default = {
+export const Multiple = {
   render: (args) => ({
     components: {
       UnnnicRadio,
@@ -75,3 +94,11 @@ export const DisableSelected = {
     disabled: true,
   },
 };
+
+export const Helper = {
+  args: {
+    modelValue: 'option 1',
+    value: 'option 1',
+    helper: 'Helper text',
+  },
+};

package/src/stories/RadioGroup.stories.js

@@ -0,0 +1,144 @@
+import { action } from '@storybook/addon-actions';
+import UnnnicRadioGroup from '../components/RadioGroup/RadioGroup.vue';
+import UnnnicRadio from '../components/Radio/Radio.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Form/RadioGroup',
+  component: UnnnicRadioGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Fundamental in forms, used when we present a list of two or more mutually 
+        exclusive options, and the user needs to choose exactly one of them. When you click on 
+        an unselected radio button, it will automatically deselect any other buttons that were 
+        previously selected in the list.
+          `,
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    modelValue: { control: { type: ['string', 'number'] } },
+    name: { control: { type: 'text' } },
+    state: { control: 'select', options: ['horizontal', 'vertical'] },
+    helper: { control: { type: 'text' } },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Radio Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+
+    setup() {
+      const modelValue = ref('option 1');
+
+      const updateModelValue = (value) => {
+        action('update:modelValue')(value);
+        modelValue.value = value;
+      };
+
+      return { args, modelValue, updateModelValue };
+    },
+
+    template: `
+      <section>
+        <pre>v-model: {{ modelValue }}</pre>
+
+        <UnnnicRadioGroup v-bind="args" :modelValue="modelValue" @update:modelValue="updateModelValue">
+          <UnnnicRadio value="option 1">
+            Option 1
+          </UnnnicRadio>
+
+          <UnnnicRadio value="option 2">
+            Option 2
+          </UnnnicRadio>
+
+          <UnnnicRadio value="option 3">
+            Option 3
+          </UnnnicRadio>
+        </UnnnicRadioGroup>
+      </section>
+    `,
+  }),
+};
+
+export const Horizontal = {
+  args: {
+    state: 'horizontal',
+    label: 'Label',
+    name: 'Radio Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicRadioGroup v-bind="args">
+        <UnnnicRadio value="option 1">
+            Option 1
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 2">
+            Option 2
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 3">
+            Option 3
+        </UnnnicRadio>
+      </UnnnicRadioGroup>
+    `,
+  }),
+};
+
+export const Vertical = {
+  args: {
+    state: 'vertical',
+    label: 'Label',
+    labelTooltip: 'Tooltip',
+    name: 'Radio Group 2',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicRadioGroup v-bind="args">
+        <UnnnicRadio value="option 1">
+            Option 1
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 2">
+            Option 2
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 3">
+            Option 3
+        </UnnnicRadio>
+      </UnnnicRadioGroup>
+    `,
+  }),
+};

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/Switch.stories.js

@@ -4,9 +4,11 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    size: { control: { type: 'select', options: ['small', 'medium'] } },
-    textLeft: { control: { type: 'text' } },
-    textRight: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    option: { control: { type: 'text' } },
+    helper: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -32,8 +34,11 @@ export default {
 
 export const Default = {
   args: {
-    size: 'medium',
-    textRight: 'Default',
+    label: 'Default',
+    labelTooltip: 'Tooltip',
+    labelUseHtmlTooltip: true,
+    option: 'Option',
+    helper: 'Helper text',
     disabled: false,
   },
 };

package/src/stories/Tab.stories.js

@@ -3,9 +3,6 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
-  argTypes: {
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -36,6 +33,15 @@ export default {
             Second description
           </p>
         </template>
+        <template #tab-head-third>
+          Third
+        </template>
+        <template #tab-panel-third>
+          <h2 class="title">Third Content</h2>
+          <p class="description">
+            Third description
+          </p>
+        </template>
       </unnnic-tab>
     `,
   }),
@@ -44,6 +50,7 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second'],
+    tabs: ['first', 'second', 'third'],
+    disabledTabs: ['third'],
   },
 };

package/src/stories/Tag.stories.js

@@ -1,5 +1,4 @@
 import UnnnicTag from '../components/Tag/Tag.vue';
-import colorsList from '../utils/colorsList';
 
 export default {
   title: 'Data Display/Tag',
@@ -8,13 +7,30 @@ export default {
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
-      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
+      control: 'select',
+      options: ['default', 'brand', 'next'],
     },
     scheme: {
-      control: {
-        type: 'select',
-        options: colorsList,
-      },
+      control: 'select',
+      options: [
+        'green',
+        'blue',
+        'purple',
+        'red',
+        'orange',
+        'yellow',
+        'gray',
+        'teal',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+    hasCloseIcon: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [null, 'check_circle', 'sentiment_satisfied'],
     },
   },
 };
@@ -34,45 +50,10 @@ export const LeftIcon = {
   },
 };
 
-export const RightIcon = {
+export const Small = {
   args: {
     text: 'Label',
     type: 'default',
-    rightIcon: 'check_circle',
-  },
-};
-
-export const CloseIcon = {
-  args: {
-    text: 'Label',
-    type: 'default',
-    hasCloseIcon: true,
-  },
-};
-
-export const Next = {
-  args: {
-    text: 'Label',
-    type: 'next',
-    scheme: 'weni',
-  },
-};
-
-export const Indicator = {
-  args: {
-    text: 'Tag Name',
-    type: 'indicator',
-    count: 100,
-    clickable: true,
-    hasBackButton: false,
-    enableTooltip: true,
-    tooltipText: 'This is the amount',
-  },
-};
-
-export const Brand = {
-  args: {
-    text: 'Settings',
-    type: 'brand',
+    size: 'small',
   },
 };

package/src/stories/TextArea.stories.js

@@ -37,6 +37,7 @@ export const Default = {
     errors: [],
     size: 'md',
     message: 'Helper text',
+    tooltip: 'Tooltip',
   },
 };
 
@@ -47,7 +48,7 @@ export const Error = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    error: 'Error text',
+    errors: 'Error text',
     size: 'md',
   },
 };
@@ -84,7 +85,7 @@ export const ErrorSm = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    error: 'Error text',
+    errors: 'Error text',
     size: 'sm',
   },
 };
@@ -100,3 +101,14 @@ export const DisabledSm = {
     message: 'Helper text',
   },
 };
+
+export const ResizeNone = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    resize: 'none',
+  },
+};

package/src/stories/Toast.mdx

@@ -0,0 +1,123 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as ToastStories from './Toast.stories';
+
+<Meta of={ToastStories} />
+
+# Toast
+
+The Toast component is used to display temporary notifications in the user interface. It appears in the bottom right corner of the screen with smooth animation and can be closed automatically or manually.
+
+<Source
+  language="html"
+  dark
+  code={`
+<UnnnicToast
+  title="Success!"
+  description="Your action was completed successfully."
+  type="success"
+  :timeout="5000"
+  @close="onClose"
+  @destroy="onDestroy"
+/>
+  `}
+/>
+
+---
+
+#### **Props Options:**
+
+| Key         | Description                              | Values                                                      | Default         |
+|-------------|------------------------------------------|-------------------------------------------------------------|-----------------|
+| title       | **Required.** Toast title                | `string`                                                    | -               |
+| description | Toast descriptive text                   | `string`                                                    | `''`            |
+| type        | Visual type of the toast                 | `'informational'` \| `'attention'` \| `'success'` \| `'error'` | `'informational'` |
+| timeout     | Time in ms for auto-dismiss (0 = persistent) | `number`                                                | `5000`          |
+| button      | Optional action button configuration     | `{ text: string; action: () => void }`                     | `undefined`     |
+
+#### **Events:**
+
+| Event   | Description                                    |
+|---------|------------------------------------------------|
+| close   | Emitted when the toast is closed              |
+| destroy | Emitted when the toast is removed from DOM    |
+
+---
+
+## Features
+
+- **Animations**: Smooth entry and exit transitions
+- **Visual types**: Different variations for different types of messages
+- **Action button**: Optional, for quick actions
+- **Auto-dismiss**: Configurable or persistent
+
+## Usage
+
+### As component
+
+<Source
+  language="vue"
+  dark
+  code={`
+<template>
+  <UnnnicToast
+    title="Success!"
+    description="Your action was completed successfully."
+    type="success"
+    :timeout="5000"
+    @close="onToastClose"
+  />
+</template>
+
+<script setup>
+import { UnnnicToast } from '@weni/unnnic-system';
+
+const onToastClose = () => {
+  console.log('Toast closed');
+};
+</script>
+  `}
+/>
+
+### Programmatically
+
+The Toast component can be used programmatically through the `toast` utility, which provides a simple API for creating toasts without needing to manage component state.
+
+<Source
+  language="javascript"
+  dark
+  code={`
+// Basic usage
+import { toast } from '@weni/unnnic-system';
+
+toast.info('Information', 'Here is some useful information');
+  `}
+/>
+
+#### API Reference
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `toast.success(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates a success toast |
+| `toast.error(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an error toast |
+| `toast.attention(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an attention/warning toast |
+| `toast.info(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an informational toast |
+
+#### ToastOptions Interface
+
+```typescript
+interface ToastOptions {
+  timeout?: number;           // Auto-dismiss time in ms (0 = persistent)
+  button?: {                  // Optional action button
+    text: string;
+    action: () => void;
+  };
+  onClose?: () => void;      // Callback when toast is closed
+}
+```
+
+## Animations
+
+- **Entry**: Slide from bottom to top with fade-in
+- **Exit**: Slide from top to bottom with fade-out
+- **Duration**: 300ms with smooth easing