@weni/unnnic-system 3.5.1-alpha.3 → 3.5.2

package/src/components/Alert/SIMPLE_MIGRATION_GUIDE.md

@@ -1,152 +0,0 @@
-# 🚀 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/ui/popover/Popover.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
-import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicPopover',
-});
-
-const props = defineProps<PopoverRootProps>();
-const emits = defineEmits<PopoverRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <PopoverRoot v-bind="forwarded">
-    <slot />
-  </PopoverRoot>
-</template>

package/src/components/ui/popover/PopoverContent.vue

@@ -1,98 +0,0 @@
-<template>
-  <PopoverPortal>
-    <PopoverContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'unnnic-popover',
-          `unnnic-popover--size-${props.size}`,
-          'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        )
-      "
-    >
-      <section :class="`unnnic-popover__content ${props.class || ''}`">
-        <slot />
-      </section>
-
-      <footer
-        v-if="$slots.footer"
-        class="unnnic-popover__footer"
-      >
-        <slot name="footer" />
-      </footer>
-    </PopoverContent>
-  </PopoverPortal>
-</template>
-
-<script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
-import { cn } from '@/lib/utils';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(
-  defineProps<
-    PopoverContentProps & {
-      class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
-    }
-  >(),
-  {
-    align: 'center',
-    sideOffset: 4,
-    size: 'medium',
-  },
-);
-const emits = defineEmits<PopoverContentEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class', 'size');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-
-$popover-space: $unnnic-space-4;
-
-.unnnic-popover {
-  z-index: 10000;
-
-  border-radius: $unnnic-radius-2;
-  box-shadow: $unnnic-shadow-1;
-
-  &--size-small {
-    width: 240px;
-  }
-  &--size-medium {
-    width: 320px;
-  }
-  &--size-large {
-    width: 400px;
-  }
-
-  &__content {
-    padding: $popover-space;
-  }
-
-  &__footer {
-    border-top: 1px solid $unnnic-color-border-soft;
-
-    padding: $popover-space;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: $unnnic-space-2;
-
-    > * {
-      width: 100%;
-    }
-  }
-}
-</style>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { PopoverTriggerProps } from 'reka-ui';
-import { PopoverTrigger } from 'reka-ui';
-
-const props = defineProps<PopoverTriggerProps>();
-</script>
-
-<template>
-  <PopoverTrigger v-bind="props">
-    <slot />
-  </PopoverTrigger>
-</template>

package/src/components/ui/popover/index.ts

@@ -1,4 +0,0 @@
-export { default as Popover } from './Popover.vue';
-export { default as PopoverContent } from './PopoverContent.vue';
-export { default as PopoverTrigger } from './PopoverTrigger.vue';
-export { PopoverAnchor } from 'reka-ui';

package/src/stories/Popover.stories.js

@@ -1,306 +0,0 @@
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../components/ui/popover';
-import UnnnicButton from '../components/Button/Button.vue';
-import UnnnicInput from '../components/Input/Input.vue';
-import UnnnicLabel from '../components/Label/Label.vue';
-
-export default {
-  title: 'Misc/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `A popover component that displays rich content in a portal, floating on top of other content.
-          <br/>
-          It supports three sizes (small, medium, large) and optional footer slot for action buttons, for example.
-          <br/>
-          API reference: https://www.reka-ui.com/docs/components/popover
-          `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-      description: 'The size of the popover',
-    },
-    side: {
-      control: { type: 'select' },
-      options: ['top', 'right', 'bottom', 'left'],
-      description: 'The preferred side of the trigger to render against',
-    },
-    align: {
-      control: { type: 'select' },
-      options: ['start', 'center', 'end'],
-      description: 'The preferred alignment against the trigger',
-    },
-  },
-  args: {
-    size: 'medium',
-    side: 'bottom',
-    align: 'center',
-  },
-};
-
-export const Default = {
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Open Popover" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <p style="margin: 0;">This is a simple popover with some content inside.</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const WithFooter = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Popover with action buttons in the footer using the `#footer` slot.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Open Popover" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <p style="margin: 0;">This popover has a footer with action buttons.</p>
-            <template #footer>
-              <UnnnicButton text="Cancel" type="tertiary" />
-              <UnnnicButton text="Save" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const WithForm = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Popover containing a form with inputs and footer actions.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: {
-      Popover,
-      PopoverContent,
-      PopoverTrigger,
-      UnnnicButton,
-      UnnnicInput,
-      UnnnicLabel,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Edit Profile" iconLeft="edit" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700;">Edit Profile</h3>
-            <form>
-              <UnnnicLabel label="Name" />
-              <UnnnicInput placeholder="Enter your name" />
-              <br />
-              <UnnnicLabel label="Email" />
-              <UnnnicInput placeholder="Enter your email" type="email" />
-            </form>
-            <template #footer>
-              <UnnnicButton text="Cancel" type="tertiary" />
-              <UnnnicButton text="Save" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const Sizes = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The popover comes in three sizes: small (240px), medium (320px), and large (400px).',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: space-around; align-items: center; min-height: 400px; gap: 32px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Small" />
-          </PopoverTrigger>
-          <PopoverContent size="small">
-            <p style="margin: 0;">Small popover (240px)</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Medium" />
-          </PopoverTrigger>
-          <PopoverContent size="medium">
-            <p style="margin: 0;">Medium popover (320px)</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Large" />
-          </PopoverTrigger>
-          <PopoverContent size="large">
-            <p style="margin: 0;">Large popover (400px)</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const Placements = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The popover can be positioned on any side of the trigger: top, bottom, left, or right.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 100px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Top" />
-          </PopoverTrigger>
-          <PopoverContent side="top" align="center">
-            <p style="margin: 0;">Popover on top</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Bottom" />
-          </PopoverTrigger>
-          <PopoverContent side="bottom" align="center">
-            <p style="margin: 0;">Popover on bottom</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Left" />
-          </PopoverTrigger>
-          <PopoverContent side="left" align="center">
-            <p style="margin: 0;">Popover on left</p>
-          </PopoverContent>
-        </Popover>
-
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Right" />
-          </PopoverTrigger>
-          <PopoverContent side="right" align="center">
-            <p style="margin: 0;">Popover on right</p>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};
-
-export const RichContent = {
-  args: {
-    size: 'large',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Example of a popover with rich, structured content and footer actions.',
-      },
-    },
-  },
-  render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
-        <Popover>
-          <PopoverTrigger>
-            <UnnnicButton text="Show Details" iconLeft="info" />
-          </PopoverTrigger>
-          <PopoverContent v-bind="args">
-            <div>
-              <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">User Information</h3>
-              <div style="display: flex; flex-direction: column; gap: 12px;">
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Name:</span>
-                  <span>John Doe</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Email:</span>
-                  <span>john.doe@example.com</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Role:</span>
-                  <span>Administrator</span>
-                </div>
-                <div style="display: flex; gap: 8px;">
-                  <span style="font-weight: 600;">Status:</span>
-                  <span style="color: #4CAF50;">Active</span>
-                </div>
-              </div>
-            </div>
-            <template #footer>
-              <UnnnicButton text="View Profile" type="primary" />
-            </template>
-          </PopoverContent>
-        </Popover>
-      </div>
-    `,
-  }),
-};