Component docs

function groupComponentsByCategory(
  components: MFEComponent[],
): Map<string, MFEComponent[]>

function generateComponentDocs(component: MFEComponent): string

import { groupComponentsByCategory } from '@pzeta/mfe-contracts/helpers'

const grouped = groupComponentsByCategory([
  { name: 'ClienteCard', description: '...', category: 'Cards' },
  { name: 'AgenteCard',  description: '...', category: 'Cards' },
  { name: 'KpiTile',     description: '...', category: 'Metrics' },
  { name: 'Legacy',      description: '...' }, // no category
])

// Map:
// 'Cards'   → [ClienteCard, AgenteCard]
// 'Metrics' → [KpiTile]
// 'General' → [Legacy]

for (const [category, components] of grouped) {
  console.log(`${category}: ${components.length} componenti`)
  for (const c of components) {
    console.log(`  - ${c.name}: ${c.description}`)
  }
}

<script setup lang="ts">
import { computed } from 'vue'
import { groupComponentsByCategory } from '@pzeta/mfe-contracts/helpers'

const props = defineProps<{ manifest: MFEManifest }>()

const byCategory = computed(() =>
  groupComponentsByCategory(props.manifest.components ?? []),
)
</script>

<template>
  <section v-for="[category, components] in byCategory" :key="category">
    <h2>{{ category }}</h2>
    <div class="catalog-grid">
      <ComponentCard v-for="c in components" :key="c.name" :component="c" />
    </div>
  </section>
</template>

import { generateComponentDocs } from '@pzeta/mfe-contracts/helpers'

const md = generateComponentDocs({
  name: 'ClienteCard',
  description: 'Card riassuntiva di un cliente',
  category: 'Cards',
  props: [
    { name: 'cliente', type: 'Cliente', required: true, description: 'Oggetto cliente' },
    { name: 'compact', type: 'boolean', default: false, description: 'Versione compatta' },
  ],
  events: [
    { name: 'edit', payload: 'Cliente', description: 'Click su modifica' },
    { name: 'delete', payload: 'string', description: 'Click su elimina (id)' },
  ],
  exampleSource: `<ClienteCard :cliente="c" @edit="onEdit" @delete="onDelete" />`,
})

console.log(md)

# ClienteCard

Card riassuntiva di un cliente

## Props

| Nome | Tipo | Required | Default | Descrizione |
|------|------|----------|---------|-------------|
| cliente | `Cliente` | ✓ | - | Oggetto cliente |
| compact | `boolean` |  | `false` | Versione compatta |

## Events

| Nome | Payload | Descrizione |
|------|---------|-------------|
| edit | `Cliente` | Click su modifica |
| delete | `string` | Click su elimina (id) |

## Esempio d'uso

​```vue
<ClienteCard :cliente="c" @edit="onEdit" @delete="onDelete" />
​```

<script setup lang="ts">
import { computed } from 'vue'
import {
  groupComponentsByCategory,
  generateComponentDocs,
} from '@pzeta/mfe-contracts/helpers'

const props = defineProps<{ manifest: MFEManifest }>()

const docs = computed(() => {
  const byCategory = groupComponentsByCategory(props.manifest.components ?? [])
  let md = `# ${props.manifest.name}\n\n${props.manifest.description}\n\n`

  for (const [category, components] of byCategory) {
    md += `## ${category}\n\n`
    for (const c of components) {
      md += generateComponentDocs(c)
      md += '\n---\n\n'
    }
  }

  return md
})
</script>

<template>
  <pre><code>{{ docs }}</code></pre>
  <!-- Oppure: renderizza con marked, MDX, @nuxt/content, ecc. -->
</template>