ywana-core8 0.1.83 → 0.1.85

package/doc/src/examples/input.example.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Input } from 'ywana-core8/html';
+
+const InputExamples = () => {
+  const [values, setValues] = useState({
+    basic: '',
+    email: '',
+    password: '',
+    search: ''
+  });
+
+  const handleChange = (name, value) => {
+    setValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <div className="examples-grid">
+      <div className="example-section">
+        <h3>Tipos Básicos</h3>
+        <div className="example-column">
+          <Input
+            label="Texto básico"
+            placeholder="Ingresa tu nombre"
+            value={values.basic}
+            onChange={(value) => handleChange('basic', value)}
+          />
+          <Input
+            type="email"
+            label="Email"
+            placeholder="tu@email.com"
+            value={values.email}
+            onChange={(value) => handleChange('email', value)}
+          />
+          <Input
+            type="password"
+            label="Contraseña"
+            placeholder="••••••••"
+            value={values.password}
+            onChange={(value) => handleChange('password', value)}
+          />
+        </div>
+      </div>
+
+      <div className="example-section">
+        <h3>Con Iconos</h3>
+        <div className="example-column">
+          <Input
+            label="Búsqueda"
+            placeholder="Buscar..."
+            icon="search"
+            value={values.search}
+            onChange={(value) => handleChange('search', value)}
+          />
+          <Input
+            label="Usuario"
+            placeholder="Nombre de usuario"
+            icon="person"
+            iconPosition="left"
+          />
+        </div>
+      </div>
+
+      <div className="example-section">
+        <h3>Estados</h3>
+        <div className="example-column">
+          <Input
+            label="Campo normal"
+            placeholder="Estado normal"
+          />
+          <Input
+            label="Campo deshabilitado"
+            placeholder="No editable"
+            disabled
+          />
+          <Input
+            label="Campo con error"
+            placeholder="Valor inválido"
+            error="Este campo es requerido"
+          />
+          <Input
+            label="Campo exitoso"
+            placeholder="Valor válido"
+            success="¡Perfecto!"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputExamples;

package/doc/src/index.css

@@ -0,0 +1,237 @@
+/* Reset y estilos base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f8fafc;
+  color: #1e293b;
+  line-height: 1.6;
+}
+
+code {
+  font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+}
+
+/* Variables CSS para el tema */
+:root {
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --secondary-color: #64748b;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --background-color: #f8fafc;
+  --surface-color: #ffffff;
+  --border-color: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+}
+
+/* Utilidades globales */
+.loading-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--border-color);
+  border-top: 2px solid var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Estilos para componentes de ejemplo */
+.example-container {
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  margin: 1rem 0;
+  box-shadow: var(--shadow-sm);
+}
+
+.example-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  gap: 1rem;
+  color: var(--text-secondary);
+}
+
+.example-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  gap: 1rem;
+  color: var(--error-color);
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-lg);
+}
+
+.content-header {
+  margin-bottom: 2rem;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+.breadcrumb .material-icons {
+  font-size: 1rem;
+}
+
+/* Estilos para placeholder de ejemplos */
+.example-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-lg);
+  color: var(--text-secondary);
+}
+
+.placeholder-icon {
+  width: 4rem;
+  height: 4rem;
+  background: var(--primary-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  color: white;
+}
+
+.placeholder-icon .material-icons {
+  font-size: 2rem;
+}
+
+.example-placeholder h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.example-placeholder p {
+  font-size: 1rem;
+  margin-bottom: 2rem;
+  max-width: 400px;
+}
+
+.placeholder-note {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.placeholder-note .material-icons {
+  font-size: 1rem;
+}
+
+/* Estilos para grids de ejemplos */
+.examples-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.example-section {
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.example-section h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.example-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+.example-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Responsive para ejemplos */
+@media (max-width: 768px) {
+  .example-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .examples-grid {
+    gap: 2rem;
+  }
+
+  .example-section {
+    padding: 1.5rem;
+  }
+}

package/doc/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -9,10 +9,17 @@
   "source": "src/index.js",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
+  "previewjs": {
+    "framework": "react",
+    "react": {
+      "version": 17
+    }
+  },
   "scripts": {
     "build": "microbundle --no-compress --jsx React.createElement",
     "dev": "microbundle watch --no-compress --jsx React.createElement",
-    "test": "jest"
+    "test": "jest",
+    "deploy-docs": "gh-pages -d doc"
   },
   "bugs": {
     "url": "https://github.com/ywana/ywana-core8/issues"

package/preview.config.js

@@ -0,0 +1,38 @@
+/** @type {import("@previewjs/config").PreviewConfig} */
+export default {
+  /**
+   * Configure custom aliases (auto-detected if you use TypeScript).
+   */
+  alias: {
+    // Add any path aliases your project uses
+  },
+
+  /**
+   * Configure a public assets directory.
+   */
+  publicDir: "public",
+
+  /**
+   * Set up a custom component to wrap around previewed components.
+   *
+   * Useful to set up context providers and global CSS.
+   */
+  wrapper: {
+    path: "__previewjs__/Wrapper.tsx",
+    componentName: "Wrapper"
+  },
+
+  /**
+   * Specify a custom Vite configuration.
+   *
+   * See https://vitejs.dev/config.
+   */
+  vite: {
+    // Add any custom Vite configuration here
+    resolve: {
+      alias: {
+        // Add path aliases if needed
+      }
+    }
+  }
+};

package/src/html/accordion.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Accordion } from './accordion'
 import { Icon } from './icon'
-import { Button } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./button'
+import { Button } from './button'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso del componente Accordion mejorado

package/src/html/actions-cell.css

@@ -0,0 +1,108 @@
+/* ActionsCell Component Styles */
+
+.actions-cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+}
+
+/* Modo directo - acciones visibles */
+.actions-cell--direct {
+    overflow: hidden;
+}
+
+.actions-cell__content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* Modo menú - icono de menú */
+.actions-cell--menu {
+    /* Los estilos del menú se heredan de menu.css */
+}
+
+/* Integración con List */
+.list__item-actions .actions-cell {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.list__item:hover .list__item-actions .actions-cell,
+.list__item-actions--visible .actions-cell {
+    opacity: 1;
+}
+
+/* Integración con Accordion */
+.accordion__actions .actions-cell {
+    /* Siempre visible en accordions */
+    opacity: 1;
+}
+
+/* Integración con Header */
+.header .actions-cell {
+    /* Siempre visible en headers */
+    opacity: 1;
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+    .actions-cell--direct {
+        /* En móviles, forzar modo menú más agresivamente */
+        max-width: 100px;
+    }
+    
+    .actions-cell__content {
+        gap: 2px;
+    }
+}
+
+/* Estados de botones dentro de ActionsCell */
+.actions-cell .button {
+    flex-shrink: 0;
+}
+
+.actions-cell .button--small {
+    min-width: auto;
+    padding: 4px 8px;
+}
+
+.actions-cell .button--icon-only {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+}
+
+/* Animaciones suaves */
+.actions-cell {
+    transition: all 0.2s ease;
+}
+
+.actions-cell__content {
+    transition: transform 0.2s ease;
+}
+
+/* Estados de hover para mejor UX */
+.actions-cell:hover .actions-cell__content {
+    transform: translateX(-2px);
+}
+
+/* Alineación del menú */
+.actions-cell--menu .menu-icon menu.left {
+    right: auto;
+    left: 0;
+}
+
+.actions-cell--menu .menu-icon menu.right {
+    left: auto;
+    right: 0;
+}
+
+.actions-cell--menu .menu-icon menu.center {
+    left: 50%;
+    transform: translateX(-50%);
+}