@livestorm/ui-vue 1.1.1 → 1.1.2

package/src/components/BaseAutocomplete/BaseAutocomplete.vue

@@ -0,0 +1,431 @@
+<script setup>
+import { computed, ref, toRefs, useSlots, onMounted } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const emit = defineEmits(['update:modelValue', 'update:search'])
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Array, Object],
+    default: null,
+  },
+  size: {
+    type: String,
+    validator: (value) => ['small', 'medium', 'large'].includes(value),
+    default: 'medium',
+  },
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  prependIcon: {
+    type: String,
+    default: null,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  hideSelected: {
+    type: Boolean,
+    default: false,
+  },
+  noFilter: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  hideNoData: {
+    type: Boolean,
+    default: false,
+  },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
+  noDataText: {
+    type: String,
+    default: null,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  creatable: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const { items, modelValue, multiple, hideSelected, noFilter, hideNoData, autofocus, creatable } = toRefs(props)
+
+const slots = useSlots()
+
+const hasFocus = ref(false)
+const selection = computed(() => multiple.value ? (modelValue.value?.map(item => normalizeItem(item, true)) || []) : normalizeItem(modelValue.value, true))
+const search = ref(multiple.value ? null : itemText(selection.value))
+const normalizedItems = computed(() => items.value?.map(normalizeItem) || [])
+const searching = ref(false)
+const itemsKeyboardNavigationIndex = ref(null)
+const tagsKeyboardNavigationIndex = ref(null)
+
+const input = ref(null)
+const autocompleteWrapper = ref(null)
+const dropdown = ref(null)
+
+const filteredItems = computed(() => {
+  const filteredFromSearch = !noFilter.value && searching.value && search.value
+    ? normalizedItems.value.filter(item => itemText(item).toLowerCase().includes(search.value.toLowerCase()))
+    : normalizedItems.value
+  const filteredFromSelected = hideSelected.value ? filteredFromSearch.filter(item => !isSelectedItem(item)) : filteredFromSearch
+  return filteredFromSelected
+})
+const hasTags = computed(() => multiple.value && selection.value.length > 0)
+const showPopperContent = computed(() => {
+  if (hideNoData.value && filteredItems.value.length === 0 && (!creatable.value || !search.value)) return false
+  return hasFocus.value
+})
+const canCreateItem = computed(() => creatable.value && search.value && searching.value && !normalizedItems.value.some(item => itemValue(item) === search.value))
+
+function normalizeItem (item) {
+  const isItemObject = item !== null && typeof item === 'object'
+  return {
+    ...(isItemObject ? item : null),
+    value: isItemObject ? item.value : item,
+    text: isItemObject ? item.text : item,
+  }
+}
+
+function getItemProps (item) {
+  const itemProps = normalizedItems.value.find(nItem => itemValue(nItem) === itemValue(item))
+  return itemProps ?? null
+}
+
+function createItem (item) {
+  const newItem = normalizeItem(item)
+  addSelectedItem(newItem)
+
+  if (multiple.value) {
+    normalizedItems.value.push(newItem)
+  }
+}
+
+function addSelectedItem (item) {
+  if (isSelectedItem(item)) {
+    removeSelectedItem(item)
+    return
+  }
+
+  if (multiple.value) {
+    search.value = null
+    tagsKeyboardNavigationIndex.value = null
+    input.value.focus()
+    emit('update:modelValue', [...selection.value.map(item => item.value), itemValue(item)])
+  } else {
+    hasFocus.value = false
+    search.value = itemText(item)
+    emit('update:modelValue', selection.value)
+  }
+
+  searching.value = false
+}
+
+function removeSelectedItem (item) {
+  if (multiple.value) {
+    emit('update:modelValue', selection.value.filter(value => itemValue(value) !== itemValue(item)).map(item => itemValue(item)))
+    input.value.focus()
+  } else {
+    hasFocus.value = false
+    search.value = null
+    emit('update:modelValue', null)
+  }
+}
+
+function isSelectedItem (item) {
+  if (!selection.value) return false
+  return multiple.value
+    ? selection.value.some(value => itemValue(value) === itemValue(item))
+    : itemValue(item) === itemValue(selection.value)
+}
+
+function isKeyboardTargetItem (index) {
+  if (itemsKeyboardNavigationIndex.value === null) return false
+  return (itemsKeyboardNavigationIndex.value % filteredItems.value.length) === index
+}
+
+function isKeyboardTargetTag (index) {
+  if (tagsKeyboardNavigationIndex.value === null || !multiple.value) return false
+  return (tagsKeyboardNavigationIndex.value % selection.value.length) === index
+}
+
+function onUserFocus (e) {
+  hasFocus.value = true
+}
+
+function onUserSearch () {
+  searching.value = true
+  itemsKeyboardNavigationIndex.value = null
+  tagsKeyboardNavigationIndex.value = null
+
+  if (!multiple.value) {
+    emit('update:modelValue', null)
+  }
+
+  emit('update:search', search.value)
+}
+
+function onPopperHide () {
+  hasFocus.value = false
+  searching.value = false
+  itemsKeyboardNavigationIndex.value = null
+  tagsKeyboardNavigationIndex.value = null
+  input.value.blur()
+  if (multiple.value) {
+    search.value = null
+  }
+}
+
+/**
+ *
+ * @param {('down'|'up'|'enter')} action
+ */
+function onUserKeyboardNavigateItems (action) {
+  if (action === 'up') {
+    itemsKeyboardNavigationIndex.value = itemsKeyboardNavigationIndex.value <= 0
+      ? filteredItems.value.length - 1
+      : itemsKeyboardNavigationIndex.value - 1
+  } else if (action === 'down') {
+    itemsKeyboardNavigationIndex.value ??= -1
+    itemsKeyboardNavigationIndex.value++
+  } else if (action === 'enter') {
+    if (itemsKeyboardNavigationIndex.value !== null) {
+      const itemToSelect = filteredItems.value[itemsKeyboardNavigationIndex.value % filteredItems.value.length]
+      if (itemToSelect) {
+        addSelectedItem(itemToSelect)
+      }
+    } else if (canCreateItem.value) {
+      createItem(search.value)
+    }
+  }
+}
+
+/**
+ *
+ * @param {('left'|'right'|'delete')} action
+ */
+function onUserKeyboardNavigateTags (action) {
+  if (!!search.value || !multiple.value) return
+  tagsKeyboardNavigationIndex.value ??= -1
+
+  if (action === 'left') {
+    tagsKeyboardNavigationIndex.value = tagsKeyboardNavigationIndex.value <= 0
+      ? selection.value.length - 1
+      : tagsKeyboardNavigationIndex.value - 1
+  } else if (action === 'right') {
+    tagsKeyboardNavigationIndex.value++
+  } else if (action === 'delete') {
+    if (tagsKeyboardNavigationIndex.value === -1) {
+      tagsKeyboardNavigationIndex.value = selection.value.length - 1
+    } else {
+      removeSelectedItem(selection.value[tagsKeyboardNavigationIndex.value % selection.value.length])
+      tagsKeyboardNavigationIndex.value = tagsKeyboardNavigationIndex.value - 1
+    }
+  }
+}
+
+function onUserClickChevron () {
+  if (hasFocus.value) {
+    hasFocus.value = false
+  } else {
+    input.value.focus()
+  }
+}
+
+function onUserClickClear () {
+  if (multiple.value) {
+    emit('update:modelValue', [])
+  } else {
+    emit('update:modelValue', null)
+  }
+
+  search.value = null
+}
+
+function itemValue (item) {
+  return item.value
+}
+
+function itemText (item) {
+  return item.text
+}
+
+onMounted(() => {
+  if (autofocus.value) {
+    input.value?.focus()
+
+    // If removed, unit tests fail
+    hasFocus.value = true
+  }
+})
+
+onClickOutside(autocompleteWrapper, () => {
+  hasFocus.value = false
+}, {
+  ignore: [computed(() => dropdown.value.$refs.popperContent.$el)],
+})
+
+</script>
+
+<template>
+  <VDropdown
+    ref="dropdown"
+    :shown="showPopperContent"
+    :triggers="[]"
+    auto-size
+    popper-class="no-padding"
+    no-auto-focus
+    :auto-hide="false"
+    @hide="onPopperHide"
+  >
+    <div
+      ref="autocompleteWrapper"
+      class="base-input base-form-style stretchable flex rounded-8 items-center"
+      :class="[`base-input-${size}`, {
+        error,
+        '!border-livestorm-600': showPopperContent,
+      }]"
+    >
+      <div
+        v-if="prependIcon"
+        :class="prependIcon"
+        class="w-4 h-4 mr-3"
+      />
+      <div
+        class="flex flex-1 flex-wrap items-center"
+        :class="{
+          'mb-1': size == 'medium' && hasTags,
+          'mb-2': size === 'large' && hasTags
+        }"
+      >
+        <template v-if="hasTags">
+          <BaseTag
+            v-for="(item, index) in selection"
+            :key="itemValue(getItemProps(item))"
+            deletable
+            :theme="isKeyboardTargetTag(index) ? 'dark-grey' : 'light-grey'"
+            class="mr-1 self-baseline"
+            :class="{
+              'mt-1': size !== 'large',
+              'mt-2': size === 'large'
+            }"
+            :size="size === 'small' ? 'xsmall': 'small'"
+            @delete="removeSelectedItem(item)"
+          >
+            <div v-if="slots.tag">
+              <slot
+                name="tag"
+                v-bind="{
+                  item: getItemProps(item),
+                  index,
+                }"
+              />
+            </div>
+            <template v-else>
+              {{ itemText(getItemProps(item)) }}
+            </template>
+          </BaseTag>
+        </template>
+        <input
+          ref="input"
+          v-model="search"
+          type="text"
+          data-testid="base-autocomplete-input"
+          class="flex-1 h-6 min-w-0 focus:min-w-[64px]"
+          :class="{
+            'mt-1': hasTags && size === 'medium',
+            'mt-2': hasTags && size === 'large'
+          }"
+          :placeholder="selection?.length ? null : placeholder"
+          @focus="onUserFocus"
+          @input="onUserSearch"
+          @keydown.up="onUserKeyboardNavigateItems('up')"
+          @keydown.down="onUserKeyboardNavigateItems('down')"
+          @keydown.enter="onUserKeyboardNavigateItems('enter')"
+          @keydown.left="onUserKeyboardNavigateTags('left')"
+          @keydown.right="onUserKeyboardNavigateTags('right')"
+          @keydown.delete="onUserKeyboardNavigateTags('delete')"
+        >
+      </div>
+      <div
+        v-if="clearable && (search?.length > 0 || selection?.length > 0)"
+        class="i-ls-x cursor-pointer w-4 h-4 ml-3"
+        data-testid="base-autocomplete-clear"
+        @click="onUserClickClear"
+      />
+      <div
+        v-if="filteredItems.length > 0"
+        :class="hasFocus ? 'i-ls-chevron-up' : 'i-ls-chevron-down'"
+        class="cursor-text w-4 h-4 ml-3"
+        @click="onUserClickChevron"
+      />
+    </div>
+
+    <template #popper>
+      <div
+        class="bg-white"
+      >
+        <div
+          v-if="canCreateItem"
+          data-testid="base-autocomplete-create-item"
+          class="empty:hidden item text-livestorm-600 text-14-semibold"
+          :class="{
+            active: itemsKeyboardNavigationIndex === null
+          }"
+          @click="createItem(search)"
+        >
+          {{ i18n.t('base-autocomplete-create-item', { item: search }) }}
+        </div>
+        <div
+          v-for="(item, index) of filteredItems"
+          :key="itemValue(item)"
+          class="item"
+          data-testid="base-autocomplete-item"
+          :class="{
+            'selected': isSelectedItem(item),
+            'active': isKeyboardTargetItem(index),
+          }"
+          @click="addSelectedItem(item)"
+        >
+          {{ itemText(item) }}
+        </div>
+        <div
+          v-if="hideSelected && noDataText && filteredItems.length === 0"
+          class="px-4 py-2"
+        >
+          {{ noDataText }}
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+
+<style lang="postcss" scoped>
+.item {
+  @apply px-4 py-2 cursor-pointer hover:bg-grey-100;
+
+  &.selected {
+    @apply bg-grey-100;
+  }
+
+  &.active {
+    @apply bg-grey-300;
+  }
+}
+</style>

package/src/components/BaseBanner/BaseBanner.spec.js

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import BaseBanner from './BaseBanner.vue'
+
+describe('BaseBanner', () => {
+  /** @type {import('@vue/test-utils').VueWrapper} */
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(BaseBanner, {
+      props: {
+        type: 'error',
+      },
+      slots: {
+        default: 'Main content',
+      },
+    })
+  })
+
+  test('It should include info class when type prop change', async () => {
+    await wrapper.setProps({ type: 'info' })
+    expect(wrapper.find('[data-testid="base-banner"]').attributes().class.includes('info')).toBe(true)
+  })
+
+  test('It should render slot content', () => {
+    expect(wrapper.find('[data-testid="base-banner"]').text()).toContain('Main content')
+  })
+
+  test('It should render the correct icon when type change', async () => {
+    await wrapper.setProps({ type: 'warning' })
+    expect(wrapper.exists('.i-ls-alert-triangle')).toBe(true)
+  })
+})

package/src/components/BaseBanner/BaseBanner.stories.js

@@ -0,0 +1,133 @@
+import BaseBanner from './BaseBanner.vue'
+import { icons } from '@/../../frontend/.storybook/icons'
+import { withDesign } from 'storybook-addon-designs'
+
+export default {
+  title: 'common/vue/components/BaseBanner',
+  component: BaseBanner,
+  decorators: [withDesign],
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: ['info', 'success', 'warning', 'alert'],
+    },
+    display: {
+      control: {
+        type: 'select',
+      },
+      options: ['inline', 'block'],
+    },
+    buttonIcon: {
+      control: {
+        type: 'select',
+      },
+      options: icons,
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/0.-Design-system---Fondation?node-id=7846%3A13012',
+    },
+  },
+}
+
+const Template = (args) => ({
+  setup: () => ({ args }),
+  template: `
+      <BaseBanner v-bind="args">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      </BaseBanner>
+    `,
+})
+
+const WithDescriptionTemplate = (args) => ({
+  setup: () => ({ args }),
+  template: `
+      <BaseBanner v-bind="args">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+        <template #description>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</template>
+      </BaseBanner>
+    `,
+})
+
+const WithButtonsSlotTemplate = (args) => ({
+  setup: () => ({ args }),
+  template: `
+      <BaseBanner v-bind="args">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+        <template #description>At vero eos et accusam et justo duo <a href="#">dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</template>
+        <template #buttons>
+          <div class="flex">
+            <BaseButton
+              class="base-button-secondary mr-2"
+              href="#"
+              icon-right="i-ls-external-link"
+              target="_blank"
+            >
+              Read documentation
+            </BaseButton>
+            <BaseButton
+              class="base-button-primary"
+            >
+              Contact us
+            </BaseButton>
+          </div>
+        </template>
+      </BaseBanner>
+    `,
+})
+
+export const Info = Template.bind({})
+Info.args = {
+  type: 'info',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  type: 'success',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  type: 'warning',
+}
+
+export const Alert = Template.bind({})
+Alert.args = {
+  type: 'alert',
+}
+
+export const WithDescription = WithDescriptionTemplate.bind({})
+WithDescription.args = {
+  type: 'success',
+}
+
+export const WithOneCta = WithDescriptionTemplate.bind({})
+WithOneCta.args = {
+  type: 'success',
+  buttonLabel: 'Call to action',
+  buttonIcon: 'i-ls-share',
+}
+
+export const WithTwoCta = WithButtonsSlotTemplate.bind({})
+WithTwoCta.args = {
+  type: 'info',
+}
+
+export const Closable = WithDescriptionTemplate.bind({})
+Closable.args = {
+  type: 'success',
+  buttonLabel: 'Call to action',
+  closable: true,
+}
+
+export const BannerMode = WithDescriptionTemplate.bind({})
+BannerMode.args = {
+  type: 'success',
+  buttonLabel: 'Call to action',
+  closable: true,
+  bannerMode: true,
+}