@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

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

@@ -0,0 +1,167 @@
+// 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

@@ -0,0 +1,265 @@
+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

@@ -0,0 +1,61 @@
+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

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

package/src/components/Column/Column.tsx

@@ -0,0 +1,29 @@
+// -----------------------------------------------------------------------------
+// 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

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