@xsmusices/ui 0.0.0-stage → 1.41.1

package/fesm2022/xsmusices-ui-xs-list.xsstory-BxAErIEF.mjs

@@ -0,0 +1,633 @@
+import { XSListComponent } from './xsmusices-ui.mjs';
+import { m as mockArtists, g as mockTrackings, d as mockUsers, h as adminLastVisitsMock, c as mockMedia } from './xsmusices-ui-index-BpVmLxoG.mjs';
+
+const story = {
+    id: 'list',
+    name: 'List',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    created: '2026-01-02T00:44:32.451Z',
+    updated: '2026-01-26T23:04:09.997Z',
+    description: 'Componente genérico que muestra listas de diferentes tipos de items. Soporta items de acción (action) y items de tipo (type) como artistas, eventos, etc. Los items de tipo usan el componente xs-item-type de 2 líneas con formatos contextuales.',
+    component: XSListComponent,
+    selector: 'xs-list',
+    inputs: [
+        {
+            key: 'data',
+            label: 'Data',
+            type: 'json',
+            default: [],
+        },
+        {
+            key: 'variant',
+            label: 'Variant',
+            type: 'select',
+            options: ['action', 'type'],
+            default: 'action',
+        },
+        {
+            key: 'type',
+            label: 'Type (for type variant)',
+            type: 'select',
+            options: [
+                'artist',
+                'event',
+                'user',
+                'userStats',
+                'media',
+                'playlist',
+                'organization',
+                'equipment',
+                'tracking',
+                'lastLogin',
+                'lastVisit',
+                'site',
+                'tip',
+            ],
+            default: 'artist',
+        },
+        {
+            key: 'label',
+            label: 'Label',
+            type: 'text',
+        },
+        {
+            key: 'loadingAll',
+            label: 'Loading All',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'initialLoading',
+            label: 'Initial Loading',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'columns',
+            label: 'Columns',
+            type: 'select',
+            options: ['1', '2', '3'],
+            default: '2',
+        },
+        {
+            key: 'isLink',
+            label: 'Is Link',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'hasScroll',
+            label: 'Has Scroll',
+            type: 'select',
+            options: ['true', 'false', 'mobile', 'lg', 'xl'],
+            default: 'false',
+        },
+        {
+            key: 'rounded',
+            label: 'Rounded Borders',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'showChevron',
+            label: 'Show Chevron',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'size',
+            label: 'Size',
+            type: 'select',
+            options: ['normal', 'small', 'profile'],
+            default: 'normal',
+        },
+        {
+            key: 'class',
+            label: 'CSS Classes',
+            type: 'text',
+            default: '',
+        },
+    ],
+    examples: [
+        {
+            name: 'Lista básica (action)',
+            description: 'Lista simple con elementos de acción básicos',
+            inputs: {
+                variant: 'action',
+                data: [
+                    {
+                        id: 'profile',
+                        name: 'Perfil',
+                        description: 'Ver y editar tu perfil',
+                        action: 'profile',
+                        icon: 'user',
+                    },
+                    {
+                        id: 'settings',
+                        name: 'Configuración',
+                        description: 'Ajustes de la aplicación',
+                        action: 'settings',
+                        icon: 'cog',
+                    },
+                    {
+                        id: 'help',
+                        name: 'Ayuda',
+                        description: 'Centro de ayuda y soporte',
+                        action: 'help',
+                        icon: 'circle-question',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Con badges y variantes (action)',
+            description: 'Lista con diferentes tipos de badges y variantes de color',
+            inputs: {
+                variant: 'action',
+                data: [
+                    {
+                        id: 'notifications',
+                        name: 'Notificaciones',
+                        description: 'Gestionar notificaciones',
+                        action: 'notifications',
+                        icon: 'bell',
+                        badge: { icon: 'bell', text: '5' },
+                        variant: 'primary',
+                    },
+                    {
+                        id: 'messages',
+                        name: 'Mensajes',
+                        description: 'Centro de mensajes',
+                        action: 'messages',
+                        icon: 'envelope',
+                        badge: '12',
+                        variant: 'success',
+                    },
+                    {
+                        id: 'delete',
+                        name: 'Eliminar',
+                        description: 'Eliminar elemento',
+                        action: 'delete',
+                        icon: 'trash',
+                        variant: 'danger',
+                        disabled: true,
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Con chevron (action)',
+            description: 'Lista de acciones con chevron para indicar navegación',
+            inputs: {
+                variant: 'action',
+                data: [
+                    {
+                        id: 'profile',
+                        name: 'Perfil',
+                        description: 'Ver y editar tu perfil',
+                        action: 'profile',
+                        icon: 'user',
+                    },
+                    {
+                        id: 'settings',
+                        name: 'Configuración',
+                        description: 'Ajustes de la aplicación',
+                        action: 'settings',
+                        icon: 'cog',
+                    },
+                    {
+                        id: 'help',
+                        name: 'Ayuda',
+                        description: 'Centro de ayuda',
+                        action: 'help',
+                        icon: 'circle-question',
+                    },
+                ],
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Menú de usuario (profile)',
+            description: 'Menú de perfil de usuario con botones de acción compactos y estilo de perfil',
+            inputs: {
+                variant: 'action',
+                size: 'profile',
+                columns: 1,
+                showChevron: true,
+                rounded: true,
+                data: [
+                    {
+                        id: 'profile',
+                        name: 'Mi perfil',
+                        description: 'Editar información personal',
+                        action: 'profile',
+                        icon: 'user',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                    },
+                    {
+                        id: 'subscriptions',
+                        name: 'Suscripciones',
+                        description: 'Ver tus suscripciones activas',
+                        action: 'subscriptions',
+                        icon: 'ticket',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                    },
+                    {
+                        id: 'security',
+                        name: 'Seguridad',
+                        description: 'Cambiar contraseña y datos',
+                        action: 'security',
+                        icon: 'lock',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Acciones de item manager (profile)',
+            description: 'Lista de acciones para la pantalla de gestión de un item con estilo perfil',
+            inputs: {
+                variant: 'action',
+                size: 'profile',
+                columns: 2,
+                showChevron: false,
+                rounded: true,
+                data: [
+                    {
+                        id: 'publish',
+                        name: 'Publicar',
+                        description: 'Publica el item al perfil',
+                        action: 'publish',
+                        icon: 'upload',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                        badge: { text: 'Nuevo' },
+                    },
+                    {
+                        id: 'analytics',
+                        name: 'Estadísticas',
+                        description: 'Ver visitas y rendimiento',
+                        action: 'analytics',
+                        icon: 'chart-line',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                    },
+                    {
+                        id: 'customize',
+                        name: 'Personalizar',
+                        description: 'Ajustar datos y presentación',
+                        action: 'customize',
+                        icon: 'palette',
+                        iconBgColor: 'bg-zinc-800/50',
+                        iconColor: 'text-white',
+                    },
+                    {
+                        id: 'delete',
+                        name: 'Eliminar',
+                        description: 'Eliminar este item',
+                        action: 'delete',
+                        icon: 'trash',
+                        iconBgColor: 'bg-red-900/20',
+                        iconColor: 'text-red-400',
+                        variant: 'danger',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Artistas con Seguidores (type)',
+            description: 'Lista de artistas mostrando número de seguidores',
+            inputs: {
+                variant: 'type',
+                type: 'artist',
+                data: [
+                    {
+                        ...mockArtists[0],
+                        value: 15420,
+                        unit: 'seguidores',
+                    },
+                    { ...mockArtists[1], value: 8900, unit: 'seguidores' },
+                    {
+                        ...mockArtists[2],
+                        value: 25600,
+                        unit: 'seguidores',
+                    },
+                ],
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Eventos con Asistentes (type)',
+            description: 'Lista de eventos mostrando número de asistentes',
+            inputs: {
+                variant: 'type',
+                type: 'event',
+                data: [
+                    {
+                        id: 'event-1',
+                        name: 'Festival de Música',
+                        description: 'Evento musical al aire libre',
+                        date: '2026-01-15T20:00:00.000Z',
+                        location: 'Parque Central',
+                        capacity: 1000,
+                        badge: 'Próximo',
+                        value: 850,
+                        unit: 'asistentes',
+                    },
+                    {
+                        id: 'event-2',
+                        name: 'Concierto Privado',
+                        description: 'Evento exclusivo',
+                        date: '2026-01-20T21:00:00.000Z',
+                        location: 'Teatro Real',
+                        capacity: 200,
+                        badge: 'VIP',
+                        value: 180,
+                        unit: 'asistentes',
+                    },
+                ],
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Usuarios (type)',
+            description: 'Lista de usuarios con información de país',
+            inputs: {
+                variant: 'type',
+                type: 'user',
+                data: mockUsers.slice(0, 3).map((user) => ({
+                    _id: user._id,
+                    name: user.name,
+                    type: user.type,
+                    image: user.image,
+                    country: user.country,
+                })),
+            },
+        },
+        {
+            name: 'Usuarios con estadísticas (type)',
+            description: 'Lista de usuarios mostrando estadísticas detalladas',
+            inputs: {
+                variant: 'type',
+                type: 'userStats',
+                data: mockArtists.map((artist, index) => ({
+                    ...artist,
+                    value: '55',
+                    unit: index % 2 === 0 ? 'likes' : 'comentarios',
+                })),
+            },
+        },
+        {
+            name: 'Media (type)',
+            description: 'Lista de contenido multimedia',
+            inputs: {
+                variant: 'type',
+                type: 'media',
+                data: mockMedia.slice(0, 3),
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Playlists (type)',
+            description: 'Lista de playlists musicales',
+            inputs: {
+                variant: 'type',
+                type: 'playlist',
+                data: [
+                    {
+                        id: 'playlist-1',
+                        name: 'Éxitos del 2026',
+                        description: 'Los mejores hits del año',
+                        trackCount: 25,
+                        duration: '2h 15m',
+                        imageUrl: 'https://example.com/playlist1.jpg',
+                    },
+                    {
+                        id: 'playlist-2',
+                        name: 'Música Chill',
+                        description: 'Relájate con estos sonidos',
+                        trackCount: 18,
+                        duration: '1h 45m',
+                        imageUrl: 'https://example.com/playlist2.jpg',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Organizaciones (type)',
+            description: 'Lista de organizaciones y empresas',
+            inputs: {
+                variant: 'type',
+                type: 'organization',
+                data: [
+                    {
+                        id: 'org-1',
+                        name: 'XSMusic Productions',
+                        description: 'Productora musical independiente',
+                        type: 'organization',
+                        location: 'Madrid, España',
+                    },
+                    {
+                        id: 'org-2',
+                        name: 'Festival Corp',
+                        description: 'Organizadores de eventos musicales',
+                        type: 'organization',
+                        location: 'Barcelona, España',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Lista sin bordes redondeados (Action Sheet)',
+            description: 'Lista sin bordes redondeados, ideal para action sheets',
+            inputs: {
+                variant: 'action',
+                rounded: false,
+                size: 'small',
+                data: [
+                    {
+                        id: 'share',
+                        name: 'Compartir',
+                        description: 'Compartir este contenido',
+                        action: 'share',
+                        icon: 'share',
+                        iconBgColor: 'bg-blue-900/20',
+                        iconColor: 'text-blue-400',
+                    },
+                    {
+                        id: 'copy',
+                        name: 'Copiar enlace',
+                        description: 'Copiar enlace al portapapeles',
+                        action: 'copy',
+                        icon: 'copy',
+                        iconBgColor: 'bg-gray-900/20',
+                        iconColor: 'text-gray-400',
+                    },
+                    {
+                        id: 'report',
+                        name: 'Reportar',
+                        description: 'Reportar contenido inapropiado',
+                        action: 'report',
+                        icon: 'flag',
+                        iconBgColor: 'bg-red-900/20',
+                        iconColor: 'text-red-400',
+                        variant: 'danger',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Equipos (type)',
+            description: 'Lista de equipos y recursos técnicos',
+            inputs: {
+                variant: 'type',
+                type: 'equipment',
+                data: [
+                    {
+                        id: 'eq-1',
+                        name: 'Consola de Mezcla Allen & Heath',
+                        description: 'Consola digital de 32 canales',
+                        type: 'equipment',
+                        category: 'Audio',
+                        status: 'available',
+                    },
+                    {
+                        id: 'eq-2',
+                        name: 'Sistema de Iluminación LED',
+                        description: 'Paneles RGB para escenarios',
+                        type: 'equipment',
+                        category: 'Lighting',
+                        status: 'maintenance',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Tracking (type)',
+            description: 'Lista de registros de seguimiento del sistema',
+            inputs: {
+                variant: 'type',
+                type: 'tracking',
+                data: [
+                    mockTrackings[0],
+                    mockTrackings[1],
+                    mockTrackings[2],
+                ],
+            },
+        },
+        {
+            name: 'Last Login (type)',
+            description: 'Lista de últimos inicios de sesión',
+            inputs: {
+                variant: 'type',
+                type: 'lastLogin',
+                size: 'small',
+                data: [mockUsers[0], mockUsers[1], mockUsers[2]],
+            },
+        },
+        {
+            name: 'Last Visits (type)',
+            description: 'Lista de últimas visitas con información detallada',
+            inputs: {
+                variant: 'type',
+                type: 'lastVisit',
+                data: [
+                    adminLastVisitsMock[0],
+                    adminLastVisitsMock[1],
+                    adminLastVisitsMock[2],
+                ],
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Sitios (type)',
+            description: 'Lista de ubicaciones y venues',
+            inputs: {
+                variant: 'type',
+                type: 'site',
+                data: [
+                    {
+                        id: 'site-1',
+                        name: 'Sala Apolo',
+                        description: 'Sala de conciertos en Barcelona',
+                        type: 'site',
+                        address: 'Nou de la Rambla, 113',
+                        capacity: 1000,
+                        location: 'Barcelona, España',
+                    },
+                    {
+                        id: 'site-2',
+                        name: 'Estadio Santiago Bernabéu',
+                        description: 'Estadio de fútbol y conciertos',
+                        type: 'site',
+                        address: 'Av. de Concha Espina, 1',
+                        capacity: 81044,
+                        location: 'Madrid, España',
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Tips (type)',
+            description: 'Lista de consejos y recomendaciones',
+            inputs: {
+                variant: 'type',
+                type: 'tip',
+                data: [
+                    {
+                        id: 'tip-1',
+                        title: 'Mejora tu mezcla',
+                        description: 'Consejos para lograr una mejor mezcla en tus producciones',
+                        category: 'Production',
+                        difficulty: 'intermediate',
+                    },
+                    {
+                        id: 'tip-2',
+                        title: 'Marketing en redes',
+                        description: 'Estrategias efectivas para promocionar tu música',
+                        category: 'Marketing',
+                        difficulty: 'beginner',
+                    },
+                ],
+            },
+        },
+    ],
+    multilanguage: false,
+    notes: [
+        {
+            text: 'API simplificada: usa [data] en lugar de [items] y [variant] en lugar de [itemType]',
+            type: 'info',
+        },
+        {
+            text: 'Para variant="type", especifica el type apropiado (artist, event, user, userStats, media, playlist, organization, equipment, tracking, site, tip)',
+            type: 'info',
+        },
+        {
+            text: 'Soporta lazy loading con initialLoading y skeleton states',
+            type: 'info',
+        },
+        {
+            text: 'Compatible con action sheets cuando rounded=false',
+            type: 'info',
+        },
+        {
+            text: 'Usa size="profile" para menús de usuario y listas de acciones estilo perfil',
+            type: 'info',
+        },
+    ],
+    coverage: {
+        statements: 2,
+        branches: 0,
+        functions: 0,
+        lines: 2,
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-list.xsstory-BxAErIEF.mjs.map