ywana-core8 0.1.103 → 0.2.1

package/src/html/Tab.stories.jsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react'
+import { Tabs, Tab } from './tab.js'
+
+/**
+ * Tabs básicos
+ */
+export const BasicTabs = () => {
+  const [selectedTab, setSelectedTab] = useState(0)
+
+  const handleTabChange = (index) => {
+    setSelectedTab(index)
+    console.log('Tab seleccionado:', index)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Tabs Básicos</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Tabs selected={selectedTab} onChange={handleTabChange}>
+          <Tab label="Home" icon="home" />
+          <Tab label="Profile" icon="person" />
+          <Tab label="Settings" icon="settings" />
+          <Tab label="Help" icon="help" />
+        </Tabs>
+        
+        <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+          <strong>Contenido del Tab {selectedTab + 1}</strong>
+          <p>Este es el contenido para el tab seleccionado..</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tabs con badges
+ */
+export const TabsWithBadges = () => {
+  const [selectedTab, setSelectedTab] = useState(0)
+
+  const handleTabChange = (index) => {
+    setSelectedTab(index)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Tabs con Badges</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Tabs selected={selectedTab} onChange={handleTabChange}>
+          <Tab 
+            label="Messages" 
+            icon="mail" 
+            badge={5}
+            badgeColor="#dc3545"
+          />
+          <Tab 
+            label="Notifications" 
+            icon="notifications" 
+            badge={12}
+            badgeColor="#28a745"
+          />
+          <Tab 
+            label="Tasks" 
+            icon="assignment" 
+            badge={3}
+            badgeColor="#ffc107"
+          />
+          <Tab 
+            label="Archive" 
+            icon="archive" 
+            badge={0}
+          />
+        </Tabs>
+        
+        <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+          {selectedTab === 0 && <p>📧 Tienes 5 mensajes nuevos</p>}
+          {selectedTab === 1 && <p>🔔 Tienes 12 notificaciones pendientes</p>}
+          {selectedTab === 2 && <p>📋 Tienes 3 tareas asignadas</p>}
+          {selectedTab === 3 && <p>📦 Archivo vacío</p>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tabs verticales
+ */
+export const VerticalTabs = () => {
+  const [selectedVerticalTab, setSelectedVerticalTab] = useState(0)
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Tabs Verticales</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Tabs 
+          selected={selectedVerticalTab} 
+          onChange={setSelectedVerticalTab}
+          orientation="vertical"
+          style={{ minHeight: '200px' }}
+        >
+          <Tab label="Dashboard" icon="dashboard" />
+          <Tab label="Analytics" icon="analytics" />
+          <Tab label="Reports" icon="assessment" />
+          <Tab label="Users" icon="people" />
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tabs con cierre
+ */
+export const ClosableTabs = () => {
+  const [closableTabs, setClosableTabs] = useState([
+    { id: 1, label: 'Document 1', icon: 'description' },
+    { id: 2, label: 'Document 2', icon: 'description' },
+    { id: 3, label: 'Document 3', icon: 'description' }
+  ])
+  const [selectedTab, setSelectedTab] = useState(0)
+
+  const handleTabClose = (index) => {
+    const newTabs = closableTabs.filter((_, i) => i !== index)
+    setClosableTabs(newTabs)
+    if (selectedTab >= newTabs.length) {
+      setSelectedTab(Math.max(0, newTabs.length - 1))
+    }
+  }
+
+  const addNewTab = () => {
+    const newId = Math.max(...closableTabs.map(t => t.id), 0) + 1
+    setClosableTabs([...closableTabs, {
+      id: newId,
+      label: `Document ${newId}`,
+      icon: 'description'
+    }])
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Tabs con Cierre</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Tabs selected={selectedTab} onChange={setSelectedTab}>
+          {closableTabs.map((tab, index) => (
+            <Tab 
+              key={tab.id}
+              label={tab.label}
+              icon={tab.icon}
+              closable={true}
+              onClose={() => handleTabClose(index)}
+            />
+          ))}
+          <Tab 
+            label="Add New" 
+            icon="add"
+            onClick={addNewTab}
+          />
+        </Tabs>
+        
+        <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+          {closableTabs.length > 0 ? (
+            <p>Contenido de: <strong>{closableTabs[selectedTab]?.label}</strong></p>
+          ) : (
+            <p>No hay tabs abiertos. Haz clic en "Add New" para crear uno.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tabs con estados especiales
+ */
+export const SpecialStateTabs = () => {
+  const [selectedTab, setSelectedTab] = useState(0)
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados Especiales</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Tabs 
+          selected={selectedTab} 
+          onChange={setSelectedTab}
+          disabled={false}
+        >
+          <Tab label="Tab 1" icon="looks_one" />
+          <Tab label="Tab 2" icon="looks_two" />
+          <Tab label="Tab 3 (Protected)" icon="looks_3" disabled={true} />
+          <Tab label="Tab 4" icon="looks_4" />
+        </Tabs>
+        
+        <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+          <p>Tab seleccionado: <strong>{selectedTab + 1}</strong></p>
+          <p><em>El Tab 3 está deshabilitado</em></p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicTabs />
+    <TabsWithBadges />
+    <VerticalTabs />
+    <ClosableTabs />
+    <SpecialStateTabs />
+  </div>
+)

package/src/html/Table.stories.jsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react'
+import { DataTable } from './table.js'
+import { DataTable2 } from './table2.js'
+
+export default {
+  title: 'HTML/Table',
+  component: DataTable,
+  parameters: {
+    docs: {
+      description: {
+        component: 'DataTable components for displaying tabular data with sorting, filtering, and selection capabilities.'
+      }
+    }
+  }
+}
+
+/**
+ * DataTable básico
+ */
+export const BasicDataTable = () => {
+  const columns = [
+    { id: 'name', label: 'Nombre', sortable: true },
+    { id: 'email', label: 'Email', sortable: true },
+    { id: 'role', label: 'Rol', sortable: false },
+    { id: 'status', label: 'Estado', sortable: true }
+  ]
+
+  const rows = [
+    { id: 1, name: 'Juan Pérez', email: 'juan@example.com', role: 'Admin', status: 'Activo' },
+    { id: 2, name: 'María García', email: 'maria@example.com', role: 'Usuario', status: 'Activo' },
+    { id: 3, name: 'Carlos López', email: 'carlos@example.com', role: 'Editor', status: 'Inactivo' },
+    { id: 4, name: 'Ana Martín', email: 'ana@example.com', role: 'Usuario', status: 'Activo' }
+  ]
+
+  const handleRowSelection = (selectedRows) => {
+    console.log('Filas seleccionadas:', selectedRows)
+  }
+
+  const handleSort = (sortConfig) => {
+    console.log('Ordenar por:', sortConfig)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>DataTable Básico</h3>
+      <DataTable
+        columns={columns}
+        rows={rows}
+        onRowSelection={handleRowSelection}
+        onSort={handleSort}
+        outlined={true}
+        emptyMessage="No hay datos disponibles"
+        emptyIcon="inbox"
+      />
+    </div>
+  )
+}
+
+/**
+ * DataTable con funciones avanzadas
+ */
+export const AdvancedDataTable = () => {
+  const [selectedRows, setSelectedRows] = useState([])
+
+  const columns = [
+    { id: 'id', label: 'ID', sortable: true, width: '80px' },
+    { id: 'product', label: 'Producto', sortable: true },
+    { id: 'category', label: 'Categoría', sortable: true },
+    { id: 'price', label: 'Precio', sortable: true, align: 'right' },
+    { id: 'stock', label: 'Stock', sortable: true, align: 'center' },
+    { id: 'actions', label: 'Acciones', sortable: false, width: '120px' }
+  ]
+
+  const rows = [
+    { 
+      id: 1, 
+      product: 'Laptop HP', 
+      category: 'Electrónicos', 
+      price: '$899.99', 
+      stock: 15,
+      info: 'Información adicional sobre este producto...',
+      actions: '🔧 ✏️ 🗑️'
+    },
+    { 
+      id: 2, 
+      product: 'Mouse Logitech', 
+      category: 'Accesorios', 
+      price: '$29.99', 
+      stock: 50,
+      actions: '🔧 ✏️ 🗑️'
+    },
+    { 
+      id: 3, 
+      product: 'Teclado Mecánico', 
+      category: 'Accesorios', 
+      price: '$129.99', 
+      stock: 0,
+      info: 'Producto agotado - próxima reposición en 2 semanas',
+      actions: '🔧 ✏️ 🗑️'
+    }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>DataTable Avanzado</h3>
+      <DataTable
+        columns={columns}
+        rows={rows}
+        onRowSelection={setSelectedRows}
+        onSort={(config) => console.log('Sort:', config)}
+        onCheckAll={(checked) => console.log('Check all:', checked)}
+        outlined={true}
+        expanded={true}
+        multisort={true}
+        filterable={true}
+        editable={true}
+        onClearFilters={() => console.log('Limpiar filtros')}
+      />
+      <p>Filas seleccionadas: {selectedRows.length}</p>
+    </div>
+  )
+}
+
+/**
+ * DataTable vacío
+ */
+export const EmptyDataTable = () => {
+  const columns = [
+    { id: 'name', label: 'Nombre', sortable: true },
+    { id: 'email', label: 'Email', sortable: true },
+    { id: 'role', label: 'Rol', sortable: false }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>DataTable Vacío</h3>
+      <DataTable
+        columns={columns}
+        rows={[]}
+        outlined={true}
+        emptyMessage="No se encontraron resultados"
+        emptyIcon="search_off"
+      />
+    </div>
+  )
+}
+
+/**
+ * DataTable2 (versión alternativa)
+ */
+export const DataTable2Example = () => {
+  const columns = [
+    { id: 'task', label: 'Tarea', sortable: true },
+    { id: 'assignee', label: 'Asignado a', sortable: true },
+    { id: 'priority', label: 'Prioridad', sortable: true },
+    { id: 'due', label: 'Vencimiento', sortable: true }
+  ]
+
+  const rows = [
+    { id: 1, task: 'Revisar código', assignee: 'Juan', priority: 'Alta', due: '2024-01-15' },
+    { id: 2, task: 'Actualizar documentación', assignee: 'María', priority: 'Media', due: '2024-01-20' },
+    { id: 3, task: 'Testing de funcionalidades', assignee: 'Carlos', priority: 'Alta', due: '2024-01-18' }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>DataTable2</h3>
+      <DataTable2
+        columns={columns}
+        rows={rows}
+        outlined={true}
+        onRowSelection={(rows) => console.log('DataTable2 selection:', rows)}
+      />
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicDataTable />
+    <AdvancedDataTable />
+    <EmptyDataTable />
+    <DataTable2Example />
+  </div>
+)

package/src/html/Table2.stories.jsx

@@ -0,0 +1,238 @@
+import React, { useState } from 'react'
+import { DataTable2 } from './table2'
+import { Button } from './button'
+import { Icon } from './icon'
+import { ActionsCell } from './actions-cell'
+
+export default {
+  title: 'HTML/Table2',
+  component: DataTable2,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Enhanced DataTable component with advanced features like sorting, filtering, column management, and more.'
+      }
+    }
+  }
+}
+
+// Sample data
+const sampleUsers = [
+  { id: 1, name: 'Ana García', email: 'ana@example.com', role: 'Admin', status: 'Active', lastLogin: '2024-01-15' },
+  { id: 2, name: 'Carlos López', email: 'carlos@example.com', role: 'User', status: 'Active', lastLogin: '2024-01-14' },
+  { id: 3, name: 'María Rodríguez', email: 'maria@example.com', role: 'Editor', status: 'Inactive', lastLogin: '2024-01-10' },
+  { id: 4, name: 'Juan Martínez', email: 'juan@example.com', role: 'User', status: 'Active', lastLogin: '2024-01-16' },
+  { id: 5, name: 'Laura Sánchez', email: 'laura@example.com', role: 'Admin', status: 'Active', lastLogin: '2024-01-15' }
+]
+
+const basicColumns = [
+  { key: 'name', label: 'Nombre', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'role', label: 'Rol', sortable: true },
+  { key: 'status', label: 'Estado', sortable: true },
+  { key: 'lastLogin', label: 'Último acceso', sortable: true }
+]
+
+/**
+ * Basic DataTable2 example
+ */
+export const BasicTable = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>🗂️ DataTable2 Básica</h3>
+    <DataTable2
+      columns={basicColumns}
+      rows={sampleUsers}
+      striped={true}
+      hover={true}
+    />
+  </div>
+)
+
+/**
+ * Table with actions
+ */
+export const TableWithActions = () => {
+  const columnsWithActions = [
+    ...basicColumns,
+    {
+      key: 'actions',
+      label: 'Acciones',
+      render: (row) => (
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <Icon
+            icon="edit"
+            size="small"
+            clickable
+            action={() => alert(`Editar ${row.name}`)}
+            title="Editar"
+          />
+          <Icon
+            icon="delete"
+            size="small"
+            clickable
+            action={() => alert(`Eliminar ${row.name}`)}
+            title="Eliminar"
+          />
+        </div>
+      )
+    }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>⚡ Tabla con Acciones</h3>
+      <DataTable2
+        columns={columnsWithActions}
+        rows={sampleUsers}
+        striped={true}
+        hover={true}
+        density="comfortable"
+      />
+    </div>
+  )
+}
+
+/**
+ * Table with advanced features
+ */
+export const AdvancedTable = () => {
+  const [selectedRows, setSelectedRows] = useState([])
+
+  const advancedColumns = [
+    ...basicColumns,
+    {
+      key: 'actions',
+      label: 'Acciones',
+      render: (row) => (
+        <ActionsCell
+          actions={
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <Icon icon="visibility" size="small" clickable action={() => alert('Ver')} title="Ver" />
+              <Icon icon="edit" size="small" clickable action={() => alert('Editar')} title="Editar" />
+              <Icon icon="share" size="small" clickable action={() => alert('Compartir')} title="Compartir" />
+              <Icon icon="delete" size="small" clickable action={() => alert('Eliminar')} title="Eliminar" />
+            </div>
+          }
+          maxWidth={120}
+          menuAlign="left"
+        />
+      )
+    }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🚀 Tabla Avanzada</h3>
+      <p>Con selección múltiple, filtros y panel lateral</p>
+      
+      <DataTable2
+        columns={advancedColumns}
+        rows={sampleUsers}
+        selectable={true}
+        selectedRows={selectedRows}
+        onSelectionChange={setSelectedRows}
+        searchable={true}
+        filterable={true}
+        exportable={true}
+        showPanel={true}
+        striped={true}
+        hover={true}
+        density="compact"
+      />
+      
+      {selectedRows.length > 0 && (
+        <div style={{ 
+          marginTop: '16px', 
+          padding: '12px', 
+          background: '#e3f2fd', 
+          borderRadius: '4px',
+          border: '1px solid #1976d2'
+        }}>
+          <strong>Filas seleccionadas:</strong> {selectedRows.length}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Different density options
+ */
+export const DensityOptions = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>📏 Opciones de Densidad</h3>
+    
+    <div style={{ marginBottom: '2rem' }}>
+      <h4>Compact</h4>
+      <DataTable2
+        columns={basicColumns.slice(0, 3)}
+        rows={sampleUsers.slice(0, 3)}
+        density="compact"
+        striped={true}
+      />
+    </div>
+    
+    <div style={{ marginBottom: '2rem' }}>
+      <h4>Comfortable (Default)</h4>
+      <DataTable2
+        columns={basicColumns.slice(0, 3)}
+        rows={sampleUsers.slice(0, 3)}
+        density="comfortable"
+        striped={true}
+      />
+    </div>
+    
+    <div>
+      <h4>Spacious</h4>
+      <DataTable2
+        columns={basicColumns.slice(0, 3)}
+        rows={sampleUsers.slice(0, 3)}
+        density="spacious"
+        striped={true}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Empty state
+ */
+export const EmptyTable = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>📭 Estado Vacío</h3>
+    <DataTable2
+      columns={basicColumns}
+      rows={[]}
+      emptyMessage="No hay usuarios para mostrar"
+      emptyIcon="people"
+    />
+  </div>
+)
+
+/**
+ * Loading state
+ */
+export const LoadingTable = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>⏳ Estado de Carga</h3>
+    <DataTable2
+      columns={basicColumns}
+      rows={sampleUsers}
+      loading={true}
+    />
+  </div>
+)
+
+/**
+ * All examples combined
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicTable />
+    <TableWithActions />
+    <AdvancedTable />
+    <DensityOptions />
+    <EmptyTable />
+    <LoadingTable />
+  </div>
+)