@farm-investimentos/front-mfe-components 11.6.2 → 11.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.6.2",
+	"version": "11.7.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/MainFilter/MainFilter.scss

@@ -3,7 +3,7 @@ section {
 	flex-direction: row;
 
 	.farm-btn {
-		margin-left: 1rem;
+		margin-left: 16px;
 	}
 
 	fieldset {

package/src/components/MainFilter/MainFilter.vue

@@ -12,7 +12,7 @@
 					</template>
 				</farm-tooltip>
 			</farm-label>
-			<farm-textfield v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
+			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -64,6 +64,9 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * Toggle filters
+		 */
 		showFilters: {
 			type: Boolean,
 			default: false,
@@ -100,18 +103,20 @@ export default Vue.extend({
 		onFilterClick() {
 			this.$emit('onClick');
 		},
+		isInvalidKey(keyCode: Number) {
+			return (
+				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
+				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
+				(keyCode > 105 && keyCode < 186)
+			);
+		},
 		onKeyUp(event: KeyboardEvent) {
 			const keyCode = event.keyCode;
 			if (keyCode === 13) {
 				this.$emit('onEnter', (event.target as HTMLInputElement).value);
 				return false;
 			}
-
-			if (
-				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
-				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
-				(keyCode > 105 && keyCode < 186)
-			) {
+			if (this.isInvalidKey(keyCode)) {
 				return false;
 			}
 			if (this.timer) {
@@ -119,7 +124,8 @@ export default Vue.extend({
 				this.timer = null;
 			}
 			this.timer = setTimeout(() => {
-				this.$emit('onInputChange', (event.target as HTMLInputElement).value);
+				console.log(this.inputValue);
+				this.$emit('onInputChange', this.inputValue);
 			}, 750);
 		},
 	},

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

@@ -19,6 +19,10 @@ describe('MainFilter component', () => {
 			component.onFilterClick();
 			expect(wrapper.emitted().onClick).toBeTruthy();
 		});
+
+		it('Should check if keyCode is valid', () => {
+			expect(component.isInvalidKey(120)).toBeTruthy();
+		});
 	});
 
 	describe('computed properties', () => {

package/src/components/ResourceMetaInfo/ResourceMetaInfo.scss

@@ -0,0 +1,14 @@
+.farm-resource-metainfo {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+
+	& div {
+		align-items: center;
+		display: inline-flex;
+
+		& .farm-icon {
+			margin-right: 8px;
+		}
+	}
+}

package/src/components/ResourceMetaInfo/ResourceMetaInfo.stories.js

@@ -0,0 +1,119 @@
+import ResourceMetaInfo from './ResourceMetaInfo.vue';
+
+export default {
+	title: 'Display/ResourceMetaInfo',
+	component: ResourceMetaInfo,
+	parameters: {
+		docs: {
+			description: {
+				component: `ResourceMetaInfo<br />
+				selector: <em>farm-resource-metainfo</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				updatedAt: '21/10/2022',
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const WithoutUpdate = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				updatedAt: null,
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const WithoutCreate = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: '21/10/2022',
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const ShowUpdateWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-update />
+	</div>`,
+});
+
+export const ShowCreateWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-create />
+	</div>`,
+});
+
+export const ShowBothWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-create show-empty-update />
+	</div>`,
+});

package/src/components/ResourceMetaInfo/ResourceMetaInfo.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="farm-resource-metainfo">
+		<div v-if="showCreate">
+			<farm-icon color="gray" size="14">calendar-blank</farm-icon>
+			<farm-caption color="gray" tag="p" variation="regular"
+				>Data de cadastro:
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedCreatedAt
+				}}</farm-caption>
+			</farm-caption>
+		</div>
+		<div v-if="showUpdate">
+			<farm-icon color="gray" size="14">history</farm-icon>
+
+			<farm-caption color="gray" tag="p" variation="regular"
+				>Última atualização feita por
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUsername
+				}}</farm-caption
+				>, dia
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUpdatedAt
+				}}</farm-caption>
+				às
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUpdatedHours
+				}}</farm-caption>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { computed, PropType, toRefs } from 'vue';
+import Icon from '../Icon';
+import { Caption } from '../Typography';
+
+interface ResourceMetaInfoProps {
+	createdAt: string;
+	updatedAt: string;
+	username: string;
+	updatedHours: string;
+}
+
+export default Vue.extend({
+	name: 'farm-resource-metainfo',
+	components: {
+		'farm-icon': Icon,
+		'farm-caption': Caption,
+	},
+	props: {
+		infos: {
+			required: true,
+			type: Object as PropType<ResourceMetaInfoProps>,
+		},
+		showEmptyCreate: {
+			type: Boolean,
+			default: false,
+		},
+		showEmptyUpdate: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const { infos, showEmptyCreate, showEmptyUpdate } = toRefs(props);
+
+		const showUpdate = computed(
+			() =>
+				(infos.value.updatedAt !== null && infos.value.updatedAt !== undefined) ||
+				showEmptyUpdate.value
+		);
+
+		const showCreate = computed(
+			() =>
+				(infos.value.createdAt !== null && infos.value.createdAt !== undefined) ||
+				showEmptyCreate.value
+		);
+
+		const formattedCreatedAt = computed(() => infos.value.createdAt || 'N/A');
+
+		const formattedUpdatedAt = computed(() => infos.value.updatedAt || 'N/A');
+
+		const formattedUsername = computed(() => infos.value.username || 'N/A');
+
+		const formattedUpdatedHours = computed(() => infos.value.updatedHours || 'N/A');
+
+		return {
+			showUpdate,
+			showCreate,
+			formattedCreatedAt,
+			formattedUpdatedAt,
+			formattedUsername,
+			formattedUpdatedHours,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'ResourceMetaInfo.scss';
+</style>

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

@@ -0,0 +1,128 @@
+import { shallowMount } from '@vue/test-utils';
+import ResourceMetaInfo from '../ResourceMetaInfo.vue';
+
+describe('ResourceMetaInfo component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ResourceMetaInfo, {
+			propsData: {
+				infos: {
+					createdAt: '21/10/2022',
+					updatedAt: '21/10/2022',
+					username: 'Test User',
+					updatedHours: '10:10:10',
+				},
+			},
+		});
+
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed', () => {
+		describe('showUpdate', () => {
+			it('should return true when it has an update date', () => {
+				expect(component.showUpdate).toBeTruthy();
+			});
+
+			it('should return false when it has not an update date', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+				});
+				expect(component.showUpdate).toBeFalsy();
+			});
+
+			it('should return true when it has not an update date but showEmptyUpdate is true', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+					showEmptyUpdate: true,
+				});
+				expect(component.showUpdate).toBeTruthy();
+			});
+		});
+
+		describe('showCreate', () => {
+			it('should return true when it has an create date', () => {
+				expect(component.showCreate).toBeTruthy();
+			});
+
+			it('should return false when it has not an create date', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+				});
+				expect(component.showCreate).toBeFalsy();
+			});
+
+			it('should return true when it has not an update date but showEmptyCreate is true', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+					showEmptyCreate: true,
+				});
+				expect(component.showCreate).toBeTruthy();
+			});
+		});
+
+		describe('formattedCreatedAt', () => {
+			it('should return infos createdAt', () => {
+				expect(component.formattedCreatedAt).toBe('21/10/2022');
+			});
+
+			it('should return N/A when infos createdAt is empty', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+				});
+				expect(component.formattedCreatedAt).toBe('N/A');
+			});
+		});
+
+		describe('formattedUpdatedAt', () => {
+			it('should return infos updatedAt', () => {
+				expect(component.formattedUpdatedAt).toBe('21/10/2022');
+			});
+
+			it('should return N/A when infos updatedAt is empty', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+				});
+				expect(component.formattedUpdatedAt).toBe('N/A');
+			});
+		});
+
+		describe('formattedUsername', () => {
+			it('should return infos updatedAt', () => {
+				expect(component.formattedUsername).toBe('Test User');
+			});
+
+			it('should return N/A when infos username is empty', async () => {
+				await wrapper.setProps({
+					infos: { username: null },
+				});
+				expect(component.formattedUsername).toBe('N/A');
+			});
+		});
+
+		describe('formattedUpdatedHours', () => {
+			it('should return infos updatedHours', () => {
+				expect(component.formattedUpdatedHours).toBe('10:10:10');
+			});
+
+			it('should return N/A when infos updatedHours is empty', async () => {
+				await wrapper.setProps({
+					infos: { updatedHours: null },
+				});
+				expect(component.formattedUpdatedHours).toBe('N/A');
+			});
+		});
+	});
+});

package/src/components/ResourceMetaInfo/index.ts

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

package/src/components/Tabs/Tabs.stories.js

@@ -3,6 +3,17 @@ import Tabs from './Tabs.vue';
 export default {
     title: 'Display/Tabs',
     component: Tabs,
+    parameters: {
+		docs: {
+			description: {
+				component: `Tabs<br />
+				selector: <em>farm-tabs</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -156,12 +156,14 @@ export default Vue.extend({
 
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
-		const onKeyUp = () => {
+		const onKeyUp = (event: Event) => {
 			isTouched.value = true;
+			emit('keyup', event);
 		};
 
-		const onBlur = () => {
+		const onBlur = (event: Event) => {
 			isBlured.value = true;
+			emit('blur', event);
 		};
 
 		const reset = () => {

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `BodyText<br />
-				selector: <em>farm-bodytext</em>
+				selector: <em>farm-bodytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -37,7 +38,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-bodytext': BodyText },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

package/src/components/Typography/Caption/Caption.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Caption<br />
-				selector: <em>farm-caption</em>
+				selector: <em>farm-caption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/Heading/Heading.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Heading<br />
-				selector: <em>farm-heading</em>
+				selector: <em>farm-heading</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/OverlayText/OverlayText.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `OverlayText<br />
-				selector: <em>farm-overlaytext</em>
+				selector: <em>farm-overlaytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Subtitle<br />
-				selector: <em>farm-subtitle</em>
+				selector: <em>farm-subtitle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -16,7 +17,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			types: [1, 2],
@@ -37,7 +37,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

package/src/main.ts

@@ -23,6 +23,7 @@ import CardContext from './components/CardContext';
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
 import IdCaption from './components/IdCaption';
+import ResourceMetaInfo from './components/ResourceMetaInfo';
 
 export {
 	DataTableEmptyWrapper,
@@ -47,6 +48,7 @@ export {
 	CardContext,
 	Collapsible,
 	IdCaption,
+	ResourceMetaInfo,
 };
 
 export * from './components/AlertBox';
@@ -94,4 +96,3 @@ export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
-