@farm-investimentos/front-mfe-components 9.3.1 → 9.4.0

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

@@ -0,0 +1,23 @@
+import Row from './Row.vue';
+
+export default {
+	title: 'Layout/Row',
+	component: Row,
+	parameters: {
+		docs: {
+			description: {
+				component: `Row<br />
+				selector: <em>farm-row</em>
+				<span style="color: yellow;">wait</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-row>row content</farm-row>',
+});
+
+Primary.storyName = 'Basic';

package/src/components/layout/Row/Row.vue

@@ -0,0 +1,22 @@
+<template>
+	<component v-bind:is="tag" class="farm-row">
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-row',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Row.scss';
+</style>

package/src/components/layout/Row/__tests__/Row.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils';
+import Row from '../Row';
+
+describe('Row component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Row);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/layout/Row/index.ts

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

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,
+	};
+};

package/src/configurations/_theme-colors.scss

@@ -11,9 +11,9 @@ $secondary: (
 );
 
 $neutral: (
-    base: #EEEEEE,
+    base: #E0E0E0,
     lighten: #F5F5F5,
-    darken: #E0E0E0,
+    darken: #5C5C5C,
 );
 
 $error: (
@@ -42,7 +42,7 @@ $success: (
 
 $extra-1: (
     base: #8E24AA,
-    lighten: #E8F5E9,
+    lighten: #F3E5F5,
     darken: #4A148C,
 );
 

package/src/examples/Form/Full.stories.js

@@ -42,7 +42,7 @@ export const Primary = () => ({
                 <farm-textfield v-model="form.name" />
             </div>
             <div class="footer" :style="[styles.footer]">
-                <v-btn color="secondary" :disabled="!validForm">Salvar</v-btn>
+                <farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
             </div>
         </v-form>
     `,

package/src/main.ts

@@ -69,12 +69,14 @@ export * from './components/ResetTableRowSelection';
 export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
+export * from './components/Form';
 export * from './components/Label';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
 export * from './components/Modal';
 export * from './components/ProgressBar';
+export * from './components/RadioGroup';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
@@ -83,4 +85,5 @@ export * from './components/Typography';
 
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
+export * from './components/layout/Row';
 export * from './components/layout/Line';