anteriority-ui 1.0.0

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

@@ -0,0 +1,105 @@
+.tableWrapper {
+  width: 100%;
+  overflow: hidden;
+  background: var(--tableA-surface, white);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--tableA-border, #e2e8f0);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: normal;
+}
+
+.table th {
+  background-color: var(--tableA-header, #f8fafc);
+  color: var(--tableA-heading-text, #475569);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--tableA-border, #e2e8f0);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.headerFilterWrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.headerFilterBtn {
+  padding: 0 !important;
+  min-width: unset !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.row {
+  transition: background-color 0.2s ease;
+}
+
+.row:hover {
+  background-color: var(--tableA-hover, #f8fafc);
+}
+
+.row:not(:last-child) td {
+  border-bottom: 1px solid var(--tableA-row-border, #f1f5f9);
+}
+
+.table td {
+  padding: 0.5rem 0.75rem;
+  color: var(--tableA-text, #334155);
+  font-size: 0.9rem;
+  vertical-align: middle;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem !important;
+  text-align: center;
+  color: var(--tableA-muted-text, #64748b);
+  background-color: var(--tableA-header, #f8fafc);
+  border-radius: 12px;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
+  border: 1px dashed var(--tableA-border, #cbd5e1);
+}
+
+.emptyIcon {
+  color: var(--tableA-muted-text, #94a3b8);
+  margin-bottom: 1rem;
+}
+
+.tableLoadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  background-color: var(--tableA-surface, #ffffff);
+  border-radius: 8px;
+  width: 100%;
+}
+
+.centerSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem;
+  min-height: 200px;
+}
+
+.errorMessage {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--SW-red);
+  font-weight: 500;
+}

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

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import TableA from './index';
+import { CheckCircle, XCircle } from 'lucide-react';
+
+export default {
+  title: 'Components/TableA',
+  component: TableA,
+};
+
+const columns = [
+  { header: 'Nombre', accessor: 'name' },
+  { header: 'Email', accessor: 'email' },
+  {
+    header: 'Estado',
+    accessor: 'active',
+    align: 'center',
+    width: '120px',
+    render: (row) =>
+      row.active ? (
+        <CheckCircle size={18} color="var(--button-green, #16a34a)" />
+      ) : (
+        <XCircle size={18} color="var(--color-danger, #ef4444)" />
+      ),
+  },
+];
+
+const data = [
+  { id: 1, name: 'Ana Gomez', email: 'ana@correo.com', active: true },
+  { id: 2, name: 'Luis Perez', email: 'luis@correo.com', active: false },
+  { id: 3, name: 'Marta Ruiz', email: 'marta@correo.com', active: true },
+];
+
+export const Default = {
+  args: {
+    columns,
+    data,
+    keyExtractor: (row) => row.id,
+  },
+};
+
+export const Loading = {
+  args: {
+    columns,
+    data: [],
+    keyExtractor: (row) => row.id,
+    loading: true,
+    skeletonRows: 4,
+  },
+};
+
+export const ErrorState = {
+  args: {
+    columns,
+    data: [],
+    keyExtractor: (row) => row.id,
+    error: 'No se pudieron cargar los datos.',
+    onRetry: () => console.log('retry clicked'),
+  },
+};
+
+export const Empty = {
+  args: {
+    columns,
+    data: [],
+    keyExtractor: (row) => row.id,
+    emptyMessage: 'No hay usuarios registrados',
+  },
+};
+
+const STATUS_FILTER_OPTIONS = [
+  { value: '', label: 'Todos' },
+  { value: 'active', label: 'Activo' },
+  { value: 'inactive', label: 'Inactivo' },
+];
+
+export const WithColumnFilter = {
+  render: () => {
+    const [statusFilter, setStatusFilter] = useState('');
+
+    const filterableColumns = [
+      { header: 'Nombre', accessor: 'name' },
+      { header: 'Email', accessor: 'email' },
+      {
+        header: 'Estado',
+        accessor: 'active',
+        align: 'center',
+        width: '150px',
+        filter: {
+          options: STATUS_FILTER_OPTIONS,
+          value: statusFilter,
+          onChange: setStatusFilter,
+        },
+        render: (row) =>
+          row.active ? (
+            <CheckCircle size={18} color="var(--button-green, #16a34a)" />
+          ) : (
+            <XCircle size={18} color="var(--color-danger, #ef4444)" />
+          ),
+      },
+    ];
+
+    const filteredData = data.filter((row) => {
+      if (statusFilter === 'active') return row.active;
+      if (statusFilter === 'inactive') return !row.active;
+      return true;
+    });
+
+    return (
+      <TableA
+        columns={filterableColumns}
+        data={filteredData}
+        keyExtractor={(row) => row.id}
+      />
+    );
+  },
+};

package/screens/components/TableA/utils.js

@@ -0,0 +1,11 @@
+export function getNextFilterValue(options, currentValue) {
+  if (!Array.isArray(options) || options.length === 0) return currentValue;
+  const currentIndex = options.findIndex((option) => option.value === currentValue);
+  const nextIndex = (currentIndex + 1) % options.length;
+  return options[nextIndex].value;
+}
+
+export function getFilterOptionLabel(options, value) {
+  if (!Array.isArray(options)) return undefined;
+  return options.find((option) => option.value === value)?.label;
+}

package/screens/components/TableB/index.jsx

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import styles from './index.module.css';
+import { Inbox, ChevronDown, ChevronUp, Filter as FilterIcon } from 'lucide-react';
+import Barnner from '../Barnner';
+import Button from '../Button';
+import Loading from '../Loading/index';
+import Skeleton from '../Skeleton/index';
+import ScrollBar from '../ScrollBar';
+import { getNextFilterValue, getFilterOptionLabel } from './utils';
+
+const TableB = (props) => {
+  const {
+    columns = [],
+    data = [],
+    loading = false,
+    skeletonRows = 6,
+    error = null,
+    emptyIcon: EmptyIcon = Inbox,
+    emptyMessage = "No hay datos disponibles.",
+    onRetry,
+    expandable,
+    rowKey = 'id',
+    rowClassName,
+    surfaceColor,
+    headerColor,
+    textColor,
+    headingColor,
+    mutedTextColor,
+    borderColor,
+    hoverColor,
+    rowBorderColor,
+    badgeColors,
+    filterIconColor,
+    filterActiveColor = '#10b981'
+  } = props;
+  const [expandedKeys, setExpandedKeys] = useState({});
+
+  const handleCycleFilter = (filter) => {
+    if (!filter || !Array.isArray(filter.options) || filter.options.length === 0) return;
+    filter.onChange?.(getNextFilterValue(filter.options, filter.value));
+  };
+
+  const toggleExpand = (key) => {
+    setExpandedKeys(prev => ({
+      ...prev,
+      [key]: !prev[key]
+    }));
+  };
+
+  const themeVars = {
+    '--tableB-surface': surfaceColor,
+    '--tableB-header': headerColor,
+    '--tableB-text': textColor,
+    '--tableB-heading-text': headingColor,
+    '--tableB-muted-text': mutedTextColor,
+    '--tableB-border': borderColor,
+    '--tableB-hover': hoverColor,
+    '--tableB-row-border': rowBorderColor,
+    '--tableB-badge-success-bg': badgeColors?.success?.bg,
+    '--tableB-badge-success-color': badgeColors?.success?.color,
+    '--tableB-badge-warning-bg': badgeColors?.warning?.bg,
+    '--tableB-badge-warning-color': badgeColors?.warning?.color,
+    '--tableB-badge-danger-bg': badgeColors?.danger?.bg,
+    '--tableB-badge-danger-color': badgeColors?.danger?.color,
+  };
+
+  const getBadgeOverrideClass = (badgeTypeValue) => {
+    if (badgeTypeValue === 'success') return styles.badgeSuccess;
+    if (badgeTypeValue === 'warning') return styles.badgeWarning;
+    if (badgeTypeValue === 'danger') return styles.badgeDanger;
+    return '';
+  };
+
+  return (
+    <ScrollBar horizontal vertical={false} className={styles.tableContainer} style={themeVars}>
+      <table className={styles.modernTable}>
+        <thead>
+          <tr>
+            {columns.map((col, idx) => (
+              <th
+                key={col.key || idx}
+                style={{ textAlign: col.align || 'left' }}
+              >
+                {col.filter ? (
+                  <div
+                    className={styles.headerFilterWrap}
+                    style={{ justifyContent: col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start' }}
+                  >
+                    <span>{col.label}</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.label}
+              </th>
+            ))}
+            {expandable && <th className={styles.expandHeader}></th>}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            Array.from({ length: skeletonRows }).map((_, rowIdx) => (
+              <tr key={`skeleton-${rowIdx}`}>
+                {columns.map((col, colIdx) => (
+                  <td key={col.key || colIdx} style={{ textAlign: col.align || 'left', width: col.width }}>
+                    <Skeleton height="14px" width={col.align === 'right' || col.align === 'center' ? '60%' : '85%'} />
+                  </td>
+                ))}
+                {expandable && <td className={styles.expandCell} />}
+              </tr>
+            ))
+          ) : error ? (
+            <tr>
+              <td colSpan={columns.length + (expandable ? 1 : 0)} style={{ padding: 0 }}>
+                <div className={styles.centerSection}>
+                  <div style={{ marginBottom: '16px' }}>
+                    <Loading size="large" phrases={[error, "Revisando conexión", "Por favor, intenta de nuevo"]} />
+                  </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 + (expandable ? 1 : 0)} 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, rowIndex) => {
+              const key = row[rowKey] || rowIndex;
+              const isExpanded = !!expandedKeys[key];
+              const canExpand = expandable?.rowExpandable ? expandable.rowExpandable(row) : true;
+
+              return (
+              <React.Fragment key={key}>
+                <tr 
+                  className={`${styles.tableRow} ${isExpanded ? styles.rowExpanded : ''} ${rowClassName ? rowClassName(row, rowIndex) : ''}`}
+                  onClick={() => canExpand && toggleExpand(key)}
+                  style={{ cursor: canExpand ? 'pointer' : 'default' }}
+                >
+                  {columns.map((col, colIndex) => (
+                    <td 
+                      key={col.key || colIndex}
+                      style={{ textAlign: col.align || 'left', width: col.width }}
+                    >
+                      {col.type === 'actions' && col.actions ? (
+                        <div className={styles.actionButtons} style={{ justifyContent: col.align || 'flex-start' }}>
+                          {col.actions.map((act, actIdx) => (
+                            <Button 
+                              key={actIdx} 
+                              variant={Button.VARIANTS.PRIMARY}
+                              size={Button.SIZES.LARGE}
+                              color={Button.COLORS.GREEN}
+                              onClick={(e) => { e.stopPropagation(); act.onClick(row); }}
+                              disabled={act.disabled ? act.disabled(row) : false}
+                            >
+                              {act.label}
+                              {act.icon && <img src={act.icon} alt={act.label} className={`${styles.actionIcon} ${act.invertIcon ? styles.actionIconInvert : ''}`} />}
+                            </Button>
+                          ))}
+                        </div>
+                      ) : col.type === 'badge' ? (
+                        <Barnner
+                          type={col.badgeType ? col.badgeType(row) : undefined}
+                          className={`${getBadgeOverrideClass(col.badgeType ? col.badgeType(row) : undefined)} ${col.badgeClass ? col.badgeClass(row) : ''}`}
+                        >
+                          {col.render ? col.render(row, rowIndex) : row[col.key]}
+                        </Barnner>
+                      ) : col.render ? (
+                        col.render(row, rowIndex)
+                      ) : (
+                        row[col.key]
+                      )}
+                    </td>
+                  ))}
+                  {expandable && (
+                    <td className={styles.expandCell}>
+                      {canExpand ? (
+                        <div className={styles.expandIconWrapper}>
+                          {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+                        </div>
+                      ) : null}
+                    </td>
+                  )}
+                </tr>
+                {expandable && isExpanded && (
+                  <tr className={styles.expandedContentRow}>
+                    <td colSpan={columns.length + 1} className={styles.expandedContentCell}>
+                      <div className={styles.expandedWrapper}>
+                        {expandable.expandedRowRender(row, rowIndex)}
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            );
+          }))}
+        </tbody>
+      </table>
+    </ScrollBar>
+  );
+};
+
+export default TableB;