anteriority-ui 1.0.0

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

@@ -0,0 +1,66 @@
+import DrawPanel from './index.jsx';
+
+export default {
+  title: 'Components/DrawPanel',
+  component: DrawPanel,
+};
+
+export const Default = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log('closed'),
+    title: 'Detalle del registro',
+    description: 'Revisa la información antes de continuar',
+    width: '420px',
+    children: (
+      <p style={{ margin: 0 }}>Contenido del panel lateral.</p>
+    ),
+  },
+};
+
+export const WithActions = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log('closed'),
+    onConfirm: () => console.log('confirmed'),
+    title: 'Confirmar acción',
+    description: 'Esta acción no se puede deshacer',
+    descriptionPosition: 'bottom',
+    showActions: true,
+    confirmText: 'Guardar',
+    cancelText: 'Cancelar',
+    width: '400px',
+    children: (
+      <p style={{ margin: 0 }}>Formulario o resumen de la acción a confirmar.</p>
+    ),
+  },
+};
+
+export const WithCountdownSelectionProgress = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log('closed'),
+    title: 'Selecciona elementos',
+    width: '420px',
+    showCountdown: true,
+    progressMode: 'selection',
+    totalItems: ['a', 'b', 'c', 'd'],
+    selectedItems: ['a', 'b'],
+    children: (
+      <p style={{ margin: 0 }}>2 de 4 elementos seleccionados.</p>
+    ),
+  },
+};
+
+export const TopAnchor = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log('closed'),
+    title: 'Aviso',
+    anchor: 'top',
+    width: '480px',
+    children: (
+      <p style={{ margin: 0 }}>Panel anclado en la parte superior de la pantalla.</p>
+    ),
+  },
+};

package/screens/components/Filter/index.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Filter as FilterIcon, Trash2, Search } from 'lucide-react';
+import DrawPanel from '../DrawPanel/index';
+import Button from '../Button/index';
+import styles from './index.module.css';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+const Filter = ({
+    children,
+    onClear,
+    onApply,
+    searchTerm = '',
+    width = '350px',
+    title = 'Filtros',
+    activeFiltersCount = 0,
+    badgeColor
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleApply = () => {
+        setIsOpen(false);
+        if (onApply) onApply();
+    };
+
+    const handleClear = () => {
+        if (onClear) onClear();
+    };
+
+    return (
+        <div className={styles.filterWrapper}>
+            <div className={styles.filterBar}>
+                <div className={styles.actions}>
+                    <div className={styles.filterButtonWrapper}>
+                        <Button
+                            onClick={() => setIsOpen(true)}
+                            variant={Button.VARIANTS.PRIMARY}
+                        >
+                            <FilterIcon size={18} /> Filtrar
+                        </Button>
+                        {activeFiltersCount > 0 && (
+                            <div className={styles.badgeWrapper}>
+                                <ModalTooltip text="Filtros aplicados" position="top">
+                                    <span
+                                        className={styles.filterBadge}
+                                        style={badgeColor ? { '--filter-badge-bg': badgeColor } : undefined}
+                                    >
+                                        {activeFiltersCount}
+                                    </span>
+                                </ModalTooltip>
+                            </div>
+                        )}
+                    </div>
+                    {onClear && (
+                        <Button
+                            onClick={handleClear}
+                            variant={Button.VARIANTS.DANGER}
+                            color={Button.COLORS.TRANSPARENT}
+                            borderColor="var(--border-gray-low)"
+                        >
+                            <Trash2 size={18} /> Limpiar
+                        </Button>
+                    )}
+                </div>
+                {searchTerm !== undefined && searchTerm !== null && searchTerm !== '' && (
+                    <div className={styles.searchIndicator}>
+                        <Search size={16} />
+                        <span>Buscar: {searchTerm}</span>
+                    </div>
+                )}
+            </div>
+
+            <DrawPanel
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                title={title}
+                width={width}
+            >
+                <div className={styles.filterContent}>
+                    <div className={styles.fields}>
+                        {children}
+                    </div>
+
+                    <div className={styles.drawerActions}>
+                        <Button
+                            onClick={() => setIsOpen(false)}
+                            variant={Button.VARIANTS.DANGER}
+                            color={Button.COLORS.TRANSPARENT}
+                            borderColor="var(--border-gray-low)"
+                        >
+                            Cancelar
+                        </Button>
+                        <Button
+                            onClick={handleApply}
+                            variant={Button.VARIANTS.PRIMARY}
+                        >
+                            Aplicar
+                        </Button>
+                    </div>
+                </div>
+            </DrawPanel>
+        </div>
+    );
+};
+
+export default Filter;

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

@@ -0,0 +1,91 @@
+.filterWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.filterBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--color-background-elevated, #ffffff);
+    padding: 0.75rem 1.25rem;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    width: 100%;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.searchIndicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--color-danger, #64748b);
+    font-size: 0.9rem;
+    background-color: rgba(0,0,0,0.03);
+    padding: 0.25rem 0.75rem;
+    border-radius: 16px;
+}
+
+.filterContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 1.5rem;
+}
+
+.fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+}
+
+.drawerActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--border-color, #e2e8f0);
+    margin-top: auto;
+}
+
+.filterButtonWrapper {
+    position: relative;
+    display: inline-flex;
+}
+.filterButtonWrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.badgeWrapper {
+    position: absolute;
+    top: -6px; 
+    right: -6px; 
+    z-index: 10;
+    display: flex;
+}
+
+.filterBadge {
+    background-color: var(--filter-badge-bg, #ef4444);
+    color: white;
+    border-radius: 50%;
+    min-width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    cursor: default;
+}

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

@@ -0,0 +1,46 @@
+import Filter from './index.jsx';
+import TextField from '../Material-UI/Components/TextField/index';
+
+export default {
+  title: 'Components/Filter',
+  component: Filter,
+};
+
+export const Default = {
+  args: {
+    title: 'Filtros',
+    onApply: () => console.log('applied'),
+    onClear: () => console.log('cleared'),
+    children: (
+      <TextField label="Nombre" placeholder="Buscar por nombre" />
+    ),
+  },
+};
+
+export const WithActiveFiltersAndSearch = {
+  args: {
+    title: 'Filtros avanzados',
+    activeFiltersCount: 3,
+    searchTerm: 'reporte mensual',
+    onApply: () => console.log('applied'),
+    onClear: () => console.log('cleared'),
+    children: (
+      <>
+        <TextField label="Nombre" placeholder="Buscar por nombre" />
+        <TextField label="Estado" placeholder="Activo, inactivo..." />
+      </>
+    ),
+  },
+};
+
+export const WidePanel = {
+  args: {
+    title: 'Filtros',
+    width: '480px',
+    onApply: () => console.log('applied'),
+    onClear: () => console.log('cleared'),
+    children: (
+      <TextField label="Fecha desde" type="date" />
+    ),
+  },
+};

package/screens/components/FormControls/FormControls.module.css

@@ -0,0 +1,86 @@
+.card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  margin-bottom: 1.25rem;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background-color: #f8fafc;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #0f172a;
+}
+
+.cardIcon {
+  color: var(--form-card-icon, #0ea5e9);
+}
+
+.cardTitle h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cardContent {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Inputs */
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.input, .textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  background-color: #ffffff;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.input:focus, .textarea:focus {
+  outline: none;
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.textarea {
+  min-height: 100px;
+  resize: vertical;
+}

package/screens/components/FormControls/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styles from './FormControls.module.css';
+
+export function FormCard({ icon: Icon, title, children, headerActions, iconColor }) {
+    return (
+        <div className={styles.card}>
+            <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>
+                    {Icon && (
+                        <Icon
+                            size={20}
+                            className={styles.cardIcon}
+                            style={iconColor ? { '--form-card-icon': iconColor } : undefined}
+                        />
+                    )}
+                    <h3>{title}</h3>
+                </div>
+                {headerActions && <div className={styles.headerActions}>{headerActions}</div>}
+            </div>
+            <div className={styles.cardContent}>
+                {children}
+            </div>
+        </div>
+    );
+}
+
+import TextField from '../Material-UI/Components/TextField/index';
+
+export function FormInput({ label, icon: Icon, ...props }) {
+    return (
+        <div className={styles.inputGroup}>
+            <TextField 
+                label={label} 
+                {...props} 
+            />
+        </div>
+    );
+}
+
+import MultilinePlaceholder from '../Material-UI/Components/MultilinePlaceholder/index';
+
+export function FormTextArea({ label, icon: Icon, ...props }) {
+    return (
+        <div className={styles.inputGroup}>
+            <MultilinePlaceholder 
+                label={label} 
+                {...props} 
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,36 @@
+import { Settings, FileText } from 'lucide-react';
+import { FormCard, FormInput, FormTextArea } from './index.jsx';
+
+export default {
+  title: 'Components/FormControls',
+  component: FormCard,
+};
+
+export const Card = {
+  render: () => (
+    <FormCard icon={Settings} title="Preferencias">
+      <p style={{ margin: 0 }}>Contenido de la tarjeta de formulario.</p>
+    </FormCard>
+  ),
+};
+
+export const CardWithHeaderActions = {
+  render: () => (
+    <FormCard
+      icon={FileText}
+      title="Datos del contacto"
+      headerActions={<button type="button">Editar</button>}
+    >
+      <FormInput label="Nombre completo" placeholder="Juan Pérez" />
+    </FormCard>
+  ),
+};
+
+export const InputAndTextArea = {
+  render: () => (
+    <FormCard icon={FileText} title="Comentarios">
+      <FormInput label="Asunto" placeholder="Escribe un asunto" />
+      <FormTextArea label="Descripción" placeholder="Cuéntanos más detalles" rows={5} />
+    </FormCard>
+  ),
+};

package/screens/components/Frame/index.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import styles from './index.module.css';
+import Loading from '../Loading/index';
+
+function Frame({ title, icon, content, error, children, className = '', isModal = false, onClose, isLoading = false, bgColor, iconColor, descriptionBgColor }) {
+    const frameCardStyle = {
+        ...(bgColor ? { '--frame-bg': bgColor } : {}),
+        ...(iconColor ? { '--frame-icon': iconColor } : {}),
+        ...(descriptionBgColor ? { '--frame-description-bg': descriptionBgColor } : {}),
+    };
+
+    const frameContent = (
+        <div
+            className={`${styles.frameCard} ${className}`}
+            style={frameCardStyle}
+            onClick={(e) => e.stopPropagation()}
+        >
+            {(title || icon) && (
+                <div className={styles.headerContainer}>
+                    {title && <h3 className={styles.frameTitle}>{title}</h3>}
+                    {icon && <div className={styles.iconContainer}>{icon}</div>}
+                </div>
+            )}
+            {content && <p className={styles.description}>{content}</p>}
+            {error && <p className={styles.errorMessage}>{error}</p>}
+            <div className={styles.bodyContainer}>
+                {isLoading && (
+                    <div className={styles.loadingOverlay}>
+                        <Loading 
+                            size="giant" 
+                        />
+                    </div>
+                )}
+                <div className={isLoading ? styles.hiddenContent : ''}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+
+    if (isModal) {
+        return createPortal(
+            <div className={styles.modalOverlay} onClick={onClose}>
+                {frameContent}
+            </div>,
+            document.body
+        );
+    }
+
+    return frameContent;
+}
+
+export default Frame;

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

@@ -0,0 +1,102 @@
+.frameCard {
+    background-color: var(--frame-bg, #ffffff);
+    width: 320px;
+    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
+    border-radius: 4px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    font-family: 'Roboto', Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+}
+
+.headerContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 0 0 1.25rem 0;
+}
+
+.frameTitle {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #000000;
+    text-align: center;
+    margin: 0;
+}
+
+.iconContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--frame-icon, #555); /* Neutral dark gray for icons */
+}
+
+.description {
+    text-align: center;
+    margin: 0 0 1.25rem 0;
+    font-size: 0.9rem;
+    color: #475569;
+    background-color: var(--frame-description-bg, #f1f5f9); /* Light grayish background */
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    line-height: 1.4;
+}
+
+.errorMessage {
+    color: #ff0000;
+    font-size: 0.85rem;
+    text-align: center;
+    margin: 0 0 1rem 0;
+    font-weight: 700;
+    min-height: 1rem;
+}
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: modalFadeIn 0.3s ease-out;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.bodyContainer {
+    position: relative;
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.loadingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff;
+    z-index: 10;
+}
+
+.hiddenContent {
+    visibility: hidden;
+}

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

@@ -0,0 +1,37 @@
+import { Info } from 'lucide-react';
+import Frame from './index.jsx';
+
+export default {
+  title: 'Components/Frame',
+  component: Frame,
+};
+
+export const Default = {
+  args: {
+    title: 'Información general',
+    content: 'Este es un panel de contenido simple con título y descripción.',
+  },
+};
+
+export const WithIconAndChildren = {
+  args: {
+    title: 'Detalles',
+    icon: <Info size={20} />,
+    children: <p style={{ margin: 0 }}>Contenido personalizado dentro del marco.</p>,
+  },
+};
+
+export const WithError = {
+  args: {
+    title: 'Error al cargar',
+    error: 'No se pudo obtener la información solicitada.',
+  },
+};
+
+export const Loading = {
+  args: {
+    title: 'Cargando datos',
+    isLoading: true,
+    children: <p style={{ margin: 0 }}>Este contenido queda oculto mientras carga.</p>,
+  },
+};

package/screens/components/GreenHighlight/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './index.module.css';
+
+export default function GreenHighlight({ children, textColor, bgColor, style }) {
+    const cssVarStyle = {
+        ...(textColor ? { '--green-highlight-text': textColor } : {}),
+        ...(bgColor ? { '--green-highlight-bg': bgColor } : {}),
+        ...style,
+    };
+    return <strong className={styles.greenHighlight} style={cssVarStyle}>{children}</strong>;
+}