@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Gallery/GalleryThumbnails.tsx

@@ -1,122 +0,0 @@
-import { Box, IconButton } from '@mui/material';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-
-import type { GalleryItem } from './Gallery';
-
-interface Props {
-  items: GalleryItem[];
-  selectedIdx: number;
-  onSelect: (idx: number) => void;
-  thumbStartIdx: number;
-  visibleCount: number;
-  onThumbUp: () => void;
-  onThumbDown: () => void;
-  isMobile: boolean;
-}
-
-export const GalleryThumbnails = ({
-  items,
-  selectedIdx,
-  onSelect,
-  thumbStartIdx,
-  visibleCount,
-  onThumbUp,
-  onThumbDown,
-  isMobile,
-}: Props) => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexDirection: isMobile ? 'row' : 'column',
-      alignItems: 'center',
-      minWidth: 70,
-      width: 70,
-      borderRadius: 1,
-      bgcolor: 'grey.100',
-      boxSizing: 'border-box',
-      py: 1,
-      mb: isMobile ? 2 : 0,
-      px: isMobile ? 1 : 0,
-    }}
-  >
-    <IconButton
-      size="small"
-      onClick={onThumbUp}
-      disabled={thumbStartIdx === 0}
-      aria-label={isMobile ? 'Miniatura anterior' : 'Miniaturas arriba'}
-      sx={{ mb: isMobile ? 0 : 1, mr: isMobile ? 1 : 0 }}
-    >
-      {isMobile ? <KeyboardArrowLeftIcon /> : <KeyboardArrowUpIcon />}
-    </IconButton>
-    {items
-      .slice(thumbStartIdx, thumbStartIdx + visibleCount)
-      .map((item, idx) => {
-        const realIdx = thumbStartIdx + idx;
-        const isSelected = selectedIdx === realIdx;
-        const handleSelect = () => onSelect(realIdx);
-        return (
-          <Box
-            key={`${realIdx}-${item.url}`}
-            role="button"
-            tabIndex={0}
-            aria-label={item.title}
-            aria-pressed={isSelected}
-            onClick={handleSelect}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                handleSelect();
-              }
-            }}
-            sx={{
-              cursor: 'pointer',
-              width: 60,
-              height: 60,
-              borderRadius: 1,
-              border: (theme) =>
-                `2px solid ${
-                  isSelected ? theme.palette.primary.main : theme.palette.divider
-                }`,
-              overflow: 'hidden',
-              bgcolor: 'action.hover',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexShrink: 0,
-              m: isMobile ? '0 4px' : '4px 0',
-              outline: 'none',
-              '&:focus-visible': {
-                boxShadow: (theme) =>
-                  `0 0 0 2px ${theme.palette.primary.main}`,
-              },
-            }}
-          >
-            <Box
-              component="img"
-              src={item.thumbnail ?? item.url}
-              alt={item.title}
-              sx={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-              }}
-            />
-          </Box>
-        );
-      })}
-    <IconButton
-      size="small"
-      onClick={onThumbDown}
-      disabled={thumbStartIdx + visibleCount >= items.length}
-      aria-label={isMobile ? 'Miniatura siguiente' : 'Miniaturas abajo'}
-      sx={{ mt: isMobile ? 0 : 1, ml: isMobile ? 1 : 0 }}
-    >
-      {isMobile ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
-    </IconButton>
-  </Box>
-);
-
-export default GalleryThumbnails;

package/src/components/Gallery/index.ts

@@ -1,2 +0,0 @@
-export { Gallery, default } from './Gallery';
-export type { GalleryProps, GalleryItem } from './Gallery';

package/src/components/Icon/Icon.stories.tsx

@@ -1,121 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Icon } from './Icon';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import SettingsIcon from '@mui/icons-material/Settings';
-
-const meta: Meta<typeof Icon> = {
-  title: 'Components/Icon',
-  component: Icon,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente Icon con soporte para 3 fuentes: `children` (elemento MUI), `path` (string SVG inline, para los iconos custom de Metronic) y `url` (ruta a un archivo `.svg`).',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-// ── Modo legacy: children ──────────────────────────────────────────────
-
-export const Default: Story = {
-  args: {
-    children: <NotificationsIcon />,
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    children: <SettingsIcon />,
-    outlined: true,
-  },
-};
-
-export const Spinning: Story = {
-  args: {
-    children: <SettingsIcon />,
-    spin: true,
-  },
-};
-
-export const WithBadge: Story = {
-  args: {
-    children: <NotificationsIcon />,
-    badge: 3,
-    badgeColor: 'error',
-  },
-};
-
-export const LargeWhiteIcon: Story = {
-  args: {
-    children: <NotificationsIcon />,
-    size: 'xl',
-    white: true,
-    badge: 10,
-    badgeColor: 'primary',
-  },
-};
-
-// ── Nuevas fuentes: path + url ────────────────────────────────────────
-
-export const FromPathD: Story = {
-  args: {
-    path: 'M12 2L2 22h20L12 2zm0 3.83L19.17 20H4.83L12 5.83zM11 16h2v2h-2v-2zm0-6h2v5h-2v-5z',
-    color: '#f59e0b',
-    size: 'lg',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renderiza un SVG a partir del atributo `d` de un `<path>`. Es la forma en que Metronic suele entregar iconos custom.',
-      },
-    },
-  },
-};
-
-export const FromFullSvg: Story = {
-  args: {
-    path: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2" stroke="white" stroke-width="2" fill="none"/></svg>',
-    color: '#2563eb',
-    size: 'lg',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Si `path` contiene un `<svg>` completo (con `viewBox`, múltiples paths, etc), se inyecta tal cual.',
-      },
-    },
-  },
-};
-
-export const FromUrl: Story = {
-  args: {
-    url: 'https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg',
-    alt: 'SVG logo',
-    size: 'xl',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renderiza un `<img>` apuntando a un archivo `.svg`. Útil para assets locales (p.ej. `/public/icons/foo.svg`).',
-      },
-    },
-  },
-};
-
-export const PathWithBadge: Story = {
-  args: {
-    path: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
-    badge: '9+',
-    badgeColor: 'error',
-    size: 'md',
-  },
-};

package/src/components/Icon/Icon.tsx

@@ -1,163 +0,0 @@
-import React, { type ReactNode, useMemo } from 'react';
-import { Badge, styled } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface IconProps {
-  /**
-   * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
-   * Si se usa junto con `path` o `url`, `children` tiene prioridad.
-   */
-  children?: ReactNode;
-  /**
-   * Ruta SVG inline. Acepta dos formatos:
-   * - Solo el valor del atributo `d` de un `<path>` (ej. `"M12 2L2 22..."`).
-   * - Un SVG completo (ej. `"<svg>...</svg>"`).
-   *
-   * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía
-   * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input
-   * de usuario o de backends no confiables** — riesgo XSS.
-   */
-  path?: string;
-  /**
-   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
-   * El color del icono NO aplica en este modo (limitación de `<img>`).
-   */
-  url?: string;
-  /** Alt text cuando se usa `url`. Default: `"icon"`. */
-  alt?: string;
-  /**
-   * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
-   * ya viene como `<svg>` completo.
-   */
-  viewBox?: string;
-  color?: string;
-  outlined?: boolean;
-  spin?: boolean;
-  badge?: string | number;
-  badgeColor?: 'primary' | 'secondary' | 'error';
-  badgePosition?: {
-    vertical: 'top' | 'bottom';
-    horizontal: 'right' | 'left';
-  };
-  size?: IconSize;
-  black?: boolean;
-  white?: boolean;
-  className?: string;
-  sx?: SxProps<Theme>;
-}
-
-const sizeMap: Record<IconSize, number> = {
-  xs: 18,
-  sm: 24,
-  md: 36,
-  lg: 48,
-  xl: 64,
-};
-
-const StyledIcon = styled('span')<{
-  color?: string;
-  fontSize?: number;
-  spin?: boolean;
-  outlined?: boolean;
-}>(({ color, fontSize, spin, outlined }) => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: color,
-  fontSize: fontSize,
-  width: fontSize,
-  height: fontSize,
-  animation: spin ? 'spin 1s linear infinite' : undefined,
-  border: outlined ? '1px solid currentColor' : undefined,
-  borderRadius: '50%',
-  padding: outlined ? 4 : 0,
-  '@keyframes spin': {
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' },
-  },
-  '& svg': {
-    width: '100%',
-    height: '100%',
-    fill: 'currentColor',
-    display: 'block',
-  },
-  '& img': {
-    width: '100%',
-    height: '100%',
-    display: 'block',
-  },
-}));
-
-export const Icon: React.FC<IconProps> = ({
-  children,
-  path,
-  url,
-  alt = 'icon',
-  viewBox = '0 0 24 24',
-  color = 'var(--primary-color)',
-  outlined = false,
-  spin = false,
-  badge,
-  badgeColor = 'primary',
-  badgePosition = { vertical: 'bottom', horizontal: 'right' },
-  size = 'sm',
-  black,
-  white,
-  className,
-  sx,
-}) => {
-  const finalColor = white ? 'white' : black ? 'black' : color;
-  const iconSize = sizeMap[size];
-
-  const content = useMemo(() => {
-    if (children) return children;
-
-    if (path) {
-      const trimmed = path.trim();
-      if (trimmed.startsWith('<svg')) {
-        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;
-      }
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox={viewBox}
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path d={trimmed} />
-        </svg>
-      );
-    }
-
-    if (url) {
-      return <img src={url} alt={alt} />;
-    }
-
-    return null;
-  }, [children, path, url, alt, viewBox]);
-
-  return (
-    <Badge
-      badgeContent={badge}
-      color={badgeColor}
-      anchorOrigin={badgePosition}
-      invisible={badge === undefined}
-      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}
-    >
-      <StyledIcon
-        color={finalColor}
-        fontSize={iconSize}
-        spin={spin}
-        outlined={outlined}
-        className={`hsi-icon ${className || ''}`}
-        sx={sx}
-      >
-        {content}
-      </StyledIcon>
-    </Badge>
-  );
-};
-
-export default Icon;

package/src/components/Icon/index.ts

@@ -1,2 +0,0 @@
-export { Icon, default } from './Icon';
-export type { IconProps, IconSize } from './Icon';