@bigbot-community/bigbot-ui 1.0.1

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

@@ -0,0 +1,132 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrCheckbox from './BrCheckbox.vue'
+
+describe('BrCheckbox', () => {
+  it('renders as label element', () => {
+    const wrapper = mount(BrCheckbox)
+    expect(wrapper.element.tagName).toBe('LABEL')
+  })
+
+  it('contains hidden input element', () => {
+    const wrapper = mount(BrCheckbox)
+    const input = wrapper.find('input[type="checkbox"]')
+    expect(input.exists()).toBe(true)
+  })
+
+  it('toggles value on change', async () => {
+    let modelValue: boolean = false
+    const wrapper = mount(BrCheckbox, {
+      props: {
+        modelValue,
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as boolean
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    expect(wrapper.props('modelValue')).toBe(false)
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.props('modelValue')).toBe(true)
+  })
+
+  it('renders label text', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { label: 'Accept terms' },
+    })
+    expect(wrapper.text()).toContain('Accept terms')
+  })
+
+  it('renders slot content as label', () => {
+    const wrapper = mount(BrCheckbox, {
+      slots: {
+        default: 'Custom label',
+      },
+    })
+    expect(wrapper.text()).toContain('Custom label')
+  })
+
+  it('applies checked class when checked', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { modelValue: true },
+    })
+    expect(wrapper.classes()).toContain('br-checkbox--checked')
+  })
+
+  it('applies error class when error prop is true', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { error: true },
+    })
+    expect(wrapper.classes()).toContain('br-checkbox--error')
+  })
+
+  it('applies disabled class when disabled', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { disabled: true },
+    })
+    expect(wrapper.classes()).toContain('br-checkbox--disabled')
+  })
+
+  it('does not toggle when disabled', async () => {
+    let modelValue: boolean = false
+    const wrapper = mount(BrCheckbox, {
+      props: {
+        modelValue,
+        disabled: true,
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as boolean
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.props('modelValue')).toBe(false)
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const wrapper = mount(BrCheckbox, {
+        props: { size },
+      })
+      expect(wrapper.classes()).toContain(`br-checkbox--${size}`)
+    })
+  })
+
+  it('applies indeterminate class when indeterminate', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { indeterminate: true },
+    })
+    expect(wrapper.classes()).toContain('br-checkbox--indeterminate')
+  })
+
+  it('renders helper text', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { helperText: 'This is required' },
+    })
+    expect(wrapper.text()).toContain('This is required')
+  })
+
+  it('shows check icon when checked', () => {
+    const wrapper = mount(BrCheckbox, {
+      props: { modelValue: true },
+    })
+    expect(wrapper.find('.br-checkbox__icon').exists()).toBe(true)
+  })
+
+  it('works with array model for multiple selection', async () => {
+    let modelValue: string[] = ['a', 'b']
+    const wrapper = mount(BrCheckbox, {
+      props: {
+        modelValue,
+        trueValue: 'c',
+        'onUpdate:modelValue': (e: unknown) => {
+          modelValue = e as string[]
+          wrapper.setProps({ modelValue })
+        },
+      },
+    })
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.props('modelValue')).toContain('c')
+  })
+})

package/src/components/atoms/BrCheckbox/BrCheckbox.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CheckboxProps } from './types'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  size: 'md',
+  disabled: false,
+  indeterminate: false,
+  error: false,
+  trueValue: true,
+  falseValue: false,
+})
+
+const model = defineModel<string | number | boolean | Array<string | number>>()
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const isChecked = computed(() => {
+  if (Array.isArray(model.value)) {
+    return model.value.includes(props.trueValue as never)
+  }
+  return model.value === props.trueValue
+})
+
+const classes = computed(() => [
+  'br-checkbox',
+  `br-checkbox--${props.size}`,
+  {
+    'br-checkbox--disabled': props.disabled,
+    'br-checkbox--error': props.error,
+    'br-checkbox--checked': isChecked.value,
+    'br-checkbox--indeterminate': props.indeterminate,
+  },
+])
+
+watch(
+  () => props.indeterminate,
+  (val) => {
+    if (inputRef.value) {
+      inputRef.value.indeterminate = val
+    }
+  },
+  { immediate: true }
+)
+
+function handleChange() {
+  if (props.disabled) return
+
+  if (Array.isArray(model.value)) {
+    const newValue = [...model.value]
+    const index = newValue.indexOf(props.trueValue as never)
+    if (index > -1) {
+      newValue.splice(index, 1)
+    } else {
+      newValue.push(props.trueValue as never)
+    }
+    model.value = newValue
+  } else {
+    model.value = isChecked.value ? props.falseValue : props.trueValue
+  }
+}
+</script>
+
+<template>
+  <label :class="classes">
+    <input
+      ref="inputRef"
+      type="checkbox"
+      :checked="isChecked"
+      :disabled="disabled"
+      class="br-checkbox__input"
+      @change="handleChange"
+    />
+    <span class="br-checkbox__control">
+      <svg v-if="isChecked && !indeterminate" viewBox="0 0 24 24" class="br-checkbox__icon">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+      </svg>
+      <svg v-else-if="indeterminate" viewBox="0 0 24 24" class="br-checkbox__icon">
+        <path d="M19 13H5v-2h14v2z" fill="currentColor" />
+      </svg>
+    </span>
+    <span v-if="label || $slots.default" class="br-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span v-if="helperText" class="br-checkbox__helper">{{ helperText }}</span>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+.br-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--br-space-2);
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 2px solid var(--br-dark-300);
+    border-radius: var(--br-radius-sm);
+    background: var(--br-white);
+    transition: all var(--br-transition-fast);
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+    color: var(--br-white);
+  }
+
+  &__label {
+    color: var(--br-dark-700);
+    line-height: 1.4;
+  }
+
+  &__helper {
+    display: block;
+    width: 100%;
+    margin-top: var(--br-space-1);
+    font-size: var(--br-text-sm);
+    color: var(--br-dark-500);
+  }
+
+  // Sizes
+  &--sm {
+    .br-checkbox__control {
+      width: 16px;
+      height: 16px;
+    }
+    .br-checkbox__label {
+      font-size: var(--br-text-sm);
+    }
+  }
+
+  &--md {
+    .br-checkbox__control {
+      width: 20px;
+      height: 20px;
+    }
+    .br-checkbox__label {
+      font-size: var(--br-text-md);
+    }
+  }
+
+  &--lg {
+    .br-checkbox__control {
+      width: 24px;
+      height: 24px;
+    }
+    .br-checkbox__label {
+      font-size: var(--br-text-lg);
+    }
+  }
+
+  // States
+  &:hover:not(&--disabled) {
+    .br-checkbox__control {
+      border-color: var(--br-primary-500);
+    }
+  }
+
+  &--checked,
+  &--indeterminate {
+    .br-checkbox__control {
+      background: var(--br-primary-500);
+      border-color: var(--br-primary-500);
+    }
+  }
+
+  &--error {
+    .br-checkbox__control {
+      border-color: var(--br-danger-500);
+    }
+    &.br-checkbox--checked .br-checkbox__control,
+    &.br-checkbox--indeterminate .br-checkbox__control {
+      background: var(--br-danger-500);
+      border-color: var(--br-danger-500);
+    }
+    .br-checkbox__helper {
+      color: var(--br-danger-500);
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+</style>

package/src/components/atoms/BrCheckbox/BrCheckboxGroup.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CheckboxGroupProps } from './types'
+import BrCheckbox from './BrCheckbox.vue'
+
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+  direction: 'vertical',
+  size: 'md',
+  disabled: false,
+  error: false,
+})
+
+const model = defineModel<Array<string | number>>({ default: () => [] })
+
+const classes = computed(() => [
+  'br-checkbox-group',
+  `br-checkbox-group--${props.direction}`,
+  {
+    'br-checkbox-group--error': props.error,
+  },
+])
+
+function isDisabled(option: (typeof props.options)[0]) {
+  if (props.disabled || option.disabled) return true
+
+  // Check max limit
+  if (props.max && model.value.length >= props.max && !model.value.includes(option.value)) {
+    return true
+  }
+
+  // Check min limit (prevent unchecking if at minimum)
+  if (props.min && model.value.length <= props.min && model.value.includes(option.value)) {
+    return true
+  }
+
+  return false
+}
+</script>
+
+<template>
+  <div :class="classes" role="group" :aria-label="label">
+    <span v-if="label" class="br-checkbox-group__label">{{ label }}</span>
+    <div class="br-checkbox-group__options">
+      <BrCheckbox
+        v-for="option in options"
+        :key="String(option.value)"
+        v-model="model"
+        :label="option.label"
+        :true-value="option.value"
+        :size="size"
+        :disabled="isDisabled(option)"
+        :error="error"
+      />
+    </div>
+    <span v-if="error && errorMessage" class="br-checkbox-group__error">
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--br-space-2);
+
+  &__label {
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-700);
+  }
+
+  &__options {
+    display: flex;
+    gap: var(--br-space-3);
+  }
+
+  &--vertical &__options {
+    flex-direction: column;
+  }
+
+  &--horizontal &__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &__error {
+    font-size: var(--br-text-sm);
+    color: var(--br-danger-500);
+  }
+}
+</style>

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

@@ -0,0 +1,3 @@
+export { default as BrCheckbox } from './BrCheckbox.vue'
+export { default as BrCheckboxGroup } from './BrCheckboxGroup.vue'
+export * from './types'

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

@@ -0,0 +1,102 @@
+export type CheckboxSize = 'sm' | 'md' | 'lg'
+
+export interface CheckboxProps {
+  /**
+   * Checkbox label
+   */
+  label?: string
+
+  /**
+   * Checkbox size
+   * @default 'md'
+   */
+  size?: CheckboxSize
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Helper text
+   */
+  helperText?: string
+
+  /**
+   * Value when checked
+   */
+  trueValue?: string | number | boolean
+
+  /**
+   * Value when unchecked
+   */
+  falseValue?: string | number | boolean
+}
+
+export interface CheckboxGroupProps {
+  /**
+   * Group label
+   */
+  label?: string
+
+  /**
+   * Checkbox options
+   */
+  options: Array<{
+    value: string | number
+    label: string
+    disabled?: boolean
+  }>
+
+  /**
+   * Layout direction
+   * @default 'vertical'
+   */
+  direction?: 'horizontal' | 'vertical'
+
+  /**
+   * Checkbox size
+   * @default 'md'
+   */
+  size?: CheckboxSize
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Error message
+   */
+  errorMessage?: string
+
+  /**
+   * Minimum selections required
+   */
+  min?: number
+
+  /**
+   * Maximum selections allowed
+   */
+  max?: number
+}

package/src/components/atoms/BrImage/BrImage.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import type { ImageProps } from './types'
+
+const props = withDefaults(defineProps<ImageProps>(), {
+  fit: 'cover',
+  lazy: true,
+  showPlaceholder: true,
+  rounded: false,
+})
+
+const isLoaded = ref(false)
+const hasError = ref(false)
+const imageRef = ref<HTMLImageElement | null>(null)
+
+const classes = computed(() => [
+  'br-image',
+  {
+    'br-image--loading': !isLoaded.value && props.showPlaceholder,
+    'br-image--error': hasError.value,
+    'br-image--rounded': props.rounded === true,
+    [`br-image--rounded-${props.rounded}`]: typeof props.rounded === 'string',
+  },
+])
+
+const imageStyles = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+  objectFit: props.fit,
+}))
+
+const currentSrc = computed(() => {
+  if (hasError.value && props.fallback) return props.fallback
+  return props.src
+})
+
+function handleLoad() {
+  isLoaded.value = true
+}
+
+function handleError() {
+  hasError.value = true
+  if (!props.fallback) {
+    isLoaded.value = true
+  }
+}
+
+onMounted(() => {
+  if (!props.lazy && imageRef.value) {
+    imageRef.value.loading = 'eager'
+  }
+})
+</script>
+
+<template>
+  <div :class="classes" :style="{ width: imageStyles.width, height: imageStyles.height }">
+    <div v-if="!isLoaded && showPlaceholder" class="br-image__placeholder">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+      </svg>
+    </div>
+    <img
+      ref="imageRef"
+      :src="currentSrc"
+      :alt="alt"
+      :loading="lazy ? 'lazy' : 'eager'"
+      class="br-image__img"
+      :style="imageStyles"
+      @load="handleLoad"
+      @error="handleError"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: var(--br-light-200);
+
+  &--rounded {
+    border-radius: var(--br-radius-md);
+  }
+
+  &--rounded-sm {
+    border-radius: var(--br-radius-sm);
+  }
+
+  &--rounded-md {
+    border-radius: var(--br-radius-md);
+  }
+
+  &--rounded-lg {
+    border-radius: var(--br-radius-lg);
+  }
+
+  &--rounded-xl {
+    border-radius: var(--br-radius-xl);
+  }
+
+  &--rounded-full {
+    border-radius: var(--br-radius-full);
+  }
+
+  &__placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--br-light-200);
+    color: var(--br-dark-500);
+
+    svg {
+      width: 40%;
+      height: 40%;
+      max-width: 48px;
+      max-height: 48px;
+    }
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transition: opacity var(--br-transition-normal);
+  }
+
+  &--loading &__img {
+    opacity: 0;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,51 @@
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+
+export interface ImageProps {
+  /**
+   * Image source URL
+   */
+  src: string
+
+  /**
+   * Alt text for accessibility
+   */
+  alt: string
+
+  /**
+   * Image width
+   */
+  width?: string | number
+
+  /**
+   * Image height
+   */
+  height?: string | number
+
+  /**
+   * Object fit property
+   * @default 'cover'
+   */
+  fit?: ImageFit
+
+  /**
+   * Lazy loading
+   * @default true
+   */
+  lazy?: boolean
+
+  /**
+   * Show loading placeholder
+   * @default true
+   */
+  showPlaceholder?: boolean
+
+  /**
+   * Border radius
+   */
+  rounded?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+  /**
+   * Fallback image URL
+   */
+  fallback?: string
+}