@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Timeline/Timeline.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimelineItem } from "./TimelineItem";
+import { DefaultTimelineDefinition } from "./Timeline.definition";
+import { Timeline } from "./Timeline";
+import { Box } from "@mui/material";
+
+const meta: Meta<typeof Timeline> = {
+  title: "Components/Timeline",
+  component: Timeline,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const Default: Story = {
+  args: {
+      position: "right"
+  },
+  render: (args) => (
+    <Box sx={{ width: 300 }}>
+      <Timeline {...args}>
+        <TimelineItem>
+          eat
+        </TimelineItem>
+        <TimelineItem>
+          code
+        </TimelineItem>
+        <TimelineItem>
+          sleep
+        </TimelineItem>
+      </Timeline>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Ejemplo básico de timeline"
+      },
+      source: {
+        code: DefaultTimelineDefinition
+      }
+    }
+  }
+};
+
+export const ColorVariant: Story = {
+  render: () => (
+    <Box sx={{ width: 300 }}>
+      <Timeline>
+        <TimelineItem dotColor="success" connectorColor="error">
+          eat
+        </TimelineItem>
+        <TimelineItem dotColor="primary" connectorColor="success">
+          code
+        </TimelineItem>
+        <TimelineItem dotColor="warning">
+          repeat
+        </TimelineItem>
+      </Timeline>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Variantes de color en los dots y conectores"
+      },
+      source: {
+        code: DefaultTimelineDefinition
+      }
+    }
+  }
+};
+
+export const PositionVariant: Story = {
+  render: () => (
+    <Box sx={{ width: 300 }}>
+      <Timeline position="alternate">
+        <TimelineItem>
+          eat
+        </TimelineItem>
+        <TimelineItem>
+          code
+        </TimelineItem>
+        <TimelineItem>
+          repeat
+        </TimelineItem>
+      </Timeline>
+    </Box>
+  ),
+  args: {
+    position: "alternate"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Variantes de color en los dots y conectores"
+      },
+      source: {
+        code: DefaultTimelineDefinition
+      }
+    }
+  }
+};

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import MuiTimeline from '@mui/lab/Timeline';
+import { timelineItemClasses } from '@mui/lab/TimelineItem';
+
+import type { TimelineItemProps } from './TimelineItem';
+
+export interface TimelineProps {
+  children: React.ReactElement<TimelineItemProps>[];
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
+  sx?: object;
+}
+
+export const Timeline: React.FC<TimelineProps> = ({ children, position = "right", sx }) => {
+  const count = React.Children.count(children);
+
+    const customSx = (position === "left" || position === "right")
+    ? {
+        [`& .${timelineItemClasses.root}:before`]: {
+          flex: 0,
+          padding: 0,
+        },
+        ...sx,
+      }
+    : sx;
+    
+  return (
+    <MuiTimeline position={position}
+      sx={{...customSx}}
+      >
+      {React.Children.map(children, (child, idx) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+            connectorColor: idx < count - 1
+              ? child.props.connectorColor ?? 'grey'
+              : undefined,
+          })
+          : null
+      )}
+    </MuiTimeline>
+
+  );
+};
+
+export default Timeline;

package/src/components/Timeline/TimelineItem.tsx

@@ -0,0 +1,31 @@
+
+import MuiTimelineItem from "@mui/lab/TimelineItem";
+import MuiTimelineSeparator from "@mui/lab/TimelineSeparator";
+import MuiTimelineConnector from "@mui/lab/TimelineConnector";
+import MuiTimelineContent from "@mui/lab/TimelineContent";
+import MuiTimelineDot from "@mui/lab/TimelineDot";
+
+export interface TimelineItemProps {
+  dotColor?: 'primary' | 'secondary' | 'grey' | 'inherit' | 'success' | 'error' | 'info' | 'warning';
+  connectorColor?: 'success' | 'error' | 'info' | 'warning' | 'primary' | 'secondary' | 'grey';
+  children: React.ReactNode;
+}
+
+export const TimelineItem: React.FC<TimelineItemProps> = ({
+  dotColor = 'grey',
+  connectorColor,
+  children
+}) => {
+  const color = connectorColor ? `${connectorColor}.main` : 'secondary.main';
+  return (
+    <MuiTimelineItem>
+      <MuiTimelineSeparator>
+        <MuiTimelineDot color={dotColor} />
+        {connectorColor !== undefined && <MuiTimelineConnector sx={{ bgcolor: color }} />}
+      </MuiTimelineSeparator>
+      <MuiTimelineContent>{children}</MuiTimelineContent>
+    </MuiTimelineItem>
+  );
+};
+
+export default TimelineItem

package/src/components/Timeline/index.ts

@@ -0,0 +1,5 @@
+export { Timeline, default } from './Timeline';
+export type { TimelineProps } from './Timeline';
+
+export { TimelineItem } from './TimelineItem';
+export type { TimelineItemProps } from './TimelineItem';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Tooltip from './Tooltip'; // Asegúrate que la ruta sea correcta
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { Input } from '../Input/Input';
+
+// Helper controlado para envolver nuestro Input propio con estado local
+const TooltipNameInput: React.FC = () => {
+  const [value, setValue] = useState<string | number>('');
+  return (
+    <Input
+      label="Nombre"
+      value={value}
+      onChange={(next) => setValue(next)}
+    />
+  );
+};
+
+// --- Metadatos de la Historia ---
+// Define la configuración global de tu componente en Storybook
+const meta: Meta<typeof Tooltip> = {
+  // Título que aparecerá en el sidebar de Storybook
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  // Parámetros para configurar el comportamiento en la documentación
+  parameters: {
+    layout: 'centered', // Centra el componente en el lienzo
+  },
+  // Documentación de los argumentos (props)
+  
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+// Define el tipo de tu historia para inferir los argumentos (props)
+type Story = StoryObj<typeof Tooltip>;
+
+// --- Definición de Historias ---
+
+const textoLargo = "Este es un texto de Tooltip muy largo para demostrar cómo el 'maxWidth' limita la longitud de la línea y obliga al texto a saltar a la siguiente línea, mejorando la legibilidad en tooltips largos.";
+
+
+/**
+ * Historia 1: Tooltip Básico
+ * Muestra el Tooltip sobre un botón sin especificar un ancho máximo.
+ */
+export const TooltipBasico: Story = {
+  args: {
+    text: 'Información corta y concisa.',
+    children: <Button variant="contained">Pasa el ratón aquí</Button>,
+  },
+};
+
+/**
+ * Historia 2: Tooltip con Ancho Máximo Específico
+ * Muestra un texto largo y aplica un ancho máximo para forzar el salto de línea.
+ */
+export const TooltipConAnchoMaximo: Story = {
+  args: {
+    text: textoLargo,
+    maxWidth: 200, // Aplicamos el ancho máximo
+    children: <Button variant="outlined">Tooltip con Ancho Máximo (200px)</Button>,
+  },
+};
+
+/**
+ * Historia 3: Tooltip Aplicado a un Campo de Texto (TextField)
+ * Demuestra que el componente funciona con cualquier elemento.
+ */
+export const AplicadoAElementoDeFormulario: Story = {
+  args: {
+    text: 'Introduce tu nombre completo y validado.',
+    maxWidth: 300,
+    children: <TooltipNameInput />,
+  },
+};
+
+/**
+ * Historia 4: Ejemplo en un Contenedor con Estilos
+ * Muestra el uso de la propiedad 'sx' opcional en el contenedor.
+ */
+export const ContenedorEstilizado: Story = {
+    args: {
+        text: 'Este texto se muestra al pasar el ratón sobre el span estilizado.',
+        maxWidth: 250,
+        sx: { // Estilos aplicados al Box que envuelve el children
+            border: '2px dashed #007bff',
+            padding: '8px',
+            borderRadius: '4px',
+            backgroundColor: '#e6f7ff',
+        },
+        children: <span>Contenedor Estilizado (Hover aquí)</span>,
+    }
+}
+
+
+/**
+ * Historia 5: Variantes Múltiples
+ * Utiliza el 'render' para mostrar varios ejemplos a la vez.
+ */
+export const VariantesMultiples: Story = {
+    // Necesitamos un Stack para organizar los elementos
+    render: (args) => (
+        <Stack spacing={4} alignItems="flex-start" sx={{ padding: '20px' }}>
+            <Tooltip {...args} text="Tooltip #1: Básico" maxWidth={150}>
+                <Button variant="contained" color="primary">Botón A</Button>
+            </Tooltip>
+
+            <Tooltip {...args} text="Tooltip #2: Un poco más de info" maxWidth={180}>
+                <Button variant="contained" color="secondary">Botón B</Button>
+            </Tooltip>
+
+            <Tooltip {...args} text={textoLargo} maxWidth={280}>
+                <Button variant="text">Texto Largo</Button>
+            </Tooltip>
+        </Stack>
+    ),
+    // Eliminamos el layout centered para esta historia
+    parameters: {
+        layout: 'padded', 
+    },
+    // Dejamos el 'args' de 'text' vacío ya que se sobrescribe en el render
+    args: {
+        text: '', 
+        children: undefined, 
+    }
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import MuiTooltip from '@mui/material/Tooltip'; 
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material';
+
+/**
+ * Propiedades del componente Tooltip.
+ * @param {string} text - El texto a mostrar dentro del Tooltip.
+ * @param {number} [maxWidth] - El ancho máximo opcional del Tooltip en píxeles.
+ * @param {React.ReactNode} children - El elemento al que se le aplicará el Tooltip.
+ * @param {SxProps<Theme>} [sx] - Estilos opcionales para el Box contenedor.
+ */
+interface TooltipProps {
+  text: string;
+  maxWidth?: number;
+  children: React.ReactNode;
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * Componente Tooltip reutilizable.
+ * Muestra un texto al pasar el ratón sobre su elemento hijo, 
+ * permitiendo un ancho máximo configurable.
+ * * @param {TooltipProps} props - Propiedades del Tooltip.
+ */
+const Tooltip: React.FC<TooltipProps> = ({ text, maxWidth, children, sx }) => {
+  
+  const tooltipContentStyle: SxProps<Theme> = {
+    
+    ...(maxWidth && { maxWidth: maxWidth }), 
+    padding: '4px 8px', 
+    textAlign: 'center',
+    
+  };
+
+  return (
+    
+    <MuiTooltip
+      title={
+        
+        <Typography variant="caption" component="span" sx={tooltipContentStyle}>
+          {text}
+        </Typography>
+      }
+      
+      placement="top" 
+      arrow 
+    >
+      
+      <Box component="span" sx={{ display: 'inline-block', ...sx }}>
+        {children}
+      </Box>
+    </MuiTooltip>
+  );
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip';

package/src/components/_shared/formField.sx.ts

@@ -0,0 +1,118 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import {
+  LABEL_COLOR_FILLED,
+  LABEL_COLOR_FOCUSED,
+  LABEL_COLOR_REST,
+  LABEL_FONT_WEIGHT_FILLED,
+  LABEL_MARGIN_TOP,
+  LABEL_SHRINK_TRANSFORM,
+  LABEL_TRANSFORM_ORIGIN,
+  LABEL_TRANSITION,
+} from '../../theme/tokens';
+
+export type LabelPosition = 'outside' | 'floating';
+
+export interface BuildFormFieldSxOptions {
+  borderRadius: number | string;
+  labelPosition: LabelPosition;
+  /**
+   * Si es `true`, los selectores incluyen también la API nueva de MUI X
+   * Pickers (v8): `MuiPickersInputBase-root`, `MuiPickersOutlinedInput-*`.
+   */
+  includePickersApi?: boolean;
+  /**
+   * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'outside'.
+   * Usar para paddings específicos del componente (p.ej. MuiAutocomplete-input).
+   */
+  extraOutsideSx?: Record<string, any>;
+  /**
+   * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'floating'.
+   */
+  extraFloatingSx?: Record<string, any>;
+}
+
+const toRadius = (borderRadius: number | string) =>
+  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+
+/**
+ * Builder del sx compartido por todos los campos de formulario
+ * (Input/Select/Autocomplete/DatePicker/DateTimePicker).
+ *
+ * Produce:
+ * - en modo "floating": sólo el border-radius del outlined input;
+ * - en modo "outside": todo el pack (margen superior, label flotante afuera,
+ *   input base, notched outline oculto, helper text sin margen izquierdo).
+ *
+ * Componentes con paddings o selectores propios pueden inyectarlos vía
+ * `extraOutsideSx` / `extraFloatingSx`.
+ */
+export const buildFormFieldSx = ({
+  borderRadius,
+  labelPosition,
+  includePickersApi = false,
+  extraOutsideSx,
+  extraFloatingSx,
+}: BuildFormFieldSxOptions): SxProps<Theme> => {
+  const radius = toRadius(borderRadius);
+
+  // ── Selectores (alternan según la API de pickers) ────────────────────
+  const outlinedRootSelector = includePickersApi
+    ? '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root'
+    : '& .MuiOutlinedInput-root';
+
+  const inputBaseSelector = includePickersApi
+    ? '& .MuiInputBase-root, & .MuiPickersInputBase-root'
+    : '& .MuiInputBase-root';
+
+  const notchedOutlineSelector = includePickersApi
+    ? '& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline'
+    : '& .MuiOutlinedInput-notchedOutline';
+
+  // ── Floating ─────────────────────────────────────────────────────────
+  if (labelPosition === 'floating') {
+    return {
+      [outlinedRootSelector]: { borderRadius: radius },
+      ...(extraFloatingSx ?? {}),
+    };
+  }
+
+  // ── Outside ──────────────────────────────────────────────────────────
+  return {
+    marginTop: LABEL_MARGIN_TOP,
+
+    '& .MuiInputLabel-root': {
+      color: LABEL_COLOR_REST,
+      transition: LABEL_TRANSITION,
+
+      // Estado shrunk (focused o con valor): flota ARRIBA del input.
+      '&.MuiInputLabel-shrink': {
+        transform: LABEL_SHRINK_TRANSFORM,
+        transformOrigin: LABEL_TRANSFORM_ORIGIN,
+        color: LABEL_COLOR_FILLED,
+        fontWeight: LABEL_FONT_WEIGHT_FILLED,
+      },
+
+      '&.Mui-focused': { color: LABEL_COLOR_FOCUSED },
+    },
+
+    // Input base — centra verticalmente (clásico y, si aplica, pickers).
+    [inputBaseSelector]: {
+      borderRadius: radius,
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    // El label flota afuera: ocultar legend del notch.
+    [notchedOutlineSelector]: {
+      top: 0,
+      '& legend': { display: 'none' },
+    },
+
+    '& .MuiFormHelperText-root': {
+      marginLeft: 0,
+    },
+
+    ...(extraOutsideSx ?? {}),
+  };
+};

package/src/components/_shared/mergeSx.ts

@@ -0,0 +1,16 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+/**
+ * Merge helper para props `sx` de MUI. Acepta formatos objeto o array y
+ * devuelve un array combinado. El `extra` se aplica después del `base` —
+ * el consumer puede pisar los defaults del componente.
+ */
+export const mergeSx = (
+  base: SxProps<Theme>,
+  extra?: SxProps<Theme>,
+): SxProps<Theme> => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr] as SxProps<Theme>;
+};

package/src/components/_shared/resolvePreset.ts

@@ -0,0 +1,38 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import type { LibraryComponentName, PresetStyle } from '../../theme/componentStyles';
+
+/**
+ * Nombre del preset built-in del paquete. No se registra en el theme: si un
+ * componente recibe `preset="default"` (o no recibe preset), sólo aplica el
+ * estilo base de fábrica.
+ */
+export const DEFAULT_PRESET_NAME = 'default';
+
+/**
+ * Resuelve el sx de un preset registrado en `theme.styles[componentName]`.
+ *
+ * - Si `presetName` es `"default"` o `undefined`, devuelve `undefined`
+ *   (caller sólo aplicará el estilo base del paquete).
+ * - Si la entrada en el theme es una función `(theme) => sx`, se ejecuta.
+ * - Si la entrada no existe, devuelve `undefined` silenciosamente (no se
+ *   rompe el componente — la responsabilidad de registrarlo es del consumer).
+ */
+export function resolvePreset(
+  componentName: LibraryComponentName,
+  presetName: string | undefined,
+  theme: Theme,
+): SxProps<Theme> | undefined {
+  // Si no hay preset explícito, intentar aplicar el preset "default" del theme.
+  // Esto permite que el consumer registre estilos globales sin necesidad de
+  // pasar `preset` en cada instancia del componente.
+  const nameToResolve = presetName || DEFAULT_PRESET_NAME;
+
+  const componentPresets = theme.styles?.[componentName];
+  if (!componentPresets) return undefined;
+
+  const entry: PresetStyle | undefined = componentPresets[nameToResolve];
+  if (!entry) return undefined;
+
+  return typeof entry === 'function' ? entry(theme) : entry;
+}