@bigbot-community/bigbot-ui 1.0.1

package/src/components/molecules/BrStepper/BrStepper.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StepperProps } from './types'
+
+const props = withDefaults(defineProps<StepperProps>(), {
+  orientation: 'horizontal',
+  variant: 'default',
+  clickable: false,
+  showNumbers: true,
+  linear: true,
+  alternativeLabel: false,
+})
+
+const model = defineModel<number>({ default: 0 })
+
+const emit = defineEmits<{
+  (e: 'step-click', step: number): void
+}>()
+
+const classes = computed(() => [
+  'br-stepper',
+  `br-stepper--${props.orientation}`,
+  `br-stepper--${props.variant}`,
+  {
+    'br-stepper--clickable': props.clickable,
+    'br-stepper--alternative-label': props.alternativeLabel,
+  },
+])
+
+function getStepStatus(index: number) {
+  if (index < model.value) return 'completed'
+  if (index === model.value) return 'active'
+  return 'pending'
+}
+
+function canNavigateTo(index: number) {
+  if (!props.clickable) return false
+  if (props.linear && index > model.value) return false
+  return true
+}
+
+function handleStepClick(index: number) {
+  if (!canNavigateTo(index)) return
+  if (props.steps[index].error) return
+
+  model.value = index
+  emit('step-click', index)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div
+      v-for="(step, index) in steps"
+      :key="index"
+      class="br-stepper__step"
+      :class="{
+        'br-stepper__step--completed': getStepStatus(index) === 'completed',
+        'br-stepper__step--active': getStepStatus(index) === 'active',
+        'br-stepper__step--pending': getStepStatus(index) === 'pending',
+        'br-stepper__step--error': step.error,
+        'br-stepper__step--clickable': canNavigateTo(index),
+      }"
+      :role="clickable ? 'button' : undefined"
+      :tabindex="canNavigateTo(index) ? 0 : undefined"
+      @click="handleStepClick(index)"
+      @keydown.enter="handleStepClick(index)"
+    >
+      <div class="br-stepper__indicator">
+        <span class="br-stepper__icon">
+          <svg v-if="getStepStatus(index) === 'completed' && !step.error" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+          </svg>
+          <svg v-else-if="step.error" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+          <template v-else-if="showNumbers">
+            {{ index + 1 }}
+          </template>
+        </span>
+        <div v-if="index < steps.length - 1" class="br-stepper__connector" />
+      </div>
+
+      <div class="br-stepper__content">
+        <span class="br-stepper__title">
+          {{ step.title }}
+          <span v-if="step.optional" class="br-stepper__optional">(Opcional)</span>
+        </span>
+        <span v-if="step.description || step.errorMessage" class="br-stepper__description">
+          {{ step.error ? step.errorMessage : step.description }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-stepper {
+  display: flex;
+
+  &--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .br-stepper__step {
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .br-stepper__indicator {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .br-stepper__connector {
+      flex: 1;
+      height: 2px;
+      margin: 0 var(--br-space-2);
+    }
+
+    .br-stepper__content {
+      text-align: center;
+      margin-top: var(--br-space-2);
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    .br-stepper__step {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .br-stepper__indicator {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .br-stepper__connector {
+      width: 2px;
+      min-height: 40px;
+      margin: var(--br-space-2) 0;
+    }
+
+    .br-stepper__content {
+      margin-left: var(--br-space-3);
+      padding-bottom: var(--br-space-4);
+    }
+  }
+
+  &--alternative-label.br-stepper--horizontal {
+    .br-stepper__content {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: max-content;
+      max-width: 150px;
+    }
+  }
+
+  &__step {
+    display: flex;
+    position: relative;
+  }
+
+  &__indicator {
+    position: relative;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--br-light-300);
+    color: var(--br-dark-500);
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    flex-shrink: 0;
+    transition: all var(--br-transition-fast);
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &__connector {
+    background: var(--br-light-300);
+    transition: background var(--br-transition-fast);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--br-space-1);
+  }
+
+  &__title {
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-700);
+  }
+
+  &__optional {
+    font-weight: var(--br-font-normal);
+    color: var(--br-dark-400);
+  }
+
+  &__description {
+    font-size: var(--br-text-xs);
+    color: var(--br-dark-500);
+  }
+
+  // States
+  &__step--completed {
+    .br-stepper__icon {
+      background: var(--br-primary-500);
+      color: var(--br-white);
+    }
+
+    .br-stepper__connector {
+      background: var(--br-primary-500);
+    }
+  }
+
+  &__step--active {
+    .br-stepper__icon {
+      background: var(--br-primary-500);
+      color: var(--br-white);
+      box-shadow: 0 0 0 4px var(--br-primary-100);
+    }
+
+    .br-stepper__title {
+      color: var(--br-primary-600);
+    }
+  }
+
+  &__step--error {
+    .br-stepper__icon {
+      background: var(--br-danger-500);
+      color: var(--br-white);
+    }
+
+    .br-stepper__title {
+      color: var(--br-danger-600);
+    }
+
+    .br-stepper__description {
+      color: var(--br-danger-500);
+    }
+  }
+
+  &__step--clickable {
+    cursor: pointer;
+
+    &:hover .br-stepper__icon {
+      transform: scale(1.1);
+    }
+  }
+
+  // Variants
+  &--outlined {
+    .br-stepper__icon {
+      background: transparent;
+      border: 2px solid var(--br-light-400);
+    }
+
+    .br-stepper__step--completed .br-stepper__icon,
+    .br-stepper__step--active .br-stepper__icon {
+      border-color: var(--br-primary-500);
+      background: transparent;
+      color: var(--br-primary-500);
+    }
+
+    .br-stepper__step--error .br-stepper__icon {
+      border-color: var(--br-danger-500);
+      background: transparent;
+      color: var(--br-danger-500);
+    }
+  }
+
+  &--simple {
+    .br-stepper__icon {
+      width: 12px;
+      height: 12px;
+      font-size: 0;
+    }
+
+    .br-stepper__step--completed .br-stepper__icon,
+    .br-stepper__step--active .br-stepper__icon {
+      background: var(--br-primary-500);
+    }
+  }
+}
+</style>

package/src/components/molecules/BrStepper/index.ts

@@ -0,0 +1,2 @@
+export { default as BrStepper } from './BrStepper.vue'
+export * from './types'

package/src/components/molecules/BrStepper/types.ts

@@ -0,0 +1,77 @@
+export interface StepperStep {
+  /**
+   * Step title
+   */
+  title: string
+
+  /**
+   * Step description
+   */
+  description?: string
+
+  /**
+   * Step icon
+   */
+  icon?: string
+
+  /**
+   * Step is optional
+   */
+  optional?: boolean
+
+  /**
+   * Step has error
+   */
+  error?: boolean
+
+  /**
+   * Custom error message
+   */
+  errorMessage?: string
+}
+
+export type StepperOrientation = 'horizontal' | 'vertical'
+export type StepperVariant = 'default' | 'outlined' | 'simple'
+
+export interface StepperProps {
+  /**
+   * Stepper steps
+   */
+  steps: StepperStep[]
+
+  /**
+   * Orientation
+   * @default 'horizontal'
+   */
+  orientation?: StepperOrientation
+
+  /**
+   * Variant style
+   * @default 'default'
+   */
+  variant?: StepperVariant
+
+  /**
+   * Allow clicking on steps to navigate
+   * @default false
+   */
+  clickable?: boolean
+
+  /**
+   * Show step numbers
+   * @default true
+   */
+  showNumbers?: boolean
+
+  /**
+   * Linear progression (must complete in order)
+   * @default true
+   */
+  linear?: boolean
+
+  /**
+   * Alternative label position (below icon for horizontal)
+   * @default false
+   */
+  alternativeLabel?: boolean
+}

package/src/components/molecules/BrTabs/BrTab.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { TabProps } from './types'
+
+const props = withDefaults(defineProps<TabProps>(), {
+  disabled: false,
+  closable: false,
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const tabs = inject<{
+  activeTab: { value: string | number }
+  selectTab: (id: string | number) => void
+}>('tabs')
+
+const isActive = computed(() => tabs?.activeTab.value === props.id)
+
+const classes = computed(() => [
+  'br-tabs__tab',
+  {
+    'br-tabs__tab--active': isActive.value,
+    'br-tabs__tab--disabled': props.disabled,
+  },
+])
+
+function handleClick() {
+  if (props.disabled) return
+  tabs?.selectTab(props.id)
+}
+
+function handleClose(event: Event) {
+  event.stopPropagation()
+  emit('close')
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    role="tab"
+    :class="classes"
+    :aria-selected="isActive"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <span v-if="icon" class="br-tabs__tab-icon">
+      <slot name="icon">{{ icon }}</slot>
+    </span>
+    <span class="br-tabs__tab-label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span v-if="badge !== undefined" class="br-tabs__tab-badge">
+      {{ badge }}
+    </span>
+    <button
+      v-if="closable"
+      type="button"
+      class="br-tabs__tab-close"
+      @click="handleClose"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+      </svg>
+    </button>
+  </button>
+</template>

package/src/components/molecules/BrTabs/BrTabPanel.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue'
+import type { TabPanelProps } from './types'
+
+const props = withDefaults(defineProps<TabPanelProps>(), {
+  lazy: true,
+})
+
+const tabs = inject<{
+  activeTab: { value: string | number }
+  lazy: { value: boolean }
+}>('tabs')
+
+const hasBeenActive = ref(false)
+const isActive = computed(() => tabs?.activeTab.value === props.tabId)
+const shouldRender = computed(() => {
+  const isLazy = props.lazy ?? tabs?.lazy.value ?? true
+  if (!isLazy) return true
+  return isActive.value || hasBeenActive.value
+})
+
+watch(isActive, (active) => {
+  if (active) hasBeenActive.value = true
+})
+</script>
+
+<template>
+  <div
+    v-if="shouldRender"
+    v-show="isActive"
+    role="tabpanel"
+    class="br-tabs__panel"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/molecules/BrTabs/BrTabs.test.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrTabs from './BrTabs.vue'
+
+describe('BrTabs', () => {
+  const mockItems = [
+    { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+    { id: 'tab2', label: 'Tab 2', content: 'Content 2' },
+    { id: 'tab3', label: 'Tab 3', content: 'Content 3', disabled: true },
+  ]
+
+  it('renders tabs from items prop', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    const tabs = wrapper.findAll('.br-tabs__tab')
+    expect(tabs).toHaveLength(3)
+  })
+
+  it('renders tab labels', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    expect(wrapper.text()).toContain('Tab 1')
+    expect(wrapper.text()).toContain('Tab 2')
+    expect(wrapper.text()).toContain('Tab 3')
+  })
+
+  it('applies active class to selected tab', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    const activeTab = wrapper.find('.br-tabs__tab--active')
+    expect(activeTab.text()).toContain('Tab 1')
+  })
+
+  it('changes active tab on click', async () => {
+    let modelValue = 'tab1'
+    const wrapper = mount(BrTabs, {
+      props: {
+        items: mockItems,
+        modelValue,
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as string
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    const tabs = wrapper.findAll('.br-tabs__tab')
+    await tabs[1].trigger('click')
+    expect(wrapper.props('modelValue')).toBe('tab2')
+  })
+
+  it('does not activate disabled tab', async () => {
+    let modelValue = 'tab1'
+    const wrapper = mount(BrTabs, {
+      props: {
+        items: mockItems,
+        modelValue,
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as string
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    const tabs = wrapper.findAll('.br-tabs__tab')
+    await tabs[2].trigger('click')
+    expect(wrapper.props('modelValue')).toBe('tab1')
+  })
+
+  it('applies disabled class to disabled tabs', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    const disabledTab = wrapper.find('.br-tabs__tab--disabled')
+    expect(disabledTab.text()).toContain('Tab 3')
+  })
+
+  it('applies correct variant class', () => {
+    const variants = ['default', 'pills', 'underline', 'enclosed'] as const
+    variants.forEach((variant) => {
+      const wrapper = mount(BrTabs, {
+        props: { items: mockItems, modelValue: 'tab1', variant },
+      })
+      expect(wrapper.classes()).toContain(`br-tabs--${variant}`)
+    })
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const wrapper = mount(BrTabs, {
+        props: { items: mockItems, modelValue: 'tab1', size },
+      })
+      expect(wrapper.classes()).toContain(`br-tabs--${size}`)
+    })
+  })
+
+  it('applies vertical class when vertical prop is true', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1', vertical: true },
+    })
+    expect(wrapper.classes()).toContain('br-tabs--vertical')
+  })
+
+  it('applies centered class when centered prop is true', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1', centered: true },
+    })
+    expect(wrapper.classes()).toContain('br-tabs--centered')
+  })
+
+  it('applies grow class when grow prop is true', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1', grow: true },
+    })
+    expect(wrapper.classes()).toContain('br-tabs--grow')
+  })
+
+  it('renders badges when provided', () => {
+    const itemsWithBadge = [
+      { id: 'tab1', label: 'Tab 1', badge: 5 },
+      { id: 'tab2', label: 'Tab 2' },
+    ]
+    const wrapper = mount(BrTabs, {
+      props: { items: itemsWithBadge, modelValue: 'tab1' },
+    })
+    expect(wrapper.find('.br-tabs__tab-badge').text()).toBe('5')
+  })
+
+  it('shows close button when closable is true', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1', closable: true },
+    })
+    expect(wrapper.find('.br-tabs__tab-close').exists()).toBe(true)
+  })
+
+  it('emits tab-close when close button clicked', async () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1', closable: true },
+    })
+    await wrapper.find('.br-tabs__tab-close').trigger('click')
+    expect(wrapper.emitted('tab-close')).toBeTruthy()
+    expect(wrapper.emitted('tab-close')![0]).toEqual(['tab1'])
+  })
+
+  it('has correct accessibility attributes', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    const tablist = wrapper.find('[role="tablist"]')
+    expect(tablist.exists()).toBe(true)
+
+    const tabs = wrapper.findAll('[role="tab"]')
+    expect(tabs).toHaveLength(3)
+
+    const selectedTab = wrapper.find('[aria-selected="true"]')
+    expect(selectedTab.text()).toContain('Tab 1')
+  })
+
+  it('renders panel content for active tab', () => {
+    const wrapper = mount(BrTabs, {
+      props: { items: mockItems, modelValue: 'tab1' },
+    })
+    const visiblePanel = wrapper.find('.br-tabs__panel[style=""]') || wrapper.find('.br-tabs__panel:not([style*="display: none"])')
+    expect(wrapper.text()).toContain('Content 1')
+  })
+})