@bigbot-community/bigbot-ui 1.0.1

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

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrInput from './BrInput.vue'
+
+describe('BrInput', () => {
+  it('renders input element', () => {
+    const wrapper = mount(BrInput)
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('binds v-model correctly', async () => {
+    let modelValue = 'initial'
+    const wrapper = mount(BrInput, {
+      props: {
+        modelValue,
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as string
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('initial')
+
+    await input.setValue('updated')
+    expect(wrapper.props('modelValue')).toBe('updated')
+  })
+
+  it('applies correct size class', () => {
+    const wrapper = mount(BrInput, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.classes()).toContain('br-input--lg')
+  })
+
+  it('applies error class when error prop is true', () => {
+    const wrapper = mount(BrInput, {
+      props: { error: true },
+    })
+    expect(wrapper.classes()).toContain('br-input--error')
+  })
+
+  it('sets placeholder attribute', () => {
+    const wrapper = mount(BrInput, {
+      props: { placeholder: 'Enter text' },
+    })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
+  })
+
+  it('sets type attribute', () => {
+    const wrapper = mount(BrInput, {
+      props: { type: 'password' },
+    })
+    expect(wrapper.find('input').attributes('type')).toBe('password')
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(BrInput, {
+      props: { disabled: true },
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('is readonly when readonly prop is true', () => {
+    const wrapper = mount(BrInput, {
+      props: { readonly: true },
+    })
+    expect(wrapper.find('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('emits focus event', async () => {
+    const wrapper = mount(BrInput)
+    await wrapper.find('input').trigger('focus')
+    expect(wrapper.emitted('focus')).toBeTruthy()
+  })
+
+  it('emits blur event', async () => {
+    const wrapper = mount(BrInput)
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
+
+  it('emits enter event on Enter key', async () => {
+    const wrapper = mount(BrInput)
+    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('enter')).toBeTruthy()
+  })
+
+  it('applies block class by default', () => {
+    const wrapper = mount(BrInput)
+    expect(wrapper.classes()).toContain('br-input--block')
+  })
+
+  it('exposes focus method', () => {
+    const wrapper = mount(BrInput)
+    expect(typeof wrapper.vm.focus).toBe('function')
+  })
+})

package/src/components/atoms/BrInput/BrInput.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+/**
+ * BrInput - Text input component
+ *
+ * @example
+ * <BrInput v-model="value" placeholder="Digite aqui" />
+ * <BrInput type="password" v-model="password" />
+ * <BrInput type="number" :min="0" :max="100" />
+ */
+
+import { computed, ref, watch } from 'vue'
+import type { InputProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  error: false,
+  size: 'md',
+  block: true,
+})
+
+// ---------------------------------------------------------------------------
+// MODEL
+// ---------------------------------------------------------------------------
+
+const model = defineModel<string | number>()
+
+// ---------------------------------------------------------------------------
+// EMITS
+// ---------------------------------------------------------------------------
+
+const emit = defineEmits<{
+  (e: 'focus', value: string | number | undefined): void
+  (e: 'blur', value: string | number | undefined): void
+  (e: 'enter', value: string | number | undefined): void
+  (e: 'keydown', event: KeyboardEvent): void
+}>()
+
+// ---------------------------------------------------------------------------
+// REFS
+// ---------------------------------------------------------------------------
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const isFocused = ref(false)
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-input',
+  `br-input--${props.size}`,
+  {
+    'br-input--block': props.block,
+    'br-input--error': props.error,
+    'br-input--disabled': props.disabled,
+    'br-input--focused': isFocused.value,
+  },
+])
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = props.type === 'number' ? Number(target.value) : target.value
+
+  if (props.type === 'number' && props.min !== undefined && Number(value) < props.min) {
+    model.value = props.min
+    return
+  }
+
+  if (props.type === 'number' && props.max !== undefined && Number(value) > props.max) {
+    model.value = props.max
+    return
+  }
+
+  model.value = value
+}
+
+function handleFocus() {
+  isFocused.value = true
+  emit('focus', model.value)
+}
+
+function handleBlur() {
+  isFocused.value = false
+  emit('blur', model.value)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  emit('keydown', event)
+  if (event.key === 'Enter') {
+    emit('enter', model.value)
+  }
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+function blur() {
+  inputRef.value?.blur()
+}
+
+// ---------------------------------------------------------------------------
+// EXPOSE
+// ---------------------------------------------------------------------------
+
+defineExpose({ focus, blur, inputRef })
+</script>
+
+<template>
+  <input
+    ref="inputRef"
+    :class="classes"
+    :type="type"
+    :value="model"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :min="min"
+    :max="max"
+    :maxlength="maxLength"
+    :autocomplete="autocomplete"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown="handleKeydown"
+  />
+</template>
+
+<style lang="scss" scoped>
+.br-input {
+  font-family: var(--br-font-primary);
+  border: 1px solid var(--br-light-300);
+  border-radius: var(--br-radius-sm);
+  background: var(--br-light-0);
+  color: var(--br-dark-700);
+  transition: all var(--br-transition-fast);
+
+  &::placeholder {
+    color: var(--br-dark-1100);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--br-primary-600);
+    box-shadow: 0 0 0 3px rgba(109, 54, 251, 0.1);
+  }
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm {
+    height: 36px;
+    padding: 0 var(--br-space-3);
+    font-size: var(--br-text-xs);
+  }
+
+  &--md {
+    height: 44px;
+    padding: 0 var(--br-space-4);
+    font-size: var(--br-text-sm);
+  }
+
+  &--lg {
+    height: 56px;
+    padding: 0 var(--br-space-4);
+    font-size: var(--br-text-base);
+  }
+
+  // ---------------------------------------------------------------------------
+  // STATES
+  // ---------------------------------------------------------------------------
+
+  &--block {
+    width: 100%;
+  }
+
+  &--error {
+    border-color: var(--br-danger-600);
+
+    &:focus {
+      border-color: var(--br-danger-600);
+      box-shadow: 0 0 0 3px rgba(255, 46, 46, 0.1);
+    }
+  }
+
+  &--disabled {
+    background: var(--br-light-200);
+    color: var(--br-dark-1100);
+    cursor: not-allowed;
+  }
+}
+
+// Remove number input spinners
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>

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

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

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

@@ -0,0 +1,65 @@
+export type InputSize = 'sm' | 'md' | 'lg'
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time'
+
+export interface InputProps {
+  /**
+   * Input type
+   * @default 'text'
+   */
+  type?: InputType
+
+  /**
+   * Placeholder text
+   */
+  placeholder?: string
+
+  /**
+   * Disable the input
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Readonly state
+   * @default false
+   */
+  readonly?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Input size
+   * @default 'md'
+   */
+  size?: InputSize
+
+  /**
+   * Full width input
+   * @default true
+   */
+  block?: boolean
+
+  /**
+   * Minimum value (for number type)
+   */
+  min?: number
+
+  /**
+   * Maximum value (for number type)
+   */
+  max?: number
+
+  /**
+   * Maximum length
+   */
+  maxLength?: number
+
+  /**
+   * Autocomplete attribute
+   */
+  autocomplete?: string
+}

package/src/components/atoms/BrProgressbar/BrProgressbar.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ProgressbarProps } from './types'
+
+const props = withDefaults(defineProps<ProgressbarProps>(), {
+  value: 0,
+  max: 100,
+  size: 'md',
+  variant: 'primary',
+  showLabel: false,
+  labelPosition: 'right',
+  striped: false,
+  animated: false,
+  indeterminate: false,
+  rounded: true,
+})
+
+const percentage = computed(() => {
+  if (props.indeterminate) return 0
+  return Math.min(100, Math.max(0, (props.value / props.max) * 100))
+})
+
+const classes = computed(() => [
+  'br-progressbar',
+  `br-progressbar--${props.size}`,
+  `br-progressbar--${props.variant}`,
+  {
+    'br-progressbar--striped': props.striped,
+    'br-progressbar--animated': props.animated,
+    'br-progressbar--indeterminate': props.indeterminate,
+    'br-progressbar--rounded': props.rounded,
+    [`br-progressbar--label-${props.labelPosition}`]: props.showLabel,
+  },
+])
+
+const barStyle = computed(() => ({
+  width: props.indeterminate ? '100%' : `${percentage.value}%`,
+}))
+</script>
+
+<template>
+  <div :class="classes">
+    <span v-if="showLabel && labelPosition === 'top'" class="br-progressbar__label">
+      {{ Math.round(percentage) }}%
+    </span>
+    <div class="br-progressbar__track">
+      <div class="br-progressbar__bar" :style="barStyle">
+        <span v-if="showLabel && labelPosition === 'inside'" class="br-progressbar__label">
+          {{ Math.round(percentage) }}%
+        </span>
+      </div>
+    </div>
+    <span v-if="showLabel && labelPosition === 'right'" class="br-progressbar__label">
+      {{ Math.round(percentage) }}%
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-progressbar {
+  display: flex;
+  align-items: center;
+  gap: var(--br-space-2);
+  width: 100%;
+
+  &--label-top {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__track {
+    flex: 1;
+    background: var(--br-light-300);
+    overflow: hidden;
+  }
+
+  &__bar {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width var(--br-transition-normal);
+  }
+
+  &__label {
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-600);
+    white-space: nowrap;
+  }
+
+  // Sizes
+  &--xs {
+    .br-progressbar__track {
+      height: 4px;
+    }
+  }
+
+  &--sm {
+    .br-progressbar__track {
+      height: 8px;
+    }
+  }
+
+  &--md {
+    .br-progressbar__track {
+      height: 12px;
+    }
+  }
+
+  &--lg {
+    .br-progressbar__track {
+      height: 20px;
+    }
+    .br-progressbar__bar {
+      font-size: var(--br-text-xs);
+    }
+  }
+
+  // Rounded
+  &--rounded {
+    .br-progressbar__track {
+      border-radius: var(--br-radius-full);
+    }
+    .br-progressbar__bar {
+      border-radius: var(--br-radius-full);
+    }
+  }
+
+  // Variants
+  &--primary .br-progressbar__bar {
+    background: var(--br-primary-500);
+  }
+
+  &--success .br-progressbar__bar {
+    background: var(--br-success-500);
+  }
+
+  &--warning .br-progressbar__bar {
+    background: var(--br-warning-500);
+  }
+
+  &--danger .br-progressbar__bar {
+    background: var(--br-danger-500);
+  }
+
+  &--info .br-progressbar__bar {
+    background: var(--br-info-500);
+  }
+
+  // Inside label
+  &--label-inside {
+    .br-progressbar__label {
+      color: var(--br-white);
+      font-size: var(--br-text-xs);
+      padding: 0 var(--br-space-2);
+    }
+  }
+
+  // Striped
+  &--striped .br-progressbar__bar {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1rem 1rem;
+  }
+
+  // Animated
+  &--animated .br-progressbar__bar {
+    animation: progress-bar-stripes 1s linear infinite;
+  }
+
+  // Indeterminate
+  &--indeterminate .br-progressbar__bar {
+    width: 30% !important;
+    animation: progress-bar-indeterminate 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,64 @@
+export type ProgressbarSize = 'xs' | 'sm' | 'md' | 'lg'
+export type ProgressbarVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+export interface ProgressbarProps {
+  /**
+   * Progress value (0-100)
+   * @default 0
+   */
+  value?: number
+
+  /**
+   * Maximum value
+   * @default 100
+   */
+  max?: number
+
+  /**
+   * Progress bar size
+   * @default 'md'
+   */
+  size?: ProgressbarSize
+
+  /**
+   * Progress bar variant
+   * @default 'primary'
+   */
+  variant?: ProgressbarVariant
+
+  /**
+   * Show percentage label
+   * @default false
+   */
+  showLabel?: boolean
+
+  /**
+   * Label position
+   * @default 'right'
+   */
+  labelPosition?: 'inside' | 'right' | 'top'
+
+  /**
+   * Striped style
+   * @default false
+   */
+  striped?: boolean
+
+  /**
+   * Animated stripes
+   * @default false
+   */
+  animated?: boolean
+
+  /**
+   * Indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean
+
+  /**
+   * Border radius
+   * @default true
+   */
+  rounded?: boolean
+}