@farm-investimentos/front-mfe-components 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "author": "farm investimentos",
   "private": false,
   "main": "./dist/front-mfe-components.common.js",
@@ -12,7 +12,9 @@
     "build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.js",
     "lint": "vue-cli-service lint",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test:unit": "jest --updateSnapshot",
+    "test:coverage": "jest --updateSnapshot --coverage"
   },
   "files": [
     "dist/*",
@@ -21,6 +23,7 @@
   "dependencies": {
     "@socheatsok78/storybook-addon-vuetify": "^0.1.8",
     "@vue/cli-service-global": "^4.5.13",
+    "@vue/test-utils": "^1.3.0",
     "core-js": "^3.6.5",
     "sass": "~1.32.0",
     "sass-loader": "^10.2.0",
@@ -35,12 +38,13 @@
     "@storybook/vue": "^6.3.6",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "jest": "^27.2.5",
+    "jest": "^25.5.4",
     "jsdoc": "^3.6.7",
     "vue-template-compiler": "^2.6.11",
     "webpack-cli": "^4.9.0"

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

@@ -0,0 +1,48 @@
+import ConfirmButton from './ConfirmButton.vue';
+
+export default {
+	title: 'Example/Buttons/Confirm',
+	component: ConfirmButton,
+};
+
+export const Primary = () => ({
+	components: { ConfirmButton },
+	template: '<ConfirmButton>Confirm Button</ConfirmButton>',
+});
+
+export const HtmlMarkup = () => ({
+	components: { ConfirmButton },
+	template: '<ConfirmButton><em>I am italic</strong></em></ConfirmButton>',
+});
+
+export const Props = () => ({
+	components: { ConfirmButton },
+	template: '<ConfirmButton title="custom title">custom title (hover me)</ConfirmButton>',
+});
+
+export const Listener = () => ({
+	components: { ConfirmButton },
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<ConfirmButton color="error" @click="x = 2">click me to change: {{ x }}</ConfirmButton>
+	`,
+});
+
+export const Iconed = () => ({
+	components: { ConfirmButton },
+	template: `<div>
+		<ConfirmButton :icon="true">default icon</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="information-outline">information-outline</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="account-search">account-search</ConfirmButton>
+	</div>`,
+});
+
+Primary.storyName = 'Básico';
+HtmlMarkup.storyName = 'Html Markup';
+Props.storyName = 'Props';
+Listener.storyName = 'Listener';
+Iconed.storyName = 'Icon';

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -0,0 +1,46 @@
+<template>
+	<v-btn v-bind="$attrs" v-on="$listeners" color="secondary">
+		<v-icon v-if="icon" class="mr-3">
+			{{ iconPath }}
+		</v-icon>
+		<slot></slot>
+	</v-btn>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+import VIcon from 'vuetify/lib/components/VIcon';
+
+export default Vue.extend({
+	name: 'farm-btn-confirm',
+	components: {
+		VBtn,
+		VIcon,
+	},
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Show icon
+		 */
+		icon: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Custom icon
+		 */
+		customIcon: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		iconPath() {
+			if (!this.customIcon) {
+				return 'mdi-check';
+			}
+			return `mdi-${this.customIcon}`;
+		},
+	},
+});
+</script>

package/src/components/Buttons/ConfirmButton/__tests__/ConfirmButton.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import ConfirmButton from '../ConfirmButton';
+
+describe('ConfirmButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ConfirmButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should return default icon', () => {
+			wrapper.setProps({
+				icon: true,
+			});
+			expect(component.iconPath).toEqual('mdi-check');
+		});
+
+		it('Should return custom icon', async () => {
+			await wrapper.setProps({
+				icon: true,
+				customIcon: 'information',
+			});
+			expect(component.iconPath).toEqual('mdi-information');
+		});
+	});
+});

package/src/components/Buttons/ConfirmButton/index.js

@@ -0,0 +1,4 @@
+import ConfirmButton from './ConfirmButton';
+
+export { ConfirmButton };
+export default ConfirmButton;

package/src/components/Buttons/DangerButton/DangerButton.stories.js

@@ -0,0 +1,48 @@
+import DangerButton from './DangerButton.vue';
+
+export default {
+	title: 'Example/Buttons/DangerButton',
+	component: DangerButton,
+};
+
+export const Primary = () => ({
+	components: { DangerButton },
+	template: '<DangerButton>Danger Button</DangerButton>',
+});
+
+export const HtmlMarkup = () => ({
+	components: { DangerButton },
+	template: '<DangerButton><em>I am italic</strong></em></DangerButton>',
+});
+
+export const Props = () => ({
+	components: { DangerButton },
+	template: '<DangerButton title="custom title">custom title (hover me)</DangerButton>',
+});
+
+export const Listener = () => ({
+	components: { DangerButton },
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<DangerButton color="error" @click="x = 2">click me to change: {{ x }}</DangerButton>
+	`,
+});
+
+export const Iconed = () => ({
+	components: { DangerButton },
+	template: `<div>
+		<DangerButton :icon="true">default icon</DangerButton>
+		<DangerButton :icon="true" customIcon="information-outline">information-outline</DangerButton>
+		<DangerButton :icon="true" customIcon="account-search">account-search</DangerButton>
+	</div>`,
+});
+
+Primary.storyName = 'Básico';
+HtmlMarkup.storyName = 'Html Markup';
+Props.storyName = 'Props';
+Listener.storyName = 'Listener';
+Iconed.storyName = 'Icon';

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -0,0 +1,46 @@
+<template>
+	<v-btn v-bind="$attrs" v-on="$listeners" color="error">
+		<v-icon v-if="icon" class="mr-3">
+			{{ iconPath }}
+		</v-icon>
+		<slot></slot>
+	</v-btn>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+import VIcon from 'vuetify/lib/components/VIcon';
+
+export default Vue.extend({
+	name: 'farm-btn-danger',
+	components: {
+		VBtn,
+		VIcon,
+	},
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Show icon
+		 */
+		icon: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Custom icon
+		 */
+		customIcon: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		iconPath() {
+			if (!this.customIcon) {
+				return 'mdi-trash-can-outline';
+			}
+			return `mdi-${this.customIcon}`;
+		},
+	},
+});
+</script>

package/src/components/Buttons/DangerButton/__tests__/DangerButton.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import DangerButton from '../DangerButton';
+
+describe('DangerButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DangerButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should return default icon', () => {
+			wrapper.setProps({
+				icon: true,
+			});
+			expect(component.iconPath).toEqual('mdi-trash-can-outline');
+		});
+
+		it('Should return custom icon', async () => {
+			await wrapper.setProps({
+				icon: true,
+				customIcon: 'information',
+			});
+			expect(component.iconPath).toEqual('mdi-information');
+		});
+	});
+});

package/src/components/Buttons/DangerButton/index.js

@@ -0,0 +1,4 @@
+import DangerButton from './DangerButton';
+
+export { DangerButton };
+export default DangerButton;

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -0,0 +1,38 @@
+import DefaultButton from './DefaultButton.vue';
+
+export default {
+	title: 'Example/Buttons/Default',
+	component: DefaultButton,
+};
+
+export const Primary = () => ({
+	components: { DefaultButton },
+	template: '<DefaultButton>Pass text as slot</DefaultButton>',
+});
+
+export const HtmlMarkup = () => ({
+	components: { DefaultButton },
+	template: '<DefaultButton><em>I am italic</strong></em></DefaultButton>',
+});
+
+export const Props = () => ({
+	components: { DefaultButton },
+	template: '<DefaultButton color="secondary">props</DefaultButton>',
+});
+
+export const Listener = () => ({
+	components: { DefaultButton },
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<DefaultButton color="error" @click="x = 2">click me to change: {{ x }}</DefaultButton>
+	`,
+});
+
+Primary.storyName = 'Básico';
+HtmlMarkup.storyName = 'Html Markup';
+Props.storyName = 'Props';
+Listener.storyName = 'Listener';

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -0,0 +1,19 @@
+<template>
+	<v-btn v-bind="$attrs" v-on="$listeners">
+		<slot></slot>
+	</v-btn>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+
+export default Vue.extend({
+	name: 'farm-btn',
+	inheritAttrs: true, 
+	props: ['props'],
+
+	components: {
+		VBtn,
+	},
+});
+</script>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import DefaultButton from '../DefaultButton';
+
+describe('DefaultButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DefaultButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/DefaultButton/index.js

@@ -0,0 +1,4 @@
+import DefaultButton from './DefaultButton';
+
+export { DefaultButton };
+export default DefaultButton;

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -0,0 +1,22 @@
+.header-text {
+	position: relative;
+	i {
+		position: absolute;
+		right: -20px;
+		top: -1px;
+	}
+
+	.v-icon {
+		&.v-icon--asc {
+			transform: rotateX(180deg);
+		}
+	}
+}
+
+th.sortable:not(.active) {
+	&:hover {
+		.v-icon {
+			opacity: 0.5 !important;
+		}
+	}
+}

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -0,0 +1,8 @@
+import DataTableHeader from './DataTableHeader.vue';
+
+export default {
+	title: 'Example/Table/DataTableHeader',
+	component: DataTableHeader,
+};
+
+Primary.storyName = 'Básico';

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -0,0 +1,117 @@
+<template>
+	<thead>
+		<tr>
+			<th
+				v-for="(item, $index) in headers"
+				:key="item.value"
+				v-bind:class="[
+					item.sortable ? 'sortable' : '',
+					sortClick[$index].clicked ? 'active' : '',
+					item.sortable && sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC',
+				]"
+				v-bind:style="{
+					textAlign: item.align,
+					width: thWidth(item),
+				}"
+				@click="item.sortable ? clickSort(item.value, $index) : ''"
+				@mouseover="changeShow($index)"
+				@mouseout="changeHidden($index)"
+			>
+				<span class="header-text">
+					{{ item.text }}
+
+					<v-icon
+						v-if="item.sortable && sortClick[$index].show"
+						v-bind:class="[
+							sortClick[$index][item.value] ? 'v-icon--desc' : 'v-icon--asc',
+						]"
+						small
+					>
+						mdi-sort-descending
+					</v-icon>
+				</span>
+			</th>
+		</tr>
+	</thead>
+</template>
+
+<script>
+import Vue from 'vue';
+import VIcon from 'vuetify/lib/components/VIcon';
+export default Vue.extend({
+	name: 'farm-datatable-header',
+	components: {
+		VIcon,
+	},
+	props: {
+		headers: {
+			type: Array,
+			require: true,
+		},
+		sortClick: {
+			type: Array,
+			require: true,
+		},
+		fistSelected: {
+			type: Boolean,
+			default: () => false,
+		},
+	},
+	methods: {
+		getTypeSort(value) {
+			return value ? 'DESC' : 'ASC';
+		},
+		clickSort(value, index) {
+			this.removeClicked();
+			this.sortClick[index].clicked = true;
+			this.sortClick[index].show = true;
+			this.sortClick[index][value] = !this.sortClick[index][value];
+			this.sortClick[index].descending = this.getTypeSort(this.sortClick[index][value]);
+			this.$emit('onClickSort', this.sortClick[index]);
+		},
+		changeShow(index) {
+			setTimeout(() => {
+				this.sortClick[index].show = true;
+			}, 10);
+		},
+		changeHidden(index) {
+			setTimeout(() => {
+				if (this.sortClick[index].clicked) {
+					return;
+				}
+				this.sortClick[index].show = false;
+			}, 10);
+		},
+		removeClicked() {
+			for (let i = 0; i < this.sortClick.length; i += 1) {
+				this.sortClick[i].clicked = false;
+				this.sortClick[i].show = false;
+			}
+		},
+		checkFistSelected(index) {
+			if (index === 0) {
+				return this.fistSelected;
+			}
+			return false;
+		},
+		thWidth(item) {
+			return item.width ? item.width + 'px' : 'auto';
+		},
+	},
+	created() {
+		for (let i = 0; i < this.headers.length; i += 1) {
+			this.sortClick.push({
+				[this.headers[i].value]: false,
+				descending: 'ASC',
+				field: this.headers[i].value,
+				clicked: this.checkFistSelected(i),
+				show: this.checkFistSelected(i),
+			});
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './DataTableHeader.scss';
+</style>

package/src/components/DataTableHeader/index.js

@@ -0,0 +1,3 @@
+import DataTableHeader from './DataTableHeader';
+
+export default DataTableHeader;

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

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import FilePicker from '../FilePicker';
+
+describe('FilePicker component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(FilePicker);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Component methods', () => {
+		describe('fileChange', () => {
+			it('Should emit event with a file', () => {
+				wrapper.vm.fileChange([1]);
+				expect(wrapper.emitted().onFileChange[0]).toBeDefined();
+			});
+
+			it('Should not emit', () => {
+				wrapper.vm.fileChange([]);
+				expect(wrapper.emitted().onFileChange).toBeUndefined();
+			});
+		});
+
+		describe('handlerFunctionHighlight', () => {
+			it('Should add class', () => {
+				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'add');
+				wrapper.vm.handlerFunctionHighlight();
+				expect(spyObj).toHaveBeenCalled();
+			});
+		});
+
+		describe('handlerFunctionUnhighlight', () => {
+			it('Should add class', () => {
+				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'remove');
+				wrapper.vm.handlerFunctionUnhighlight();
+				expect(spyObj).toHaveBeenCalled();
+			});
+		});
+
+		describe('addListeners', () => {
+			it('Should add listeners', () => {
+				const spyObj = jest.spyOn(wrapper.vm.dropArea, 'addEventListener');
+				wrapper.vm.addListeners();
+				expect(spyObj).toHaveBeenCalled();
+			});
+		});
+	});
+});

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Loader from '../Loader';
+
+describe('Loader component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Loader);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/main.js

@@ -1,5 +1,6 @@
 import DataTableEmptyWrapper from './components/DataTableEmptyWrapper';
 import DataTablePaginator from './components/DataTablePaginator';
+import DataTableHeader from './components/DataTableHeader';
 import AlertReload from './components/AlertReload';
 import MainFilter from './components/MainFilter';
 import Loader from './components/Loader';
@@ -15,10 +16,12 @@ import PromptUserToConfirm from './components/PromptUserToConfirm';
 import ModalPromptUser from './components/ModalPromptUser';
 
 import TableContextMenu from './components/TableContextMenu';
+import DefaultButton from './components/Buttons/DefaultButton/DefaultButton.vue';
 
 export {
 	DataTableEmptyWrapper,
 	DataTablePaginator,
+	DataTableHeader,
 	MainFilter,
 	Loader,
 	FilePicker,
@@ -33,8 +36,12 @@ export {
 	PromptUserToConfirm,
 	TableContextMenu,
 	ModalPromptUser,
+	DefaultButton,
 };
 
+export * from './components/Buttons/DefaultButton/';
+export * from './components/Buttons/DangerButton/';
+export * from './components/Buttons/ConfirmButton';
 export * from './components/Buttons/ExportButton/';
 export * from './components/Buttons/ImportButton/';
 export * from './components/Buttons/ToggleButton/';