@weni/unnnic-system 3.9.3 → 3.9.4-alpha.2

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',
+  },
+};

package/src/stories/RadioGroup.stories.js

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

package/src/stories/Select.stories.js

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

package/src/stories/Switch.stories.js

@@ -4,9 +4,11 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    size: { control: { type: 'select', options: ['small', 'medium'] } },
-    textLeft: { control: { type: 'text' } },
-    textRight: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    option: { control: { type: 'text' } },
+    helper: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -32,8 +34,11 @@ export default {
 
 export const Default = {
   args: {
-    size: 'medium',
-    textRight: 'Default',
+    label: 'Default',
+    labelTooltip: 'Tooltip',
+    labelUseHtmlTooltip: true,
+    option: 'Option',
+    helper: 'Helper text',
     disabled: false,
   },
 };