cronixui 1.1.2 → 1.1.3

package/packages/python/cronixui/table.py

@@ -1,48 +1,135 @@
-"""CronixUI Table Component"""
+"""CronixUI Table Component.
 
-from typing import List, Optional
-from .core import create_el
+Generates HTML for data tables with optional sorting indication.
+No browser DOM APIs are used - all output is HTML strings or data structures.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Dict, List, Optional
+
+
+@dataclass
+class TableElement:
+    """Represents a rendered table element."""
+
+    tag: str = "div"
+    classes: List[str] = field(default_factory=list)
+    attributes: Dict[str, str] = field(default_factory=dict)
+    inner_html: str = ""
+
+    def render_html(self) -> str:
+        """Render as HTML string.
+
+        Returns:
+            Complete HTML for the table element
+        """
+        class_str = " ".join(self.classes)
+        class_attr = f' class="{class_str}"' if class_str else ""
+        attrs_str = "".join(f' {k}="{v}"' for k, v in self.attributes.items())
+        return f"<{self.tag}{class_attr}{attrs_str}>{self.inner_html}</{self.tag}>"
+
+    def render(self) -> "TableElement":
+        """Return self for API compatibility."""
+        return self
 
 
 class Table:
-    """Table component."""
+    """Table component for displaying tabular data.
+
+    Args:
+        headers: List of column header strings
+        rows: List of rows, where each row is a list of cell strings
+        sortable: Whether to add sortable class to the table (default: False)
+        caption: Optional table caption/summary
+
+    Example:
+        >>> table = Table(
+        ...     headers=["Name", "Email", "Role"],
+        ...     rows=[
+        ...         ["Alice", "alice@example.com", "Admin"],
+        ...         ["Bob", "bob@example.com", "User"],
+        ...     ],
+        ... )
+        >>> print(table.render_html())
+        <div class="cn-table-wrapper">
+            <table class="cn-table">
+                <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead>
+                <tbody>
+                    <tr><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>
+                    <tr><td>Bob</td><td>bob@example.com</td><td>User</td></tr>
+                </tbody>
+            </table>
+        </div>
+    """
 
     def __init__(
         self,
         headers: List[str],
         rows: List[List[str]],
         sortable: bool = False,
+        caption: Optional[str] = None,
     ):
+        if not headers:
+            raise ValueError("headers cannot be empty")
+
         self.headers = headers
         self.rows = rows
         self.sortable = sortable
-        self.element = self._render()
+        self.caption = caption
+
+    def render(self) -> TableElement:
+        """Render the table as a TableElement.
+
+        Returns:
+            TableElement containing the complete table markup
+        """
+        parts = []
+
+        # Optional caption
+        if self.caption:
+            parts.append(f"<caption>{self._esc(self.caption)}</caption>")
+
+        # Header
+        header_cells = "".join(
+            f"<th>{self._esc(h)}</th>" for h in self.headers
+        )
+        parts.append(f"<thead><tr>{header_cells}</tr></thead>")
 
-    def _render(self):
-        wrapper = create_el("div", "cn-table-wrapper")
-        table = create_el("table", "cn-table")
+        # Body
+        body_rows = []
+        for row in self.rows:
+            cells = "".join(f"<td>{self._esc(str(cell))}</td>" for cell in row)
+            body_rows.append(f"<tr>{cells}</tr>")
+        parts.append(f"<tbody>{''.join(body_rows)}</tbody>")
 
+        table_classes = ["cn-table"]
         if self.sortable:
-            table.classList.add("cn-table-sortable")
-
-        thead = create_el("thead")
-        header_row = create_el("tr")
-        for header in self.headers:
-            th = create_el("th")
-            th.textContent = header
-            header_row.appendChild(th)
-        thead.appendChild(header_row)
-        table.appendChild(thead)
-
-        tbody = create_el("tbody")
-        for row_data in self.rows:
-            row = create_el("tr")
-            for cell in row_data:
-                td = create_el("td")
-                td.textContent = cell
-                row.appendChild(td)
-            tbody.appendChild(row)
-        table.appendChild(tbody)
-
-        wrapper.appendChild(table)
-        return wrapper
+            table_classes.append("cn-table-sortable")
+
+        table_html = f'<table class="{" ".join(table_classes)}">{"".join(parts)}</table>'
+
+        return TableElement(
+            classes=["cn-table-wrapper"],
+            inner_html=table_html,
+        )
+
+    def render_html(self) -> str:
+        """Render the table as an HTML string.
+
+        Returns:
+            HTML string representation of the table
+        """
+        return self.render().render_html()
+
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )

package/packages/python/cronixui/tooltip.py

@@ -1,28 +1,130 @@
-"""CronixUI Tooltip Component"""
+"""CronixUI Tooltip Component.
 
-from .core import create_el
+Generates HTML for tooltips that can wrap other elements.
+No browser DOM APIs are used - all output is HTML strings or data structures.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Dict, List, Optional
+
+
+@dataclass
+class TooltipElement:
+    """Represents a rendered tooltip element."""
+
+    tag: str = "div"
+    classes: List[str] = field(default_factory=list)
+    attributes: Dict[str, str] = field(default_factory=dict)
+    inner_html: str = ""
+
+    def render_html(self) -> str:
+        """Render as HTML string.
+
+        Returns:
+            Complete HTML for the tooltip element
+        """
+        class_str = " ".join(self.classes)
+        class_attr = f' class="{class_str}"' if class_str else ""
+        attrs_str = "".join(f' {k}="{v}"' for k, v in self.attributes.items())
+        return f"<{self.tag}{class_attr}{attrs_str}>{self.inner_html}</{self.tag}>"
+
+    def render(self) -> "TooltipElement":
+        """Return self for API compatibility."""
+        return self
 
 
 class Tooltip:
-    """Tooltip component."""
+    """Tooltip component for displaying contextual information on hover.
+
+    The tooltip content is generated as a data attribute and HTML structure
+    that can be styled with CSS to appear on hover.
+
+    Args:
+        content: Tooltip text content
+        position: Tooltip position - top, bottom, left, right (default: top)
+
+    Example:
+        >>> tooltip = Tooltip("Click to edit", position="top")
+        >>> print(tooltip.render_html())
+        <div class="cn-tooltip cn-tooltip-top"><div class="cn-tooltip-content">Click to edit</div></div>
+
+        >>> # Wrap an element with tooltip
+        >>> wrapped = tooltip.wrap_html("<button>Edit</button>")
+        >>> print(wrapped)
+        <span class="cn-tooltip-wrapper" data-tooltip="Click to edit" data-position="top"><button>Edit</button></span>
+    """
 
     POSITIONS = ("top", "bottom", "left", "right")
 
     def __init__(self, content: str, position: str = "top"):
+        if not content:
+            raise ValueError("content cannot be empty")
+        if position not in self.POSITIONS:
+            raise ValueError(
+                f"Invalid position '{position}'. Must be one of {self.POSITIONS}"
+            )
+
         self.content = content
-        self.position = position if position in self.POSITIONS else "top"
-        self.element = self._render()
+        self.position = position
+
+    def render(self) -> TooltipElement:
+        """Render the tooltip as a TooltipElement.
+
+        Returns:
+            TooltipElement representing the tooltip
+        """
+        inner = (
+            f'<div class="cn-tooltip-content">{self._esc(self.content)}</div>'
+        )
+
+        return TooltipElement(
+            classes=["cn-tooltip", f"cn-tooltip-{self.position}"],
+            inner_html=inner,
+        )
+
+    def render_html(self) -> str:
+        """Render the tooltip as an HTML string.
+
+        Returns:
+            HTML string representation of the tooltip
+        """
+        return self.render().render_html()
+
+    def wrap_html(self, element_html: str) -> str:
+        """Wrap an HTML element with tooltip data attributes.
+
+        This generates a wrapper with data attributes that CSS can use
+        to display the tooltip on hover.
 
-    def _render(self):
-        el = create_el("div", "cn-tooltip")
+        Args:
+            element_html: HTML string of the element to wrap
 
-        tooltip_content = create_el("div", "cn-tooltip-content")
-        tooltip_content.textContent = self.content
+        Returns:
+            HTML string with the element wrapped in a tooltip wrapper
 
-        el.appendChild(tooltip_content)
-        return el
+        Example:
+            >>> tooltip = Tooltip("Click to save")
+            >>> wrapped = tooltip.wrap_html("<button>Save</button>")
+            >>> print(wrapped)
+            <span class="cn-tooltip-wrapper" data-tooltip="Click to save" data-position="top"><button>Save</button></span>
+        """
+        return (
+            f'<span class="cn-tooltip-wrapper"'
+            f' data-tooltip="{self._esc(self.content)}"'
+            f' data-position="{self.position}">'
+            f"{element_html}"
+            f"</span>"
+        )
 
-    def wrap(self, element):
-        """Wrap an element with tooltip."""
-        self.element.insertBefore(element, self.element.firstChild)
-        return self.element
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )

package/packages/react/src/components/Accordion.tsx

@@ -1,82 +1,82 @@
-import * as React from 'react';
-
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-  allowMultiple?: boolean;
-  defaultOpen?: number[];
-}
-
-export interface AccordionItemProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-export const Accordion: React.FC<AccordionProps> & {
-  Item: React.FC<AccordionItemProps>;
-} = Object.assign(
-  ({ allowMultiple = false, defaultOpen = [], children, className = '', ...props }: AccordionProps) => {
-    const [openItems, setOpenItems] = React.useState(new Set(defaultOpen));
-
-    const toggleItem = (index: number) => {
-      setOpenItems((prev) => {
-        const next = new Set(prev);
-        if (next.has(index)) {
-          next.delete(index);
-        } else {
-          if (!allowMultiple) {
-            next.clear();
-          }
-          next.add(index);
-        }
-        return next;
-      });
-    };
-
-    const items = React.Children.toArray(children);
-
-    return (
-      <div className={`cn-accordion ${className}`.trim()} {...props}>
-        {items.map((child, idx) => {
-          if (React.isValidElement<AccordionItemProps>(child)) {
-            return (
-              <div
-                key={idx}
-                className={`cn-accordion-item ${openItems.has(idx) ? 'cn-accordion-open' : ''}`.trim()}
-              >
-                <div
-                  className="cn-accordion-header"
-                  onClick={() => toggleItem(idx)}
-                  role="button"
-                  tabIndex={0}
-                  aria-expanded={openItems.has(idx)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      toggleItem(idx);
-                    }
-                  }}
-                >
-                  <span className="cn-accordion-title">{child.props.title}</span>
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20" className="cn-accordion-icon">
-                    <polyline points="6 9 12 15 18 9" />
-                  </svg>
-                </div>
-                <div className="cn-accordion-content">
-                  {child.props.children}
-                </div>
-              </div>
-            );
-          }
-          return child;
-        })}
-      </div>
-    );
-  },
-  {
-    Item: ({ children }: AccordionItemProps) => <>{children}</>,
-  }
-);
-
-Accordion.displayName = 'Accordion';
-(Accordion.Item as React.FC<AccordionItemProps> & { displayName?: string }).displayName = 'AccordionItem';
-
-export default Accordion;
+import * as React from 'react';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+}
+
+export interface AccordionItemProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export const Accordion: React.FC<AccordionProps> & {
+  Item: React.FC<AccordionItemProps>;
+} = Object.assign(
+  ({ allowMultiple = false, defaultOpen = [], children, className = '', ...props }: AccordionProps) => {
+    const [openItems, setOpenItems] = React.useState(new Set(defaultOpen));
+
+    const toggleItem = (index: number) => {
+      setOpenItems((prev) => {
+        const next = new Set(prev);
+        if (next.has(index)) {
+          next.delete(index);
+        } else {
+          if (!allowMultiple) {
+            next.clear();
+          }
+          next.add(index);
+        }
+        return next;
+      });
+    };
+
+    const items = React.Children.toArray(children);
+
+    return (
+      <div className={`cn-accordion ${className}`.trim()} {...props}>
+        {items.map((child, idx) => {
+          if (React.isValidElement<AccordionItemProps>(child)) {
+            return (
+              <div
+                key={idx}
+                className={`cn-accordion-item ${openItems.has(idx) ? 'cn-accordion-open' : ''}`.trim()}
+              >
+                <div
+                  className="cn-accordion-header"
+                  onClick={() => toggleItem(idx)}
+                  role="button"
+                  tabIndex={0}
+                  aria-expanded={openItems.has(idx)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      toggleItem(idx);
+                    }
+                  }}
+                >
+                  <span className="cn-accordion-title">{child.props.title}</span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20" className="cn-accordion-icon">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </div>
+                <div className="cn-accordion-content">
+                  {child.props.children}
+                </div>
+              </div>
+            );
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+  {
+    Item: ({ children }: AccordionItemProps) => <>{children}</>,
+  }
+);
+
+Accordion.displayName = 'Accordion';
+(Accordion.Item as React.FC<AccordionItemProps> & { displayName?: string }).displayName = 'AccordionItem';
+
+export default Accordion;

package/packages/react/src/components/Button.tsx

@@ -1,47 +1,47 @@
-import * as React from 'react';
-
-export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'danger' | 'success' | 'default';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  icon?: boolean;
-}
-
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const Button: React.FC<ButtonProps> & {
-  Group: React.FC<ButtonGroupProps>;
-} = Object.assign(
-  React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ children, variant = 'default', size = 'md', icon = false, disabled = false, className = '', ...props }, ref) => {
-      const variantClass = variant !== 'default' ? `cn-btn-${variant}` : '';
-      const sizeClass = size !== 'md' ? `cn-btn-${size}` : '';
-      const iconClass = icon ? 'cn-btn-icon' : '';
-
-      return (
-        <button
-          ref={ref}
-          className={`cn-btn ${variantClass} ${sizeClass} ${iconClass} ${className}`.trim()}
-          disabled={disabled}
-          {...props}
-        >
-          {children}
-        </button>
-      );
-    }
-  ),
-  {
-    Group: ({ children, className = '', ...props }: ButtonGroupProps) => (
-      <div className={`cn-btn-group ${className}`.trim()} {...props}>
-        {children}
-      </div>
-    ),
-  }
-);
-
-Button.displayName = 'Button';
-Button.Group.displayName = 'Button.Group';
-
-export default Button;
+import * as React from 'react';
+
+export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'danger' | 'success' | 'default';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: boolean;
+}
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Button: React.FC<ButtonProps> & {
+  Group: React.FC<ButtonGroupProps>;
+} = Object.assign(
+  React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ children, variant = 'default', size = 'md', icon = false, disabled = false, className = '', ...props }, ref) => {
+      const variantClass = variant !== 'default' ? `cn-btn-${variant}` : '';
+      const sizeClass = size !== 'md' ? `cn-btn-${size}` : '';
+      const iconClass = icon ? 'cn-btn-icon' : '';
+
+      return (
+        <button
+          ref={ref}
+          className={`cn-btn ${variantClass} ${sizeClass} ${iconClass} ${className}`.trim()}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </button>
+      );
+    }
+  ),
+  {
+    Group: ({ children, className = '', ...props }: ButtonGroupProps) => (
+      <div className={`cn-btn-group ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    ),
+  }
+);
+
+Button.displayName = 'Button';
+Button.Group.displayName = 'Button.Group';
+
+export default Button;