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

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Row from '../Row';
+
+describe('Row component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Row);
+	});
+
+	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,34 @@
+import validateFormFieldBuilder from '../validateFormFieldBuilder';
+
+describe('validateFormFieldBuilder', () => {
+	it('Should return a function', () => {
+		const r = validateFormFieldBuilder();
+		expect(typeof r).toEqual('function');
+	});
+
+	it('Should run validations', () => {
+		const rules = [() => true, () => true];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(0);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should run validations and have some error', () => {
+		const rules = [() => true, () => false, () => false];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(2);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should run validations and have some error', () => {
+		const rules = [() => true, () => false, () => false];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(2);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should throw error', () => {
+		const rules = [() => 123];
+		expect(() => validateFormFieldBuilder(rules)(1)).toThrowError();
+	});
+});

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,18 @@
+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') {
+				throw new Error(
+					`Rules should return a string or boolean, received '${typeof valid}' instead`
+				);
+			}
+		}
+		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/_functions.scss

@@ -0,0 +1,9 @@
+@import './variables';
+
+@function gutter($key: 'default') {
+    @return map-get($gutters, $key)
+}
+
+@function fontSize($key: 'default') {
+    @return map-get($fontSizes, $key)
+}

package/src/configurations/_mixins.scss

@@ -0,0 +1,103 @@
+@mixin forXsOnly {
+	@media (max-width: 599px) {
+		@content;
+	}
+}
+
+@mixin upToSm {
+	@media (max-width: 959px) {
+		@content;
+	}
+}
+
+@mixin upToMd {
+	@media (max-width: 1263px) {
+		@content;
+	}
+}
+
+@mixin fromXs {
+	@media (min-width: 600px) {
+		@content;
+	}
+}
+
+@mixin fromSm {
+	@media (min-width: 960px) {
+		@content;
+	}
+}
+
+@mixin fromMd {
+	@media (min-width: 1264px) {
+		@content;
+	}
+}
+
+@mixin fromLg {
+	@media (min-width: 1904px) {
+		@content;
+	}
+}
+
+@mixin addShadow {
+	box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.16);
+}
+
+@mixin buildCol($code) {
+	@for $i from 1 through 12 {
+		.farm-col--#{$code}-#{$i * 1} {
+			flex: 0 0 (100/12 * $i) +#{'%'};
+			max-width: (100/12 * $i) +#{'%'};
+		}
+	}
+}
+
+@mixin rippleStyles {
+	.farm-ripple {
+		border-radius: 50%;
+		cursor: pointer;
+		position: absolute;
+		transition: all 0.4s;
+		z-index: 1;
+
+		&:before {
+			transition: all 0.2s;
+			border-radius: inherit;
+			bottom: 0;
+			content: '';
+			position: absolute;
+			opacity: 0;
+			left: 0;
+			right: 0;
+			top: 0;
+			transform-origin: center center;
+			background-color: var(--farm-stroke-base);
+		}
+	}
+}
+
+@mixin activateRipple {
+	&:hover {
+		.farm-ripple:before {
+			opacity: 0.3;
+		}
+	}
+}
+
+@mixin ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@mixin hintText {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s;
+
+	&--show {
+		opacity: 1;
+		visibility: visible;
+	}
+}

package/src/configurations/_theme-colors-background.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $background-colors {
+        #{$name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors-base.module.scss

@@ -0,0 +1,8 @@
+@import './theme-colors';
+
+:export {
+    @each $name,
+    $color in $theme-colors {
+        #{$name}: themeColor($name);
+    }
+}

package/src/configurations/_theme-colors-bw.module.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $bw-colors {
+        #{$name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors-stroke.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $stroke-colors {
+        #{'stroke-' + $name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors-text.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $text-colors {
+        #{'text-' + $name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors-variations.scss

@@ -0,0 +1,9 @@
+@import './theme-colors';
+
+:export {
+    @each $name,
+    $color in $theme-colors {
+        #{$name + "-lighten"}: themeColor($name, "lighten");
+        #{$name + "-darken"}: themeColor($name, "darken");
+    }
+}

package/src/configurations/_theme-colors.scss

@@ -0,0 +1,122 @@
+$primary: (
+	base: #4f8406,
+	lighten: #d5e7bb,
+	darken: #395f05,
+);
+
+$secondary: (
+	base: #e2c076,
+	lighten: #f1e6cc,
+	darken: #968254,
+);
+
+$secondary-green: (
+	base: #3e4e4b,
+	lighten: #6e7a78,
+	darken: #00231d,
+);
+
+$secondary-golden: (
+	base: #e2c076,
+	lighten: #f1e6cc,
+	darken: #968254,
+);
+
+$neutral: (
+	base: #e0e0e0,
+	lighten: #f5f5f5,
+	darken: #5c5c5c,
+);
+
+$error: (
+	base: #f44336,
+	lighten: #ffebee,
+	darken: #b71c1c,
+);
+
+$warning: (
+	base: #ff9800,
+	lighten: #fff3e0,
+	darken: #ff6d00,
+);
+
+$info: (
+	base: #2196f3,
+	lighten: #e3f2fd,
+	darken: #0d47a1,
+);
+
+$success: (
+	base: #4caf50,
+	lighten: #e8f5e9,
+	darken: #1b5e20,
+);
+
+$extra-1: (
+	base: #8e24aa,
+	lighten: #f3e5f5,
+	darken: #4a148c,
+);
+
+$extra-2: (
+	base: #ec407a,
+	lighten: #fce4ec,
+	darken: #880e4f,
+);
+
+$gray: (
+	base: #858585,
+	lighten: #d6d6d6,
+	darken: #5c5c5c,
+);
+
+$theme-colors: (
+	'primary': $primary,
+	'secondary': $secondary,
+	'secondary-green': $secondary-green,
+	'secondary-golden': $secondary-golden,
+	'neutral': $neutral,
+	'info': $info,
+	'error': $error,
+	'warning': $warning,
+	'success': $success,
+	'extra-1': $extra-1,
+	'extra-2': $extra-2,
+	'gray': $gray,
+);
+
+$text-colors: (
+	'primary': #1c1c1c,
+	'secondary': #757575,
+	'disabled': #858585,
+);
+
+$stroke-colors: (
+	'base': #e0e0e0,
+	'disabled': #bdbdbd,
+	'divider': #e0e0e0,
+);
+
+$bw-colors: (
+	'black': #1c1c1c,
+	'black-80': #333333,
+	'black-50': #5c5c5c,
+	'black-40': #757575,
+	'black-30': #858585,
+	'black-10': #d6d6d6,
+	'black-5': #f5f5f5,
+	'white': #ffffff,
+);
+
+$background-colors: (
+	'base': #f5f5f5,
+	'lighten': #FAFAFA,
+	'white': #FFFFFF,
+);
+
+$theme-colors-list: map-keys($theme-colors);
+
+@function themeColor($name, $variation: 'base') {
+	$theme-color: map-get($theme-colors, $name);
+	@return map-get($theme-color, $variation);
+}

package/src/configurations/_variables.scss

@@ -0,0 +1,36 @@
+$colors: primary, secondary, error, accent, info, success, warning, gray, yellow, white;
+$sizes: (
+    "xs": 12px,
+    "sm": 14px,
+    "md": 20px,
+    "lg": 36px,
+    "xl": 40px
+);
+$gutters: (
+    "none": 0,
+    "xs": 4px,
+    "sm": 8px,
+    "vuetify": 12px,
+    "md": 16px,
+    "lg": 24px,
+    "xl": 32px,
+    "default": 24px,
+);
+
+$fontSizes: (
+    "xs": 8px,
+    "sm": 12px,
+    "md": 14px,
+    "default": 16px,
+    "lg": 20px,
+    "xl": 24px
+);
+
+$fontWeights: 100, 200, 300, 400, 500, 600, 700;
+
+$bwVariations: 80, 50, 40, 30, 10, 5;
+
+$aligns: start, center, end, auto, baseline, stretch;
+$align-contents: start, center, end, space-between, space-around, stretch;
+$justifications: start, center, end, space-between, space-around;
+$directions: row, row-reverse, column, column-reverse;

package/src/configurations/colors.ts

@@ -0,0 +1,12 @@
+export default [
+	'primary',
+	'secondary',
+	'error',
+	'accent',
+	'info',
+	'success',
+	'warning',
+	'gray',
+	'yellow',
+	'white',
+];

package/src/configurations/flexVariables.ts

@@ -0,0 +1,5 @@
+const directions = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifications = ['start', 'center', 'end', 'auto', 'space-between', 'space-around'];
+const aligns = ['start', 'center', 'end', 'auto', 'baseline', 'stretch'];
+
+export { aligns, directions, justifications };

package/src/configurations/gutters.ts

@@ -0,0 +1 @@
+export default ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl',  'default'];

package/src/configurations/sizes.ts

@@ -0,0 +1 @@
+export default ['xs', 'sm', 'md', 'lg', 'xl'];

package/src/configurations/typographyHtmlTags.ts

@@ -0,0 +1,16 @@
+export default [
+	'p',
+	'span',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'legend',
+	'label',
+	'li',
+	'div',
+	'dd',
+	'dt',
+];

package/src/examples/Colors.stories.js

@@ -0,0 +1,122 @@
+import baseThemeColors from '../configurations/_theme-colors-base.module.scss';
+import textThemeColors from '../configurations/_theme-colors-text.scss';
+import strokeThemeColors from '../configurations/_theme-colors-stroke.scss';
+import bwThemeColors from '../configurations/_theme-colors-bw.module.scss';
+import backgroundThemeColors from '../configurations/_theme-colors-background.scss';
+import variationThemeColors from '../configurations/_theme-colors-variations.scss';
+import('./Colors.stories.scss');
+
+export default {
+	title: 'Colors/Pallete',
+};
+
+export const NamesAndValues = () => ({
+	data() {
+		return {
+			baseThemeColors: { ...baseThemeColors },
+			keys: Object.keys(baseThemeColors),
+			variationThemeColors: { ...variationThemeColors },
+			textThemeColors: { ...textThemeColors },
+			strokeThemeColors: { ...strokeThemeColors },
+			bwThemeColorsKeys: Object.keys(bwThemeColors),
+			bwThemeColors: { ...bwThemeColors },
+			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
+			backgroundThemeColors: { ...backgroundThemeColors },
+		};
+	},
+	template: `<div class="palette-container">
+        <div
+            v-for="key in keys"
+            :key="key"
+        >
+			<farm-heading :type="5">{{ key }}</farm-heading>
+			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>{{ baseThemeColors[key] }}</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten <span>{{ variationThemeColors[key + '-lighten'] }}</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken <span>{{ variationThemeColors[key + '-darken'] }}</span></span>
+        </div>
+
+		<div>
+			<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>{{ textThemeColors['text-primary'] }}</span></span>
+			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>{{ textThemeColors['text-secondary'] }}</span></span>
+			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>{{ textThemeColors['text-disabled'] }}</span></span>
+        </div>
+		<div>
+			<farm-heading :type="5">Stroke</farm-heading>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>{{ strokeThemeColors['stroke-base'] }}</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>{{ strokeThemeColors['stroke-disabled'] }}</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>{{ strokeThemeColors['stroke-divider'] }}</span></span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Black & White</farm-heading>
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_name_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+				{{ bw }}<span>{{ bwThemeColors[bw] }}</span>
+			</span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Background</farm-heading>
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_name_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw] }">
+				{{ bw }}<span>{{ backgroundThemeColors[bw] }}</span>
+			</span>
+		</div>
+
+	</div>`,
+});
+
+export const CssVariables = () => ({
+	data() {
+		return {
+			baseThemeColors: { ...baseThemeColors },
+			keys: Object.keys(baseThemeColors),
+			variationThemeColors: { ...variationThemeColors },
+			textThemeColors: { ...textThemeColors },
+			strokeThemeColors: { ...strokeThemeColors },
+			bwThemeColorsKeys: Object.keys(bwThemeColors),
+			bwThemeColors: { ...bwThemeColors },
+			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
+			backgroundThemeColors: { ...backgroundThemeColors },
+		};
+	},
+	template: `<div class="palette-container">
+        <div
+            v-for="key in keys"
+            :key="key"
+        >
+		<farm-heading :type="5">{{ key }}</farm-heading>
+			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>--farm-{{ key }}-base</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten<span>--farm-{{ key }}-lighten</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: <span>--farm-{{ key }}-darken</span></span>
+		</div>
+
+		<div>
+		<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span></span>
+			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>--farm-text-secondary</span></span>
+			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>--farm-text-disabled</span></span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Stroke</farm-heading>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span></span>
+			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>--farm-stroke-disabled</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>--farm-stroke-divider</span></span>
+        </div>
+
+		<div>
+			<farm-heading :type="5">Black & White</farm-heading>
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+				{{ bw }} <span>--farm-bw-{{ bw }}</span>
+			</span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Background</farm-heading>
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw], }">
+				{{ bw }} <span>--farm-background-{{ bw }}</span>
+			</span>
+		</div>
+
+	</div>`,
+});

package/src/examples/Colors.stories.scss

@@ -0,0 +1,21 @@
+.palette-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    >div {
+        display: flex;
+        flex-direction: column;
+        width: calc(33.333% - 32px);
+        margin: 0 16px 32px;
+        font-size: 12px;
+
+        >span {
+            padding: 8px 12px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+        }
+    }
+}