@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/Sidebar/__tests__/Siderbar.spec.js

@@ -0,0 +1,92 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+
+import Sidebar from '../index.vue';
+
+const items = [
+  { label: 'Item 1', icon: 'icon-1', children: [] },
+  { label: 'Item 2', icon: 'icon-2', children: [] },
+];
+
+describe('Sidebar', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mount(Sidebar, {
+      props: { items },
+      global: { stubs: { SidebarItem: true } },
+    });
+  });
+
+  it('validates position prop correctly', () => {
+    const validator = Sidebar.props.position.validator;
+    expect(validator('left')).toBe(true);
+    expect(validator('right')).toBe(true);
+    expect(validator('center')).toBe(false);
+  });
+
+  it('renders the sidebar with correct position', () => {
+    expect(wrapper.classes()).toContain(
+      `unnnic-sidebar--${wrapper.props().position}`,
+    );
+  });
+
+  it('renders the items as SidebarItem components', () => {
+    const sidebarItems = wrapper.findAllComponents(
+      '[data-testid="sidebar-item"]',
+    );
+    expect(sidebarItems.length).toBe(items.length);
+  });
+
+  it('emits "navigate" event when handleNavigate is called', async () => {
+    await wrapper
+      .findComponent('[data-testid="sidebar-item"]')
+      .vm.$emit('navigate', { item: items[0], child: null });
+
+    expect(wrapper.emitted('navigate')).toBeTruthy();
+    expect(wrapper.emitted('navigate')[0]).toEqual([
+      { item: items[0], child: null },
+    ]);
+  });
+
+  it('validates width prop correctly', () => {
+    const validator = Sidebar.props.width.validator;
+    expect(validator('100px')).toBe(true);
+    expect(validator('50%')).toBe(true);
+    expect(validator('100')).toBe(false);
+    expect(validator('100em')).toBe(false);
+  });
+
+  describe('shoult emit error on invalid props', () => {
+    it('empty items array', () => {
+      try {
+        mount(Sidebar, { props: { items: [] } });
+      } catch (error) {
+        expect(error).toStrictEqual(
+          new Error('Items property cannot be an empty array.'),
+        );
+      }
+    });
+
+    it('invalid item', () => {
+      try {
+        mount(Sidebar, { props: { items: [{ label: '' }] } });
+      } catch (error) {
+        expect(error).toStrictEqual(
+          new Error('Each item in "items" must have "label".'),
+        );
+      }
+    });
+
+    it('invalid child item', () => {
+      try {
+        mount(Sidebar, {
+          props: { items: [{ label: 'parent', children: [{ label: '' }] }] },
+        });
+      } catch (error) {
+        expect(error).toStrictEqual(
+          new Error('Each item in "items" must have "label".'),
+        );
+      }
+    });
+  });
+});

package/src/components/Sidebar/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <nav :class="['unnnic-sidebar', `unnnic-sidebar--${position}`]">
+    <slot
+      class="unnnic-sidebar-top"
+      name="top"
+    />
+    <ul class="unnnic-sidebar-items">
+      <li
+        v-for="(item, itemIndex) of items"
+        :key="item"
+      >
+        <SidebarItem
+          :item="item"
+          :active="{
+            item: active.itemIndex === itemIndex,
+            childIndex: active.childIndex,
+          }"
+          :autoNavigateFirstChild="autoNavigateFirstChild"
+          data-testid="sidebar-item"
+          @navigate="handleNavigate($event)"
+        />
+      </li>
+    </ul>
+    <slot
+      class="unnnic-sidebar-bottom"
+      name="bottom"
+    />
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'UnnnicSidebar',
+};
+</script>
+
+<script setup>
+import { validateItems } from './propsValidator';
+import SidebarItem from './SidebarItem.vue';
+
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'left',
+    validator(value) {
+      return ['left', 'right'].includes(value);
+    },
+  },
+  width: {
+    type: String,
+    default: '200px',
+    validator(value) {
+      const pxPattern = /^\d+(\.\d+)?px$/; // numbers + px
+      const percentPattern = /^\d+(\.\d+)?%$/; // numbers + %
+      return pxPattern.test(value) || percentPattern.test(value);
+    },
+  },
+  items: {
+    type: Array,
+    required: true,
+    validator: validateItems,
+  },
+  active: {
+    type: Object,
+    default: () => ({ itemIndex: null, childIndex: null }),
+  },
+  autoNavigateFirstChild: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['navigate']);
+
+const handleNavigate = ({ item, child }) => {
+  emit('navigate', { item, child });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+.unnnic-sidebar {
+  position: fixed;
+
+  width: v-bind('props.width');
+
+  height: 100%;
+
+  &--left {
+    border-top-left-radius: $unnnic-border-radius-md;
+  }
+  &--right {
+    right: 0;
+    border-top-right-radius: $unnnic-border-radius-md;
+  }
+
+  &-items {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    gap: $unnnic-spacing-xs;
+    overflow-y: auto;
+    height: 100%;
+
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-border-emphasized;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-bg-muted;
+      border-radius: $unnnic-border-radius-pill;
+    }
+  }
+}
+</style>

package/src/components/Sidebar/propsValidator.js

@@ -0,0 +1,24 @@
+export const validateItem = (item) => {
+  const { label, children } = item;
+  const hasObrigatoryProps = !!label.trim();
+
+  if (!hasObrigatoryProps) {
+    throw new Error('Each item in "items" must have "label".');
+  }
+
+  if (children && Array.isArray(children)) {
+    children.forEach(validateItem);
+  }
+
+  return true;
+};
+
+export const validateItems = (items) => {
+  if (!items?.[0]) {
+    throw new Error('Items property cannot be an empty array.');
+  }
+
+  items.forEach(validateItem);
+
+  return true;
+};

package/src/components/SkeletonLoading/SkeletonLoading.vue

@@ -0,0 +1,156 @@
+<template>
+  <component
+    :is="tag"
+    v-if="direct"
+    :class="classes"
+    :style="styles"
+  ></component>
+
+  <component
+    :is="tag"
+    v-else-if="showLoading"
+  >
+    <span
+      v-for="(element, index) in elements"
+      :key="index"
+      :class="classes"
+      :style="styles"
+    >
+      &zwnj;
+    </span>
+  </component>
+</template>
+
+<script>
+import { ref, inject } from 'vue';
+import { SkeletonStyle } from './skeletonTheme.vue';
+
+export default {
+  name: 'UnnnicSkeletonLoading',
+  props: {
+    prefix: {
+      type: String,
+      default: 'unnnic',
+    },
+    count: {
+      type: Number,
+      default: 1,
+    },
+    duration: {
+      type: Number,
+      default: 2,
+    },
+    tag: {
+      type: String,
+      default: 'span',
+    },
+    width: [String, Number],
+    height: [String, Number],
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: undefined,
+    },
+    direct: {
+      type: Boolean,
+    },
+  },
+  setup() {
+    const themeStyle = inject('_themeStyle', ref({ ...SkeletonStyle }));
+    const theme = inject('_skeletonTheme', ref({}));
+
+    return {
+      themeStyle,
+      theme,
+    };
+  },
+  computed: {
+    classes() {
+      return [
+        `${this.prefix}-skeleton`,
+        this.circle ? `${this.prefix}-skeleton--circle` : '',
+      ];
+    },
+    styles() {
+      const styles = {};
+
+      styles['--skeleton-bg'] = this.themeStyle['--skeleton-bg'];
+      styles['--skeleton-highlight'] = this.themeStyle['--skeleton-highlight'];
+      styles['--skeleton-duration'] = this.duration
+        ? `${this.duration}s`
+        : '0s';
+
+      if (this.width) styles.width = this.width;
+      if (this.height) styles.height = this.height;
+
+      return styles;
+    },
+    elements() {
+      return Array.from({ length: this.count }, () => ({}));
+    },
+    showLoading() {
+      return typeof this.loading !== 'undefined'
+        ? this.loading
+        : this.isEmptyVNode(this.$slots.default);
+    },
+  },
+  methods: {
+    isEmptyVNode(children) {
+      if (!children) return true;
+      const [firstNode] = children();
+      let str = firstNode.children;
+
+      if (str) {
+        // remove all line-break and space character
+        str = str.replace(/(\n|\r\n|\s)/g, '');
+      }
+      return !str;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.unnnic-skeleton {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+  width: 100%;
+  height: inherit;
+  background-color: var(--skeleton-bg);
+  border-radius: $unnnic-radius-1;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--skeleton-highlight);
+    animation: skeleton-pulse var(--skeleton-duration, 2s) ease-in-out 0.5s
+      infinite;
+  }
+
+  &--circle {
+    border-radius: 50%;
+  }
+}
+</style>

package/src/components/SkeletonLoading/__tests__/SkeletonLoading.spec.js

@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import SkeletonLoading from '../SkeletonLoading.vue';
+
+function setup(options) {
+  return mount(SkeletonLoading, options);
+}
+
+describe('SkeletonLoading', () => {
+  let wrapper;
+
+  describe('when the skeleton loading is a circle', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 1.5,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: true,
+          loading: undefined,
+          direct: false,
+        },
+      });
+    });
+
+    it('should have circle modifier class', () => {
+      expect(wrapper.vm.classes).toContain('unnnic-skeleton--circle');
+    });
+  });
+
+  describe('when the skeleton loading has not a duration', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: undefined,
+          direct: false,
+        },
+      });
+    });
+
+    it('should disable pulse animation duration', () => {
+      expect(wrapper.vm.styles['--skeleton-duration']).toBe('0s');
+    });
+  });
+
+  describe('when the default slot is provided and loading is undefined', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: undefined,
+          direct: false,
+        },
+        slots: { default: 'Default slot' },
+      });
+    });
+
+    it('should not show the skeleton loading', () => {
+      expect(wrapper.html()).toBe('<!--v-if-->');
+    });
+  });
+
+  describe('when the loading prop is provided', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: true,
+          direct: false,
+        },
+      });
+    });
+
+    it('showLoading should be as same as the loading prop', async () => {
+      expect(wrapper.vm.showLoading).toBeTruthy();
+
+      await wrapper.setProps({
+        loading: false,
+      });
+
+      expect(wrapper.vm.showLoading).toBeFalsy();
+    });
+  });
+
+  describe('when the direct', () => {
+    beforeEach(() => {
+      wrapper = setup({
+        props: {
+          count: 1,
+          duration: 0,
+          tag: 'span',
+          width: '100px',
+          height: '100px',
+          circle: false,
+          loading: true,
+          direct: true,
+        },
+      });
+    });
+
+    it('renders the skeleton loading directly on the component', async () => {
+      expect(wrapper.classes()).toContain('unnnic-skeleton');
+      expect(wrapper.attributes('style')).toContain('--skeleton-bg');
+      expect(wrapper.attributes('style')).toContain('--skeleton-highlight');
+      expect(wrapper.attributes('style')).toContain('--skeleton-duration: 0s');
+      expect(wrapper.attributes('style')).toContain('width: 100px');
+      expect(wrapper.attributes('style')).toContain('height: 100px');
+    });
+  });
+});

package/src/components/SkeletonLoading/skeletonTheme.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <component
+      :is="tag"
+      v-if="tag"
+    >
+      <slot></slot>
+    </component>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script>
+import { ref, provide } from 'vue';
+
+export const DEFAULT_BACKGROUND = 'var(--unnnic-color-bg-muted)';
+export const DEFAULT_HIGHLIGHT = 'var(--unnnic-color-bg-base-soft)';
+export const SkeletonStyle = {
+  '--skeleton-bg': DEFAULT_BACKGROUND,
+  '--skeleton-highlight': DEFAULT_HIGHLIGHT,
+  '--skeleton-duration': '2s',
+};
+export default {
+  name: 'UnnnicSkeletonTheme',
+  props: {
+    color: {
+      type: String,
+      default: DEFAULT_BACKGROUND,
+    },
+    highlight: {
+      type: String,
+      default: DEFAULT_HIGHLIGHT,
+    },
+    duration: {
+      type: Number,
+      default: 2,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    loading: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+  setup() {
+    const themeStyle = ref({ ...SkeletonStyle });
+    const theme = ref({});
+
+    provide('_themeStyle', themeStyle);
+    provide('_skeletonTheme', theme);
+
+    return {
+      themeStyle,
+      theme,
+    };
+  },
+  mounted() {
+    const { color, highlight, duration } = this;
+    this.themeStyle['--skeleton-bg'] = color;
+    this.themeStyle['--skeleton-highlight'] = highlight;
+    this.themeStyle['--skeleton-duration'] = duration ? `${duration}s` : '0s';
+  },
+};
+</script>