@soyfri/shared-library 1.5.0 → 1.6.0-beta.1

package/src/components/Chip/Chip.definitions.ts

@@ -1,167 +0,0 @@
-// Chip.definitions.ts
-
-export const BasicChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const BasicChipExample = () => {
-  return (
-    <Chip label="Etiqueta Básica" />
-  );
-};
-`;
-
-export const ClickableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ClickableChipExample = () => {
-  const handleClick = () => {
-    alert('Chip clickeado!');
-  };
-  return (
-    <Chip label="Clickeable" onClick={handleClick} />
-  );
-};
-`;
-
-export const DeletableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export const DeletableChipExample = () => {
-  const handleDelete = () => {
-    alert('Chip borrado!');
-  };
-  return (
-    <Chip label="Borrable" onDelete={handleDelete} deleteIcon={<DeleteIcon />} />
-  );
-};
-`;
-
-export const ChipWithAvatarDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Avatar, Box, Typography } from '@mui/material';
-
-export const ChipWithAvatarExample = () => {
-  return (
-    <Chip
-      label="Con Avatar"
-      avatar={<Avatar alt="Avatar" src="https://placehold.co/40x40/FF7F50/FFFFFF?text=A" />}
-    />
-  );
-};
-`;
-
-export const ChipWithIconDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import FaceIcon from '@mui/icons-material/Face';
-
-export const ChipWithIconExample = () => {
-  return (
-    <Chip label="Con Icono" icon={<FaceIcon />} />
-  );
-};
-`;
-
-export const DisabledChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const DisabledChipExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Deshabilitado" disabled />
-      <Chip label="Deshabilitado Borrable" onDelete={() => {}} disabled />
-    </Box>
-  );
-};
-`;
-
-export const ChipVariantsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipVariantsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Filled (Default)" />
-      <Chip label="Outlined" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipColorsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipColorsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-      <Chip label="Default" />
-      <Chip label="Primary" color="primary" />
-      <Chip label="Secondary" color="secondary" />
-      <Chip label="Error" color="error" />
-      <Chip label="Info" color="info" />
-      <Chip label="Success" color="success" />
-      <Chip label="Warning" color="warning" />
-      <Chip label="Primary Outlined" color="primary" variant="outlined" />
-      <Chip label="Success Outlined" color="success" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipSizesDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipSizesExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Chip label="Pequeño" size="small" />
-      <Chip label="Mediano (Default)" size="medium" />
-    </Box>
-  );
-};
-`;
-
-export const CustomContentChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography, Avatar } from '@mui/material';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-
-export const CustomContentChipExample = () => {
-  const handleClick = () => alert('Perfil visto!');
-  const handleDelete = () => alert('Perfil eliminado!');
-
-  return (
-    <Chip
-      avatar={<Avatar src="https://placehold.co/40x40/87CEEB/FFFFFF?text=PR" />}
-      label={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
-          <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Perfil Completo</Typography>
-        </Box>
-      }
-      onDelete={handleDelete}
-      onClick={handleClick}
-      color="info"
-      variant="outlined"
-    />
-  );
-};
-`;

package/src/components/Chip/Chip.stories.tsx

@@ -1,265 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import {
-  Box,
-  Typography,
-  Avatar, // Necesario para la historia con avatar
-  Chip as MuiChip, // Renombrado para evitar conflicto con nuestro componente Chip
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete'; // Icono para deletable chip
-import FaceIcon from '@mui/icons-material/Face'; // Icono para chip con icono
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; // Icono para custom content
-
-// Importa el componente Chip
-import { Chip } from './Chip';
-
-// Importa las definiciones de las historias
-import {
-  BasicChipDefinition,
-  ClickableChipDefinition,
-  DeletableChipDefinition,
-  ChipWithAvatarDefinition,
-  ChipWithIconDefinition,
-  DisabledChipDefinition,
-  ChipVariantsDefinition,
-  ChipColorsDefinition,
-  ChipSizesDefinition,
-  CustomContentChipDefinition,
-} from './Chip.definitions';
-
-// =============================================================================
-// Definición de las meta-propiedades para Storybook
-// =============================================================================
-const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
-  component: Chip,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Un componente `Chip` reutilizable de Material UI que muestra una pequeña pieza de información. Soporta varias variantes visuales, avatares, iconos y acciones.',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'El contenido principal del chip. Puede ser un string o JSX.' },
-    onClick: { action: 'clicked', description: 'Función de callback que se dispara al hacer click en el chip.' },
-    onDelete: { action: 'deleted', description: 'Función de callback que se dispara al hacer click en el botón de borrar del chip. Si se provee, muestra un botón de borrar.' },
-    avatar: { control: false, description: 'Un componente `Avatar` a mostrar al inicio del chip.' },
-    icon: { control: false, description: 'Un componente `Icon` a mostrar al inicio del chip (alternativa al avatar).' },
-    disabled: { control: 'boolean', description: 'Si es verdadero, el chip estará deshabilitado y no interactuable.' },
-    variant: {
-      control: 'radio',
-      options: ['filled', 'outlined'],
-      description: 'La variante visual del chip.',
-      defaultValue: 'filled',
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning'],
-      description: 'El color predefinido del chip.',
-      defaultValue: 'default',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium'],
-      description: 'El tamaño del chip.',
-      defaultValue: 'medium',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Chip>;
-
-// =============================================================================
-// Historias
-// =============================================================================
-
-export const BasicChip: Story = {
-  render: () => {
-    return <Chip label="Etiqueta Básica" />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip simple con solo una etiqueta de texto."
-      },
-      source: { code: BasicChipDefinition.trim() }
-    }
-  }
-};
-
-export const ClickableChip: Story = {
-  render: () => {
-    const handleClick = () => {
-      alert('Chip clickeado!');
-    };
-    return <Chip label="Clickeable" onClick={handleClick} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que puede ser clickeado y dispara un evento `onClick`."
-      },
-      source: { code: ClickableChipDefinition.trim() }
-    }
-  }
-};
-
-export const DeletableChip: Story = {
-  render: () => {
-    const handleDelete = () => {
-      alert('Chip borrado!');
-    };
-    return <Chip label="Borrable" onDelete={handleDelete} deleteIcon={<DeleteIcon />} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que incluye un botón de borrar (`DeleteIcon` por defecto o personalizado) y dispara un evento `onDelete`."
-      },
-      source: { code: DeletableChipDefinition.trim() }
-    }
-  }
-};
-
-export const ChipWithAvatar: Story = {
-  render: () => {
-    return (
-      <Chip
-        label="Con Avatar"
-        avatar={<Avatar alt="Avatar" src="https://placehold.co/40x40/FF7F50/FFFFFF?text=A" />}
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que muestra un `Avatar` al inicio, útil para representar usuarios o entidades."
-      },
-      source: { code: ChipWithAvatarDefinition.trim() }
-    }
-  }
-};
-
-export const ChipWithIcon: Story = {
-  render: () => {
-    return <Chip label="Con Icono" icon={<FaceIcon />} />;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un chip que muestra un `Icon` de Material UI al inicio, como alternativa a un avatar."
-      },
-      source: { code: ChipWithIconDefinition.trim() }
-    }
-  }
-};
-
-export const DisabledChip: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Chip label="Deshabilitado" disabled />
-        <Chip label="Deshabilitado Borrable" onDelete={() => alert('No se puede borrar!')} disabled />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Chips que están deshabilitados, impidiendo cualquier interacción o acción."
-      },
-      source: { code: DisabledChipDefinition.trim() }
-    }
-  }
-};
-
-export const ChipVariants: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Chip label="Filled (Default)" />
-        <Chip label="Outlined" variant="outlined" />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra las variantes `filled` (por defecto) y `outlined` del chip."
-      },
-    source: { code: ChipVariantsDefinition.trim() }
-  }
-};
-
-export const ChipColors: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-        <Chip label="Default" />
-        <Chip label="Primary" color="primary" />
-        <Chip label="Secondary" color="secondary" />
-        <Chip label="Error" color="error" />
-        <Chip label="Info" color="info" />
-        <Chip label="Success" color="success" />
-        <Chip label="Warning" color="warning" />
-        <MuiChip label="Primary Outlined" color="primary" variant="outlined" /> {/* Usando MuiChip para demostrar combinado */}
-        <MuiChip label="Success Outlined" color="success" variant="outlined" /> {/* Usando MuiChip para demostrar combinado */}
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Ejemplos de chips con diferentes colores predefinidos de Material UI, tanto en variante `filled` como `outlined`."
-      },
-    source: { code: ChipColorsDefinition.trim() }
-  }
-};
-
-export const ChipSizes: Story = {
-  render: () => {
-    return (
-      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-        <Chip label="Pequeño" size="small" />
-        <Chip label="Mediano (Default)" size="medium" />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra los diferentes tamaños disponibles para el chip: `small` y `medium`."
-      },
-    source: { code: ChipSizesDefinition.trim() }
-  }
-};
-
-export const CustomContentChip: Story = {
-  render: () => {
-    const handleClick = () => alert('Perfil visto!');
-    const handleDelete = () => alert('Perfil eliminado!');
-
-    return (
-      <Chip
-        avatar={<Avatar src="https://placehold.co/40x40/87CEEB/FFFFFF?text=PR" />}
-        label={
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
-            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Perfil Completo</Typography>
-          </Box>
-        }
-        onDelete={handleDelete}
-        onClick={handleClick}
-        color="info"
-        variant="outlined"
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un chip con contenido personalizado en su etiqueta, combinando iconos y tipografía avanzada."
-      },
-    source: { code: CustomContentChipDefinition.trim() }
-  }
-};

package/src/components/Chip/Chip.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Chip as MuiChip, ChipProps as MuiChipProps, Avatar } from '@mui/material';
-
-// Define las props para el componente Chip personalizado
-// Omitimos algunas props de MuiChipProps que redefiniremos para mayor claridad
-export interface ChipProps extends Omit<MuiChipProps, 'onClick' | 'onDelete' | 'avatar' | 'icon' | 'label' | 'variant' | 'color' | 'size'> {
-  // Contenido principal del chip
-  label: React.ReactNode;
-  // Handler para el evento click del chip
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  // Handler para el evento delete del chip (muestra un botón de borrar)
-  onDelete?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  // Elemento Avatar a mostrar al inicio del chip
-  avatar?: React.ReactElement;
-  // Icono a mostrar al inicio del chip (alternativa a avatar)
-  icon?: React.ReactElement;
-  // Si el chip está deshabilitado
-  disabled?: boolean;
-  // Variante visual del chip
-  variant?: 'filled' | 'outlined';
-  // Color del chip
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-  // Tamaño del chip
-  size?: 'small' | 'medium';
-}
-
-/**
- * Componente Chip personalizado de Material UI.
- * Proporciona una interfaz simplificada para el componente Chip de Material UI,
- * permitiendo una fácil personalización de etiquetas, avatares, iconos y acciones.
- */
-export const Chip: React.FC<ChipProps> = ({
-  label,
-  onClick,
-  onDelete,
-  avatar,
-  icon,
-  disabled = false,
-  variant = 'filled', // Default variant
-  color = 'default',  // Default color
-  size = 'medium',    // Default size
-  ...rest // Permite pasar otras props de MuiChipProps (ej. sx, className)
-}) => {
-  return (
-    <MuiChip
-      label={label}
-      onClick={onClick}
-      onDelete={onDelete}
-      avatar={avatar}
-      icon={icon}
-      disabled={disabled}
-      variant={variant}
-      color={color}
-      size={size}
-      clickable={!!onClick} // Habilita el estilo clickable si se proporciona onClick
-      {...rest}
-    />
-  );
-};
-
-export default Chip;

package/src/components/Chip/index.ts

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

package/src/components/Column/Column.tsx

@@ -1,29 +0,0 @@
-// -----------------------------------------------------------------------------
-// Componente Column: Define la estructura de una columna en la tabla.
-// Este componente NO renderiza nada directamente, solo pasa sus props al componente Table.
-// -----------------------------------------------------------------------------
-// Tipo auxiliar para 'field'.
-// Define si 'field' es una sola clave (keyof T) o un array de claves (Array<keyof T>).
-type FieldName<T> = keyof T | Array<keyof T>;
-
-export interface ColumnProps<T> {
-  name: string; // Nombre a mostrar en el encabezado de la columna
-  field: FieldName<T>; // Define el campo o campos a usar de los datos
-  // La prop 'children' ahora recibe 'Partial<T>'.
-  // Esto permite a TypeScript inferir los tipos de las propiedades desestructuradas
-  // como 'avatar', 'nombre', etc., basándose en la interfaz genérica 'T' de tu data.
-  width?: string; 
-  children: (fieldData: Partial<T>) => React.ReactNode;
-}
-
-// El componente Column no renderiza nada directamente en el DOM.
-// Su propósito es actuar como un contenedor de configuración para el componente Table.
-export function Column<T>(props: ColumnProps<T>): React.ReactNode {
-  return null;
-}
-
-// Esto es crucial para que el componente Table pueda identificar a nuestros componentes Column
-// entre sus hijos, utilizando (child.type as any).displayName === 'Column'.
-Column.displayName = 'Column';
-
-export default Column;

package/src/components/Column/index.ts

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