@bigbot-community/bigbot-ui 1.0.1

package/src/components/atoms/BrBadge/BrBadge.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrBadge from './BrBadge.vue'
+
+describe('BrBadge', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(BrBadge, {
+      slots: {
+        default: 'Active',
+      },
+    })
+    expect(wrapper.text()).toBe('Active')
+  })
+
+  it('renders as span element', () => {
+    const wrapper = mount(BrBadge)
+    expect(wrapper.element.tagName).toBe('SPAN')
+  })
+
+  it('applies default variant class', () => {
+    const wrapper = mount(BrBadge)
+    expect(wrapper.classes()).toContain('br-badge--default')
+  })
+
+  it('applies correct variant class', () => {
+    const variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'] as const
+    variants.forEach((variant) => {
+      const wrapper = mount(BrBadge, {
+        props: { variant },
+      })
+      expect(wrapper.classes()).toContain(`br-badge--${variant}`)
+    })
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const wrapper = mount(BrBadge, {
+        props: { size },
+      })
+      expect(wrapper.classes()).toContain(`br-badge--${size}`)
+    })
+  })
+
+  it('applies rounded class when rounded prop is true', () => {
+    const wrapper = mount(BrBadge, {
+      props: { rounded: true },
+    })
+    expect(wrapper.classes()).toContain('br-badge--rounded')
+  })
+
+  it('does not apply rounded class by default', () => {
+    const wrapper = mount(BrBadge)
+    expect(wrapper.classes()).not.toContain('br-badge--rounded')
+  })
+
+  it('has base class', () => {
+    const wrapper = mount(BrBadge)
+    expect(wrapper.classes()).toContain('br-badge')
+  })
+})

package/src/components/atoms/BrBadge/BrBadge.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * BrBadge - Badge/Tag component for status indicators
+ *
+ * @example
+ * <BrBadge>Default</BrBadge>
+ * <BrBadge variant="success">Ativo</BrBadge>
+ * <BrBadge variant="danger" size="lg">Erro</BrBadge>
+ */
+
+import { computed } from 'vue'
+import type { BadgeProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  variant: 'default',
+  size: 'md',
+  rounded: false,
+})
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-badge',
+  `br-badge--${props.variant}`,
+  `br-badge--${props.size}`,
+  {
+    'br-badge--rounded': props.rounded,
+  },
+])
+</script>
+
+<template>
+  <span :class="classes">
+    <slot />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.br-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--br-space-1);
+  font-family: var(--br-font-primary);
+  font-weight: var(--br-font-medium);
+  line-height: 1;
+  white-space: nowrap;
+  transition: all var(--br-transition-fast);
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm {
+    padding: 2px 6px;
+    font-size: 10px;
+    border-radius: var(--br-radius-sm);
+  }
+
+  &--md {
+    padding: 4px 10px;
+    font-size: var(--br-text-xs);
+    border-radius: var(--br-radius-md);
+  }
+
+  &--lg {
+    padding: 6px 12px;
+    font-size: var(--br-text-sm);
+    border-radius: var(--br-radius-md);
+  }
+
+  // ---------------------------------------------------------------------------
+  // VARIANTS
+  // ---------------------------------------------------------------------------
+
+  &--default {
+    background: var(--br-light-200);
+    color: var(--br-dark-700);
+  }
+
+  &--primary {
+    background: var(--br-primary-100);
+    color: var(--br-primary-700);
+  }
+
+  &--secondary {
+    background: var(--br-secondary-100);
+    color: var(--br-secondary-900);
+  }
+
+  &--success {
+    background: var(--br-success-100);
+    color: var(--br-success-800);
+  }
+
+  &--danger {
+    background: var(--br-danger-100);
+    color: var(--br-danger-700);
+  }
+
+  &--warning {
+    background: var(--br-warning-100);
+    color: var(--br-warning-800);
+  }
+
+  &--info {
+    background: var(--br-info-100);
+    color: var(--br-info-800);
+  }
+
+  // ---------------------------------------------------------------------------
+  // MODIFIERS
+  // ---------------------------------------------------------------------------
+
+  &--rounded {
+    border-radius: var(--br-radius-full);
+  }
+}
+</style>

package/src/components/atoms/BrBadge/index.ts

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

package/src/components/atoms/BrBadge/types.ts

@@ -0,0 +1,22 @@
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
+export type BadgeSize = 'sm' | 'md' | 'lg'
+
+export interface BadgeProps {
+  /**
+   * Badge variant
+   * @default 'default'
+   */
+  variant?: BadgeVariant
+
+  /**
+   * Badge size
+   * @default 'md'
+   */
+  size?: BadgeSize
+
+  /**
+   * Fully rounded badge
+   * @default false
+   */
+  rounded?: boolean
+}

package/src/components/atoms/BrButton/BrButton.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrButton from './BrButton.vue'
+
+describe('BrButton', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(BrButton, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('applies correct variant class', () => {
+    const wrapper = mount(BrButton, {
+      props: { variant: 'secondary' },
+    })
+    expect(wrapper.classes()).toContain('br-button--secondary')
+  })
+
+  it('applies correct size class', () => {
+    const wrapper = mount(BrButton, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.classes()).toContain('br-button--lg')
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mount(BrButton)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mount(BrButton, {
+      props: { disabled: true },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeFalsy()
+  })
+
+  it('does not emit click when loading', async () => {
+    const wrapper = mount(BrButton, {
+      props: { loading: true },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeFalsy()
+  })
+
+  it('shows spinner when loading', () => {
+    const wrapper = mount(BrButton, {
+      props: { loading: true },
+    })
+    expect(wrapper.find('.br-button__loader').exists()).toBe(true)
+  })
+
+  it('applies block class when block prop is true', () => {
+    const wrapper = mount(BrButton, {
+      props: { block: true },
+    })
+    expect(wrapper.classes()).toContain('br-button--block')
+  })
+
+  it('has correct button type attribute', () => {
+    const wrapper = mount(BrButton, {
+      props: { type: 'submit' },
+    })
+    expect(wrapper.attributes('type')).toBe('submit')
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(BrButton, {
+      props: { disabled: true },
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/atoms/BrButton/BrButton.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+/**
+ * BrButton - Primary button component
+ *
+ * @example
+ * <BrButton>Click me</BrButton>
+ * <BrButton variant="secondary" size="lg">Large Button</BrButton>
+ * <BrButton variant="outline" loading>Loading...</BrButton>
+ */
+
+import { computed } from 'vue'
+import type { ButtonProps, ButtonVariant, ButtonSize } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'primary',
+  size: 'md',
+  type: 'button',
+  disabled: false,
+  loading: false,
+  block: false,
+})
+
+// ---------------------------------------------------------------------------
+// EMITS
+// ---------------------------------------------------------------------------
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-button',
+  `br-button--${props.variant}`,
+  `br-button--${props.size}`,
+  {
+    'br-button--block': props.block,
+    'br-button--loading': props.loading,
+    'br-button--disabled': props.disabled || props.loading,
+  },
+])
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function handleClick(event: MouseEvent) {
+  if (!isDisabled.value) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    :class="classes"
+    :type="type"
+    :disabled="isDisabled"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="br-button__loader">
+      <svg
+        class="br-button__spinner"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-dasharray="31.416"
+          stroke-dashoffset="10"
+        />
+      </svg>
+    </span>
+    <span class="br-button__content" :class="{ 'br-button__content--hidden': loading }">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.br-button {
+  // Base styles
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--br-space-2);
+  font-family: var(--br-font-primary);
+  font-weight: var(--br-font-semibold);
+  line-height: 1;
+  border: 2px solid transparent;
+  border-radius: var(--br-radius-md);
+  cursor: pointer;
+  transition: all var(--br-transition-fast);
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--br-primary-600);
+    outline-offset: 2px;
+  }
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm {
+    height: 32px;
+    padding: 0 var(--br-space-3);
+    font-size: var(--br-text-xs);
+  }
+
+  &--md {
+    height: 40px;
+    padding: 0 var(--br-space-5);
+    font-size: var(--br-text-sm);
+  }
+
+  &--lg {
+    height: 48px;
+    padding: 0 var(--br-space-6);
+    font-size: var(--br-text-base);
+  }
+
+  // ---------------------------------------------------------------------------
+  // VARIANTS
+  // ---------------------------------------------------------------------------
+
+  &--primary {
+    background-color: var(--br-primary-600);
+    color: var(--br-light-0);
+    border-color: var(--br-primary-600);
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-primary-700);
+      border-color: var(--br-primary-700);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-primary-800);
+      border-color: var(--br-primary-800);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--br-secondary-600);
+    color: var(--br-dark-0);
+    border-color: var(--br-secondary-600);
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-secondary-700);
+      border-color: var(--br-secondary-700);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-secondary-800);
+      border-color: var(--br-secondary-800);
+    }
+  }
+
+  &--outline {
+    background-color: transparent;
+    color: var(--br-primary-600);
+    border-color: var(--br-primary-600);
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-primary-100);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-primary-200);
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    color: var(--br-primary-600);
+    border-color: transparent;
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-primary-100);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-primary-200);
+    }
+  }
+
+  &--danger {
+    background-color: var(--br-danger-600);
+    color: var(--br-light-0);
+    border-color: var(--br-danger-600);
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-danger-700);
+      border-color: var(--br-danger-700);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-danger-800);
+      border-color: var(--br-danger-800);
+    }
+  }
+
+  &--success {
+    background-color: var(--br-success-600);
+    color: var(--br-light-0);
+    border-color: var(--br-success-600);
+
+    &:hover:not(:disabled) {
+      background-color: var(--br-success-700);
+      border-color: var(--br-success-700);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--br-success-800);
+      border-color: var(--br-success-800);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // STATES
+  // ---------------------------------------------------------------------------
+
+  &--block {
+    width: 100%;
+  }
+
+  &--disabled,
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &--loading {
+    cursor: wait;
+  }
+
+  // ---------------------------------------------------------------------------
+  // INTERNAL ELEMENTS
+  // ---------------------------------------------------------------------------
+
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--br-space-2);
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
+  &__loader {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__spinner {
+    width: 1.25em;
+    height: 1.25em;
+    animation: br-spin 1s linear infinite;
+  }
+}
+
+@keyframes br-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/atoms/BrButton/index.ts

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

package/src/components/atoms/BrButton/types.ts

@@ -0,0 +1,44 @@
+// =============================================================================
+// BrButton - Type Definitions
+// =============================================================================
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+export interface ButtonProps {
+  /**
+   * Button variant style
+   * @default 'primary'
+   */
+  variant?: ButtonVariant
+
+  /**
+   * Button size
+   * @default 'md'
+   */
+  size?: ButtonSize
+
+  /**
+   * Disable the button
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Show loading state
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * Full width button
+   * @default false
+   */
+  block?: boolean
+
+  /**
+   * Button type attribute
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset'
+}