anteriority-ui 1.0.0

package/screens/components/Material-UI/Components/Paginador/index.stories.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import Paginador from './index';
+
+export default {
+  title: 'Components/Material-UI/Paginador',
+  component: Paginador,
+};
+
+const ControlledTemplate = (args) => {
+  const [page, setPage] = useState(args.page || 1);
+  const [pageSize, setPageSize] = useState(args.pageSize);
+  return (
+    <Paginador
+      {...args}
+      page={page}
+      onChange={(e, value) => setPage(value)}
+      pageSize={pageSize}
+      onPageSizeChange={args.onPageSizeChange && setPageSize}
+    />
+  );
+};
+
+export const Default = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    count: 10,
+    page: 1,
+  },
+};
+
+export const WithPageSizeSelector = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    count: 15,
+    page: 2,
+    pageSize: 10,
+    pageSizeOptions: [5, 10, 20, 50],
+    onPageSizeChange: () => {},
+  },
+};
+
+export const Disabled = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    count: 10,
+    page: 3,
+    disabled: true,
+  },
+};

package/screens/components/Material-UI/Components/Search/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function Search({
+  open,
+  onOpen,
+  onClose,
+  options = [],
+  loading = false,
+  value,
+  onChange,
+  inputValue,
+  onInputChange,
+  getOptionLabel = (option) => option?.label || "",
+  isOptionEqualToValue = (option, val) => option?.value === val?.value,
+  label = "Buscar",
+  placeholder = "Buscar...",
+  freeSolo = false,
+  ...props
+}) {
+  // Fallback to plain TextField if we are just doing local free text search without options
+  if (freeSolo && options.length === 0) {
+    return (
+      <TextField
+        value={value}
+        onChange={(e) => {
+          if (onChange) onChange(e.target.value);
+        }}
+        label={label}
+        placeholder={placeholder}
+        size="small"
+        fullWidth
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <Autocomplete
+      fullWidth
+      open={open}
+      onOpen={onOpen}
+      onClose={onClose}
+      value={value}
+      onChange={(event, newValue) => {
+        if (onChange) onChange(newValue);
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        if (onInputChange) onInputChange(newInputValue);
+      }}
+      isOptionEqualToValue={isOptionEqualToValue}
+      getOptionLabel={getOptionLabel}
+      options={options}
+      loading={loading}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          placeholder={placeholder}
+          size="small"
+          slotProps={{
+            ...params.slotProps,
+            input: {
+              ...params.slotProps?.input,
+              endAdornment: (
+                <React.Fragment>
+                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {params.slotProps?.input?.endAdornment}
+                </React.Fragment>
+              ),
+            },
+          }}
+        />
+      )}
+      {...props}
+    />
+  );
+}

package/screens/components/Material-UI/Components/Search/index.stories.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import Search from './index';
+
+export default {
+  title: 'Components/Material-UI/Search',
+  component: Search,
+};
+
+const options = [
+  { label: 'Ana Gomez', value: 1 },
+  { label: 'Luis Perez', value: 2 },
+  { label: 'Marta Ruiz', value: 3 },
+];
+
+export const WithOptions = {
+  render: (args) => {
+    const [value, setValue] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    return (
+      <Search
+        {...args}
+        value={value}
+        onChange={setValue}
+        inputValue={inputValue}
+        onInputChange={setInputValue}
+      />
+    );
+  },
+  args: {
+    options,
+    label: 'Buscar usuario',
+    placeholder: 'Escribe un nombre...',
+  },
+};
+
+export const Loading = {
+  render: (args) => {
+    const [value, setValue] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    return (
+      <Search
+        {...args}
+        value={value}
+        onChange={setValue}
+        inputValue={inputValue}
+        onInputChange={setInputValue}
+      />
+    );
+  },
+  args: {
+    options: [],
+    loading: true,
+    label: 'Buscar usuario',
+  },
+};
+
+export const FreeSolo = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return <Search {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    freeSolo: true,
+    options: [],
+    label: 'Buscar',
+    placeholder: 'Escribe texto libre...',
+  },
+};

package/screens/components/Material-UI/Components/Selector/index.jsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function Selector({
+    label,
+    value,
+    onChange,
+    options = [],
+    id = "custom-autocomplete",
+    style = {},
+    className = "",
+    fullWidth = true,
+    placeholder,
+    required,
+    requiredColor = "red",
+    disableClearable = false
+}) {
+    const normalizeVal = (val) => String(val || '').toLowerCase().replace(/[_\s\/-]+/g, '');
+
+    const selectedOption = (value !== "" && value !== undefined && value !== null) 
+        ? options.find(opt => 
+            String(opt.value) === String(value) || 
+            normalizeVal(opt.value) === normalizeVal(value) ||
+            normalizeVal(opt.label) === normalizeVal(value)
+          ) || null 
+        : null;
+
+    const displayLabel = label ? (
+        <span>
+            {label}
+            {required && <span style={{ color: requiredColor, marginLeft: '4px' }}>**</span>}
+        </span>
+    ) : undefined;
+
+    return (
+        <Autocomplete
+            id={id}
+            sx={{ width: fullWidth ? '100%' : 300, m: 0, ...style }}
+            className={className}
+            options={options}
+            autoHighlight
+            openOnFocus
+            disableClearable={disableClearable}
+            getOptionLabel={(option) => option.label || ""}
+            value={selectedOption}
+            onChange={(event, newValue) => {
+                onChange({ target: { value: newValue ? newValue.value : "" } });
+            }}
+            isOptionEqualToValue={(option, val) => 
+                String(option.value) === String(val?.value) ||
+                normalizeVal(option.value) === normalizeVal(val?.value) ||
+                normalizeVal(option.label) === normalizeVal(val?.label)
+            }
+            slotProps={{
+                popper: {
+                    sx: { zIndex: 100000 }
+                }
+            }}
+            renderOption={(props, option) => {
+                const { key, ...optionProps } = props;
+                return (
+                    <Box
+                        key={key}
+                        component="li"
+                        sx={{ display: 'flex', alignItems: 'center', gap: '8px', ...optionProps.sx }}
+                        {...optionProps}
+                    >
+                        {option.icon && <img src={option.icon} alt="" style={{ width: 24, height: 24, objectFit: 'contain' }} />}
+                        {option.label}
+                    </Box>
+                );
+            }}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    label={displayLabel}
+                    placeholder={placeholder}
+                    size="small"
+                    inputProps={{
+                        ...params.inputProps,
+                        autoComplete: 'off',
+                        form: {
+                            autocomplete: 'off',
+                        },
+                    }}
+                    slotProps={{
+                        ...params.slotProps,
+                        htmlInput: {
+                            ...params.slotProps?.htmlInput,
+                            autoComplete: 'off',
+                            name: 'no-autofill-' + Math.random(),
+                        },
+                    }}
+                />
+            )}
+        />
+    );
+}

package/screens/components/Material-UI/Components/Selector/index.stories.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import Selector from './index';
+
+export default {
+  title: 'Components/Material-UI/Selector',
+  component: Selector,
+};
+
+const options = [
+  { value: 'perro', label: 'Perro' },
+  { value: 'gato', label: 'Gato' },
+  { value: 'ave', label: 'Ave' },
+];
+
+const ControlledTemplate = (args) => {
+  const [value, setValue] = useState(args.value || '');
+  return (
+    <Selector
+      {...args}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const Default = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Especie',
+    options,
+    placeholder: 'Selecciona una especie',
+  },
+};
+
+export const Required = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Especie',
+    options,
+    required: true,
+    placeholder: 'Selecciona una especie',
+  },
+};
+
+export const WithValue = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Especie',
+    options,
+    value: 'gato',
+  },
+};

package/screens/components/Material-UI/Components/TextField/index.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import MuiTextField from '@mui/material/TextField';
+import { formatHighlightedText } from '../../../GreenHighlight/utils';
+
+const TextField = forwardRef(({ 
+  label, 
+  value, 
+  onChange, 
+  error, 
+  helperText,
+  type = "text",
+  variant = "outlined",
+  size = "small",
+  fullWidth = true,
+  placeholder,
+  required,
+  requiredColor = 'red',
+  bgColor = '#fff',
+  textColor = '#0f172a',
+  ...props
+}, ref) => {
+  const formattedLabel = typeof label === 'string' ? formatHighlightedText(label) : label;
+  const displayLabel = formattedLabel ? (
+    <span>
+      {formattedLabel}
+      {required && <span style={{ color: requiredColor, marginLeft: '4px' }}>**</span>}
+    </span>
+  ) : undefined;
+
+  const displayHelperText = typeof helperText === 'string' ? formatHighlightedText(helperText) : helperText;
+
+  return (
+    <MuiTextField
+      label={displayLabel}
+      value={value}
+      onChange={onChange}
+      error={!!error}
+      helperText={error || displayHelperText}
+      type={type}
+      variant={variant}
+      size={size}
+      fullWidth={fullWidth}
+      placeholder={placeholder}
+      sx={{
+        m: 0,
+        '& .MuiInputBase-root': { backgroundColor: bgColor },
+        '& input:-webkit-autofill': {
+          WebkitBoxShadow: `0 0 0 1000px ${bgColor} inset`,
+          WebkitTextFillColor: textColor,
+          caretColor: textColor,
+        },
+      }}
+      inputRef={ref}
+      {...props}
+    />
+  );
+});
+
+TextField.displayName = 'TextField';
+
+export default TextField;

package/screens/components/Material-UI/Components/TextField/index.stories.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import TextField from './index';
+
+export default {
+  title: 'Components/Material-UI/TextField',
+  component: TextField,
+};
+
+const ControlledTemplate = (args) => {
+  const [value, setValue] = useState(args.value || '');
+  return (
+    <TextField
+      {...args}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const Default = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Nombre',
+    placeholder: 'Escribe tu nombre...',
+  },
+};
+
+export const Required = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Correo electrónico',
+    placeholder: 'usuario@correo.com',
+    required: true,
+  },
+};
+
+export const WithError = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Contraseña',
+    type: 'password',
+    error: true,
+    helperText: 'La contraseña debe tener al menos 6 caracteres',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Correo electrónico (Autocompletado)',
+    value: 'usuario@correo.com',
+    disabled: true,
+  },
+};

package/screens/components/ModalTooltip/ModalTooltip.jsx

@@ -0,0 +1,122 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import styles from "./ModalTooltip.module.css";
+
+const ModalTooltip = ({
+  text,
+  children,
+  position = "top",
+  delay = 150,
+  style,
+  bgColor,
+  textColor,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [activePos, setActivePos] = useState(position);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  // Cálculo preciso de posición con prevención de colisiones con los bordes del viewport
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const gap = 8; // Distancia entre el trigger y el tooltip
+    let currentPos = position;
+
+    // Dimensiones reales del tooltip
+    const tooltipWidth = tooltipRef.current ? tooltipRef.current.offsetWidth : 200;
+    const tooltipHeight = tooltipRef.current ? tooltipRef.current.offsetHeight : 36;
+
+    // Inversión automática si colisiona arriba/abajo
+    if (position === "top" && triggerRect.top - tooltipHeight - gap < 0) {
+      currentPos = "bottom";
+    } else if (position === "bottom" && triggerRect.bottom + tooltipHeight + gap > window.innerHeight) {
+      currentPos = "top";
+    }
+
+    setActivePos(currentPos);
+
+    // Calcular Top
+    let top = currentPos === "bottom" 
+      ? triggerRect.bottom + window.scrollY + gap 
+      : triggerRect.top + window.scrollY - gap;
+
+    // Calcular Left con clamp para que nunca se salga horizontalmente
+    let left = triggerRect.left + window.scrollX + triggerRect.width / 2;
+    const minLeft = tooltipWidth / 2 + 10;
+    const maxLeft = window.innerWidth - tooltipWidth / 2 - 10;
+    left = Math.max(minLeft, Math.min(left, maxLeft));
+
+    setCoords({ top, left });
+  }, [position]);
+
+  // Listener global de scroll y resize cuando está visible
+  useEffect(() => {
+    if (!visible) return;
+
+    updatePosition();
+
+    const handleScrollOrResize = () => updatePosition();
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [visible, updatePosition]);
+
+  const handleMouseEnter = () => {
+    timeoutRef.current = setTimeout(() => {
+      setVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setVisible(false);
+  };
+
+  return (
+    <span
+      ref={triggerRef}
+      className={styles.container}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        position: "relative",
+        ...style
+      }}
+      {...props}
+    >
+      {children}
+      {visible &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            ref={tooltipRef}
+            className={`${styles.tooltip} ${styles[activePos]}`}
+            style={{
+              top: `${coords.top}px`,
+              left: `${coords.left}px`,
+              ...(bgColor ? { '--modaltooltip-bg': bgColor } : {}),
+              ...(textColor ? { '--modaltooltip-text': textColor } : {}),
+            }}
+          >
+            {text}
+            <span className={styles.arrow} />
+          </div>,
+          document.body
+        )}
+    </span>
+  );
+};
+
+export default ModalTooltip;

package/screens/components/ModalTooltip/ModalTooltip.module.css

@@ -0,0 +1,65 @@
+.container {
+  cursor: pointer;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 99999;
+  width: max-content;
+  max-width: 320px;
+  background-color: var(--modaltooltip-bg, #0f172a); /* Slate 900 */
+  color: var(--modaltooltip-text, #f8fafc);
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  pointer-events: none;
+  animation: tooltipFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Posicionamiento y Transformaciones */
+.top {
+  transform: translate(-50%, -100%);
+}
+
+.bottom {
+  transform: translate(-50%, 0);
+}
+
+/* Flecha direccional */
+.arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--modaltooltip-bg, #0f172a);
+  transform: rotate(45deg);
+  left: 50%;
+  margin-left: -4px;
+}
+
+.top .arrow {
+  bottom: -4px;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bottom .arrow {
+  top: -4px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Animación de entrada con Scale suave */
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    scale: 0.92;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}

package/screens/components/ModalTooltip/ModalTooltip.stories.jsx

@@ -0,0 +1,39 @@
+import ModalTooltip from './ModalTooltip';
+
+export default {
+  title: 'Components/ModalTooltip',
+  component: ModalTooltip,
+};
+
+export const Top = {
+  args: {
+    text: 'Tooltip on top',
+    position: 'top',
+    children: <button type="button">Hover me</button>,
+  },
+};
+
+export const Bottom = {
+  args: {
+    text: 'Tooltip on bottom',
+    position: 'bottom',
+    children: <button type="button">Hover me</button>,
+  },
+};
+
+export const WithDelay = {
+  args: {
+    text: 'Shows after a longer delay',
+    position: 'top',
+    delay: 600,
+    children: <button type="button">Slow tooltip</button>,
+  },
+};
+
+export const OnText = {
+  args: {
+    text: 'More information about this label',
+    position: 'right',
+    children: <span style={{ textDecoration: 'underline dotted' }}>Hover this text</span>,
+  },
+};