@farm-investimentos/front-mfe-components 9.3.2 → 9.4.1

package/package.json

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

package/src/components/Card/Card.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Card<br />
-				selector: <em>farm-card</em>
+				selector: <em>farm-card</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/Checkbox/Checkbox.stories.js

@@ -11,7 +11,8 @@ export default {
 		docs: {
 			description: {
 				component: `Checkbox<br />
-				selector: <em>farm-checkbox</em>
+				selector: <em>farm-checkbox</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/Checkbox/Checkbox.vue

@@ -18,7 +18,11 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref, toRefs, watch } from 'vue';
+import Vue, { 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';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -32,21 +36,34 @@ export default Vue.extend({
 		 */
 		label: { type: String, default: null },
 		/**
-		 * disabled
+		 * Is disabled?
 		 */
 		disabled: { type: Boolean, default: false },
+		/**
+		 * Variation
+		 */
 		variation: {
-			type: String,
+			type: String as PropType<'' | 'lighten' | 'darken'>,
 			default: '',
 		},
 		color: {
 			type: String,
 			default: 'primary',
 		},
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
-		const { label, disabled } = toRefs(props);
+		const { label, disabled, rules } = toRefs(props);
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
 
 		const toggleValue = () => {
 			if (disabled.value) {
@@ -54,20 +71,56 @@ export default Vue.extend({
 			}
 			innerValue.value = !innerValue.value;
 			emit('input', innerValue.value);
+			validate(innerValue.value);
 		};
 
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
 		watch(
 			() => props.value,
 			() => {
 				innerValue.value = props.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);
 			}
 		);
 
+		const reset = () => {
+			if (disabled.value) {
+				return false;
+			}
+			innerValue.value = false;
+			emit('input', innerValue.value);
+		};
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
 		return {
 			innerValue,
 			label,
 			disabled,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
 			toggleValue,
+			reset,
+			validate,
 		};
 	},
 });

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

@@ -5,7 +5,11 @@ describe('Checkbox component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(Checkbox, {});
+		wrapper = shallowMount(Checkbox, {
+			propsData: {
+				value: false,
+			},
+		});
 	});
 
 	test('Created hook', () => {

package/src/components/Chip/Chip.stories.js

@@ -8,6 +8,17 @@ const variations = ['', 'darken', 'lighten'];
 export default {
 	title: 'Display/Chips',
 	component: Chip,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip<br />
+				selector: <em>farm-chip</em><br />
+				<span style="color: green;">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/Form/Form.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Form<br />
-				selector: <em>farm-form</em>
+				selector: <em>farm-form</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},
@@ -31,28 +32,28 @@ export const Primary = () => ({
 			form: {
 				document: 'Document',
 				name: 'Name',
+				checkbox: true,
 			},
 			validForm: false,
 			rules: {
 				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
 			},
 			styles,
 		};
 	},
 	template: `
         <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-            <section>
-				<div>
-					<farm-label :required="true">Documento</farm-label>
-					<farm-textfield v-model="form.document" :rules="[rules.required]" />
-				</div>
-			</section>
-			<section>
-				<div>
-					<farm-label :required="true">Nome</farm-label>
-					<farm-textfield v-model="form.name" :rules="[rules.required]" />
-				</div>
-			</section>
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield v-model="form.document" :rules="[rules.required]" />
+			</div>
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield v-model="form.name" :rules="[rules.required]" />
+			
+			<farm-label :required="true">True/false</farm-label>
+			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+			
             <div class="footer" :style="[styles.footer]">
 				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
 				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
@@ -67,6 +68,7 @@ export const Secondary = () => ({
 			form: {
 				document: 'Document',
 				not: 'Not required field',
+				checkbox: false,
 			},
 			validForm: false,
 			rules: {
@@ -89,6 +91,10 @@ export const Secondary = () => ({
 					<farm-textfield v-model="form.not" />
 				</div>
 			</section>
+
+			<farm-label>Not required</farm-label>
+			<farm-checkbox v-model="form.checkbox" />
+
             <div class="footer" :style="[styles.footer]">
 				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
 				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
@@ -103,10 +109,12 @@ export const InitInvalid = () => ({
 			form: {
 				document: '',
 				name: '',
+				checkbox: false,
 			},
 			validForm: false,
 			rules: {
 				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
 			},
 			styles,
 		};
@@ -125,6 +133,10 @@ export const InitInvalid = () => ({
 					<farm-textfield v-model="form.name" :rules="[rules.required]" />
 				</div>
 			</section>
+
+			<farm-label :required="true">True/false</farm-label>
+			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+
             <div class="footer" :style="[styles.footer]">
 				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
 				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>

package/src/components/Form/Form.vue

@@ -46,6 +46,8 @@ export default Vue.extend({
 					recursiveFormField($leaf);
 				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
 					validationFields.push($leaf.$children[0]);
+				} else if ($leaf.validatable) {
+					validationFields.push($leaf);
 				}
 			});
 		};

package/src/components/Icon/Icon.stories.js

@@ -12,7 +12,9 @@ export default {
 		viewMode: 'docs',
 		docs: {
 			description: {
-				component: `Icon`,
+				component: `Icon<br />
+                selector: <em>farm-icon<em><br />
+                <span style="color: green;">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Loader/Loader.stories.ts

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Loader<br />
-				selector: <em>farm-loader</em>`,
+				selector: <em>farm-loader</em><br />
+				<span style="color: green;">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Logger/Logger.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Logger<br />
-				selector: <em>farm-logger</em>
+				selector: <em>farm-logger</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/Modal/Modal.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Modal<br />
-				selector: <em>farm-modal</em>
+				selector: <em>farm-modal</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/layout/Row/Row.stories.js

@@ -8,6 +8,7 @@ export default {
 			description: {
 				component: `Row<br />
 				selector: <em>farm-row</em>
+				<span style="color: yellow;">wait</span>
 				`,
 			},
 		},

package/src/composition/__tests__/deepEqual.spec.js

@@ -0,0 +1,13 @@
+import deepEqual from '../deepEqual';
+
+describe('deepEqual', () => {
+	it('Should return true for same object', () => {
+		const r = deepEqual({ a: 1 }, { a: 1 });
+		expect(r).toBeTruthy();
+	});
+
+	it('Should return true for different object', () => {
+		const r = deepEqual({ a: 1 }, { a: '1' });
+		expect(r).toBeFalsy();
+	});
+});

package/src/composition/__tests__/validateFormFieldBuilder.spec.js

@@ -0,0 +1,8 @@
+import validateFormFieldBuilder from '../validateFormFieldBuilder';
+
+describe('validateFormFieldBuilder', () => {
+	it('Should return a function', () => {
+		const r = validateFormFieldBuilder();
+		expect(typeof r).toEqual('function');
+	});
+});

package/src/composition/__tests__/validateFormStateBuilder.spec.js

@@ -0,0 +1,8 @@
+import validateFormStateBuilder from '../validateFormStateBuilder';
+
+describe('validateFormStateBuilder', () => {
+	it('Should return an object', () => {
+		const r = validateFormStateBuilder();
+		expect(r.errorBucket).toBeDefined();
+	});
+});

package/src/composition/deepEqual.ts

@@ -0,0 +1,24 @@
+function deepEqual(a: any, b: any): boolean {
+	if (a === b) return true;
+
+	if (a instanceof Date && b instanceof Date && a.getTime() !== b.getTime()) {
+		// If the values are Date, compare them as timestamps
+		return false;
+	}
+
+	if (a !== Object(a) || b !== Object(b)) {
+		// If the values aren't objects, they were already checked for equality
+		return false;
+	}
+
+	const props = Object.keys(a);
+
+	if (props.length !== Object.keys(b).length) {
+		// Different number of props, don't bother to check
+		return false;
+	}
+
+	return props.every(p => deepEqual(a[p], b[p]));
+}
+
+export default deepEqual;

package/src/composition/validateFormFieldBuilder.ts

@@ -0,0 +1,19 @@
+export default function (rules) {
+	return value => {
+		const innerErrorBucket = [];
+		for (let index = 0; index < rules.length; index++) {
+			const rule = rules[index];
+			const valid = typeof rule === 'function' ? rule(value) : rule;
+
+			if (valid === false || typeof valid === 'string') {
+				innerErrorBucket.push(valid || '');
+			} else if (typeof valid !== 'boolean') {
+				console.error(
+					`Rules should return a string or boolean, received '${typeof valid}' instead`,
+					this
+				);
+			}
+		}
+		return innerErrorBucket;
+	};
+}

package/src/composition/validateFormMethodBuilder.ts

@@ -0,0 +1,9 @@
+export default (errorBucket: any, valid: any, fieldValidator: Function) => {
+	const validate = (value?: any) => {
+		errorBucket.value = fieldValidator(value);
+		valid.value = errorBucket.value.length === 0;
+		return valid.value;
+	};
+
+	return validate;
+};

package/src/composition/validateFormStateBuilder.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+
+export default () => {
+	const errorBucket = ref([]);
+	const valid = ref(false);
+	const validatable = true;
+
+	return {
+		errorBucket,
+		valid,
+		validatable,
+	};
+};