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

package/src/stories/Input.stories.js

@@ -0,0 +1,157 @@
+import unnnicFormElement from '../components/FormElement/FormElement.vue';
+import unnnicInput from '../components/Input/Input.vue';
+import iconList from '../utils/iconList';
+
+export default {
+  title: 'Form/Input',
+  component: unnnicInput,
+  argTypes: {
+    label: { control: { type: 'text' } },
+    size: {
+      control: { type: 'select' },
+      options: ['md', 'sm'],
+      defaultValue: {
+        summary: 'md',
+      },
+    },
+    tooltip: { control: { type: 'object' } },
+    type: {
+      control: { type: 'select' },
+      options: ['normal', 'error'],
+      defaultValue: {
+        summary: 'normal',
+      },
+    },
+    nativeType: { control: { type: 'select' }, options: ['text', 'password'] },
+    placeholder: { control: { type: 'text' } },
+    iconLeft: { control: { type: 'select' }, options: iconList },
+    iconRight: { control: { type: 'select' }, options: iconList },
+    allowTogglePassword: { control: { type: 'boolean' } },
+  },
+  render: (args) => ({
+    components: {
+      unnnicInput,
+      unnnicFormElement,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        value: '',
+      };
+    },
+    methods: {
+      click() {
+        alert('click');
+      },
+    },
+    template: `
+      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+    `,
+  }),
+};
+
+export const Normal = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const NormalSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    errors: 'Error text',
+  },
+};
+
+export const ErrorSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
+};
+
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
+};
+
+export const DisabledError = {
+  args: {
+    label: 'Label',
+    disabled: true,
+    errors: 'Error text',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Password = {
+  args: {
+    label: 'Label',
+    placeholder: 'Password',
+    nativeType: 'password',
+    allowTogglePassword: true,
+  },
+};
+
+export const IconLeftAndRight = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    iconLeft: 'email',
+    iconRight: 'search',
+    iconRightClickable: true,
+  },
+};
+
+export const Mask = {
+  args: {
+    label: 'CPF or CNPJ',
+    placeholder: 'Text',
+    mask: ['###.###.###-##', '##.###.###/####-##'],
+  },
+};
+
+export const LimitMaxLength = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    tooltip: {
+      text: 'Tooltip',
+    },
+  },
+};

package/src/stories/InputDatePicker.stories.js

@@ -0,0 +1,155 @@
+import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import moment from 'moment';
+export default {
+  title: 'Form/InputDatePicker',
+  component: UnnnicInputDatePicker,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['day', 'month', 'year'],
+      },
+    },
+    position: {
+      control: {
+        type: 'select',
+        options: ['left', 'right'],
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      UnnnicInputDatePicker,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        dates: {
+          start: null,
+          end: null,
+        },
+      };
+    },
+    template: `
+      <div style="max-width: 200px">
+        <pre>v-model: {{ dates }}</pre>
+        <unnnic-input-date-picker v-bind="args" v-model="dates" />
+      </div>
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    size: 'sm',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+const today = moment();
+
+export const WithMinMaxDates = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+    maxDate: today.format('YYYY-MM-DD'),
+    minDate: today.subtract(89, 'days').format('YYYY-MM-DD'),
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 14 days', id: 'last-14-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Last 60 days', id: 'last-60-days' },
+      { name: 'Last 90 days', id: 'last-90-days' },
+    ],
+  },
+};
+
+export const WithCustomRelativePeriodsAndBaseDate = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+
+    periodBaseDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+    maxDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    options: [
+      { name: 'Last 7 days (up to 24h ago)', id: 'last-7-days' },
+      { name: 'Last 14 days (up to 24h ago)', id: 'last-14-days' },
+      { name: 'Last 30 days (up to 24h ago)', id: 'last-30-days' },
+      { name: 'Last 12 months (up to 24h ago)', id: 'last-12-months' },
+      { name: 'Current month (up to 24h ago)', id: 'current-month' },
+      { name: 'Previous month (up to 24h ago)', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};
+
+export const WithHiddenOptions = {
+  args: {
+    size: 'sm',
+    hideOptions: true,
+  },
+};
+
+export const WithDisableShowOverwrittenValue = {
+  args: {
+    size: 'sm',
+    disableShowOverwrittenValue: true,
+  },
+};
+
+export const WithFooter = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+    maxDate: moment().format('YYYY-MM-DD'),
+    minDate: moment().subtract(89, 'days').format('YYYY-MM-DD'),
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 14 days', id: 'last-14-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Last 90 days', id: 'last-90-days' },
+      { name: 'Current month', id: 'current-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+  render: (args) => ({
+    components: {
+      UnnnicInputDatePicker,
+      UnnnicDisclaimer,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        dates: {
+          start: null,
+          end: null,
+        },
+      };
+    },
+    template: `
+      <div style="max-width: 200px">
+        <pre>v-model: {{ dates }}</pre>
+        <UnnnicInputDatePicker v-bind="args" v-model="dates">
+          <template #footer>
+            <UnnnicDisclaimer
+              type="neutral"
+              description="Conversations older than 90 days are archived and can't be shown. To access them, contact support."
+            />
+          </template>
+        </UnnnicInputDatePicker>
+      </div>
+    `,
+  }),
+};

package/src/stories/Label.stories.js

@@ -0,0 +1,30 @@
+import unnnicLabel from '../components/Label/Label.vue';
+
+export default {
+  title: 'Form/Label',
+  component: unnnicLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: { type: 'text' } },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Label',
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    tooltip: {
+      text: 'Tooltip',
+      enabled: true,
+      forceOpen: false,
+      side: 'bottom',
+      maxWidth: '200px',
+      enableHtml: false,
+    },
+  },
+};

package/src/stories/LanguageSelect.stories.js

@@ -0,0 +1,26 @@
+import UnnnicLanguageSelect from '../components/Dropdown/LanguageSelect.vue';
+
+export default {
+  title: 'example/LanguageSelect',
+  component: UnnnicLanguageSelect,
+  argTypes: {
+    value: { control: { type: 'select', options: ['pt-br', 'en'] } },
+    position: {
+      control: { type: 'select', options: ['top', 'bottom', 'right', 'left'] },
+    },
+  },
+};
+
+export const Normal = {
+  args: {
+    value: 'pt-br',
+    position: 'bottom',
+  },
+};
+
+export const Contracted = {
+  args: {
+    value: 'pt-br',
+    contracted: true,
+  },
+};

package/src/stories/LayerManager.docs.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Utilities/Layer Manager/Overview" />
+
+# Layer Manager Overview
+
+The layer manager exists to keep every teleported component (dialogs, drawers, popovers, tooltips, toasts, etc.) in a predictable stacking order without sprinkling arbitrary `z-index: 9999` rules across the codebase. Instead of assigning fixed bands per component type, we keep a single global stack that increments as layers mount. [Reference](https://v1.chakra-ui.com/docs/components/recipes/z-index)
+
+## Why avoid manual z-index values?
+
+- **Unbounded numbers** – once one component uses `z-index: 9999`, the next overlay needs more. This escalates quickly and still breaks when stacking contexts change.
+- **Stacking contexts** – `position`, `transform`, `opacity`, `filter`, and even flex or grid children can create new contexts that ignore global z-index rules. Portaled content plus a manager side-steps this entirely.
+- **Shared ownership** – dialogs, drawers, dropdowns, and popovers often live in different packages. A single allocator means each feature does not need to know what values others are using.
+
+## How it works here
+
+1. **Single base (1000)** – all teleported layers share the same starting point, which keeps the implementation simple and predictable.
+2. **Auto-increment** – every time a component mounts, it receives the next value in the global stack so the newest element always sits on top, regardless of type.
+3. **Scoped offsets** – overlays that belong to the same surface (e.g., `DialogOverlay` vs. `DialogContent`) call `useLayerZIndex({ offset: -2 })` so the overlay sits just beneath the content that spawned it.
+
+```
+const modalZ = useLayerZIndex();
+const overlayZ = useLayerZIndex({ offset: -2 });
+```
+
+## Benefits
+
+- **Deterministic ordering** – the last overlay opened is always on top, no matter if it is a drawer, modal, popover, or toast.
+- **Safer refactors** – no need to chase down hard-coded z-index constants across the codebase; everything flows through the same stack.
+
+## When to override
+
+In rare cases you might still need a custom `z-index`. Prefer to:
+
+1. Add a dedicated offset (e.g., `useLayerZIndex({ offset: X })`) if the overlay needs to sit just above/below a sibling.
+2. Only apply inline overrides for truly one-off cases, and document why the global manager does not work there.
+
+
+Use the `Layer Manager` stories in Storybook to verify real interactions (dialog + tooltip/popover, drawer + dialog, nested dialogs, dialog + toast) whenever you add a new teleported component.
+