@veritree/ui 0.35.0 → 0.37.0

package/.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

package/.vscode/settings.json

@@ -0,0 +1 @@
+{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -10,14 +10,25 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.43.0"
+    "@veritree/icons": "^0.43.0",
+    "vue": "^2.7.2"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vue/test-utils": "^1.3.0",
+    "jsdom": "latest",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "vite": "latest",
+    "vitest": "latest",
+    "vue-template-compiler": "^2.7.2"
   }
 }

package/src/components/Alert/VTAlert.vue

@@ -3,9 +3,7 @@
     v-if="show"
     :class="[
       // default styles
-      headless
-        ? 'alert'
-        : 'flex items-start gap-3 rounded border border-solid p-3',
+      headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
       // variant styles
       headless
         ? `alert--${variant}`
@@ -16,6 +14,14 @@
         : isWarning
         ? 'border-warning-300 bg-warning-200 text-warning-700'
         : null,
+      // sizes styles
+      headless
+        ? `alert--${size}`
+        : isLarge
+        ? 'p-3'
+        : isSmall
+        ? 'py-1 px-2 text-sm'
+        : null,
     ]"
     role="alert"
   >
@@ -23,9 +29,7 @@
     <button
       v-if="dismissable"
       :class="[
-        !headless
-          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
-          : 'alert-close',
+        headless ? 'alert-close' : 'ml-auto mt-1 h-4 w-4 shrink-0 text-current',
       ]"
       @click="hide"
     >
@@ -35,14 +39,24 @@
 </template>
 
 <script>
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+
 export default {
   name: 'VTAlert',
 
+  components: {
+    IconClose,
+  },
+
   props: {
     variant: {
       type: String,
       default: 'success',
     },
+    size: {
+      type: String,
+      default: 'large',
+    },
     headless: {
       type: Boolean,
       default: false,
@@ -71,12 +85,20 @@ export default {
     isWarning() {
       return this.variant === 'warning';
     },
+
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
+    },
   },
 
   methods: {
     hide() {
-      this.$emit('dismiss');
       this.show = false;
+      this.$emit('dismiss');
     },
   },
 };

package/src/components/Tabs/VTTabGroup.vue

@@ -4,24 +4,14 @@
   </div>
 </template>
 
-<style scoped>
-.TabGroup.vertical{
-  display: flex;
-}
-.TabGroup.vertical .TabList{
-  display: flex;
-  flex-direction: column;
-}
-</style>
-
 <script>
 export default {
   name: 'VTTabGroup',
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
@@ -113,3 +103,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.TabGroup.vertical {
+  display: flex;
+}
+.TabGroup.vertical .TabList {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/test/alert.test.js

@@ -0,0 +1,158 @@
+import { mount } from '@vue/test-utils';
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+import VTAlert from '@/components/Alert/VTAlert.vue';
+
+describe('VTAlert.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(VTAlert, {
+      slots: {
+        default: '<p>Alert message goes here</p>',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the component', () => {
+    expect(VTAlert).toBeTruthy();
+  });
+
+  it('has the correct default props', () => {
+    expect(wrapper.props().variant).toBe('success');
+    expect(wrapper.props().size).toBe('large');
+    expect(wrapper.props().headless).toBe(false);
+    expect(wrapper.props().dismissable).toBe(false);
+  });
+
+  it('displays the component with default styles', () => {
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'flex',
+        'items-start',
+        'gap-3',
+        'rounded',
+        'border',
+        'border-solid',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('alert');
+  });
+
+  it('displays the component with success variant styles', async () => {
+    await wrapper.setProps({ variant: 'success' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-success-300',
+        'bg-success-200',
+        'text-success-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-error-300');
+    expect(wrapper.classes()).not.toContain('bg-error-200');
+    expect(wrapper.classes()).not.toContain('text-error-700');
+    expect(wrapper.classes()).not.toContain('border-warning-300');
+    expect(wrapper.classes()).not.toContain('bg-warning-200');
+    expect(wrapper.classes()).not.toContain('text-warning-700');
+  });
+
+  it('displays the component with error variant styles', async () => {
+    await wrapper.setProps({ variant: 'error' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-error-300',
+        'bg-error-200',
+        'text-error-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-success-300');
+    expect(wrapper.classes()).not.toContain('bg-success-200');
+    expect(wrapper.classes()).not.toContain('text-success-700');
+    expect(wrapper.classes()).not.toContain('border-warning-300');
+    expect(wrapper.classes()).not.toContain('bg-warning-200');
+    expect(wrapper.classes()).not.toContain('text-warning-700');
+  });
+
+  it('displays the component with warning variant styles', async () => {
+    await wrapper.setProps({ variant: 'warning' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-warning-300',
+        'bg-warning-200',
+        'text-warning-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-success-300');
+    expect(wrapper.classes()).not.toContain('bg-success-200');
+    expect(wrapper.classes()).not.toContain('text-success-700');
+    expect(wrapper.classes()).not.toContain('border-error-300');
+    expect(wrapper.classes()).not.toContain('bg-error-200');
+    expect(wrapper.classes()).not.toContain('text-error-700');
+  });
+
+  it('displays the default large styles', () => {
+    expect(wrapper.classes()).toContain('p-3');
+  });
+
+  it('displays the component with small size styles', async () => {
+    await wrapper.setProps({ size: 'small' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['py-1', 'px-2', 'text-sm'])
+    );
+  });
+
+  describe('dismiss button', () => {
+    it('displays dismiss button default classes', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.isVisible()).toBe(true);
+
+      // Find dismiss button
+      const dismissButton = wrapper.find('button');
+
+      expect(dismissButton.classes()).toEqual(
+        expect.arrayContaining([
+          'ml-auto',
+          'mt-1',
+          'h-4',
+          'w-4',
+          'shrink-0',
+          'text-current',
+        ])
+      );
+    });
+
+    it('renders the icon close when dismiss is visible', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.findComponent(IconClose).exists()).toBe(true);
+    });
+
+    it('hides the alert when the dismiss button is clicked', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.isVisible()).toBe(true);
+
+      // Click the dismiss button
+      const dismissButton = wrapper.find('button');
+      await dismissButton.trigger('click');
+
+      // Verify that the alert is now hidden
+      expect(wrapper.isVisible()).toBe(false);
+
+      // Verify that the 'dismiss' event was emitted
+      expect(wrapper.emitted('dismiss')).toBeTruthy();
+    });
+  });
+});

package/test/button.test.js

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils';
+import VTButton from '@/components/Button/VTButton.vue';
+
+describe('VTButton.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(VTButton, {
+      slots: {
+        default: 'Submit',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the button if "to" and "href" props are not provided', () => {
+    expect(wrapper.find('button').exists()).toBe(true);
+  });
+
+  it('renders a NuxtLink when the "to" prop is provided', async () => {
+    await wrapper.setProps({ to: '/some-page' });
+
+    expect(wrapper.find('NuxtLink').exists()).toBe(true);
+  });
+
+  it('renders an "a" tag when the "href" prop is provided', async () => {
+    await wrapper.setProps({ href: 'https://example.com' });
+
+    expect(wrapper.find('a').exists()).toBe(true);
+  });
+
+  it('has the correct default props', () => {
+    expect(wrapper.props().variant).toBe('primary');
+    expect(wrapper.props().size).toBe('large');
+    expect(wrapper.props().to).toBe(null);
+    expect(wrapper.props().href).toBe(null);
+    expect(wrapper.props().headless).toBe(false);
+    expect(wrapper.props().busy).toBe(false);
+    expect(wrapper.props().disabled).toBe(false);
+  });
+
+  it('displays the component default styles', () => {
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'relative',
+        'inline-flex',
+        'rounded',
+        'border',
+        'border-solid',
+        'px-4',
+        'text-sm',
+        'font-semibold',
+        'leading-none',
+        'no-underline',
+        'transition-all',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with primary variant styles', async () => {
+    await wrapper.setProps({ variant: 'primary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'bg-secondary-400',
+        'hover:bg-secondary-500',
+        'focus:bg-secondary-600',
+        'active:bg-secondary-600',
+        'border-transparent',
+        'text-white',
+        'disabled:bg-gray-200',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with secondary variant styles', async () => {
+    await wrapper.setProps({ variant: 'secondary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-gray-400',
+        'bg-white',
+        'text-gray-700',
+        'hover:bg-gray-100',
+        'hover:bg-gray-200',
+        'active:bg-gray-200',
+        'disabled:border-gray-300',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with tertiary variant styles', async () => {
+    await wrapper.setProps({ variant: 'tertiary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'text-secondary-400',
+        'hover:text-secondary-500',
+        'focus:text-secondary-600',
+        'active:text-secondary-600',
+        'border-transparent',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with icon variant styles', async () => {
+    await wrapper.setProps({ variant: 'icon' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'text-primary-100',
+        'focus-within:bg-gray-200',
+        'hover:bg-gray-200',
+        'active:bg-gray-300'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+});

package/vitest.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import Vue2 from '@vitejs/plugin-vue2';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [Vue2()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    alias: [
+      {
+        find: /^vue$/,
+        replacement: 'vue/dist/vue.runtime.common.js',
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});