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

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -0,0 +1,260 @@
+// import { withDesign } from 'storybook-addon-designs';
+import TextFieldV2 from './TextFieldV2.vue';
+
+import createNumberMask from 'text-mask-addons/dist/createNumberMask';
+const currencyMask = createNumberMask({
+	prefix: 'R$',
+	allowDecimal: true,
+	includeThousandsSeparator: true,
+	thousandsSeparatorSymbol: '.',
+	decimalSymbol: ',',
+	allowNegative: false,
+});
+
+export default {
+	title: 'Form/TextFieldV2',
+	component: TextFieldV2,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text field v2<br />
+				selector: <em>farm-textfield-v2</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-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" disabled />
+		<farm-textfield-v2 v-model="v" disabled icon="book" />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" readonly />
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v1: 'input 1',
+			v2: '',
+			v3: '',
+			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-textfield-v2 v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textfield-v2 v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield-v2 v-model="v3" :rules="[rules.required, rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textfield-v2 v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+		<farm-label required>Required field with icon</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" icon="eye" />
+
+	</div>`,
+});
+
+export const Icon = () => ({
+	data() {
+		return {
+			v: '',
+		};
+	},
+	methods: {
+		show() {
+			alert('On icon click');
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" icon="eye" @onClickIcon="show" />
+		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" @onClickIcon="show" />
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="Hint text" />
+	</div>`,
+});
+
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
+export const UpdateValue = () => ({
+	data() {
+		return {
+			counter: 1,
+			v: '1',
+		};
+	},
+	methods: {
+		onClick() {
+			this.counter++;
+			this.v = this.counter;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		<farm-btn @click="onClick">Add 1 to counter and update v-model</farm-btn>
+		<br />counter: {{ counter }}
+		<br />v-model: {{ v }}
+	</div>`,
+});
+
+export const Types = () => ({
+	data() {
+		return {
+			types: ['text', 'password', 'email', 'date', 'search', 'color', 'tel', 'url'],
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="type in types" :key="'input_type_' + type">
+			<farm-label>Type: {{ type }}</farm-label>
+			<farm-textfield-v2 :type="type" />
+		</div>
+	</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-textfield-v2 v-model="v" ref="input" />
+		
+		<farm-label required>Required</farm-label>
+		<farm-textfield-v2 v-model="v" ref="inputValidatable" :rules="[rules.required]" />
+		
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});
+
+export const Mask = () => ({
+	data() {
+		return {
+			v: '',
+			v2: '',
+			mask: '###.###.###/##',
+			currencyMask,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label>CPF Mask ({{ mask }})</farm-label>
+		<farm-textfield-v2 v-model="v" :mask="mask" />
+		v-model: {{ v }}
+
+		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
+		<farm-textfield-v2 v-model="v2" :mask="currencyMask" />
+		v-model: {{ v2 }}
+
+	</div>`,
+});
+
+export const ToggleVisibility = () => ({
+	data() {
+		return {
+			v: 'hidden password',
+			visible: false,
+		};
+	},
+	methods: {
+		toggle() {
+			this.visible = !this.visible;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
+	</div>`,
+});
+
+export const Uppercase = () => ({
+	data() {
+		return {
+			v: 'value',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" uppercase/>
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -0,0 +1,276 @@
+<template>
+	<div
+		class="farm-textfield"
+		:class="{
+			'farm-textfield': true,
+			'farm-textfield--validatable': rules.length > 0,
+			'farm-textfield--touched': isTouched,
+			'farm-textfield--blured': isBlured,
+			'farm-textfield--error': hasError,
+			'farm-textfield--focused': isFocus && !readonly,
+			'farm-textfield--disabled': disabled,
+			'farm-textfield--hiddendetails': hideDetails,
+			'farm-textfield--uppercase': isUppercase,
+		}"
+		:id="customId"
+	>
+		<div
+			:class="{
+				'farm-textfield--input': true,
+				'farm-textfield--input--iconed': icon,
+			}"
+		>
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'left'"
+				@click="$emit('onClickIcon')"
+			>
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
+			<input
+				v-bind="$attrs"
+				v-model="innerValue"
+				v-mask="mask"
+				:id="$props.id"
+				:disabled="disabled"
+				:readonly="readonly"
+				@click="$emit('click')"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
+			/>
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'right'"
+				@click="$emit('onClickIcon')"
+			>
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
+		</div>
+		<farm-caption v-if="!hideDetails && showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption
+			v-if="!hideDetails && hint && !showErrorText"
+			class="farm-textfield__hint-text"
+			:class="{
+				'farm-textfield__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-textfield-v2',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { type: [String, Number], default: '' },
+		/**
+		 * Show icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Icon position
+		 */
+		iconPosition: { type: String as PropType<'left' | 'right'>, default: 'right' },
+		/**
+		 * 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: () => [],
+		},
+		/**
+		 * Mask
+		 */
+		mask: {
+			default: '',
+			type: [String, Function],
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Input id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * uppercase
+		 * leaves only the text in the input in uppercase does not affect the value of the v-model
+		 */
+		uppercase: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Emitted when any key is pressed<br />
+		 * _event_
+		 */
+		keyup: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
+	},
+	setup(props, { emit }) {
+		const { rules } = toRefs(props);
+		const innerValue = ref(props.modelValue);
+		const isTouched = ref(false);
+		const isBlured = ref(false);
+		const isFocus = ref(false);
+		const isUppercase = ref(props.uppercase);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+		const customId = 'farm-textfield-' + (props.id || randomId(2));
+
+		const showErrorText = computed(() => hasError.value && isTouched.value && isBlured.value);
+
+		watch(
+			() => props.modelValue,
+			() => {
+				innerValue.value = props.modelValue;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('input', innerValue.value);
+				validate(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);
+
+			setTimeout(() => {
+				emit('change', innerValue.value);
+			}, 100);
+		};
+
+		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,
+			isUppercase,
+			isFocus,
+			showErrorText,
+			validate,
+			onKeyUp,
+			onBlur,
+			onFocus,
+			reset,
+			makePristine,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'TextFieldV2';
+</style>

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

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import TextFieldV2 from '../TextFieldV2';
+
+describe('TextFieldV2 component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextFieldV2, {
+			directives: {
+				mask: () => {},
+			},
+		});
+		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/TextFieldV2/index.ts

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

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,38 @@
+@import '../../configurations/theme-colors';
+@import '../../configurations/variables';
+
+.farm-tooltip {
+	display: inline-block;
+	position: relative;
+}
+
+.farm-tooltip__popup {
+	background-color: rgba(themeColor('primary'), 0.95);
+	@each $color in $theme-colors-list {
+		&.farm-tooltip--#{$color} {
+			background-color: rgba(themeColor($color), 0.95);
+		}
+	}
+
+}
+
+.farm-tooltip__popup {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0.3s linear, opacity 0.3s linear;
+	position: absolute;
+	width: 160px;
+	contain: content;
+	color: white;
+	border-radius: 5px;
+	font-family: 'Manrope', sans-serif !important;
+	font-size: 12px;
+	font-weight: 500px;
+	padding: 8px 12px;
+	display: block;
+
+	&--visible {
+		opacity: 1;
+		visibility: visible;
+	}
+}