anteriority-ui 1.0.0

package/screens/components/SubSidebarLayout/index.module.css

@@ -0,0 +1,80 @@
+.layoutWrapper {
+  display: flex;
+  width: 100%;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-top: 1rem;
+}
+
+.subSidebar {
+  width: 240px;
+  flex-shrink: 0;
+  background-color: var(--subsidebarlayout-bg, black);
+  border: 1px solid var(--gray-200, #e2e8f0);
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+.menuList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  color: var(--gray-600, #4a5568);
+  font-weight: 800;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.menuItem:hover {
+  background-color: var(--gray-50, #f8fafc);
+  color: var(--gray-900, #1a202c);
+}
+
+.menuItem.active {
+  background-color: var(--primary-color, #4299e1);
+  color: white;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconWrapper svg {
+  width: 18px;
+  height: 18px;
+}
+
+.menuItem.active .iconWrapper {
+  color: white;
+}
+
+.contentArea {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .layoutWrapper {
+    flex-direction: column;
+  }
+  
+  .subSidebar {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}

package/screens/components/SubSidebarLayout/index.stories.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Settings, Users, FileText } from 'lucide-react';
+import SubSidebarLayout from './index';
+
+export default {
+  title: 'Components/SubSidebarLayout',
+  component: SubSidebarLayout,
+};
+
+const menuItems = [
+  { id: 'general', label: 'General', icon: <Settings size={16} /> },
+  { id: 'users', label: 'Usuarios', icon: <Users size={16} /> },
+  { id: 'docs', label: 'Documentos', icon: <FileText size={16} /> },
+];
+
+const LayoutWithState = (args) => {
+  const [activeItemId, setActiveItemId] = useState(args.activeItemId ?? menuItems[0].id);
+  return (
+    <div style={{ height: 400 }}>
+      <SubSidebarLayout
+        {...args}
+        activeItemId={activeItemId}
+        onItemClick={(id) => setActiveItemId(id)}
+      />
+    </div>
+  );
+};
+
+export const Default = {
+  render: (args) => <LayoutWithState {...args} />,
+  args: {
+    menuItems,
+    children: <div style={{ padding: 24 }}>Selected section content goes here.</div>,
+  },
+};
+
+export const NoIcons = {
+  render: (args) => <LayoutWithState {...args} />,
+  args: {
+    menuItems: menuItems.map(({ id, label }) => ({ id, label })),
+    children: <div style={{ padding: 24 }}>Content without icons in the menu.</div>,
+  },
+};
+
+export const EmptyContent = {
+  render: (args) => <LayoutWithState {...args} />,
+  args: {
+    menuItems,
+    children: null,
+  },
+};

package/screens/components/SummaryCard/index.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Sparkles, Copy, Check } from 'lucide-react';
+import styles from './index.module.css';
+import Button from '../Button/index';
+
+const SummaryCard = ({ title, text, enableCopy = false, gradientStart, gradientEnd, headerColor }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  return (
+    <div
+      className={styles.iaSummaryCard}
+      style={{
+        ...(gradientStart ? { '--summarycard-gradient-start': gradientStart } : {}),
+        ...(gradientEnd ? { '--summarycard-gradient-end': gradientEnd } : {}),
+        ...(headerColor ? { '--summarycard-header-color': headerColor } : {}),
+      }}
+    >
+      <div className={styles.iaSummaryHeader}>
+        <Sparkles size={24} />
+        <h3>{title}</h3>
+        {enableCopy && (
+          <Button 
+            onClick={handleCopy}
+            variant="ghost"
+            color={copied ? "green" : "#64748b"}
+            circle
+            size="small"
+            icon={copied ? Check : Copy}
+            style={{ marginLeft: 'auto' }}
+            ToolTip={copied ? "¡Copiado!" : "Copiar contenido"}
+          />
+        )}
+      </div>
+      <p className={styles.iaSummaryText}>{text}</p>
+    </div>
+  );
+};
+
+export default SummaryCard;

package/screens/components/SummaryCard/index.module.css

@@ -0,0 +1,30 @@
+.iaSummaryCard {
+  background: linear-gradient(135deg, var(--summarycard-gradient-start, #fdf4ff) 0%, var(--summarycard-gradient-end, #f0fdf4) 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.iaSummaryHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--summarycard-header-color, #103529);
+  margin-bottom: 1rem;
+}
+
+.iaSummaryHeader h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.iaSummaryText {
+  color: #334155;
+  line-height: 1.6;
+  font-size: 1rem;
+  margin: 0;
+}
+
+

package/screens/components/SummaryCard/index.stories.jsx

@@ -0,0 +1,29 @@
+import SummaryCard from './index';
+
+export default {
+  title: 'Components/SummaryCard',
+  component: SummaryCard,
+};
+
+export const Default = {
+  args: {
+    title: 'Resumen generado',
+    text: 'Este es un resumen de ejemplo generado automáticamente a partir del contenido analizado, mostrando los puntos clave más relevantes.',
+  },
+};
+
+export const WithCopyButton = {
+  args: {
+    title: 'Resumen con copia',
+    text: 'Este resumen incluye un botón para copiar el contenido al portapapeles con un solo clic.',
+    enableCopy: true,
+  },
+};
+
+export const LongText = {
+  args: {
+    title: 'Resumen extenso',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+    enableCopy: true,
+  },
+};

package/screens/components/Swich/constants.js

@@ -0,0 +1,4 @@
+export const SWITCH_TEXTS = {
+  enabled: 'Habilitado',
+  disabled: 'Deshabilitado',
+};

package/screens/components/Swich/index.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import styles from './index.module.css';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+import { SWITCH_TEXTS } from './constants';  
+
+const Switch = ({ 
+  value = false, 
+  onChange, 
+  disabled = false, 
+  activeColor = '#088d4f',
+  inactiveColor = '#919191',
+  thumbColor = '#ffffff',
+  className = '', 
+  style = {} 
+}) => {
+  const [active, setActive] = useState(value);
+  const [ripples, setRipples] = useState([]);
+
+  useEffect(() => {
+    setActive(value);
+  }, [value]);
+
+  const handleClick = (e) => {
+    if (disabled) return;
+
+    const button = e.currentTarget;
+    const rect = button.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height);
+    const x = e.clientX - rect.left - size / 2;
+    const y = e.clientY - rect.top - size / 2;
+
+    const newRipple = { x, y, size, id: Date.now() };
+    setRipples((prev) => [...prev, newRipple]);
+
+    setTimeout(() => {
+      setRipples((prev) => prev.filter((ripple) => ripple.id !== newRipple.id));
+    }, 600);
+
+    const newActive = !active;
+    setActive(newActive);
+    
+    if (onChange) {
+      onChange(newActive);
+    }
+  };
+
+  const statusClass = active ? styles.active : styles.inactive;
+
+  const dynamicStyle = {
+    ...style,
+    backgroundColor: active ? activeColor : inactiveColor,
+  };
+  const tooltipText = active ? SWITCH_TEXTS.enabled : SWITCH_TEXTS.disabled;
+
+  return (
+    <ModalTooltip text={tooltipText}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={active}
+        disabled={disabled}
+        className={`${styles.switchButton} ${statusClass} ${className}`}
+        style={dynamicStyle}
+        onClick={handleClick}
+      >
+        <div className={styles.thumb} style={{ backgroundColor: thumbColor }} />
+        
+        {ripples.map((ripple) => (
+          <span
+            key={ripple.id}
+            className={styles.ripple}
+            style={{
+              left: ripple.x,
+              top: ripple.y,
+              width: ripple.size,
+              height: ripple.size
+            }}
+          />
+        ))}
+      </button>
+    </ModalTooltip>
+  );
+};
+
+export default Switch;

package/screens/components/Swich/index.module.css

@@ -0,0 +1,68 @@
+.switchButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 50px;
+  height: 24px;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.3s ease;
+  overflow: hidden;
+}
+
+.switchButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.active {
+  /* only used for thumb translation */
+}
+
+.inactive {
+  /* only used for thumb translation */
+}
+
+.thumb {
+  position: absolute;
+  top: 3px;
+  width: 18px;
+  height: 18px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.active .thumb {
+  transform: translateX(29px);
+}
+
+.inactive .thumb {
+  transform: translateX(3px);
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 0.6s linear;
+  background-color: rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.inactive .ripple {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/screens/components/Swich/index.stories.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import Switch from './index';
+
+export default {
+  title: 'Components/Swich',
+  component: Switch,
+};
+
+const SwitchWithState = (args) => {
+  const [value, setValue] = useState(args.value ?? false);
+  return <Switch {...args} value={value} onChange={setValue} />;
+};
+
+export const Off = {
+  render: (args) => <SwitchWithState {...args} />,
+  args: {
+    value: false,
+  },
+};
+
+export const On = {
+  render: (args) => <SwitchWithState {...args} />,
+  args: {
+    value: true,
+  },
+};
+
+export const Disabled = {
+  render: (args) => <SwitchWithState {...args} />,
+  args: {
+    value: true,
+    disabled: true,
+  },
+};
+
+export const CustomColors = {
+  render: (args) => <SwitchWithState {...args} />,
+  args: {
+    value: true,
+    activeColor: '#2563eb',
+    inactiveColor: '#cbd5e1',
+    thumbColor: '#ffffff',
+  },
+};

package/screens/components/TableA/index.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import styles from './index.module.css';
+import Skeleton from '../Skeleton/index';
+import { AlertCircle, Inbox, Filter as FilterIcon } from 'lucide-react';
+import Button from '../Button';
+import ScrollBar from '../ScrollBar';
+import { getNextFilterValue, getFilterOptionLabel } from './utils';
+
+const TableA = (props) => {
+  const {
+    columns = [],
+    data = [],
+    keyExtractor,
+    rowClassName,
+    loading = false,
+    skeletonRows = 6,
+    error = null,
+    onRetry,
+    emptyIcon: EmptyIcon = Inbox,
+    emptyMessage = "No hay datos disponibles",
+    surfaceColor,
+    headerColor,
+    textColor,
+    headingColor,
+    mutedTextColor,
+    borderColor,
+    hoverColor,
+    rowBorderColor,
+    onRowClick,
+    filterIconColor,
+    filterActiveColor = '#10b981'
+  } = props;
+
+  const themeVars = {
+    '--tableA-surface': surfaceColor,
+    '--tableA-header': headerColor,
+    '--tableA-text': textColor,
+    '--tableA-heading-text': headingColor,
+    '--tableA-muted-text': mutedTextColor,
+    '--tableA-border': borderColor,
+    '--tableA-hover': hoverColor,
+    '--tableA-row-border': rowBorderColor
+  };
+
+  const handleCycleFilter = (filter) => {
+    if (!filter || !Array.isArray(filter.options) || filter.options.length === 0) return;
+    filter.onChange?.(getNextFilterValue(filter.options, filter.value));
+  };
+
+  return (
+    <ScrollBar horizontal vertical={false} className={styles.tableWrapper} style={themeVars}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            {columns.map((col, idx) => (
+              <th
+                key={idx}
+                style={{
+                  textAlign: col.align || 'left',
+                  width: col.width,
+                  minWidth: col.width,
+                  maxWidth: col.width,
+                }}
+              >
+                {col.filter ? (
+                  <div
+                    className={styles.headerFilterWrap}
+                    style={{ justifyContent: col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start' }}
+                  >
+                    <span>{col.header}</span>
+                    <Button
+                      circle
+                      size="small"
+                      variant={Button.VARIANTS.GHOST}
+                      icon={FilterIcon}
+                      color={col.filter.value ? filterActiveColor : filterIconColor}
+                      className={styles.headerFilterBtn}
+                      ToolTip={col.filter.tooltip || getFilterOptionLabel(col.filter.options, col.filter.value)}
+                      onClick={() => handleCycleFilter(col.filter)}
+                    />
+                  </div>
+                ) : col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            Array.from({ length: skeletonRows }).map((_, rowIdx) => (
+              <tr key={`skeleton-${rowIdx}`} className={styles.row}>
+                {columns.map((col, colIdx) => (
+                  <td key={colIdx} style={{ textAlign: col.align || 'left', width: col.width, minWidth: col.width, maxWidth: col.width }}>
+                    <Skeleton height="14px" width={col.align === 'right' || col.align === 'center' ? '60%' : '85%'} />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : error ? (
+            <tr>
+              <td colSpan={columns.length} style={{ padding: 0 }}>
+                <div className={styles.centerSection}>
+                  <div className={styles.errorMessage}>
+                    <AlertCircle size={32} />
+                    <span>{error}</span>
+                  </div>
+                  {onRetry && (
+                    <Button
+                      type={"button"}
+                      variant={Button.VARIANTS.PRIMARY}
+                      size={Button.SIZES.LARGE}
+                      color={Button.COLORS.GREEN}
+                      onClick={onRetry}>Reintentar</Button>
+                  )}
+                </div>
+              </td>
+            </tr>
+          ) : (!data || data.length === 0) ? (
+            <tr>
+              <td colSpan={columns.length} style={{ padding: '1.5rem' }}>
+                <div className={styles.emptyState}>
+                  <EmptyIcon size={48} className={styles.emptyIcon} />
+                  <p style={{ margin: 0 }}>{emptyMessage}</p>
+                </div>
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr
+                key={keyExtractor(row)}
+                className={`${styles.row} ${rowClassName ? rowClassName(row) : ''}`}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+                style={onRowClick ? { cursor: 'pointer' } : undefined}
+              >
+                {columns.map((col, colIndex) => (
+                  <td
+                    key={colIndex}
+                    style={{
+                      textAlign: col.align || 'left',
+                      width: col.width,
+                      minWidth: col.width,
+                      maxWidth: col.width,
+                    }}
+                  >
+                    {col.render ? col.render(row) : row[col.accessor]}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </ScrollBar>
+  );
+};
+
+export default TableA;