@weni/unnnic-system 3.8.2-alpha.2 → 3.9.1-alpha.0

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-tabs-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-6;
+  box-shadow: inset 0 (-$unnnic-border-width-thinner) 0 0
+    $unnnic-color-border-base;
+}
+</style>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const classes = computed(() => {
+  const defaultClasses = ['unnnic-tabs-trigger'];
+
+  if (props.disabled) {
+    defaultClasses.push('unnnic-tabs-trigger--disabled');
+  }
+
+  return defaultClasses;
+});
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        ...classes,
+        'transition-all disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="unnnic-tabs-trigger__content truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-trigger {
+  background-color: transparent;
+  border: none;
+
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-action;
+  color: $unnnic-color-fg-base;
+
+  cursor: pointer;
+
+  &[data-state='active'] {
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+    box-shadow: inset 0 (-$unnnic-border-width-thin) 0 0
+      $unnnic-color-border-active;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+  }
+
+  &:hover {
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

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

@@ -0,0 +1,125 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import UnnnicToolTip from '@/components/ToolTip/ToolTip.vue';
+import UnnnicIcon from '@/components/Icon.vue';
+import '@/assets/scss/tailwind.scss';
+
+export default {
+  title: 'Misc/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: { Tabs, TabsList, TabsTrigger, TabsContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+  argTypes: {
+    defaultValue: {
+      control: { type: 'select' },
+      options: ['account', 'password', 'settings'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const Disabled = {
+  render: (args) => ({
+    components: { Tabs, TabsList, TabsTrigger, TabsContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password" disabled>Password</TabsTrigger>
+          <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const WithTooltip = {
+  render: (args) => ({
+    components: {
+      Tabs,
+      TabsList,
+      TabsTrigger,
+      TabsContent,
+      UnnnicToolTip,
+      UnnnicIcon,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">
+              Account
+              <UnnnicToolTip enabled text="Manage your account settings" side="bottom" class="!inline-flex items-center">
+                <UnnnicIcon icon="help" size="sm" scheme="fg-base"/>
+              </UnnnicToolTip>
+          </TabsTrigger>
+          <TabsTrigger value="password">
+            <span>Password</span>
+          </TabsTrigger>
+          <TabsTrigger value="settings">
+            <span>Settings</span>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+};

package/src/stories/TextArea.stories.js

@@ -37,6 +37,7 @@ export const Default = {
     errors: [],
     size: 'md',
     message: 'Helper text',
+    tooltip: 'Tooltip',
   },
 };