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

package/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,147 @@
+// import { withDesign } from 'storybook-addon-designs';
+import TextArea from './TextArea.vue';
+
+export default {
+	title: 'Form/TextArea',
+	component: TextArea,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text Area<br />
+				selector: <em>farm-textarea</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/jnZXo2e0nRJ3fVXl4Et8t4/%E2%9C%8D-Design-System-%7C-BACKUP-(10%2F10%2F2022)?node-id=2491%3A4487',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-textarea v-model="v" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Rows = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-textarea v-model="v" rows="10" />
+		<farm-textarea v-model="v" rows="3" />
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textarea v-model="v" disabled />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textarea v-model="v" readonly />
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v1: 'input 1',
+			v2: '',
+			v4: '',
+			rules: {
+				required: value => !!value || 'Required field',
+				email: v =>
+					!v ||
+					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+					'Must be an e-mail',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required field</farm-label>
+		<farm-textarea v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textarea v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textarea v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textarea v-model="v" hint="Hint text" />
+	</div>`,
+});
+
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textarea v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 'input text',
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.input.reset();
+			this.$refs.inputValidatable.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label>Not Required</farm-label>
+		<farm-textarea v-model="v" ref="input" />
+		
+		<farm-label required>Required</farm-label>
+		<farm-textarea v-model="v" ref="inputValidatable" :rules="[rules.required]" />
+		
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,224 @@
+<template>
+	<div
+		class="farm-textarea"
+		:class="{
+			'farm-textarea': true,
+			'farm-textarea--validatable': rules.length > 0,
+			'farm-textarea--touched': isTouched,
+			'farm-textarea--blured': isBlured,
+			'farm-textarea--error': hasError,
+			'farm-textarea--disabled': disabled,
+			'farm-textarea--hiddendetails': hideDetails,
+			'farm-textarea--focused': isFocus && !readonly,
+		}"
+	>
+		<div
+			:class="{
+				'farm-textarea--textarea': true,
+			}"
+		>
+			<textarea
+				v-model="innerValue"
+				v-bind="$attrs"
+				:id="$props.id"
+				:rows="$props.rows"
+				:disabled="disabled"
+				:readonly="readonly"
+				@click="$emit('click')"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
+			/>
+		</div>
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption
+			v-if="hint && !showErrorText"
+			class="farm-textarea__hint-text"
+			:class="{
+				'farm-textarea__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
+			{{ hint }}
+		</farm-caption>
+	</div>
+</template>
+
+<script lang="ts">
+import {  computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
+
+export default {
+	name: 'farm-textarea',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: { type: [String, Number], default: '' },
+		/**
+		 * Show hint text
+		 */
+		hint: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Disabled the input
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Puts input in readonly state
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+		/**
+		 * Textarea rows
+		 */
+		rows: {
+			default: 5,
+			type: [String, Number],
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props, { emit }) {
+		const { rules } = toRefs(props);
+		const innerValue = ref(props.value);
+		const isTouched = ref(false);
+		const isFocus = ref(false);
+		const isBlured = ref(false);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+		const customId = 'farm-textarea-' + (props.id || randomId(2));
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
+
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('input', innerValue.value);
+				emit('change', innerValue.value);
+			}
+		);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const onKeyUp = (event: Event) => {
+			isTouched.value = true;
+			emit('keyup', event);
+		};
+
+		const onBlur = (event: Event) => {
+			isBlured.value = true;
+			emit('blur', event);
+		};
+
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
+		const reset = () => {
+			innerValue.value = '';
+			isTouched.value = true;
+			emit('input', innerValue.value);
+		};
+
+		const makePristine = () => {
+			isTouched.value = false;
+			isBlured.value = false;
+		};
+
+		return {
+			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			customId,
+			isTouched,
+			isBlured,
+			isFocus,
+			showErrorText,
+			validate,
+			onKeyUp,
+			onBlur,
+			onFocus,
+			reset,
+			makePristine,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'TextArea';
+</style>

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

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import TextArea from '../TextArea';
+
+describe('TextArea component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextArea);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('reset', () => {
+			component.reset();
+			expect(component.isTouched).toBeTruthy();
+			expect(component.innerValue).toEqual('');
+		});
+
+		it('onKeyUp', () => {
+			component.onKeyUp();
+			expect(component.isTouched).toBeTruthy();
+		});
+
+		it('onBlur', () => {
+			component.onBlur();
+			expect(component.isBlured).toBeTruthy();
+		});
+
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.isBlured = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+			expect(component.isBlured).toBeFalsy();
+		});
+	});
+});

package/src/components/TextArea/index.ts

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

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -0,0 +1,99 @@
+@import '../../configurations/mixins';
+
+.farm-textfield {
+	height: 64px;
+
+	&--hiddendetails {
+		height: 40px;
+	}
+
+	&--input {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-bw-black-10);
+		height: 36px;
+		border-radius: 5px;
+		padding: 8px;
+		margin-bottom: 4px;
+		background-color: white;
+
+		> button {
+			display: flex;
+		}
+
+		& > input {
+			flex: 1;
+			outline: none;
+			color: var(--farm-bw-black-50);
+			font-size: 12px;
+			font-weight: 400;
+			max-width: 100%;
+		}
+
+		&--iconed > input {
+			max-width: calc(100% - 32px);
+		}
+
+		width: 100%;
+	}
+
+	&--focused .farm-textfield--input {
+		border-color: var(--farm-bw-black-30);
+	}
+
+	&--disabled {
+		input {
+			color: var(--farm-bw-black-30);
+		}
+		.farm-icon {
+			color: var(--farm-bw-black-30);
+			cursor: default;
+		}
+	}
+
+	.farm-caption {
+		line-height: 12px;
+	}
+
+	&__hint-text {
+		@include hintText;
+	}
+}
+
+.farm-textfield--touched.farm-textfield--blured.farm-textfield--validatable {
+	&.farm-textfield--error {
+		.farm-textfield {
+			&--input {
+				border-color: var(--farm-error-base);
+
+				& > input {
+					color: var(--farm-neutral-darken);
+				}
+
+				.farm-icon {
+					color: var(--farm-error-base);
+				}
+			}
+		}
+	}
+}
+
+.farm-textfield--blured.farm-textfield--validatable:not(.farm-textfield--error) {
+	.farm-textfield--input {
+		border-color: var(--farm-primary-base);
+
+		& > input {
+			color: var(--farm-neutral-darken);
+		}
+
+		.farm-icon {
+			color: var(--farm-primary-base);
+		}
+	}
+}
+
+.farm-textfield--uppercase input {
+	text-transform: uppercase;
+}