@weni/unnnic-system 3.9.1-alpha.1 → 3.9.1-alpha.2

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

@@ -1,158 +0,0 @@
-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: '',
-  },
-};