@jjlmoya/utils-developer 1.2.0

package/src/tool/conversorExcelCsvHtml/component.astro

@@ -0,0 +1,595 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { ConversorExcelCsvHtmlUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const content = (ui ?? {}) as ConversorExcelCsvHtmlUI;
+---
+
+<div class="cec-container">
+  <div class="cec-converter-card">
+    <div class="cec-input-grid">
+      <div class="cec-input-group">
+        <label class="cec-input-label" for="csvInput">{content.csvInputLabel}</label>
+        <textarea
+          id="csvInput"
+          class="cec-csv-textarea"
+          placeholder={content.csvInputPlaceholder}
+        ></textarea>
+      </div>
+      <div class="cec-input-group">
+        <label class="cec-input-label">{content.uploadLabel}</label>
+        <div class="cec-drop-zone" id="dropZone">
+          <Icon name="mdi:cloud-upload-outline" size={48} />
+          <span>{content.dragDropLabel}</span>
+          <input type="file" id="fileInput" accept=".csv" style="display: none" />
+        </div>
+      </div>
+    </div>
+
+    <div class="cec-options-row">
+      <label class="cec-option-item">
+        <input type="checkbox" id="hasHeader" checked />
+        <span>{content.headerCheckboxLabel}</span>
+      </label>
+      <label class="cec-option-item">
+        <input type="checkbox" id="addBorders" />
+        <span>{content.bordersCheckboxLabel}</span>
+      </label>
+      <label class="cec-option-item">
+        <input type="checkbox" id="zebraStripes" checked />
+        <span>{content.stripeCheckboxLabel}</span>
+      </label>
+    </div>
+  </div>
+
+  <div class="cec-results-section">
+    <div class="cec-result-tabs">
+      <button class="cec-tab-btn cec-tab-active" data-tab="preview">{content.previewTabLabel}</button>
+      <button class="cec-tab-btn" data-tab="code">{content.codeTabLabel}</button>
+    </div>
+
+    <div id="previewTab" class="cec-tab-content">
+      <div class="cec-preview-container" id="previewOutput">
+        <div class="cec-empty-state">
+          <Icon name="mdi:table-off" size={48} />
+          <p>{content.emptyStateLabel}</p>
+        </div>
+      </div>
+    </div>
+
+    <div id="codeTab" class="cec-tab-content" style="display: none;">
+      <div class="cec-code-container">
+        <textarea id="htmlOutput" class="cec-code-textarea" readonly></textarea>
+        <button id="copyBtn" class="cec-copy-btn">
+          <Icon name="mdi:content-copy" />
+          {content.copyButtonLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const csvInput = document.getElementById('csvInput') as HTMLTextAreaElement;
+  const dropZone = document.getElementById('dropZone');
+  const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+  const hasHeader = document.getElementById('hasHeader') as HTMLInputElement;
+  const addBorders = document.getElementById('addBorders') as HTMLInputElement;
+  const zebraStripes = document.getElementById('zebraStripes') as HTMLInputElement;
+  const previewOutput = document.getElementById('previewOutput');
+  const htmlOutput = document.getElementById('htmlOutput') as HTMLTextAreaElement;
+  const copyBtn = document.getElementById('copyBtn');
+  const tabs = document.querySelectorAll('.cec-tab-btn');
+  const tabContents = document.querySelectorAll('.cec-tab-content');
+
+  function parseCSV(text: string) {
+    if (!text.trim()) return [];
+
+    const lines = text.trim().split(/\r\n|\n/);
+    return lines.map(line => {
+      const values: string[] = [];
+      let current = '';
+      let inQuotes = false;
+
+      for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        if (char === '"') {
+          inQuotes = !inQuotes;
+        } else if (char === ',' && !inQuotes) {
+          values.push(current.trim());
+          current = '';
+        } else {
+          current += char;
+        }
+      }
+      values.push(current.trim());
+      return values.map(v => v.replace(/^"|"$/g, '').replace(/""/g, '"'));
+    });
+  }
+
+  function generateHTML(data: string[][]) {
+    if (data.length === 0) return '';
+
+    let html = '<table';
+    const classes = [];
+    if (addBorders.checked) classes.push('bordered');
+    if (zebraStripes.checked) classes.push('zebra');
+
+    if (classes.length > 0) {
+      html += ` class="${classes.join(' ')}"`;
+    }
+    html += '>\n';
+
+    let startIndex = 0;
+    if (hasHeader.checked && data.length > 0) {
+      html += '  <thead>\n    <tr>\n';
+      data[0].forEach(cell => {
+        html += `      <th>${cell}</th>\n`;
+      });
+      html += '    </tr>\n  </thead>\n';
+      startIndex = 1;
+    }
+
+    html += '  <tbody>\n';
+    for (let i = startIndex; i < data.length; i++) {
+      html += '    <tr>\n';
+      data[i].forEach(cell => {
+        html += `      <td>${cell}</td>\n`;
+      });
+      html += '    </tr>\n';
+    }
+    html += '  </tbody>\n</table>';
+
+    return html;
+  }
+
+  function update() {
+    const text = csvInput.value;
+    const data = parseCSV(text);
+    const html = generateHTML(data);
+
+    if (html) {
+      if (previewOutput) previewOutput.innerHTML = html;
+      htmlOutput.value = html;
+    } else {
+      if (previewOutput) {
+        previewOutput.innerHTML = `
+          <div class="cec-empty-state">
+            <Icon name="mdi:table-off" size={48} />
+            <p>Introduce datos para ver la tabla</p>
+          </div>
+        `;
+      }
+      htmlOutput.value = '';
+    }
+  }
+
+  csvInput.addEventListener('input', update);
+  [hasHeader, addBorders, zebraStripes].forEach(el => el.addEventListener('change', update));
+
+  dropZone?.addEventListener('click', () => fileInput.click());
+
+  dropZone?.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('cec-dragover');
+  });
+
+  dropZone?.addEventListener('dragleave', () => {
+    dropZone.classList.remove('cec-dragover');
+  });
+
+  dropZone?.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('cec-dragover');
+    const file = e.dataTransfer?.files[0];
+    if (file) handleFile(file);
+  });
+
+  fileInput.addEventListener('change', (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) handleFile(file);
+  });
+
+  function handleFile(file: File) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      csvInput.value = text;
+      update();
+    };
+    reader.readAsText(file);
+  }
+
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      tabs.forEach(t => t.classList.remove('cec-tab-active'));
+      tab.classList.add('cec-tab-active');
+
+      const target = (tab as HTMLElement).dataset.tab;
+      tabContents.forEach(content => {
+        if (content.id === `${target}Tab`) {
+          (content as HTMLElement).style.display = 'block';
+        } else {
+          (content as HTMLElement).style.display = 'none';
+        }
+      });
+    });
+  });
+
+  copyBtn?.addEventListener('click', () => {
+    navigator.clipboard.writeText(htmlOutput.value);
+    const originalText = copyBtn.innerHTML;
+    copyBtn.innerHTML = '<Icon name="mdi:check" /> ¡Copiado!';
+    setTimeout(() => {
+      copyBtn.innerHTML = originalText;
+    }, 2000);
+  });
+</script>
+
+<style scoped>
+  :root {
+    --cec-primary: rgb(139, 92, 246);
+    --cec-primary-hover: rgb(124, 58, 202);
+    --cec-border: rgb(226, 232, 240);
+    --cec-border-dark: rgb(51, 65, 85);
+    --cec-bg-light: rgb(248, 250, 252);
+    --cec-bg-dark: rgb(15, 23, 42);
+    --cec-text-primary: rgb(30, 41, 59);
+    --cec-text-secondary: rgb(71, 85, 105);
+    --cec-text-light: rgb(241, 245, 249);
+  }
+
+  .cec-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .cec-converter-card {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 24px;
+    padding: 2rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .cec-converter-card {
+    background: rgba(15, 23, 42, 0.6);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .cec-input-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 768px) {
+    .cec-input-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .cec-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .cec-input-label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--cec-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.theme-dark) .cec-input-label {
+    color: rgb(148, 163, 184);
+  }
+
+  .cec-csv-textarea {
+    width: 100%;
+    height: 200px;
+    background: white;
+    border: 1px solid var(--cec-border);
+    border-radius: 12px;
+    padding: 1rem;
+    font-size: 0.875rem;
+    color: var(--cec-text-primary);
+    resize: vertical;
+    transition: all 0.2s;
+  }
+
+  :global(.theme-dark) .cec-csv-textarea {
+    background: rgb(2, 6, 23);
+    border-color: rgb(30, 41, 59);
+    color: var(--cec-text-light);
+  }
+
+  .cec-csv-textarea:focus {
+    outline: none;
+    border-color: var(--cec-primary);
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
+  }
+
+  .cec-drop-zone {
+    border: 2px dashed var(--cec-border);
+    border-radius: 12px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: rgba(248, 250, 252, 0.5);
+  }
+
+  :global(.theme-dark) .cec-drop-zone {
+    border-color: var(--cec-border-dark);
+    background: rgba(30, 41, 59, 0.2);
+  }
+
+  .cec-drop-zone:hover,
+  .cec-dragover {
+    border-color: var(--cec-primary);
+    background: rgba(139, 92, 246, 0.05);
+  }
+
+  .cec-drop-zone :global(svg) {
+    color: var(--cec-primary);
+  }
+
+  .cec-drop-zone span {
+    font-size: 0.875rem;
+    color: rgb(100, 116, 139);
+    font-weight: 500;
+  }
+
+  .cec-options-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    margin-top: 1rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .cec-options-row {
+    border-top-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .cec-option-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    padding: 0.5rem 0.75rem;
+    border-radius: 12px;
+    transition: background-color 0.2s;
+  }
+
+  .cec-option-item:hover {
+    background: rgba(139, 92, 246, 0.05);
+  }
+
+  .cec-option-item input[type="checkbox"] {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--cec-border);
+    border-radius: 6px;
+    background: white;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :global(.theme-dark) .cec-option-item input[type="checkbox"] {
+    background: rgb(15, 23, 42);
+    border-color: var(--cec-border-dark);
+  }
+
+  .cec-option-item input[type="checkbox"]:checked {
+    background: var(--cec-primary);
+    border-color: var(--cec-primary);
+    box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.2);
+  }
+
+  .cec-option-item input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 2px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  .cec-option-item span {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--cec-text-secondary);
+  }
+
+  :global(.theme-dark) .cec-option-item span {
+    color: rgb(148, 163, 184);
+  }
+
+  .cec-option-item input[type="checkbox"]:checked + span {
+    color: rgb(88, 28, 135);
+  }
+
+  :global(.theme-dark) .cec-option-item input[type="checkbox"]:checked + span {
+    color: rgb(196, 181, 253);
+  }
+
+  .cec-results-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .cec-result-tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 2px solid var(--cec-border);
+  }
+
+  :global(.theme-dark) .cec-result-tabs {
+    border-bottom-color: rgb(30, 41, 59);
+  }
+
+  .cec-tab-btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: rgb(100, 116, 139);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: all 0.2s;
+  }
+
+  .cec-tab-active {
+    color: var(--cec-primary);
+    border-bottom-color: var(--cec-primary);
+  }
+
+  .cec-preview-container {
+    background: white;
+    border: 1px solid var(--cec-border);
+    border-radius: 12px;
+    overflow-x: auto;
+    max-height: 400px;
+    padding: 1rem;
+  }
+
+  :global(.theme-dark) .cec-preview-container {
+    background: rgb(15, 23, 42);
+    border-color: rgb(30, 41, 59);
+  }
+
+  .cec-code-container {
+    position: relative;
+  }
+
+  .cec-code-textarea {
+    width: 100%;
+    height: 300px;
+    background: rgb(30, 41, 59);
+    color: rgb(226, 232, 240);
+    border-radius: 12px;
+    padding: 1.5rem;
+    font-size: 0.875rem;
+    resize: vertical;
+    border: none;
+  }
+
+  .cec-copy-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: var(--cec-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s;
+  }
+
+  .cec-copy-btn:hover {
+    background: var(--cec-primary-hover);
+  }
+
+  .cec-preview-container :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  .cec-preview-container :global(th) {
+    background: var(--cec-bg-light);
+    border-bottom: 2px solid var(--cec-border);
+    padding: 0.75rem;
+    text-align: left;
+    font-weight: 700;
+    color: var(--cec-text-primary);
+  }
+
+  :global(.theme-dark) .cec-preview-container :global(th) {
+    background: rgb(30, 41, 59);
+    border-bottom-color: var(--cec-border-dark);
+    color: var(--cec-text-light);
+  }
+
+  .cec-preview-container :global(td) {
+    padding: 0.75rem;
+    border-bottom: 1px solid rgb(241, 245, 249);
+    color: var(--cec-text-secondary);
+  }
+
+  :global(.theme-dark) .cec-preview-container :global(td) {
+    border-bottom-color: rgb(30, 41, 59);
+    color: rgb(148, 163, 184);
+  }
+
+  .cec-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: rgb(148, 163, 184);
+    text-align: center;
+    gap: 1rem;
+  }
+
+  .cec-preview-container :global(table.bordered) {
+    border: 1px solid var(--cec-border);
+  }
+
+  .cec-preview-container :global(table.bordered th),
+  .cec-preview-container :global(table.bordered td) {
+    border: 1px solid var(--cec-border);
+  }
+
+  :global(.theme-dark) .cec-preview-container :global(table.bordered),
+  :global(.theme-dark) .cec-preview-container :global(table.bordered th),
+  :global(.theme-dark) .cec-preview-container :global(table.bordered td) {
+    border-color: var(--cec-border-dark);
+  }
+
+  .cec-preview-container :global(table.zebra tbody tr:nth-child(even)) {
+    background: var(--cec-bg-light);
+  }
+
+  :global(.theme-dark) .cec-preview-container :global(table.zebra tbody tr:nth-child(even)) {
+    background: rgba(30, 41, 59, 0.5);
+  }
+</style>