ywana-core8 0.1.84 → 0.1.85

package/src/html/actions-cell.example.js

@@ -0,0 +1,587 @@
+import React, { useState } from 'react'
+import { ActionsCell } from './actions-cell'
+import { Button } from './button'
+import { Header } from './header'
+import { List } from './list'
+import { Accordion } from './accordion'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
+
+/**
+ * Ejemplos de uso de ActionsCell en diferentes componentes
+ */
+const ActionsCellExamples = () => {
+    const [selectedItem, setSelectedItem] = useState(null)
+
+    // Muchas acciones con textos REALMENTE largos que GARANTIZAN overflow
+    const createManyActions = (context, id) => (
+        <div style={{ display: 'flex', gap: '4px' }}>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="edit"
+                title="Editar elemento seleccionado con todas las opciones disponibles"
+                onClick={() => alert(`Editar ${context}: ${id}`)}
+            >
+                Editar elemento seleccionado
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="visibility"
+                title="Ver todos los detalles completos del elemento"
+                onClick={() => alert(`Ver ${context}: ${id}`)}
+            >
+                Ver detalles completos
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="content_copy"
+                title="Duplicar elemento con todas sus propiedades"
+                onClick={() => alert(`Duplicar ${context}: ${id}`)}
+            >
+                Duplicar con propiedades
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="share"
+                title="Compartir con otros usuarios del sistema"
+                onClick={() => alert(`Compartir ${context}: ${id}`)}
+            >
+                Compartir con otros usuarios
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="download"
+                title="Descargar archivo en formato específico"
+                onClick={() => alert(`Descargar ${context}: ${id}`)}
+            >
+                Descargar en formato específico
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="settings"
+                title="Configurar todas las opciones avanzadas"
+                onClick={() => alert(`Configurar ${context}: ${id}`)}
+            >
+                Configurar opciones avanzadas
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="archive"
+                title="Archivar elemento temporalmente"
+                onClick={() => alert(`Archivar ${context}: ${id}`)}
+            >
+                Archivar temporalmente
+            </Button>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="delete"
+                title="Eliminar permanentemente del sistema"
+                onClick={() => alert(`Eliminar ${context}: ${id}`)}
+            >
+                Eliminar permanentemente
+            </Button>
+        </div>
+    )
+
+    // Acciones medianas que pueden hacer overflow
+    const createMediumActions = (context, id) => (
+        <div style={{ display: 'flex', gap: '4px' }}>
+            <Button
+                size="small"
+                variant="outlined"
+                icon="edit"
+                title="Editar"
+                onClick={() => alert(`Editar ${context}: ${id}`)}
+            />
+            <Button
+                size="small"
+                variant="outlined"
+                icon="visibility"
+                title="Ver detalles"
+                onClick={() => alert(`Ver ${context}: ${id}`)}
+            />
+            <Button
+                size="small"
+                variant="outlined"
+                icon="content_copy"
+                title="Duplicar"
+                onClick={() => alert(`Duplicar ${context}: ${id}`)}
+            />
+            <Button
+                size="small"
+                variant="outlined"
+                icon="share"
+                title="Compartir"
+                onClick={() => alert(`Compartir ${context}: ${id}`)}
+            />
+            <Button
+                size="small"
+                variant="outlined"
+                icon="download"
+                title="Descargar"
+                onClick={() => alert(`Descargar ${context}: ${id}`)}
+            />
+            <Button
+                size="small"
+                variant="outlined"
+                icon="delete"
+                title="Eliminar"
+                onClick={() => alert(`Eliminar ${context}: ${id}`)}
+            />
+        </div>
+    )
+
+    const createFewActions = (context, id) => (
+        <div style={{ display: 'flex', gap: '4px' }}>
+            <Button 
+                size="small" 
+                variant="outlined" 
+                icon="edit"
+                title="Editar"
+                onClick={() => alert(`Editar ${context}: ${id}`)}
+            />
+            <Button 
+                size="small" 
+                variant="outlined" 
+                icon="delete"
+                title="Eliminar"
+                onClick={() => alert(`Eliminar ${context}: ${id}`)}
+            />
+        </div>
+    )
+
+    const sections = [
+        { id: 'overflow-demo', title: 'Demostración de Overflow' },
+        { id: 'header-actions', title: 'Header con ActionsCell' },
+        { id: 'list-actions', title: 'List con ActionsCell' },
+        { id: 'accordion-actions', title: 'Accordion con ActionsCell' },
+        { id: 'menu-alignment', title: 'Alineación Automática del Menú' }
+    ]
+
+    return (
+        <ExampleLayout title="ActionsCell - Componente Reutilizable" sections={sections}>
+            {/* Demostración de Overflow */}
+            <ExampleSection title="Demostración de Overflow" id="overflow-demo">
+                <ExampleSubsection title="Comparación de Anchos Máximos">
+                    <div style={{ display: 'grid', gap: '1rem' }}>
+                        {/* Ancho muy restrictivo */}
+                        <div style={{ border: '2px solid #ff6b6b', borderRadius: '8px', padding: '1rem' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#ff6b6b' }}>maxWidth: 60px (Extremadamente Restrictivo)</h4>
+                            <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                                Incluso 2 iconos pequeños se convierten en menú
+                            </p>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                                <span style={{ fontWeight: 'bold', minWidth: '100px' }}>Resultado:</span>
+                                <ActionsCell
+                                    actions={createFewActions('demo', 'extreme')}
+                                    maxWidth={60}
+                                    menuAlign="right"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Ancho restrictivo */}
+                        <div style={{ border: '2px solid #ffa726', borderRadius: '8px', padding: '1rem' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#ffa726' }}>maxWidth: 120px (Restrictivo)</h4>
+                            <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                                6 iconos pequeños probablemente se conviertan en menú
+                            </p>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                                <span style={{ fontWeight: 'bold', minWidth: '100px' }}>Resultado:</span>
+                                <ActionsCell
+                                    actions={createMediumActions('demo', 'restrictive')}
+                                    maxWidth={120}
+                                    menuAlign="right"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Ancho moderado */}
+                        <div style={{ border: '2px solid #66bb6a', borderRadius: '8px', padding: '1rem' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#66bb6a' }}>maxWidth: 200px (Moderado)</h4>
+                            <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                                Acciones con texto se convierten en menú, iconos solos pueden caber
+                            </p>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                                <span style={{ fontWeight: 'bold', minWidth: '100px' }}>Resultado:</span>
+                                <ActionsCell
+                                    actions={createManyActions('demo', 'moderate')}
+                                    maxWidth={200}
+                                    menuAlign="right"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Ancho generoso */}
+                        <div style={{ border: '2px solid #42a5f5', borderRadius: '8px', padding: '1rem' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#42a5f5' }}>maxWidth: 400px (Generoso)</h4>
+                            <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                                Muchas acciones pueden mostrarse antes de convertirse en menú
+                            </p>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                                <span style={{ fontWeight: 'bold', minWidth: '100px' }}>Resultado:</span>
+                                <ActionsCell
+                                    actions={createManyActions('demo', 'generous')}
+                                    maxWidth={400}
+                                    menuAlign="right"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </ExampleSubsection>
+
+                <CodeSnippet
+                    language="jsx"
+                    code={`// Diferentes configuraciones de maxWidth
+<ActionsCell actions={manyActions} maxWidth={60} />   // Muy restrictivo
+<ActionsCell actions={manyActions} maxWidth={120} />  // Restrictivo
+<ActionsCell actions={manyActions} maxWidth={200} />  // Moderado
+<ActionsCell actions={manyActions} maxWidth={400} />  // Generoso`}
+                />
+            </ExampleSection>
+            {/* Header con ActionsCell */}
+            <ExampleSection title="Header con ActionsCell" id="header-actions">
+                <ExampleSubsection title="Header con Muchas Acciones (Overflow Garantizado)">
+                    <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem', marginBottom: '1rem' }}>
+                        <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                            <strong>maxWidth: 150px</strong> - Las acciones con texto exceden este ancho y se convierten en menú
+                        </p>
+                        <Header
+                            title="Panel de Control"
+                            icon="dashboard"
+                            className="header__actions"
+                        >
+                            <ActionsCell
+                                actions={createManyActions('header', 'dashboard')}
+                                maxWidth={150}
+                                menuAlign="right"
+                            />
+                        </Header>
+                    </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection title="Header con Acciones Medianas (Overflow Probable)">
+                    <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem', marginBottom: '1rem' }}>
+                        <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                            <strong>maxWidth: 120px</strong> - 6 iconos pequeños probablemente excedan este ancho
+                        </p>
+                        <Header
+                            title="Gestión de Archivos"
+                            icon="folder"
+                            className="header__actions"
+                        >
+                            <ActionsCell
+                                actions={createMediumActions('header', 'files')}
+                                maxWidth={120}
+                                menuAlign="right"
+                            />
+                        </Header>
+                    </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection title="Header con Pocas Acciones (Sin Overflow)">
+                    <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem', marginBottom: '1rem' }}>
+                        <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                            <strong>maxWidth: 200px</strong> - Solo 2 acciones caben perfectamente
+                        </p>
+                        <Header
+                            title="Configuración"
+                            icon="settings"
+                            className="header__actions"
+                        >
+                            <ActionsCell
+                                actions={createFewActions('header', 'settings')}
+                                maxWidth={200}
+                                menuAlign="right"
+                            />
+                        </Header>
+                    </div>
+                </ExampleSubsection>
+
+                <CodeSnippet 
+                    language="jsx" 
+                    code={`<Header title="Panel de Control" icon="dashboard">
+    <ActionsCell 
+        actions={
+            <div style={{ display: 'flex', gap: '4px' }}>
+                <Button size="small" variant="outlined" icon="edit" />
+                <Button size="small" variant="outlined" icon="share" />
+                <Button size="small" variant="outlined" icon="delete" />
+            </div>
+        }
+        maxWidth={200}
+        menuAlign="right"
+    />
+</Header>`} 
+                />
+            </ExampleSection>
+
+            {/* List con ActionsCell */}
+            <ExampleSection title="List con ActionsCell" id="list-actions">
+                <ExampleSubsection title="Lista con Acciones Variables">
+                    <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
+                        <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                            Las acciones se muestran siempre visibles (sin hover) cuando usan ActionsCell
+                        </p>
+                        <List
+                            items={[
+                                {
+                                    id: 'item1',
+                                    line1: 'Documento con Muchas Opciones',
+                                    line2: 'Última modificación: hace 2 horas',
+                                    icon: 'description',
+                                    actions: (
+                                        <ActionsCell
+                                            actions={createManyActions('documento', 'item1')}
+                                            maxWidth={100} // Muy restrictivo para forzar menú
+                                            menuAlign="right"
+                                            className="list__item-actions list__item-actions--visible"
+                                        />
+                                    )
+                                },
+                                {
+                                    id: 'item2',
+                                    line1: 'Imagen con Acciones Medianas',
+                                    line2: 'Subida ayer',
+                                    icon: 'image',
+                                    actions: (
+                                        <ActionsCell
+                                            actions={createMediumActions('imagen', 'item2')}
+                                            maxWidth={140}
+                                            menuAlign="right"
+                                            className="list__item-actions list__item-actions--visible"
+                                        />
+                                    )
+                                },
+                                {
+                                    id: 'item3',
+                                    line1: 'Video con Pocas Acciones',
+                                    line2: 'Duración: 15 minutos',
+                                    icon: 'play_circle',
+                                    actions: (
+                                        <ActionsCell
+                                            actions={createFewActions('video', 'item3')}
+                                            maxWidth={200} // Suficiente espacio
+                                            menuAlign="right"
+                                            className="list__item-actions list__item-actions--visible"
+                                        />
+                                    )
+                                }
+                            ]}
+                            onSelect={setSelectedItem}
+                            selected={selectedItem}
+                        />
+                    </div>
+                </ExampleSubsection>
+
+                <CodeSnippet 
+                    language="jsx" 
+                    code={`<List
+    items={[
+        {
+            id: 'item1',
+            line1: 'Documento Importante',
+            line2: 'Última modificación: hace 2 horas',
+            icon: 'description',
+            actions: (
+                <ActionsCell 
+                    actions={multipleActions}
+                    maxWidth={150}
+                    menuAlign="right"
+                />
+            )
+        }
+    ]}
+/>`} 
+                />
+            </ExampleSection>
+
+            {/* Accordion con ActionsCell */}
+            <ExampleSection title="Accordion con ActionsCell" id="accordion-actions">
+                <ExampleSubsection title="Accordion con Toolbar Inteligente">
+                    <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
+                        <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#666' }}>
+                            Los toolbars se adaptan automáticamente al espacio disponible
+                        </p>
+                        <Accordion
+                            sections={[
+                                {
+                                    id: 'section1',
+                                    title: 'Configuración con Muchas Opciones',
+                                    subtitle: 'Panel completo de administración',
+                                    icon: 'settings',
+                                    toolbar: (
+                                        <ActionsCell
+                                            actions={createManyActions('configuración', 'section1')}
+                                            maxWidth={120} // Restrictivo para forzar menú
+                                            menuAlign="right"
+                                            className="accordion__actions toolbar--with-actions"
+                                        />
+                                    ),
+                                    children: (
+                                        <div style={{ padding: '1rem' }}>
+                                            <p>Contenido de configuración general con muchas opciones disponibles...</p>
+                                        </div>
+                                    )
+                                },
+                                {
+                                    id: 'section2',
+                                    title: 'Gestión de Usuarios',
+                                    subtitle: 'Administración básica de usuarios',
+                                    icon: 'people',
+                                    toolbar: (
+                                        <ActionsCell
+                                            actions={createMediumActions('usuarios', 'section2')}
+                                            maxWidth={160}
+                                            menuAlign="right"
+                                            className="accordion__actions toolbar--with-actions"
+                                        />
+                                    ),
+                                    children: (
+                                        <div style={{ padding: '1rem' }}>
+                                            <p>Contenido de gestión de usuarios con opciones moderadas...</p>
+                                        </div>
+                                    )
+                                },
+                                {
+                                    id: 'section3',
+                                    title: 'Configuración Simple',
+                                    subtitle: 'Opciones básicas',
+                                    icon: 'tune',
+                                    toolbar: (
+                                        <ActionsCell
+                                            actions={createFewActions('simple', 'section3')}
+                                            maxWidth={200} // Suficiente espacio
+                                            menuAlign="right"
+                                            className="accordion__actions toolbar--with-actions"
+                                        />
+                                    ),
+                                    children: (
+                                        <div style={{ padding: '1rem' }}>
+                                            <p>Configuración simple con pocas opciones...</p>
+                                        </div>
+                                    )
+                                }
+                            ]}
+                        />
+                    </div>
+                </ExampleSubsection>
+
+                <CodeSnippet 
+                    language="jsx" 
+                    code={`<Accordion
+    sections={[
+        {
+            title: 'Configuración General',
+            icon: 'settings',
+            toolbar: (
+                <ActionsCell 
+                    actions={toolbarActions}
+                    maxWidth={180}
+                    menuAlign="right"
+                />
+            ),
+            children: <div>Contenido...</div>
+        }
+    ]}
+/>`} 
+                />
+            </ExampleSection>
+
+            {/* Alineación automática del menú */}
+            <ExampleSection title="Alineación Automática del Menú" id="menu-alignment">
+                <ExampleSubsection title="Detección Automática de Posición">
+                    <div style={{
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr 1fr',
+                        gap: '1rem',
+                        padding: '2rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        minHeight: '200px'
+                    }}>
+                        {/* Izquierda - menú se abre hacia la derecha */}
+                        <div style={{
+                            display: 'flex',
+                            justifyContent: 'flex-start',
+                            alignItems: 'flex-start',
+                            flexDirection: 'column',
+                            gap: '0.5rem'
+                        }}>
+                            <span style={{ fontSize: '0.875rem', fontWeight: 'bold' }}>Izquierda</span>
+                            <span style={{ fontSize: '0.75rem', color: '#666' }}>Menú se abre hacia la derecha</span>
+                            <ActionsCell
+                                actions={createManyActions('izquierda', 'test')}
+                                maxWidth={100}
+                                menuAlign="auto"
+                            />
+                        </div>
+
+                        {/* Centro - menú se centra */}
+                        <div style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'flex-start',
+                            flexDirection: 'column',
+                            gap: '0.5rem'
+                        }}>
+                            <span style={{ fontSize: '0.875rem', fontWeight: 'bold' }}>Centro</span>
+                            <span style={{ fontSize: '0.75rem', color: '#666' }}>Menú se centra</span>
+                            <ActionsCell
+                                actions={createManyActions('centro', 'test')}
+                                maxWidth={100}
+                                menuAlign="center"
+                            />
+                        </div>
+
+                        {/* Derecha - menú se abre hacia la izquierda */}
+                        <div style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-start',
+                            flexDirection: 'column',
+                            gap: '0.5rem'
+                        }}>
+                            <span style={{ fontSize: '0.875rem', fontWeight: 'bold' }}>Derecha</span>
+                            <span style={{ fontSize: '0.75rem', color: '#666' }}>Menú se abre hacia la izquierda</span>
+                            <ActionsCell
+                                actions={createManyActions('derecha', 'test')}
+                                maxWidth={100}
+                                menuAlign="auto"
+                            />
+                        </div>
+                    </div>
+
+                    <p style={{ marginTop: '1rem', fontSize: '0.875rem', color: '#666' }}>
+                        <strong>menuAlign="auto"</strong> detecta automáticamente la mejor posición según el espacio disponible.
+                        Los menús cerca del borde derecho se abren hacia la izquierda para evitar que se corten.
+                    </p>
+                </ExampleSubsection>
+
+                <CodeSnippet
+                    language="jsx"
+                    code={`// Alineación manual del menú
+<ActionsCell
+    actions={manyActions}
+    maxWidth={150}
+    menuAlign="right"  // Por defecto hacia la derecha
+/>
+
+// Opciones de alineación
+<ActionsCell menuAlign="left" />   // Menú hacia la izquierda
+<ActionsCell menuAlign="right" />  // Menú hacia la derecha (por defecto)
+<ActionsCell menuAlign="center" /> // Menú centrado`}
+                />
+            </ExampleSection>
+        </ExampleLayout>
+    )
+}
+
+export default ActionsCellExamples