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

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

@@ -0,0 +1,138 @@
+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 WithCreatedBy = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				createdBy: 'Test User',
+				createdHours: '10:10:10',
+				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,140 @@
+<template>
+	<div class="farm-resource-metainfo">
+		<div v-if="showCreate">
+			<farm-icon color="black" variation="40" size="sm">calendar-blank</farm-icon>
+			<farm-caption
+				v-if="!showCreatedBy && !showCreatedHours"
+				color="black"
+				color-variation="40"
+				variation="regular"
+			>
+				Data de cadastro:
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedCreatedAt }}</b
+					>.
+				</farm-caption>
+			</farm-caption>
+
+			<farm-caption v-else color="black" color-variation="40" variation="regular">
+				Cadastro realizado por
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedCreatedBy }}</b
+					>, dia <b>{{ formattedCreatedAt }}</b> às <b>{{ formattedCreatedHours }}</b
+					>.
+				</farm-caption>
+			</farm-caption>
+		</div>
+		<div v-if="showUpdate">
+			<farm-icon color="black" variation="40" size="sm">history</farm-icon>
+
+			<farm-caption color="black" color-variation="40" variation="regular">
+				Última atualização feita por
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedUsername }}</b> </farm-caption
+				>, dia
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedUpdatedAt }}</b>
+				</farm-caption>
+				às
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedUpdatedHours }}</b
+					>.
+				</farm-caption>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { computed, PropType, toRefs } from 'vue';
+
+interface ResourceMetaInfoProps {
+	createdAt: string;
+	createdBy?: string;
+	updatedAt: string;
+	username: string;
+	updatedHours: string;
+	createdHours?: string;
+}
+
+export default {
+	name: 'farm-resource-metainfo',
+	props: {
+		/**
+		 * Object with the metadata information
+		 */
+		infos: {
+			required: true,
+			type: Object as PropType<ResourceMetaInfoProps>,
+		},
+		/**
+		 * Show create metadata info if empty?
+		 */
+		showEmptyCreate: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show update metadata info if empty?
+		 */
+		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 showCreatedBy = computed(
+			() =>
+				(infos.value.createdBy !== null && infos.value.createdBy !== undefined) ||
+				showEmptyCreate.value
+		);
+
+		const showCreatedHours = computed(
+			() =>
+				(infos.value.createdHours !== null && infos.value.createdHours !== undefined) ||
+				showEmptyCreate.value
+		);
+
+		const formattedCreatedAt = computed(() => infos.value.createdAt || 'N/A');
+
+		const formattedCreatedBy = computed(() => infos.value.createdBy || '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');
+
+		const formattedCreatedHours = computed(() => infos.value.createdHours || 'N/A');
+
+		return {
+			showUpdate,
+			showCreate,
+			showCreatedBy,
+			showCreatedHours,
+			formattedCreatedAt,
+			formattedCreatedBy,
+			formattedUpdatedAt,
+			formattedUsername,
+			formattedUpdatedHours,
+			formattedCreatedHours,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'ResourceMetaInfo';
+</style>

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

@@ -0,0 +1,182 @@
+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',
+					createdBy: 'Test User',
+					updatedAt: '21/10/2022',
+					username: 'Test User',
+					updatedHours: '10:10:10',
+					createdHours: '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('showCreateBy', () => {
+			it('should return true when it has an createby date', () => {
+				expect(component.showCreatedBy).toBeTruthy();
+			});
+
+			it('should return false when it has not an createdby date', async () => {
+				await wrapper.setProps({
+					infos: { createdBy: null },
+				});
+				expect(component.showCreatedBy).toBeFalsy();
+			});
+		});
+
+		describe('showCreatedHours', () => {
+			it('should return true when it has an createdHours', () => {
+				expect(component.showCreatedHours).toBeTruthy();
+			});
+
+			it('should return false when it has not an createdHours', async () => {
+				await wrapper.setProps({
+					infos: { createdHours: null },
+				});
+				expect(component.showCreatedHours).toBeFalsy();
+			});
+		});
+
+		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('formattedCreatedBy', () => {
+			it('should return infos createdBy', () => {
+				expect(component.formattedCreatedBy).toBe('Test User');
+			});
+
+			it('should return N/A when infos createdBy is empty', async () => {
+				await wrapper.setProps({
+					infos: { createdBy: null },
+				});
+				expect(component.formattedCreatedBy).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');
+			});
+		});
+
+		describe('formattedCreatedHours', () => {
+			it('should return infos createdHours', () => {
+				expect(component.formattedCreatedHours).toBe('10:10:10');
+			});
+
+			it('should return N/A when infos createdHours is empty', async () => {
+				await wrapper.setProps({
+					infos: { createdHours: null },
+				});
+				expect(component.formattedCreatedHours).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/Select/Select.scss

@@ -0,0 +1,49 @@
+@import '../TextFieldV2/TextFieldV2.scss';
+@import '../../configurations/mixins';
+
+.farm-select {
+	&__hint-text {
+		@include hintText;
+	}
+}
+
+.farm-listitem--selected {
+	background-color: var(--farm-neutral-lighten);
+}
+
+.farm-contextmenu {
+	width: 100%;
+}
+
+.farm-icon {
+	transition: all ease 0.3s;
+	cursor: pointer;
+
+	&--rotate {
+		transform: rotate(180deg);
+	}
+}
+
+.farm-select__checkbox {
+	margin-right: 8px;
+}
+
+:deep(.farm-listitem:hover .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
+:deep(.farm-listitem:focus .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
+:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
+	color: var(--farm-primary-lighten);
+}
+
+:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+	color: var(--farm-primary-lighten);
+}
+
+:deep(.farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon) {
+	color: white;
+}