@weni/unnnic-system 3.10.0 → 3.11.1-alpha.0

package/src/stories/Input.stories.js

@@ -7,14 +7,25 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: { control: { type: 'select' }, options: ['md', 'sm'] },
-    type: { control: { type: 'select' }, options: ['normal', 'error'] },
+    size: {
+      control: { type: 'select' },
+      options: ['md', 'sm'],
+      defaultValue: {
+        summary: 'md',
+      },
+    },
+    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' } },
-    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
   render: (args) => ({
     components: {
@@ -35,106 +46,72 @@ export default {
       },
     },
     template: `
-      <unnnic-form-element label="Label" message="Helper text">
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
-      </unnnic-form-element>
+      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
     `,
   }),
 };
 
-const TemplateError = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicFormElement,
-    unnnicInput,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  template: `
-    <unnnic-form-element label="Label" error="Error text">
-      <unnnic-input v-model="value" v-bind="args"/>
-    </unnnic-form-element>
-  `,
-});
-
-const TemplateDisabled = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicFormElement,
-    unnnicInput,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  template: `
-    <unnnic-form-element label="Label" message="Helper text" disabled>
-      <unnnic-input v-model="value" v-bind="args"/>
-    </unnnic-form-element>
-  `,
-});
-
 export const Normal = {
   args: {
-    type: 'normal',
+    label: 'Label',
     placeholder: 'Placeholder',
   },
 };
 
 export const NormalSm = {
   args: {
+    label: 'Label',
     size: 'sm',
-    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const Error = TemplateError.bind({});
-Error.args = {
-  type: 'error',
-  placeholder: 'Placeholder',
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    errors: 'Error text',
+  },
 };
 
-export const ErrorSm = TemplateError.bind({});
-ErrorSm.args = {
-  size: 'sm',
-  type: 'error',
-  placeholder: 'Placeholder',
+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 Disabled = TemplateDisabled.bind({});
-Disabled.args = {
-  disabled: true,
-  placeholder: 'Placeholder',
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    size: 'sm',
+    disabled: true,
+    placeholder: 'Placeholder',
+  },
 };
 
-export const DisabledSm = TemplateDisabled.bind({});
-DisabledSm.args = {
-  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,
@@ -143,6 +120,7 @@ export const Password = {
 
 export const IconLeftAndRight = {
   args: {
+    label: 'Label',
     placeholder: 'Text',
     iconLeft: 'email',
     iconRight: 'search',
@@ -157,3 +135,20 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
+
+export const LimitMaxLength = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    placeholder: 'Text',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/Label.stories.js

@@ -13,3 +13,10 @@ export const Default = {
     label: 'Label',
   },
 };
+
+export const WithTooltip = {
+  args: {
+    label: 'Label',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/ModalDialog.mdx

@@ -6,6 +6,9 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
+> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
+instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
+
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Example/ModalDialog',
+  title: 'Feedback/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/PageHeader.stories.js

@@ -0,0 +1,330 @@
+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/Radio.stories.js

@@ -21,9 +21,28 @@ export default {
     disabled: { control: { type: 'boolean' } },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
   },
+  render: (args) => ({
+    components: {
+      UnnnicRadio,
+    },
+    setup() {
+      const updateModelValue = (value) => {
+        action('update:modelValue')(value);
+        args.modelValue = value;
+      };
+      return { args, updateModelValue };
+    },
+    template: `
+      <div>
+        <UnnnicRadio v-bind="args" @update:model-value="updateModelValue" :value="args.value">
+          Option
+        </UnnnicRadio>
+      </div>
+    `,
+  }),
 };
 
-export const Default = {
+export const Multiple = {
   render: (args) => ({
     components: {
       UnnnicRadio,
@@ -75,3 +94,11 @@ export const DisableSelected = {
     disabled: true,
   },
 };
+
+export const Helper = {
+  args: {
+    modelValue: 'option 1',
+    value: 'option 1',
+    helper: 'Helper text',
+  },
+};