@farm-investimentos/front-mfe-components 15.13.3 → 15.14.0

package/src/components/FilterEmptyState/FilterEmptyState.stories.js

@@ -0,0 +1,106 @@
+import FilterEmptyState from './FilterEmptyState.vue';
+
+export default {
+	title: 'Display/FilterEmptyState',
+	component: FilterEmptyState,
+	parameters: {
+		docs: {
+			description: {
+				component: `Componente para exibir estados vazios em filtros<br />
+				selector: <em>farm-filter-empty-state</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+	argTypes: {
+		isEmpty: {
+			control: { type: 'boolean' },
+			description: 'Indica se o estado é vazio (sem dados)',
+		},
+		isNotFound: {
+			control: { type: 'boolean' },
+			description: 'Indica se o estado é não encontrado (sem resultados do filtro)',
+		},
+		isEmptyImage: {
+			control: { type: 'text' },
+			description: 'URL da imagem personalizada para estado vazio',
+		},
+		isEmptyImageAlt: {
+			control: { type: 'text' },
+			description: 'Texto alternativo da imagem para estado vazio',
+		},
+		isNotFoundImage: {
+			control: { type: 'text' },
+			description: 'URL da imagem personalizada para estado não encontrado',
+		},
+		isNotFoundImageAlt: {
+			control: { type: 'text' },
+			description: 'Texto alternativo da imagem para estado não encontrado',
+		},
+		title: {
+			control: { type: 'text' },
+			description: 'Título personalizado',
+		},
+		subtitle: {
+			control: { type: 'text' },
+			description: 'Subtítulo personalizado',
+		},
+	},
+	args: {
+		isEmpty: true,
+		isNotFound: false,
+	},
+};
+
+// Empty state image
+export const EmptyStateImage = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: '<farm-filter-empty-state v-bind="args" />',
+});
+EmptyStateImage.storyName = 'Empty state image';
+EmptyStateImage.args = {
+	isEmpty: true,
+	isNotFound: false,
+};
+
+// Not found state image
+export const NotFoundStateImage = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: '<farm-filter-empty-state v-bind="args" />',
+});
+NotFoundStateImage.storyName = 'Not found state image';
+NotFoundStateImage.args = {
+	isEmpty: false,
+	isNotFound: true,
+};
+
+// Custom titles and subtitles (slot)
+export const CustomTitlesAndSubtitles = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: `
+		<farm-filter-empty-state v-bind="args">
+			<template #title>
+				<span style="color: #4f8406;">Título customizado via slot</span>
+			</template>
+			<template #subtitle>
+				<span>Subtítulo <b>com HTML</b> via slot</span>
+			</template>
+		</farm-filter-empty-state>
+	`,
+});
+CustomTitlesAndSubtitles.storyName = 'Custom titles and subtitles (slot)';
+CustomTitlesAndSubtitles.args = {
+	isEmpty: true,
+	isNotFound: false,
+};

package/src/components/FilterEmptyState/FilterEmptyState.vue

@@ -0,0 +1,137 @@
+<template>
+	<farm-box>
+		<farm-row justify="center" class="mb-4">
+			<img
+				v-if="isEmpty"
+				:src="isEmptyImage"
+				:alt="isEmptyImageAlt"
+				class="filter-empty-state__image"
+			/>
+			<img
+				v-else-if="isNotFound"
+				:src="isNotFoundImage"
+				:alt="isNotFoundImageAlt"
+				class="filter-empty-state__image"
+			/>
+		</farm-row>
+		<farm-row justify="center">
+			<farm-bodytext variation="bold" color="gray" :type="2">
+				<slot name="title">
+					{{ title || 'Nenhuma informação para exibir aqui' }}
+				</slot>
+			</farm-bodytext>
+		</farm-row>
+		<farm-row justify="center" class="mt-2">
+			<farm-caption variation="regular" color="gray">
+				<slot name="subtitle">
+					{{ subtitle || 'Tente filtrar novamente sua pesquisa.' }}
+				</slot>
+			</farm-caption>
+		</farm-row>
+	</farm-box>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export type FilterEmptyStateProps = {
+	/**
+	 * Indicates if the state is empty (no data)
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates if the state is not found (no results from filter)
+	 */
+	isNotFound?: boolean;
+	/**
+	 * Custom image URL for empty state
+	 */
+	isEmptyImage?: string;
+	/**
+	 * Alt text for empty state image
+	 */
+	isEmptyImageAlt?: string;
+	/**
+	 * Custom image URL for not found state
+	 */
+	isNotFoundImage?: string;
+	/**
+	 * Alt text for not found state image
+	 */
+	isNotFoundImageAlt?: string;
+	/**
+	 * Title to be displayed
+	 */
+	title?: string;
+	/**
+	 * Subtitle to be displayed
+	 */
+	subtitle?: string;
+};
+
+export default defineComponent({
+	name: 'farm-filter-empty-state',
+	props: {
+		/**
+		 * Indicates if the state is empty (no data)
+		 */
+		isEmpty: {
+			type: Boolean as PropType<FilterEmptyStateProps['isEmpty']>,
+			default: false,
+		},
+		/**
+		 * Indicates if the state is not found (no results from filter)
+		 */
+		isNotFound: {
+			type: Boolean as PropType<FilterEmptyStateProps['isNotFound']>,
+			default: false,
+		},
+		/**
+		 * Custom image URL for empty state
+		 */
+		isEmptyImage: {
+			type: String as PropType<FilterEmptyStateProps['isEmptyImage']>,
+			default: require('../../assets/imgs/empty-data.svg'),
+		},
+		/**
+		 * Alt text for empty state image
+		 */
+		isEmptyImageAlt: {
+			type: String as PropType<FilterEmptyStateProps['isEmptyImageAlt']>,
+			default: 'Imagem referente a dados vazios',
+		},
+		/**
+		 * Custom image URL for not found state
+		 */
+		isNotFoundImage: {
+			type: String as PropType<FilterEmptyStateProps['isNotFoundImage']>,
+			default: require('../../assets/imgs/empty-not-found.svg'),
+		},
+		/**
+		 * Alt text for not found state image
+		 */
+		isNotFoundImageAlt: {
+			type: String as PropType<FilterEmptyStateProps['isNotFoundImageAlt']>,
+			default: 'Imagem referente a filtro vazio',
+		},
+		/**
+		 * Title to be displayed
+		 */
+		title: {
+			type: String as PropType<FilterEmptyStateProps['title']>,
+			default: '',
+		},
+		/**
+		 * Subtitle to be displayed
+		 */
+		subtitle: {
+			type: String as PropType<FilterEmptyStateProps['subtitle']>,
+			default: '',
+		},
+	},
+});
+</script>
+
+<style scoped lang="scss">
+@import './FilterEmptyState.scss';
+</style>

package/src/components/FilterEmptyState/__tests__/FilterEmptyState.test.js

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import FilterEmptyState from '../FilterEmptyState.vue';
+
+const globalStubs = {
+	'farm-box': { template: '<div><slot /></div>' },
+	'farm-row': { template: '<div><slot /></div>' },
+	'farm-bodytext': { template: '<div><slot /></div>' },
+	'farm-caption': { template: '<div><slot /></div>' },
+};
+
+describe('FilterEmptyState', () => {
+	it('renders empty state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				isNotFound: false,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders not found state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: false,
+				isNotFound: true,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders custom title and subtitle', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				title: 'Custom Title',
+				subtitle: 'Custom Subtitle',
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.text()).toContain('Custom Title');
+		expect(wrapper.text()).toContain('Custom Subtitle');
+	});
+
+	it('uses custom images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				isEmptyImage: 'custom-empty-image.svg',
+				isEmptyImageAlt: 'Custom empty image',
+			},
+			stubs: globalStubs,
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-empty-image.svg');
+		expect(img.attributes('alt')).toBe('Custom empty image');
+	});
+
+	it('uses custom not found images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isNotFound: true,
+				isNotFoundImage: 'custom-not-found-image.svg',
+				isNotFoundImageAlt: 'Custom not found image',
+			},
+			stubs: globalStubs,
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-not-found-image.svg');
+		expect(img.attributes('alt')).toBe('Custom not found image');
+	});
+
+	it('has correct default props', () => {
+		const wrapper = mount(FilterEmptyState, {
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.props('isEmpty')).toBe(false);
+		expect(wrapper.props('isNotFound')).toBe(false);
+		expect(wrapper.props('title')).toBe('');
+		expect(wrapper.props('subtitle')).toBe('');
+	});
+
+	it('does not show image when neither isEmpty nor isNotFound is true', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: false,
+				isNotFound: false,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(false);
+	});
+});

package/src/components/FilterEmptyState/index.ts

@@ -0,0 +1,38 @@
+import FilterEmptyState from './FilterEmptyState.vue';
+
+export type FilterEmptyStateProps = {
+	/**
+	 * Indicates if the state is empty (no data)
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates if the state is not found (no results from filter)
+	 */
+	isNotFound?: boolean;
+	/**
+	 * Custom image URL for empty state
+	 */
+	isEmptyImage?: string;
+	/**
+	 * Alt text for empty state image
+	 */
+	isEmptyImageAlt?: string;
+	/**
+	 * Custom image URL for not found state
+	 */
+	isNotFoundImage?: string;
+	/**
+	 * Alt text for not found state image
+	 */
+	isNotFoundImageAlt?: string;
+	/**
+	 * Title to be displayed
+	 */
+	title?: string;
+	/**
+	 * Subtitle to be displayed
+	 */
+	subtitle?: string;
+};
+
+export default FilterEmptyState;

package/src/main.ts

@@ -12,6 +12,7 @@ import DatePicker from './components/DatePicker';
 import ManagersList from './components/ManagersList';
 import PromptUserToConfirm from './components/PromptUserToConfirm';
 import ModalPromptUser from './components/ModalPromptUser';
+import FilterEmptyState from './components/FilterEmptyState';
 
 import TableContextMenu from './components/TableContextMenu';
 import IconBox from './components/IconBox';
@@ -21,6 +22,7 @@ import Collapsible from './components/Collapsible';
 import IdCaption from './components/IdCaption';
 import ResourceMetaInfo from './components/ResourceMetaInfo';
 import GanttChart from './components/GanttChart';
+
 export {
 	DataTableEmptyWrapper,
 	DataTablePaginator,
@@ -41,6 +43,7 @@ export {
 	Collapsible,
 	IdCaption,
 	ResourceMetaInfo,
+	FilterEmptyState,
 	GanttChart,
 };
 
@@ -94,3 +97,4 @@ export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
 export * from './components/GanttChart';
+export * from './components/FilterEmptyState';

package/src/shims-tsx.d.ts

@@ -1,11 +1,16 @@
 import Vue, { VNode } from 'vue';
 
 declare global {
-  namespace JSX {
-    interface Element extends VNode {}
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
+	namespace JSX {
+		interface Element extends VNode {}
+		interface ElementClass extends Vue {}
+		interface IntrinsicElements {
+			[elem: string]: any;
+		}
+	}
+}
+
+declare module '*.svg' {
+	const content: string;
+	export default content;
 }

package/src/shims-vue.d.ts

@@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
 }