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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.3.1",
+	"version": "9.4.0",
 	"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, { 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,51 @@ export default Vue.extend({
 			}
 			innerValue.value = !innerValue.value;
 			emit('input', innerValue.value);
+			validate(innerValue.value);
 		};
 
 		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,
 			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.scss

@@ -50,6 +50,15 @@
         &.farm-chip--lighten {
             color: themeColor('secondary');
         }
+        &.farm-chip--darken {
+            color: white;
+        }
+    }
+
+    &[color='secondary'] {
+        &.farm-chip--lighten {
+            color: white;
+        }
     }
 
     &--outlined {

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

@@ -0,0 +1,146 @@
+import Form from './Form.vue';
+
+export default {
+	title: 'Form/Form',
+	component: Form,
+	parameters: {
+		docs: {
+			description: {
+				component: `Form<br />
+				selector: <em>farm-form</em><br />
+				<span style="color: green;">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const styles = {
+	vForm: {
+		maxWidth: '480px',
+	},
+	footer: {
+		display: 'flex',
+		justifyContent: 'end',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			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">
+			
+			<farm-label :required="true">Documento</farm-label>
+			<farm-textfield v-model="form.document" :rules="[rules.required]" />
+
+			<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>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const Secondary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				not: 'Not required field',
+				checkbox: false,
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			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>not</farm-label>
+					<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>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const InitInvalid = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+				name: '',
+				checkbox: false,
+			},
+			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>
+
+			<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>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/Form/Form.vue

@@ -0,0 +1,69 @@
+<template>
+	<form class="farm-form"><slot></slot></form>
+</template>
+<script lang="ts">
+import Vue, { onMounted, reactive, ref, getCurrentInstance } from 'vue';
+
+type ErrorsBag = Record<number, boolean>;
+
+export default Vue.extend({
+	name: 'farm-form',
+	props: {
+		value: { type: [Array, Boolean], required: true },
+	},
+	inheritAttrs: true,
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		const errorsBag = reactive({} as ErrorsBag);
+		let validationFields = [];
+
+		const dispatchError = () => {
+			const keys = Object.keys(errorsBag);
+			const errorsIds = keys.filter(key => !errorsBag[key]);
+			emit('input', errorsIds.length === 0);
+		};
+
+		const watchInput = (field: any) => {
+			field.$watch(
+				'hasError',
+				() => {
+					errorsBag[field._uid] = field.valid;
+					dispatchError();
+				},
+				{ immediate: true }
+			);
+		};
+
+		const reset = () => {
+			validationFields.forEach(field => {
+				field.reset();
+			});
+		};
+
+		const recursiveFormField = $node => {
+			$node.$children.forEach($leaf => {
+				if ($leaf.$children.length > 1) {
+					recursiveFormField($leaf);
+				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
+					validationFields.push($leaf.$children[0]);
+				} else if ($leaf.validatable) {
+					validationFields.push($leaf);
+				}
+			});
+		};
+
+		onMounted(() => {
+			recursiveFormField(getCurrentInstance().proxy);
+			validationFields.forEach(field => {
+				watchInput(field);
+			});
+		});
+
+		return {
+			innerValue,
+			errorsBag,
+			reset,
+		};
+	},
+});
+</script>

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

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import Form from '../Form';
+
+describe('Form component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Form);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Form/index.ts

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

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

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

package/src/components/RadioGroup/IRadioGroup.ts

@@ -0,0 +1,6 @@
+interface IRadioGroup {
+    id: Number;
+	label: String;
+}
+
+export default IRadioGroup;

package/src/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,82 @@
+.farm-radio-group {
+    border: none;
+    cursor: default;
+    display: flex;
+    width: 100%;
+    &__item {
+        font-size: 16px;
+        line-height: 1.1;
+        cursor: pointer;
+        display: grid;
+        grid-template-columns: 16px auto;
+        gap: 8px;
+        color: rgba(0,0,0,.6);
+        margin-top: 16px;
+        margin-right: 16px;
+    }
+}
+
+.farm-radio-group--column {
+    flex-direction: column;
+}
+
+input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #ffffff;
+    margin: 0;
+    font: inherit;
+    color: rgba(0,0,0,.6);
+    width: 18px;
+    height: 18px;
+    border: 1.5px solid rgba(0,0,0,.6);
+    border-radius: 50%;
+    transform: translate(-12px);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+}
+
+input[type="radio"]::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 16px 16px var(--radio-group-color);
+    background-color: CanvasText;
+}
+
+input[type="radio"]:checked::before {
+    transform: scale(1);
+}
+
+input[type="radio"]:focus {
+    outline: none;
+    outline-offset: none;
+}
+
+input[type="radio"]:checked {
+    border: 1.5px solid var(--radio-group-color);
+}
+
+input[type='radio']:hover {
+    box-shadow: 0px 0px 0px 8px  rgba(0, 0, 0, 0.1);
+    background-color:  rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    opacity: 1;
+}
+
+input[type='radio']:active {
+    animation: pulse 0.2s 1 ease-out;
+}
+
+@keyframes pulse {
+    from {
+      box-shadow:  0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
+    }
+    to {
+      box-shadow:  0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
+    }
+}

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,34 @@
+import RadioGroup from './RadioGroup';
+
+export default {
+	title: 'Form/RadioGroup',
+	component: RadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `RadioGroup<br />
+				selector: <em>farm-radio-group</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			buttons: [
+                { label: 'Button 1', id: 1 }, 
+                { label: 'Button 2', id: 2 }, 
+                { label: 'Button 3', id: 3 }
+            ],
+			checkedValue: 1
+		};
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,71 @@
+<template>
+    <div 
+    :class="{
+        'farm-radio-group': true,
+        'farm-radio-group--column': $props.column,
+    }">
+        <div class="farm-radio-group__item"
+            v-for="(button, index) in buttons" 
+            :key="`farm-radio-group_` + index"
+            @click="clicked(button.id)"
+        >   
+            <input  
+                type="radio" 
+                name="radio" 
+                :checked="button.id === $props.value"
+                :id="`farm-radio-group_` + index"
+                :style="cssVars" 
+                :value="button.id"
+               >
+            <label>
+                {{button.label}}
+            </label>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import IRadioGroup from './IRadioGroup';
+export default Vue.extend({
+	name: 'farm-radio-group',
+	props: {
+		/**
+		 * Array of buttons
+		 */
+		buttons: {
+			type: Array as PropType<Array<IRadioGroup>>,
+			default: () => [],
+		},
+        /**
+		 * v-model
+		 */
+		value: {
+			required: true,
+		},
+        column: {
+            type: Boolean,
+            default: false
+        },
+        color: {
+            type: String,
+			default: '#00B493',
+        }
+	},
+    methods: {
+        clicked(value) {
+            this.$emit('input', value);
+        }
+    },
+    computed: {
+        cssVars () {
+            return {
+                '--radio-group-color': this.color
+            };
+        }
+    }
+
+});
+</script>
+<style lang="scss" scoped>
+@import './RadioGroup.scss';
+</style>

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

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

package/src/components/RadioGroup/index.ts

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

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

@@ -16,7 +16,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-container': Container },
 	template: '<farm-container>content</farm-container>',
 });
 

package/src/components/layout/Row/Row.scss

@@ -0,0 +1,6 @@
+.farm-row {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    margin: -12px;
+}