@weni/unnnic-system 3.5.0 → 3.5.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.5.0",
+  "version": "3.5.1-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -38,7 +38,7 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "coverage": "vitest --coverage",
-    "style-dictionary:generate": "style-dictionary build --config styleDictionary.config.js"
+    "style-dictionary:generate": "style-dictionary build --config styleDictionary.config.mjs"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,9 @@
     "vue": "^3.4.8"
   },
   "dependencies": {
+    "@iconify/vue": "^5.0.0",
     "@vueuse/components": "^10.4.1",
+    "@vueuse/core": "^14.0.0",
     "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.546.0",

package/src/assets/tokens/iconSizeTokens.ts

@@ -0,0 +1,10 @@
+// Do not edit directly, this file was auto-generated.
+
+export const iconSizeTokens: Record<string, string> = {
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '7': '32px',
+  '10': '40px',
+};

package/src/components/Alert/SIMPLE_MIGRATION_GUIDE.md

@@ -0,0 +1,152 @@
+# 🚀 Guia de Migração: Alert → Toast
+
+## 📦 Importação
+
+**ANTES:**
+
+```javascript
+import Unnnic from '@weni/unnnic-system';
+
+Unnnic.unnnicCallAlert(...);
+```
+
+**DEPOIS:**
+
+```javascript
+import { toast } from "@weni/unnnic-system";
+```
+
+---
+
+## 📋 Mapeamento de Propriedades
+
+| Alert               | Toast               | Alteração                       |
+| ------------------- | ------------------- | ------------------------------- |
+| `text`              | `title`             | Propriedade renomeada           |
+| `seconds`           | `timeout`           | Agora em **milissegundos (ms)** |
+| `type: 'success'`   | `toast.success()`   | Substituído por método direto   |
+| `type: 'error'`     | `toast.error()`     | Substituído por método direto   |
+| `type: 'attention'` | `toast.attention()` | Substituído por método direto   |
+| `type: 'default'`   | `toast.info()`      | Substituído por método direto   |
+
+---
+
+## 🔄 Exemplos de Uso
+
+### Exemplo 1 – Uso com Função
+
+**ANTES:**
+
+```javascript
+// callAlert
+alert.callAlert({
+  props: {
+    text: "Dados salvos com sucesso!",
+    type: "success",
+  },
+  seconds: 3,
+});
+```
+
+**DEPOIS:**
+
+```javascript
+// toast
+toast.success("Dados salvos com sucesso!");
+```
+
+---
+
+### Exemplo 2 – Uso com Componente
+
+**ANTES:**
+
+```vue
+<!-- UnnnicAlert -->
+<UnnnicAlert
+  text="Dados salvos com sucesso!"
+  type="success"
+  @close="handleClose"
+/>
+```
+
+**DEPOIS:**
+
+```vue
+<!-- UnnnicToast -->
+<UnnnicToast
+  title="Dados salvos com sucesso!"
+  type="success"
+  @close="handleClose"
+/>
+```
+
+---
+
+## 📚 Casos Comuns
+
+### ✅ Sucesso
+
+**ANTES:**
+
+```javascript
+alert.callAlert({
+  props: {
+    text: "Dados salvos com sucesso!",
+    type: "success",
+  },
+  seconds: 5,
+});
+```
+
+**DEPOIS:**
+
+```javascript
+toast.success("Dados salvos com sucesso!");
+```
+
+---
+
+### ❌ Erro
+
+**ANTES:**
+
+```javascript
+alert.callAlert({
+  props: {
+    text: "Erro ao salvar dados",
+    type: "error",
+  },
+  seconds: 5,
+});
+```
+
+**DEPOIS:**
+
+```javascript
+toast.error("Erro ao salvar dados");
+```
+
+---
+
+### ⏱ Timeout Personalizado
+
+**ANTES:**
+
+```javascript
+alert.callAlert({
+  props: {
+    text: "Mensagem importante",
+    type: "success",
+  },
+  seconds: 10, // 10 segundos
+});
+```
+
+**DEPOIS:**
+
+```javascript
+toast.success("Mensagem importante", "", {
+  timeout: 10000, // 10 segundos em ms
+});
+```

package/src/components/Button/Button.vue

@@ -19,7 +19,6 @@
       :filled="iconsFilled"
       :style="{ position: 'absolute' }"
       class="rotation"
-      :next="next"
       data-testid="icon-loading"
     />
 
@@ -31,7 +30,6 @@
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-left': hasText }"
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
-      :next="next"
       data-testid="icon-left"
     />
 
@@ -42,7 +40,6 @@
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
       :size="iconSize"
       :filled="iconsFilled"
-      :next="next"
       data-testid="icon-center"
     />
 
@@ -63,7 +60,6 @@
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-right': hasText }"
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
-      :next="next"
       data-testid="icon-right"
     />
   </button>
@@ -90,7 +86,6 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   iconRight: '',
   iconCenter: '',
   iconsFilled: false,
-  next: false,
   disabled: false,
   loading: false,
 });

package/src/components/Button/types.ts

@@ -17,7 +17,6 @@ export interface ButtonProps {
   iconRight?: string;
   iconCenter?: string;
   iconsFilled?: boolean;
-  next?: boolean;
   disabled?: boolean;
   loading?: boolean;
 }

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -59,8 +59,9 @@ const props = defineProps<{
 }>();
 
 const calculatedTransform = computed(() => {
-  return `skew(${props.data.length === 2 ? '-8deg' : '-12deg'}, 0deg) translateX(-20px)`;
+  return `skew(${props.data.length === 2 ? '-8deg': '-12deg'}, 0deg) translateX(-20px)`;
 });
+
 </script>
 
 <style lang="scss" scoped>

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -1,64 +1,65 @@
 <template>
-  <ChartFunnelBaseRow
-    class="unnnic-chart-funnel-two-rows"
-    :rows="rows"
-    viewBox="0 0 250 148"
-  />
-</template>
-
-<script>
-import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
-export default {
-  name: 'UnnnicChartFunnelTwoRows',
-
-  components: {
-    ChartFunnelBaseRow,
-  },
-
-  props: {
-    data: {
-      type: Array,
-      required: true,
+    <ChartFunnelBaseRow
+      class="unnnic-chart-funnel-two-rows"
+      :rows="rows"
+      viewBox="0 0 250 148"
+    />
+  </template>
+  
+  <script>
+  import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+  export default {
+    name: 'UnnnicChartFunnelTwoRows',
+  
+    components: {
+      ChartFunnelBaseRow,
     },
-  },
-
-  computed: {
-    rows() {
-      const { data } = this;
-      return [
-        {
-          pathD:
-            'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
-          titleX: '50%',
-          titleY: '32',
-          descriptionX: '50%',
-          descriptionY: '52',
-          title: data[0].title,
-          description: data[0].description,
-        },
-        {
-          pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
-          titleX: '50%',
-          titleY: '106',
-          descriptionX: '50%',
-          descriptionY: '126',
-          title: data[1].title,
-          description: data[1].description,
-        },
-      ];
+  
+    props: {
+      data: {
+        type: Array,
+        required: true,
+      },
     },
-  },
-};
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-.unnnic-chart-funnel-two-rows {
-  [class$='row']:nth-child(1) {
-    fill: $unnnic-color-weni-950;
-  }
-  [class$='row']:nth-child(2) {
-    fill: $unnnic-color-weni-800;
+  
+    computed: {
+      rows() {
+        const { data } = this;
+        return [
+          {
+            pathD:
+              'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+            titleX: '50%',
+            titleY: '32',
+            descriptionX: '50%',
+            descriptionY: '52',
+            title: data[0].title,
+            description: data[0].description,
+          },
+          {
+            pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+            titleX: '50%',
+            titleY: '106',
+            descriptionX: '50%',
+            descriptionY: '126',
+            title: data[1].title,
+            description: data[1].description,
+          }
+        ];
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  @use '@/assets/scss/unnnic' as *;
+  .unnnic-chart-funnel-two-rows {
+    [class$='row']:nth-child(1) {
+      fill: $unnnic-color-weni-950;
+    }
+    [class$='row']:nth-child(2) {
+      fill: $unnnic-color-weni-800;
+    }
   }
-}
-</style>
+  </style>
+  

package/src/components/Chip/Chip.vue

@@ -80,7 +80,7 @@ const chipClass = computed(() => {
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
   border: 1px solid transparent;
-
+  
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }

package/src/components/Icon/types.ts

@@ -17,14 +17,10 @@ export type IconSize =
   | 'avatar-xs'
   | 'avatar-nano';
 
-export type LineHeight = 'sm' | 'md' | 'lg';
-
 export interface IconProps {
   filled?: boolean;
-  next?: boolean;
   icon?: string | null;
   clickable?: boolean;
   size?: IconSize;
-  lineHeight?: LineHeight | null;
   scheme?: SchemeColor;
 }

package/src/components/Icon.vue

@@ -1,7 +1,25 @@
 <template>
+  <Icon
+    v-if="isIconify"
+    :icon="props.icon as string"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon-scheme--${scheme}`,
+      `unnnic-icon-size--${size}`,
+      {
+        'unnnic--clickable': clickable,
+      },
+    ]"
+    data-testid="iconify-icon"
+    @click="onClick"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
+  />
+
   <span
-    v-if="materialSymbolsName"
+    v-else-if="materialSymbolsName"
     :class="[
+      'unnnic-icon',
       'material-symbols-rounded',
       `unnnic-icon-scheme--${scheme}`,
       `unnnic-icon-size--${size}`,
@@ -18,44 +36,26 @@
   >
     {{ materialSymbolsName }}
   </span>
-
-  <component
-    :is="svg"
-    v-else
-    :class="[
-      'unnnic-icon',
-      `unnnic-icon__size--${size}`,
-      clickable ? 'unnnic--clickable' : '',
-      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
-      scheme ? `unnnic-icon-scheme--${scheme}` : '',
-    ]"
-    data-testid="old-map-icons"
-    @click="onClick"
-    @mousedown="(event) => $emit('mousedown', event)"
-    @mouseup="(event) => $emit('mouseup', event)"
-  />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import icons from '../utils/icons';
+import { Icon } from '@iconify/vue';
 import OldIconsMap from './Icon/OldIconsMap.json';
-import type { IconProps, IconSize, LineHeight } from './Icon/types';
+import type { IconProps, IconSize } from './Icon/types';
 import type { SchemeColor } from '@/types/scheme-colors';
 
 defineOptions({
   name: 'UnnnicIcon',
 });
 
-export type { IconProps, IconSize, LineHeight, SchemeColor };
+export type { IconProps, IconSize, SchemeColor };
 
 const props = withDefaults(defineProps<IconProps>(), {
   filled: false,
-  next: false,
   icon: null,
   clickable: false,
   size: 'md',
-  lineHeight: null,
   scheme: 'neutral-darkest',
 });
 
@@ -65,15 +65,12 @@ const emit = defineEmits<{
   mouseup: [event: Event];
 }>();
 
-const svg = computed(() => {
-  return icons[props.icon as string];
+const isIconify = computed(() => {
+  return props.icon?.includes(':') ?? false;
 });
 
 const materialSymbolsName = computed(() => {
-  if (Object.keys(icons).includes(props.icon as string) && !props.next) {
-    return null;
-  }
-
+  if (isIconify.value) return null;
   return (
     (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon
   );
@@ -88,28 +85,34 @@ const onClick = (event: Event) => {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-.unnnic-icon :deep(svg) {
-  position: absolute;
-  top: 0;
-  left: 0;
+.unnnic-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(svg) {
+    width: 1em;
+    height: 1em;
+  }
 }
 </style>
 
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
+@use '@/assets/scss/icon-sizes' as *;
 
 $icon-sizes:
-  'xl' $unnnic-icon-size-xl,
-  'lg' $unnnic-icon-size-lg,
-  'md' $unnnic-icon-size-md,
-  'ant' $unnnic-icon-size-ant,
-  'sm' $unnnic-icon-size-sm,
-  'xs' $unnnic-icon-size-xs,
-  'avatar-lg' $unnnic-avatar-size-lg,
-  'avatar-md' $unnnic-avatar-size-md,
-  'avatar-sm' $unnnic-avatar-size-sm,
-  'avatar-xs' $unnnic-avatar-size-xs,
-  'avatar-nano' $unnnic-avatar-size-nano;
+  'xs' $unnnic-icon-size-3,
+  'sm' $unnnic-icon-size-4,
+  'ant' $unnnic-icon-size-5,
+  'md' $unnnic-icon-size-6,
+  'lg' $unnnic-icon-size-7,
+  'xl' $unnnic-icon-size-10,
+  'avatar-nano' $unnnic-icon-size-5,
+  'avatar-xs' $unnnic-icon-size-7,
+  'avatar-sm' $unnnic-icon-size-10,
+  'avatar-md' '72px',
+  'avatar-lg' '104px';
 
 @font-face {
   font-family: 'Material Symbols Rounded';
@@ -126,6 +129,20 @@ $icon-sizes:
     format('woff2');
 }
 
+.unnnic-icon {
+  @each $name, $color in $unnnic-scheme-colors {
+    &.unnnic-icon-scheme--#{$name} {
+      color: $color;
+    }
+  }
+
+  @each $name, $size in $icon-sizes {
+    &.unnnic-icon-size--#{$name} {
+      font-size: $size;
+    }
+  }
+}
+
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
@@ -146,63 +163,5 @@ $icon-sizes:
   &--filled {
     font-family: 'Material Symbols Rounded Filled';
   }
-
-  @each $name, $color in $unnnic-scheme-colors {
-    &.unnnic-icon-scheme--#{$name} {
-      color: $color;
-    }
-  }
-
-  @each $name, $size in $icon-sizes {
-    &.unnnic-icon-size--#{$name} {
-      font-size: $size;
-    }
-  }
-}
-
-@each $name, $color in $scheme-colors {
-  .unnnic-icon-scheme {
-    &--#{$name} {
-      & .primary {
-        fill: $color;
-      }
-
-      & .primary-stroke {
-        stroke: $color;
-      }
-    }
-  }
-}
-
-$line-heights:
-  'sm' $unnnic-line-height-small,
-  'md' $unnnic-line-height-medium,
-  'lg' $unnnic-line-height-large;
-
-.unnnic-icon {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  @each $name, $size in $icon-sizes {
-    &__size--#{$name} {
-      width: $size;
-      height: $size;
-      min-width: $size;
-      min-height: $size;
-
-      @each $line-name, $line-size in $line-heights {
-        &.unnnic-icon__line-height--#{$line-name} svg {
-          position: relative;
-          top: calc(($size + $line-size) - ($size * 1.2)) / 1.2;
-        }
-      }
-    }
-  }
-
-  svg {
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>