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

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,108 @@
+@import '../../configurations/theme-colors';
+@import '../../configurations/variables';
+@import '../../configurations/mixins';
+
+.farm-checkbox__container {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+
+	.farm-label {
+		margin-left: 8px;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'[color=' + $color + ']'} {
+			.farm-checkbox--checked,
+			.farm-checkbox--indeterminate {
+				background-color: themeColor($color);
+				border-color: themeColor($color);
+
+				&.farm-checkbox--lighten {
+					background-color: themeColor($color, 'lighten');
+					border-color: themeColor($color, 'lighten');
+
+					.farm-icon {
+						color: themeColor($color, 'darken');
+					}
+				}
+
+				&.farm-checkbox--darken {
+					background-color: themeColor($color, 'darken');
+					border-color: themeColor($color, 'darken');
+				}
+			}
+		}
+	}
+
+	@include activateRipple;
+
+	.farm-checkbox.farm-checkbox--error {
+		border-color: themeColor('error');
+	}
+}
+
+@include rippleStyles;
+
+.farm-checkbox {
+	display: flex;
+	justify-content: center;
+	border: 2px solid themeColor('neutral', 'darken');
+	border-radius: 4px;
+	cursor: pointer;
+	line-height: 0;
+	transition: all 0.4s;
+	z-index: 2;
+
+	&--disabled {
+		border-color: themeColor('neutral', 'base') !important;
+		cursor: default;
+		opacity: 0.6;
+
+		&.farm-checkbox--checked {
+			background-color: themeColor('neutral', 'base') !important;
+		}
+	}
+
+	.farm-icon {
+		color: white;
+	}
+}
+
+.farm-checkbox[size='16px'] {
+	width: 16px;
+	height: 16px;
+}
+
+.farm-checkbox[size='24px'] {
+	width: 24px;
+	height: 24px;
+}
+
+.farm-ripple[size='16px'] {
+	height: 16px * 1.75;
+	width: 16px * 1.75;
+	left: -16px * 0.4;
+	top: -16px * 0.4;
+}
+
+.farm-ripple[size='24px'] {
+	height: 24px * 1.75;
+	width: 24px * 1.75;
+	left: -24px * 0.4;
+	top: -24px * 0.4;
+}
+
+@each $size, $value in $sizes {
+	#{'.farm-checkbox[size=' + $size + ']'} {
+		width: $value;
+		height: $value;
+	}
+
+	#{'.farm-ripple[size=' + $size + ']'} {
+		height: $value * 1.75;
+		width: $value * 1.75;
+		left: -$value * 0.4;
+		top: -$value * 0.4;
+	}
+}

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

@@ -0,0 +1,194 @@
+import Checkbox from './Checkbox';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+import sizes from '../../configurations/sizes';
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
+
+export default {
+	title: 'Form/Checkbox',
+	component: Checkbox,
+	parameters: {
+		docs: {
+			description: {
+				component: `Checkbox<br />
+				selector: <em>farm-checkbox</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			isChecked: null,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" value="1" />
+		isChecked (value): {{ isChecked }}
+	</div>`,
+});
+
+export const Value = () => ({
+	data() {
+		return {
+			option1: 'option1',
+			option2: 'option2',
+			option3: 'option3',
+		};
+	},
+	template: `<div>
+	<div class="d-flex">
+	<farm-checkbox v-model="option1" value="option1" class="mr-2" /> 
+		option1 : {{option1}}
+	</div>
+	<div class="d-flex align-center">
+	<farm-checkbox v-model="option2" value="option2" class="mr-2 my-2" /> 
+		option2 : {{option2}}
+	</div>
+	<div class="d-flex">
+	<farm-checkbox v-model="option3" value="option3" class="mr-2" /> 
+		option3 : {{option3}}
+	</div>
+	</div>`,
+});
+
+export const DefaultCheck = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" />
+		isChecked (value): {{ isChecked }}
+	</div>`,
+});
+
+export const WithLabel = () => ({
+	data() {
+		return {
+			isChecked: false,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" value="1" label="custom label" />
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			isChecked: true,
+			notIsChecked: false,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" :disabled="true" /><br />
+		<farm-checkbox v-model="notIsChecked" value="1" :disabled="true" />
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			isChecked: true,
+			colors,
+			variations,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+	<div v-for="color in colors" style="width: 33.3%;">
+		<h4>{{ color }}</h4>
+		<div
+			style="display: flex; flex-direction: column;"
+			v-for="variation in variations"
+			:key="color + '_' + variation"
+		>
+			<farm-checkbox
+				v-model="isChecked"
+				:value="true"
+				:color="color"
+				:variation="variation"
+				:label="variation || 'Base'"			
+			/>
+			</div>
+		</div>
+	</div>`,
+});
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+			isChecked: true,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: column; flex-wrap: wrap;">
+        <div v-for="size of sizes">
+			<farm-checkbox v-model="isChecked" :size="size" :value="true" :label="size" /><br />
+        </div>
+	</div>`,
+});
+
+export const Indeterminate = () => ({
+	data() {
+		return {
+			sizes,
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox :indeterminate="true" v-model="isChecked" :value="true"  />
+	</div>`,
+});
+
+export const ResetByValue = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" />
+		isChecked (value): {{ isChecked }}
+		<farm-btn @click="isChecked = null;">reset</farm-btn>
+	</div>`,
+});
+
+export const ResetByMethod = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" ref="checkbox" />
+		isChecked (value): {{ isChecked }}
+		<farm-btn @click="$refs.checkbox.reset()">reset</farm-btn>
+	</div>`,
+});
+
+export const ChangeEvent = () => ({
+	setup() {
+
+		const select = () => {
+			alert('Updated model value');
+		};
+
+		return {
+			select
+		};
+	},
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" ref="checkbox" @update:modelValue="select($event)" />
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,193 @@
+<template>
+	<div class="farm-checkbox__container" :color="$props.color">
+		<span
+			:class="{
+				'farm-checkbox': true,
+				'farm-checkbox--checked': isChecked && (forceCheck === undefined || forceCheck),
+				'farm-checkbox--disabled': disabled,
+				'farm-checkbox--indeterminate': indeterminate,
+				'farm-checkbox--lighten': variation === 'lighten',
+				'farm-checkbox--darken': variation === 'darken',
+				'farm-checkbox--error': showError,
+			}"
+			:size="sizeValue"
+			@click="toggleValue"
+		>
+			<farm-icon :size="sizeValue" v-if="innerValue && !indeterminate">check</farm-icon>
+			<farm-icon :size="sizeValue" v-if="indeterminate">minus</farm-icon>
+		</span>
+		<farm-label v-if="label">{{ label }} </farm-label>
+
+		<div class="farm-ripple" :size="sizeValue" v-if="!disabled"></div>
+	</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 modelValueWatcher from './modelValueWatcher';
+
+export default {
+	name: 'farm-checkbox',
+	model: {
+		prop: 'modelValue',
+	},
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: {},
+		/**
+		 * Value to be set to v-model
+		 */
+		value: { type: [String, Number, Boolean], default: undefined },
+		/**
+		 * Label
+		 */
+		label: { type: String, default: null },
+		/**
+		 * Is disabled?
+		 */
+		disabled: { type: Boolean, default: false },
+		/**
+		 * Variation
+		 */
+		variation: {
+			type: String as PropType<'' | 'lighten' | 'darken'>,
+			default: '',
+		},
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'sm',
+		},
+		/**
+		 * Sets an indeterminate state for the simple checkbox
+		 */
+		indeterminate: { type: Boolean, default: false },
+		/**
+		 * Control if is check by prop
+		 */
+		checked: { type: Boolean, default: undefined },
+	},
+	setup(props, { emit }) {
+		const innerValue = ref(props.modelValue);
+		const { label, disabled, rules, checked } = toRefs(props);
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+		const isTouched = ref(false);
+		const forceCheck = ref(checked.value);
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const toggleValue = () => {
+			if (disabled.value) {
+				return false;
+			}
+			isTouched.value = true;
+			innerValue.value = isChecked.value ? null : props.value;
+			emit('update:modelValue', innerValue.value);
+			validate(innerValue.value);
+		};
+
+		const isChecked = computed(() => innerValue.value == props.value);
+		const hasError = computed(() => errorBucket.value.length > 0);
+		const showError = computed(() => hasError.value && isTouched.value);
+		const sizeValue = computed(() => {
+			if (props.size === 'sm') {
+				return '16px';
+			} else if (props.size === 'md') {
+				return '24px';
+			}
+			return props.size;
+		});
+
+		const reset = () => {
+			if (disabled.value) {
+				return false;
+			}
+			isTouched.value = true;
+			innerValue.value = null;
+			validate(innerValue.value);
+			emit('update:modelValue', innerValue.value);
+		};
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const makePristine = () => {
+			isTouched.value = false;
+		};
+
+		modelValueWatcher(props, isTouched, innerValue, validate);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => props.checked,
+			newValue => {
+				forceCheck.value = newValue;
+				innerValue.value = newValue ? props.value : null;
+			}
+		);
+
+		return {
+			innerValue,
+			label,
+			disabled,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isChecked,
+			forceCheck,
+			toggleValue,
+			reset,
+			validate,
+			showError,
+			makePristine,
+			isTouched,
+			sizeValue,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './Checkbox.scss';
+</style>

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

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import Checkbox from '../Checkbox';
+
+describe('Checkbox component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Checkbox, {
+			propsData: {
+				value: false,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+		});
+	});
+});

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

@@ -0,0 +1,43 @@
+import { ref, reactive } from 'vue';
+import modelValueWatcher from '../modelValueWatcher.ts';
+
+describe('modelValueWatcher', () => {
+	let props;
+	let isTouched;
+	let innerValue;
+	let validate;
+
+	beforeEach(() => {
+		props = reactive({
+			modelValue: 'initial value',
+		});
+		isTouched = ref(false);
+		innerValue = ref('');
+		validate = jest.fn();
+		modelValueWatcher(props, isTouched, innerValue, validate);
+	});
+
+	it('should set isTouched.value to true when props.modelValue changes', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(isTouched.value).toBe(true);
+			done();
+		});
+	});
+
+	it('should update innerValue.value with new props.modelValue', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(innerValue.value).toBe('new value');
+			done();
+		});
+	});
+
+	it('should call validate function with new innerValue.value', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(validate).toHaveBeenCalledWith('new value');
+			done();
+		});
+	});
+});

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/modelValueWatcher.ts

@@ -0,0 +1,12 @@
+import { Ref, watch } from 'vue';
+
+export default function (props, isTouched: Ref, innerValue: Ref, validate: Function) {
+	watch(
+		() => props.modelValue,
+		newValue => {
+			isTouched.value = true;
+			innerValue.value = newValue;
+			validate(innerValue.value);
+		}
+	);
+}

package/src/components/Chip/Chip.scss

@@ -0,0 +1,109 @@
+@import '../../configurations/theme-colors';
+
+.farm-chip {
+    display: inline-flex;
+    padding: 2px 8px 0;
+    border-radius: 16px;
+    height: 24px;
+    min-width: 80px;
+    max-width: 100%;
+    text-align: center;
+    align-items: center;
+    color: white;
+    width: 100%;
+    border: 1px solid themeColor('primary');
+
+    &--dense {
+        min-width: auto;
+        width: max-content;
+    }
+
+    .farm-typography {
+        width: 100%;
+    }
+
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            background-color: themeColor($color);
+            border-color: themeColor($color);
+
+            &.farm-chip--lighten {
+                background-color: themeColor($color, 'lighten');
+                border-color: themeColor($color, 'lighten');
+
+                span {
+                    color: themeColor($color, 'darken');
+                }
+            }
+
+            &.farm-chip--darken {
+                background-color: themeColor($color, 'darken');
+                border-color: themeColor($color, 'darken');
+            }
+        }
+    }
+
+
+    &[color='neutral'] {
+        span {
+            color: var(--farm-secondary-green-base);
+        }
+        &.farm-chip--darken span {
+            color: white;
+        }
+    }
+
+    &[color='secondary'],
+    &[color='secondary-golden'] {
+        &:not(.farm-chip--outlined).farm-chip--base span {
+            color: var(--farm-bw-black);
+        }
+    }
+
+
+    &[color='secondary-green'] {
+        &.farm-chip--lighten span {
+            color: var(--farm-bw-white);
+        }
+    }
+
+    &--outlined {
+        @each $color in $theme-colors-list {
+            &#{'[color=' + $color + ']'} {
+                background-color: transparent;
+
+                span {
+                    color: themeColor($color);
+                }
+
+                &.farm-chip--lighten {
+                    background-color: transparent;
+                    border-color: themeColor($color, 'lighten');
+
+                    span {
+                        color: themeColor($color);
+                    }
+                }
+
+                &.farm-chip--darken {
+                    background-color: transparent;
+                    border-color: themeColor($color, 'darken');
+
+                    span {
+                        color: themeColor($color, 'darken');
+                    }
+                }
+            }
+        }
+
+        &[color='neutral'] {
+            span {
+                color: themeColor('secondary-green');
+            }
+
+            &.farm-chip--lighten span {
+                color: themeColor('secondary-green');
+            }
+        }
+    }
+}