@weni/unnnic-system 3.9.1-alpha.4 → 3.9.2

package/src/components/Toast/types.ts

@@ -1,57 +0,0 @@
-export interface ToastManager {
-  show: (props: ToastProps) => ToastInstance;
-  close: (id: string) => void;
-}
-
-export interface ToastButton {
-  text: string;
-  action: () => void;
-}
-
-export type ToastType = 'informational' | 'attention' | 'success' | 'error';
-
-export interface ToastProps extends ToastOptions {
-  title: string;
-  description?: string;
-}
-
-export interface ToastOptions {
-  type?: ToastType;
-  button?: ToastButton;
-  timeout?: number;
-}
-
-export interface ToastEmits {
-  close: [];
-  destroy: [];
-}
-
-export interface ToastInstance {
-  id: string;
-  props: ToastProps;
-  close: () => void;
-  promise: Promise<void>;
-}
-
-export interface ToastCall {
-  info: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  success: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  attention: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  error: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-}

package/src/stories/CheckboxGroup.stories.js

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

@@ -1,330 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import PageHeader from '../components/PageHeader/PageHeader.vue';
-import UnnnicButton from '../components/Button/Button.vue';
-import UnnnicTag from '../components/Tag/Tag.vue';
-import UnnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-
-export default {
-  title: 'Layout/PageHeader',
-  component: PageHeader,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `A page header component to standardize the header of pages.
-          <br/>
-          It supports title, description, actions, tabs, tags, and back navigation.
-          <br/>
-          This component provides multiple variations to handle different page header scenarios.
-          `,
-      },
-    },
-  },
-  argTypes: {
-    title: {
-      control: { type: 'text' },
-      description: 'The title of the page',
-    },
-    description: {
-      control: { type: 'text' },
-      description: 'The description text below the title',
-    },
-    hasBackButton: {
-      control: { type: 'boolean' },
-      description: 'Show back navigation button',
-    },
-  },
-  args: {
-    title: 'Page Name',
-    description: 'Description',
-    hasBackButton: false,
-  },
-};
-
-export const Default = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A simple page header with title and description.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
-/>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { PageHeader },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args" />
-    `,
-  }),
-};
-
-export const WithActions = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Page header with action buttons on the right side. Supports primary and secondary actions.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
->
-  <template #actions>
-    <UnnnicButton text="Button" type="secondary" />
-    <UnnnicButton text="Button" type="primary" />
-  </template>
-</UnnnicPageHeader>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: {
-      PageHeader,
-      UnnnicButton,
-      Tabs,
-      TabsList,
-      TabsTrigger,
-      TabsContent,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args">
-        <template #actions>
-          <UnnnicButton text="Button" type="secondary" />
-          <UnnnicButton text="Button" type="primary" />
-        </template>
-      </PageHeader>
-    `,
-  }),
-};
-
-export const WithTabs = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Page header with tabs for navigation. Useful for pages with multiple sections divided by tabs.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
->
-  <template #actions>
-    <UnnnicButton text="Button" type="secondary" />
-    <UnnnicButton text="Button" type="primary" />
-  </template>
-  <template #tabs>
-    <UnnnicTabs defaultValue="label1">
-      <UnnnicTabsList>
-        <UnnnicTabsTrigger value="label1">Label</UnnnicTabsTrigger>
-        <UnnnicTabsTrigger value="label2">Label</UnnnicTabsTrigger>
-        <UnnnicTabsTrigger value="label3">Label</UnnnicTabsTrigger>
-      </UnnnicTabsList>
-    </UnnnicTabs>
-  </template>
-</UnnnicPageHeader>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: {
-      PageHeader,
-      UnnnicButton,
-      Tabs,
-      TabsList,
-      TabsTrigger,
-      TabsContent,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args">
-        <template #actions>
-          <UnnnicButton text="Button" type="secondary" />
-          <UnnnicButton text="Button" type="primary" />
-        </template>
-        <template #tabs>
-          <Tabs defaultValue="label1">
-            <TabsList>
-              <TabsTrigger value="label1">Label</TabsTrigger>
-              <TabsTrigger value="label2">Label</TabsTrigger>
-              <TabsTrigger value="label3">Label</TabsTrigger>
-            </TabsList>
-          </Tabs>
-        </template>
-      </PageHeader>
-    `,
-  }),
-};
-
-export const WithSelect = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Page header with a select dropdown on the right side.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
->
-  <template #actions>
-    <UnnnicSelectSmart />
-  </template>
-</UnnnicPageHeader>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { PageHeader, UnnnicSelectSmart },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args">
-        <template #actions>
-          <UnnnicSelectSmart />
-        </template>
-      </PageHeader>
-    `,
-  }),
-};
-
-export const WithTag = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Page header with a tag next to the title and action buttons.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
->
-  <template #tag>
-    <UnnnicTag text="Tag name" scheme="gray" />
-  </template>
-  <template #actions>
-    <UnnnicButton text="Button" type="secondary" />
-    <UnnnicButton text="Button" type="primary" />
-  </template>
-</UnnnicPageHeader>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { PageHeader, UnnnicButton, UnnnicTag },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args">
-        <template #tag>
-          <UnnnicTag text="Tag name" scheme="gray" />
-        </template>
-        <template #actions>
-          <UnnnicButton text="Button" type="secondary" />
-          <UnnnicButton text="Button" type="primary" />
-        </template>
-      </PageHeader>
-    `,
-  }),
-};
-
-export const WithMenuButton = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Page header with a menu button (three dots) on the right side.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  description="Description"
->
-  <template #actions>
-    <UnnnicButton type="tertiary" iconCenter="more_vert" />
-  </template>
-</UnnnicPageHeader>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { PageHeader, UnnnicButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <PageHeader v-bind="args">
-        <template #actions>
-          <UnnnicButton type="tertiary" iconCenter="more_vert" />
-        </template>
-      </PageHeader>
-    `,
-  }),
-};
-
-export const WithBackButton = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Page header with a back navigation button.',
-      },
-      source: {
-        code: `
-<UnnnicPageHeader 
-  title="Page Name"
-  :hasBackButton="true"
-/>
-        `,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { PageHeader },
-    setup() {
-      const handleBack = () => {
-        action('back')();
-      };
-
-      return {
-        args: {
-          ...args,
-          hasBackButton: true,
-          description: '',
-        },
-        handleBack,
-      };
-    },
-    template: `
-      <PageHeader v-bind="args" @back="handleBack" />
-    `,
-  }),
-};

package/src/stories/RadioGroup.stories.js

@@ -1,144 +0,0 @@
-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>
-    `,
-  }),
-};