@farm-investimentos/front-mfe-components-vue3 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/BrazilMap/BrazilMap.stories.js

@@ -1,5 +1,6 @@
 import BrazilMap from './BrazilMap.vue';
 import BrazilMapPositionEditor from './BrazilMapPositionEditor.vue';
+import BrazilMapSkeleton from './BrazilMapSkeleton.vue';
 
 export default {
 	title: 'Display/Brazil Map',
@@ -25,6 +26,17 @@ Mapa interativo do Brasil com estados customizáveis e labels externos para esta
 
 ---
 
+### 🔄 Skeleton Loading
+
+Para exibir estado de carregamento, use o componente standalone \`<farm-brazil-map-skeleton>\`:
+
+\`\`\`vue
+<farm-brazil-map-skeleton v-if="isLoading" size="md" />
+<farm-brazil-map v-else :statesData="data" size="md" />
+\`\`\`
+
+---
+
 ### 📦 Formato dos Dados (\`statesData\`)
 
 \`\`\`javascript
@@ -377,6 +389,119 @@ Use esses eventos para criar tooltips customizados, painéis de detalhes, ou qua
 	},
 };
 
+export const SkeletonLoadingStandalone = () => ({
+	components: { BrazilMapSkeleton },
+	template: `
+		<div>
+			<h3 style="margin-bottom: 16px; color: #333;">Skeleton Loading (Standalone Component)</h3>
+			
+			<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
+				<div>
+					<h4 style="color: #4f8406; margin-bottom: 8px;">Small (sm)</h4>
+					<farm-brazil-map-skeleton size="sm" />
+				</div>
+				<div>
+					<h4 style="color: #4f8406; margin-bottom: 8px;">Medium (md)</h4>
+					<farm-brazil-map-skeleton size="md" />
+				</div>
+			</div>
+
+			<div style="margin-bottom: 24px;">
+				<h4 style="color: #4f8406; margin-bottom: 8px;">Large (lg)</h4>
+				<farm-brazil-map-skeleton size="lg" />
+			</div>
+
+			<div style="margin-top: 16px; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px;">
+				<strong>⚡ Componente Standalone:</strong> Use <code>&lt;farm-brazil-map-skeleton /&gt;</code> 
+				como componente independente para exibir o skeleton sem lógica condicional.
+			</div>
+
+			<div style="margin-top: 12px; padding: 12px; background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 4px;">
+				<strong>✅ Vantagens:</strong>
+				<ul style="margin: 8px 0 0 0; padding-left: 20px;">
+					<li>Componente dedicado apenas para loading</li>
+					<li>Não depende de props statesData</li>
+					<li>Código mais limpo e semântico</li>
+					<li>Fácil de usar em v-if/v-else</li>
+					<li>Separação clara de responsabilidades</li>
+				</ul>
+			</div>
+		</div>
+	`,
+});
+
+SkeletonLoadingStandalone.parameters = {
+	docs: {
+		description: {
+			story: `
+### 🔄 BrazilMapSkeleton - Componente Standalone
+
+Componente separado dedicado exclusivamente ao estado de loading com efeito wave shimmer.
+
+---
+
+#### Como usar:
+
+\`\`\`vue
+<template>
+  <farm-brazil-map-skeleton v-if="isLoading" size="md" />
+  <farm-brazil-map v-else :statesData="mapData" size="md" />
+</template>
+
+<script>
+import { BrazilMap, BrazilMapSkeleton } from '@/components/BrazilMap';
+
+export default {
+  components: { BrazilMap, BrazilMapSkeleton },
+  data() {
+    return {
+      isLoading: true,
+      mapData: [],
+    };
+  },
+  async mounted() {
+    const data = await fetch('/api/map-data');
+    this.mapData = await data.json();
+    this.isLoading = false;
+  },
+};
+</script>
+\`\`\`
+
+---
+
+#### Props disponíveis:
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| \`size\` | \`'sm' \\| 'md' \\| 'lg'\` | \`'md'\` | Tamanho do skeleton (sm: 300px, md: 460px, lg: 700px) |
+
+---
+
+#### Vantagens:
+
+✅ Componente dedicado apenas para loading  
+✅ Não depende de props statesData  
+✅ Código mais limpo e semântico  
+✅ Fácil de usar em v-if/v-else  
+✅ Separação clara de responsabilidades  
+✅ Wave shimmer effect profissional  
+✅ Zero layout shift garantido  
+
+---
+
+#### Implementação técnica:
+
+- Animações CSS com @keyframes
+- Wave shimmer horizontal (esquerda → direita)
+- Pulsação de opacidade sincronizada
+- Mesmo viewBox e paths do mapa original
+- Performance otimizada
+			`,
+		},
+	},
+};
+
 export const PositionEditor = () => ({
 	components: { BrazilMapPositionEditor },
 	template: '<BrazilMapPositionEditor />',

package/src/components/BrazilMap/BrazilMapSkeleton.scss

@@ -0,0 +1,73 @@
+@import '../../configurations/mixins';
+
+@keyframes skeleton-wave {
+	0% {
+		opacity: 0.4;
+	}
+	50% {
+		opacity: 0.8;
+	}
+	100% {
+		opacity: 0.4;
+	}
+}
+
+.farm-brazil-map-skeleton {
+	display: inline-block;
+	width: 100%;
+	pointer-events: none;
+	user-select: none;
+	position: relative;
+
+	svg {
+		width: 100%;
+		height: auto;
+		display: block;
+	}
+
+	&.farm-brazil-map--sm {
+		max-width: 300px;
+	}
+
+	&.farm-brazil-map--md {
+		max-width: 460px;
+	}
+
+	&.farm-brazil-map--lg {
+		max-width: 700px;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: -100%;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(
+			90deg,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 0.3) 50%,
+			rgba(255, 255, 255, 0) 100%
+		);
+		animation: skeleton-shimmer-wave 2s ease-in-out infinite;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	&__shape {
+		fill: #e8e8e8;
+		cursor: default;
+		transition: none;
+		animation: skeleton-wave 1.5s ease-in-out infinite;
+	}
+}
+
+@keyframes skeleton-shimmer-wave {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 100%;
+	}
+}

package/src/components/BrazilMap/BrazilMapSkeleton.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="farm-brazil-map farm-brazil-map-skeleton" :class="`farm-brazil-map--${size}`">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -40 700 545">
+            <!-- All Brazil States -->
+            <g v-for="state in brazilStates" :key="state.uf">
+                <path :id="`skeleton_shape_${state.uf.toLowerCase()}`" class="farm-brazil-map-skeleton__shape"
+                    :d="state.path" fill="#e8e8e8" stroke="#fff" stroke-width="1" />
+            </g>
+        </svg>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { BrazilMapSize } from './types';
+
+import { brazilStates } from './data/brazilMapData';
+
+export default defineComponent({
+    name: 'farm-brazil-map-skeleton',
+    props: {
+        size: {
+            type: String as PropType<BrazilMapSize>,
+            default: 'md',
+            validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
+        },
+    },
+    setup() {
+        return {
+            brazilStates,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+@import './BrazilMapSkeleton';
+</style>

package/src/components/BrazilMap/index.ts

@@ -1,5 +1,6 @@
 import BrazilMap from './BrazilMap.vue';
+import BrazilMapSkeleton from './BrazilMapSkeleton.vue';
 
 export default BrazilMap;
-export { BrazilMap };
 export * from './types';
+export { BrazilMap, BrazilMapSkeleton };

package/src/components/layout/PropsValues.mdx

@@ -7,31 +7,28 @@ import { Meta } from '@storybook/blocks';
 Many components have props that accepts strings as values instead of passa a numeric values.
 Example:
 
-<code>
-  \<my-component some-prop="md" /><br />
-  //"md" will be used as 12px in the CSS
-</code>
-
-<br />
+```html
+<my-component some-prop="md" /> // "md" will be used as 12px in the CSS
+```
 
 <br />
 
 ## Gutter
 
-* none: 0
-* xs: 4px
-* sm: 8px
-* vuetify: 12px
-* md: 16px
-* lg: 24px
-* xl: 32px
-* default: 24px
+-   none: 0
+-   xs: 4px
+-   sm: 8px
+-   vuetify: 12px
+-   md: 16px
+-   lg: 24px
+-   xl: 32px
+-   default: 24px
 
 ## Font Size
 
-* xs: 8px
-* sm: 12px
-* md: 14px
-* default: 16px
-* lg: 20px
-* xl: 24px
+-   xs: 8px
+-   sm: 12px
+-   md: 14px
+-   default: 16px
+-   lg: 20px
+-   xl: 24px

package/src/stories/Introduction.mdx

@@ -1,10 +1,11 @@
 import { Meta } from '@storybook/blocks';
 import imageFile from './assets/logo_farmtech.svg';
+import packageJson from '../../package.json';
 
 <Meta title="Introduction" />
 
 <style>
-  {`
+	{`
     .subheading {
       --mediumdark: '#999999';
       font-weight: 900;
@@ -115,4 +116,4 @@ import imageFile from './assets/logo_farmtech.svg';
 
 Here you can find the components from the Farmtech's Design System on the top of Vue 3.
 
-Currrent version: {VERSION}
+Current version: {packageJson.version}