@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -0,0 +1,261 @@
+<template>
+	<section ref="container" id="droparea-container">
+		<input
+			type="file"
+			name="file"
+			multiple
+			ref="upload"
+			:accept="acceptedFileTypes"
+			@change="fileChange($event.target.files)"
+		/>
+		<div v-if="!hasFiles" class="selectfile-container">
+			<farm-icon class="upload-icon" color="primary" size="lg" @click="addMoreFiles">
+				cloud-upload-outline
+			</farm-icon>
+			<farm-subtitle :type="2" variation="regular" color="primary">
+				Arraste e solte o arquivo <br />
+				ou clique aqui
+			</farm-subtitle>
+		</div>
+
+		<ul
+			v-if="downloadFiles.length"
+			class="listFilesStyled listFilesStyled--download"
+			:class="{
+				'listFilesStyled--margin-bottom': files.length === 0,
+			}"
+		>
+			<li class="itemFilesStyled" v-for="file in downloadFiles" :key="file.id">
+				<div class="itemFilesContentStyled">
+					<div class="fileDocumentStyled">
+						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
+					</div>
+					<div>
+						<farm-bodysmall color="black" color-variation="50">
+							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
+						</farm-bodysmall>
+					</div>
+				</div>
+				<div class="itemFilesContentButtonStyled">
+					<farm-btn
+						plain
+						color="black"
+						variation="50"
+						class="download-button"
+						title="Baixar Arquivo"
+						@click.prevent="onDownload(file.id)"
+					>
+						<farm-icon class="download-button__icon mr-sm-3" size="md"
+							>download</farm-icon
+						>
+
+						<span class="download-button__text">Baixar Arquivo</span>
+					</farm-btn>
+				</div>
+			</li>
+		</ul>
+
+		<ul class="listFilesStyled" v-if="files.length > 0">
+			<li class="itemFilesStyled" v-for="(file, index) in files" :key="index">
+				<div class="itemFilesContentStyled">
+					<div class="fileDocumentStyled">
+						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
+					</div>
+					<div>
+						<farm-bodysmall color="black" color-variation="50">
+							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
+						</farm-bodysmall>
+					</div>
+				</div>
+				<div class="itemFilesContentButtonStyled">
+					<farm-btn
+						icon
+						title="Remover"
+						color="black"
+						variation="50"
+						size="md"
+						@click.prevent="remove(index)"
+					>
+						<farm-icon size="md">close</farm-icon>
+					</farm-btn>
+					<farm-icon size="md" color="neutral" v-if="file.success">check</farm-icon>
+				</div>
+			</li>
+		</ul>
+		<farm-btn
+			v-if="canAddMoreFiles && hasFiles"
+			outlined
+			title="Escolher Arquivo"
+			class="farm-btn--responsive"
+			:disabled="disabledButton"
+			@click="addMoreFiles"
+		>
+			Escolher Arquivo
+		</farm-btn>
+	</section>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+import { sizeOf } from '@farm-investimentos/front-mfe-libs-ts';
+
+export type DownloadFiles = {
+	id: number | string;
+	name: string;
+	size: number;
+};
+
+export default {
+	name: 'farm-multiple-filepicker',
+
+	props: {
+		/*
+		 * Accepted file types
+		 */
+		acceptedFileTypes: {
+			type: String,
+			default: '*',
+		},
+		/**
+		 * Max file size (in MB)
+		 */
+		maxFileSize: {
+			default: 0,
+		},
+		/**
+		 * Max files number
+		 */
+		maxFilesNumber: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * File List from files who could be download
+		 */
+		downloadFiles: {
+			type: Array as PropType<Array<DownloadFiles>>,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			dropArea: null,
+			files: [],
+			sizeOf,
+		};
+	},
+	computed: {
+		hasFiles(): boolean {
+			return this.files.length > 0 || this.downloadFiles.length > 0;
+		},
+		canAddMoreFiles(): boolean {
+			return this.filesLength < this.maxFilesNumber;
+		},
+		filesLength(): number {
+			return this.files.length + this.downloadFiles.length;
+		},
+		disabledButton(): boolean {
+			if (this.maxFilesNumber === 0) return false;
+			return this.filesLength >= this.maxFilesNumber;
+		},
+	},
+	mounted() {
+		this.dropArea = this.$refs.container;
+		this.addListeners();
+	},
+	methods: {
+		addMoreFiles(): void {
+			this.$refs.container.querySelector('input').click();
+		},
+		reset(): void {
+			this.$refs.container.querySelector('input').value = '';
+			this.files = [];
+		},
+		fileChange(fileList): void {
+			this.files.push(...fileList);
+		},
+		handlerFunctionHighlight(): void {
+			this.dropArea.classList.add('highlight');
+		},
+		handlerFunctionUnhighlight(): void {
+			this.dropArea.classList.remove('highlight');
+		},
+		addListeners(): void {
+			this.dropArea.addEventListener('dragenter', this.handlerFunctionHighlight, false);
+			this.dropArea.addEventListener('dragleave', this.handlerFunctionUnhighlight, false);
+			this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
+			this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
+		},
+
+		remove(index: number): void {
+			if (this.files.length === 1) this.reset();
+			this.files.splice(index, 1);
+		},
+
+		onDownload(id: number): void {
+			this.$emit('onDownload', id);
+		},
+	},
+	watch: {
+		files(newValue) {
+			if (newValue.length === 0 && this.downloadFiles.length === 0) {
+				this.$emit('onFileChange', newValue);
+				return;
+			}
+			const invalidTypeArray = newValue.filter(file => {
+				const type = file.type;
+
+				return (
+					this.acceptedFileTypes !== '*' &&
+					(this.acceptedFileTypes.indexOf(file.type) === -1 || !type)
+				);
+			});
+
+			if (invalidTypeArray.length > 0) {
+				const validTypeArray = newValue.filter(file => {
+					const type = file.type;
+					if (this.acceptedFileTypes.indexOf(file.type) === -1 || !type) {
+						return false;
+					}
+					return true;
+				});
+				this.$emit('onInvalidFiles', [...invalidTypeArray]);
+				this.files = validTypeArray;
+				return;
+			}
+
+			if (
+				!!this.maxFilesNumber &&
+				newValue.length + this.downloadFiles.length > this.maxFilesNumber
+			) {
+				this.files = newValue.slice(0, this.maxFilesNumber - this.downloadFiles.length);
+				this.$emit('onMaxFilesNumberWarning');
+				return;
+			}
+
+			if (this.maxFileSize > 0) {
+				const files = newValue.filter(file => {
+					const sizeInMB = file.size / (1024 * 1024);
+					if (sizeInMB > this.maxFileSize) return true;
+
+					return false;
+				});
+				if (files.length > 0) {
+					this.files = newValue.filter(file => {
+						const sizeInMB = file.size / (1024 * 1024);
+						if (sizeInMB < this.maxFileSize) return true;
+
+						return false;
+					});
+
+					this.$emit('onMaxFileSizeWarning');
+					return;
+				}
+			}
+			this.$emit('onFileChange', this.files);
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+@import './MultipleFilePicker.scss';
+</style>

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

@@ -0,0 +1,184 @@
+import { shallowMount } from '@vue/test-utils';
+
+import MultipleFilePicker from '../index';
+
+describe('MultipleFilePicker component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultipleFilePicker, {
+			propsData: {
+				maxFileSize: 1,
+				maxFilesNumber: 10,
+				downloadFiles: [],
+				acceptedFileTypes: 'application/pdf,image/jpeg,image/jpg,image/png',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('MultipleFilePicker created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		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();
+			});
+		});
+		
+		describe('fileChange', () => {
+			it('should open file input', () => {
+				const file = new File([], 'test');
+				component.fileChange([file]);
+				expect(component.files).toEqual([file]);
+			});
+		});
+
+		describe('reset', () => {
+			it('should reset', () => {
+				const file = new File([], 'test');
+				component.files = [file];
+				component.reset();
+				expect(component.files.length).toEqual(0);
+			});
+		});
+
+		describe('remove', () => {
+			it('should remove an item and call reset method when files length is 1', () => {
+				const spy = jest.spyOn(component, 'reset');
+				const file = new File([], 'test');
+				component.files = [file];
+				component.remove(0);
+				expect(component.files).toEqual([]);
+				expect(spy).toHaveBeenCalled();
+			});
+
+			it('should remove an item', () => {
+				const spy = jest.spyOn(component, 'reset');
+				const file = new File([], 'test');
+				const file2 = new File([], 'test2');
+				component.files = [file, file2];
+				component.remove(0);
+				expect(component.files).toEqual([file2]);
+				expect(spy).not.toHaveBeenCalled();
+			});
+		});
+		describe('onDownload', () => {
+			it('should remove an item', () => {
+				component.onDownload(1);
+				expect(wrapper.emitted().onDownload[0][0]).toBe(1);
+			});
+		});
+	});
+
+	describe('Computed', () => {
+		describe('hasFiles', () => {
+			it('should return false', () => {
+				expect(component.hasFiles).toBeFalsy();
+			});
+
+			it('should return true when files length is more than zero', () => {
+				component.files = [new File([], 'test')];
+				expect(component.hasFiles).toBeTruthy();
+			});
+
+			it('should return true when files length is more than zero', async () => {
+				await wrapper.setProps({
+					downloadFiles: [new File([], 'test')],
+				});
+				expect(component.hasFiles).toBeTruthy();
+			});
+		});
+		describe('filesLength', () => {
+			it('should return files and downloadFiles length', async () => {
+				await wrapper.setProps({
+					downloadFiles: [new File([], 'test')],
+				});
+				component.files = [new File([], 'test2')];
+				expect(component.filesLength).toBe(2);
+			});
+		});
+		describe('disabledButton', () => {
+			it('should return files and downloadFiles length', async () => {
+				await wrapper.setProps({
+					maxFilesNumber: 0,
+				});
+
+				expect(component.disabledButton).toBeFalsy();
+			});
+
+			it('should return files and downloadFiles length', async () => {
+				await wrapper.setProps({
+					maxFilesNumber: 2,
+					downloadFiles: [new File([], 'test')],
+				});
+				component.files = [new File([], 'test2')];
+
+				expect(component.disabledButton).toBeTruthy();
+			});
+		});
+
+		describe('canAddMoreFiles', () => {
+			it('should return files and downloadFiles length', async () => {
+				await wrapper.setProps({
+					maxFilesNumber: 2,
+					downloadFiles: [new File([], 'test')],
+				});
+				component.files = [new File([], 'test2')];
+
+				expect(component.canAddMoreFiles).toBeFalsy();
+			});
+		});
+	});
+
+	describe('Watch', () => {
+		describe('files', () => {
+			it('should emit an onMaxFilesNumberWarning event when there are more files added who maxFilesNumber', () => {
+				wrapper.vm.$options.watch.files.call(
+					component,
+					Array.from(Array(11).keys()).map(() => ({ type: 'image/jpeg' }))
+				);
+				expect(wrapper.emitted().onMaxFilesNumberWarning).toBeDefined();
+			});
+
+			it('should emit an onMaxFileSizeWarning event when one file size is bigger than maxFileSize prop', async () => {
+				await wrapper.setProps({
+					maxFileSize: 3,
+				});
+				wrapper.vm.$options.watch.files.call(component, [
+					{ size: 4145728, type: 'image/jpeg' },
+				]);
+				expect(wrapper.emitted().onMaxFileSizeWarning).toBeDefined();
+			});
+
+			it('should not add invalid types files', () => {
+				wrapper.vm.$options.watch.files.call(
+					component,
+					Array.from(Array(1).keys()).map(() => ({ type: 'image/test' }))
+				);
+				expect(component.files).toEqual([]);
+			});
+		});
+	});
+});

package/src/components/MultipleFilePicker/index.ts

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

package/src/components/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -0,0 +1,32 @@
+import MultipleSelectShortener from './MultipleSelectShortener';
+
+export default {
+	title: 'Display/MultipleSelectShortener',
+	component: MultipleSelectShortener,
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			items: {
+				id: 0,
+				label: `Convidar`,
+			},
+		};
+	},
+	template: '<MultipleSelectShortener :item="items" :index="0" :itemsLength="1"/>',
+});
+
+export const Secondary = () => ({
+	data() {
+		return {
+			items: [
+				{
+					id: 0,
+					label: `Convidar`,
+				},
+			],
+		};
+	},
+	template: '<MultipleSelectShortener :item="{...items}" :index="1" :itemsLength="3"/>',
+});

package/src/components/MultipleSelectShortener/MultipleSelectShortener.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="align-center">
+		<span class="mr-1 label" v-if="index === 0">{{ item[labelKey] }}</span>
+		<span class="label" v-if="index === 1">
+			(+{{ itemsLength - 1 }} {{ itemsLength > 2 ? 'outros' : 'outro' }} )
+		</span>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'farm-multiple-select-shortener',
+	props: {
+		/**
+		 * Key used to get value from item
+		 */
+		labelKey: {
+			type: String,
+			default: 'label',
+		},
+		/**
+		 * Item from v-select
+		 */
+		item: {
+			type: Object,
+		},
+		/**
+		 * Index from slot
+		 */
+		index: {
+			type: Number,
+		},
+		/**
+		 * Items count
+		 */
+		itemsLength: {
+			type: Number,
+		},
+	},
+};
+</script>
+
+<style scoped>
+.label {
+	font-size: 0.75rem;
+}
+</style>

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

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import MultipleSelectShortener from '../index';
+
+describe('MultipleSelectShortener component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultipleSelectShortener, {
+			propsData: {
+				item: {},
+				index: 0,
+				labelKey: '',
+				itemsLength: 0,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/MultipleSelectShortener/index.ts

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

package/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,25 @@
+@import '../../configurations/variables';
+
+$radius: 5px;
+
+.farm-progressbar {
+    width: 100%;
+    height: 5px;
+    border-radius: $radius;
+
+    > div {
+        border-radius: $radius;
+        height: 100%;
+    }
+
+    @each $color in $colors {
+        &#{'.farm-progressbar--' + $color} {
+            background-color: var(--farm-#{$color}-base);
+        }
+
+        &#{'.farm-progressbar--value-' + $color}>div {
+            background-color: var(--farm-#{$color}-base);
+        }
+    }
+
+}

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,49 @@
+// import { withDesign } from 'storybook-addon-designs';
+import ProgressBar from './ProgressBar.vue';
+
+export default {
+	title: 'Feedback/ProgressBar',
+	component: ProgressBar,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		docs: {
+			description: {
+				component: `ProgressBar<br />
+				selector: <em>farm-progressbar</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar :value="val" />',
+});
+
+export const CustomColors = () => ({
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar :value="val" background-color="info" value-color="secondary" />',
+});
+
+export const CustomHexaColors = () => ({
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar :value="val" background-color="#FFFF00" value-color="#00FF00" />',
+});