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

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@farm-investimentos/front-mfe-components-vue3",
+  "version": "0.0.1",
+  "author": "farm investimentos",
+  "private": false,
+  "main": "./dist/front-mfe-components.common.js",
+  "unpkg": "dist/front-mfe-components.umd.min.js",
+  "jsdelivr": "dist/front-mfe-components.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "npm run build:components",
+    "build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.ts",
+    "lint": "vue-cli-service lint --fix",
+    "test:unit": "jest --updateSnapshot",
+    "test:coverage": "jest --updateSnapshot --coverage",
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "dependencies": {
+    "@vuepic/vue-datepicker": "7.1.0",
+    "core-js": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vue": "3.3.4",
+    "vuetify": "3.3.20",
+    "webpack": "^4.39.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.17.9",
+    "@babel/generator": "7.17.9",
+    "@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/cli": "^7.0.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/vue3": "^7.0.6",
+    "@storybook/vue3-webpack5": "^7.0.6",
+    "@types/jest": "^29.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "^4.5.12",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/test-utils": "^2.3.2",
+    "@vue/vue3-jest": "^29.2.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.1.0",
+    "husky": "^8.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "storybook": "^7.0.6",
+    "text-mask-addons": "^3.8.0",
+    "ts-jest": "^29.0.0",
+    "typescript": "~4.1.5",
+    "v-mask": "^2.3.0",
+    "vue-loader": "^16.8.3",
+    "vuejs-dialog": "^1.4.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Farm-Investimentos/front-mfe-components-vue3.git"
+  },
+  "publishConfig": {
+    "@farm-investimentos:registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": ">=18.0.0 <20.0.0"
+  }
+}

package/src/components/AlertBox/AlertBox.scss

@@ -0,0 +1,52 @@
+@import '../../configurations/theme-colors';
+@import '../../configurations/_theme-colors-base.module';
+
+.farm-alert-box {
+	border-radius: 5px;
+	display: flex;
+	padding: 8px 16px;
+	position: relative;
+	min-height: 40px;
+
+	@each $color in $theme-colors-list {
+		&#{'[color=' + $color + ']'} {
+			background-color: themeColor($color, 'lighten');
+			color: themeColor($color, 'darken');
+		}
+	}
+
+	&__content {
+		flex: 1;
+
+		&--with-dismissable {
+			margin-right: 40px;
+		}
+	}
+
+	&__icon.farm-icon {
+		align-items: self-start;
+		display: flex;
+		margin-right: 16px;
+		margin-top: 3px;
+	}
+
+	&__close {
+		position: absolute;
+		right: 8px;
+		bottom: 50%;
+		transform: translateY(50%);
+	}
+
+	&--dense {
+		display: inline-flex;
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}

package/src/components/AlertBox/AlertBox.stories.js

@@ -0,0 +1,79 @@
+import AlertBox from './AlertBox.vue';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+
+
+export default {
+	title: 'Feedback/AlertBox',
+	component: AlertBox,
+	parameters: {
+		docs: {
+			description: {
+				component: `Alert Box<br />
+					selector: <em>farm-alertbox</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>
+`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-alertbox>alert box</farm-alertbox>',
+});
+
+export const withIcon = () => ({
+	template: '<farm-alertbox icon="book">alert box</farm-alertbox>',
+});
+
+export const withDismissable = () => ({
+	template: '<farm-alertbox dismissable>alert box</farm-alertbox>',
+});
+
+export const dense = () => ({
+	template: '<farm-alertbox dismissable dense>alert box</farm-alertbox>',
+});
+
+export const full = () => ({
+	template: '<farm-alertbox icon="book" dismissable>alert box</farm-alertbox>',
+});
+
+export const moreThanOneLine = () => ({
+	data() {
+		return {
+			text: `lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu`,
+		};
+	},
+	template: '<farm-alertbox icon="book" dismissable>{{text}}</farm-alertbox>',
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `
+		<div>
+		<farm-alertbox class="mt-3" v-for="color of colors" :key="'random_10_' + color" :color="color" icon="book" dismissable>alert box</farm-alertbox>
+		</div> `,
+});
+
+export const withDismissableShowAgain = () => ({
+	data() {
+		return {
+			v: true,
+		};
+	},
+	template: `<div>
+		<farm-alertbox v-model="v" dismissable>alert box</farm-alertbox>
+		<farm-btn v-if="!v" @click="v = true;">
+			show
+		</farm-btn>
+	</div>`,
+});

package/src/components/AlertBox/AlertBox.vue

@@ -0,0 +1,127 @@
+<template>
+	<transition name="fade">
+		<div
+			v-if="visible"
+			:color="color"
+			:class="{ 'farm-alert-box': true, 'farm-alert-box--dense': dense }"
+		>
+			<farm-icon
+				v-if="icon"
+				class="farm-alert-box__icon"
+				variation="darken"
+				size="md"
+				:color="color"
+			>
+				{{ icon }}
+			</farm-icon>
+			<div
+				:class="{
+					'farm-alert-box__content': true,
+					'farm-alert-box__content--with-dismissable': dismissable,
+				}"
+			>
+				<farm-bodytext
+					variation="regular"
+					color-variation="darken"
+					:tag="tag"
+					:type="1"
+					:color="color"
+				>
+					<!-- @slot default -->
+					<slot></slot>
+				</farm-bodytext>
+			</div>
+			<farm-btn
+				class="farm-alert-box__close"
+				v-if="dismissable"
+				icon
+				size="md"
+				:color="color"
+				@click="close"
+			>
+				<farm-icon variation="darken" size="md" :color="color">close</farm-icon>
+			</farm-btn>
+		</div>
+	</transition>
+</template>
+
+<script lang="ts">
+import { ref, PropType } from 'vue';
+import valueWatcher from './valueWatcher';
+
+export default {
+	name: 'farm-alertbox',
+	props: {
+		/**
+		 * Left Icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Close icon and option to close AlertBox?
+		 */
+		dismissable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Dense?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		value: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Html tag (will be forwarded to farm-typography)
+		 */
+		tag: {
+			type: String,
+			default: 'p',
+		},
+	},
+	setup(props, { emit }) {
+		const visible = ref(true);
+
+		function close() {
+			visible.value = false;
+			emit('input', false);
+		}
+
+		valueWatcher(props, visible);
+
+		return {
+			visible,
+			close,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './AlertBox';
+</style>

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

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import AlertBox from '../AlertBox';
+
+describe('AlertBox component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(AlertBox, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Methods', () => {
+		describe('close', () => {
+			it('should close the AlertBox', () => {
+				expect(component.visible).toBeTruthy();
+				component.close();
+				expect(component.visible).toBeFalsy();
+			});
+		});
+	});
+});

package/src/components/AlertBox/__tests__/valueWatcher.spec.js

@@ -0,0 +1,15 @@
+import { ref, reactive } from 'vue';
+import valueWatcher from '../valueWatcher';
+
+describe('valueWatcher', () => {
+	it('Should change value for visible', done => {
+		const visible = ref(false);
+		const mockProps = reactive({ value: false });
+		valueWatcher(mockProps, visible);
+		mockProps.value = true;
+		setTimeout(() => {
+			expect(visible.value).toBeTruthy();
+			done();
+		});
+	});
+});

package/src/components/AlertBox/index.ts

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

package/src/components/AlertBox/valueWatcher.ts

@@ -0,0 +1,10 @@
+import { Ref, watch } from 'vue';
+
+export default function (props, visible: Ref) {
+	watch(
+		() => props.value,
+		(newValue: boolean) => {
+			visible.value = newValue;
+		}
+	);
+}

package/src/components/AlertReload/AlertReload.scss

@@ -0,0 +1,33 @@
+@import '../../configurations/functions';
+
+.farm-alert-reload {
+    border: 1px solid var(--farm-error-base);
+    border-radius: 8px;
+    padding: gutter('sm') gutter('md');
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__label {
+        padding: 0 gutter('sm');
+    }
+
+    >div {
+        display: flex;
+    }
+
+    &--vertical {
+        flex-direction: column;
+
+        >div {
+            margin-bottom: gutter('sm');
+        }
+    }
+}
+
+.farm-btn {
+    .farm-icon {
+        margin-right: gutter('sm');
+    }
+}
+

package/src/components/AlertReload/AlertReload.stories.js

@@ -0,0 +1,34 @@
+// import { withDesign } from 'storybook-addon-designs';
+import AlertReload from './AlertReload';
+
+export default {
+	title: 'Feedback/AlertReload',
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `AlertReload<br />
+				selector: <em>farm-alert-reload</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	components: {
+		'farm-alert-reload': AlertReload,
+	},
+	template: `<div style="width: 480px;">
+    <farm-alert-reload label="Text" />
+    </div>`,
+});
+
+export const Vertical = () => ({
+	components: {
+		'farm-alert-reload': AlertReload,
+	},
+	template: `<div style="width: 480px;">
+    <farm-alert-reload label="Text" vertical />
+    </div>`,
+});

package/src/components/AlertReload/AlertReload.vue

@@ -0,0 +1,46 @@
+<template>
+	<div
+		:class="{
+			'farm-alert-reload': true,
+			'farm-alert-reload--vertical': $props.vertical,
+		}"
+	>
+		<div>
+			<farm-icon color="error">alert</farm-icon>
+			<farm-typography tag="span" color="error" class="farm-alert-reload__label">
+				{{ label }}
+			</farm-typography>
+		</div>
+		<farm-btn alt="Recarregar" @click="$emit('onClick')">
+			<farm-icon>refresh</farm-icon>
+			Recarregar
+		</farm-btn>
+	</div>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-alert-reload',
+	props: {
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Vertical?
+		 */
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'AlertReload';
+</style>

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

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import AlertReload from '../AlertReload.vue';
+
+describe('AlertReload component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(AlertReload, {
+			propsData: {
+				managersString: 'a,b,c',
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/AlertReload/index.ts

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

package/src/components/ButtonToggle/ButtonToggle.scss

@@ -0,0 +1,14 @@
+.farm-button-toggle {
+    .farm-btn {
+        border-radius: 0;
+    }
+    > .farm-btn:first-of-type {
+        border-radius: 4px 0 0 4px;
+    }
+    > .farm-btn:last-child {
+        border-radius: 0 4px 4px 0;
+    }
+    > .farm-btn:not(:last-child) {
+        border-right: 0;
+    }
+}

package/src/components/ButtonToggle/ButtonToggle.stories.js

@@ -0,0 +1,50 @@
+import ButtonToggle from './ButtonToggle.vue';
+
+export default {
+	title: 'Interactions/Button Toggle',
+	component: ButtonToggle,
+	parameters: {
+		docs: {
+			description: {
+				component: `Button Toggle<br />
+				selector: <em>farm-button-toggle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3772%3A5973',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			buttons: [{ label: 'label 1' }, { label: 'label 2' }, { label: 'label 3' }],
+		};
+	},
+	template: `
+    <div>
+        <farm-button-toggle :buttons="buttons" />
+    </div>`,
+});
+
+export const BindModel = () => ({
+	data() {
+		return {
+			buttons: [{ label: 'label 1' }, { label: 'label 2' }, { label: 'label 3' }],
+			currentItem: 1,
+		};
+	},
+	template: `
+    <div>
+        <farm-button-toggle
+            v-model="currentItem"
+            :buttons="buttons"
+        />
+        selected item: {{ currentItem }}
+    </div>`,
+});

package/src/components/ButtonToggle/ButtonToggle.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="farm-button-toggle">
+		<farm-btn
+			v-for="(button, index) in buttons"
+			:key="`button_toggle_` + index"
+			:color="isSelected(index) ? 'primary' : 'secondary'"
+			:outlined="!isSelected(index)"
+			@click="setValue(index)"
+		>
+			{{ button.label }}
+		</farm-btn>
+	</div>
+</template>
+<script lang="ts">
+import { PropType, ref } from 'vue';
+import IButtonToggle from './IButtonToggle';
+
+export default {
+	name: 'farm-button-toggle',
+	props: {
+		/**
+		 * Array of buttons
+		 */
+		buttons: {
+			type: Array as PropType<Array<IButtonToggle>>,
+			default: () => [],
+		},
+		/**
+		 * v-model binding
+		 */
+		value: { default: null },
+	},
+	setup(props, { emit }) {
+		const inputVal = ref(props.value);
+
+		const setValue = (index: number) => {
+			inputVal.value = index;
+			emit('input', inputVal.value);
+		};
+
+		const isSelected = (index: number) => index === inputVal.value;
+
+		return {
+			inputVal,
+			setValue,
+			isSelected,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './ButtonToggle';
+</style>

package/src/components/ButtonToggle/IButtonToggle.ts

@@ -0,0 +1,5 @@
+interface IButtonToggle {
+	label: String;
+}
+
+export default IButtonToggle;