let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-skeleton';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Squelette (skeleton)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Skeleton affiche un aperçu animé du contenu avant son chargement complet. Il améliore l'expérience utilisateur en réduisant la frustration liée aux temps d'attente et donne une indication visuelle de la structure à venir.

## Variantes disponibles

- **text** : Lignes de texte avec variations de largeur
- **article** : Bloc article avec titre et paragraphes
- **layout** : Structure de page complète avec zones définies

## Fonctionnalités

- Animation de pulsation (shimmer effect)
- Nombre de blocs configurable
- Hauteur personnalisable
- Intégrable dans cartes, listes et grilles
- Adaptation automatique à la largeur du conteneur

## Cas d'usage

- Chargement de listes d'articles ou actualités
- Aperçu de cartes avant rendu du contenu
- Placeholder pour images en cours de chargement
- États de chargement de pages entières

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = false;
    const slottedLabel = 'label';
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
// Template pour les variantes complexes
const VariantsTemplate = () => {
    const container = document.createElement('div');
    container.innerHTML = /* HTML */ `
    <spw-mosaic is-masonry="true" cols-desktop="3" cols-tablet="2" cols-mobile="1">
      <spw-mosaic-item>
        <spw-card full-height="true">
          <spw-card-content>
            <spw-skeleton blocks="8" variant="article"></spw-skeleton>
          </spw-card-content>
        </spw-card>
      </spw-mosaic-item>
      <spw-mosaic-item>
        <spw-card full-height="true">
          <spw-card-content>
            <spw-skeleton blocks="8" variant="article"></spw-skeleton>
          </spw-card-content>
        </spw-card>
      </spw-mosaic-item>
      <spw-mosaic-item>
        <spw-card full-height="true">
          <spw-card-content>
            <spw-skeleton blocks="8" variant="article"></spw-skeleton>
          </spw-card-content>
        </spw-card>
      </spw-mosaic-item>
    </spw-mosaic>
  `;
    return container;
};
// Story par défaut
export const Default = Template.bind({});
Default.args = {
    blocks: 3,
};
// Story pour la variante texte
export const VarianteTexte = Template.bind({});
VarianteTexte.args = {
    blocks: 5,
    variant: 'text',
};
// Story pour la variante article
export const VarianteArticle = Template.bind({});
VarianteArticle.args = {
    blocks: 6,
    variant: 'article',
};
// Story pour la variante layout
export const VarianteLayout = Template.bind({});
VarianteLayout.args = {
    blocks: 8,
    variant: 'layout',
};
// Story pour toutes les variantes ensemble
export const VarianteMosaique = VariantsTemplate.bind({});
Default.parameters = {
    docs: {
        description: {
            story: `Skeleton par défaut avec 3 blocs. Version générique adaptable à différents types de contenu. Cas d'usage : placeholder simple, chargement de contenu court.`,
        },
    },
};
VarianteTexte.parameters = {
    docs: {
        description: {
            story: `Skeleton variant text avec 5 lignes de texte. Largeurs variables pour simuler du texte naturel. Cas d'usage : chargement de paragraphes, aperçu de contenu textuel, descriptions.`,
        },
    },
};
VarianteArticle.parameters = {
    docs: {
        description: {
            story: `Skeleton variant article avec structure titre + contenu. Simule un bloc article complet. Cas d'usage : chargement d'articles de blog, actualités, contenus éditoriaux.`,
        },
    },
};
VarianteLayout.parameters = {
    docs: {
        description: {
            story: `Skeleton variant layout avec structure de page complète. Blocs multiples simulant header, sidebar et content. Cas d'usage : chargement de pages entières, dashboards, interfaces complexes.`,
        },
    },
};
VarianteMosaique.parameters = {
    docs: {
        description: {
            story: `Skeleton intégré dans une mosaïque de cartes. Démontre l'utilisation dans un contexte réel avec spw-mosaic et spw-card. Cas d'usage : galeries d'actualités, listes de produits, grilles de contenus à charger.`,
        },
    },
};
